Cara Membuat Label Miring Saat Disentuh Cursor Blog

Cara Membuat Label Miring Saat Disentuh Cursor Blog - Hari ini, hari minggu tentu nya hari bebas. Kalau bebas, saya ada waktu untuk membuat tutorial blogger pemula. Untuk hari ini, saya akan bahas tutorial tentang Cara Membuat Label Cloud Miring Saat Disentuh Cursor Blog. Banyak sekali cara yang dilakukan oleh para blogger untuk memperindah dan mempercantik blog mereka. Salah satu nya dengan tutorial ini.

Jarang sekali memang, saya menemukan blog yang menerapkan tutorial ini. Tapi, saya juga pernah melihat dan berkunjung ke web/blog orang lain yang menggunakan tutorial ini. Label atau kategori akan miring ketika disentuh cursor blog. Untuk demo nya, lihat animasi di bawah ini.

Sobat mungkin tertarik dengan tutorial yang akan saya berikan ini, sobat baca baik-baik. Label atau kategori pasti nya banyak digunakan oleh para blogger, kemungkinan semua blog yang mempunyai banyak postingan atau artikel pasti terdapat label atau kategori nya. Tujuan dari label atau kategori adalah untuk menkategorikan atau menggolongkan beberapa postingan atau artikel sehingga mempermudahkan bagi pengunjung blog untuk membaca informasi didalamnya.

Dan disini, saya akan memberi tutorial yang termasuk efek untuk label atau kategori cloud miring saat disentuh cursor blog. Label yang dipakai harus label cloud. Untuk membuat label cloud bisa ikuti dulu ini, lalu ikuti tutorial cara membuat widget label cloud berputar saat disentuh blog

1. Login Blogger
2. Tata letak/layout
3. Tambahkan gadget/add gadget
4. Pilih Label
5. Centang yang Cloud. Lihat gambar berikut:

6. Simpan
7. Setelah itu pilih menu Template
8. Klik Sesuaikan/customize
9. Pilih advanced
10. Lalu Add CSS
11. Copy kode dibawah ini kemudian paste kan pada kolom Add CSS

.label-size a{text-transform:uppercase;float:left;text-decoration:none} .label-size a:hover{text-decoration:none} .label-size{float:left;font-size:10px;color:#666;text-transform:uppercase;text-decoration:none;border:solid 1px #C6C6C6;border-radius:3px;margin:0 2px 6px 0;padding:3px} .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; }

12. Apply

Jangan lupa, ketika sudah mencoba dan berhasil, beri komentar... Kalau masih gagal, coba lagi. Semoga berhasil... ˆ⌣ˆ

Tutorial Blogger

Judul	Cara Membuat Label Miring Saat Disentuh Cursor Blog
Deskripsi	Cara membuat label cloud miring saat disentuh cursor blog membuat label Anda semakin keren dan berbeda.
Author	Google
Author Rating	92%/ 100% Suara Dari 2845 votes