CSS stylish label widget Hi...kepada pemilik blog blogspot diluar sana, hari ni ada tutorial saya nak kongsi macam mana atau bagaimana nak buat atau ubah custom labels kepada stylish CSS custom labels widget versi cloud yang lebih cantik dan menarik dalam blogger.
Tips ini boleh digunakan dalam label blog widget dengan hanya menambah beberapa kod CSS mudah ke dalam blog. Labels Cloud digunakan untuk menunjukkan semua kategori label. Direka untuk label widget seperti butang CSS yang lebih menarik untuk blogger.
Macam mana nak mengubahnya hanya Ikuti langkah-langkah mudah dibawah:
masuk akaun blogger > Dashboard > Blogger Template > Edit HTML
kemudian cari tag dibawah dalam template blogger anda,
]]> </ b: skin>
Kemudian copy dan paste kod CSS di atas sebelum tag ini ]]> </ b: skin>,
/*----- Custom Labels Cloud Belajar Blogging.com-----*/
.label-size
{
position:relative;
margin:0;
padding:0;
}
.label-size a
{
float:left;
height:24px;
line-height:24px;
position:relative;
font-size:12px;
margin-bottom:9px;
margin-left:20px;
background:#2aa4cf;
color:#fff;
text-decoration:none;
-moz-border-radius-bottomright:4px;
-webkit-border-bottom-right-radius:4px;
border-bottom-right-radius:4px;
-moz-border-radius-topright:4px;
-webkit-border-top-right-radius:4px;
border-top-right-radius:4px;
padding:0 10px 0 12px;
}
.label-size a:before
{
content:"";
float:left;
position:absolute;
top:0;
left:-12px;
width:0;
height:0;
border-color:transparent #0089e0 transparent transparent;
border-style:solid;
border-width:12px 12px 12px 0;
}
.label-size a:after
{
content:"";
position:absolute;
top:10px;
left:0;
float:left;
width:4px;
height:4px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
background:#fff;
-moz-box-shadow:-1px -1px 2px #004977;
-webkit-box-shadow:-1px -1px 2px #004977;
box-shadow:-1px -1px 2px #004977;
}
.label-size a:hover
{
background:#555;
}
.label-size a:hover:before
{
border-color:transparent #555 transparent transparent;
}
Klik save template.
Itu saja....mudah je kan!....selamat mencuba.
Saya berharap ia berfungsi untuk blog korang - Jika korang menghadapi sebarang masalah, maka sila komen dan jika korang mendapat post entri ini membantu maka sila berkongsi post ini dengan rakan-rakan di laman Sosial. Terima kasih kerana membaca.
Comments
Post a Comment
Jika anda suka artikel ini atau ingin menghubungi saya sila isi Contact Form di bawah...👇👇👇 !!!!
Maklumat yang terkandung dalam laman Blog ini hanya untuk tujuan maklumat umum sahaja.
Kami tidak akan bertanggungjawab ke atas apa-apa kehilangan atau kerosakan termasuk tanpa had, kehilangan atau kerosakan secara langsung atau tidak langsung atau apa-apa kerugian atau kerosakan yang timbul atau sesuatu yang berkaitan dengan penggunaan laman web ini. Dilarang meniru, copy & paste kandungan dalam laman blog ini.
Komen akan ditapis untuk kesejahteraan bersama, spammer tidak dialu-alukan (spammers are not allowed).
Terima Kasih.
The Blogler (Aku Pakar Blogger).