Info Cara Mengubah Tampilan Widget Label Bawaan Blogger

Cara Mengubah Tampilan Widget Label Bawaan Blogger

TAMPILAN widget bawaan blogger sangat sederhana, namun tetap keren alasannya ialah memadukan ukuran aksara variatif.

Jika ingin diseragamkan atau lebih menarik, contohnya menyerupai yang dipasang di template demo NJW ini.

Widhet label merupakan bab dari navigasi hidangan dan internal link yang bagus buat SEO Blog. Google menyarankan semoga 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 instruksi ]]></b:skin> atau </style>

Bisa juga dipasang di atas instruksi </head>, namun kodenya ditambah instruksi pembuka <style> dan epilog </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.*