Style mới cho tiện ích "Recent post" theo label ở Homepage

New Style Recent post for laber at Homepage

[Namkna's BlOg] - Từ sau khi hoàn thiện thủ thuật "Recent posts" hiện thị giống trang tin247.com, mình nảy ý định hiển thị nhiều kiểu khác nhau cho các bài viết trong widget "Recent posts". Tức là bài này hiển có kèm ảnh thumbnail , bài khác thì chỉ hiển thị tiêu đề... Với cách này, tiện ích Recent posts của chúng ta sẽ không còn đơn điệu nữa.

Lưu ý mẫu này phù hợp với BLog có phần Main (bài đăng) rộng khoảng 660Px. những Blog bài đăng có main nhỏ hơn thì cần phải có chút hiểu biết về CSS mới có thể áp dung rễ ràng được:

Các bạn có thẻ xem Demo:

Demo for Post

 

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

1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (Design)
3.  Thêm đoạn mã sau trước thẻ  ]]></b:skin>

/* MAIN HOME */
ul, ol, dl, li {padding: 0;margin: 0;list-style:none;}
a:hover {color: #CF152A;text-decoration: none;}
a:focus, a:hover, a:active {outline: none;}
h2, h3, h4 {margin:0;padding:0;font:bold 100% Verdana,Geneva,sans-serif;line-height:1.4em}
#outer-wrapper {padding:0;text-align:left;font:normal normal 100% Verdana,Geneva,sans-serif;}
#wrap {width:960px;margin:0 auto;}


#main-wrapper {width:440px;float:left;display:inline}

#main-home {width:652px;float:left;display:inline;}

.body-home {border:1px solid #cdcdcd;margin-top:15px;background:#fff;padding-bottom:10px}

.body-home-s {border:1px solid #cdcdcd;background:#fff;padding-bottom:10px;margin-bottom:15px;}

.body-s-left {background:#fff;margin:0;padding:8px 10px 0 10px;width:345px;float:left;border-right: 1px solid #cdcdcd}

.body-s-left img{background:#eee;border: 1px solid #ccc;float: left;margin-bottom:8px;padding:5px;width: 333px;height:239px;}

.body-s-left h2 {color:#383838;font-size:14px;font-family:Tahoma;margin:0;padding:0;line-height:1.3em}

.body-s-left h2 a{text-decoration:none;text-transform:none;color:#383838}

.body-s-left-info {margin:0;padding-top:8px;line-height:1.5em;font: normal 13px Tahoma;color:#383838;}

.body-s-right-li {width:265px;float:right;padding-right:10px;padding-top:5px}

.body-s-right-li ul {}   

.body-s-right-li  li {background:  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcnvZOyGIk2yTeZzVlyrqrUlzJl1_3JORBcm2uMr_fVWYSvJrB69V7cBsXlyILvGnEdOlda4YfOaPp9LPJUqMYcHtYXMowsMGFf-JwZDOMFOZP27fMYwlnFvMoHXOD4CDi8wPWGyIa_RA/s1600/green-star.gif)  no-repeat 3px 6px;padding:3px 0 3px 15px;line-height:1.3em;font: normal  12px Arial}

.body-s-right-li li a {color:#2B2B2B}

.body-h-left {margin:0;padding:8px 10px 0 10px;width:245px;float:left;border-right: 1px solid #cdcdcd}

.body-h-left img{background:#FFF;border: 1px solid #ccc;float: left;margin-bottom:8px;padding:5px;width: 233px;height:139px;}

.body-h-left h2 {color:#383838;font:bold 13px Tahoma;line-height:1.3em}

.body-h-left h2 a{text-decoration:none;text-transform:none;color:#383838}

.body-h-left-info {margin:0;padding-top:8px;line-height:1.5em;font: normal 13px Tahoma;color:#383838;}

.body-h-right {width:365px;float:left;margin:8px 0 5px 10px; }

.body-h-right img{background:#FFF;border: 1px solid #ccc;float: left;margin-right:5px;padding:2px;width: 125px;height: 75px;}

.body-h-right h2 {color:#006600;font:bold 12px Tahoma;line-height:1.3em}

.body-h-right h2 a {text-decoration:none;text-transform:none;color:#383838}

.body-h-left-info-li {padding-top:3px;line-height:1.5em;font: normal 13px Tahoma;color:#383838;}

.body-h-right-li {width:375px;float:right;magrgin-right:8px 5px 0 0}

.body-h-right-li ul {margin:0;padding:0}       

.body-h-right-li  li {background:  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5YTOcnFItCqB620LElq-JLGYg71ICSnR06rBPL-i71L8MxtAbYw319FmOdQeVEcORa_hPNzzcNsDItOSMtLCtoEHSWs0F5JFrSvQEIsSJK6xILaOjyA_5YuKl-VjVJwdF-rJbC5bOETg/s1600/li.gif)  no-repeat 5px 9px;padding:3px 0 3px 13px;line-height:1.3em;font: bold  12px Arial}

.body-h-right-li li a {color:#383838}

.body-s-left  h2 a:hover, .body-s-right-li li a:hover,.body-h-left h2 a:hover,  .body-h-right-li li a:hover, .body-h-right h2 a:hover, .subbox a:hover,  .post h2 a:hover {color: #CF152A}           

.boxtitle{height:33px;padding:1px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP1zEWUQLK_hfGepfmjsbWVbCB-2EcyEHDtXeqjXvO2Wue8H47CUbU5Y_edT_M7tHGEKi4hJqUha1AqYNKGagBUnzdKmKYatusTrXnoJ_fI9iGy0oGOtHBx0Jcj7_L0E1LR1I9coM1dj8/s1600/boxtitlerp.gif)  repeat-x;}

.boxtitle h2{float:left;}

.boxtitle1{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8283H603r21PTJ11mCtUBAd9k_5-GsRrCf5BPFP0fGfRLk_HgiptcVwi7D1NYpMM8V6tq9tubve7-Rm_-8rSifO_2xppqdUUZElC9y0cl4Z07ZU-FSvI6AD_i1isiofW1eZ-gKgduvsk/s1600/boxtitle1.gif)  no-repeat top left;width:47px;          height:33px;float:left;}

.boxtitle2,  .boxtitle2 a  {background:#b80d1e;line-height:28px;float:left;padding-left:5px;padding-right:5px;font-weight:bold;color:#fff;}

.boxtitle3{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfT1W_Ygu4nYr85VLDG_KakpixqoF00NrS15tt4nOWO4m8AiyJGUUTi5g9JmbK3oBghip2CPoLGOb6GPhnbwovw4QbFIpu3TZ3LgxnvFI1ypKYGjH-zPJ518LevBuh1rrcwP2yJBoimYk/s1600/boxtitle2.gif)  right top;width:40px;height:28px;float:left;}

.subbox{float:left;line-height:28px;width:395px; overflow:hidden;}

.subbox a{color:#4b4d4f;font-weight:bold;font-size:12px; float:left;}

.subbox li{float:left;margin-right:5px;color:#cdcdcd;font-size:15px;}

.body-s-left img:hover, .body-h-left img:hover, .body-h-right img:hover {background:#ddd}

4. Tiếp tục chèn đoạn code sau lên trước thẻ </head>

<b:if cond='data:blog.url == data:blog.homepageUrl'>         

<script src='http://namknablog.googlecode.com/files/box-home.js' type='text/javascript'/>

<style type='text/css'>

.post-outer{display:none}

</style>

</b:if>             

            

<b:if cond='data:blog.pageType == &quot;index&quot;'>                            

<script type='text/javascript'>

var thumbnail_mode = &quot;no-float&quot; ;

summary_noimg = 300;

summary_img = 160;

img_thumb_height = 85;

img_thumb_width = 124;

</script>

<script type='text/javascript'>

//<![CDATA[

eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return   r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new  RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('l  m(a,b){6(a.5("<")!=-1){3 s=a.O("<");N(3  i=0;i<s.4;i++){6(s[i].5(">")!=-1){s[i]=s[i].8(s[i].5(">")+1,s[i].4)}}a=s.J("")}b=(b<a.4-1)?b:a.4-2;A(a.v(b-1)!=\'  \'&&a.5(\' \',b)!=-1)b++;a=a.8(0,b-1);t a+\'...\'}l r(a){3  b=D.p(a);3 c="";3 d=b.q("7");3 e=u;6(d.4>=1){c=\'<k w="x:y; z:j B 0  j;;C:-P 0 0 0"><7 E="ẢF G họa" g="\'+d[0].g+\'" H="\'+I+\'9"  K="\'+L+\'9" /></k>\';e=M}3  f=c+\'<n>\'+m(b.o,e)+\'</n>\';b.o=f}',52,52,'|||var|length|indexOf|if|img|substring|px|||||||src|||0px|span|function|removeHtmlTag|div|innerHTML|getElementById|getElementsByTagName|createSummaryAndThumb||return|summary_noimg|charAt|style|float|left|padding|while|10px|margin|document|alt|nh|minh|width|img_thumb_width|join|height|img_thumb_height|summary_img|for|split|38px'.split('|'),0,{}))

//]]>

</script>

</b:if>

5. Cuối cùng chèn đoạn code này vào sau <div class='main-outer'>

<b:if cond='data:blog.url == data:blog.homepageUrl'>  

<div id='main-home'>

<div class='body-home-s'>                                             

<script>document.write(&quot;&lt;script   src=\&quot;/feeds/posts/default?max-results=&quot;+12+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);</script>          

<div style='clear:both;'/>        

</div> 

<div class='body-home'>

<div class='boxtitle'>

            <h2><span class='boxtitle1'/><span class='boxtitle2'><a href='/search/label/LABEL?&amp;max-results=15' title='Thời sự'>Thời sự</a></span>

    <span class='boxtitle3'/></h2>

        <ul class='subbox'>

        <li><a href='/search/label/LABEL?&amp;max-results=15'>Thời cuộc</a></li>

        <li>|</li>

        <li><a href='/search/label/LABEL?&amp;max-results=15'>Tiêu điểm</a></li>

        <li>|</li>

        <li><a href='/search/label/LABEL?&amp;max-results=15'>Góc nhìn</a></li>

        </ul>

</div>

<div class='body-info'>                                                  

<script>document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/Nhãn Số 1?max-results=&quot;+7+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts2\&quot;&gt;&lt;\/script&gt;&quot;);</script>          

</div> 

<div style='clear:both;'/>        

</div> 

<div class='body-home'>

<div class='boxtitle'>

            <h2><span class='boxtitle1'/><span class='boxtitle2'><a href='/search/label/LABEL?&amp;max-results=15' title='Thời sự'>Thời sự</a></span>

    <span class='boxtitle3'/></h2>

        <ul class='subbox'>

        <li><a href='/search/label/LABEL?&amp;max-results=15'>Thời cuộc</a></li>

        <li>|</li>

        <li><a href='/search/label/LABEL?&amp;max-results=15'>Tiêu điểm</a></li>

        <li>|</li>

        <li><a href='/search/label/LABEL?&amp;max-results=15'>Góc nhìn</a></li>

        </ul>

</div>

<div class='body-info'>                                      

<script>document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/Nhãn số 2?max-results=&quot;+7+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts2\&quot;&gt;&lt;\/script&gt;&quot;);</script>          

</div> 

<div style='clear:both;'/>        

</div> 

<div class='body-home'>

<div class='boxtitle'>

            <h2><span class='boxtitle1'/><span class='boxtitle2'><a href='/search/label/LABEL?&amp;max-results=15' title='Thời sự'>Thời sự</a></span>

    <span class='boxtitle3'/></h2>

        <ul class='subbox'>

        <li><a href='/search/label/LABEL?&amp;max-results=15'>Thời cuộc</a></li>

        <li>|</li>

        <li><a href='/search/label/LABEL?&amp;max-results=15/'>Tiêu điểm</a></li>

        <li>|</li>

        <li><a href='/search/label/LABEL?&amp;max-results=15/'>Góc nhìn</a></li>

        </ul>

</div>

<div class='body-info'>

<script>document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/Nhãn số 3?max-results=&quot;+7+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts2\&quot;&gt;&lt;\/script&gt;&quot;);</script>          

</div> 

<div style='clear:both;'/>        

</div> 

</div>

</b:if>

Trong đó: - Bạn thay phần màu Xanh là các nhãn bạn muốn hiển thị
                  - code màu đỏ còn lại bạn thay thành tên label phù hợp với blog của mình là được.
Ví dụ mình với đoạn code sau:

<li><a href='/search/label/LABEL?&amp;max-results=15'>Thời cuộc</a></li>

Thành nhãn http://namkna.blogspot.com/search/label/Blogspot-tips của mình như sau:

<li><a href='/search/label/Blogspot-Tip?&amp;max-results=15'>Thủ Thuật Blog</a></li>

- Các bạn có thể chỉnh sửa theo hình bên dưới:

Bấm vào hình để xem phóng to nếu chưa nhìn rõ.

6. Save template lại là xong.
Chúc thành công!

Chủ đề: