Recent post đẹp mắt và chuyên nghiệp cho Blog

Tiếp tục đến với chủ đề hiện nay đang được rất nhiều bạn trẻ quan tâm đó là thủ thuật Blogspot . Hôm nay Viettin24h chia sẻ đến các bạn thủ thuật tạo bài viết mới cho cả blog và áp dùng cho cả nhãn riêng . Thủ thuật này có tính thẩm mỹ cao thích hợp cho nhiều yêu cầu của blog ! Tiện ích này gồm 2 cột ,ảnh và khung khi di chuột . 

Ảnh minh họa : 

Các bước thực hiện 

A : Chèn vào tiện ích
1. Đăng nhập Blogger
2. Chọn bố cục
3.Thêm tiện ích HTML/Javascript ==> Dán code bên dưới vào 

<style>

/*Tooltip*/
#osdhtmltooltip{
border: #999 1px solid;
padding: 4px;
font-size: 10pt;
z-index: 100;
left: -300px;
visibility: hidden;
width: 250px; /* Chiều rộng khung khi rê chuột */
font-family: Arial;
position: absolute;
background-color: #fcfee4;
text-align: left;
}
#osdhtmltooltip img{
float: left;
padding: 3px;
border: solid 1px #FFF;
margin: 2px;
}
#osdhtmltooltip h3{
color: #000;
padding: 2px;
margin: 0px;
font-weight: bold;
text-transform: none;
text-decoration: none;
}
#osdhtmltooltip span{
color: #999;
font-style: italic;
}
#osdhtmltooltip div{
color: #000;
}
#osdhtmlpointer{
z-index: 101;
left: -300px;
visibility: hidden;
position: absolute;
}

#rc-posts-2-col {
width:300px;/*Chiều rộng của tiện ích*/
}
#rc-posts-2-col h3 {
background: #FFF  no-repeat top left;
padding:3px 5px 14px 5px;
font-size:13px;
margin:0px;
color:#04226C;
}
table#rc-2cot {border-top:1px solid #ccc;border-bottom:1px solid #ccc; border-left:1px solid #ccc;}
#rc-tr1 {background:#f3f3f3;}
#rc-tr0 {background:#fff;}
#rc-td {padding:2px; color:#ff0000; border-right:1px solid #ccc;width:150px;}
#rc-td img {float:left; margin-right:2px; height:125px; width:150px; border:1px solid #ccc; padding:1px;}
#rc-td a {color:#ff0000;text-decoration:none;}
#rc-td a:hover {text-decoration:underline;}
</style>
</style>


<script src="https://script-viettin24h.googlecode.com/svn/branches/file-phu-rc2cot.js" type="text/javascript"></script>
<script type="text/javascript">
numposts = 12; /*Số bài viết và ảnh hiện thị  */
postcount = 400; /*Số kí tự của nội dung tóm tắt khi rê chuột*/
sumTitle = 40; /*Số kí tự tiêu đề bài viết*/
colortitle = "#555"; /*Màu chữ tiêu đề bài viết*/
tcolortitle = "#ff6c00"; 
cmcolor = "#6b1f01"; 
nocmtext = "No Comment";
cmtext = "Comments";
posttext = "Posted in";
label = "Blogspot%20tips";
home_page = "http://viettin24h.com/";
</script>
<div id="rc-posts-2-col"><h3>BÀI VIẾT MỚI:</h3><div id="rc-posts-loading"><img align='absmiddle' src=' https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdpkU52VUgWjUjYuWF0lH3tqqf1LzdSa3PThN0YrkE6dXySpAXpHdCJm8h3LucTBb-XWvpnxtX3wC4_HdqFaWXwZfjZ43NoglQzS4ik33dX1Gm7gAeUsxYj0Fv7jDj79xbmNoPob7EBpWf/s1600/ajax-loader.gif '/></div>
<script src="https://script-viettin24h.googlecode.com/svn/branches/tooltip-rc-post-2cot-all-label.js" type="text/javascript"></script>
</div>

Mình đã chú thích ngay cạnh rồi các bạn có gì không hiểu comment bên dưới nhé !

B: Chèn vào các vị trí 

1. Đăng nhập Blogger

2. Chọn mẫu=> Chỉnh sửa HTML

3. Thêm vào các vị trí theo ý muốn 

Đặt dưới tiêu đề bài viết

          <div class='post-header'>

hoặc        

<div class='post-header-line-1'/>

Đặt dưới chân bài viết 

<div class='post-footer-line post-footer-line-1'>                          

<div class='post-footer-line post-footer-line-2'>            

<div class='post-footer-line post-footer-line-3'> 

Với cách này thì các bạn cần chỉnh sửa lại các thuộc tính cho phù hợp 

Chúc các bạn thành công