Sunday, January 21, 2018

Cara Membuat winget Popular Post Dengan Efek Ranting Bintang

Cara Membuat winget Popular Post Dengan Efek Ranting Bintang

Tags

Winget Popular Post Dengan Efek Ranting Bintang
Winget Popular Post

Ketemu lagi sobat blogger gimana kabarnya apakah masih semangat untuk belajar nge blog. Mudah-mudahan tetap semangat ya sobat. Jadi kanlah ngeblog ini sebagai hobby positif untuk mengisi waktu luang kita. Syukur-syukur kita bisa dapat sponsor iklan. Tapi setidaknya jadikanlah ladang amal berbagi ilmu kepada orang lain.

Kali ini kita akan belajar membuat winget artikel popular dengan tanda ranting bintang di bagian kanan. Artikel populer merupakan winget yang wajib di sediakan pada halaman blog atau web site. Dengan adanya winget popular artikel akan memudahkan pengguna dalam bernavigasi sekaligus melihat artikel mana yang laris dari blog kita.

Sebetulnya winget popular artikel sudah di sediakan oleh semua jenis template bahkan pada template bawaan blogger. Tapi di setiap blog bentuk tampilannya terkadang berbeda beda. Tergantung dari jenis template yang di gunakan. Bahkan winget popular post ini bisa di kreasikan semenarik mungkin. Supaya terlihat mencolok dan pengunjung penasaran ingin membuka link dari popular artikel kita.

Ok tanpa panjang lebar lagi kata pengantarnya bagi sobat yang berminat. Untuk mengganti winget popolar post blognya dengan popular post dengan efek ranting tanda bintang di sisi kanan silahkan ikuti langkah-langkah di bawah ini. Untuk contoh sobat bisa melihat gambar saya berikut ini.

Winget Popular Post Dengan Efek Ranting Bintang
Winget Popular Post

Langkah yang harus dilakukan adalah membuka dashboard blogger sobat. Kemudian pilih thema dan edit HTML. Perlu di ketahui winget ini menggunakan font awesome jadi jika pada template sobat belum ada font awesom silahkan copy kode berikut ini dan letakan di atas kode

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css' rel='stylesheet'/>

Selanjutnya cari kode CSS popular post sobat yang lama kemudian hapus semua kode CSS tersebut dan ganti dengan menggunakan kode berikut ini.

/* Popular Post */
.PopularPosts {padding:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
.PopularPosts ul{width:100%;padding:0;list-style-type:none}
.PopularPosts .widget-content ul li{margin:0 0 10px;padding:0 0 10px 0;position:relative;overflow:hidden;border-bottom:1px solid #eee}
.PopularPosts ul li .item-title{line-height:1.3em;padding:0 10px 0 0;}
.PopularPosts ul li .item-title a{text-decoration:none;font-size:1em;font-weight:600;color:#000}
.PopularPosts ul li a:hover,.PopularPosts ul li:hover a{color:#006666}
.PopularPosts .widget-content ul li img{width:90px;height:65px;padding-right:0;transition:all .5s ease-out}
.PopularPosts .item-thumbnail{float:left;margin:0 10px 0 0;width:90px;height:65px;overflow:hidden}
.PopularPosts .item-thumbnail:hover img{-webkit-transform:scale(1.3);-ms-transform:scale(1.3);-o-transform:scale(1.3);transform:scale(1.3)}
.PopularPosts ul li:before{font-family:fontawesome;content:&quot;f006f006f006f006f006&quot;;opacity:.5;display:inline-block;position:absolute;color:#3F95A9;text-align:center;bottom:0;right:0;margin:4px 4px 10px 4px;font-size:11px;padding:0;font-weight:400;line-height:normal;transition:all .3s}
.PopularPosts ul li:nth-child(1):before{font-family:fontawesome;content:&quot;f005f005f005f005f005&quot;}
.PopularPosts ul li:nth-child(2):before{font-family:fontawesome;content:&quot;f005f005f005f005f006&quot;;opacity:.4}
.PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:&quot;f005f005f005f006f006&quot;;opacity:.3}
.PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:&quot;f005f005f006f006f006&quot;;opacity:.3}
.PopularPosts ul
 li:nth-child(5):before{font-family:fontawesome;content:&quot;f005f006f006f006f006&quot;;opacity:.3}
.PopularPosts ul li:hover:before{opacity:1}
.PopularPosts ul li:last-child {margin-bottom:0}
.PopularPosts .item-snippet {font-size:11px;}

Setelah itu simpan template blog sobat dan lihat hasilnya. Nah sampai di sini seharusnya sobat sudah berhasil mengganti winget popular post biasa menjadi winget popular post dengan efek ranting bintang di sisi kananya. Jika ada masalah dalam menerapkan tutorial ini sobat bisa tanya pada kolom komentar. Untuk CSS nya saya dapat dari blognya mbak arlina. CSS ini juga saya gunakan pada blog saya yang lainya.

A man is known by the companion he keeps !

Buka Komentar

Comment Policy : Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
EmoticonEmoticon