Cara Membuat Halaman Utama Blog Menarik Dengan Feature Post

Tampilan halaman depan blog kalian terlihat monoton ? ingin mencoba merubahnya menjadi lebih menarik ? anda berada pada artikel yang tepat karena disini saya akan berikan tutorial agar halaman depan blog kalian menjadi lebih keren dan tidak terlihat membosankan.

Fitur ini dinamakan featured post, dimana kalian bisa menampilkan artikel artikel unggulan kalian, atau memilih artrikel yang ingin pajang di halaman depan. jangan khawatir widget ini tidak terlalu berat dan tidak akan membebani speed blog. Dan juga sudah responsive sehingga dalam tampilan mobile pun masih menarik.

Baik ikuti langkah langkah berikut ini :

Langkah 1 :

1. Login ke akun blogger kalian,
2. Masuk ke tema,
3. Pilih Edit HTML.

Langkah 2 :

1. Cari code </head> cari saja dengan menekan CTRL+F lalu pada kotak pencariannya masukan enter,

Baca Juga : Cara Memasang Widget Instagram Facebook dan Twitter

2. Copykan code berikut lalu pastekan di atas </head>

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
/* Recent Post by Label */
.featured-postlabel1 ul,.featured-postlabel2 ul{list-style:none;margin:0;padding:0}
.featured-postlabel1 li,.featured-postlabel2 li{margin:0;padding:0;}
.featured-postlabel1 .widget,.featured-postlabel2 .widget{margin:0;padding:0}
.featured-postlabel1 .widget-content,.featured-postlabel2 .widget-content{border: 1px solid #ddd;padding: 20px;word-wrap: break-word;overflow: hidden;color: #000;background: #fff;padding: 15px;border-radius: 2px;box-shadow: none;border: 1px solid #e6e6e6;margin: 10px;width: 90%;}
.featured-postlabel1 h2,.featured-postlabel2 h2,.featured-postlabel3 h2{position: relative;margin: 20px 10px;padding: 15px 20px;font-size: 16px;font-weight: 700;text-transform: uppercase;color: #fff;border:1px solid #e9e9e9;border-bottom:0;width: 89%;background: #455a64;border-radius: 4px;width: 89%;}
.featured-postlabel2 h2,.featured-postlabel3 h2{margin: 20px 10px;}
.featured-postlabel1 h2:before,.featured-postlabel2 h2:before,.featured-postlabel3 h2:before{content:&#39;f108&#39;;right:10px;bottom:0;font-family:FontAwesome;font-style:normal;font-weight:normal;margin:0 10px 0 0;color:#ff675c;}
.featured-postlabel2 h2:before{content:&#39;f0c3&#39;;}.featured-postlabel3 h2:before{content:&#39;f143&#39;;}
.featured-postlabel1 .index,.featured-postlabel2 .index{font-size:10px;float:right;font-weight:400;}
.featured-postlabel1 .index a,.featured-postlabel2 .index a{display:flex;color:#039be5;padding:3px 8px;border-radius:2px;font-weight:400;border:1px solid #29b6f6}
.featured-postlabel2 .index a{color:#ef6c00;border-color:#ffa726}
.featured-postlabel1 .index a:hover{background:#039be5;color:#fff;border-color:transparent}
.featured-postlabel2 .index a:hover{background:#ef6c00;color:#fff;border-color:transparent}
.featured-postlabel1 .index a:after{content:&quot;f105&quot;;font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:5px}
.featured-postlabel2 .index a:after{content:&quot;f105&quot;;font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:6px}
.featured-postlabel2 span.featured-post_meta_comment a:hover{color:#38761d!important}
.featured-postlabel2 ul.featured-post_thumbs li a:hover,.featured-postlabel2 ul.featured-post_thumbs2 li a:hover{color:#ff675c;text-decoration:none}
.featured-post_left{width:280px;width:45.7%;float:left;margin:0;padding:0 20px 0 0;border-right:1px solid #e9e9e9}
.featured-post_right{width:250px;width:47.5%;float:right;margin:0;padding:0}
ul.featured-post_thumbs{margin:0;padding:0}
ul.featured-post_thumbs li,ul.featured-post_thumbs2{margin:0;padding:0}
ul.featured-post_thumbs .featured-thumbnail{position:relative;margin:0 0 15px;padding:0;width:280px;height:200px}
ul.featured-post_thumbs .featured-thumbnail img{height:auto;width:100%;transition:all 0.2s}
ul.featured-post_thumbs .featured-thumbnail img:hover{opacity:.9;}
ul.featured-post_thumbs2 li{margin:0 0 10px;padding:0 0 10px;border-bottom:1px solid #e9e9e9}
ul.featured-post_thumbs2 li:last-child{border-bottom:none;margin:0;padding:0}
ul.featured-post_thumbs2 .featured-thumbnail2{float:left;margin:0 10px 0 0;width:62px;height:72px;overflow:hidden}
ul.featured-post_thumbs2 .featured-thumbnail2 img{height:auto;transition:all .2s}
ul.featured-post_thumbs2 .featured-thumbnail2 img:hover{opacity:.9;}
span.featured-post_title{font-family:&#39;Roboto Condensed&#39;,sans-serif;font-size:20px;font-weight:700;display:block;margin:0 0 10px;line-height:normal;text-transform:none}
span.featured-post_title2{font-size:16px;line-height:1.4em;margin:0 0 3px}
span.featured-post_title a{color:#333}
span.featured-post_title a:hover{color:#ff675c;text-decoration:none}
span.featured-post_summary{display:block;line-height:1.6em;font-size:13px;text-overflow:ellipsis;margin:10px 0 0 0}
span.featured-post_meta{display:block;font-family:&#39;Roboto Condensed&#39;,sans-serif;font-size:11px;font-weight:400;color:#aaa;text-transform:uppercase}
span.featured-post_meta a{color:#aaa;display:inline-block}
span.featured-post_meta_date,span.featured-post_meta_comment,span.featured-post_meta_more{display:inline-block;margin-right:10px}
span.featured-post_meta_comment a:before{content:&quot;f0e6&quot;;font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:5px}
span.featured-post_meta_comment a:hover{color:#ff675c!important}
span.featured-post_meta_date:before{content:&quot;f133&quot;;font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:5px}
ul.featured-post_thumbs2 li a:hover,ul.featured-post_thumbs li a:hover{color:#ff675c;text-decoration:none}
@media screen and (max-width:1024px) {
.featured-postlabel1 .widget-content, .featured-postlabel2 .widget-content {padding:20px 25px;}
.featured-post_left {width:50%;float:left;margin:0;padding:0;border-right:none}
.featured-post_right {width:46%;float:right;margin:0;padding:0;}
ul.featured-post_thumbs .featured-thumbnail {width:100%;height:auto;}
ul.featured-post_thumbs .featured-thumbnail img {width:100%;height:auto;}
ul.featured-post_thumbs li {margin:0;padding:0;}
span.featured-post_title2 {font-size:20px;line-height:1.2em;}
span.featured-post_summary {font-size:14px;}}
@media only screen and (max-width:768px){
.featured-postlabel1 .widget-content,.featured-postlabel2 .widget-content{padding:10px 20px}
.featured-post_right{width:100%;float:left;margin:0;padding:0}
ul.featured-post_thumbs2 li{border-bottom:0}
span.featured-post_summary,.featured-post_left{display:none}
span.featured-post_title{margin:0 0 5px}
ul.featured-post_thumbs li{margin:0 0 10px;padding:0 0 10px;border-bottom:0}
span.featured-post_title2{font-size:18px;line-height:1.2em}}
@media only screen and (max-width:480px){
#featured-postlabel1-wrapper,#featured-postlabel2-wrapper{display:none}}
@media only screen and (max-width:320px){
.featured-postlabel1 .widget-content,.featured-postlabel2 .widget-content{padding:10px 20px}
.featured-postlabel1 h2,.featured-postlabel2 h2{padding:10px 20px 1px 20px}
.featured-post_right{width:100%;float:left;margin:0;padding:0}
ul.featured-post_thumbs li{margin:0 0 10px;padding:0 0 10px;}
span.featured-post_title2{font-size:18px;line-height:1.2em}}
@media screen and (max-width:260px) {
.featured-postlabel1 .widget-content,.featured-postlabel2 .widget-content{padding:10px}
.featured-postlabel1 h2,.featured-postlabel2 h2{padding:10px 10px 1px 10px}
.featured-post_right{width:100%;float:left;margin:0;padding:0}
ul.featured-post_thumbs li{margin:0 0 10px;padding:0 0 10px;}
span.featured-post_title2{font-size:18px;line-height:1.2em}}
</style>
</b:if>
</b:if>
</b:if>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
//<![CDATA[
function labelthumbs(t){for(var e=0;e<numposts;e++){var n,r=t.feed.entry[e],m=r.title.$t;if(e==t.feed.entry.length)break;for(var i=0;i<r.link.length;i++){if("replies"==r.link[i].rel&&"text/html"==r.link[i].type)var l=r.link[i].title,o=r.link[i].href;if("alternate"==r.link[i].rel){n=r.link[i].href;break}}var u;try{u=r.media$thumbnail.url,u=u.replace("/s72-c/","/w"+thumb_width+"-h"+thumb_height+"-c/")}catch(h){s=r.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=r.published.$t,w=p.substring(0,4),_=p.substring(5,7),f=p.substring(8,10),g=new Array;g[1]="January",g[2]="February",g[3]="March",g[4]="April",g[5]="May",g[6]="June",g[7]="July",g[8]="August",g[9]="September",g[10]="October",g[11]="November",g[12]="December",document.write('<span class="featured-post_left">'),document.write('<ul class="featured-post_thumbs">'),document.write("<li>"),1==showpostthumbnails&&document.write('<a href="'+n+'"><div class="featured-thumbnail"><span class="rollover"></span><img width="'+thumb_width+'" height="'+thumb_height+'" alt="'+m+'" src="'+u+'"/></div></a>'),document.write('<span class="featured-post_title"><a href="'+n+'" target ="_top">'+m+"</a></span>");var v="";if(document.write('<span class="featured-post_meta">'),1==showpostdate&&(v=v+'<span class="featured-post_meta_date">'+g[parseInt(_)]+" "+f+", "+w+"</span>"),1==showcommentnum&&("1 Comments"==l&&(l="1 Comments"),"0 Comments"==l&&(l="0 Comments"),showcomment='<span class="featured-post_meta_comment"><a href="'+o+'">'+l+"</a></span>",v+=showcomment),1==displaymore&&(v=v+'<span class="featured-post_meta_more"><a href="'+n+'" class="url" target ="_top">Read More...</a></span>'),document.write(v),document.write("</span>"),document.write('<span class="featured-post_summary">'),"content"in r)var y=r.content.$t;else if("summary"in r)var y=r.summary.$t;else var y="";var k=/<S[^>]*>/g;if(y=y.replace(k,""),1==showpostsummary)if(y.length<numchars)document.write(""),document.write(y),document.write("");else{document.write(""),y=y.substring(0,numchars);var $=y.lastIndexOf(" ");y=y.substring(0,$),document.write(y+"..."),document.write("")}document.write("</span>"),document.write("</li>"),document.write("</ul>"),document.write("</span>")}document.write('<span class="featured-post_right">'),document.write('<ul class="featured-post_thumbs2">');for(var e=1;e<numposts2;e++){var n,r=t.feed.entry[e],m=r.title.$t;if(e==t.feed.entry.length)break;for(var i=1;i<r.link.length;i++){if("replies"==r.link[i].rel&&"text/html"==r.link[i].type)var l=r.link[i].title,o=r.link[i].href;if("alternate"==r.link[i].rel){n=r.link[i].href;break}}var x;try{x=r.media$thumbnail.url.replace("/s72-c/","/w"+thumb_width2+"-h"+thumb_height2+"-c/")}catch(h){s=r.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),x=-1!=a&&-1!=b&&-1!=c&&""!=d?d:no_thumb2}var p=r.published.$t,w=p.substring(0,4),_=p.substring(5,7),f=p.substring(8,10);1==showpostthumbnails2&&document.write('<a href="'+n+'"><div class="featured-thumbnail2"><img width="'+thumb_width2+'" height="'+thumb_height2+'" alt="'+m+'" src="'+x+'"/></div></a>'),document.write("<li>"),document.write('<span class="featured-post_title featured-post_title2"><a href="'+n+'" target ="_top">'+m+"</a></span>");var v="";document.write('<span class="featured-post_meta featured-post_meta2">'),1==showpostdate2&&(v=v+'<span class="featured-post_meta_date">'+g[parseInt(_)]+" "+f+", "+w+"</span>"),1==showcommentnum2&&("1 Comment"==l&&(l="1 Comments"),"0 Comment"==l&&(l="0 Comments"),showcomment='<span class="featured-post_meta_comment featured-post_meta_comment2"><a href="'+o+'">'+l+"</a></span>",v+=showcomment),1==displaymore2&&(v=v+'<span class="featured-post_meta_more featured-post_meta_more2"><a href="'+n+'" class="url" target ="_top">Read More...</a></span>'),document.write(v),document.write("</span>"),document.write("</li>")}document.write("</ul>"),document.write("</span>")}
//]]>
</script>
<script type='text/javascript'>
var numposts=1,numposts2=6,showpostthumbnails=!0,showpostthumbnails2=!1,displaymore=!1,displaymore2=!1,showcommentnum=!0,showcommentnum2=!1,showpostdate=!0,showpostdate2=!0,showpostsummary=!0,numchars=150,thumb_width=280,thumb_height=200,thumb_width2=62,thumb_height2=62,no_thumb=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyvZ6r0FlfFE7_T0gdV16y7I0oeQciKpdh_buTTUKuo8QYjsWdA0_fHsItCbUZJRfESn_oHiWL3UkBVeWs5CFwem0kgIfNnHyC3Y9Sba3O2mNIHHje5D_dkPn8B9xJdYd4xblNaXWnH4gj/s1600/featured-post_thumb.png&quot;,no_thumb2=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsH6H7AlsHO3pZ9HwUAxUQojH5h_DH7oM2-ZpDYluCxGCgQzd3KyDFpl_AoS0Fb93o5Zbv08jjkm1KcF3buSH2uZqLI-AJG5HiZeGm_Huj8VMCd52MEZxMQ-XzylUdhs3Y0CJPZB3RI9Q-/s1600/featured-postthumb_small.png&quot;;
</script>
</b:if>
</b:if>

3. Cari lagi kode <div class='post-container'>
4. Dan copy kode berikut lalu paste dibawah <div class='post-container'>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
      <div id='featured-postlabel1-wrapper'>
        <b:section class='featured-postlabel1' id='featured-postlabel1' maxwidgets='1' showaddelement='yes'>
          <b:widget id='HTML81' locked='false' title='BAHASA' type='HTML' version='1'>
            <b:widget-settings>
              <b:widget-setting name='content'>Bahasa Indonesia</b:widget-setting>
            </b:widget-settings>
            <b:includable id='main'>
<h2><span class='index'>&lt;a href=&#39;/search/label/<data:content/>?&amp;max-results=8&#39;&gt;View All&lt;/a&gt;</span><data:content/></h2>
<div class='widget-content'>
<script>
document.write(&quot;&lt;script src=&quot;/feeds/posts/default/-/<data:content/>?orderby=published&amp;alt=json-in-script&amp;callback=labelthumbs&quot;&gt;&lt;/script&gt;&quot;);
</script>
</div>
</b:includable>
          </b:widget>
        </b:section>
      </div>
      <div id='featured-postlabel2-wrapper'>
        <b:section class='featured-postlabel2' id='featured-postlabel2' maxwidgets='1' showaddelement='yes'>
          <b:widget id='HTML80' locked='false' title='BAHASA INGGRIS' type='HTML' version='1'>
            <b:widget-settings>
              <b:widget-setting name='content'>Bahasa Indonesia</b:widget-setting>
            </b:widget-settings>
            <b:includable id='main'>
<h2><span class='index'>&lt;a href=&#39;/search/label/<data:

Selesai semoga berhasil, Inilah contoh featured post pada halaman uatama atau depan blog

Gambar di atas diambil dari blog contohblog yang menggunakan featured post di halaman depan blognya, bagaimana jadi terlihat menarik bukan ? setidaknya blog kalian tidak terlihat flat dan membosankan.