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

Người đăng: yeu mai em on Thứ Ba, 27 tháng 8, 2013

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 : 
Recent post đẹp mắt và chuyên nghiệp cho Blog


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/AVvXsEhpwMjDU8N9IGnD7FY69s_LsPTO-Nut5AycPmHdLW2X5Bltz4bHoy6t_HSn8FXpcZKy-JG2Gsiqlg9BIs2uCz3DyKWEAkhd6kMQviWGFtBB7ynEmfQwee7wRvTT2Pis37OfGc-fQJwPO3X0/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 

{ 0 nhận xét... read them below or add one }

Đăng nhận xét