Memodifikasi Tampilan Label Cloud di Blogspot

Share :

Tweet

Hai sobat... Apa kabar??? Semoga baik-baik saja ya.. Hari ini saya akan share tentang Memodifikasi Tampilan Label Cloud di Blogspot. Hasil modifikasi widget label cloud ini adalah disaat mouse di letakan di salah satu label (mouse over), kotak label akan berputar tidak lebih dari 30 derajat.

Bisa di lihat di atas, gambar di atas adalah contoh penggunaan widget label cloud yang telah di modifikasi. untuk live demonya bisa dilihat di sidebar blog saya. Bagi yang berminat memodifikasi tampilan label cloud sobat silahkan ikuti langkah-langkah di bawah ini.
Sebelumnya setting widget label blog sobat seprti gambar di bawah ini.

Jika sobat telah selesai menyetting widget label blog sobat lakukan langkah langkah di bawah ini.
1. Masuk ke halaman Template.
2. Cari kode ]]></b:skin>
3. Copy paste code di bawah ini tepat di atas kode tersebut.

.label-size{margin:0 2px 6px 0;padding: 3px;text-transform: uppercase;border: solid 1px #4F4F4F;border-radius: 3px;float:left;text-decoration:none;font-size:10px;color:#FF4F4F}
.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;text-shadow:0 0 8px red;color:#A91B33;}

5. Yang terakhir Klik Save Template.

Mungkin itu saja yang dapat As-par Blog share pada hari ini. Semoga postingan yang berjudul Memodifikasi Tampilan Label Cloud di Blogspot bisa bermanfaat bagi sobat blogger semua. Dan jika ada yang mkau ditanyakan silahkan lewat komentar.... :)

Tag : Blogging