Widget Label posting blog sendiri berguna sebagai navigasi menu sekaligus internal link untuk meningkatkan pageviews dan index database konten blog di mesin pencari Google.
Lihat DEMO
Berikut ini kode-kode untuk mempercantik tapilan Cloud Label untuk Blogger.
LANGKAH 1: Pasang Widget Label
1. Layout > Add a Gadget > Label
2. Pilih "Cloud" dan pilih label yang akan ditampilkan (jika tidak semua ditampilkan)
3. Save!
LANGKAH 2: Masukkan Kode
1. Template > Edit HTML
2. Pilih dan Masukkan (Copy & Paste) salah satu kode berikut ini di atas kode ]]</b:skin> atau di jajaran kode CSS lainnya.
KODE WARNA-WARNI
.sidebar .label-size { position:relative; text-transform: uppercase; text-decoration:none; font-size:13px; font-family:Open Sans; color:#fff!important; } .sidebar .label-size a { color:#fff!important; font-weight:bold; padding:8px 10px; margin:0 6px 6px 0; float:left; display:block; -moz-transition: all 0.4s ; -o-transition: all 0.4s; -webkit-transition: all 0.4s ; -ms-transition: all 0.4s ; transition: all 0.4s ; } .sidebar .label-size-1 a {background:#BC951A;border-bottom:3px solid #BC761A;} .sidebar .label-size-1 a:hover {background:#BC761A;} .sidebar .label-size-2 a {background:#E73C69;border-bottom:3px solid #226693;} .sidebar .label-size-2 a:hover {background:#2980b9;} .sidebar .label-size-3 a {background:#2ecc71;border-bottom:3px solid #1F8C4C;} .sidebar .label-size-3 a:hover {background:#27ae60} .sidebar .label-size-4 a {background:#9b59b6;border-bottom:3px solid #74398E;} .sidebar .label-size-4 a:hover {background:#8e44ad} .sidebar .label-size-5 a {background:#E73C69;border-bottom:3px solid #922C20;} .sidebar .label-size-5 a:hover {background:#c0392b}
KODE HITAM/PUTIH
(Tampilan Seperti di Demo atau Gambar Ilustrasi di Atas)
.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; }
Kode Mempercantik Tampilan Cloud Label untuk Blogger ini diambil dari The Blogger Guide. (http://www.komunikasipraktis.com/).*
Terima kasih saya sudah berhasil menerapkan cara mempercantik tampilan cloud label pada blogger.
ReplyDeleteSama-sama, semoga konten dan jumlah pengunjungnya juga jadi cantik ya :)
Deletekeren
ReplyDelete