Membuat Label Blog Bergerak

Beberapa blogger biasanya menampilkan widget label pada blog mereka karena fungsi label memang diperlukan di dalam blog untuk mempermudah pengunjung mencari artikel yang ada di dalam blog tersebut berdasarkan label.

Namun biasanya label yang tersedia di dalam blogger merupakan label standar yang sederhana dan terlihat biasa-biasa saja. Karena itulah beberapa blogger berupaya mengubah tampilan label tersebut agar terlihat lebih menarik.

Pada artikel kali ini, kita akan membahas tentang bagaimana cara membuat label blog bergerak ketika dilewati oleh mouse yang tentu saja hal ini akan kelihatan lebih menarik.

• Login ke blogger
• Pada bagian Dashboard pilih Template » Edit HTML
• Cari kode ]]></b:skin> atau </style> pada template tersebut. Untuk lebih mudahnya tekan Ctrl + F pada keyboard
• Masukkan kode berikut ini di atas kode ]]></b:skin> atau </style>

.label-size{ margin:0 2px 6px 0; padding: 3px; text-transform: uppercase; border: solid 1px #C0C0C0; border-radius: 3px; float:left; text-decoration:none; font-size:9px; color:#666; } .label-size:hover { border:1px solid #B20000; 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
• Kemudian pilih Tata Letak dan tambahkan widget label pada sidebar blog
• Pilih Cloud pada bagian Tampilkan di Konfigurasi Tabel
• Klik simpan dan lihat hasilnya di blog anda