Web dan Grafis Desain
Author
Sharing is Beautiful.
Kp. Bumi Godean RT.01 RW.06
Wonosobo , Jawa Tengah
56311
Indonesia
alfirous@yahoo.com
081215880929
DOB: 09/03/----
Maaf web sedang dalam perbaikan setelah vakum dalam waktu yang lama.

Menu Navigasi With CSE


Halo sobat Blogger , saya akan Share sesuai Request sobat Wirang Geni yaitu Menu Navigasi dengan tambahan  Custom Search Engine. Custom Search Engine adalah Fitur Pencarian yang di sediakan oleh Google, kegunaan dari CSE adalah pencarian kata kunci yang akurat seperti Pencarian Google. Untuk mencobanya sobat bisa coba di Kotak Pencarian saya di kanan atas. Menu Navigasi ini saya tiru dan modifikasi dari Blog www.pradiszwardhana.com , tentu saja saya sudah ijin terlebih dahulu pada empunya. Untuk contoh sobat bisa lihat di atas atau pada gambar di bawah ini :




Berikut langkah-langkahnya :

  • Tambahkan kode ini di  atas ]]></b:skin>

/* Navigasi */
#nav {background: #777777;height:35px;border-radius:2px 2px; -moz-border-radius:2px 2px 2px 2px;  -khtml-border-radius:2px 2px 2px 2px;  -webkit-border-radius:2px 2px 2px 2px;  border-radius:2px 2px 2px 2px;padding-bottom: 2px;}
#nav-left {float:left;display:inline;width:500px;}
#nav-right {float:right;display:inline;width:225px;padding:5px 5px 0px 0px;}
#nav ul {position:relative;overflow:hidden;padding:0px 0px 0px 5px;margin:0;text-transform: uppercase;font-size:11px;font-weight:bold;}
#nav ul li {float:left;list-style:none}
#nav ul li a, #nav ul li a:visited {display:block;color:#ffffff;margin:4px 4px;padding:7px 7px 7px 7px;text-decoration:none;}
#nav ul li a:hover {background-color: #eeeeee;color: #000000;display:block;margin:4px 4px;padding:7px 7px 7px 7px;border-radius:2px 2px; -moz-border-radius:2px 2px 2px 2px;  -khtml-border-radius:2px 2px 2px 2px;  -webkit-border-radius:2px 2px 2px 2px;  border-radius:2px 2px 2px 2px;}
#nav ul li a.current, #nav ul li a.current:visited, #nav ul li a.current:hover{background-color:#fff;color:#ffffff;margin:4px 4px;padding:7px 7px 7px 7px;border-radius:3px 3px; -moz-border-radius:3px 3px 3px 3px;  -khtml-border-radius:3px 3px 3px 3px;  -webkit-border-radius:3px 3px 3px 3px;  border-radius:3px 3px 3px 3px;}
#searchbox {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv-OVG0Mk5e-kV_gDaYWyEyzyJWX5kS5IgUjbZkxDv-qIC027wa_G9eekDgEOSGwT_fxtJeeflT5XJIUKQiW4G15MfywFd-olHqH-1QmNBJRrs-KLQGu6PS7KTWX-p3d1trJKj_YVWVmgm/) no-repeat;width: 225px !important;height: 25px;}
#searchbox #s {float:left;padding:2px;margin: 2px 0px 0 5px;border:0;width:185px;background:none;font:13px Verdana;color:#3b3b3b;}
#nav-sub {background: #d9d9d9;height:30px;border-radius:2px 2px; -moz-border-radius:2px 2px 2px 2px;  -khtml-border-radius:2px 2px 2px 2px;  -webkit-border-radius:2px 2px 2px 2px;  border-radius:2px 2px 2px 2px;}
#nav-sub ul {position:relative;overflow:hidden;padding:0px 0px 0px 5px;margin:0;text-transform: uppercase;font-size:11px;font-weight:bold;color:#333;}
#nav-sub ul li {float:left;list-style:none;color:#333;margin-left:2px;margin-right:2px;margin-top:4px;margin-bottom:2px;padding-left:7px;padding-right:7px;padding-top:4px;padding-bottom:2px;}
#nav-sub ul li a, #nav-sub ul li a:visited {color:#333;text-decoration:none;}
#nav-sub ul li a:hover {color: #296DC0;text-decoration:underline;}


  • Letakkan kode ini di bawah <div id='content-wrapper'> atau di atas <div id='main-wrapper'>

<div id='nav'>
<div id='nav-left'>
<ul id='nav'>
<li><a href='http://mbahqopet.blogspot.com/'><img alt='Home' src='https://lh3.googleusercontent.com/-OaZjfFWc8JM/Tlikdfihj1I/AAAAAAAABPs/O-U3vZ_Pb_A/home%252520icon.png' title='Home'/></a></li>
<li><a href='URL KAMU' title='Judul'>Menu</a></li>
<li><a href='URL KAMU' title='Judul'>Menu</a></li>
<li><a href='URL KAMU' title='Judul'>Menu</a></li>
</ul>
</div>
<div id='nav-right'>
<form action='http://www.google.com/cse' id='searchform' method='get' style='display:inline;' target='_blank'>
<div id='searchbox'>
<input name='cx' type='hidden' value='003061775351897953705:noluujpjl7o'/>
<input id='s' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search...&quot;;}' onfocus='if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;}' type='text' value='Google Custom...'/>
<input alt='Search' id='searchsubmit' src='https://lh5.googleusercontent.com/-vjS8Nog62iw/TgSg2k7iYEI/AAAAAAAAAt8/nnu2Xd0ZHl0/search_button.gif' style='margin: 2px 0px 0px 3px;' title='Cari Artikel Disini' type='image'/>
</div>
</form>

</div>

</div>



  • Ganti kode berwarna merah dengan ID CSE kamu.
  • Jika di blog kamu sudah terdapat Menu Navigasinya hapus terlebih dahulu.
  • Pratinjau terlebih dahulu untuk menghindari kesalahan.
  • Simpan dan lihat hasilnya
Jika ada pertanyaan dari sobat blogger silahkan tinggalkan pada kotak komentar di bawah ini.

31 komentar :

  1. Komen yang diatas tadi pertamaxx ya :D

    BalasHapus
  2. wokwowkowk,, surim dah,, gak pernah dapet PERTAMAX lagi,, =,=" btw ntar ane mau ganti menunav kyk mbah qopets aja ahh,, keren tuh,, :p

    BalasHapus
  3. Tapi kalo bisa dibuat full css aja biar enggak mempengaruhi loading blog

    BalasHapus
  4. ehemmm. . udah rame nih post. . :P :D :D

    mantab nih menunya mbah..!!

    BalasHapus
  5. Wah pamer menu nih bro :P hahaha mantep

    BalasHapus
  6. @Musa : thanks, iya sob ente pertamaX, tinggal hapus gambarnya, udah deh Full CSS

    @Rama : surim kembali :P , silahkan emang keren donk

    @Zh!nTho : makasih , ini cuma editan CSS di blockquote mas.

    BalasHapus
  7. wadhhhhh sayang bgt menu edit HTML tempalte saya udah ilang bin musnah sob.... ada yg bentuk CSS ga ??

    BalasHapus
  8. @Bayu : mantab, pake donk :D

    @Farix : iya mas bro.

    BalasHapus
  9. @Green KLOPERER : ikut berduka cita mas, itu CSS mas

    BalasHapus
  10. sudah saya folback, saya akan memasukan blog mbah diblogroll.moga mbah juga begitu

    BalasHapus
  11. wah keren sob menunya, tapi gak bisa liat demonya.

    BalasHapus
  12. @arr rian : terima kasih, akan saya pasang balik tentunya.

    @Liandri : keren donk, masa demonya ada di atas kanan lho.

    BalasHapus
  13. itu kalo "google custom" diklik langsung hilang tulisannya pasti keren, jadi lebih mudah buat search, ngga usah hapus2 tulisan dulu, eheheee..
    yaa cuma masukan aja sih, dah keren tuh :D

    BalasHapus
  14. keren sobb ... !!
    walaupun jauh banget dari pertamax ....
    makin mantaav aja nih blognya mbah .... :)

    BalasHapus
  15. asekk dah form komentarnya uda scroll,, :p

    BalasHapus
  16. @Dimas : makasih sob.

    @Ladida : ok mas akan saya coba perbaiki.makasih untuk sarannya.

    @Shinobi : telat ente, makasih

    @Rama88 : iya sob, baru sempat ganti :D

    BalasHapus
  17. nongkrong dlu aah... sbelum nonton Indonesia vs Qatar .... !!
    mau nyari cemilan nih disini ... ???

    BalasHapus
  18. berkunjung sory OOT, uda pernah nyoba

    BalasHapus
  19. Maaf sedikit saya koreksi, penulisan border-radius:2px 2px 2px 2px; cukup ditulis dengan border-radius:2px; saja.
    Begitu hanya juga dengan penulisan padding:7px 7px 7px 7px; cukup ditulis padding:7px
    biar mengurangi ukuran CSS tanpa menghilangkan efek yang ada. :D

    BalasHapus
  20. @Cek-Info : sama.

    @Rudy Azhar : terima kasih mas buat koreksinya

    BalasHapus
  21. wa kren nih saya coba ah
    oh ya sekalian mau jawab peetanyaan agan tentang efek rotate efek itu bisa di pakai dimana saja gan di header juga bisa

    BalasHapus
  22. @Zikri : sama-sama.
    @Rizky Wardiansyah : silahkan, wah mantep deh kalo gitu.

    BalasHapus
  23. mau tanya kalau buat effect shadow gmn??

    BalasHapus

Anda dapat berkomentar terkait artikel diatas dan isi komentar sepenuhnya menjadi tanggung jawab komentator.

Dilarang berkomentar dengan tidak sopan, kasar, berisi fitnah, berbau SARA, SPAM dan OOT. Setiap komentar yang masuk akan dimoderasi dan akan diterbitkan jika sesuai dengan ketentuan yang berlaku.