Kamis, 28 November 2013
Memasang Dan Kostumisasi Label Tag Cloud Pada Blogger
![labels cloud customization labels cloud customization](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggOvC9iQ9lxNEaLTgl_zJ7DK2jD6cSR8vbZ-ZIbfpw-h-Q23gCav952WYAQMFPnd2Jc0lTljFG41iPFeDtHy0YMe7bcHM9VE_8xfI25qbVs4aiHOhK2tYgnqqgTVxbm1ZCk757d7SnApYl/s1600/labels+cloud.png)
Ini adalah widget label dalam tampilan cloud:
![labels cloud widget labels cloud widget](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV6Xwfz_9Mkv_mZYNiiCgZxDRKbQMWFuSDdPAfZAuTsRgxts79d6Sz4wM8O1-h2OixDrgII5-p21VU2RgG6Ok4Lu1SqJ6mbgCXt8i9V8qf2DM8sH_it4wx21BAFrhq5DNCnfIebVcRFil9/s1600/labels+cloud+widget.png)
Ini tampilan setelah dilakukan kostumisasi:
![labels cloud customization labels cloud customization](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggOvC9iQ9lxNEaLTgl_zJ7DK2jD6cSR8vbZ-ZIbfpw-h-Q23gCav952WYAQMFPnd2Jc0lTljFG41iPFeDtHy0YMe7bcHM9VE_8xfI25qbVs4aiHOhK2tYgnqqgTVxbm1ZCk757d7SnApYl/s1600/labels+cloud.png)
Cara Kostumisasi Tampilan Label Cloud Di Blogger
Kode di bawah ini dapat disesuaikan dalam beberapa cara untuk membuat desain label lebih menarik. Anda juga dapat menambahkan gambar latar belakang mereka.
Ikuti langkah mudah berikut ini:
- Login ke akun Blogger Anda kemudian masuk ke Layout
![layout blogger layout blogger](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiONJZUgMjZ5dMBSuxg7PN9WueRCS9ZaaAFC_WrAiUHwgZt9HJC0z8e8bjTDnAqlAlCPCWuG8i8gUIy3t-JCfKTQLhizuv2QOJcroGxtmXIx8iYKgzUpQjtx4EgFuELz3ZJP3AAzY4Kn5At/s200/layout+blogger.png)
- Klik Add a Gadget
![add a gadget add a gadget](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRyVyjA8ImVdzdr_Br0VEy_PNdX3jCEixFRPoQxRUpCcsyTz6mYnMfG37JEwSi7CvdSmF3HPbraf5MQTg_TQaAsedaXVCC5v32TtwersfGFCRE3RvvfWVksre9dhQmvadUApkonulwgUHx/s200/add+a+gadget+bloger.png)
- Kemudian pilih Widget Label
![labels widget labels widget](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh18NLY5APtH81xslqkXFLt5kFAbXwUgVw8gjhY6R_gNdCqqQ_M9ezACLEHPWVnlK4fggdSE1IFn5EEblo6Uqqr8Pf_WD2mej3lQ0H0fjZ3LMg6W_887LtemifZCpkRmoSNblHNFo2NVHiV/s320/widget+labels.png)
- Di dalam pengaturan pastikan Anda memilih tampilan Cloud. Anda dapat mengatur opsi lain sesuai kebutuhan Anda. Lihat gambar di bawah sebagai contoh, Anda juga bisa mengaturnya seperti gambar ini.
![customize labels cloud customize labels cloud](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4fPoqf4mnF-aVp-82Z4oYPFs9G-s6d7xvzRBqdZ_AebW0dVqVkEwFKJMbMEDvf-rP_l4-42MTXnAeXeTBZ5b0GSOMOqkv4XaRMlvpw-mjqgxu5A6o0MZb-JVdHyFZA4Mhpe8n6gddwdf7/s320/customize+labels+cloud.png)
Tampilkan paling banyak 25 label, karena jika terlalu banyak akan terlihat buruk.
- Sekarang simpan widget Anda dan selanjutnya masuk ke Template
![template blogger template blogger](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiulQ1b0VECv1AiX0XT4ddGB9aKb_b4jh3n2h4bK9tJlF-V15w6K7dBYLFj4c2-n9WqLbutLlLzEGl2utno6TTvGT5Y9WxnGrC_2xgshA6rKzG7MoMiVtNVhOebIFpkd-O-91kHX_YQHPL-/s320/template+blogger.png)
- Backup dulu template Anda jika diperlukan
- Klik Edit HTML dan carilah kode ini (Gunakan fitur search CTRL + F untuk memudahkan pencarian)
]]></b:skin>
- Setelah ketemu, letakkan kode CSS ini di atas kode ]]></b:skin> tadi
/*-----Labels Cloud widget http://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;
}
- Simpan Template Anda
- Selesai!
Lihat blog Anda untuk memastikan sudah ada perubahan dan script tadi dapat bekerja dengan baik serta label berubah menjadi kotak persegi kecil yang rapi. Jika Anda ingin merubah tampilan label dengan ukuran yang acak, Anda hanya perlu menghapus font-size:10px; dari kode di atas.
Jika Anda menemui kesulitan dan membutuhkan bantuan, segera hubungi kami dari kotak komentar yang sudah disediakan. Selamat mencoba kawan.. ^^
Langganan:
Posting Komentar (Atom)
Tidak ada komentar:
Posting Komentar