Cara Membuat Featured Post Tiga Kolom di Bawah Menu Blog

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:

Featured Post Tiga Kolom

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(http://1.bp.blogspot.com/-CuPN472QJJ8/UXwxAi5EAZI/AAAAAAAAC34/yoDJ9amuiZo/s1600/nextbn.gif) 0 0}
.es-nav span.es-nav-prev{right:25px;width:23px;height:20px;background:transparent url(http://1.bp.blogspot.com/-h5GRbC4AAdc/UXwv3y5jN9I/AAAAAAAAC3o/jEFsn78KVuA/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(http://4.bp.blogspot.com/-PpOJ-vHwxvc/T5mGXWpHVCI/AAAAAAAAAqQ/Y1VmLDvoeHI/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] = "http://2.bp.blogspot.com/-RFdFqW5Klsc/UitLuFMcVxI/AAAAAAAADpM/y5UnpsxUSrc/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).*

Thanks for reading Cara Membuat Featured Post Tiga Kolom di Bawah Menu Blog | Labels: Desain Blog edit this post
Author Image

About CB Blogger
Contoh Blog --sebut saja CB -- Panduan Blogging untuk Pemula - Tips SEO, Desain, Template SEO Friendly, Cara Membuat Blogger Keren, Google Adsense, dll. Subscribe! to get update via email.

0 Komentar untuk "Cara Membuat Featured Post Tiga Kolom di Bawah Menu Blog"

Contact Form

Name

Email *

Message *

Back To Top