Menambah Sajian Dropdown Pada Tabs Horisontal Blogger Standar
Friday, September 17, 2021
Add Comment
Ditambah lagi kini banyak bermunculan pebloger mahir di tanah air. Sebuah widget blogspot yang satu ini ( Tabs horisontal )boleh dikatakan wajib untuk dimiliki dan dipasang pada blog.
Dengan adanya Navigasi ini maka pengunjung menjadi terbantu dalam mengeksplorasi konten yang ada dalam sebuah blog. Blogger memberi nama navigasi itu dengan sebutan Tabs Horisontal. Blogger menyediakan widget Tabs horisontal yang letaknya berada di bawah Header. Akan tetapi Tabs horisontal ini tidak akan muncul sebelum kita mengaktifkannya.
Tetapi sayangnya Tabs horisontal bawaan blogger standar tidak dilengkapi dengan submenu atau hidangan di bawah hidangan utama, alias dropdown menu, sehingga masih kurang begitu menarik.
Selama ini yang kita tahu untuk sanggup menciptakan navigasi horisontal plus hidangan dropdown ialah dengan menambahkan banyak css maupun js yang begitu ribed. Belum lagi sesudah diterapkan malah merusak konstruksi template.
Jika ketika ini anda sedang mencari tips wacana cara Menambah hidangan dropdown pada Tabs Horisontal sedangkan template yang digunakan ialah template Blogger yang masih standar, maka anda termasuk orang yang beruntung sebab pada kesempatan ini akan saya berikan rahasianya.
Silahkan perhatikan dan ikuti langkah berikut ini :
1. Pastikan bahwa anda menggunakan template blogger standar (Template bawaan blogger)
2. Pastikan anda telah mengaktifkan fitur Laman.
Kalau belum silahkan aktifkan dulu, caranya lihat gambar di bawah ini :
3. Klik Simpan Setelan
4. Setelah itu masuk ke Edit HTML template
5. Klik Expand Template Widget
6. Cari instruksi ini ]]></b:skin>
7. Setelah ketemu, masukkan instruksi berikut ini, sempurna di atas instruksi pada langkah no.6
.tabs-inner .widget li ul {
z-index: 100; position: absolute;
left: -999em; height: auto; margin: 0; padding: 0;
border: 1px solid #999999;
}
.tabs-inner .widget li ul, .tabs-inner .widget li ul a,
.tabs-inner .widget li ul li:first-child a {
-moz-border-radius: 0px; -webkit-border-radius: 0px;
-goog-ms-border-radius: 0px; border-radius: 0px;
}
.tabs-inner .widget li:hover ul, .tabs-inner .widget li.sfhover ul {
left: auto;
}
.tabs-inner .widget li li a:hover, .tabs-inner .widget li li a:active {
color: #ffffff; background: rgb(51, 102, 153);
}
.tabs-inner .widget li ul a {
display: block; padding-left: 1.25em; padding-right: 1.25em;
margin-left: 0px; margin-right: 0px; border: none;
color: #000000; background: rgb(243, 244, 246);
}
.tabs-inner .widget li ul, .tabs-inner .widget li ul a {
Related
8. cari instruksi <li><a expr:href='data:link.href'><data:link.title/></a></li> dan lalu perhatikan instruksi <b:/loop> yang terdapat beberapa baris di bawahnya. Nah, sisipkan instruksi dengan format berikut ini sempurna di bawah instruksi <b:/loop>.
<li><a href='#'>Menu</a>
<ul>
<li><a href='URL'>Sub Menu 1</a></li>
<li><a href='URL'>Sub Menu 2</a></li>
<li><a href='URL'>Sub Menu 3</a></li>
</ul>
</li>
9. Simpan Template
Jika anda melakukannya dengan benar maka kesudahannya menyerupai pada blog demo berikut ini:
LIHAT DEMO
Sumber http://www.notesku.com/
0 Response to "Menambah Sajian Dropdown Pada Tabs Horisontal Blogger Standar"
Post a Comment
Blog ini merupakan Blog Dofollow, karena beberapa alasan tertentu, sobat bisa mencari backlink di blog ini dengan syarat :
1. Tidak mengandung SARA
2. Komentar SPAM dan JUNK akan dihapus
3. Tidak diperbolehkan menyertakan link aktif
4. Berkomentar dengan format (Name/URL)
NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".
Klik subscribe by email agar Anda segera tahu balasan komentar Anda