Cara Merubah dan Memodifikasi Featured Post Grid pada Template Viomagz

Memodifikasi Featured Post Viomagz - Salah satu fitur terbaru Blogger adalah adalah adalah widget Featured Post yang bisa kita tambahkan pada blog kita melalui menu Layout di dasboard Blogger. Widget Featured Post sendiri adalah widget yang digunakan untuk menampilkan konten (entri) unggulan pada blog kita. Pada beberapa template terbaru sudah banyak disertakan widget Featured Post ini, salah satunya adalah Template Viomagz buatan Mas Sugeng yang fenomenal.

Namun, menurut saya pribadi tampilan desainnya kurang terlihat menarik entah kalau menurut Anda. Model tampilan pada template Viomagz yang asli masih seperti default Blogger yaitu single entri.

Pada artikel kali ini saya akan mencoba memberi panduan bagaimana merubah tampilan Featured Post model single entri seperti default Blogger yang juga digunakan di template Viomagz menjadi model Grid. Untuk demo penerapan Fetaured Post ini bisa dilihat ulascamera.blogspot.com.

Membuat dan Memodifikasi Featured Post Template Viomagz

Silahkan Anda ikuti langkah-langkah bagaimana merubah dan memodifikasi widget Featured Post ala default Blogger seperti yang digunakan di template Viomagz di bawah ini :

1. Silahkan Anda login ke dashboard Blogger Anda
2. Pilih Layout/Tata Letak
3. Kemudian pilih Add Widget pada bagian bawah Menu Header atau atas Blog Post
4. Pilih HTML/JavaScript
5. Silahkan copy paste kode di bawah ini kedalam bagian content

 <style>
#featuredpost {margin:15px auto;}
#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}
#slides ul{height:320px}
#slides li{width:50%;height:100% ;position:absolute;display:none}
#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4), #slides li:nth-child(5){display:block}
#slides li:nth-child(1){left:0;top:0}
#slides li:nth-child(2){left:50%;width:25%;height:50%}
#slides li:nth-child(3){left:75%;width:25%;height:50%}
#slides li:nth-child(4){left:50%;top:50%;width:25%;height:50%}
#slides li:nth-child(5){left:75%;top:50%;width:25%;height:50%}
#slides li:nth-child(1) h4 {overflow:hidden;font-size:25px;bottom:0;color:#fafafa;width:100%;
padding:10px 10px 10px 90px;text-align:left;text-transform:uppercase;background:rgba(0,0,0,0.3);
height:90px;font-family:&#39;Oswald&#39;;text-shadow:2px 2px 0 rgba(0,0,0,0.2);line-height:32px;left:0;}
#slides li:nth-child(1) .label_text {font-size:30px;display:block;bottom:10px;left:10px;
padding:0;font-family:&#39;Oswald&#39;;box-shadow:5px 3px 0 rgba(0,0,0,0.2);}
#slides li:nth-child(1) span.dd {display:block;font-size:30px;padding:12px 15px;
background:#ff6553;margin:0;}
#slides li:nth-child(1) span.dm {display:block;font-size:14px;background:#333;color:#fff;
padding:5px 21px;text-transform:uppercase;margin:0;}
#slides li:nth-child(1) span.dy, #slides li:nth-child(1) span.autname{display:none;}
#slides a{display:block;width:100%;height:100%;overflow:hidden}
#slides img{display:block;width:100%;height:auto;border:0;padding:0;background-color:#333;-moz-transform:scale(1.0) rotate(0);-webkit-transform:scale(1.0) rotate(0);-ms-transform:scale(1.0) rotate(0);transform:scale(1.0) rotate(0);transition:all 0.6s linear;}
#slides li a:hover img {-moz-transform:scale(1.1) rotate(1deg);-webkit-transform:scale(1.1) rotate(1deg);-ms-transform:scale(1.1) rotate(1deg);transform:scale(1.1) rotate(1deg);transition:all 0.3s linear;}
#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(http://2.bp.blogspot.com/-0haO2Mfkjjk/VDgZww2tfEI/AAAAAAAAHAk/zhu3INYSkHA/s1600/fade.png);background-position:50% 40%;background-repeat:repeat-x;}
#slides h4{position:absolute;bottom:40px;margin:0;font-size:13px;font-family:&#39;Oswald&#39;;
left:10px;padding:5px 10px;color:#f9f9f9;z-index:3;line-height:20px;font-weight:normal;
background:rgba(41,41,41,0.7);text-align:left;text-transform:uppercase;margin-right:10px;}
#slides .label_text{font-size:12px;color:#fff;bottom:10px;z-index:3;left:10px;
position:absolute;background:rgba(255,101,83,0.8);padding:3px 6px;font-family:&#39;Oswald&#39;;
text-transform:uppercase;}
#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname,#slides li:nth-child(4) .autname,#slides li:nth-child(5) .autname{display:none;}
#slides .overlayx,#slides li{transition:all .4s ease-in-out}
#slides li:nth-child(1) .overlayx{display:none;}
#slides li:hover .overlayx{opacity:0.1}
@media only screen and (max-width:800px){
#slides li:nth-child(1) h4 {font-size:18px;line-height:24px;}}
@media only screen and (max-width:600px){
  #slides ul{height:600px}
  #slides li:nth-child(1){width:100%;height:50%}
  #slides li:nth-child(2){top:50%;height:25%;left:0;width:50%}
  #slides li:nth-child(3){left:50%;top:50%;width:50%;height:25%}
  #slides li:nth-child(4){left:0;top:75%;height:25%;width:100%}
  #slides li:nth-child(5){display:none;}}
@media only screen and (max-width:480px){
#slides li:nth-child(1) h4 {font-size:13px;line-height:16px;}}
</style>
<script type="text/javascript" src="https://cdn.rawgit.com/Brando07/share/newbe/seocips-rec-post-slider.js"></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:"https://www.BLOGANDA.com",
MaxPost:8,
idcontaint:"#featuredpost",
ImageSize:500,
interval:10000,
autoplay:true,
tagName:false
});
});
//]]>
</script>
<div id="featuredpost"></div>

Keterangan :

• Silahkan ganti tulisan https://www.BLOGANDA.com dengan Url blog Anda.
• MaxPost:8 adalah untuk menampilkan jumlah post di featured post
• autoplay:true untuk menampilkan 8 post secara random (slider otomatis). Jika Anda ganti dengan false maka featured post yang tampil hanya 5 post (tidak slider otomatis).

Catatan :
Ada yang mengatakan penggunaan slider otomatis mengurangi skor SEO meskipun secara tampilan mungkin lebih terlihat keren. Untuk lebih jelasnya mengenai dampak negatif slider otomatis ini silahkan baca : Don't Use Automatic Image Slider or Carousels. Jadi silahkan pertimbangkan apakah akan menggunakan slider otomatis atau menonaktifkannya

6. Yang terakhir klik Save/simpan untuk melihat hasilnya

Semoga dengan mengikuti langkah diatas, Anda berhasil merubah dan memodifikasi featured post grid dengan slider otomatis di blog khususnya template Viomagz. Semoga artikel ini bisa bermanfaat dan menjadi panduan bagi Anda.

Jika Anda ada pertanyaan ataupun tambahan informasi terkait artikel ini, silahkan tulis di kolom komentar yang tersedia. Jangan lupa untuk share kepada teman-teman Anda mungkin mereka membutuhkan panduan ini. Terima kasih.