Membuat widget pada menu navigasi blog

Navigasi

Umumnya element widget untuk menempatkan gadget akan berada pada sidbar, header, footer dan lainnya. namun kali ini saya akan berbagi sebuah trik untuk membuat elemen widget pada menu navigasi yang mungkin aneh untuk apa tujuannya. sebenarnya cara ini saya gunakan untuk memasang sebuah formulir pencarian menggunakan jquery di blog ini yang mungkin nanti fungsinya bisa sama untuk sobat sebagai tempat meletakkan atau memasang gadget formulir pencarian biasa atau dengan jQuery dan untuk hasil trik ini, bisa sobat lihat pada menu floating blog ini.


Langsung saja, bagaimana caranya silahkan simak saja triknya sebagai berikut:

Langkah 1: Silahkan masuk ke Blogger dan buka blog anda, dari dashboard pilih tab Template > Edit HTML ( jang lupa, buat cadangan template anda )
Langkah 2: Sekarang kita akan membuat markup html sebuah menu navigasi untuk tempat dimana nannti kita akan meletakkan elemen widgetnya, kodenya seperti ini

<div id='contoh-menu'>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>Aboute</a></li>
<li><a href='#'>Contact</a></li>
<li><a href='#'>Disclaimer</a></li>
</ul>
</div>

Langkah 3: Saya anggap menu diatas sudah bisa digunakan, dan sekarang kita akan melanjutkan membuat kolom elemen widgetnya, lihat kode berikut

<li>
  <div id='form-pencarian'>
  </div>
</li>

Langkah 4: Kode untuk menempatkan element widgetnya telah ada, sekerang kita letakkan elemen widget di htmlnya sehingga jadi seperti di bawah ini

<li>
  <div id='form-pencarian'>
    <b:section class='top-header secsion' id='sience' preferred='yes'/>
  </div>
</li>

Ingat: class top-header secsion pada html diatas tidak perlu diberi nilai di dalam css dan id sience hanya di gunakan untuk id unik saja, jadi biarkan class dan id ini tidak mempunyai nilai atau anda ingin memberinya gaya silahkan di modifikasi.

Langkah 5: Setelah semua langkah diatas rampung, saatnya kita menyatukan semuanya sebagai hasil akhir dan hasil dari kesemuanya adalah seperti kode berikut ini

<div id='contoh-menu'>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>Aboute</a></li>
<li><a href='#'>Contact</a></li>
<li><a href='#'>Disclaimer</a></li>
<li>
    <div id='form-pencarian'>
        <b:section class='top-header secsion' id='sience' preferred='yes'/>
    </div>
</li>
</ul>
</div>

Langkah 6: Sekarang langkah untuk membuat css dari menu diatas, yang perlu diperhatikan adalah setiap gadget mempunyai class quickedit ( ikon obeng dan tang ) yang muncul untuk tujuan edit cepat. untuk menyiasati ini kita tempatkan nilai css untuk menyembunyikannya seperti berikut

.quickedit{display:none;}

dan kita letakkan dalam markup <ul>,

#contoh-menu ul .quickedit{display:none;}

Maka semua css untuk menu navigasi dengan elemen widgetnya adalah seperti dibawah ini

#contoh-menu{margin-top:25px;float:right;width:100%}
#contoh-menu ul{list-style: none;}
#contoh-menu ul .quickedit{display:none;}
#contoh-menu ul li{float:right}
#contoh-menu ul li a{line-height:34px;padding:5px 0;margin-left:25px;color:#fff;font-size:16px;text-transform:uppercase;display:block;text-decoration:none;}
#contoh-menu ul li a:hover{border-bottom:2px solid #000}
#form-pencarian a {text-decoration:none;color:#0D3E71;font-weight:bold;font-size:12px;display:block;}

Langkah 7: Untuk menggunakan menu ini, silahkan anda letakkan di bawah header atau mana saja yang anda inginkan dalam elemen htlm template anda, letakkan cssnya juga sesuai css lainnya. Silahkan berkreasi dengan cssnya, karena css diatas hanya untuk pembelajaran saja.

Cukup sekian dan semoga bermanfaat untuk anda...

Artikel Terkait

  • Menu navigasi drop down dengan pure CSS3
    Anda pasti sudah tidak heran lagi dengan menu drop down, karena sudah banyak artikel yang membahas dan memberikan tutorial ini. kali ini saya akan berbagi sebuah menu drop down yang apik dengan css3. Ini adalah Navigation Menu Dengan Multi Level Drop Down yang dikembangkan dengan menggunakan CSS3 murni dengan efek tambahan seperti border-radiu…
  • Menu navigasi blogger responsive CSS3
    Menu navigasi adalah hal yang di perlukan sebuah blog untuk mengarahkan seorang pengunjung ke halaman tertentu, buat sobat yang belum memasang ini di blog milik sendiri sekarang saya share caranya dengan tampilan responsive yang bisa menyesuaikan di semua resolusi tampilan. menu ini sederhana, hanya sebagai dasar saja jika ingin lebih menarik…
  • Menu vertikal accordion dengan CSS3
    Ini adalah posting pembaharuan dari posting Menu vertikal accordion dengan CSS3 sebelumnya yang sudah usang. Dalam tutorial ini kita akan belajar tentang membuat Menu Accordion menggunakan CSS3. Ada banyak tutorial CSS3 akordeon yang bisa sobat temukan, namun dalam versi ini kita akan menggunakan css :target pseudo-class dan menu ini akan …
  • Navigation Menu dengan Efek jQuery
    Kali ini saya akan share Menu navigasi blogger, Menu navigasi adalah hal yang di perlukan sebuah blog untuk mengarahkan seorang pengunjung ke halaman tertentu. Menu navigasi yang bagus dengan tampilan yang menarik, tentu itu memberikan nilai plus tersendiri untuk tampilan blog anda sehingga menambah bagus dan cantik. Menu navigasi ini memilik…
  • New AJAX Navigation Menu Widget untuk Blogger
    AJAX Navigasi menu untuk blogger adalah widget baru yang diciptakan oleh Me di Blogger platform yang menggunakan Blogger JSON API dan AJAX. Menu navigasi ini terinspirasi dari situs lama Mashable.com. Dan sekarang saya recoded  widget ini dan menambahkan fitur disesuaikan. Demo Bagaimana kerjanya ? Nah, widget ini bekerja dengan …
  • Menu Rocking dan Rolling Rounded
    Kali ini saya menemukan menu yang unik untuk di bahas, yaitu menu bericon yang mempunyai efek melebar dan bertampilan unik hasil dari kreasi http://tympanus.net/. Menu ini memanfaatkan efek berputar dan scaling Patch jQuery dari Zachary Johnson yang dapat ditemukan di sini. Demo Download Langsung saja kita lanjut untuk mengupas menu ini…

4 komentar

  1. tutorialnya mantabs...sederhana namun mudah dipahami ...salam kemerdekaan :-)

    BalasHapus
  2. sy masih bingung di

    <b:section class='top-header secsion' id='sience' preferred='yes'/>

    top-header scesion dam sience nya itu apanya.. kok beda dgn yg elemen widget yg lain... kalo yg lain itu sih sy masih ngerti, kalo yg diatas itu sy kurang ngerti hehe...
    cozz sy baru liat tutor ini.

    BalasHapus
  3. itu sama saja seperti class dan id element widget lainnya sob contohnya seperti

    <b:section class='sidebar-widget' id='sidebar-content='yes'/>

    jadi kalau mau di beri efek tampilan tinggal kita buat cssnya. misal kita isi elemen widget dengan form pencarian, dan kita ingin memberi efek rotasi kita buat saja css elemennya bukan widgetnya, contoh
    #sience { kode css rotasi disini} .top-header secsion { background: putih;}
    jadi kita tidak mencampur aduk css efek dengan css form pencarian, karena class dan id masing2 sudah di sendirikan, semoga paham

    BalasHapus
Kode klik emo: :) :( =( :wa: :s ^_^ :D =D ^:D @@, ;) :-bd :-d :ya: :'( T_T :\ :p B) :Q :Ozz 7:( \o/ **p

Link aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>

Konversi KodeOOT
:) :( =( :wa: :s ^_^ :D =D ^:D @@, ;) :-bd :-d :ya: :'( T_T :\ :p B) :Q :Ozz 7:( \o/ **p
Jika anda memiliki bahasan atau topik lain yang sama sekali tidak ada hubungan dengan tutorial diatas anda bisa menyampaikannya di halaman OOt. klik [link ini] untuk membuka halaman OOT.

Back to Top
Loading...