kucoba.com zaman dulu |
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'>Dan ini adalah kode yang kang salman gunakan di blog yang sedang anda baca ini :
<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>
<div id='menu-wrap'>Keterangan ! :
<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>
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
<div id='templatemo_footer'>
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://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>
</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>
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 :
<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>
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>
<div id='main-wrapper'>
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>
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>
<div id='sidebar-atas'>
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.
0 komentar:
Posting Komentar
give your comment here, please do not spam