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 :

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 :

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 :

<a href="https://blogoptimized.blogspot.com/2013/01/modifikasi-tampilan-tag-cloud-pada-blogger.html" target='_blank' title="Blog Optimized | Modifikasi Tampilan Tag Cloud Pada Blogger">Modifikasi Tampilan Tag Cloud Pada Blogger | Blog Optimized</a>

Apabila ada pertanyaan dan lain-lain silakan berkomentar atau Contact Saya, dan jangan lupa Follow blog ini.
Blog Optimized | Ben Nafi | Share