Cara Membuat Widget Label Di Blog Bisa Berputar

Sudah dua kali saya membuat atau mempublikasikan posting tentang label. Kedua posting itu bisa di lihat melalui link yang ada di bawah ini.

1. Cara Membuat Label Untuk Posting Atau Artikel Blog
2. Cara Memperindah Tampilan Widget Label Di Blog Dengan Box Style

Untuk posting yang ketiga ini, saya akan berbagi tips tentang bagaimana cara membuat label dengan tampilan kotak. Apa kelebihan dari widget label ini? Ketika salah satu label tersebut diarahkan cursor, maka label tersebut akan melakukan rotasi sebanyak beberapa derajat sehingga terlihat miring. Widget Label ini jika di pasang di blog, tidak hanya akan mempercantik tampilan blog tapi akan membuat pengunjung merasa kagum dan heran dengan label blog kita. Sehingga tidak menutup kemungkinan, pengunjung akan menjelajahi semua posting yang kita publikasikan berdasarkan label dari posting itu sendiri.

Untuk membuat widget label tampilan kotak dan bisa berputar, sobat blogger hanya perlu menambahkan kode CSS (Cascading Style Sheet) pada template sobat. Jadi... Sobat blogger tidak perlu edit template dan tidak perlu menghabiskan banyak waktu untuk membuat widget label yang indah dan cantik ini.

---

Cara Membuat Widget Label Di Blog Bisa Berputar

---

Langkah Pertama
Pertama, sobat blogger mesti memasang widget label terlebih dahulu. Caranya?

1. Sign In di blogger.com
2. Pada Menu drop down, pilih layout dan klik Add a gadget
3. Tarik Scrolling menu, sampai sobat blogger menemukan widget Labels.

4. Kalau sobat blogger sudah menemukan widget label, langsung saja pasang widget tersebut.
5. Setting Widget Label sobat sehingga tampak seperti gambar di bawah ini!

Langakah Kedua

• Klik Template dan klik tombol costumize untuk mengunjungi laman Blogger Template Designer
• Klik Advanced dan pilih Add CSS

• Copy Paste kode berikut pada kolom yang tersedia

.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; }

• Klik Apply to blog.

Semoga tips tentang cara menghias, mempercantik dan memodifikasi tampilan label blog ini dapat memperindah tampilan blog sobat blogger

Advertisment

** Share nya Jangan Lupa Ya.. Salam,salam **

Judul Artikel: Cara Membuat Widget Label Di Blog Bisa Berputar

Unknown

Saya hanya blogger biasa yang suka kutak-katik blogger, senang belajar dan berbagi pengetahuan dan pengalaman dengan yang lain. Blog ini hasil dari source mas Septi Rosidi, semoga dapat bermanfaat untuk semua. Silahkan masukan email Anda pada kotak di bawah ini untuk mendapatkan update artikel dari semujursite.

• Rss
• Twitter
• FaceBook
• Follow This Blog