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 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
  • Memasukan Status Twitter Tanpa Edit HTML Ngetwitt di Blog Salam Blogger! Apa kabar semunya semoga ditahun ini kita bisa lebih sukses lagi, Malam ini saya akan meberikan panduan bagaimana Cara Memasang Status Twett kita ke dalam Blog, seperti biasa yang simpel-s… Read More
  • Membuat Tombol Share Telor Ayam Share Telor Ayam Salam Blogger! Bagi sahabat pembaca paling setia Blog ini yang ingin mempercantik tombol share, saya akan membagikan model terbaru yaitu Membuat Tombol Share Post Telor Ayam, bagi yang ingin mencoba sila… Read More
  • Membuat Label atau Kategori Pelangi pada Blog Multi Colors Labels Salam Blogger! Apa kabar pembaca setia Blog ini?  semoga sehat selalu ya, pada hari ini saya akan membagikan Bagaimana Cara Membuat Label atau Kategori Warna Warni seperti Pelangi pada Blogspot, Ba… Read More
  • Cara Membuat Favicon Blog Sendiri Favicon Generator Salam Blogger! Favicon adalah ikon utama yang muncul pada addres bar pada Blog ataupun website, Ikon ini adalah sebagai Logo brand suatu Web, bagi anda yang ingin membuatnya sendiri silahkan ikuti langk… 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.