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

Widget Popular Posts Flat Style Colorful Boxes

Widget yang menampilkan artikel-artikel terlaris di blog adalah widget popular posts. Tampilan yang rapi dan baik pada widget popular posts akan menambah daya tarik bagi para pengunjung untuk membuka salah satu artikel di dalamnya. Jika widget popular posts di blog kamu memiliki tampilan yang biasa saja, silakan coba terapkan style yang satu ini agar memiliki tampilan yang lebih menarik. Kita bisa sebut tampilan ini dengan nama popular posts flat style colorful boxes.

Popular Posts Flat Style Colorful Boxes

Tampilan widget ini memiliki gaya flat di bagian thumbnail dan di bagian item yang menampilkan judul serta cuplikan artikel. Kemudian setiap artikel memiliki warna yang berbeda-beda di bagian item sehingga kombinasi warna antara setiap bagiannya membuat widget ini benar-benar colorful. Untuk lebih jelasnya silakan lihat live demo pada link berikut.

Membuat Widget Popular Posts Flat Style Colorful Boxes

Untuk menerapkan style ini pada widget popular posts, kita akan melakukan beberapa tahapan. Yang pertama adalah memasang widget, dilanjutkan dengan memasang CSS, memasang Javascript dan memasang font Oswald.

Memasang Widget

Langkah pertama adalah 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 terakhir silakan klik Simpan Widget.

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;
margin: 0;
}
.PopularPosts .item-thumbnail a {
clip: auto;
display: block;
height: auto;
overflow: hidden;
}
.PopularPosts .item-thumbnail {
width: 130px;
height: 130px;
border-right: 5px solid #fff;
margin: 0px 10px 0px 0px !important;
position: relative;
}
.PopularPosts .item-thumbnail img {
position: relative;
height: 100%;
width: 100%;
object-fit: cover;
}
.PopularPosts ul li {
float: left;
margin-bottom: 5px;
max-height: 130px;
min-width: 250px;
overflow: hidden;
}
.PopularPosts ul li:first-child {
background: #D9EDF7;
}
.PopularPosts ul li:first-child + li{
background: #F2DEDE;
}
.PopularPosts ul li:first-child + li + li {
background: #DFF0D8;
}
.PopularPosts ul li:first-child + li + li + li {
background: #FFEEBC;
}
.PopularPosts ul li:first-child + li + li + li + li{
background: #E0E0E0;
}
.PopularPosts .item-title {
font: 13px &#39;Oswald&#39;, sans-serif;
text-transform: uppercase;
padding: 10px 5px 10px;
}
.PopularPosts .item-title a {
color: #000;
text-decoration: none;
}
.PopularPosts .item-snippet {
font: 13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;
padding-right: 5px;
}
.PopularPosts .widget-content ul li {
padding: 0px 5px 0px 0px!important;
}
</style>

Memasang Javascript

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. Jika pada blog kamu sudah ada script tersebut, maka kali ini kamu hapus kode berwarna merah agar tidak terjadi error.

Memasang font Oswald

Untuk mendukung setiap bagian pada style yang akan diterapkan pada widget ini, blog kamu harus mendukung font oswald. 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 tadi sudah terpasang pada blog kamu, maka kamu bisa melewati langkah ini. Kemudian setelah semua tahap telah kamu lakukan dengan benar, klik Simpan Template kemudian silakan lihat hasilnya.

Artikel terkait : Widget Popular Posts Flat Style Colorful Boxes

Artikel B-Tutorial Lainnya :

0 komentar:

Post a Comment

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