Tin mới

Advertisement

Binance

27 tháng 8, 2013

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

InstaFxCopy

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=' http://4.bp.blogspot.com/-KWsO3tko6NA/UhyG7oFhQrI/AAAAAAAADPg/g_0mMOueRgI/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 

8 nhận xét:

  1. Mình đã áp dụng thành công ! Tks bạn nhé

    Trả lờiXóa
  2. Bạn cho mình hỏi đoạn code chèn vào vị trí thì mình cho vào đâu ?

    Trả lờiXóa
  3. Trên bài viết có các vị trí đó bạn (dưới tiêu đề, dưới bài viết hoặc trên sidebar). Bạn dùng code ở cách A để dán vào sau 1 trong các thẻ ở cách B hoặc dán thẳng vào tiện ích nơi bạn muốn hiển thị

    Trả lờiXóa
  4. Bạn giúp mình làm thủ thuật này thành 3 cột đc ko vậy bạn ? Chuyển tiêu đề bài viết lên trên tấm hình đc ko bạn ?

    Trả lờiXóa
  5. Bạn có thể xem bài này nhé : http://quangvietmkt.blogspot.com/2013/05/tao-bai-viet-dang-anh-3-cot-cho-blog.html

    Trả lờiXóa
  6. và tại đây : http://quangvietmkt.blogspot.com/2013/09/recent-post-3-cot-anh-va-tieu-de-dep-mat.html

    Trả lờiXóa
  7. Mình có thể chó nó chỉ hiển thị các bài viết theo 1 nhãn được không bạn? mình mò mãi ko ra..... bạn chỉ mình với nhé.... cám ơn!

    Trả lờiXóa
  8. Bạn có thể tham khảo bài viết này nhé : http://quangvietmkt.blogspot.com/2013/09/recent-post-3-cot-anh-va-tieu-de-dep-mat.html

    Trả lờiXóa