Membuat popular post unik

Assalamualaikum.
Beberapa saat yang lalu saya sudah share cara membuat popular post warna-warni dan popular post warna-warni v.2.Di kesempatan kali ini saya akan share cara membuat popular post dengan tampilan unik.
Contoh tampilannya adalah seperti contoh gambar dibawah ini.

Membuat popular post unik

Keterangan:


  • Jika nomor tersentuh kursor maka nomor akan berputar beberapa derajat.
  • Karena popular post ini menggunakan nomor,maka tampilan popular post ini akan sangat baik jika fungsi gambar thumbnail di nonaktifkan.
  • Jika anda sudah terbiasa dengan kode warna,maka anda akan dapat membuat warna popular post ini lebih menarik.
Sudah tidak sabar untuk membuat popular post seperti contoh gambar diatas? baiklah berikut caranya.

Berikut cara membuat popular post dengan background warna-warni.
A.Langkah pertama.
Langkah pertama adalah menambahkan widget popular post di bagian sidebar blog,caranya adalah sebagai berikut.


  • Silahkan anda login ke www.blogger.com.
  • Setelah anda berhasil masuk ke halaman dashboard,silahkan klik nama blog yang akan anda pasangi popular post (apabila blog anda lebih dari 1).Contoh seperti gambar dibawah ini.


Membuat popular post unik

  • Di halaman berikutnya silahkan anda klik tata letak,seperti contoh gambar dibawah ini.

Membuat popular post unik

  • Di halaman pengaturan tata letak,Silahkan anda klik add gadget di bagian layout sidebar,seperti contoh gambar dibawah ini.

Membuat popular post unik


  • Nanti akan muncul tab baru berisi berbagai gadget yang bisa kita terapkan di blog,silahkan anda pilih atau klik entri populer,seperti contoh gambar dibawah ini.

Membuat popular post unik

  • Berikutnya,silahkan anda hilangkan cecklist atau tanda centang pada bagian tumbnail gambar dan cuplikan,lalu klik simpan.Contoh seperti gambar dibawah ini.

Membuat popular post unik


B.Langkah kedua.
Langkah kedua yaitu menambahkan kode css pada bagian template blog.Caranya adalah sebagai berikut.

  • Pertama,silahkan anda klik template,seperti contoh gambar dibawah ini.

Membuat popular post unik

  • Di halaman pengaturan template silahkan anda klik edit HTML,seperti contoh gambar dibawah ini.

Membuat popular post unik


  • Berikutnya anda akan melihat kode-kode yang membentuk struktur halaman blog anda,silahkan anda cari kode ]]></b:skin>,untuk memudahkan pencarian,silahkan anda gunakan CTRL+F (jika anda menggunakan komputer)
  • Berikutnya silahkan anda masukkan kode css berikut ini tepat diatas kode ]]></b:skin> tadi.

/* popular post----------------------------------------------- */
#PopularPosts1 ul{
list-style:none;
counter-reset:li;
padding:8px 0px 1px;
left:-7px;
width: 90%;
margin-left: 25px;
}
#PopularPosts1 li{
position:relative;
margin:0 0 10px 0;
padding: 3px 2px 0 17px;
left:-5px;
width:90%;
}
#PopularPosts1 ul li{
background: #eee;
position: relative;
display: block;
padding: .4em .2em .4em 2em;
*padding: .2em;
margin: .5em 0;
background: #ddd;
text-decoration: none;
border-radius: .3em;
transition: all .3s ease-out;
}
#PopularPosts1 ul li:before{
content: counter(li);
counter-increment: li;
position: absolute;
top: 50%;
margin: -1.3em;
height: 2em;
width: 2em;
line-height: 2em;
font-size: 15px;
color: #fff; /* text color of numbers */
background: #283C48; /* background color of numbers */
border: .2em solid #fff; /* border color */
-webkit-box-shadow: 0 8px 5px -7px #888;
-moz-box-shadow: 0 8px 5px -7px #888;
box-shadow: 0 8px 5px -7px #888;
text-align: center;
font-weight: bold;
border-radius: 2em;
position: absolute;
left: 0;
transition: all .3s ease-out;
}
#PopularPosts1 ul li:hover{
background: #eee;
}
#PopularPosts1 ul li:hover:before{
transform: rotate(360deg);
}
#PopularPosts1 ul li a{
font: 12px cuprum; /* font size of post titles */
text-shadow: 0 -1px 2px #fff;
color: #444;
display:block;
min-height:25px;
text-decoration:none;
text-transform: capitalize;
}
#PopularPosts1 ul li a:hover{
color: #444;
}

  • Jika sudah,berikutnya silahkan anda klik save atau simpan untuk menyimpan perubahan.Kunjungi blog anda untuk melihat hasilnya.
Bagaimana? cukup menarik bukan?
Terimkasih telah berkunjung dan semoga bermanfaat.
Assalamualaikum.

Berkomentarlah dengan kata-kata yang baik dan dilarang mencantumkan link berbau pornografi,iklan