Social Media Sharing by ekoxy™

Sabtu, 04 Juni 2016

mengubah tampilan labels widget pada blog

 
3 . pilih Cloud dari display setting .
4 . hapus tanda centang pada 'show number of posts per label'
5 . save
.Tambahkan Style Sheet untuk mengubah tampilan widget label menjadi keren wew
1 . klik Template --> edit HTML ( Buat backup template sebelum editing )
2 . cari kode berikut di HTML anda.

]]></b:skin>
3 . paste kode CSS di bawah ini tepat diatasnya.

.Label a{  border-radius:5px; float:left;padding:5px 8px;margin:3px 3px 0px 0;background: rgb(0,100,180); 
background: -moz-linear-gradient(top,  rgba(0,100,180,1) 0%, rgba(20,60,100,1) 100%); 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,100,180,1)), color-stop(100%,rgba(20,60,100,1))); 
background: -webkit-linear-gradient(top,  rgba(0,100,180,1) 0%,rgba(20,60,100,1) 100%); 
background: -o-linear-gradient(top,  rgba(0,100,180,1) 0%,rgba(20,60,100,1) 100%); 
background: -ms-linear-gradient(top,  rgba(0,100,180,1) 0%,rgba(20,60,100,1) 100%); 
background: linear-gradient(top,  rgba(0,100,180,1) 0%,rgba(20,60,100,1) 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0064b4', endColorstr='#123d60',GradientType=0 ); 
display:inline-block;border: 1px solid #005ca6;padding:0 8px; color:#fff!important; height:28px; line-height:28px; text-transform:capitalize; text-decoration:none;float:left;margin-top:5px; font-size:14px;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;text-shadow: 0 -1px -1px rgba(0, 0, 0, 0.2); 
}
.Label a:hover{color:#0afafa !important; background:#123d60;}

4. klik preview template sebelum  anda menyimpannya.
5. save template jika anda menyukainya.
.Masalah Pengaturan

1. anda dapat mengganti warna background sesuai warna yang anda pilih. cukup replace kode ditandai dengan warna merah dengan kode warna anda sendiri. anda bisa memeriksa warna kode pada template design blogger anda atau menghasilkan kode warna menggunakan adobe photoshop.
2. anda juga dapat mengubah hover background atau warna sorot latar belakang dengan merubah kode yang ditandai warna biru. 
3. anda dapat mengubah kecepatan animasi dengan mengubah durasi (dalam detik ) di CSS .4 s dengan .6 s atau .7 s atau nilai berapapun yang anda suka. Saya harap anda menikmati dengan tampilan baru untuk widget label cloud anda . enjoy :)