widget label style

Widget label style merupakan modifikasi widget label dengan css saja, cara membuat widget label style ini tergolong mudah, sebab hanya memanfaatkan sistem CSS saja yang isematkan pada template blog anda. Widget label style khusus untuk blog dari blogspot. Jadi untuk anda yang suka dengan tapilan blog yang unik dan menarik serta elegan tentunya silahkan simak penjelasan tutorial widget label style dibawah ini, jangan lupa di lihat DEMO tutorial widget label style ini, tapi bila anda melihat tampilan label yang lain silahkan kunjungi link pada referensi artikel dibawah, oke langsung saja menuju TKP dan selamat mencoba.

Demo

Referensi Artikel

• Widget label cloud blue
• Cara membuat widget label drop down
• Widget label hover style animasi

Tutorial

Bagi anda yang belum memasang widget Label atau belum mengetahui cara membuat widget label di blog silahkan simak penjelasan pada halaman ini : Cara memasang label di halaman blog

Bila anda sudah memasang widget label pada halaman blog anda silahkan setting dulu widget label anda menjadi tampilan " DAFTAR " bukan tampilan " CLOUD ". silahklan anda centang Tampilkan Jumlah entri per Label nya. agar tampilannya makin sempurna dan menantang hehehehe.

1. Login to blog
2. Pilih " Template " lalu klik " Edit HTML "
3. Cari kode ]]></b:skin>
4. Setelah dapat copy code dibawah ini lalu pastekan diatas code ]]></b:skin> tadi, atau bila template blog anda memakai </style> silahkan pastekan kode CSSnya tepat diatas </style> template anda.
5. Setelah selesai save template anda, dan lihat hasilnya.

/*****************************************
Name : Widget Label Style
By : Rivai Silaban | Blog Design
Update : Sabtu, 12 Oktober 2013
******************************************/
#Label1 .label-count{
margin-left:10px;
padding:3px 5px;
border:1px solid #ccc;
color:#666666;
background-color: #F8F8F8;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
text-transform: uppercase;
opacity:0.5;
}
#Label1 a{
position:relative;
padding:3px 20px 3px 10px;
margin:1em 0 3em;
border:1px solid #999;
color:#333;
background-color: #F8F8F8;
text-decoration: none;
border-radius:3px;
font-family: Verdana;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
}
#Label1 a:hover{
color:#FFFFFF;
background-color: #DBDBDB;
text-shadow: 1px 1px 2px #000;
}
#Label1 a:hover:after{
top:3px;
right:-10px;
bottom:auto;
left:auto;
border-width:7px 0 7px 10px;
border-style:solid;
border-color:transparent #DBDBDB;
content:"";
display:block;
position:absolute;
opacity:1;
}/* End CSS code */

Kesimpulan

Widget Label Style ini merupakan hasil dari moifikasi CSS saja tanpa mengedit bagian kode html widget label tersebut. Dalam pemasangannya sangat simpel dan praktis, tapi bila anda ingin mengedit CSSnya kembali sesuai selera anda silahkan anda edit untuk mendapatkan tampilan yang menarik dan sesuai dengan thema template anda.

Bila teman teman mengalami kesulitan dalam memasang kode widget ini atau mendapatkan kode yang Error, silahkan hubungi saya atau share bersama saya pada form komentar dibawah. Semoga postingan ini bermanfaat buat teman teman.

Widget Label Style
Sabtu, 12 Oktober 2013
Rivai Silaban | Blog Design

Terimakasih atas kunjungannya,Bila anda suka dengan artikel ini silahkan JOIN TO MEMBER BLOG atau berlangganan geratis Artikel dari blog ini, daftarkan email anda pada form subscribe dibawah halaman . Pergunakan vasilitas diblog ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui kotak komentar yang ada dibawah atau gunakan fasilitas yang ada diblog ini untuk menghubungi saya.

Salam Blogger.... !!! .

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter

Di posting oleh : Unknown Update pada : 7:25 AM