"Trình diễn bài viết mới (Recent posts) dạng library giống trang quantritructuyen.com"

(Traidatmui.com) - Thời gian qua mình đã test một thủ thuật trình diễn bài viết khá hay mà trang Quản Trị Trực Tuyến đang ứng dụng. Và mình đã test thành công trên Blogger, hôm nay mình xin chia sẽ cùng các bạn thủ thuật này. Thủ thuật này khá là phức tạp code trong thủ thuật này khá dài, đòi hỏi bạn cần cẩn thận trong từng bước thực hiện. Với thủ thuật này, các bài viết sẽ được tự động trình diễn, đặc biệt nó có nút dừng (pause) để giúp bạn xem bài viết dễ dàng hơn. Ngoài ra nó còn có phần mô tả giúp bạn biết được sơ bộ về bài viết đó. Hơn nữa, tiện ích còn có phần bài viết dạng library, để xem các bài viết trong tiện ích bạn chỉ việc click "XEM" như hình ảnh bên dưới.

Hình ảnh minh họa
Hình ảnh minh họa khi click "XEM"
» Bắt đầu thủ thuật

1. Đăng nhập tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chèn code CSS bên dưới vào trước thẻ ]]></b:skin>
.libra-tab {width:400px;border:solid 1px #ccc; height:310px!important; height:285px; display:block; padding-top:5px; padding-right:5px;}
.footer{margin:0;line-height:27px;font-weight:bold;font-size:12px;}
#dlOverlay{position:relative;z-index:150;margin:0;padding:14px 0 0 0;display:none;}
#dlOverlay span.close{filter:alpha(opacity=95);opacity:.95;float:right;background:url("https://lh4.googleusercontent.com/_9-sNIAfGhKg/TVOZTYOPdlI/AAAAAAAAAEA/sZUjPTnPbAM/close.gif") no-repeat left top;margin:-11px 0 0 0;display:block;height:11px;overflow:hidden;cursor:pointer;font-size:1px;width:48px;}
#dlOverlay div.caption{filter:alpha(opacity=80);opacity:.80;background:#fff;margin:0;padding:0px;height:120px;overflow:hidden;clear:both;}
#dlOverlay div.caption h6.rubric{margin:5px 0 0 10px;width:410px;padding:0;font-size:11px;overflow:hidden;}
#dlOverlay div.caption h1{margin:0px 0 0 10px;padding:0;font-weight:bold;font-size:14px;overflow:hidden;max-height:80px;}
#dlOverlay div.caption h1 a{color:#0000ff;}
#dlOverlay div.caption h1 a:hover {color:#000;}
#dlOverlay div.caption p.deck{margin:0px 0 0 3px;padding:0px;font-size:12px;overflow:hidden;}
#dlOverlay div.caption p.deck a{color:#000;}
#dynamicLead ol.subNav{list-style-type:none;margin:0 2px 0 0;padding:0;font-size:11px;overflow:hidden;display:inline;float:right;height:15px;overflow:hidden;}
#dynamicLead ol.subNav li{float:left;background:url("https://lh5.googleusercontent.com/_9-sNIAfGhKg/TVPE61EGgYI/AAAAAAAAAE4/OF0TDXe_a7w/numsep.png") no-repeat 16px top;padding:0;width:18px;overflow:hidden;}
#dynamicLead ol.subNav li a{padding:0 0 0 11px;background-image:url("https://lh5.googleusercontent.com/_9-sNIAfGhKg/TVOZTrg_uYI/AAAAAAAAAEI/jFaPWCCf6Ho/dl_number_sprite.gif");background-repeat:no-repeat;overflow:hidden;font-size:13px;text-align:center; padding:6px 10px 3px 2px;}
#dynamicLead ol.subNav li a.slide_1{background-position:center 0;}
#dynamicLead ol.subNav li a.slide_2{background-position:center -15px;}
#dynamicLead ol.subNav li a.slide_3{background-position:center -30px;}
#dynamicLead ol.subNav li a.slide_4{background-position:center -45px;}
#dynamicLead ol.subNav li a.slide_5{background-position:center -60px;}
#dynamicLead ol.subNav li a.slide_6{background-position:center -75px;}
#dynamicLead ol.mainNav{list-style-type:none;margin:0;padding:0;font-size:11px;overflow:hidden;display:inline;float:right;height:15px;}
#dynamicLead ol.mainNav li{float:left;margin:0;}
#dynamicLead ol.mainNav li a.ctrl{font-size:12px;}
#dynamicLead ol.mainNav li a.back{background:url("https://lh5.googleusercontent.com/_9-sNIAfGhKg/TVOZTbD04qI/AAAAAAAAAEE/VYyzMhD5BR4/dl_button_sprite_.gif") no-repeat left 0;padding:0 0 0 53px;}
#dynamicLead ol.mainNav li a.pause{background:url("https://lh5.googleusercontent.com/_9-sNIAfGhKg/TVOZTbD04qI/AAAAAAAAAEE/VYyzMhD5BR4/dl_button_sprite_.gif") no-repeat left -15px;padding:0 0 0 53px;}
#dynamicLead ol.mainNav li a.play{background:url("https://lh5.googleusercontent.com/_9-sNIAfGhKg/TVOZTbD04qI/AAAAAAAAAEE/VYyzMhD5BR4/dl_button_sprite_.gif") no-repeat left -30px;padding:0 0 0 53px;}
#dynamicLead ol.mainNav li a.next{background:url("https://lh5.googleusercontent.com/_9-sNIAfGhKg/TVOZTbD04qI/AAAAAAAAAEE/VYyzMhD5BR4/dl_button_sprite_.gif") no-repeat left -45px;padding:0 0 0 51px;}
.dlPreview{background:url("https://lh3.googleusercontent.com/_9-sNIAfGhKg/TVOZT2yYu2I/AAAAAAAAAEM/7p794-pB4Bg/dlPreview_bkg.png") no-repeat left top;width:118px;height:138px;margin:0;padding:0;position:absolute;z-index:200;padding:0;overflow:hidden;}
.dlPreview .slideContent{font-size:10px;font-family:arial;color:#000;height:130px;overflow:hidden;}
.dlPreview .slideContent .mainArtLink{overflow:hidden;height:60px;margin:7px 10px 0 10px;padding:0;display:block;}
.dlPreview .slideContent .mainArtLink img{margin:3px 0 0 0;padding:0;}
.dlPreview .slideContent h1.title{margin:0 10px;padding:0;font-size:10px;font-family:arial;height:13px;overflow:hidden;}
.dlPreview .slideContent h1.title a{color:#0000ff;}
.dlPreview .slideContent h1.title a:hover{color:#ff0033;}
.dlPreview .slideContent p.deck{display:none;}
.dlPreview .slideContent p.deckShort{display:block;margin:0 6px 2px 6px;padding:0;font-size:10px;overflow:hidden;line-height:11px;height:45px;}
#dynamicLead .lightBox{float:right;overflow:hidden;background:url("https://lh5.googleusercontent.com/_9-sNIAfGhKg/TVPE61EGgYI/AAAAAAAAAE4/OF0TDXe_a7w/numsep.png") no-repeat 58px top;width:60px;border:none;height:15px;overflow:hidden;}
#dynamicLead .lightBox a{margin:0;background:url("https://lh5.googleusercontent.com/_9-sNIAfGhKg/TVOZTbD04qI/AAAAAAAAAEE/VYyzMhD5BR4/dl_button_sprite_.gif") no-repeat left -60px;padding:0 0 0 57px;font-size:13px;border:none;text-decoration:none;}
#dynamicLead .lightBox a.selected{background:url("https://lh5.googleusercontent.com/_9-sNIAfGhKg/TVOZTbD04qI/AAAAAAAAAEE/VYyzMhD5BR4/dl_button_sprite_.gif") no-repeat left -75px;padding:0 0 0 57px;font-size:13px;}
.dlRoundCornersLft {clear:both;height:300px;}
.dlRoundCornersLft a{text-decoration:none;}
.dlRoundCornersLft a:hover{text-decoration:none;}
.dlRoundCornersLft .top{background-image:url("https://lh4.googleusercontent.com/_9-sNIAfGhKg/TVOZawMdAsI/AAAAAAAAAEY/qzfkDOc9ioo/sprite_sheet.gif");background-position:left -24px;background-repeat:no-repeat;height:6px;padding-left:6px;overflow:hidden;}
.dlRoundCornersLft .top div{border-top:1px solid #999;;line-height:9px;}
.dlRoundCornersLft .content{padding:0;height:272px;border:0;overflow:hidden;}
.dlRoundCornersLft .content .imageDeck{height:270px;width:390px;margin:0 0 6px 6px;border:1px solid #ddd;overflow:hidden;background:#000;position:relative;}
.dlRoundCornersLft .content .imageDeck a.mainArt{display:none;height:272px;}
.dlRoundCornersLft .bot{height:28px;}
.dlRoundCornersLft .bot div{height:17px;margin:0;padding:0;height:26px;}
.dlRoundCornersLft .bot div .footer{border:none;background:none;position:relative;z-index:90;margin:0;padding:0;overflow:hidden;top:6px;left:-5px;}
.dlLightBox{width:356px;height:300px;background:url("https://lh3.googleusercontent.com/_9-sNIAfGhKg/TVOZa9jMcQI/AAAAAAAAAEQ/2uFT6ChIj-4/lightbox_bkg2.png") no-repeat left top;padding:0;position:absolute;z-index:2000;cursor:pointer;}
.dlLightBox ul{list-style-type:none;overflow:hidden;margin:11px 0 0 0;padding:0 0 0 11px;float:left;clear:both;}
.dlLightBox ul li{float:left;width:108px;height:128px;overflow:hidden;margin:0 6px 0 0;padding:0;}
.dlLightBox ul li.last{background:none;margin:0;width:100px;}
.dlLightBox ul li .imageDeck{border:1px solid #ccc;width:95px;overflow:hidden;height:58px;margin:4px 0px 2px 1px;padding:0;}
.dlLightBox ul li h6.title{text-align:left;width:100px;margin:1px 0px 2px 0px;padding:0;font-size:11px;color:#ff0033;height:13px;overflow:hidden;}
.dlLightBox ul li p{text-align:left;border-bottom:1px dotted #000;color:#000;margin:1px 0px 2px 0px;padding:0;font-size:11px;font-family:arial;height:40px;overflow:hidden;width:100px;}
.dlLightBox ul li p.date{margin:2px 3px 0 3px;padding:0;font-size:9px;height:20px;overflow:hidden;width:94px;color:#999;text-align:right;}
#dynamicLead ol.mainNav li a.back{background:url("https://lh6.googleusercontent.com/_9-sNIAfGhKg/TVOZbLzKn2I/AAAAAAAAAEc/c5FPdOt_OuI/tt-back.gif") no-repeat;padding:6px 0 8px 24px;}
#dynamicLead ol.mainNav li a.pause{background:url("https://lh3.googleusercontent.com/_9-sNIAfGhKg/TVOZdqEd2MI/AAAAAAAAAEk/BQx-_JE94EQ/tt-pause.gif") no-repeat;padding:6px 0 8px 24px;}
#dynamicLead ol.mainNav li a.play{background:url("https://lh4.googleusercontent.com/_9-sNIAfGhKg/TVOZbGB0hrI/AAAAAAAAAEg/KF8to-QgMwI/tt-next.gif") no-repeat;padding:6px 0 8px 24px;}
#dynamicLead ol.mainNav li a.next{background:url("https://lh4.googleusercontent.com/_9-sNIAfGhKg/TVOZbGB0hrI/AAAAAAAAAEg/KF8to-QgMwI/tt-next.gif") no-repeat;padding:6px 0 8px 24px;}

Thủ thuật này phần CSS khá dài và phức tạp, nếu bạn không rành về phần này thì mình khuyên bạn không nên can thiệp nhiều vào phần này.

5. Save template lại và trở về phần tử trang
6. Thêm 1 HTML/Javascript và thêm vào nó code bên dưới
<script type="text/javascript" src="http://data-traidatmui.appspot.com/scripts/lib.js"></script>
<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://lh6.ggpht.com/_BTztXRwC9ik/TMmT8UtD9QI/AAAAAAAAElc/wEXpVqs7lt4/no.png";
showRandomImg = false;
fntsize = 12;
acolor = "#E67C15";
aBold = true;
text = "no";
showPostDate = true;
summaryPost = 300;
summaryFontsize = 12;
summaryColor = "#000";
numposts =6;
label = "Advanced blogger"; //thay thành nhãn bài viết của bạn
home_page = "http://www.traidatmui.com/"; //thay thành địa chỉ blog của bạn
</script>

<div class="libra-tab">
<div id="dynamicLead" class="dlRoundCornersLft">
<div class="content">
<div class="imageDeck">
<a class="mainArt" href="javascript:void(0);">
<img width="390" height="270" src="https://lh4.googleusercontent.com/_9-sNIAfGhKg/TVPSGtVq0uI/AAAAAAAAAFM/VyIBGRnDK9g/fw_dotbott.gif" alt="" title="" /></a>
<div id="dlOverlay">
<span class="close transp"></span>
<div class="caption"></div>
</div></div></div>
<div class="bot"><div>
<div class="footer">
<ol class="mainNav">
<li><a class="ctrl back" href="javascript:void(0);">&nbsp;</a></li>
<li><a class="ctrl pausePlay pause" href="javascript:void(0);">&nbsp;</a></li>
<li><a class="ctrl next" href="javascript:void(0);">&nbsp;</a></li>
</ol>
<ol class="subNav">
<script src="http://data-traidatmui.appspot.com/scripts/recent_label_lib.js" type="text/javascript"></script>
</ol>
<div class="lightBox" style="height:15px; line-height:15px;">
<a href="javascript:void(0);">&nbsp;</a></div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
//AP.Core.JS.Initialization.add(loadHomeBox);
homeBoxLoaded = true;
AP.Core.JS.Initialization.call(_initDynamicLead);
//AP.Core.JS.PopupLead.init('bestNews');
AP.Core.JS.Initialization.add(_initTopNews);
AP.Core.JS.Initialization.call(_initHomeAdv);
try{
AP.Core.JS.Initialization.add(_bindGoldPrice);
}catch(ex1){}
try{
AP.Core.JS.Initialization.add(_bindExchangeRate);
}catch(ex2){}
try{
AP.Core.JS.Initialization.add(_bindStockInfo);
}catch(ex3){}
AP.Core.JS.Initialization.add(_initboxInfo);

function _initDynamicLead()
{
AP.Core.JS.DynamicLead.GB = true;
AP.Core.JS.DynamicLead.globalSlidePause = 6.5;
AP.Core.JS.DynamicLead.globalTitleTransition = 1.4;
AP.Core.JS.DynamicLead.init();
}
</script>

Ở trên bài viết sẽ hiển thị theo từng nhãn riêng trên trang bạn, nếu muốn hiển thị cho tất cả bài viết thì bạn thay link bên dưới
http://data-traidatmui.appspot.com/scripts/recent_label_lib.js

Thành link sau
http://data-traidatmui.appspot.com/scripts/recent_post_lib.js

7. Cuối cùng là save template lại

Chúc bạn thành công

Xem khác cùng chủ đề

12 nhận xét | Viết lời bình

4/08/2011 01:02:00 SA Trả lời

Đã test thủ thuật trên, ảnh hiển thị thumnail lớn không khớp với khung.
Minh họa>>>http://cB4.upanh.com/20.999.27911813.Wqa0/library.gif

Admin
4/08/2011 06:48:00 SA Trả lời

Ở đây mình đã mặc định độ rộng và chiều cao ảnh phù hợp, khi bạn chỉnh sửa độ rộng của tiện ích lại bạn phải chỉnh sửa các thông số WIDTH hay HEIGHT lại cho phù hợp, chỉnh sửa độ rộng và chiều cao ảnh ở phần .dlRoundCornersLft .content .imageDeck {. Bạn hãy thử nhé.

9/30/2011 08:01:00 SA Trả lời

TDM, code này có thể cho nó chạy random bài viết được không? được thì hướng dẫn mình với, thanks TDM nhiều ^^! votay

Admin
9/30/2011 08:40:00 SA Trả lời

@ Billy Hoang: Cái này không cho ngẫu nhiên được bạn

11/09/2011 07:56:00 SA Trả lời

bạn ơi cho mình hỏi để chỉnh thông số chiều cao và chiều rộng của ảnh khi rê chuột vào số thứ tự thì chỉnh chỗ nào vậy banjn bạn có thể chỉ mình với được ko, cám ơn bạn nhiều

Admin
11/09/2011 04:08:00 CH Trả lời

@ Võ Văn Tùng: Trong code trên không có phần tùy chỉnh chiều cao và độ rộng phần Preview, nếu bạn muốn thay đổi có thể thêm code css bên dưới vào code css bước 4 và chỉnh sửa lại cho phù hợp.

.dlPreview img{width:115px;height:60px;}

11/10/2011 01:25:00 SA Trả lời

cám ơn bạn nhiều nha

van
1/03/2012 11:08:00 CH Trả lời

Anh ơi,
Giúp em với ạ. Khi em chèn tiện ích này vào, ở trang chủ không hiển thị các menu con sổ dọc nữa(Hình 1), còn khi vào bài viết nó mới hiện ạ(Hình 2). Giờ em muốn cho nó hiện ở trang chủ lẫn các trang khác thì sao ạ, a giúp em sửa lại với anh nhé. Thank anh nhiều, em có chụp hình lại để anh xem rõ hơn ạ:)

http://nh5.upanh.com/b5.s15.d1/a1ba20c958f8b27b35a9ad5caf616bf2_39666855.hinh1.png
http://nh0.upanh.com/b1.s25.d1/e4df09437dbb3ac5c19b25651b1eaf93_39666860.hinh2.png

2/28/2012 10:21:00 SA Trả lời

hướng dẫn mình cách căn chỉnh so với khung width=600px bạn ơi,mình thử mà đều ko thành công :roile

5/09/2012 05:24:00 SA Trả lời

Bạn có thể giúp mình chỉnh các thông số sao cho khớp với with:245px và hight:200px nha bạn, cám ơn bạn rất nhiều

12/29/2012 02:44:00 SA Trả lời

bạn hướng dẫn mình chỉnh lại độ rộng của khung và của ảnh với

Admin
1/05/2013 07:21:00 CH Trả lời

Bạn tùy chỉnh phần .libra-tab {width:400px; độ rộng của khung

Bạn nhập từ: cungly Bạn nhập từ: lleu Bạn nhập từ: kkrong Bạn nhập từ: cuoilon Bạn nhập từ: roile Bạn nhập từ: hehehe Bạn nhập từ: byebye Bạn nhập từ: idontknow Bạn nhập từ: votay more »

Giải pháp bán hàng online Số 1 Việt Nam
Lên đầu trang Xuống cuối trang