BLOGGINGPASURUAN
akan membagi tutorial Cara Modifikasi Tampilan Widget Label Cloud di Blog. Bagaimana
cara memodifikasi tampilan label cloud blogger seperti diblog ini yang
menggunakan efek hover animasi bergerak. Yang menjadi magic modifikasi dari
tampilan widget default label cloud blogger ini adalah bagaimana kita bermain
CSS. Jadi untuk styles widget label cloud tidak akan terbatas jumlahnya sampai
pada style ke 6 postingan ini misalnya. Banyaknya style yang bisa kita hasilkan
tergantung seberapa besar kreatifitas kita.
Tertarik untuk memodifikasinya..? Berikut caranya :
Sebelumnya
pastikan pada Blog anda terdapat widget label dengan tampilan cloud .
1.
Sign ini ke akun Blogger anda,
2.
Pada Dasbor,
masuk menu Template
>> Edit
HTML >> Proceed
3.
Tambahkan kode CSS berikut sebelum kode ]]></b:skin>
.label-size{
margin:0 2px 6px 0; padding: 3px; text-transform: uppercase; border: solid
1px #6BB5FF; background:transparent; border-radius: 3px; float:left;
text-decoration:none; font-size:10px; color:#666;}
.label-size:hover
{ border:1px
solid #6BB5FF; background:transparent; 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; }
CATATAN: Pada tulisan yang berwarna biru
adalah kode dimana anda bisa mengganti warna border (garis yang mengelilingi
label) dan background (latar warna label) agar sesuai dengan tema atau desain
blog anda.
Hasil
dari tutorial diatas tampilan label cloud dengan border biru dan background
transparent. Misalnya anda ganti kode label diatas dengan: border: solid 1px #CCC;
background:#888888; dan hover (bidang saat tersentuh mouse pointer)
dengan border:1px
solid #CCC; background#d4d4d4; Maka hasil widget label clound anda
akan seperti screen shoot berikut:
Untuk
tool kode warna anda bisa lihat disini, setiap anda mengganti kode warna anda
bisa klik preview atau pratinjau untuk melihat hasil editan sementara sebelum
kemudian anda menyimpannya.
4. Kalau
menurut anda tampilan widget label cloud diblog anda sudah pas dengan desain
blog anda, Jangan lupa simpan template dan lihat hasilnya diblog anda.
Semoga
bermanfaat dan terimakasih atas apresiasi anda.
Jajale sek bos
ReplyDeleteMantap gan tutornya, tapi klo yang seperti agan punya di footer agan bagaimana gan tlng tutornya makasih kunbal balik gan.
ReplyDeleteOk..untuk seperti yang punya saya di footer, ntar ta bikin'in segera tutorialnya....
ReplyDeletethanks kunjungannya
nyoba..
ReplyDelete