7 Cara Membuat Widget Featured Post Dalam Bentuk Grid yang Responsif

Widget Featured Post adalah widget postingan yang digunakan untuk menampilkan beberapa artikel unggulan atau artikel pilihan yang dianggap mempunyai potensi menarik perhatian pengunjung blog. Bukan hanya blog atau pun web yang fokus memposting artikel saja, tapi Widget Featured Post ini juga sangat cocok untuk Anda yang sedang berjualan dan membuka toko online, karena bisa menampilkan produk-produk tertentu yang ingin Anda promosikan di blog dan memudahkan pengunjung dapat langsung melihatnya. Jika ada pembeli yang berkunjung dan tertarik pada produk yang disajikan, tentu menjadi keuntungan tersendiri bagi Anda, kan?

Selain itu, widget ini juga biasa diterapkan pada blog-blog yang melakukan review produk orang lain atau membagikan berita terkini. Dengan menyematkan postingan tersebut di headline terbukti dapat menggugah rasa penasaran pengunjung blog dan akhirnya mereka memutuskan untuk membaca artikel sampai selesai. Memasang widget pada blog mungkin memang terlihat sepele dan tidak perlu dilakukan, tapi sebetulnya widget mempunyai kelebihan sendiri yang bisa memberikan manfaat lebih dari pada tidak memasangnya. Salah satu jenis widget postingan yang menguntungkan ya Widget Featured Post ini.

 Baca Juga : Cara Membuka Situs yang Diblokir untuk Laptop/Smartphone

Fungsi dari Widget Featured Post kali ini sebenarnya sama saja seperti Widget Slider yang pernah kami bagikan pada artikel sebelumnya di Cara Mudah Membuat Slide Show Atau Slider Pada Blogger, tetapi untuk tutorial yang sekarang akan menampilkan gambar artikel berbentuk grid dan tidak bergerak, mirip dengan widget postingan yang ada di situs berita populer.

Anda berminat untuk memasangnya di blog Anda? Jika iya, silahkan ikuti langkah-langkah membuatnya berikut ini :

1. Masuk ke dashboard akun blogger Anda.

2. Pilih menu “Template”dan klik “Edit HTML”.

3. Cari tag ]]></b:skin> atau </style>, Anda bisa gunakan shotcut CTRL+F supaya lebih cepat ketemu. Jika sudah ketemu letakan script code berikut di atas tag tadi.
.featured #md_fpost98 img{margin:0;padding:0;width:150px;height:195px;overflow:hidden}
.featured ul#md_fpost98 h2{color:#fff;bottom:-10px;background:rgba(17,17,17,0.6);width:140px;font-weight:500;padding:3px 5px;font-size:13px;line-height:20px;position:absolute;height:25px;transition:.3s linear;text-align:center}
.featured ul#md_fpost98 h2:hover{height:65px;transition:.3s linear}
.featured .mdinc p{display:none}
.featured ul#md_fpost98{list-style:none;margin:0;padding:5px 0 0;overflow:hidden;border-top:none}
.inf-link{font-size:11px;padding:0 5px;border-radius:2px;position:absolute;bottom:10px;right:-5px}
.featured #md_fpost98 a{color:#64707a;transition:all .3s;display:block}
.featured .md_sum{font-size:13px;color:999}
.featured .mdinc{position:absolute;top:0;right:0;margin:5px;border-radius:5px;padding:5px;background:rgba(17,17,17,0.6);color:#FFF;font-size:12px;font-family:arial,sans-serif}
.featured #md_fpost98 li{margin:5px;padding:0;position:relative;display:inline-block;transition:all .3s;overflow:hidden}
@media screen and (max-width:640px){
.featured #md_fpost98 li{float:left;width:46%}
.featured #md_fpost98 img{width:auto;height:auto}
}

4. Kemudian cari tag </body> dan letakan script code dibawah ini tepat di atasnya.

<b:if cond=”data:blog.url == data:blog.homepageUrl”>
<script type=”text/javascript”>
$(‘#md_fpost98 img’).each(function(){$(this).attr(‘src’,$(this).attr(‘src’).replace(/\/s[0-9]+(\-c)?\//,’/w150-h195-c/’))});
</script>

5. Simpan dan silahkan pergi ke menu “Tata Letak”.

6. Pilih “Tambahkan Gadget” dan klik “HTML/ JavaScript”.

7. Masukkan script code di bawah ini ke kolom yang tersedia.

<div class=’featured’><ul id=’md_fpost98′>
<script type=’text/javaScript’>
var randomfpost_number=4;var randomfpost_chars=0;var randomfpost_details=”yes”;var randomfpost_comments=”Comment”;var randomfpost_commentsd=”no”;var randomfpost_current=[];var total_randomfpost=0;var randomfpost_current=new Array(randomfpost_number);function randomfpost(a){total_randomfpost=a.feed.openSearch$totalResults.$t}document.write(‘<script type=”text/javascript” src=”/feeds/posts/default/-/Bahasa Indonesia?alt=json-in-script&max-results=0&callback=randomfpost”><\/script>’);function getvalue(){for(var e=0;e<randomfpost_number;e++){var g=false;var h=get_random();for(var f=0;f<randomfpost_current.length;f++){if(randomfpost_current[f]==h){g=true;break}}if(g){e–}else{randomfpost_current[e]=h}}}function get_random(){var b=1+Math.round(Math.random()*(total_randomfpost-1));return b};
</script>
<script type=’text/javaScript’>
function md_fpost(j){for(var p=0;p<randomfpost_number;p++){var n=j.feed.entry[p];var s=n.title.$t;if(“content” in n){var m=n.content.$t}else{if(“summary” in n){var m=n.summary.$t}else{var m=””}}for(var q=0;q<n.link.length;q++){if(“thr$total” in n){var l=n.thr$total.$t+” “+randomfpost_comments}else{l=randomfpost_commentsd}if(n.link[q].rel==”alternate”){var o=n.link[q].href;if(“media$thumbnail” in n){var r=n.media$thumbnail.url}else{r=”URL Image “}}}document.write(“<li>”);document.write(‘<a href=”‘+o+'” rel=”nofollow”><img alt=”‘+s+'” src=”‘+r+'” width=”‘+145+'” height=”‘+185+'”/><h2>’+s+”</h2></a>”);if(randomfpost_details==”yes”){document.write(‘<div class=”mdinc”>Bahasa Indonesia <p> ‘+l)+'</p></div><div style=”clear:both”></div></li>’}}}getvalue();for(var i=0;i<randomfpost_number;i++){document.write(‘<script type=”text/javascript” src=”/feeds/posts/default/-/Label Blog?alt=json-in-script&start-index=’+randomfpost_current[i]+’&max-results=1&callback=md_fpost”><\/script>’)};
</script>
</ul></div>
</b:if>

Baca Juga : Google Data Studio: Pengertian, Cara Menggunakan dan Kelebihannya

Pengaturan Widget Featured Post Grid :

Ganti angka 4 pada randomfpost_number=4; sesuai dengan jumlah postingan artikel akan disajikan. Kemudian ubah tulisan URL Image dengan alamat URL thumbnail gambar dan silahkan ganti Label Blog menjadi nama label yang ingin Anda tampilkan. Saran, agar blog tidak berat di loading ketika dibuka, lebih baik buat 4-6 grid saja.

Demikian tutorial membuat Widget Featured Post dengan bentuk grid. Dapatkan informasi dan tutorial lain seputar blog dengan terus mengunjungi digitalpro. Terimakasih, semoga bermanfaat!