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

Membuat Widget Popular Posts Flat Style Numbered

Popular posts adalah widget yang sering terpasang di banyak web / blog. Alasannya karena widget ini menampilkan artikel-artikel paling populer pada sebuah blog. Tentu saja artikel-artikel tersebut mempunyai kemungkinan yang besar untuk menarik perhatian pengunjung yang datang karena memang konten di dalamnya sudah menjadi sebuah trending topik di blog. Sehingga widget ini dapat meningkatkan pageview di blog kamu.

Widget popular posts yang rapi dan baik akan menambah daya tarik bagi pengunjung untuk kemudian membuka salah satu artikel di dalamnya. Sehingga waktu kunjungan yang mereka lakukan pada blog kita akan semakin lama. Namun sayangnya widget popular posts yang di sediakan pihak Blogger masih memiliki tampilan yang terkesan biasa saja.

Widget Popular Posts Flat Style Numbered

Sebenarnya tampilan dari widget popular posts ini diatur oleh template yang digunakan pada blog. Maka setiap template yang berbeda akan memiliki tampilan widget popular posts masing-masing. Sebagian template memiliki tampilan widget popular posts yang biasa saja, atau terkadang bahkan tidak enak dilihat. Bisa strukturnya yang berantakan, tampilan cuplikan yang terlalu panjang, dan sebagainya.

Namun jangan khawatir, bagi rekan blogger yang memiliki tampilan popular posts yang kurang baik, kali ini kita akan membuatnya lebih baik. Saya akan membagikan cara membuat tampilan widget popular posts memiliki gaya datar dan bernomor, kita sebut saja Widget Popular Posts Flat Style Numbered. Silakan lihat tampilan widget tersebut pada live demo berikut.

Membuat Widget Popular Posts Flat Style Numbered

Gaya flat adalah desain yang menjadi tren saat ini. Kamu bisa lihat pada gadget-gadget seperti smartphone, gaya flat menjadi salah satu desain yang mereka gemari untuk mempercantik smartphone. Kali ini kita akan menerapkan gaya flat untuk mempercantik tampilan widget popular posts. Silakan simak artikel ini lebih lanjut.

Memasang CSS

Pada dashboard Blogger, silakan masuk ke menu Template kemudian klik Edit HTML. Untuk kali ini kita harus memasang css pada tah head. Maka dengan tombol ctrl + f silakan cari kode </head> kemudian letakkan script berikut di atas kode </head>.
<style type='text/css'>
.PopularPosts ul {
counter-reset: popularcount;
margin: 0;
padding: 0;
}
.PopularPosts ul li {
float: left;
max-height: 130px;
min-width: 250px;
position: relative;
}
.PopularPosts .item-thumbnail::after {
color: rgba(255,255,255, 0.63);
content: counter(popularcount, decimal);
counter-increment: popularcount;
font: 70px &#39;Oswald&#39;, sans-serif;
list-style-type: none;
position: absolute;
left: 5px;
top: -5px;
z-index: 4;
}
.PopularPosts .item-thumbnail::before {
background: rgba(0, 0, 0, 0.3);
bottom: 0px;
content: &quot;&quot;;
height: 100px;
width: 100px;
left: 0px;
right: 0px;
margin: 0px auto;
position: absolute;
z-index: 3;
}
.PopularPosts .item-thumbnail a {
clip: auto;
display: block;
height: auto;
overflow: hidden;
}
.PopularPosts .item-thumbnail {
width: 100px;
height: 100px;
margin: 0px 10px 0px 0px !important;
position: relative;
}
.PopularPosts .item-thumbnail:hover:before {
display: none;
}
.PopularPosts .item-thumbnail img {
position: relative;
padding-right: 0px !important;
height: 100%;
width: 100%;
object-fit: cover;
}
.PopularPosts .item-title {
font: 13px &#39;Oswald&#39;, sans-serif;
text-transform: uppercase;
padding: 0px 5px 10px;
}
.PopularPosts .item-title a {
color: #000;
text-decoration: none;
}
.PopularPosts .item-snippet {
font: 13px &quot;Times New Roman&quot;,Times,FreeSerif,serif;
}
.PopularPosts .widget-content ul li {
padding: 0px 5px 0px 0px !important;
}
.PopularPosts .item-content {
padding: 5px 0px;
border-bottom: 1px dotted #dedede;
overflow: hidden;
height: 100px;
position: relative;
}
</style>

Widget popular posts dengan gaya flat ini menggunakan jenis font oswald di dalamnya. Jika blog sudah mendukung jenis font oswald, maka kamu bisa melewati tahap ini. Namun jika belum, silakan carilah kode <head> kemudian letakkan script berikut di bawah kode <head>.
<link href='https://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'/>

Memasang JavaScript

Widget ini juga membutuhkan javascript berikut untuk mengubah tulisan, thumbnail, dan snippet. Jika blog kamu sudah memiliki javascript tersebut, maka kamu bisa melewati tahap ini. Namun jika belum, 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;/s72-c/&#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>

Memasang Widget

Langkah terakhir 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.

Kamu bisa memilih item apa saja yang ingin ditampilkan. Namun untuk mendukung gaya flat ini, seluruh item seperti judul artikel, thumbnail dan cuplikan seharusnya 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.

Artikel terkait : Membuat Widget Popular Posts Flat Style Numbered

Artikel B-Tutorial Lainnya :

0 komentar:

Post a Comment

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