Blogging, Search Engine Optimization, Internet, Template, Widget hingga Monetize Blog.

Widget Popular Posts Flat Style Grid Layout

Jika kamu menggunakan Blogger platform untuk blog personal atau bisnis, kamu mungkin ingin melakukan personalisasi tampilan blog sehingga membuatnya terlihat unik dan para pengunjung merasa nyaman saat menjelajahi blog kamu. Salah satu yang dapat dilakukan adalah memberikan style pada widget popular posts. Karena jika widget yang satu ini memiliki tampilan yang baik, pageview blog kamu mungkin akan meningkat. Dan kali ini kita akan memberikan sebuah style pada widget popular posts, kita sebut saja Flat style Grid Layout.

Popular Posts Flat Style Grid Layout

Tampilan widget ini hanya terdiri dari bagian thumbnail dari setiap artikel yang memiliki gaya flat dan efek hover. Ukuran thumbnail dari artikel yang paling populer lebih besar dari ukuran thumbnail lainnya. Namun dengan tata letak grid yang rapi, tampilan widget ini menjadi sangat menarik.

Karena memiliki gaya gambar besar, maka widget ini akan menjadi pilihan yang baik jika kamu ingin menampilkan gambar dari setiap artikel, atau dengan kata lain blog yang kamu miliki terfokus pada informasi visual. Sebenarnya terdapat bagian judul posting di dalamnya, namun pada keadaan pertama bagian ini tidak ditampilkan. Sehingga pengunjung harus menyentuhkan mouse pada salah satu item untuk membaca judul posting. Untuk lebih jelasnya terlebih dahulu silakan cek live demo pada link berikut.

Membuat Widget Popular Posts Flat Style Grid Layout

Untuk menerapkan Flat Style Grid Layout pada widget popular posts, kita perlu melakukan beberapa tahapan. Yang pertama adalah memasang CSS, kemudian memasang Javascript dan memasang font Oswald, dan terakhir memasang widget popular posts.

Memasang CSS

Pada dashboard Blogger silakan masuk ke menu Template kemudian klik Edit HTML. Dengan tombol ctrl + f silakan cari kode </head> dan letakkan script berikut di atas kode </head>.
<style type='text/css'>
.PopularPosts ul {
padding: 0;
}
.PopularPosts ul li:first-child{
width: 100%;
max-height: 100%;
opacity: 0.9;
}
.PopularPosts ul li:nth-child(even){
margin-right: 2%;
}
.PopularPosts ul li {
box-sizing: border-box;
position: relative;
padding: 0px !important;
width: 49%;
max-height: 120px;
opacity: 0.4;
overflow:hidden;
float: left;
margin-bottom: 2%;
-webkit-transition: all 0.5s ease 0s;
-moz-transition: all 0.5s ease 0s;
-ms-transition: all 0.5s ease 0s;
-o-transition: all 0.5s ease 0s;
transition: all 0.5s ease 0s;
}
.PopularPosts ul li:hover {
opacity: 1;
}
.PopularPosts .item-thumbnail {
margin: 0;
width: 100%;
}
.PopularPosts ul li img {
box-sizing: border-box;
width: 100%;
height: 100%;
object-fit: cover;
padding:0;
}
.PopularPosts .item-content:hover .item-title a,
.PopularPosts .item-thumbnail-only:hover .item-title a {
visibility: visible;
opacity: 1;
}
.PopularPosts .item-title a {
color: #fff;
background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.93) 100%, rgba(0, 0, 0, 0.85) 100%);
text-decoration: none;
position: absolute;
text-align: center;
font: 13px &#39;Oswald&#39;, sans-serif;
left: 0;
right: 0;
bottom: 0%;
padding: 100px 10px 10px;
opacity: 0;
visibility: hidden;
}
.PopularPosts .item-snippet {
display: none;
}
</style>

Memasang Javascript

Widget ini membutuhkan Javascript berikut untuk mengubah thumbnail dan teks. Maka dengan tombol ctrl + f silakan cari kode </body> kemudian letakkan script berikut di atas kode </body>.
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'/>
<script type='text/javascript'>
$(&#39;.popular-posts img&#39;).attr(&#39;src&#39;, function(e, t) {
return t.replace(&#39;/w72-h72-p-nu/&#39;, &#39;/s350-c/&#39;)
});
$(&#39;.popular-posts ul li .item-snippet&#39;).each(function(){
var txt=$(this).text().substr(0,60);
var j=txt.lastIndexOf(&#39; &#39;);
if(j&gt;10)
$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,&#39;...&#39;));
});
$(&#39;.popular-posts ul li .item-content a&#39;).each(function(){
var txt=$(this).text().substr(0,60);
var j=txt.lastIndexOf(&#39; &#39;);
if(j&gt;=6)
$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,&#39;...&#39;));
});
</script>

Kode berwarna merah adalah script Jquery dan terkadang sebagian template telah terpasang script tersebut. Jika pada blog kamu sudah ada script Jquery, maka kali ini kamu hapus kode berwarna merah agar tidak terjadi error.

Memasang font Oswald

Blog kamu harus mendukung font oswald untuk tampilan yang maksimal khususnya pada bagian teks. Maka silakan letakan script berikut di bawah kode <head>.
<link href='https://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'/>

Sama seperti sebelumnya, jika script di atas sudah terpasang pada blog kamu, maka kamu bisa melewati langkah ini. Kemudian setelah semua tahap telah kamu lakukan dengan benar, klik Simpan Template.

Memasang Widget

Dan langkah terakhir yang harus kamu lakukan tentunya memasang widget popular posts dengan cara seperti biasanya. Pada dashboard Blogger silakan masuk ke menu Tata Letak kemudian klik Tambahkan gadget di mana widget popular posts ini ingin diletakkan. Kemudian pilihlah wigdet popular posts / artikel terpopuler.

Untuk mendukung gaya flat ini, seluruh item seperti judul artikel, thumbnail dan cuplikan harus ditampilkan. Kemudian kamu bisa menentukan jumlah artikel yang ingin ditampilkan pada widget. Dan jika telah selesai melakukan setelan-setelan tersebut, maka klik Simpan Widget dan silakan lihat hasilnya.

Artikel terkait : Widget Popular Posts Flat Style Grid Layout

Artikel B-Tutorial Lainnya :

2 komentar:

  1. terimakasih sangat bermanfaat gan...
    oh iya templatenya bagus gan...
    ini WP atau blog ? hehe

    ReplyDelete
    Replies
    1. Terima kasih juga telah berkunjung. Ini blogspot gan, kebetulan pakai template premium.

      Delete

Copyright © 2014-2016 B-Tutorial - All Right Reserved