Membuat Popular Post seperti Pelangi

Popular Post Rainbow
Salam Blogger!
Walaupun badan kurang sehat, karena ada yang merequest saya akan membagikan bagaimana cara membuat Popular Post berwarna warni seperti yang tampat di Blog Riefsaz ini, selain memperganteng blog juga dapat menjadi daya tarik pembaca untuk membaca artikel yang lainnya dan yang terpenting tidak memberatkan blog. langsung saja ikuti panduannya 

1. Pergi ke Blogger Dashboard
2. Klik Menu dropdown dan pilih Template
3. Backup Template Anda sebelum membuat perubahan ke blog Anda
4. Klik Edit HTML -> Lanjutkan -> Expand Template Widget
Tekan Ctrl + F dan cari kode ]]></b:skin>   
lalu copast kode dibawah ini dan letakan sebelum kode tersebut :


/*CSS3 Bricks Style Labels By http://www.yourpcgenie.net/ */ #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:-10px;border-radius:50%; solid #ccc;background:#353535;-width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff;;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 0px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;} #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;25px 0px;;padding:10px;} /*CSS3 Bricks Style Labels By http://www.yourpcgenie.net/ */ - See more at: http://www.yourpcgenie.net/2012/11/style-your-popular-posts-with-css.html#sthash.CEfYFFiG.dpuf
C O D E

Related Posts:

  • Membuat Catatan Slide Pada Blog Slide Notes Salam Blogger! Bagi Pembaca Setia blog RIEFSAZ yang ingin membuat Catatan Slide pada blognya Bang Kamplenk akan mengshare artikel tersebut, bagi sahabat yang ingin mempercantik blognya silahkan ikuti tutorial… Read More
  • Membuat Tombol 8 Warna Berisi Link Pilihan Button Collors Salam Blogger! Sambil menunggu hujan berhenti Bang Kamplenk akan mengshare bagaimana cara Membuat Tombol Persegi Berisi Link berwarna warni seperti Pelangi, Bila Sobat ingin mencobanya silahkan ikuti pandu… Read More
  • Cara Membuat Menu Drop Down Drop Down Menu Salam Blogger! Pada hari Riefsaz Blog akan memberitahu bagaimana cara membuat widget Menu Drop Down seperti gambar yang anda lihat, Widget ini hanya satu baru tetapi ketika kita mengkliknya maka kan tampak… Read More
  • Membuat Formulir Belangganan Terbaru tanpa Edit HTML Feedburner  Salam Blogger! Bagi Sahabat yang bosan dengan tampilan Formulir Belangganan standar bawaan dari Blogspot anda bisa merubahnya dengan tampilan yang menarik dan unik. cara membuatnya sangatlah mudah karena t… Read More
  • Membuat Gambar Popular Post Berputar Populer Pos Terbaru Salam Blogger! Bang Kamplenk pada kesempatan kali ini akan memberikan trik bagaimana Cara Membuat Gambar Popular Post Berputar seperti kincir angin ketika tersentuh kursor, bagi yang ingin mempergante… Read More

3 komentar:

  1. Manteep ..

    mau dicoba ah di http://dandylaksana.blogspot.com

    BalasHapus
    Balasan
    1. Silahkan di sruput gan....moga puas ;)

      Hapus
  2. saya udah ngikuti blog ini...ikuti balik ya komodopucat.blogspot.com

    BalasHapus

Silahkan sobat tinggalkan jejak di bawah ini...NO.SPAM
Dengan Memberikan Komentar Secara Otomatis akan Mendapatkan Pagerank, Traffic dan Backlink.