Advertising

Membuat Widget Label Blogger Lebih Keren



Siomponk.Com - Label pada Blogger bisa dibilang category pada WordPress. Pihak Blogger sendiri telah menyediakan 3 jenis model yang bisa dipasang pada blog anda.

1. MODEL LINK LIST

Model ini berupa link list menurun yang penulisanya mirip sebuah daftar.

2. MODEL CLOUD

Model ini merupakan model lajur mendatar dengan format small. medium, dan large untuk font nya. Jumlah postingan akan mempengaruhi besar kecilnya font atau huruf pada suatu label tersebut.

3. MODEL DROPDOWN

Model ini akan menunjukkan seluruh dari label jika anda meng-klik anak panah menurun pada menunya. Model ini biasa digunakan pada blog yang mementingkan keringkasan tampilan.

Nah, pada postingan saya kali ini saya akan membahas Membuat Widget Label Blogger Lebih Keren dengan menggunakan Label Model Cloud dengan menambahkan code CSS pada template anda sehingga akan membentuk seperti pada gambar dibawah ini:


Adapun cara membuatnya adalah anda sebagai berikut:
- Setting terlebih dahulu Label pada blog anda menjadi Model Cloud


- Masukkan code berikut ini di template blog anda di DIATAS kode ]]></b:skin>
/*-----Labels Cloud widget Siomponk.Com/----*/
.label-size{
margin:0 2px 6px 0;
padding: 3px;
text-transform: uppercase;
border: solid 1px #C6C6C6;
border-radius: 3px;
float:left;
text-decoration:none;
font-size:10px;
color:#666;
}
.label-size:hover {
border:1px solid #6BB5FF;
text-decoration: none;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
-ms-transform: rotate(7deg);
transform: rotate(7deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
zoom: 1;
}
.label-size a {
text-transform: uppercase;
float:left;
text-decoration: none;
}
.label-size a:hover {
text-decoration: none;
}
KETERANGAN:
- font-size:10px; = untuk mengatur besar - kecilnya font

Nah, demikianlah postingan saya kali ini tentang Membuat Widget Label Blogger Lebih Keren, dan semoga postingan saya ini dapat bermanfaat untuk anda.
Salam...


▶ INFO ARTIKEL :
OLEH:
LABEL: Tips Blog,
JUDUL: Membuat Widget Label Blogger Lebih Keren
URL: http://www.siomponk.com/2015/04/membuat-widget-label-blogger-lebih-keren.html
Loading...

Written by : - Part Time Blogger

author-photo Hal terpenting dalam pacaran adalah bukan dari Perbedaan Umur...
Tapi yang terpenting adalah Perbedaan Kelamin...

Follow On : Facebook | | Blogger

0 Response to "Membuat Widget Label Blogger Lebih Keren"

Poskan Komentar

PERATURAN BERKOMENTAR:

- Gunakan BAHASA yang baik dalam berkomentar
- Dilarang SPAM dalam berkomentar
- Dilarang SARA dan SARU dalam berkomentar
- Dilarang OOT dalam berkomentar

Jika terdapat hal demikian pada komentar anda, kami akan menghapus komentar anda tersebut.