Modifikasi Tampilan Tag Cloud Pada Blogger

Kita biasanya mengenal tag cloud yang merupakan kumpulan tag atau kategory dari artikel kita dalam bentuk kumpulan awan (bila dipilih) memiliki ukuran besar kecil yang berbeda-beda, namanya saja tag cloud jadi bentuknya memang memiliki desain begitu.

Berikut contoh penampakanya :
Modifikasi Tampilan Tag Cloud Pada Blogger
Tampilan Tag Cloud Normal
Ini bagi saya memang sudah mantab, tapi jika ada sobat yang ingin memodifikasinya dengan bentuk yang lain, kita bisa melakukannya dengan modifikasi CSS pada tutorial berikut :



1. Masuk ke Blogger > Pengaturan > Layout
2. Klik Tambah Gadget dan pilih Label
3. Pilih tampilan could dalam pengaturannya. Atau sobat bisa mengaturnya agar lebih sesuai.

4. Simpan widget Label tersebut dan buka pengaturan Template
5. Backup template Anda jika perlu
6. Klik Edit html > Lanjutkan dan Dan cari code ]]></b:skin>
7. Letakan Code dibawah ini Tepat di atasnya:
/*Custom Labels Cloud widget blogoptimized.blogspot.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;
}
8. Simpan Template dan Selesai. Berikut contoh hasilnya :
Modifikasi Tampilan Tag Cloud Pada Blogger
Hasil edit CSS tampilan Tag Cloud Blogger
Silakan lihat perbedaannya dan tentunya sobat dapat memodifikasinya sesuka hati.

Terima kasih telah membaca artikel Modifikasi Tampilan Tag Cloud Pada Blogger, semoga bermanfaat bagi kita semua.
Jika sobat berminat, silakan sobat Share artikel Modifikasi Tampilan Tag Cloud Pada Blogger ini dan jangan lupa untuk mencantumkan link sumbernya :
Apabila ada pertanyaan dan lain-lain silakan berkomentar atau Contact Saya, dan jangan lupa Follow blog ini.
Blog Optimized | Ben Nafi | Share

Artikel Terkait

1 komentar:

Unknown mengatakan...

makasih gan tipxnya keren.. mampir balikyach sob..