Membuat Widget Popular Post Pelangi

Unknown

Widget

Kamis, 01 Januari 2015

2 Komentar

Membuat Widget Popular Post Pelangi

Selamat bertemu kembali sobat blogger semua alhamdullilah kita masih bertemu dan Juga berbagi kali ini saya akan share cara membuat widget populer posts berwarna Bagai kan pelangi,walau di weblog,dan wordpress atau web sites lainya banyak yang Menggunakan widget ini. dan kali ini saya ingin berbagi buat sobat simak di bawah ini

Namun Di sini saya akan berbagi buat Sobat Yang Belum tau dengan widgate Ini silakan Baca Dengan Seksama Artikel ini untuk memasang nya ke Blog Anda, Widgate ini sangat Cantik,. Unik keren dan sekaligus menambah penampilan Blog Sobat menjadi mewah dan membuat Pengunjung Blog anda merasa nyaman karena Widgate ini menampil kan Gambar postingan Berikut Link Gambar dan tampilan warna-warni, yana Elegan dan Menawan buat Sobat

Oke Mas Bro..Yang Berminat Dengan Widgate ini Mari langsung saja ke Topik Di Bawah ini Cara membuat Populer Post Berwarna Pelangi Silakan di Simak 1. Pertama Login ke akun blogger Sobat 2. Pilih opsi Tata Letak kemudian Tambahkan gadget Entri Populer 3.Tampilkan Entri Populer hanya judulnya saja, tak memakai gambar, tidak memakai cuplikan,pilih setiap saat, dan sobat bisa mengatur jumlah postingan yang akan tampil misalnya 4 / 5 / 8 / 10 sesuka sobat 4. Setelah Mengatur

Entri Populer selesai Klik Simpan
5. Terus Langkah berikutnya Pilih Elements Dashboard Klik Edit Template HTML kemudian centang kotak pada expand template widget 6. Cari kode berikut ]]></b:skin> tekan CTRL+F untuk mempermudah pencarian, jika sudah ketemu Copas kode di bawah ini dan tempat kan Tepat Di atas kode ]]></b:skin> jangan di bawah nya. Ini kode css - html nya :

/* Rainbow Popular Post by http://karristaent.blogspot.com*/  #PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}  #PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;  color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}  #PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}  #PopularPosts1 ul li:first-child:after,  #PopularPosts1 ul li:first-child + li:after,  #PopularPosts1 ul li:first-child + li + li:after,  #PopularPosts1 ul li:first-child + li + li + li:after,  #PopularPosts1 ul li:first-child + li + li + li + li:after,  #PopularPosts1 ul li:first-child + li + li + li + li + li:after,  #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,  #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,  #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,  #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}  #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}  #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}  #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%}  #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}  #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}  #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}  #PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}  #PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}  #PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%}  #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}  #PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}  #PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}  #PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}  #PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}  #PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}  #PopularPosts1 ul li:first-child + li + li:after{content:"3"}  #PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}  #PopularPosts1 ul li:first-child + li:after{content:"2"}  #PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}  #PopularPosts1 ul li:first-child:after{content:"1"}  #PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}  #PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}  /* Rainbow Popular Post by http://karristaent.blogspot.com*/

Keterangan :
Sebelum Anda Save Template Alangkah Baik nya Sobat Preview/Peninjauan dulu Barang kali ada kesalahan sa'at Memasukan Code di atas. Kalau sudah di Preview Tak ada laporan eror Berarti Anda sudah Berhasil dengan benar memasang Code Di atas ini, Oke Salanjut nya Tinggal Klik Save Template Lihat Hasil nya... Selamat Mencoba Semoga Berhasil Salam Kompak