Cara Membuat Featured Post Tiga Kolom di Bawah Menu Blog

Baca Juga

Sebelumnya CB sudah share cara membuat featured post empat kolom di bawah navigasi menu. Kali ini CB share kembali Cara Membuat Featured Post Tiga Kolom di Bawah Menu Blog. Desainnya seperti ini:

Fungsi featured post adalah menampilkan artikel atau posting unggulan. Kita bisa pilih postingan dengan label tertentu untuk tampil di sana.

Live demonya bisa dilihat di CB Magazine, namun di sana dibuat empat kolom.

Cara Membuat Featured Post Tiga Kolom di Bawah Menu Blog

Langsung saja, ini cara membuatnya

1. Tema > Edit HTML
2. Simpan kode CSS & JS berikut ini di atas kode </head>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>
#main-home {float: left;margin-bottom: 20px;width:100%;}
.home-widget {float: left;margin: 0 0 10px 0;width: 100%;}
.home-widget h3 {display:none}
.es-carousel-wrapper{position:relative;clear:both;width:100%}
.es-carousel{margin:0;overflow:hidden}
.es-carousel ul{display:none;padding:0;margin:0}
.es-carousel ul li{height:100%;float:left;display:block;position:relative}
.es-carousel ul li a{display:block}
.es-carousel ul li a img{display:block;border:0;max-height:100%;max-width:100%;padding:0;margin:0}
.es-nav span{position:absolute;text-indent:-9000px;cursor:pointer;top:0;right:0}
.es-nav span.es-nav-next{right:0;width:23px;height:20px;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiWzEhEC5ENsDdYxNhq39aCbeUKCCBn0Y8Hl65SLN3pybIs_MYppZTbpHzVMKNmpqkggJgd2PKFb1ns7F4U602I6GzJVUSphnhfbOhJY2w9sJMdfKUUL_PzjTPfhAO1Upw4PTnH8erElq5/s1600/nextbn.gif) 0 0}
.es-nav span.es-nav-prev{right:25px;width:23px;height:20px;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK_It8DK_Kfs4HK2Mx4u0s-tf_auqefk7KBH6_dzE3_0il6Is5uuJ00OTzs7ctOSQl38MlZwNzS9jwGOEnp6SGaJtk_2A3lGkaWtCDpflUsmf-xluv_jiPE4jvQy_Ww6vEv8KUT_dfv1ey/s1600/prevbn.gif) 0 0}
.carousel{float:left;margin:0;overflow:hidden;width:100%;height:100px}
.carousel ul{display:inline;float:left;width:100%}
.carousel ul li{display:inline;float:left;width:31.3%;margin-right:2%}
.carousel ul li:last-child{margin-right:0}
.carousel-image{float:left;position:relative;width:100%;height:100px}
.carousel-image img{-moz-transition:all .3s;-ms-transition:all .3s;-o-transition:all .3s;-webkit-transition:all .3s;transition:all .3s;width:100%;height:100px}
.carousel-image img:hover{opacity:.85}
.carousel-text{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyWHuyMLqmxqbwg95_OjvCaMo_6-10kY436HY6shrb8vZV2cZkBIEm0FTFCUbt6iRLMUekXOleihM_oEPpAH7ickeKF3fut_FmBE7wRy1rlF5Nz5Zexhyphenhyphen07KKBNCcj9X25gO3K7umGVMnW/s1600/uj-opacity-40.png);float:left;padding:2%;position:absolute;bottom:0;width:96%}
.carousel-text a{color:#fff;font:700 12px/16px &#39;Open Sans Condensed&#39;,sans-serif;text-transform:none}
.carousel-text a:visited{color:#fff}
.index-post-wrap {margin: 20px 0 0 0;}
</style>
<script type='text/javascript'>
 //<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjwbsyLVD-EC3vAEkwPUi3836WBAog-LNNm2GcV8jz10LaLAOztCvWfPzunPVvmOsV6tySucFx2Pkl_JTCk_DGizgUNTRm5Tw6-dEmTtoen6Jnk2HRN3SfK8iXVyp44niwr332OHYTQ64/s1600/noimgs.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 65;
summaryTitle = 30;
summaryPost2 = 150;
summaryPosta = 220;
numposts = 9;
numposts10 = 15;
label2 = "Featured";
Title2 = "Featured Post";
function removeHtmlTag(strx,chop){
 var s = strx.split("<");
 for(var i=0;i<s.length;i++){
  if(s[i].indexOf(">")!=-1){
   s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
  }
 }
 s =  s.join("");
 s = s.substring(0,chop-1);
 return s;
}
function showrecentposts4a(z){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;
img=new Array();
document.write("<ul>");
for(var o=0;
o<numposts10;
o++){var w=z.feed.entry[o];
var g=w.title.$t;
var f;
var p;
if(o==z.feed.entry.length){break
}for(var l=0;
l<w.link.length;
l++){if(w.link[l].rel=="alternate"){p=w.link[l].href;
break
}}for(var l=0;
l<w.link.length;
l++){if(w.link[l].rel=="replies"&&w.link[l].type=="text/html"){f=w.link[l].title.split(" ")[0];
break
}}if("content" in w){var r=w.content.$t
}else{if("summary" in w){var r=w.summary.$t
}else{var r=""
}}postdate=w.published.$t;
if(j>imgr.length-1){j=0
}img[o]=imgr[j];
s=r;
a=s.indexOf("<img");
b=s.indexOf('src="',a);
c=s.indexOf('"',b+5);
d=s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){img[o]=d
}var q=[1,2,3,4,5,6,7,8,9,10,11,12];
var x=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
var u=postdate.split("-")[2].substring(0,2);
var h=postdate.split("-")[1];
var t=postdate.split("-")[0];
for(var e=0;
e<q.length;
e++){if(parseInt(h)==q[e]){h=x[e];
break
}}var n=u+" "+h+" "+t;
var v='<li><div class="carousel-image"><a href="'+p+'"><img width="176" height="100" class="" src="'+img[o]+'"/></a><div class="carousel-text"><a href="'+p+'">'+g+"</a></div></div></li>";
document.write(v);
}};
 //]]>
</script>
</b:if>

3. Simpan kode HTML berikut ini di bawah kode <div id='main-wrapper'> atau <div class='main-wrapper'> atau yang serupa dengannya.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='main-home'>
<div class='clear'/>
<div class='home-widget'>
<h3 class='widget-title fix'><span><script>
document.write(&#39;&lt;a href=&quot;/search/label/&#39;+label2+&#39;?max-results=10&quot;&gt;&#39;+Title2+&#39;&lt;/a&gt;&#39;);    </script></span></h3>
<div class='carousel small-cat-story es-carousel-wrapper'>
<div class='es-carousel'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/&quot;+label2+&quot;?max-results=&quot;+numposts10+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts4a\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</div><!--es-carousel-->
   </div><!--carousel-->
</div><!--home-widget-->
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function($){
$('.carousel').elastislide({
 imageW  : 155,
 minItems : 2,
 margin  : 10
});
});
//]]>
</script>
</div><!--mainhome-->
</b:if>

4. Simpan!

Catatan:
Tambahkan label Featured pada minimal tiga postingan yang akan ditamplilkan di sana. Dengan kata lain, saat ada postingan lain yang akan ditampilkan di sana, maka tambahkan label Featured selain label lainnya.

Demikian Cara Membuat Featured Post Tiga Kolom di Bawah Menu Blog. Good Luck & Happy Blogging! (www.contohblog.com).*