Modifikasi Widget Label Blogger

Modifikasi Widget Label Blogger

Yang akan saya share mungkin belum terpasang pada blog ini, namun pada blog saya yang lainya trik ini sudah saya terapkan. Walaupun nantinya alhasil tidak seberapa bagus dan elegance nya namun besar harapan saya. Semoga dengan tutorial ini bisa menambah style atau desain widget label blogger anda tidak tampil hanya itu-itu saja. Sedikit dengan sentuhan kode CSS maka widget label anda akan sedikit di pulas menjadi sesuatu yang indah dah bisa membuat tatanan halaman post anda akan lebih dengan desain yang baru di awal maret 2015 ini. Yang hendak mencoba silahkan simak selengkapnya di bawah ini.

Baca juga post lainya :  Semua Label Widget

Style Label Blog :

Pada pertemuan sebelumnya saya sudah berbagi tentang Modifikasi Widget Archive Blogger. nah untuk menambah desain blog anda terutama pada bagian widget label blog yang anda kelola tidak ada salahnya jika mencoba trik ini. Barangkali dengan sentuhan dan perpaduan kode yang saya bagikan ini bisa berkenan untuk menghias widget label anda lebih berwarna. Langsung saja pada cara penerapan dan pemasanganya.

Cara memasang widget Labels :

Sebelum anda memodifikasi widget label blog anda seperti biasa. Anda harus memsang widget label standar bawaan blogger terlebih dahulu dengan cara add widget baru. selengkapnya caranya sama pesrsis seperti cara menambahkan widget archive yang kemarin saya publikasikan. Atau lebih lengkapnya buka post cara memodifikasi widget archive :  DISINI

Memodifikasi Widget Labels :

Setelah anda menambahkan widget label standar blogger. untuk menghias widget tersebut silahkan anda tambahkan kode di bawah ini, pada area edite HTML template anda dengan cara sebagai berikut.

1. Masuk Dashboard jangan lupa sign in pada blog anda
2. Pilih template lalu pilih edite template
3. Tekan CTRL + F Untukmemudahkan pencarian
4. Cari kode :  ]]></b:skin>  atau kode :  </style>
5. Setelah ketemu copy kode dibawah ini dan paste tepat di atas
6. Pada kode :  ]]></b:skin>  atau kode :  </style>

/* LabelS */
#Label1 {background: transparent;
color: #000024;
font: bold 14px Rockwell;
}
#Label1 .widget-content ul li span{
padding: 1px 3px;
min-width: 20px;
font-size: 9px;
text-align: center;
background-color: #61FF88;
color: #ff6600;
border-radius: 2px 2px 2px 2px;
}
#Label1 .widget-content ul li {
list-style:none;
width:48%;
display:inline-block;
float:left;
line-height:10px;
}
#Label1 .widget-content ul li a{
color: #000A9A;
font: bold 13px Rockwell;
margin-left:0px;
padding-left:20px;
background:url(https://sites.google.com/site/archivesiugi/home/2012/RedArrow.png) left no-repeat;
background-position:0 3px;
text-decoration:none;
}
#Label1 .widget-content ul li a:hover{
-o-transform: scale(1.1);
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
margin-left: 10px;
color:#4A37AB;
background:url(https://sites.google.com/site/archivesiugi/home/2012/BlueArrow.png) left no-repeat;
background-position:0 3px;
}
#Label1 .widget-content ul li a:visited{
color:#000024
}

DEMO

Setelah semuanya terpasang sesuai yang saya tuliskan diatas. Selanjutnya silahkan klik save/simpan template anda. Dan coba buka blog anda, jika sudah benar maka widget blog anda akan tampil dengan icon yang memberi effects hover dengan tampilan icon gambar slide show jika di sentuh crusor. Selamat mencoba semoga berhasil. Hanya itu yang bisa saya share pada kesempatan ini, semoga bermanfaat salam blogging.