Mengganti Fungsi Widget Label Menjadi Dropdown - Pada postingan ke tiga hari ini akan membuatkan tutorial wacana bagaimana cara Mengganti Fungsi Widget Label Menjadi Dropdown. Seperti yang kita tahu pada setingan Widget label Blogger terdapat dua fungsi dan tampilan, yaitu tampilan widget daftar label dan cloud label.
Namun di sini Saya akan memperlihatkan pilihan lain dari widget label yang sanggup dibentuk dropdown, tampilannya pun sama persis dengan tampilan dropdown yang ada di dalam widget arsip.
Tujuan dari mengganti tampilan widget label ini yaitu untuk menghemat kawasan di halaman blog jikalau di blog sahabat sudah terdapat banyak label yang menciptakan blog terlihat sempit alasannya yaitu bukan hanya widget label saja yang ada di blog. Selain itu blog sahabat akan terlihat lebih rapi dan profesional.
Bagi yang ingin mecobanya, silakan ikuti tutorial berikut ini :
1. Buka Blogger > Template > Kemudian cari arahan ini
Ganti semua arahan di atas dengan arahan ini
2. Selanjutnya, tambahkan arahan di bawah ini sebelum ]]></b:skin> atau </style>
3. Simpan template dan lihat hasilnya.
Demikian tutorial Mengganti Fungsi Widget Label Menjadi Dropdown, biar bermanfaat.
Namun di sini Saya akan memperlihatkan pilihan lain dari widget label yang sanggup dibentuk dropdown, tampilannya pun sama persis dengan tampilan dropdown yang ada di dalam widget arsip.
Tujuan dari mengganti tampilan widget label ini yaitu untuk menghemat kawasan di halaman blog jikalau di blog sahabat sudah terdapat banyak label yang menciptakan blog terlihat sempit alasannya yaitu bukan hanya widget label saja yang ada di blog. Selain itu blog sahabat akan terlihat lebih rapi dan profesional.
Bagi yang ingin mecobanya, silakan ikuti tutorial berikut ini :
Mengganti Fungsi Widget Label Menjadi Dropdown
1. Buka Blogger > Template > Kemudian cari arahan ini
<ul> <b:loop values='data:labels' var='label'> <li> <b:if cond='data:blog.url == data:label.url'> <data:label.name/> <b:else/> <a expr:href='data:label.url'> <data:label.name/> </a> </b:if> ( <data:label.count/>) </li> </b:loop> </ul>Ganti semua arahan di atas dengan arahan ini
<div class="dropmedown"> <select class="dropdown-select" onchange='location=this.options[this.selectedIndex].value;'> <option> Search Category </option> <b:loop values='data:labels' var='label'> <option expr:value='data:label.url'> <data:label.name/> ( <data:label.count/>) </option> </b:loop> </select> </div>Ganti goresan pena yang ditandai dengan goresan pena sobat.
2. Selanjutnya, tambahkan arahan di bawah ini sebelum ]]></b:skin> atau </style>
/* Dropdown Label */ .dropmedown select{outline:none;cursor:pointer} .dropmedown{display:inline-block;position:relative;overflow:hidden;width:100%;background:#fff;border:1px solid transparent;border-radius:3px;height:36px;line-height:36px;color:#444} .dropmedown:before,.dropmedown:after{content:'';position:absolute;z-index:2;top:13px;right:12px;width:0;height:0;line-height:36px;border:4px dashed;border-color:#888 transparent;pointer-events:none} .dropmedown:before{border-bottom-style:solid;border-top:none} .dropmedown:after{margin-top:8px;border-top-style:solid;border-bottom:none} .dropdown-select{position:relative;width:100%;margin:0;padding:6px 8px 6px 10px;height:36px;line-height:18px;font-size:12px;color:#62717a;text-shadow:0 1px #fff;background:#f2f2f2;background:rgba(0,0,0,0)!important;border:0;border-radius:0;-webkit-appearance:none} .dropdown-select>option{margin:3px;padding:6px 8px;text-shadow:none;background:#f8f8f8;outline:none;border:0;border-radius:3px;cursor:pointer}3. Simpan template dan lihat hasilnya.
Demikian tutorial Mengganti Fungsi Widget Label Menjadi Dropdown, biar bermanfaat.
