Cara Merubah Dan Memodifikasi Featured Post Grid Pada Template Viomagz

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

Namun, berdasarkan aku langsung tampilan desainnya kurang terlihat menarik entah jika berdasarkan Anda. Model tampilan pada template Viomagz yang orisinil masih ibarat default Blogger yaitu single entri.

Pada artikel kali ini aku akan mencoba memberi panduan bagaimana merubah tampilan Featured Post model single entri ibarat default Blogger yang juga dipakai di template Viomagz menjadi model Grid. Untuk demo penerapan Fetaured Post ini dapat 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 ibarat yang dipakai 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 bab bawah Menu Header atau atas Blog Post
4. Pilih HTML/JavaScript
5. Silahkan copy paste arahan di bawah ini kedalam bab 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 goresan pena https://www.BLOGANDA.com dengan Url blog Anda.
• MaxPost:8 yakni 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 menyampaikan penggunaan slider otomatis mengurangi skor SEO meskipun secara tampilan mungkin lebih terlihat keren. Untuk lebih jelasnya mengenai efek negatif slider otomatis ini silahkan baca : Don't Use Automatic Image Slider or Carousels. Makara silahkan pertimbangkan apakah akan memakai 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 dapat bermanfaat dan menjadi panduan bagi Anda.

Jika Anda ada pertanyaan ataupun suplemen gosip 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.

Share this post