17 Oktober, 2015

Cara Menukar Style Widget Label, Tag Untuk Blogger


Cara menukar widget kategori dalam Blogger.
Paparan widget label/tag/kategori untuk Blogger
Mahu menukar gaya widget label, kategori atau tag blog anda yang biasanya diletakkan dibahagian sisi? Seperti yang anda boleh lihat sendiri, pada sebelah sisi blog saya ini, widget Label nya berlainan sedikit dengan widget yang tersedia ada didalam template Blogger.

Label boleh dipaparkan sebanyak 2 jenis iaitu dalam bentuk senarai atau 'cloud'. Biasanya kalau dalam bentuk senarai, akan panjang menjelaaa la bila ada beratus ada beribu post dalam blog. Cloud pula nampak lebih kemas, cuma bila menggunakan jenis cloud dalam template asal Blogger, ianya nampak agak suram dan kurang menarik.

Disini saya ingin kongsikan cara untuk merubah gaya anda memaparkan widget label didalam blog dengan hanya meletakkan kod yang saya sediakan.

Langkah-Langkah Mengubah Widget Label/Kategori/Tag


>> Klik 'settings'
>> Pilih 'Layout'
>> Klik 'edit' pada widget label/tag/kategori anda
>> Di bahagian 'display', pilih 'Cloud' kemudian tekan 'Save'

Seterusnya:

>> Klik 'Template'
>> Pilih 'Edit HTML'
>> Dalam bahagian kod taip 'Control+F' untuk mendapatkan kotak 'search'
>> Taip </b:skin kedalam kotak 'search' tadi
>> Copy kod yang ada dibawah dan paste betul-betul di atas kod </b:skin

.label-size{ 
margin:0 2px 6px 0; 
padding: 3px; 
text-transform: uppercase; 
border: solid 1px #000000; 
border-radius: 3px; 
float:left; 
text-decoration:none; 
font-size:10px; 
font-color:#666; 
background-color:#A9F5BC;
}

.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; 
}

>> Klik 'Save template' bila sudah paste kod di atas dan anda sudahpun berjaya menukar gaya paparan widget label di blog anda.

Jika anda kesulitan, sila tekan loceng yang ada didalam ruangan komen dibawah dan saya akan cuba sedaya upaya untuk membantu.

Selamat berblogging!


Atas Talian tidak bertanggungjawab keatas komen-komen yang berbaur perkauman, buli atau apa saja yang boleh menyinggung perasaan individu lain. Komenlah dengan hati dan minda yang terbuka tanpa perlu membuat provokasi. Terima kasih diatas lawatan anda, semoga penulisan bermanfaat.