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, Bagi sobat yang ingin mempercantik Blognya silahkan ikuti panduannya di bawah ini :
1.Login ke Blogger
2.Pilih Rancangan-Edit HTML
3.Centang  (√)  Expand Template Widget.
  Jangan lupa Save dahulu tamplate anda - untuk jaga-jaga.
4.Kalau sudah, Anda cari kode ]]></b:skin> lalu Copast kode dibawah ini sebelum Kode tersebut.

#Label1 ul li a:hover{color:#fff;text-decoration:none}
#Label1 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-top: 10px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}
#Label1 ul li:first-child:after,
#Label1 ul li:first-child + li:after,
#Label1 ul li:first-child + li + li:after,
#Label1 ul li:first-child + li + li + li:after,
#Label1 ul li:first-child + li + li + li + li:after,
#Label1 ul li:first-child + li + li + li + li + li:after,
#Label1 ul li:first-child + li + li + li + li + li + li:after,
#Label1 ul li:first-child + li + li + li + li + li + li + li:after,
#Label1 ul li:first-child + li + li + li + li + li + li + li + li:after,
#Label1 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}
#Label1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}
#Label1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#Label1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%}
#Label1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#Label1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}
#Label1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}
#Label1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}
#Label1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#Label1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%}
#Label1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#Label1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}
#Label1 ul li:first-child + li + li + li + li:after{content:"5"}
#Label1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}
#Label1 ul li:first-child + li + li + li:after{content:"4"}
#Label1 ul li:first-child + li + li{background:#ffde4c;width:90%}
#Label1 ul li:first-child + li + li:after{content:"3"}
#Label1 ul li:first-child + li{background:#ff764c; width:90%}
#Label1 ul li:first-child + li:after{content:"2"}
#Label1 ul li:first-child{background:#ff4c54 ;width:90%}
#Label1 ul li:first-child:after{content:"1"}
#Label1 ul{margin:0;padding:0px 0;list-style-type:none}
#Label1 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}
C O D E
5.Simpan Templete anda 
6. Kemudian Sobat pergi ke Dasbord, Klik Menu Dropdown dan pilih tata letak lalu pilih Label Baru, kemudian pilih label sampai dengan 9. 
Simpan dan lihat hasilnya, Mudah Bukan...

Semoga Bermanfaat.

Related Posts:

  • Membuat Komentar Bergerak tanpa Edit HTML Komentar Bergerak Salam Blogger! Bagi  Sobat yang ingin membuat Komentar Bergerak dan Berputar ikuti langkahnya dibawah ini 1.Klik Tata Letak. 2.Klik Elemen Halaman. 3.Klik Tambah Gadget. 4.Kemudian Pilih HTM… Read More
  • Membuat Menu Mini Vertical tanpa Edit HTML Menu Mini Salam Blogger! Bagi pengunjung setia kali ini saya akan membagikan bagimana Cara Membuat Menu Mini Vertical tapa edit HTML seperti gambar, silahkan ikuti langkahnya di bawah ini : 1.Klik Tata Letak. 2.Klik &nbs… Read More
  • Membuat Gambar Slideshow tanpa Edit HTML Slide Horizontal Salam Blogger! Sambil menunggu hujan berhenti, malam ini saya akan membagikan bagaimana cara Membuat Gambar Slideshow tanpa Edit HTML, Sobat tidak perlu lagi susah -susah edit sana edit sini, anda tingga… Read More
  • Membuat Icon Share Blog Berputar Bottom Share Post Salam Bloger! Bagi sobat yang ingin mempercantik tampilan tombol share pos, silahkan ikuti panduannya dibawah ini  1.Login ke Blogger 2.Pilih Rancangan-Edit HTML 3.Centang  (√)  Expand Temp… Read More
  • Membuat Komentar Bergambar tanpa Edit HTML Komentar Anda Salam Blogger! Bagi Sobat yang ingin membuat Kotak Komentar Bergambar tanpa Edit HTML seperti Blog saya, ikuti panduannya dibawah ini : 1.Klik Tata Letak. 2.Klik Elemen Halaman. 3.Klik Tambah Gadget. 4.Kem… Read More

2 komentar:

  1. keren....mau nanya mas..gimana buat comment herenya unik bgt.....sudi kasi bocoran nya ya

    BalasHapus
  2. Pasti akan saya Share ;)
    Trims sudah Request...

    BalasHapus

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