Cara Membuat Widget Postingan Terpopuler Seperti PELANGI

Read More → Widget postingan terpopuler seperti pelangi memang menjadi daya tarik tersendiri bagi suatu blog. Sementara itu blog juga akan terlihat lebih menarik dan memungkinkan pengunjung untuk mengklik salah satu postingan yang terpampang di widget tersebut. Tentu saja upaya ini untuk meningkatkan pageview blog yang akan berdampak bagus terhadap blog kita di mata Google, bing, Yahoo, MSN dll. Perlu di ketahui bahwa kepopuleran suatu blog adalah seberapa banyak pageview atau halaman yang di lihat, semakin banyak pageview maka semakin bagus bagi si blog.

Maka dari itu kenapa kita tidak memasang widget postingan terpopuler seperti pelangi ini, Memasang widget postingan terpopuler memang sangat bermacam-macam bentuknya, namun cara ini menurut saya sangat ampuh untuk mendongkrak kepopuleran blog atau website kita. Jika sobat tertarik untuk memasangnya langsung saja ke TEKAPE.

Berikut ini cara membuat widget postingan terpopuler seperti pelangi/rainbow :

1. Login ke akun blogger

2. Pilih opsi Tata Letak kemudian Tambahkan gadget Entri Populer

3. Tampilkan Entri Populer cuma judulnya saja, tidak memakai gambar, tidak memakai cuplikan, pilih setiap saat, dan sobat bisa mengatur jumlah postingan yang akan tampil misalnya 3 / 5 / 8 / 10 sesuka sobat saja.

4. Simpan

5. Langkah berikutnya Pilih opsi Template lalu Edit HTML kemudian beri tanda centang pada expand template widget

6. Cari kode berikut  ]]></b:skin>  tekan ctrl+f untuk mempermudah pencarian, jika sudah ketemu taruh kode di bawah ini di atas kode ]]></b:skin>

/* Rainbow Popular Post by http://goresanmouse.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://goresanmouse.blogspot.com*/

7. Simpan Template dan lihat hasilnya.

Backlinks Please Thanks

URL

Code For Forum

HTML Code <a href='http://cahboedi-7.blogspot.com/2013/02/cara-membuat-widget-postingan.html' target='_blank'>Cara Membuat Widget Postingan Terpopuler Seperti PELANGI</a>

Anda Baru Saja Membaca Artikel Tentang Cara Membuat Widget Postingan Terpopuler Seperti PELANGI ,Anda Boleh Menyebarluaskan / Mengcopy Paste Artikel Cara Membuat Widget Postingan Terpopuler Seperti PELANGI Ini Bermanfaat Buat Anda , Namun Saya Mohon Untuk Mencantumkan Link Cara Membuat Widget Postingan Terpopuler Seperti PELANGI Sebagai SumberNya.