Cara Membuat Widget Label Dua Kolom

Sudah lama nampaknya saya tidak update Blogcunayz, Nah pada kesempatan ini saya akan membagi sedikit trik yang saya dapat dari blog teman saya "UT2A-WEB.INFO™" triknya yaitu Cara Membuat Widget Label Dua Kolom. Mungkin bagi para Blogger yang sudah tingkat dewa trik ini biasa,tapi bagi saya yang masih awam trik ini sangat bagus. Selain unik trik ini juga bisa memperpendek widget Label yang bisasanya memanjang kebawah dengan trik ini widget label menjadi setengah dari panjang awalnya "karena di bagi dua" ok langsung saja ke triknya cekeprot...

Eits ada yang lupa rupanya saya belum kasih SSnya, ok nih saya kasih SSnya :

Widget Label Dua Kolom

Bagaimana keren gak tuh? Jika sobat ingin menerapkannya di blog sobat silahkan ikuti langkah-langkah berikut :

1. Pertama tentunya Login dulu ke akun Blogger
2. Masuk menu Template
3. Klik Edit HTML
4. Lalu pilih Lanjutkan
5. Kemudian letakan kode CSS berikut diatas kode ]]></b:skin> atau kode </style>

.label-size {
position: relative;
float:left
}
.label-size::before {
content: ' ';width: 0;
height: 0;top: 2px;
position: absolute;
right: -4px;
border: 14px solid transparent;
border-left-color: #DDD
}
.label-size a{
float: left;
font-size: 14px;
padding: 5px 10px;
background: white;
margin: 3px 24px 15px 1px;
position: relative;
width:108px;
outline: 1px solid #DDD;
color: #222
}
.label-size a::before {
content: ' ';
width: 0;
height: 0;
top: 0;
position: absolute;
right: -26px;
border: 13px solid transparent;
border-left-color: white
}
.label-size a::after {
content: ' ';
position: absolute;
background: #F6F6F6;
border-radius: 10px;
height: 10px;
right: -1px;top: 7px;
width: 10px;
border: 1px solid #DDD
}
.label-size a:hover {
color:#5D73B5; !important
}

Catatan : Silahkan sesuaikan kode yang berwarna Biru  dengan lebar sidebar sobat.

6. Selanjutnya Klik Edit Tata Letak >> Klik Tambah Gadget >> Pilih Label >> lalu setting seperti gambar di bawah ini :

 7. Terakhir klik simpan dan lihat hasilnya

Original Posted by : akaUTta...

Share this history on :

Tweet

Title : Cara Membuat Widget Label Dua Kolom
URL : http://blogcunayz.blogspot.com/2012/10/cara-membuat-widget-label-dua-kolom.html
Anda boleh menyebar Luaskan atau Meng Copy-Paste Artikel ini bila dapat bermanfaat bagi teman-teman anda, Namun jangan lupa untuk meletakkan Link Cara Membuat Widget Label Dua Kolom sebagai Sumbernya.