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

Điểm 4.6/5 dựa vào 87 đánh giá

(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

Chuyên mục: Blogspot nâng cao