Tạo recent post dạng slider cho blog, website đẹp và chuyên nghiệp

Có rất nhiều dạng slider trình bày bài viết mới đẹp và chuyên nghiệp cho blog hay website, ở các bài trước mình đã giới thiệu mấy mẫu recent post khá đẹp các bạn có thể tham khảo:

Hôm nay share123.vn giới thiệu tiếp một dạng trình bày bài viết mới khá đẹp nữa dành cho bloggspot, dạng slide này phù hợp với những trang tin tức hay những trang công nghệ đều đẹp.

Demo ảnh

recent post dạng slider cho blog, website

Demo Video

Cách làm: Bước 1: Đăng nhập Blogger => Mẫu => Chỉnh sửa HTML => Tìm và paste đoạn code sau vào ngay trước ]]></b:skin>

/* CSS RECENT NEWS up by SHARE123.VN */
#itechplus-rc {width:310px;height:420px;margin:0;padding:10px;overflow:hidden;border:1px solid #ccc;background:#fff;}
.itechplus-rc h2{background:#F2F4F8;line-height:1.6em;margin:-10px -10px 10px;padding:4px 10px;font-weight:bold;color:#2286A6; font-size:15px; border-bottom:3px solid #2286A6;}
.itechplus-rc h2 a{ text-decoration:none;}
.itechplus-rc h2 a:hover {color:#000;}
.itechplus-rc ul{list-style:none;margin:0;padding:0}
.itechplus-rc li{text-indent:0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaz4RMtuythga_rRz4X6rx5Y-4rk_gUH-lUZaq2xaQvNTbjBwBZwxBVeQl2H3WdzcLn_NhZoT1zGSEz37cCQ2tIX_G1kBtfj0lF-ZT6pWggr2lRiuoI8yg1azPP5LVNJkX3fmjuM2aGx-Q/) no-repeat 0 7px;line-height:1.5em;margin:0;padding:2px 0 2px 15px}
.itechplus-rc h2 a:link, .itechplus-rc h2 a:visited {color:#2286A6}
.itechplus-rc img{ float:left;margin-left:5px;margin-right:5px;background:#F9F9F9;width:70px;height:70px;padding:3px;border:1px solid #999;}

.khungfloat{width:301px;display:block;margin:0px 0;border:1px solid #ccc;background:#fff;font-size:13px}
.khungfloat li a{margin-left:8px}
.khungfloat li{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaz4RMtuythga_rRz4X6rx5Y-4rk_gUH-lUZaq2xaQvNTbjBwBZwxBVeQl2H3WdzcLn_NhZoT1zGSEz37cCQ2tIX_G1kBtfj0lF-ZT6pWggr2lRiuoI8yg1azPP5LVNJkX3fmjuM2aGx-Q/) no-repeat 4px 10px;line-height:1.5em;margin-left:0px;padding:2px 0 2px 10px}

/*SHOW */

.libra-tab {background-color:#fff;width:640px;border:solid 1px #ccc; height:320px!important; height:295px; display:block; padding-top:5px; padding-right:5px;margin-left:3px}
.footer5{margin:0;line-height:27px;font-weight:bold;font-size:12px;}
#dlOverlay{position:relative;z-index:5;margin:0;padding:14px 0 0 0;display:none;}
#dlOverlay span.close{filter:alpha(opacity=95);opacity:.95;float:right;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYBF9bEkw8vOxHuoMqfjgbkNsnDRUNyulQ6D3t9zsan2ylkZR-PmkvK7SAUQ6oqC7Li2VopZiBu0kmj1KIv_xIbHPHdEmQElWfLYue9C3Bxr9RYGDaOlw8DXtbRa9WCpMbxk-U2L0CLOI/") 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAeCj8fsdE9QEleqy82zaNujioPt16RamDbx-5sp-9MavAn_J5yuJ7sN_ipvQ2VNxUGeoMh9f0p4X6H_Wna35iSh2n9mNeZuBsc2D2_ZvL04FqjbLiL_TP8EURWUbS0DRoOwjUwpMfwog/") no-repeat 16px top;padding:0;width:18px;overflow:hidden;}
#dynamicLead ol.subNav li a{padding:0 0 0 11px;background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9J3FJGDFqyjB3zoU9QWekM-QM9jVoh7xBwmDmMACBbBF-bud51x8DPX8UHjvpsQIa28nS6B0IG-SM6Qjnn-7XLdlwjGpw5biKKODoR6g_QBLkysUQNW-sWPKwGVSybd8Jfj-3phUJv98/");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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfiVCXc_LArPvEucqumOPG-iNtZqV7B5n8uTgUvLl44wnOL7ObyvDIiTKY1BnXMBhOjubF-WwEyoMG6ZiBCo4Ia1oUlA_9impejRmElJqWeMmFz6NsXs4GYjMc6yJ_7zvxcQdRpZSark4/") no-repeat left 0;padding:0 0 0 53px;}
#dynamicLead ol.mainNav li a.pause{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfiVCXc_LArPvEucqumOPG-iNtZqV7B5n8uTgUvLl44wnOL7ObyvDIiTKY1BnXMBhOjubF-WwEyoMG6ZiBCo4Ia1oUlA_9impejRmElJqWeMmFz6NsXs4GYjMc6yJ_7zvxcQdRpZSark4/") no-repeat left -15px;padding:0 0 0 53px;}
#dynamicLead ol.mainNav li a.play{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfiVCXc_LArPvEucqumOPG-iNtZqV7B5n8uTgUvLl44wnOL7ObyvDIiTKY1BnXMBhOjubF-WwEyoMG6ZiBCo4Ia1oUlA_9impejRmElJqWeMmFz6NsXs4GYjMc6yJ_7zvxcQdRpZSark4/") no-repeat left -30px;padding:0 0 0 53px;}
#dynamicLead ol.mainNav li a.next{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfiVCXc_LArPvEucqumOPG-iNtZqV7B5n8uTgUvLl44wnOL7ObyvDIiTKY1BnXMBhOjubF-WwEyoMG6ZiBCo4Ia1oUlA_9impejRmElJqWeMmFz6NsXs4GYjMc6yJ_7zvxcQdRpZSark4/") no-repeat left -45px;padding:0 0 0 51px;}
.dlPreview{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinwCmdYNjkAweIXeTM7_gi-81e0ul5292zKsgZAob69PrlBn3G7E_3fVafvzBH1C7aWylR8tUcO7XMCrmfn7bZLheSCViyZfcQ0E1GHyl0n6u3wT92XvroaAlDfHEQHwm32Irb41B9rAU/") no-repeat left top;width:118px;height:138px;margin:0;padding:0;position:absolute;z-index:8;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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAeCj8fsdE9QEleqy82zaNujioPt16RamDbx-5sp-9MavAn_J5yuJ7sN_ipvQ2VNxUGeoMh9f0p4X6H_Wna35iSh2n9mNeZuBsc2D2_ZvL04FqjbLiL_TP8EURWUbS0DRoOwjUwpMfwog/") no-repeat 58px top;width:60px;border:none;height:15px;overflow:hidden;}
#dynamicLead .lightBox a{margin:0;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfiVCXc_LArPvEucqumOPG-iNtZqV7B5n8uTgUvLl44wnOL7ObyvDIiTKY1BnXMBhOjubF-WwEyoMG6ZiBCo4Ia1oUlA_9impejRmElJqWeMmFz6NsXs4GYjMc6yJ_7zvxcQdRpZSark4/") no-repeat left -60px;padding:0 0 0 57px;font-size:13px;border:none;text-decoration:none;}
#dynamicLead .lightBox a.selected{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfiVCXc_LArPvEucqumOPG-iNtZqV7B5n8uTgUvLl44wnOL7ObyvDIiTKY1BnXMBhOjubF-WwEyoMG6ZiBCo4Ia1oUlA_9impejRmElJqWeMmFz6NsXs4GYjMc6yJ_7zvxcQdRpZSark4/") 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihyphenhyphenHlkVlG5uDrj-dvJ3hnQkFlBIHgNTpOLO_NU5UIZcQYW0QKhbE4NhBNbSeVUWCeSs3kX0EODF5hDZYFGrr79W-8Nf-hJnIuswU3__U1hy-orrce-QWKWdyqUi-hvXcXLbPI4mQx9sXk/");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:282px;border:0;overflow:hidden;}
.dlRoundCornersLft .content .imageDeck{height:280px;width:630px;margin:0 0 6px 6px;border:1px solid #ddd;overflow:hidden;background:transparent;position:relative;}
.dlRoundCornersLft .content .imageDeck a.mainArt{display:none;height:272px;}
.dlRoundCornersLft .bot{height:18px;}
.dlRoundCornersLft .bot div{height:17px;margin:0;padding:0;height:26px;}
.dlRoundCornersLft .bot div .footer5{border:none;background:none;position:relative;z-index:8;margin:0;padding:0;overflow:hidden;top:6px;left:-5px;}
.dlLightBox{width:356px;height:300px;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTKMhHaMgZHVj_2HBxQZnVe2kB36wfWW4CuwnhbkgqPvJY0ZhVKKNVU1dY04E0XQjv_e3Eko2kGfxWBPO3z6zUF0alGoAqBejWYL88Xxe3QMLO2yR7UQsPnCB3cmVTktWbcXt5Skt7jf4/") no-repeat left top;padding:0;position:absolute;z-index:8;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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQXWKP665rNC1fCV2KvOTyhWSUGxAz8hyphenhyphenNuzgsiGLRJsr0rM20oYHj7ih3v79DGQHbBPVUdQe4sMVT6icnqngsYWEC8VzZICLEOoWco_BI2xF9VgcN2mnlCfCuhN6t32rLnl10dLmVeD0/") no-repeat;padding:6px 0 8px 24px;}
#dynamicLead ol.mainNav li a.pause{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYnnwpD327dXODrHKsXxit6MNFEhVH3ryQuOqqQ-OFcQtmxXQVj5ajnmDLerZHCYxaSHiFTGVjUj4sWVgwpxvF3FkVqyAoT_vwpf3LRNpxgQbIahVyyZEy1EsNC8GnncOoYceFT_sKVUM/") no-repeat;padding:6px 0 8px 24px;}
#dynamicLead ol.mainNav li a.play{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgByrkJH9CPVzpus45PsP8z76F7zmyMaCTBXBIngX-qQmqEweQQd7R7IYRtESuU6hOmIUvHESp4KFkLKNNDHsSJpraomAIURqMptCRlDYgWNZ-foX2H7j7jlH7-qxQBVVZklta3e6jsI3Q/") no-repeat;padding:6px 0 8px 24px;}
#dynamicLead ol.mainNav li a.next{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgByrkJH9CPVzpus45PsP8z76F7zmyMaCTBXBIngX-qQmqEweQQd7R7IYRtESuU6hOmIUvHESp4KFkLKNNDHsSJpraomAIURqMptCRlDYgWNZ-foX2H7j7jlH7-qxQBVVZklta3e6jsI3Q/") no-repeat;padding:6px 0 8px 24px;}
<!-- END -->

Tiếp theo bạn tìm và paste đoạn code sau ngay sau thẻ <body> . Thường là paste sau Id='Menu' hoặc paste sau trong id='outer-wraper'

<!-- Start Recent post  -->
<script src='https://sites.google.com/site/share123vn/lib.js' type='text/javascript'/>
<script language='JavaScript'>
imgr = new Array();
imgr[0] = &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXAJu7Jk3oCskUJ3D1GwoTGavQpeUAKoNl3UWM4Ln10ihNUupRkyrltxek95jYjjd-4KRHecQXOGmkJflZqfpF78kH54utirAgX1mMHNlBMALYBLRNBmv5EfRGzS5RZsHshNzSY1ZhE64P/&quot;;
showRandomImg = false;
fntsize = 12;
acolor = &quot;#E67C15&quot;;
aBold = true;
text = &quot;no&quot;;
showPostDate = true;
summaryPost = 300;
summaryFontsize = 12;
summaryColor = &quot;#000&quot;;
numposts =6;
home_page = &quot;http://www.share123.vn/&quot;;
</script>

<div class='libra-tab'>
<div class='dlRoundCornersLft' id='dynamicLead'>
<div class='content'>
<div class='imageDeck'>
<a class='mainArt' href='javascript:void(0);'>
<img alt='' height='280' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoyFy3I4m-xwJgeEdK8GOFqGXpzcdsuFhk00uhMfjSQ6vtvytNdEuJThlzzUozJQMrUqMUeOcY1HsUpwSb6tt9xpxfngZf1I7rpcDvSBc7Y-fJhJhOQIkFmUiexXfPPwXQuHbVCrdA-vM/' title='' width='640'/></a>
<div id='dlOverlay'>
<span class='close transp'/>
<div class='caption'/>
</div></div></div>
<div class='bot'><div>
<div class='footer5'>
<ol class='mainNav'>
<li><a class='ctrl back' href='javascript:void(0);'/></li>
<li><a class='ctrl pausePlay pause' href='javascript:void(0);'/></li>
<li><a class='ctrl next' href='javascript:void(0);'/></li>
</ol>
<ol class='subNav'>
<script src='https://sites.google.com/site/share123vn/Recentpostjs.js'/>
</ol>
<div class='lightBox' style='height:15px; line-height:15px;'>
<a href='javascript:void(0);'/></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(&#39;bestNews&#39;);
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>
<!-- End Recent Post   -->

Bạn chú ý đến các link màu xanh và thông số màu đỏ để tùy chỉnh cho hợp lý, down File Js về và up lên host của bạn đề phòng link die.
Chúc bạn thành công - Share123.vn

Thiết kế blogspot đẹp, theme bloggger đẹp, zip blogspot chuyên nghiệp