Cara Membuat Widget Popular Post Warna Pelangi

<br /><div class="MsoNormal" style="line-height: 150%; margin-bottom: .0001pt; margin-bottom: 0in; text-align: justify;"><a href="http://www.rayhanzhampiet.com/2013/05/Cara-Membuat-Widget-Popular-Post-Warna-Warni-Pelangi.html" target="_blank"><b style="mso-bidi-font-weight: normal;">Cara Membuat Widget Popular Post Warna Pelangi</b></a> - <b style="mso-bidi-font-weight: normal;">Widget artikel populer</b> warna-warni dengan style <b style="mso-bidi-font-weight: normal;">belah ketupat</b> ini ada juga yang menyebutnya <b style="mso-bidi-font-weight: normal;">Rainbow Popular Post</b> dikarenakan warna <a href="http://www.rayhanzhampiet.com/2011/11/cara-mengganti-background-blog-otomatis.html" target="_blank">background</a>nya yang seperti <i>pelangi</i>. Aslinya merupakan gadget popular post bawaan Blogger, hanya saja dilakukan penambahan kode CSS tertentu pada template sehingga tampilan widget bisa jadi lebih bagus dan keren sekaligus <a href="http://www.rayhanzhampiet.com/2012/02/cara-mempercantik-tampilan-blog.html" target="_blank"><i style="mso-bidi-font-style: normal;"><u>mempercantik tampilan blog</u></i></a> sobat dong tentunya. Well sobat, silahkan simak cara pembuatan widget popular post dengan warna-warni pelangi dibawah ini. </div><div class="MsoNormal" style="line-height: 150%; margin-bottom: .0001pt; margin-bottom: 0in; text-align: justify;"><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzLyzDFalMy6qc9FNbPRiuiAB8DqxzSA_qPylsHuVxOgcD6Ykzsht8FQXM-CYQxEzj7Ikc6cd5vgLFDB_8Irfs_G-f46x3iwLMFJ96wi1zFgfmRfdAGsRii4vvuPWE_Da5kT9Po-RIWEOr/s1600/widget+pelangi+rainbow.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="widget popular post warna pelangi rainbow" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzLyzDFalMy6qc9FNbPRiuiAB8DqxzSA_qPylsHuVxOgcD6Ykzsht8FQXM-CYQxEzj7Ikc6cd5vgLFDB_8Irfs_G-f46x3iwLMFJ96wi1zFgfmRfdAGsRii4vvuPWE_Da5kT9Po-RIWEOr/s1600/widget+pelangi+rainbow.jpg" title="" /></a></div><div style="text-align: center;"><br /></div></div><div class="MsoNormal" style="line-height: 150%; margin-bottom: .0001pt; margin-bottom: 0in; text-align: justify;">Baik sobat langsung saja inilah <b style="mso-bidi-font-weight: normal;">Cara Memasang Rainbow Popular Post</b> di blogger :</div><div class="MsoNormal" style="line-height: 150%; margin-bottom: .0001pt; margin-bottom: 0in; text-align: justify;"><br /></div><div class="MsoListParagraphCxSpFirst" style="line-height: 150%; margin-bottom: .0001pt; margin-bottom: 0in; margin-left: .25in; margin-right: 0in; margin-top: 0in; mso-add-space: auto; mso-list: l0 level1 lfo1; text-align: justify; text-indent: -.25in;"><span style="mso-bidi-font-family: Calibri; mso-bidi-theme-font: minor-latin;"><span style="mso-list: Ignore;">1.<span style="font: 7.0pt "Times New Roman";">       </span></span></span>Login ke dashboard blogger anda.</div><div class="MsoListParagraphCxSpMiddle" style="line-height: 150%; margin-bottom: .0001pt; margin-bottom: 0in; margin-left: .25in; margin-right: 0in; margin-top: 0in; mso-add-space: auto; mso-list: l0 level1 lfo1; text-align: justify; text-indent: -.25in;"><span style="mso-bidi-font-family: Calibri; mso-bidi-theme-font: minor-latin;"><span style="mso-list: Ignore;">2.<span style="font: 7.0pt "Times New Roman";">       </span></span></span>Pilih menu Template > Edit HTML.</div><div class="MsoListParagraphCxSpMiddle" style="line-height: 150%; margin-bottom: .0001pt; margin-bottom: 0in; margin-left: .25in; margin-right: 0in; margin-top: 0in; mso-add-space: auto; mso-list: l0 level1 lfo1; text-align: justify; text-indent: -.25in;"><span style="mso-bidi-font-family: Calibri; mso-bidi-theme-font: minor-latin;"><span style="mso-list: Ignore;">3.<span style="font: 7.0pt "Times New Roman";">      </span></span></span>Cari kode <b style="color: #cc0000;">]]></b:skin></b><span style="mso-spacerun: yes;"> </span>pada template. </div><div class="MsoListParagraphCxSpMiddle" style="line-height: 150%; margin-bottom: .0001pt; margin-bottom: 0in; margin-left: .25in; margin-right: 0in; margin-top: 0in; mso-add-space: auto; mso-list: l0 level1 lfo1; text-align: justify; text-indent: -.25in;"><span style="mso-bidi-font-family: Calibri; mso-bidi-theme-font: minor-latin;"><span style="mso-list: Ignore;">4.<span style="font: 7.0pt "Times New Roman";">      </span></span></span>Copy script dibawah ini dan paste tepat diatas kode <b style="color: #cc0000;">]]></b:skin></b><span style="mso-spacerun: yes;"> </span>tadi. </div><div class="MsoListParagraphCxSpMiddle" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; margin-left: .25in; margin-right: 0in; margin-top: 0in; mso-add-space: auto; text-align: justify;"><br /></div><blockquote class="tr_bq"><div class="MsoListParagraphCxSpMiddle" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; margin-left: .25in; margin-right: 0in; margin-top: 0in; mso-add-space: auto;">/* Rainbow Popular Post Style Start */</div><div class="MsoListParagraphCxSpMiddle" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; margin-left: .25in; margin-right: 0in; margin-top: 0in; mso-add-space: auto;">#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}</div><div class="MsoListParagraphCxSpMiddle" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; margin-left: .25in; margin-right: 0in; margin-top: 0in; mso-add-space: auto;">#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;<span style="mso-spacerun: yes;">  </span>color: #333333; display: block; <span style="background-color: yellow;">font-family: Georgia, 'Times New Roman', Times, serif; font-size: 12px;</span> 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;}</div><div class="MsoListParagraphCxSpMiddle" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; margin-left: .25in; margin-right: 0in; margin-top: 0in; mso-add-space: auto;">#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}</div><div class="MsoListParagraphCxSpMiddle" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; margin-left: .25in; margin-right: 0in; margin-top: 0in; mso-add-space: auto;">#PopularPosts1 ul li:first-child:after,</div><div class="MsoListParagraphCxSpMiddle" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; margin-left: .25in; margin-right: 0in; margin-top: 0in; mso-add-space: auto;">#PopularPosts1 ul li:first-child + li:after,</div><div class="MsoListParagraphCxSpMiddle" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; margin-left: .25in; margin-right: 0in; margin-top: 0in; mso-add-space: auto;">#PopularPosts1 ul li:first-child + li + li:after,</div><div class="MsoListParagraphCxSpMiddle" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; margin-left: .25in; margin-right: 0in; margin-top: 0in; mso-add-space: auto;">#PopularPosts1 ul li:first-child + li + li + li:after,</div><div class="MsoListParagraphCxSpMiddle" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; margin-left: .25in; margin-right: 0in; margin-top: 0in; mso-add-space: auto;">#PopularPosts1 ul li:first-child + li + li + li + li:after,</div><div class="MsoListParagraphCxSpMiddle" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; margin-left: .25in; margin-right: 0in; margin-top: 0in; mso-add-space: auto;">#PopularPosts1 ul li:first-child + li + li + li + li + li:after,</div><div class="MsoListParagraphCxSpMiddle" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; margin-left: .25in; margin-right: 0in; margin-top: 0in; mso-add-space: auto;">#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,</div><div class="MsoListParagraphCxSpMiddle" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; margin-left: .25in; margin-right: 0in; margin-top: 0in; mso-add-space: auto;">#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,</div><div class="MsoListParagraphCxSpMiddle" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; margin-left: .25in; margin-right: 0in; margin-top: 0in; mso-add-space: auto;">#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,</div><div class="MsoListParagraphCxSpMiddle" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; margin-left: .25in; margin-right: 0in; margin-top: 0in; mso-add-space: auto;">#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;<span style="background-color: yellow;">font-size:28px;</span>color:#fff}</div><div class="MsoListParagraphCxSpMiddle" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; margin-left: .25in; margin-right: 0in; margin-top: 0in; mso-add-space: auto;">#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#d1ffff;width:90%}</div><div class="MsoListParagraphCxSpMiddle" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; margin-left: .25in; margin-right: 0in; margin-top: 0in; mso-add-space: auto;">#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}</div><div class="MsoListParagraphCxSpMiddle" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; margin-left: .25in; margin-right: 0in; margin-top: 0in; mso-add-space: auto;">#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#c7f25f;width:90%}</div><div class="MsoListParagraphCxSpMiddle" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; margin-left: .25in; margin-right: 0in; margin-top: 0in; mso-add-space: auto;">#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}</div><div class="MsoListParagraphCxSpMiddle" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; margin-left: .25in; margin-right: 0in; margin-top: 0in; mso-add-space: auto;">#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#f59095;width:90%}</div><div class="MsoListParagraphCxSpMiddle" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; margin-left: .25in; margin-right: 0in; margin-top: 0in; mso-add-space: auto;">#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}</div><div class="MsoListParagraphCxSpMiddle" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; margin-left: .25in; margin-right: 0in; margin-top: 0in; mso-add-space: auto;">#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%}</div><div class="MsoListParagraphCxSpMiddle" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; margin-left: .25in; margin-right: 0in; margin-top: 0in; mso-add-space: auto;">#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}</div><div class="MsoListParagraphCxSpMiddle" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; margin-left: .25in; margin-right: 0in; margin-top: 0in; mso-add-space: auto;">#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}</div><div class="MsoListParagraphCxSpMiddle" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; margin-left: .25in; margin-right: 0in; margin-top: 0in; mso-add-space: auto;">#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}</div><div class="MsoListParagraphCxSpMiddle" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; margin-left: .25in; margin-right: 0in; margin-top: 0in; mso-add-space: auto;">#PopularPosts1 ul li:first-child + li + li + li + li{background:#ff00ff;width:90%}</div><div class="MsoListParagraphCxSpMiddle" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; margin-left: .25in; margin-right: 0in; margin-top: 0in; mso-add-space: auto;">#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}</div><div class="MsoListParagraphCxSpMiddle" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; margin-left: .25in; margin-right: 0in; margin-top: 0in; mso-add-space: auto;">#PopularPosts1 ul li:first-child + li + li + li{background:#5faff2;width:90%}</div><div class="MsoListParagraphCxSpMiddle" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; margin-left: .25in; margin-right: 0in; margin-top: 0in; mso-add-space: auto;">#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}</div><div class="MsoListParagraphCxSpMiddle" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; margin-left: .25in; margin-right: 0in; margin-top: 0in; mso-add-space: auto;">#PopularPosts1 ul li:first-child + li + li{background:#a9ed04;width:90%}</div><div class="MsoListParagraphCxSpMiddle" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; margin-left: .25in; margin-right: 0in; margin-top: 0in; mso-add-space: auto;">#PopularPosts1 ul li:first-child + li + li:after{content:"3"}</div><div class="MsoListParagraphCxSpMiddle" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; margin-left: .25in; margin-right: 0in; margin-top: 0in; mso-add-space: auto;">#PopularPosts1 ul li:first-child + li{background:#ffde4c; width:90%}</div><div class="MsoListParagraphCxSpMiddle" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; margin-left: .25in; margin-right: 0in; margin-top: 0in; mso-add-space: auto;">#PopularPosts1 ul li:first-child + li:after{content:"2"}</div><div class="MsoListParagraphCxSpMiddle" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; margin-left: .25in; margin-right: 0in; margin-top: 0in; mso-add-space: auto;">#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}</div><div class="MsoListParagraphCxSpMiddle" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; margin-left: .25in; margin-right: 0in; margin-top: 0in; mso-add-space: auto;">#PopularPosts1 ul li:first-child:after{content:"1"}</div><div class="MsoListParagraphCxSpMiddle" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; margin-left: .25in; margin-right: 0in; margin-top: 0in; mso-add-space: auto;">#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}</div><div class="MsoListParagraphCxSpMiddle" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; margin-left: .25in; margin-right: 0in; margin-top: 0in; mso-add-space: auto;">#PopularPosts1 ul li{position:relative;margin:3px 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}</div><div class="MsoListParagraphCxSpMiddle" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; margin-left: .25in; margin-right: 0in; margin-top: 0in; mso-add-space: auto;">/* Rainbow Popular Post Style End */</div></blockquote><div class="MsoListParagraphCxSpMiddle" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; margin-left: .25in; margin-right: 0in; margin-top: 0in; mso-add-space: auto; text-align: justify;"><br /></div><div class="MsoListParagraphCxSpMiddle" style="line-height: 150%; margin-bottom: .0001pt; margin-bottom: 0in; margin-left: .25in; margin-right: 0in; margin-top: 0in; mso-add-space: auto; mso-list: l0 level1 lfo1; text-align: justify; text-indent: -.25in;"><span style="mso-bidi-font-family: Calibri; mso-bidi-theme-font: minor-latin;"><span style="mso-list: Ignore;">5.<span style="font: 7.0pt "Times New Roman";">       </span></span></span>Save / Simpan template anda.</div><div class="MsoListParagraphCxSpMiddle" style="line-height: 150%; margin-bottom: .0001pt; margin-bottom: 0in; margin-left: .25in; margin-right: 0in; margin-top: 0in; mso-add-space: auto; mso-list: l0 level1 lfo1; text-align: justify; text-indent: -.25in;"><span style="mso-bidi-font-family: Calibri; mso-bidi-theme-font: minor-latin;"><span style="mso-list: Ignore;">6.<span style="font: 7.0pt "Times New Roman";">       </span></span></span>Kemudian untuk setting pada gadget Popular Post sobat harus mengaturnya seperti gambar dibawah ini. Hilangkan semua tanda centang (checklist) pada tulisan Tampilan.</div><div class="MsoListParagraphCxSpMiddle" style="line-height: 150%; margin-bottom: .0001pt; margin-bottom: 0in; margin-left: .25in; margin-right: 0in; margin-top: 0in; mso-add-space: auto; text-align: justify;"><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCF_JMFIXMqgOm3wqp2ePahVf0wanDm3twxVvRooELC1R5NEm5YccObQ3GfghRHC74azlunpKkFhHyH4rRFiej8uOF6TSEhzfRD3m_Tpnzmj9Ooq5KX1VVa0ZPRiyMas3GKqPLhdeH8-uz/s1600/setting+gadget+popular+post.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="cara membuat popular post" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCF_JMFIXMqgOm3wqp2ePahVf0wanDm3twxVvRooELC1R5NEm5YccObQ3GfghRHC74azlunpKkFhHyH4rRFiej8uOF6TSEhzfRD3m_Tpnzmj9Ooq5KX1VVa0ZPRiyMas3GKqPLhdeH8-uz/s1600/setting+gadget+popular+post.jpg" title="" /></a></div><div style="text-align: center;"><br /></div></div><div class="MsoListParagraphCxSpMiddle" style="line-height: 150%; margin-bottom: .0001pt; margin-bottom: 0in; margin-left: .25in; margin-right: 0in; margin-top: 0in; mso-add-space: auto; mso-list: l0 level1 lfo1; text-align: justify; text-indent: -.25in;"><span style="mso-bidi-font-family: Calibri; mso-bidi-theme-font: minor-latin;"><span style="mso-list: Ignore;">7.<span style="font: 7.0pt "Times New Roman";">       </span></span></span>Nah kalau semua sudah dilakukan dengan benar, sekarang anda sudah memiliki widget artikel populer atau popular post keren dengan tampilan warna-warni pelangi.</div><div class="MsoListParagraphCxSpLast" style="line-height: 150%; margin-bottom: .0001pt; margin-bottom: 0in; margin-left: .25in; margin-right: 0in; margin-top: 0in; mso-add-space: auto; mso-list: l0 level1 lfo1; text-align: justify; text-indent: -.25in;"><span style="mso-bidi-font-family: Calibri; mso-bidi-theme-font: minor-latin;"><span style="mso-list: Ignore;">8.<span style="font: 7.0pt "Times New Roman";">       </span></span></span>Silahkan mencoba mengutak-ngatik sendiri kode CSS diatas untuk merubah jenis atau ukuran font, warna background dan seterusnya. Namun jangan lupa backup dulu kode templatenya ya !</div><div class="MsoNormal" style="line-height: 150%; margin-bottom: .0001pt; margin-bottom: 0in; text-align: justify;"><br /></div><div class="MsoNormal" style="line-height: 150%; margin-bottom: .0001pt; margin-bottom: 0in; text-align: justify;">Cukup mudah bukan ternyata <a href="http://www.rayhanzhampiet.com/2013/05/Cara-Membuat-Widget-Popular-Post-Warna-Warni-Pelangi.html" target="_blank"><b style="mso-bidi-font-weight: normal;">Cara Membuat Widget Popular Post Warna Pelangi</b></a> di blogspot ini ? Tingggal copas kode css diatas pada template dan sobat sudah bisa langsung melihat hasilnya. Semoga bermanfaat dan happy blogging.</div><div class="MsoNormal" style="line-height: 150%; margin-bottom: .0001pt; margin-bottom: 0in; text-align: justify;"><br /></div>

Cara Membuat Widget Popular Post Warna Pelangi

Cara Membuat Widget Popular Post Warna Pelangi - Widget artikel populer warna-warni dengan style belah ketupat ini ada juga yang menyebut...

Read more »