Cara Mengubah Tampilan Widget Label Bawaan Blogger

Posted by New Johny Wuss

Cara Mengubah Tampilan Widget Label Bawaan BloggerCara 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.*

» Thanks for reading: Cara Mengubah Tampilan Widget Label Bawaan Blogger
Previous
« Prev Post
CB Blogger
New Johny WussUpdated: June 20, 2017

0 comments:

Post a Comment

Follow & Get Update by Email

CB