Cara Bikin Menu Banyak Di Atas Posting

kucoba.com zaman dulu

Hallo sobat informasi maya apa kabar? Akhir-akhir ini email kang salman penuh dengan berbagai pertanyaan bagaimana cara buat menu banyak di atas blog, atau cara bikin menu banyak d atas blog kita seperti : MENU PROFIL TULAR LINK dsb.
sebenarnya kang salman sudah 2 kali pernah membahas tutorial ini silakan anda lihat

1. Cara membuat menu navigasi horizontal dan vertikal dropdown
2. Cara membuat halaman menu dropdown

Namun baikalah untuk menanggapi hal itu kang salman akan membuat tutorial baru kebetulan kang salman menemukan cara baru membuat menu navigasi saat sedak utak-atik CCS di blog yang baru hehehe,

Sebelum kita mulai tutorialnya kang salman mau berbagi pengetahuan dasarnya dulu bagaimana cara membuat menu navigasi seperti di tutorial sebelunya disini

Di bawah ini adalah kode dasarnya untuk membuat menu di atas postingan / blog kita

<div id='templatemo_menu'>
        <ul>
               <li><a href='/'>Home</a></li>
   <li><a href='http://kocomon.blogspot.com/2010/05/prediksi-bocoran-naruto-terbaru.html'>Bocoran Terbaru</a></li>
   <li><a href='http://mivo.tv'>Nonton TV</a></li>
   <li><a href='http://kocomon.blogspot.com/2010/05/buku-tamu.html'>Buku Tamu</a></li>
   <li><a href='http://kocomon.blogspot.com/2010/05/game-online.html'>Game Online</a></li>

</ul>
            </div>

Dan ini adalah kode yang kang salman gunakan di blog yang sedang anda baca ini :

<div id='menu-wrap'>
<ul>
<li><a href='http://asksalman19.blogspot.com' title='Home'>Home</a></li>
<li><a href='http://asksalman19.blogspot.com/2010/03/profil.html' title='Profiles'>Profiles</a></li>
<li><a href='http://asksalman19.blogspot.com/2010/03/tukar-link.html'>Tukar Link</a></li>
<li><a href='http://asksalman19.blogspot.com/search/label/Download Software' title='Download'>Download</a></li>
<li><a href='http://asksalman19.blogspot.com/2009/09/tutorial-mudah-blog.html' title='Blog Tutorial'>Blog Tutorial</a></li>
<li><a href='http://asksalman19.blogspot.com/2010/03/cheat-gunbound.html' title='Cheat Gunbound'>Cheat Gunbound</a></li>
<li><a href='http://feedburner.google.com/fb/a/mailverify?uri=kang-salman' title='Subscribe'>Subscribe</a></li>
<li><a href='http://asksalman19.blogspot.com/2010/03/informasi-pasang-iklan-advertise.html' title='Pasang Iklan'>Pasang Iklan</a></li>
<li><a href='http://asksalman19.blogspot.com/2009/10/buku-tamu.html' title='Buku Tamu'>Buku Tamu</a></li>
<li><a href='http://asksalman19.blogspot.com/2009/03/site-map.html' title='Daftar Isi'><blink>Daftar Isi</blink></a></li>
<li><a href='http://asksalman19.blogspot.com/2009/09/contact.html' title='Contact'>Contact</a></li>
</ul>
</div>

Keterangan ! :
Anda tinggal mengganti alamat url di atas dengan alamat anda sendiri, sebagai contoh : yang berwarna merah adalah alamat url saya, lalu yang berwarna hitam adalah nama menu, ganti dengan milik anda, begitupun dengan yang lainnya.

Jika tutorial itu masih membingungkan. disini kang salman akan membuat tutorial baru yang lebih mudah. trik ini kang salman temukan secara tidak sengaja saat sedang mengutak-atik CCS di blog baru kang salman http://kocomon.blogspot.com.

Nie kodenya sob:
Peringatan ! :
Kode di bawah ini di buat dengan coding bubble tooltips
Sebelum kamu mencoba tutorial ini, silakan ikuti tutorial sebelumnya agar hasil nya jadi lebih baik dan stylis. silakan klik disini

Copyright 2009 <aclass='tt' href='http://asksalman19.blogspot.com/'> KangSalman<span class='tooltip'><span class='top'/><spanclass='middle'>Jangan lupa follow saya</span><spanclass='bottom'/></span></a>
|
<a class='tt'href='http://kocomon.blogspot.com/2010/05/tukar-link.html'> TukarLink<span class='tooltip'><span class='top'/><spanclass='middle'>Mau tukar link?</span><spanclass='bottom'/></span></a>
|

<a class='tt' href='http://patimeh.blogspot.com'> Aneh Tapi Nyata <span class='tooltip'><span class='top'/><span class='middle'>Berisi berita aneh, unik dan nyata</span><span class='bottom'/></span></a>
|

<a class='tt' href='http://kocomon.blogspot.com/2010/05/blog-tutorial_22.html' target='_parent'> | Blog Tutorial<span class='tooltip'><span class='top'/><span class='middle'>Panduan mudah membuat blog</span><span class='bottom'/></span></a>
|

<a class='tt' href='http://faisalardhy.blogspot.com/2008/05/manga-naruto-comic-indo-chapter-496.html'> Naruto 496<span class='tooltip'><span class='top'/><span class='middle'>Naruto 496 Bahasa Indonesia</span><span class='bottom'/></span></a>
|

<a class='tt' href='http://faisalardhy.blogspot.com/2007/05/manga-one-piece-comic-chapter-586.html'>One Piece 586<span class='tooltip'><span class='top'/><span class='middle'>One Piece 586 Bahasa Indonesia</span><span class='bottom'/></span></a>
|

Pasang Iklan <aclass='tt'href='http://asksalman19.blogspot.com/2010/03/informasi-pasang-iklan-advertise.html'>disini<span class='tooltip'><span class='top'/><spanclass='middle'>untuk informasi dan konfirmasi lebihlanjut</span><span class='bottom'/></span></a>
</div>

Jika anda mengunakan bubble tooltips maka menu yang akan di atas akan tampil dengan baik dan sempurna, walaupun sebenarnya sedikit rumit tapi hasilnya sebanding.

tapi jika tidak mau mengunakan bubble tooltip karena pusing maka kodenya ada di bawah ini silakan di copy:

<div id='templatemo_footer'>
Copyright 2009 <a class='tt' href='http://asksalman19.blogspot.com/'> Kang Salman></a>
|
<a class='tt' href='http://kocomon.blogspot.com/2010/05/tukar-link.html'> Tukar Link</a>
|
<a class='tt' href='http://patimeh.blogspot.com'> Aneh Tapi Nyata</a>
|
<a class='tt' href='http://kocomon.blogspot.com/2010/05/blog-tutorial_22.html' target='_parent'> | Blog Tutorial</a>
|
<a class='tt' href='http://faisalardhy.blogspot.com/2008/05/manga-naruto-comic-indo-chapter-496.html'> Naruto 496</a>
|
<a class='tt' href='http://faisalardhy.blogspot.com/2007/05/manga-one-piece-comic-chapter-586.html'>One Piece 586</a>
|
<a class='tt' href='http://asksalman19.blogspot.com/2010/03/informasi-pasang-iklan-advertise.html'>Pasang Iklan</a>
</div>

Silakan anda copy kode di atas, mau yang pake bublle toltips atau yang tidak, terserah anda.

letakkan kode itu di
1. login ke blog => teteletek =>Edit HTML
2. cari kode di bawah ini di atas
<div id='main-wrapper'>
sehingga hasilnya :

Namun jika anda menyimpan sidebar di atas posting carilah kode sidebar di atas <div id='main-wrapper'>
kalau blog saya terdapat kode, (mungkin di setiap blog akan berbeda-beda)
<div id='sidebar-atas'>

Hasilnya akan :

div id='templatemo_footer'>
Copyright 2009 <a class='tt' href='http://asksalman19.blogspot.com/'> Kang Salman></a>
|
<a class='tt' href='http://kocomon.blogspot.com/2010/05/tukar-link.html'> Tukar Link</a>
|
<a class='tt' href='http://patimeh.blogspot.com'> Aneh Tapi Nyata</a>
|
<a class='tt'href='http://kocomon.blogspot.com/2010/05/blog-tutorial_22.html'target='_parent'> | Blog Tutorial</a>
|
<a class='tt'href='http://faisalardhy.blogspot.com/2008/05/manga-naruto-comic-indo-chapter-496.html'>Naruto 496</a>
|
<a class='tt'href='http://faisalardhy.blogspot.com/2007/05/manga-one-piece-comic-chapter-586.html'>OnePiece 586</a>
|
<a class='tt' href='http://asksalman19.blogspot.com/2010/03/informasi-pasang-iklan-advertise.html'>Pasang Iklan</a>
</div>

3. Setelah itu save dan lihat hasilnya

Jika anda ingin contoh blog percobaan nya silakan klik disini

Ok sobat informasi maya sekian dulu ya, semoga tutorial ini bisa membantu masalah anda.
Assalamualaikum ^_^

Post By Kang Salman
http://www.kucoba.com

Ingin mendapat penghasilan tambahan? Cara kerja mudah hanya dengan melakukan survey dan mengisi angket lalu anda akan di bayar. Itulah pekerjaan anda disini <= klik untuk daftar dan memanen uang $ seperti saya. Gratis

Dapatkan update artikel terbaru kami langsung ke email anda.

Cara Bikin Menu Banyak Di Atas Posting

0 komentar:

Posting Komentar

Entri Populer

Archive