Tuesday, September 16, 2014

Membuat Widget Label Blogger lebih menarik

Halo sobat Blogger semua,
pada sehat semua kan :)
mendesain blog memang tidak ada habisnya, kalau sobat pencinta blog pasti ingin blognya tampak keren, enak dilihat, banyak pengunjung apalagi dapat sponsor :)
nah disini saya cuma berbagi ilmu tentang membuat widget label Blog agar kelihatan enak dilihat. Fungsi dari Widget Label adalah untuk menampilkan halaman post dari artikel anda yang dikasih label, sehingga memudahkan para pengunjung untuk menemukan label apa saja yang ada di Blog kita. Yuk langsung aja cara nya sobat Blogger semuanya.

1. Sobat harus Log-in di Blogger.com
2. cari menu Tata Letak / Layout
3. Tambahkan Gadget

4.Klik Label

5.lalu Klik edit dan masuk menu tampilan klik Cloud lalu simpan

6.Selanjutnya Simpan Setelan
7.terus sobat Blogger masuk Ke Template --> edit HTML Copykan Code dibawah ini : diatas </b:skin> untuk memudahkan ctrl+f lalu ketik </b:skin>

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

8.Simpan Template Lalu Lihat Hasilnya, kalau berhasil makan hasilnya akan terlihat seperti gambar paling atas

Indahnya berbagi Ilmu, Indahnya persahabatan,
Semoga Bermanfaat, Terimakasih
Salam,Secuil-Tulisan.Blogspot.com


0 comments:

Post a Comment