Kênh Tên Miền chuyên cung cấp tên miền đẹp, giá rẻ! Hãy liên hệ kỹ thuật: 0914205579 - Kinh doanh: 0912191357 để được tư vấn, hướng dẫn miễn phí, Cảm ơn quý khách đã ủng hộ trong thời gian qua!
Thursday, December 16, 2010

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>

#myslides{ background:#000 url(http://1.bp.blogspot.com/_xfdD6S9fOk4/Sd1SjSaUrXI/AAAAAAAAA20/ndvDf0nTslY/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

0 comments:

Post a Comment

domain, domain name, premium domain name for sales

Popular Posts