Cara Membuat Dropdown Menu Label

Tips Blog kali ini adalah Cara Membuat Dropdown Menu Label. Ini adalah salah satu tips yang bisa sobat gunakan untuk memodifikasi label blog sobat, di postingan saya sebelumnya adalah Cara Edit Label Blog Dengan CSS3. Dropdown menu label ini salah satu keunikanya adalah label blog sobat menjadi dropdown, sehingga dapat merampingkan tampilan label dan dapat menghemat tempat blogsobat. Contoh nya seperti gambar dibawah ini :

Cara Membuat Dropdown Menu Label : Ikuti langkah-langkah dibawah ini :

1. Sobat cari kode html label blog sobat, kode nya seperti dibawah ini :

<b:widget id='Label1' locked='false' title='Labels' type='Label'/>

2. Ganti dengan kode dibawah ini :

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<select style='width:100%' onchange='location=this.options[this.selectedIndex].value;'>
<option>Click to choose a label</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
(<data:label.count/>)
</option>
</b:loop>
</select>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

3. Save template dan llihat hasilnya.

Note :

• Untuk menghindari eror jangan lupa backup template.
• Width 100% adalah lebar nya, silahkan sobat ubah dan disesuaikan.
• Click to choose a label, juga bisa sobat ganti dengan kata-kata sobat sendiri.

Okey cukup sekian sob tips blog kali ini,  yaitu Cara Membuat Dropdown Menu Label.

Semoga tips ini bermanfaat.

Script : www.bloggersentral.com

Tips Blog Cara Edit Label Blog Dengan CSS3

Sobat blogger mau merubah penampilan label blog menjadi lebih keren ? Nah, tips blog kali ini yang ingin saya share adalah Cara Edit Label Blog Dengan CSS3. Kalo sobat blogger memakai tips blog ini, saya jamin penampilan label blog sobat akan terlihat keren. Untuk melihat preview lihat gambar dibawah ini :

Cara membuat Label Blog Dengan CSS3 :
1. Masukkan kode berikut diatas ]]></b:skin>
 

.label-size {

    float: left;

    margin: 0 0 7px 20px;

    position: relative;

    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

    font-size: 0.75em;

    font-weight: bold;

    text-decoration: none;

    color: #996633;

    text-shadow: 0px 1px 0px rgba(255,255,255,.4);

    padding: 0.417em 0.417em 0.417em 0.917em;

    border-top: 1px solid #d99d38;

    border-right: 1px solid #d99d38;

    border-bottom: 1px solid #d99d38;

    -webkit-border-radius: 0 0.25em 0.25em 0;

    -moz-border-radius: 0 0.25em 0.25em 0;

    border-radius: 0 0.25em 0.25em 0;

    background-image: -webkit-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));

    background-image: -moz-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));

    background-image: -o-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));

    background-image: -ms-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));

    background-image: linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));

    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#feda71', EndColorStr='#feba47');

    -webkit-box-shadow: inset 0 1px 0 #faeaba,

        0 1px 1px rgba(0,0,0,.1);

    -moz-box-shadow: inset 0 1px 0 #faeaba,

        0 1px 1px rgba(0,0,0,.1);

    box-shadow: inset 0 1px 0 #faeaba,

        0 1px 1px rgba(0,0,0,.1);

    z-index: 1;

}


.label-size:before {

    content: '';

    width: 1.30em;

    height: 1.39em;

    background-image: -webkit-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));

    background-image: -moz-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));

    background-image: -o-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));

    background-image: -ms-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));

    background-image: linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));

    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#feda71', EndColorStr='#feba47');

    position: absolute;

    left: -0.69em;

    top: .2em;

    -webkit-transform: rotate(45deg);

    -moz-transform: rotate(45deg);

    -o-transform: rotate(45deg);

    transform: rotate(45deg);

    border-left: 1px solid #d99d38;

    border-bottom: 1px solid #d99d38;

    -webkit-border-radius: 0 0 0 0.25em;

    -moz-border-radius: 0 0 0 0.25em;

    border-radius: 0 0 0 0.25em;

    z-index: 1;

}


.label-size:after {

    content: '';

    width: 0.5em;

    height: 0.5em;

    background: #fff;

    -webkit-border-radius: 4.167em;

    -moz-border-radius: 4.167em;

    border-radius: 4.167em;

    border: 1px solid #d99d38;

    -webkit-box-shadow: 0 1px 0 #faeaba;

    -moz-box-shadow: 0 1px 0 #faeaba;

    box-shadow: 0 1px 0 #faeaba;

    position: absolute;

    top: 0.667em;

    left: -0.083em;

    z-index: 9999;

}


#Label1 {

    height: 210px;

}


.label-size:hover {

    background-image: -webkit-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));

    background-image: -moz-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));

    background-image: -o-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));

    background-image: -ms-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));

    background-image: linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));

    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#fee18d', EndColorStr='#fec86c');

    border-color: #e1b160;

}


.label-size:hover:before {

    background-image: -webkit-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));

    background-image: -moz-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));

    background-image: -o-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));

    background-image: -ms-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));

    background-image: linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));

    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#fee18d', EndColorStr='#fec86c');

    border-color: #e1b160;

2. Save template dan lihat hasilnya.

Okey, cukup sekian tips blog kali ini cara edit label blog dengan CSS3.
Semoga bermanfaat