Thủ thuật tạo bài đăng mới theo label

16 Th12

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&#8217; type=’text/javascript’/> <script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js&#8217; 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&#8217;, -15, 0], rightnav: [‘http://lh6.ggpht.com/_pQs6qBh-Lcg/TOCZ2KBliiI/AAAAAAAABDU/j6ixlMypkJQ/Right.gif&#8217;, 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/&#8221;; 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&#8221; 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/&#8221;; 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&#8221; 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/&#8221;; 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&#8221; 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/&#8221;; 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&#8221; 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
Advertisements

Trả lời

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Đăng xuất / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Đăng xuất / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Đăng xuất / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Đăng xuất / Thay đổi )

Connecting to %s

%d bloggers like this: