Cara Mengubah Tampilan Widget Label Bawaan Blogger

Baca Juga

Cara Mengubah Tampilan Widget Label Bawaan Blogger

TAMPILAN widget bawaan blogger sangat sederhana, namun tetap keren karena memadukan ukuran huruf variatif.

Jika ingin diseragamkan atau lebih menarik, misalnya seperti yang dipasang di template demo NJW ini.

Widhet label merupakan bagian dari navigasi menu dan internal link yang bagus buat SEO Blog. Google menyarankan agar para webmaster memudahkan pengunjung mengeksplorasi konten blog.

Cara Mengubah Tampilan Widget Label Bawaan Blogger

Ini kodenya untuk mengubah tampilan atau mempercantik widget label blogger:

.label-size{margin:4px;padding:5px;text-transform:uppercase;border:solid 1px #C6C6C6;border-radius:3px;float:left;text-decoration:none;font-size:12px;color:#666}.label-size:hover{border:1px solid #6BB5FF;text-decoration:none;-moz-transition:all .5s ease-out;-o-transition:all .5s ease-out;-webkit-transition:all .5s ease-out;-ms-transition:all .5s ease-out;transition:all .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}

Pasang di atas kode ]]></b:skin> atau </style>

Bisa juga dipasang di atas kode </head>, namun kodenya ditambah kode pembuka <style> dan penutup </style> menjadi begini:

<style>
.label-size{margin:4px;padding:5px;text-transform:uppercase;border:solid 1px #C6C6C6;border-radius:3px;float:left;text-decoration:none;font-size:12px;color:#666}.label-size:hover{border:1px solid #6BB5FF;text-decoration:none;-moz-transition:all .5s ease-out;-o-transition:all .5s ease-out;-webkit-transition:all .5s ease-out;-ms-transition:all .5s ease-out;transition:all .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=&#39;auto expand&#39;);zoom:1}.label-size a{text-transform:uppercase;float:left;text-decoration:none}.label-size a:hover{text-decoration:none}</style>

Save template!

Itu dia Cara Mengubah Tampilan Widget Label Bawaan Blogger.*