Cara Membuat Slider Recent Postingan Di Halaman Utama

Halo sahabat blogger, sudah seminggu kita tidak berjumpa. Kali ini saya akan memposting tentang Tutorial blogger yang akan membahas tentang bagaimana cara memasang slider recent post di homepage blog. Pastinya kalian para blogger sudah mengetahui apa itu slide artikel terbaru? nantinya pada design tersebut akan terlihat seperti gambar berikut ini.

Cara Membuat Slider Recent Postingan Di Halaman Utama

Widget recent post slider ini sangat cocok digunakan pada template yang bersifat majalah atau magazine. Tujuan widget artikel terbaru slide ini adalah untuk menampilkan postingan terbaru yang telah anda publikasikan saat itu. Selain itu slide tersebut juga sangat bagus digunakan pada template yang responsive.

Oke tidak perlu basa-basi lagi, pada berikut ini adalah tutorial dan langkah cara membuat widget recent post efek slide. Simak dan terapkan secara seksama.

Cara memasang widget artikel terbaru dengan efek slider pada homepage blg

Langkah pertama, buka blogger kemudian login dan masuk ke dashboard blogger lalu pilihlah menu template > edit html.
Langkah kedua, tambahkan kode css berikut ini tepat di atas kode </style> atau ]]></b:skin>.
/* featured post */
div#HTML13,div#HTML14,div#HTML70,div#HTML71,div#HTML72,div#HTML73,div#HTML74,div#HTML75 {display:inline-block;width:100%;}
#featured-posts-section{max-height:400px;overflow:hidden;margin:20px}
.recent-post-title {margin:0 0 15px;padding:0;position:relative;}
.recent-post-title h2{background:#fff;border-bottom:2px solid #2b2b2b;border-right:0;line-height:32px;font-size:13px;text-transform:uppercase}
.special-heading h2 {font-size:20px;margin:6px 0 25px 0;}
.recent-post-title h2 a,.recent-post-title h2 a:hover {color:#fff;}
.recent-post-title h2 span{display:inline-block;padding:2px 12px 0;background-color:#2b2b2b;color:#fff}
.babebox {float:left;width:50%;margin:0;}
.babebox .widget {padding:0 15px 15px 0;}
.babebox .widget-content {background:#fff;}
.babebox ul {list-style-type:none;margin:0;padding:0;}
.babebox1 {float:left;width:98%;margin:0;}
.babebox1 .widget {padding:0 0px 15px 0;}
.babebox1 .widget-content {background:#fff;}
.babebox1 ul {list-style-type:none;margin:0;padding:0;}
ul.babethumbs {margin:0;}
ul.babethumbs li {font-size:12px;min-height:68px;margin:0 0 8px;padding:0 0 8px;border-bottom:1px dotted #e5e5e5;}
ul.babethumbs .babethumb{position:relative;background:#fbfbfb;margin:3px 0 10px;width:100%;height:auto;overflow:hidden}
ul.babethumbs .babethumb img {height:auto;width:100%;}
ul.babethumbs1{margin:0;padding:0;width:49%;float:left}
ul.babethumbs1 li{font-size:12px;min-height:68px;margin:0;padding:0}
ul.babethumbs1 .babethumb{position:relative;background:#fbfbfb;margin:3px 0 10px;width:100%;height:auto;overflow:hidden}
ul.babethumbs1 .babethumb img {height:auto;width:100%;}
ul.babethumbs2 {font-size:13px;}
ul.babethumbs2 li {padding:00;font-size:11px;margin:10px 0;padding:0;min-height:80px;}
ul.babethumbs2 .babethumb2 {background:#fbfbfb;float:left;margin:3px 8px 0 0;height:75px;width:75px;}
ul.babethumbs2 .babethumb2 img {height:75px;width:75px;}
span.babetitle{position:relative;display:block;margin:0 0 5px;font-family:'Roboto Condensed';line-height:24px;letter-spacing:.5px;font-style:normal;font-size:22px;color:#333}
span.babetitle2{font-size:16px}
span.viesummary{display:block;margin:6px 0;color:#888;font-family:Open Sans,sans-serif;font-size:13px;font-weight:400;line-height:normal}
span.babemeta {background:transparent;display:block;font-size:11px;color:#aaa;}
span.babetitle a,span.babetitle2 a{color:#444;}
span.babemeta a {color:#aaa!important;display:inline-block;}
span.babemeta_date, span.babemeta_comment, span.babemeta_more {display:inline-block;margin-right:8px;}
span.babemeta_date:before,span.babemeta_comment:before,span.babemeta_more:before {font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:4px;}
span.babemeta_date:before {content: "f017"}
span.babemeta_comment:before {content: "f086";}
span.babemeta_more:before {content: "f0a9";}
ul.babethumbs22 {font-size:13px;width:49%;float:right;}
ul.babethumbs22 li{font-size:11px;margin:0 0 10px;padding:0;min-height:80px}
ul.babethumbs22 .babethumb2 {background:#fbfbfb;float:left;margin:3px 8px 0 0;height:75px;width:75px;}
ul.babethumbs22 .babethumb2 img {height:75px;width:75px;}
ul.babethumbs22 li a:hover, ul.babethumbs li a:hover,ul.babethumbs2 li a:hover, ul.babethumbs li a:hover {color:#4db2ec;}
.featured-post{overflow:hidden;position:relative;}
.featured-post a{color:#fff;display:block;line-height:1}
h3.entry-title{padding:10px 15px;display:inline-block;color:#fff;text-decoration:none;font-weight:900;text-shadow:0 1px 2px rgba(0,0,0,.7);font-size:36px}
.featured-post .col-post{float:left;position:relative;margin:0}
.featured-post .secondary-post{width:25%;margin-right:1px;margin-bottom:1px}
.featured-post .main-post{width:49.7%;margin-right:1px}
.featured-post img{height:100%;}
.featured-post .main-post img {height:400px;width:100%;object-fit:cover;}
.featured-post .secondary-post img{height:200px;object-fit:cover}
.featured-post header{position:absolute;padding:10px 0 0px;background:rgba(0,0,0,.2);top:0;width:75%;margin-top:59px}
.secondary-post span{font-size:15px;padding-bottom:10px}
.featured-post h4{font-size:10px;line-height:1.3;font-weight:400}
.featured-post a:hover{color:#f0f0f0}.featured-post header1{position:absolute;padding:10px 0 0px;top:0;width:85%;margin-top:59px}
.featured-post h4 a{display:block;line-height:1.3;padding:0 10px;color:#fff;text-decoration:none;font-weight:900;text-shadow:0 1px 2px rgba(0,0,0,.7);font-size:18px}
.main-post .info{position:absolute;bottom:0;left:0;width:100%;height:150px;padding:20px 20px 0;background:-moz-linear-gradient(top,rgba(0,0,0,0)0,rgba(0,0,0,.7)100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,rgba(0,0,0,0)),color-stop(100%,rgba(0,0,0,.7)));background:-webkit-linear-gradient(top,rgba(0,0,0,0)0,rgba(0,0,0,.7)100%);background:-o-linear-gradient(top,rgba(0,0,0,0)0,rgba(0,0,0,.7)100%);background:-ms-linear-gradient(top,rgba(0,0,0,0)0,rgba(0,0,0,.7)100%);background:linear-gradient(to bottom,rgba(0,0,0,0)0,rgba(0,0,0,.7)100%);}
.main-post .item .box-title {display:table-cell;padding:0 18px;width:100%;height:110px;vertical-align:middle;color:#fff;}
.main-post .info h3{font-size:25px;font-family:'Roboto Condensed',sans-serif;font-weight:700;line-height:normal}
.box-title {width:95%;}
.main-post .date{display:none;position:absolute;top:20px;left:20px;background-color:#fff;text-align:center;font-weight:700;z-index:1;}
.main-post .date p{margin:0;padding:5px 10px}
.main-post .date span {color:#444;}
.main-post .info h3 span.box-label,.secondary-post .info h3 span.box-label{font-size:14px;color:#fff;background-color:#4db2ec;padding:5px 10px;display:inline-table;vertical-align:middle;margin-bottom:15px;box-shadow:2px 2px 2px rgba(0,0,0,0.1);transition:all .3s}
.secondary-post .info h3 span.box-label{font-size:12px;padding:3px 8px;margin-bottom:10px;transition: all 0.3s;}
.main-post .info h3 span.box-label:hover,.secondary-post .info h3 span.box-label:hover{color:#fff;background-color:#2b2b2b;}
.secondary-post .info {position:absolute;bottom:0;left:0;width:100%;height:120px;background:-moz-linear-gradient(top,rgba(0,0,0,0)0,rgba(0,0,0,.7)100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,rgba(0,0,0,0)),color-stop(100%,rgba(0,0,0,.7)));background:-webkit-linear-gradient(top,rgba(0,0,0,0)0,rgba(0,0,0,.7)100%);background:-o-linear-gradient(top,rgba(0,0,0,0)0,rgba(0,0,0,.7)100%);background:-ms-linear-gradient(top,rgba(0,0,0,0)0,rgba(0,0,0,.7)100%);background:linear-gradient(to bottom,rgba(0,0,0,0)0,rgba(0,0,0,.7)100%);padding: 20px 20px 0;}
.secondary-post .item .box-title {display:table-cell;padding:0 18px;width:100%;height:110px;vertical-align:middle;color:#fff;}
.secondary-post .info h3{font-size:16px;line-height:normal;font-family:'Roboto Condensed',sans-serif;font-weight:400}

Langkah ketiga, tambahkan kode script di bawah ini tepat diatas kode </head>.


<script type='text/javascript'>
//<![CDATA[
// Featured Source
var _0xbe12=["x68x74x74x70x3Ax2Fx2Fx73x69x74x65x73x2Ex67x6Fx6Fx67x6Cx65x2Ex63x6Fx6Dx2Fx73x69x74x65x2Fx66x64x62x6Cx6Fx67x73x69x74x65x2Fx48x6Fx6Dx65x2Fx6Ex6Fx74x68x75x6Dx62x6Ex61x69x6Cx2Ex67x69x66","x35","x3C","x73x70x6Cx69x74","x6Cx65x6Ex67x74x68","x3E","x69x6Ex64x65x78x4Fx66","x73x75x62x73x74x72x69x6Ex67","","x6Ax6Fx69x6E","x72x61x6Ex64x6Fx6D","x66x6Cx6Fx6Fx72","x65x6Ex74x72x79","x66x65x65x64","x74x65x72x6D","x63x61x74x65x67x6Fx72x79","x24x74","x74x69x74x6Cx65","x6Cx69x6Ex6B","x72x65x6C","x61x6Cx74x65x72x6Ex61x74x65","x68x72x65x66","x72x65x70x6Cx69x65x73","x74x79x70x65","x74x65x78x74x2Fx68x74x6Dx6C","x20","x63x6Fx6Ex74x65x6Ex74","x73x75x6Dx6Dx61x72x79","x70x75x62x6Cx69x73x68x65x64","x3Cx69x6Dx67","x73x72x63x3Dx22","x22","x73x75x62x73x74x72","x4Ax61x6E","x46x65x62","x4Dx61x72","x41x70x72","x4Dx61x79","x4Ax75x6E","x4Ax75x6C","x41x75x67","x53x65x70","x4Fx63x74","x4Ex6Fx76","x44x65x63","x2D","x3Cx64x69x76x20x63x6Cx61x73x73x3Dx22x6Dx61x69x6Ex2Dx70x6Fx73x74x20x63x6Fx6Cx2Dx70x6Fx73x74x22x3Ex3Cx64x69x76x20x63x6Cx61x73x73x3Dx22x64x61x74x65x22x3Ex3Cx70x3Ex3Cx73x70x61x6Ex3E","x3Cx2Fx73x70x61x6Ex3Ex3Cx2Fx70x3Ex3Cx2Fx64x69x76x3Ex3Cx61x20x68x72x65x66x3Dx22","x22x3Ex3Cx69x6Dx67x20x77x69x64x74x68x3Dx22","x22x20x68x65x69x67x68x74x3Dx22","x22x20x73x72x63x3Dx22","x2Fx73x37x32x2Dx63x2F","x2Fx77","x2Dx68","x2Dx63x2F","x72x65x70x6Cx61x63x65","x22x20x61x6Cx74x3Dx22x22x3Ex3Cx2Fx69x6Dx67x3Ex3Cx64x69x76x20x63x6Cx61x73x73x3Dx22x69x6Ex66x6Fx22x3Ex3Cx64x69x76x20x63x6Cx61x73x73x3Dx22x62x6Fx78x2Dx74x69x74x6Cx65x22x3Ex3Cx68x33x3Ex3Cx73x70x61x6Ex20x63x6Cx61x73x73x3Dx22x62x6Fx78x2Dx6Cx61x62x65x6Cx22x3E","x3Cx2Fx73x70x61x6Ex3Ex3Cx61x20x68x72x65x66x3Dx22","x22x20x74x69x74x6Cx65x3Dx22x22x3E","x3Cx2Fx61x3Ex3Cx2Fx68x33x3Ex3Cx2Fx64x69x76x3Ex3Cx2Fx64x69x76x3Ex3Cx2Fx61x3Ex3Cx2Fx64x69x76x3E","x77x72x69x74x65","x3Cx64x69x76x20x63x6Cx61x73x73x3Dx22x73x65x63x6Fx6Ex64x61x72x79x2Dx70x6Fx73x74x20x63x6Fx6Cx2Dx70x6Fx73x74x22x3Ex3Cx61x20x68x72x65x66x3Dx22","x22x3Ex3Cx2Fx69x6Dx67x3Ex3Cx64x69x76x20x63x6Cx61x73x73x3Dx22x69x6Ex66x6Fx22x3Ex3Cx64x69x76x20x63x6Cx61x73x73x3Dx22x62x6Fx78x2Dx74x69x74x6Cx65x22x3Ex3Cx68x33x3Ex3Cx73x70x61x6Ex20x63x6Cx61x73x73x3Dx22x62x6Fx78x2Dx6Cx61x62x65x6Cx22x3E"];imgr= new Array();imgr[0]=_0xbe12[0];showRandomImg=true;aBold=true;summaryPost=150;summaryTitle=50;numposts1=10;featured_numposts=_0xbe12[1];function removeHtmlTag(_0x3737x2,_0x3737x3){var _0x3737x4=_0x3737x2[_0xbe12[3]](_0xbe12[2]);for(var _0x3737x5=0;_0x3737x5<_0x3737x4[_0xbe12[4]];_0x3737x5++){if(_0x3737x4[_0x3737x5][_0xbe12[6]](_0xbe12[5])!= -1){_0x3737x4[_0x3737x5]=_0x3737x4[_0x3737x5][_0xbe12[7]](_0x3737x4[_0x3737x5][_0xbe12[6]](_0xbe12[5])+1,_0x3737x4[_0x3737x5][_0xbe12[4]])}};_0x3737x4=_0x3737x4[_0xbe12[9]](_0xbe12[8]);_0x3737x4=_0x3737x4[_0xbe12[7]](0,_0x3737x3-1);return _0x3737x4;}function sliderposts(_0x3737x7){j=showRandomImg?Math[_0xbe12[11]]((imgr[_0xbe12[4]]+1)*Math[_0xbe12[10]]()):0;img= new Array;if(numposts1<=_0x3737x7[_0xbe12[13]][_0xbe12[12]][_0xbe12[4]]){maxpost=numposts1}else {maxpost=_0x3737x7[_0xbe12[13]][_0xbe12[12]][_0xbe12[4]]};for(var _0x3737x5=0;_0x3737x5<maxpost;_0x3737x5++){var _0x3737x8=_0x3737x7[_0xbe12[13]][_0xbe12[12]][_0x3737x5];var _0x3737x9=_0x3737x8[_0xbe12[15]][0][_0xbe12[14]];var _0x3737xa=_0x3737x8[_0xbe12[17]][_0xbe12[16]];var _0x3737xb;var _0x3737xc;if(_0x3737x5==_0x3737x7[_0xbe12[13]][_0xbe12[12]][_0xbe12[4]]){break };for(var _0x3737xd=0;_0x3737xd<_0x3737x8[_0xbe12[18]][_0xbe12[4]];_0x3737xd++){if(_0x3737x8[_0xbe12[18]][_0x3737xd][_0xbe12[19]]==_0xbe12[20]){_0x3737xc=_0x3737x8[_0xbe12[18]][_0x3737xd][_0xbe12[21]];break ;}};for(var _0x3737xd=0;_0x3737xd<_0x3737x8[_0xbe12[18]][_0xbe12[4]];_0x3737xd++){if(_0x3737x8[_0xbe12[18]][_0x3737xd][_0xbe12[19]]==_0xbe12[22]&&_0x3737x8[_0xbe12[18]][_0x3737xd][_0xbe12[23]]==_0xbe12[24]){_0x3737xb=_0x3737x8[_0xbe12[18]][_0x3737xd][_0xbe12[17]][_0xbe12[3]](_0xbe12[25])[0];break ;}};if(_0xbe12[26] in _0x3737x8){var _0x3737xe=_0x3737x8[_0xbe12[26]][_0xbe12[16]]}else {if(_0xbe12[27] in _0x3737x8){var _0x3737xe=_0x3737x8[_0xbe12[27]][_0xbe12[16]]}else {var _0x3737xe=_0xbe12[8]}};postdate=_0x3737x8[_0xbe12[28]][_0xbe12[16]];if(j>imgr[_0xbe12[4]]-1){j=0};img[_0x3737x5]=imgr[j];s=_0x3737xe;a=s[_0xbe12[6]](_0xbe12[29]);b=s[_0xbe12[6]](_0xbe12[30],a);c=s[_0xbe12[6]](_0xbe12[31],b+5);d=s[_0xbe12[32]](b+5,c-b-5);if(a!=-1&&(b!=-1&&(c!=-1&&d!=_0xbe12[8]))){img[_0x3737x5]=d};var _0x3737xf=[1,2,3,4,5,6,7,8,9,10,11,12];var _0x3737x10=[_0xbe12[33],_0xbe12[34],_0xbe12[35],_0xbe12[36],_0xbe12[37],_0xbe12[38],_0xbe12[39],_0xbe12[40],_0xbe12[41],_0xbe12[42],_0xbe12[43],_0xbe12[44]];var _0x3737x11=postdate[_0xbe12[3]](_0xbe12[45])[2][_0xbe12[7]](0,2);var _0x3737x12=postdate[_0xbe12[3]](_0xbe12[45])[1];var _0x3737x13=postdate[_0xbe12[3]](_0xbe12[45])[0];var _0x3737x14=530;var _0x3737x15=400;var _0x3737x16=265;var _0x3737x17=200;for(var _0x3737x18=0;_0x3737x18<_0x3737xf[_0xbe12[4]];_0x3737x18++){if(parseInt(_0x3737x12)==_0x3737xf[_0x3737x18]){_0x3737x12=_0x3737x10[_0x3737x18];break ;}};var _0x3737x19=_0x3737x11+_0xbe12[25]+_0x3737x12+_0xbe12[25]+_0x3737x13;if(_0x3737x5==0){var _0x3737x1a=_0xbe12[46]+_0x3737x19+_0xbe12[47]+_0x3737xc+_0xbe12[48]+_0x3737x14+_0xbe12[49]+_0x3737x15+_0xbe12[50]+img[_0x3737x5][_0xbe12[55]](_0xbe12[51],_0xbe12[52]+_0x3737x14+_0xbe12[53]+_0x3737x15+_0xbe12[54])+_0xbe12[56]+_0x3737x9+_0xbe12[57]+_0x3737xc+_0xbe12[58]+_0x3737xa+_0xbe12[59];document[_0xbe12[60]](_0x3737x1a);}else {var _0x3737x1a=_0xbe12[61]+_0x3737xc+_0xbe12[48]+_0x3737x16+_0xbe12[49]+_0x3737x17+_0xbe12[50]+img[_0x3737x5]+_0xbe12[62]+_0x3737x9+_0xbe12[57]+_0x3737xc+_0xbe12[58]+_0x3737xa+_0xbe12[59];document[_0xbe12[60]](_0x3737x1a);};j++;};}window[_0xbe12[63]]=function(){var _0x3737x1b=document[_0xbe12[65]](_0xbe12[64]);if(_0x3737x1b==null){window[_0xbe12[66]][_0xbe12[21]]=_0xbe12[67]};_0x3737x1b[_0xbe12[69]](_0xbe12[21],_0xbe12[68]);_0x3737x1b[_0xbe12[69]](_0xbe12[19],_0xbe12[70]);_0x3737x1b[_0xbe12[71]]=_0xbe12[72];};
// jCarouselLite - http://gmarwaha.com/jquery/jcarousellite/
!function(e){function t(t,n){return parseInt(e.css(t[0],n))||0}function n(e){return e[0].offsetWidth+t(e,"marginLeft")+t(e,"marginRight")}function l(e){return e[0].offsetHeight+t(e,"marginTop")+t(e,"marginBottom")}e.fn.jCarouselLite=function(t){return t=e.extend({btnPrev:null,btnNext:null,btnGo:null,mouseWheel:!1,auto:null,speed:200,easing:null,vertical:!1,circular:!0,visible:4,start:0,scroll:1,beforeStart:null,afterEnd:null},t||{}),this.each(function(){function i(){return v.slice(p).slice(0,h)}function r(n){if(!s){if(t.beforeStart&&t.beforeStart.call(this,i()),t.circular)n<=t.start-h-1?(u.css(c,-((b-2*h)*g)+"px"),p=n==t.start-h-1?b-2*h-1:b-2*h-t.scroll):n>=b-h+1?(u.css(c,-(h*g)+"px"),p=n==b-h+1?h+1:h+t.scroll):p=n;else{if(0>n||n>b-h)return;p=n}s=!0,u.animate("left"==c?{left:-(p*g)}:{top:-(p*g)},t.speed,t.easing,function(){t.afterEnd&&t.afterEnd.call(this,i()),s=!1}),t.circular||(e(t.btnPrev+","+t.btnNext).removeClass("disabled"),e(p-t.scroll<0&&t.btnPrev||p+t.scroll>b-h&&t.btnNext||[]).addClass("disabled"))}return!1}var s=!1,c=t.vertical?"top":"left",o=t.vertical?"height":"width",a=e(this),u=e("ul",a),f=e("li",u),d=f.size(),h=t.visible;t.circular&&(u.prepend(f.slice(d-h-1+1).clone()).append(f.slice(0,h).clone()),t.start+=h);var v=e("li",u),b=v.size(),p=t.start;a.css("visibility","visible"),v.css({overflow:"hidden","float":t.vertical?"none":"left"}),u.css({margin:"0",padding:"0",position:"relative","list-style-type":"none","z-index":"1"}),a.css({overflow:"hidden",position:"relative","z-index":"2",left:"0px"});var g=t.vertical?l(v):n(v),x=g*b,m=g*h;v.css({width:v.width(),height:v.height()}),u.css(o,x+"px").css(c,-(p*g)),a.css(o,m+"px"),t.btnPrev&&e(t.btnPrev).click(function(){return r(p-t.scroll)}),t.btnNext&&e(t.btnNext).click(function(){return r(p+t.scroll)}),t.btnGo&&e.each(t.btnGo,function(n,l){e(l).click(function(){return r(t.circular?t.visible+n:n)})}),t.mouseWheel&&a.mousewheel&&a.mousewheel(function(e,n){return r(n>0?p-t.scroll:p+t.scroll)}),t.auto&&setInterval(function(){r(p+t.scroll)},t.auto+t.speed)})}}(jQuery);
// callback
function recentarticles1(t){j=showRandomImg?Math.floor((imgr.length+1)*Math.random()):0,img=new Array;for(var e=0;e<numposts5;e++){var r,n,i=t.feed.entry[e],m=i.title.$t;if(e==t.feed.entry.length)break;for(var l=0;l<i.link.length;l++)if("alternate"==i.link[l].rel){n=i.link[l].href;break}for(var l=0;l<i.link.length;l++)if("replies"==i.link[l].rel&&"text/html"==i.link[l].type){r=i.link[l].title.split(" ")[0];break}if("content"in i)var o=i.content.$t;else if("summary"in i)var o=i.summary.$t;else var o="";postdate=i.published.$t,j>imgr.length-1&&(j=0),img[e]=imgr[j],s=o,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),-1!=a&&-1!=b&&-1!=c&&""!=d&&(img[e]=d);for(var u=[1,2,3,4,5,6,7,8,9,10,11,12],h=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],p=(postdate.split("-")[2].substring(0,2),postdate.split("-")[1]),f=(postdate.split("-")[0],0);f<u.length;f++)if(parseInt(p)==u[f]){p=h[f];break}var w='<li class="car"><div class="thumbE"><a href="'+n+'"><img width="265" min-height="200" class="Thumbnail thumbnail carousel " src="'+img[e]+'"/></a></div><a class="slider_title" href="'+n+'">'+m+"</a></li>";document.write(w),j++}}function mythumb(t){for(var e=0;e<numposts;e++){var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var m=0;m<n.link.length;m++){if("replies"==n.link[m].rel&&"text/html"==n.link[m].type)var l=n.link[m].title,o=n.link[m].href;if("alternate"==n.link[m].rel){r=n.link[m].href;break}}var u;try{u=n.media$thumbnail.url,u=u.replace("/s72-c/","/w"+thumb_width+"-h"+thumb_height+"-c/")}catch(h){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:no_thumb}var p=n.published.$t,f=p.substring(0,4),w=p.substring(5,7),g=p.substring(8,10);document.write('<ul class="babethumbs">'),document.write("<li>"),1==showpostthumbnails&&document.write('<a href="'+r+'"><div class="babethumb"><img width="'+thumb_width+'" height="'+thumb_height+'" alt="'+i+'" src="'+u+'"/></div></a>'),document.write('<span class="babetitle"><a href="'+r+'" target ="_top">'+i+"</a></span>");var v="";if(document.write('<span class="babemeta">'),1==showpostdate&&(v=v+'<span class="babemeta_date">'+g+"/"+w+"/"+f+"</span>"),1==showcommentnum&&("1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),l='<span class="babemeta_comment"><a href="'+o+'" target ="_top">'+l+"</a></span>",v+=l),1==displaymore&&(v=v+'<span class="babemeta_more"><a href="'+r+'" class="url" target ="_top">Read More...</a></span>'),document.write(v),document.write("</span>"),document.write('<span class="viesummary">'),"content"in n)var k=n.content.$t;else if("summary"in n)var k=n.summary.$t;else var k="";var y=/<S[^>]*>/g;if(k=k.replace(y,""),1==showpostsummary)if(k.length<numchars)document.write(""),document.write(k),document.write("");else{document.write(""),k=k.substring(0,numchars);var _=k.lastIndexOf(" ");k=k.substring(0,_),document.write(k+"..."),document.write("")}document.write("</span>"),document.write("</li>"),document.write("</ul>")}document.write('<ul class="babethumbs2">');for(var e=1;e<numposts2;e++){var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var m=1;m<n.link.length;m++){if("replies"==n.link[m].rel&&"text/html"==n.link[m].type)var l=n.link[m].title,o=n.link[m].href;if("alternate"==n.link[m].rel){r=n.link[m].href;break}}var $;try{$=n.media$thumbnail.url.replace("/s72-c/","/w"+thumb_width2+"-h"+thumb_height2+"-c/")}catch(h){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),$=-1!=a&&-1!=b&&-1!=c&&""!=d?d:no_thumb2}var p=n.published.$t,f=p.substring(0,4),w=p.substring(5,7),g=p.substring(8,10);1==showpostthumbnails2&&document.write('<a href="'+r+'"><div class="babethumb2"><img width="'+thumb_width2+'" height="'+thumb_height2+'" alt="'+i+'" src="'+$+'"/></div></a>'),document.write("<li>"),document.write('<span class="babetitle babetitle2"><a href="'+r+'" target ="_top">'+i+"</a></span>");var v="";document.write('<span class="babemeta babemeta2">'),1==showpostdate2&&(v=v+'<span class="babemeta_date babemeta_date2">'+g+"/"+w+"/"+f+"</span>"),1==showcommentnum2&&("1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),l='<span class="babemeta_comment babemeta_comment2"><a href="'+o+'" target ="_top">'+l+"</a></span>",v+=l),1==displaymore2&&(v=v+'<span class="babemeta_more babemeta_more2"><a href="'+r+'" class="url" target ="_top">Read More...</a></span>'),document.write(v),document.write("</span>"),document.write("</li>")}document.write("</ul>")}function mythumb1(t){for(var e=0;e<numposts;e++){var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var m=0;m<n.link.length;m++){if("replies"==n.link[m].rel&&"text/html"==n.link[m].type)var l=n.link[m].title,o=n.link[m].href;if("alternate"==n.link[m].rel){r=n.link[m].href;break}}var u;try{u=n.media$thumbnail.url,u=u.replace("/s72-c/","/w"+thumb_width+"-h"+thumb_height+"-c/")}catch(h){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:no_thumb}var p=n.published.$t,f=p.substring(0,4),w=p.substring(5,7),g=p.substring(8,10);document.write('<ul class="babethumbs1">'),document.write("<li>"),1==showpostthumbnails&&document.write('<a href="'+r+'"><div class="babethumb"><img width="'+thumb_width+'" height="'+thumb_height+'" alt="'+i+'" src="'+u+'"/></div></a>'),document.write('<span class="babetitle"><a href="'+r+'" target ="_top">'+i+"</a></span>");var v="";if(document.write('<span class="babemeta">'),1==showpostdate&&(v=v+'<span class="babemeta_date">'+g+"/"+w+"/"+f+"</span>"),1==showcommentnum&&("1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),l='<span class="babemeta_comment"><a href="'+o+'" target ="_top">'+l+"</a></span>",v+=l),1==displaymore&&(v=v+'<span class="babemeta_more"><a href="'+r+'" class="url" target ="_top">Read More...</a></span>'),document.write(v),document.write("</span>"),document.write('<span class="viesummary">'),"content"in n)var k=n.content.$t;else if("summary"in n)var k=n.summary.$t;else var k="";var y=/<S[^>]*>/g;if(k=k.replace(y,""),1==showpostsummary)if(k.length<numchars)document.write(""),document.write(k),document.write("");else{document.write(""),k=k.substring(0,numchars);var _=k.lastIndexOf(" ");k=k.substring(0,_),document.write(k+"..."),document.write("")}document.write("</span>"),document.write("</li>"),document.write("</ul>")}document.write('<ul class="babethumbs22">');for(var e=1;e<numposts3;e++){var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var m=1;m<n.link.length;m++){if("replies"==n.link[m].rel&&"text/html"==n.link[m].type)var l=n.link[m].title,o=n.link[m].href;if("alternate"==n.link[m].rel){r=n.link[m].href;break}}var $;try{$=n.media$thumbnail.url.replace("/s72-c/","/w"+thumb_width2+"-h"+thumb_height2+"-c/")}catch(h){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),$=-1!=a&&-1!=b&&-1!=c&&""!=d?d:no_thumb2}var p=n.published.$t,f=p.substring(0,4),w=p.substring(5,7),g=p.substring(8,10);1==showpostthumbnails2&&document.write('<a href="'+r+'"><div class="babethumb2"><img width="'+thumb_width2+'" height="'+thumb_height2+'" alt="'+i+'" src="'+$+'"/></div></a>'),document.write("<li>"),document.write('<span class="babetitle babetitle2"><a href="'+r+'" target ="_top">'+i+"</a></span>");var v="";document.write('<span class="babemeta babemeta2">'),1==showpostdate2&&(v=v+'<span class="babemeta_date babemeta_date2">'+g+"/"+w+"/"+f+"</span>"),1==showcommentnum2&&("1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),l='<span class="babemeta_comment babemeta_comment2"><a href="'+o+'" target ="_top">'+l+"</a></span>",v+=l),1==displaymore2&&(v=v+'<span class="babemeta_more babemeta_more2"><a href="'+r+'" class="url" target ="_top">Read More...</a></span>'),document.write(v),document.write("</span>"),document.write("</li>")}document.write("</ul>")}function mythumb2(t){document.write('<div id="recent-posts">');for(var e=0;numpost>e;e++){var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var m=0;m<n.link.length;m++){if("replies"==n.link[m].rel&&"text/html"==n.link[m].type){n.link[m].title,n.link[m].href}if("alternate"==n.link[m].rel){r=n.link[m].href;break}}var l;try{l=n.media$thumbnail.url}catch(o){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),l=-1!=a&&-1!=b&&-1!=c&&""!=d?d:'" style="display: none;'}var u=n.published.$t,h=u.substring(0,4),p=u.substring(5,7),f=u.substring(8,10),w=new Array;w[1]="Jan",w[2]="Feb",w[3]="Mar",w[4]="Apr",w[5]="May",w[6]="Jun",w[7]="Jul",w[8]="Aug",w[9]="Sep",w[10]="Oct",w[11]="Nov",w[12]="Dec",document.write('<div class="post_wrapper1">'),document.write('<div class="post_thumb"><a href="'+r+'"><img src="'+l.replace("/s72-c/","/s120-c/")+'" alt="'+i+'" height="90" width="90"></div>');var g="",v=0;if(document.write(""),1==showpostdate&&(g=g+f+"/"+p+"/"+h,v=1),document.write('<div class="post_desc"><a href="'+r+'"><h5>'+i+'</h5></a><span class="meta"><i class="fa fa-clock-o"></i>&nbsp;'+g+"</span><p>"),"content"in n)var k=n.content.$t;else if("summary"in n)var k=n.summary.$t;else var k="";var y=/<S[^>]*>/g;if(k=k.replace(y,""),1==showpostsummary)if(k.length<numchars)document.write(""),document.write(k),document.write("");else{document.write(""),k=k.substring(0,numchars);var _=k.lastIndexOf(" ");k=k.substring(0,_),document.write(k+"..."),document.write("")}document.write("</p></div><div class='clear'></div></div>"),1==displayseparator&&e!=numposts-1&&document.write("")}document.write("</div>")}imgr=new Array,imgr[0]="http://3.bp.blogspot.com/-zP87C2q9yog/UVopoHY30SI/AAAAAAAAE5k/AIyPvrpGLn8/s1600/picture_not_available.png",showRandomImg=!0,aBold=!0,summaryPost=150,summaryPost1=0,summaryTitle=15,numposts5=6;var numpost=3,displayseparator=!1,showpostdate=!0,showpostsummary=!0,numchars=50;
//]]>
var numposts = 1;
var numposts2 = 3;
var numposts3 = 6;
var showpostthumbnails = true;
var showpostthumbnails2 = true;
var displaymore = true;
var displaymore2 = true;
var showcommentnum = true;
var showcommentnum2 = true;
var showpostdate = true;
var showpostdate2 = true;
var showpostsummary = true;
var numchars = 100;
var thumb_width = 350;
var thumb_height = 210;
var thumb_width2 = 110;
var thumb_height2 = 110;
var no_thumb = &#39;http://1.bp.blogspot.com/-5W3LET6BVVg/VW_WQ-S4OPI/AAAAAAAAKHY/ahNb-ytVCXk/s1600/no-image.gif&#39;
var no_thumb2 = &#39;http://1.bp.blogspot.com/-5W3LET6BVVg/VW_WQ-S4OPI/AAAAAAAAKHY/ahNb-ytVCXk/s1600/no-image.gif&#39;
</script>

Langkah keempat, tambahkan kode html di bawah ini tepat diatas kode tag content wrapper atau <div class=’content-wrapper’ id=’content’> untuk menampilkan recent post tersebut.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='ct-wrapper' id='featured-posts-section'>
<div class='featured-post padding clearfix'>
<script type='text/javaScript'>
document.write(&quot;&lt;script src=&quot;/feeds/posts/default/-/Beauty?max-results=&quot;+featured_numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=sliderposts&quot;&gt;&lt;/script&gt;&quot;);
</script>
</div>
</div>
</b:if>

Ganti kode html diatas yang sudah saya tandai dengan nama label yang akan ditampilkan pada halaman utama anda.

Setelah itu simpan template anda. kemudian lihatlah hasilnya.

Demikianlah bagaimana cara memasang dan membuat recent post di halaman utama dengan efek slide. Semoga bermanfaat.


Gambar Gravatar
"Seseorang Informan yang baru belajar"

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *