Cara Mengubah Tampilan Widget Label Bawaan Blogger

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:

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!

Tweet