Tạo bài đăng mới theo nhãn

Với thủ thuật nầy bạn có thể tạo khung " Bài đăng mới " theo nhãn hoặc " Các bài viết gần đây " theo nhãn ...với hiệu ứng động.

Đây là sự kết hợp giữa 2 thủ thuật " Recent posts 1 cột với hiệu ứng Tooltip " của bạn fandung mothuthuat.com và bài " Tiện ích auto Move Image Slider với carousel " của vnblognet.com.Bạn có thể xem thử" Các bài đăng gần đây"  tại đây.

Bước 1:Tạo tiện ích auto Move Image Slider với carousel.

Truy cập vào blogger account >> Thiết kế (Design) >> Chỉnh sửa HTML (Edit/Html)và dán đoạn code sau trên  ]]></b:skin> 

<!-- Tao bai dang moi 1 --> #myslides{ background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxdJXW-I6lWr9ctam49WNHtEMPlZEt365H0HuVTzzF67N_Ki3N2rdeJG_1Vs5hMpcEL94vxOUqrdrQ1dhnMsOqEaB_-qXNr_u0TvrIxu1PDP3yHpvSP8a8Nu8IJQUe0e01X2gCpyVeyw/s1600/mslid.jpg) repeat-x; width: 340px; height:340px; margin-bottom:5px; } .stepcarousel{ position: relative; /*leave this value alone*/ overflow: scroll; /*leave this value alone*/ width: 339px; /*Width of Carousel Viewer itself*/ height: 340px; /*Height should enough to fit largest content's height*/ margin: 0px 15px 0px 15px; } .stepcarousel .belt{ position: absolute; /*leave this value alone*/ left: 0; top: 0; } .stepcarousel .panel{ float: left; /*leave this value alone*/ overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/ margin: 1px 1px ; /*margin around each panel*/ width:166px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */ background:#0e1829; height:340px; border:1px solid #1d2c44; } .stepcarousel .panel p{ text-align: left; /*leave this value alone*/ overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/ margin: 5px 5px ; /*margin around each panel*/ } .stepcarousel .panel h2{ text-align: left; /*leave this value alone*/ height:20px; overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/ margin: 2px 5px ; /*margin around each panel*/ font-size:11px; font-weight:bold; text-align:center; font-family:Georgia,century gothic,Arial,verdana, sans-serif; } .stepcarousel .panel img{ float: left; /*leave this value alone*/ background:#0E1829; /*clip content that go outside dimensions of holding panel DIV*/ margin: 1px 1px 1px 1px; /*margin around each panel*/ padding:0px 0px; } <!-- Tao bai dang moi 1 -->

Bước 2: Dán đoạn code sau vào trên thẻ </head>

<!-- Tao bai dang moi 2 --> <script src='http://btemplatescripts.googlecode.com/files/auto-slider.js' type='text/javascript'/> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/> <script type='text/javascript'> stepcarousel.setup({ galleryid: 'mygallery', //id of carousel DIV beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs panelclass: 'panel', //class of panel DIVs each holding content autostep: {enable:true, moveby:1, pause:6000}, panelbehavior: {speed:500, wraparound:true, persist:true}, defaultbuttons: {enable: true, moveby: 1, leftnav: ['http://lh6.ggpht.com/_pQs6qBh-Lcg/TOCZ2Hfdi3I/AAAAAAAABDQ/6p0jaEkCByg/Leff.gif', -15, 0], rightnav: ['http://lh6.ggpht.com/_pQs6qBh-Lcg/TOCZ2KBliiI/AAAAAAAABDU/j6ixlMypkJQ/Right.gif', 1, 0]}, statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels contenttype: ['external'] //content setting ['inline'] or ['external', 'path_to_external_file'] }) </script> <!-- Tao bai dang moi 2 -->
Bước 3: Tạo Recent posts 1 cột với hiệu ứng Tooltip.
Tạo widget HTML/Javascript và dán đọan code bên dưới vào:

<!-- Tao bai dang moi 3 --> <style type="text/css"> #rc-posts-2-col { width:320px; } #rc-posts-2-col h3 { background:url(http://data.fandung.com/blog/demo/tooltip-recentposts/img-bg-rd.png) no-repeat top left; padding:3px 5px 14px 5px; font-size:13px; color:#fff; } 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:#CC0000; border-right:1px solid #ccc;width:160px;} #rc-td img {float:left; margin-right:2px; height:50px; width:50px; border:1px solid #ccc; padding:1px;} #rc-td a {text-decoration:none;} #rc-td a:hover {text-decoration:underline;} </style> <script type="text/javascript"> home_page = "http://www.kynangso.com/"; label = "Phan mem"; numposts = 12; postcount = 400; sumTitle = 40; colortitle = "#555"; tcolortitle = "#ff6c00"; cmcolor = "#6b1f01"; nocmtext = "No Comment"; cmtext = "Comments"; posttext = "Posted in"; </script> <div id="rc-posts-2-col"><h3>Recent Posts with tooltip</h3> <div id="rc-posts-loading"> <img align='absmiddle' src='http://data.fandung.com/img/loading-related.gif'/> </div> <script src="http://dodat79.googlecode.com/files/tooltip-rc-post-2cot-all.js" type="text/javascript"></script> </div> <!-- Ket thuc noi dung 1 --> </div> <div class="panel"> <!-- Bat dau noi dung 2 --> <style type="text/css"> #rc-posts-2-col { width:320px; } #rc-posts-2-col h3 { background:url(http://data.fandung.com/blog/demo/tooltip-recentposts/img-bg-rd.png) no-repeat top left; padding:3px 5px 14px 5px; font-size:13px; color:#fff; } 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:#CC0000; border-right:1px solid #ccc;width:160px;} #rc-td img {float:left; margin-right:2px; height:50px; width:50px; border:1px solid #ccc; padding:1px;} #rc-td a {text-decoration:none;} #rc-td a:hover {text-decoration:underline;} </style> <script type="text/javascript"> home_page = "http://www.kynangso.com/"; label = "Phan mem"; numposts = 12; postcount = 400; sumTitle = 40; colortitle = "#555"; tcolortitle = "#ff6c00"; cmcolor = "#6b1f01"; nocmtext = "No Comment"; cmtext = "Comments"; posttext = "Posted in"; </script> <div id="rc-posts-2-col"><h3>Recent Posts with tooltip</h3> <div id="rc-posts-loading"> <img align='absmiddle' src='http://data.fandung.com/img/loading-related.gif'/> </div> <script src="http://dodat79.googlecode.com/files/tooltip-rc-post-2cot-all.js" type="text/javascript"></script> </div> <!-- Ket thuc noi dung 2 --> </div> <div class="panel"> <!-- Bat dau noi dung 3 --> <style type="text/css"> #rc-posts-2-col { width:320px; } #rc-posts-2-col h3 { background:url(http://data.fandung.com/blog/demo/tooltip-recentposts/img-bg-rd.png) no-repeat top left; padding:3px 5px 14px 5px; font-size:13px; color:#fff; } 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:#CC0000; border-right:1px solid #ccc;width:160px;} #rc-td img {float:left; margin-right:2px; height:50px; width:50px; border:1px solid #ccc; padding:1px;} #rc-td a {text-decoration:none;} #rc-td a:hover {text-decoration:underline;} </style> <script type="text/javascript"> home_page = "http://www.kynangso.com/"; label = "Phan mem"; numposts = 12; postcount = 400; sumTitle = 40; colortitle = "#555"; tcolortitle = "#ff6c00"; cmcolor = "#6b1f01"; nocmtext = "No Comment"; cmtext = "Comments"; posttext = "Posted in"; </script> <div id="rc-posts-2-col"><h3>Recent Posts with tooltip</h3> <div id="rc-posts-loading"> <img align='absmiddle' src='http://data.fandung.com/img/loading-related.gif'/> </div> <script src="http://dodat79.googlecode.com/files/tooltip-rc-post-2cot-all.js" type="text/javascript"></script> </div> <!-- Ket thuc noi dung 3 --> </div> <div class="panel"> <!-- Bat dau noi dung 4 --> <style type="text/css"> #rc-posts-2-col { width:320px; } #rc-posts-2-col h3 { background:url(http://data.fandung.com/blog/demo/tooltip-recentposts/img-bg-rd.png) no-repeat top left; padding:3px 5px 14px 5px; font-size:13px; color:#fff; } 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:#CC0000; border-right:1px solid #ccc;width:160px;} #rc-td img {float:left; margin-right:2px; height:50px; width:50px; border:1px solid #ccc; padding:1px;} #rc-td a {text-decoration:none;} #rc-td a:hover {text-decoration:underline;} </style> <script type="text/javascript"> home_page = "http://www.kynangso.com/"; label = "Phan mem"; numposts = 12; postcount = 400; sumTitle = 40; colortitle = "#555"; tcolortitle = "#ff6c00"; cmcolor = "#6b1f01"; nocmtext = "No Comment"; cmtext = "Comments"; posttext = "Posted in"; </script> <div id="rc-posts-2-col"><h3>Recent Posts with tooltip</h3> <div id="rc-posts-loading"> <img align='absmiddle' src='http://data.fandung.com/img/loading-related.gif'/> </div> <script src="http://dodat79.googlecode.com/files/tooltip-rc-post-2cot-all.js" type="text/javascript"></script> </div> <!-- Ket thuc noi dung 4 --> </div> </div> </div> </div> <!-- Tao bai dang moi 3 --> Chúc bạn thành công