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.
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>
#myslides{ background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5g0TAc2gkj0Rp-bAAPkhCuBeKExmc7ME9OxlMJKJQiT2X6DCJPFRMSv6IHP45U4NfBZ6kE1Ihe6hT_A2KHIQPdFa8Aby9oVW7I_L5QoDmi7o__nb-EceZuBLG9p4gViGVeG0fIa2wfA/s1600/mslid.jpg) repeat-x; width: 340px; :340px; margin-bottom:5px; } .stepcarousel{ position: relative; /* 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 .{ 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; }
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:
<div id="myslides"> <div id="mygallery" class="stepcarousel"> <div class="belt"> <!-- 1st Template --> <div class="panel"> < type="text/"> #rc-posts-1-col { width:320px; } #rc-posts-1-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-1cot {border-top:1px solid #;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:;} </style> <script type="text/javascript"> home_page = "http://www.kynangso.com/"; label = "Phan mem"; numposts = 5; postcount = 400; sumTitle = 40; colortitle = "#555"; tcolortitle = "#ff6c00"; cmcolor = "#6b1f01"; nocmtext = "No Comment"; cmtext = "Comments"; posttext = "Posted in"; </script> <div id="rc-posts-1-col"><h3>Phần mềm</h3> <script src="http://data.fandung.com/blog/demo/tooltip-recentposts/tooltip-rc-post-1cot.js" type="text/javascript"></script> </div> </div> <!-- end code of 1st --> <!-- 2nd Template --> <div class="panel"> <style type="text/css"> #rc-posts-1-col { width:320px; } #rc-posts-1-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-1cot {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 = "Thu thuat"; numposts = 5; postcount = 400; sumTitle = 40; colortitle = "#555"; tcolortitle = "#ff6c00"; cmcolor = "#6b1f01"; nocmtext = "No Comment"; cmtext = "Comments"; posttext = "Posted in"; </script> <div id="rc-posts-1-col"><h3>Thủ thuật</h3> <script src="http://data.fandung.com/blog/demo/tooltip-recentposts/tooltip-rc-post-1cot.js" type="text/javascript"></script> </div> </div> <!-- end code of 2rd --> <!-- 3th Template --> <div class="panel"> <style type="text/css"> #rc-posts-1-col { width:320px; } #rc-posts-1-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-1cot {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 = "Kiem tien"; numposts = 5; postcount = 400; sumTitle = 40; colortitle = "#555"; tcolortitle = "#ff6c00"; cmcolor = "#6b1f01"; nocmtext = "No Comment"; cmtext = "Comments"; posttext = "Posted in"; </script> <div id="rc-posts-1-col"><h3>Kiếm tiền</h3> <script src="http://data.fandung.com/blog/demo/tooltip-recentposts/tooltip-rc-post-1cot.js" type="text/javascript"></script> </div> </div> <!-- end code of 3th --> <!-- 5th Template --> <div class="panel"> <style type="text/css"> #rc-posts-1-col { width:320px; } #rc-posts-1-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-1cot {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 = "Games"; numposts = 5; postcount = 400; sumTitle = 40; colortitle = "#555"; tcolortitle = "#ff6c00"; cmcolor = "#6b1f01"; nocmtext = "No Comment"; cmtext = "Comments"; posttext = "Posted in"; </script> <div id="rc-posts-1-col"><h3>Games</h3> <script src="http://data.fandung.com/blog/demo/tooltip-recentposts/tooltip-rc-post-1cot.js" type="text/javascript"></script> </div> </div> <!-- end code of 5th --> </div></div></div>
CHÚC BẠN THÀNH CÔNG.
Nguồn:Kynangso.com
