Modifikasi Tampilan Widget Label Style 5

Alhamdulillah dapat hadir kembali dengan tutorial dan trik blog sederhana cara memodifikasi tampilan widget label blogger menjadi dua kolom dengan style transparent background. Tentunya masih dengan bantuan CSS3.

Ini adalah style ke lima dari modifikasi tampilan cloud widget label blogger, jadi sebelum anda memastikan untuk menggunakan atau memasang widget label ini ke blog anda, mungkin anda bisa mengecek terlebih dahulu modifikasi tampilan lain dari widget label blogger yang sudah saya posting diblog ini.

Nah jika tertarik untuk menambahkan widget label blog ini silahkan ikuti langkah-langkah berikut:

Sebelumnya, pastikan pada blog anda sudah terpasang widget label dengan tampilan cloud. Lanjut…

1. Login ke blog anda

2. Pada dasbor klik Template >> Edit HTML

3. Cari kode ]]></b:skin> dan letakkan kode CSS berikut diatasnya

.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

}

Kode atau tulisan berwarna merah sesuaikan dengan lebar sidebar blog anda

4. Simpan template dan  lihat hasilnya diblog anda.