Skip to main content

Cara Membuat Widget Featured Post Grid Responsive Keren 4 Artikel

Image
By

Selain menambahkannya lewat fitur tataletak (layout) blogger, kita juga bisa membuat widget featured post secara manual dengan meletakkan langsung kode-kode pembuatnya ke dalam html template. Ya, artikel kali ini saya ingin berbagi cara untuk membuat widget Featured Post keren berbentuk grid 4 artikel yang cocok untuk anda tampilkan di halaman beranda (home) blog kesayangan anda. 

Widget featured post biasanya digunakan untuk menampilkan satu atau beberapa artikel pilihan (unggulan), atau pun juga postingan tertentu yang berpotensi menarik perhatian pengunjung. Bagi anda yang membuka usaha jualan via online, widget ini juga cocok untuk menampilkan produk-produk tertentu yang ingin anda promosikan agar mudah terlihat oleh pengunjung.

Widget featured post ini sebetulnya fungsinya seperti widget slider yang pernah saya bagikan tutorialnya pada artikel terdahulu (baca: Cara Membuat Widget Slider Keren di Blog). Hanya saja, kali ini tampilan per item artikelnya memiliki bentuk grid statis alias tidak bergerak sehingga tampak seperti widget-widget yang ada pada situs-situs berita populer. Jumlahnya diatur 4 artikel saja agar tidak terlalu kebanyakan dan memberatkan loading blog. 

Perlu diketahui, widget ini sebetulnya saya modifikasi dari tutorial yang berasal dari blog Naminakiky untuk membuat tampilan bentuk grid seperti yang saya harapkan. Demo tampilannya seperti yang ada di blog saya ini (saat artikel ini ditulis). 

featured post grid keren

Apakah anda tertarik untuk memasangnya di blog anda?. Silahkan simak dan ikuti langkah-langkah pemasangannya di bawah ini. 

1. Buka akun blogger anda. 

2. Pilih menu thema dan klik edit html. 

3. Cari kode </head> dan letakkan kode berikut ini di atasnya. 
<b:if cond='data:view.isHomepage'>
<style type='text/css'>
/* Featured Post by naminakiky.com */
*,*:before, *:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.featured_namiwrap{display:inline-block;width:100%;max-width:1070px;margin:0 auto 20px auto;overflow:hidden;max-height:300px;margin-bottom:10px}.featured_namina{display:block;position:relative;float:left;overflow:hidden;height:300px}.featured_namina.second,.featured_namina.first,.featured_namina.third,.featured_namina.fourth{width:25%;padding:1px}.featured_namina a{display:block;color:rgb(255,255,255);position:relative;vertical-align:bottom;z-index:1;height:100%}.featured_namina a:before{width:100%;height:100%;position:absolute;content:&#39;&#39;;background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,.8) 100%);opacity:.7;z-index:2;transition:all .6s}.featured_namina:hover a:before{opacity:1}.featured_namina a .blog_contents{display:block;position:absolute;z-index:5;bottom:15px;left:15px;right:15px;letter-spacing:-1px;text-transform:uppercase;line-height:120%;transition:all 0.2s}.featured_namiwrap span{color:#fff;padding:3px 6px;letter-spacing:0;font-size:12px;line-height:1;border-radius:3px;text-transform:capitalize;box-shadow:0 2px 5px rgba(0,0,0,0.2)}.featured_namina.first span{background:#679e37}.featured_namina.second span{background:#f8a724}.featured_namina.third span{background:#029ae4}.featured_namina.fourth span{background:#e53935}.featured_namina a .blog_contents h3{color:#fff;margin-top:15px;font-size:16px;line-height:normal;font-weight:normal;letter-spacing:-0.4px;text-transform:none;text-shadow:none}.featured_namina a .blog_contents h3:hover{text-decoration:underline}.featured_namina .feat-img{width:100%;height:100%;background-size:cover;background-position:50%;-webkit-backface-visibility:hidden;transition:all .3s}.featured_namina:hover .feat-img{transform:rotate(-3deg) scale(1.2);-webkit-filter:blur(2px);filter:blur(2px)}
@media only screen and (max-width:800px){
.featured_namiwrap{max-height:initial}.featured_namina.second,.featured_namina.first,.featured_namina.third,.featured_namina.fourth{width:100%;height:310px;margin:0;margin-bottom:10px}.featured_namina a .blog_contents{left:15px;right:15px;bottom:10px}.featured_namina.first a .blog_contents h3,.featured_namina a .blog_contents h3{font-size:20px}}
@media only screen and (max-width:400px){
.featured_namiwrap{padding:2px;margin-bottom:-10px}}
</style>
<script type='text/javascript'>
//<![CDATA[
// Featured post by naminakiky.com
function recentposts1(e){j=showRandomImg?Math.floor((imgr.length+1)*Math.random()):0,img=new Array,numposts1<=e.feed.entry.length?maxpost=numposts1:maxpost=e.feed.entry.length,document.write('<div class="featured_namiwrap">');for(var t=0;t<maxpost;t++){var i,n=e.feed.entry[t],r=n.title.$t,l=n.category[0].term;newsize;if(t==e.feed.entry.length)break;for(var o=0;o<n.link.length;o++)if("alternate"==n.link[o].rel){i=n.link[o].href;break}for(o=0;o<n.link.length;o++)if("replies"==n.link[o].rel&&"text/html"==n.link[o].type){n.link[o].title.split(" ")[0];break}if("content"in n)var g=n.content.$t;else if("summary"in n)g=n.summary.$t;else g="";postdate=n.published.$t,j>imgr.length-1&&(j=0),img[t]=imgr[j],s=g,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[t]=d);for(var m=[1,2,3,4,5,6,7,8,9,10,11,12],f=["Oca","Şub","Mar","Nis","May","Haz","Tem","Ağu","Eyl","Eki","Kas","Ara"],p=(postdate.split("-")[2].substring(0,2),postdate.split("-")[1]),u=(postdate.split("-")[0],0);u<m.length;u++)if(parseInt(p)==m[u]){p=f[u];break}if(0==t){var v='<div class="featured_namina first"><a href="'+i+'"><div class="blog_contents"><span>'+l+"</span><h3>"+r+'</h3></div><div class="feat-img" style="background-image:url('+img[t]+');"></div></a></div>';document.write(v)}if(1==t){v='<div class="featured_namina second"><a href="'+i+'"><div class="blog_contents"><span>'+l+"</span><h3>"+r+'</h3></div><div class="feat-img" style="background-image:url('+img[t]+');"></div></a></div>';document.write(v)}if(2==t){v='<div class="featured_namina third"><a href="'+i+'"><div class="blog_contents"><span>'+l+"</span><h3>"+r+'</h3></div><div class="feat-img" style="background-image:url('+img[t]+');"></div></a></div>';document.write(v)}if(3==t){v='<div class="featured_namina fourth"><a href="'+i+'"><div class="blog_contents"><span>'+l+"</span><h3>"+r+'</h3></div><div class="feat-img" style="background-image:url('+img[t]+');"></div></a></div>';document.write(v)}j++}document.write("</div>")}imgr=new Array,imgr[0]="data:image/gif;base64,R0lGODlhAQABAIAAAPHx8AAAACH5BAEAAAAALAAAAAABAAEAQAICRAEAOw==",showRandomImg=!0,aBold=!0,numposts1=4,numposts11=1,newsize=400;
//]]>
</script>
</b:if>

4. Selanjutnya silahkan cari kode <div id='wrapper'> atau <div id='content-wrapper'> atau kode sejenis kemudian letakkan kode berikut ini di bawahnya.
<b:if cond='data:view.isHomepage'>
<div class='featured_naminaz' id='featured_namiwrap'>
<div class='ct-wrapper'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=recentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</div>
</div>
</b:if>
Keterangan:
  • Anda bisa sesuaikan lagi pengaturan margin dan lainnya pada kode CSSnya jika ada yang masih perlu diperbaiki (kode yang atas). 
  • Pengaturan di atas berfungsi layaknya widget Recent Posts. Jika ingin menampilkan artikel berdasarkan label tertentu silahkan ganti format feednya seperti berikut ini:

    /feeds/posts/default?

    Ganti menjadi:

    /feeds/posts/default/-/NAMA LABEL?

5. Simpan kembali template anda dan lihat hasilnya.

Demikian tutorial mengenai cara membuat Widget Featured Post Grid Responsive Keren 4 Artikel. Semoga bermanfaat.