Cara Merubah tampilan Label cloud menjadi menarik

adscblog

Cara merubah tampilan label cloud menjadi Menarik - Selain populer post yang selalu ikut serta dalam mempercantik template sobat blogger,ada lagi yang tit blogger lupakan selain populer post ini yaitu label,label pada bagian widget ini juga bisa anda rubah menjadi tampilan nya keren sehingga akan membuat template pada blog terlihat menarik oleh para pengunjung blog sobat

Keunikan dari label cloud ini yaitu ketika mouse di sentukan terhadap salah satu label maka tulisan tersebut akan miring kekanan maka dengan begitu tampilan label cloud ini semakin keren dan menarik dan tidak kalah menarik dari label cloud yang pernah saya share disini

Baca Juga : Cara membuat label cloud menjadi menarik

Untuk tampilan yang bisa anda lihat untuk untuk contoh nya bisa sobat blogger lihat pada bagian gambar di atas,tampilan label cloud ini tidak jauh seperti ini,dan juga tidak memberatkan terhadap template blog sobat blogger yang berarti tidak mengganggu loading blog

Tutorial membuat Label Cloud menjadi keren dan menarik

Untuk membuat label cloud seperti ini tidak perlu membutuhkan pengetahuan yang lebih cara penerapan nya,sobat blogger hanya perlu menyisipkan kode di bawah ini di bagian css pada template dengan sekali klik saja sudah terpasang label cloud seperti itu

Dan kode nya juga tidak terlalu banyak sehingga tidak akan mempengaruhi terhadap loading blog dengan begitu label cloud ini bisa anda gunakan di template sobat,dan di bawah ini css yang dapat sobat blogger terapkan di bagian template nya

Dan tampilan label cloud ini lebih keren ketimbang label cloud sebelum nya yang sudah saya share di blog ini dan sobat blogger juga bisa menerapkan label cloud ini dengan mudah tanpa membutuhkan pengetahuan yang lebih 

/*-----Custom Labels Cloud widget by infotrens.com----*/
.label-size{
margin:0 2px 6px 0;
padding: 3px;
text-transform: uppercase;
border: solid 1px #C6C6C6;
border-radius: 3px;
float:left;
text-decoration:none;
font-size:10px;
color:#666;
}

.label-size:hover {
border:1px solid #6BB5FF;
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;
}

Save template dan lihat hasil nya,dan untuk tampilan nya bisa anda lihat langsung di label template milik sobat,jika sobat blogger ingin merubah warna atu tampilan nya yang lain bisa sobat otak atik css di atas,selamat mencoba dan salam blogger

adscblog

Recommendation Apps

ads1

Previous

Posting Lebih Baru

Next

Posting Lama

Posted by Dede Ubed, Published at 16 Oktober and have 0 komentar