Untuk mendapatkan space iklan dihalaman ini silahkan hubungi owner Blog Design, Kami akan secepatnya merespon dan mempertimbangkan letak dari iklan text dan banner anda...

Wednesday, December 11, 2013

widget mega menu blogspot

Widget mega menu blogspot | widget mega menu blogspot pada postingan kali ini saya sebut dengan widget mega menu blogspot dengan alasan bahwa menu ini dapat anda gunakan untuk blog news ataupun blog yang memiliki link yang banyak. Tutorial widget mega menu blogspot ini terinspirasi dari seorang teman lama yang menginginkan widget mega menu blogspot. Untuk mengetahui tampilan dari tutorial widget mega menu blogspot pada postingan kali ini, silahkan anda klik DEMO dibawah, pada halaman demo widget mega menu blogspot silahkan klik menu dengan icon arrow, dan lihat hasilnya. Untuk tehnik pembuatan widget mega menu blogspot ini silahkan simak penjelasan dibawah ini, langsung saja menuju TKP.

Demo

 

Install Program CSS

  • Login ke dashboard anda
  • Masuk ke "TEMPLATE" lalu klik " Edit HTML "
  • Cari code ]]></b:skin> 
  • Copy Code script CSS widget mega menu blogspot dibawah ini, pastekan diatas code ]]></b:skin> tadi atau bila template blog anda memakai </style> silahkan pastekan kode CSSnya tepat diatas </style> template anda.

/*****************************************
Name : widget mega menu untuk blogspot
By : Rivai Silaban | Blog Design
Update : Rabu, 11 esember 2013
******************************************/
#megamenurivaisilaban{margin:0 auto;width:980px;border-bottom:solid 1px #e5e5e5;font-family:Verdana,Arial,Helvetica,sans-serif;font-size:12px}#megamenurivaisilaban a{color:#900;text-decoration:none}#megamenurivaisilaban a:hover{color:#00f}#megamenurivaisilaban{display:inline;position:relative}#megamenurivaisilaban span{position:relative;z-index:10;padding:4px 4px 4px 6px;border-bottom:0;line-height:18px}#megamenurivaisilaban span a{font-weight:bold;padding:0 6px 0 2px}*+html #megamenurivaisilaban span.over{border-top:solid 1px #e5e5e5;padding-bottom:3px}#megamenurivaisilaban span.over a:hover{text-decoration:none}#megamenurivaisilaban span.active{padding:4px 3px 4px 5px;border-top:solid 1px #e5e5e5;border-left:solid 1px #e5e5e5;border-right:solid 1px #999;border-bottom:solid 1px #ffc;background-color:#ffc}#megamenurivaisilaban span.active{border-top:solid 1px #e5e5e5;padding-bottom:3px}#megamenurivaisilaban span.active a:hover{text-decoration:none}#megamenurivaisilaban img.arrow{cursor:pointer}#megamenurivaisilaban div.rivai_silaban{display:none;position:fixed;margin-top:18px;border-top:solid 1px #e5e5e5;border-left:solid 1px #e5e5e5;border-right:solid 1px #999;border-bottom:solid 1px #999;padding:4px;top:18px;width:980px;background-color:#ffc}#megamenurivaisilaban div.rivai_silaban .list_text{width:250px;float:left;font-family:Verdana,Arial,Helvetica,sans-serif;font-size:10px;color:#000;line-height:normal}#megamenurivaisilaban div.rivai_silaban .list_text_expo{width:200px;float:left;font-size:10px;line-height:normal;margin:5px 20px;text-align:center}#megamenurivaisilaban div.rivai_silaban .list_text_expo .mor3{padding:5px 5px;border::solid #06c 1px;text-align:center;background-color:#2861a6;margin:5px auto;color:#fff}#megamenurivaisilaban div.rivai_silaban .list_text_expo .mor3:hover{background-color:#5fb7e7}#megamenurivaisilaban div.rivai_silaban .list_text_expo img{width:200px;height:80px;margin:5px auto}#megamenurivaisilaban div.rivai_silaban .list_text img{width:250px;height:80px;margin:5px auto}#megamenurivaisilaban div.rivai_silaban .list{width:200px;float:left}#megamenurivaisilaban div.rivai_silaban .list li{list-style-type:square}#megamenurivaisilaban .head_menu{float:left;margin:5px 10px;padding-bottom:5px;color:#900;font-weight:bold}* html #megamenurivaisilaban div.rivai_silaban{margin-top:23px}*+html #megamenurivaisilaban div.rivai_silaban{margin-top:23px}#megamenurivaisilaban div.rivai_silaban a:link,#megamenurivaisilaban div.rivai_silaban a:visited,#megamenurivaisilaban div.rivai_silaban a:hover{display:block;font-size:11px;padding:4px}#megamenurivaisilaban .item_line{color:#00f;font-weight:bold}
/*code CSS end */


Install Script


  1. Setelah anda selesai menyematkan CSS widget mega menu blogspot saatnya anda menyematkan kode scriptnya pada tag html/xml template anda.
  2. Pada Edit HTML template anda silahkan cari kode </head>
  3. Setelah ketemu copy script dibawah ini dan pastekan diatas kode </head>
  4. Perlu anda ingat bila pada template anda sudah ada kode JQUERY diatas versi 1.4 pada script tulisan kode warna biru dibawah kode tulisan warna BIRU tersebut tidak usah dikut di Copy. Bila sebaliknya versinya dibawah silahkan copy semua kode tersebut.

<!-- Rivai Silaban | BLOG DESIGN script widget mega menu blogspot start -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

<script type="text/javascript" src="http://yourjavascript.com/372136151111/menu-1-01.js"></script>
<!-- Rivai Silaban | BLOG DESIGN script widget mega menu blogspot End -->


Install Program Tag HTML

Untuk memanggil widget mega menu blogspot tersebut agar tampil pada halaman blog kesayangan anda silahkan simak penjelasan dibawah ini.

  • Setelah anda sudah memasang CSS dan script widget mega menu blogspot saatnya anda memasang kode htmlnya.
  • Bila anda memahami code xml/html silahkan sematkan kode dibawah ini langsung ketubuh xml/html template anda.
  • Bila anda belum memahami code html anda dapat memasangnya di widget yang harus anda pasang sebelumnya yaitu 1 layout dibawah header, Copy code dibawah ini dan pastekan pada widget anda, silahkan anda edit dan save.
  • Buat anda yang belum memeiliki layout di bawah header silahkan pasang dulu layoutnya tepat dibawah header template anda, silahkan simak tutorial http://rivai-silaban.blogspot.com/2013/02/cara-menambah-1-kolom-gadget-dibawah.html .
  • Setelah anda sudah memasang 1 kolom layout dibawah header, silahkan klik " tambahkan gadget " kemudian pilih " HTML/JavaScript " kemudian copy code dibawah ini lalu pastekan kedalam wiget anda.
  • Edit codenya dan silahkan anda save, selamat berkarya | Tutorial widget mega menu blogspot.

<!-- BDRS widget mega menu blogspot code start -->
<div id="megamenurivaisilaban">
<div> <div> <span class="head_menu"><a href="http://www.rivai.org" title="home">Home</a></span></div>
<div><span class="head_menu"><a href="http://www.rivai.org/disclaimer" target="_blank" rel="bookmark" title="Rivai Silaban">Disclaimer</a></span> </div>
<div><span class="head_menu"><a href="http://www.rivai.org/privacy-policy" target="_blank" rel="bookmark" title="Rivai Silaban">Privacy Policy</a></span> </div>
<div><span class="head_menu"><a href="http://rivai-silaban.blogspot.com/p/blog-page_18.html" target="_blank" rel="bookmark" title="Rivai Silaban">Sitemap</a></span> </div>
<div><span class="head_menu">Category <img alt="kategori" src="http://2.bp.blogspot.com/-8oLEGV4ZUcc/UqgwGpnu3iI/AAAAAAAACDI/CRpq3MXcP_s/s1600/arrow.png" class="arrow" title="kategori" /></span>
<div class="rivai_silaban">
<ul class="list">
<span class="item_line">Kategory Juru COPAS</span>
<li> <a href="http://www.rivai.org" target="_blank" rel="bookmark" title="Rivai Silaban">Pencuri Konten</a></li>
<li><a href="http://www.rivai.org" target="_blank" rel="bookmark" title="Rivai Silaban">Para Spammer</a></li>
<li> <a href="http://www.rivai.org" target="_blank" rel="bookmark" title="Rivai Silaban">Spammer Back Link</a></li>
<li> <a href="http://www.rivai.org" target="_blank" rel="bookmark" title="Rivai Silaban">Suka contek Konten</a></li>
<li> <a href="http://www.rivai.org" target="_blank" rel="bookmark" title="Rivai Silaban">Manusia kehabisan IDE</a></li>
<li><a href="http://www.rivai.org" target="_blank" rel="bookmark" title="Rivai Silaban">Lebih enak COPAS</a></li>
<li><a href="http://www.rivai.org" target="_blank" rel="bookmark" title="Rivai Silaban">Aku Seorang COPAS</a></li></ul>
<ul class="list"> <span class="item_line">Kategory Pecinta SEX</span>
<li> <a href="http://www.rivai.org" target="_blank" rel="bookmark" title="Rivai Silaban">Foto Bugil anak SMP</a></li>
<li> <a href="http://www.rivai.org" target="_blank" rel="bookmark" title="Rivai Silaban">Foto Bugil anak SMA</a></li>
<li><a href="http://www.rivai.org" target="_blank" rel="bookmark" title="Rivai Silaban">Foto Bugil anak KULIAH</a></li>
<li> <a href="http://www.rivai.org" target="_blank" rel="bookmark" title="Rivai Silaban">Foto Bugil 18 Tahun</a></li>
<li> <a href="http://www.rivai.org" target="_blank" rel="bookmark" title="Rivai Silaban">Foto Bugil 23 Tahun</a></li>
<li> <a href="http://www.rivai.org" target="_blank" rel="bookmark" title="Rivai Silaban">Video sex anak 18 Tahun</a></li>
<li><a href="http://www.rivai.org" target="_blank" rel="bookmark" title="Rivai Silaban">Video Porno</a></li></ul>
<ul class="list"><span class="item_line">Kategory Online Shoop</span>
<li> <a href="http://www.rivai.org" target="_blank" rel="bookmark" title="Rivai Silaban">Jual Celana alam</a></li>
<li> <a href="http://www.rivai.org" target="_blank" rel="bookmark" title="Rivai Silaban">Jual Kolor</a></li>
<li><a href="http://www.rivai.org" target="_blank" rel="bookmark" title="Rivai Silaban">Jual kosmetik</a></li>
<li> <a href="http://www.rivai.org" target="_blank" rel="bookmark" title="Rivai Silaban">Jual Celana panjang</a></li>
<li> <a href="http://www.rivai.org" target="_blank" rel="bookmark" title="Rivai Silaban">Jual Rok MINI</a></li>
<li> <a href="http://www.rivai.org" target="_blank" rel="bookmark" title="Rivai Silaban">Jual rumah</a></li>
<li><a href="http://www.rivai.org" target="_blank" rel="bookmark" title="Rivai Silaban">Jual mobil mewah</a></li></ul>
<ul class="list">
<li> <a href="http://www.rivai.org" target="_blank" rel="bookmark" title="Rivai Silaban">Category XML / HTML</a></li>
<li> <a href="http://www.rivai.org" target="_blank" rel="bookmark" title="Rivai Silaban">Category Java Script</a></li>
<li><a href="http://www.rivai.org" target="_blank" rel="bookmark" title="Rivai Silaban">Category CSS</a></li>
<li> <a href="http://www.rivai.org" target="_blank" rel="bookmark" title="Rivai Silaban">Category Layout</a></li>
<li> <a href="http://www.rivai.org" target="_blank" rel="bookmark" title="Rivai Silaban">Category PHP</a></li>
<li> <a href="http://www.rivai.org" target="_blank" rel="bookmark" title="Rivai Silaban">Category Jquery</a></li>
<li><a href="http://www.rivai.org" target="_blank" rel="bookmark" title="Rivai Silaban">Category Widget</a></li>
<li><a href="http://www.rivai.org" target="_blank" rel="bookmark" title="Rivai Silaban">Category Plugins</a></li></ul> </div>
</div>
<div><span class="head_menu">Komunitas <img alt="kumunitas" src="http://2.bp.blogspot.com/-8oLEGV4ZUcc/UqgwGpnu3iI/AAAAAAAACDI/CRpq3MXcP_s/s1600/arrow.png" class="arrow" title="komunitas" /></span>
<div class="rivai_silaban">
<p class="list_text_expo"><img alt="rivai silaban" src="http://1.bp.blogspot.com/-orTj4P1-6a8/UqgvWOUjQvI/AAAAAAAACC8/tA3aOdDDBkk/s1600/GAMBAR.gif" title="rivai silaban" /><span class="item_line">KOMUNITAS TUKANG KOPAS</span><br/>
Tukang COPAS sangat meresahkan dan merusak moral para pelakunya <br/><br/> Kunjungi halaman untuk melihat TUKANG COPAS artikel..<a class="mor3" href="http://www.rivai.org" target="_blank" rel="bookmark" title="Rivai Silaban">Lihat komunitas ....</a></p>
<p class="list_text_expo"><img alt="rivai silaban" src="http://1.bp.blogspot.com/-orTj4P1-6a8/UqgvWOUjQvI/AAAAAAAACC8/tA3aOdDDBkk/s1600/GAMBAR.gif" title="rivai silaban" /><span class="item_line">KOMUNITAS FOTO BUGIL</span><br/>
Foto foto bugil khusus untuk para dewasa.. anak anak dilarang mengklik..<br/><br/> Kunjungi halaman untuk melihat foto bugil....<a class="mor3" href="http://www.rivai.org" target="_blank" rel="bookmark" title="Rivai Silaban">Lihat komunitas ....</a></p>
<p class="list_text_expo"><img alt="rivai silaban" src="http://1.bp.blogspot.com/-orTj4P1-6a8/UqgvWOUjQvI/AAAAAAAACC8/tA3aOdDDBkk/s1600/GAMBAR.gif" title="rivai silaban" /><span class="item_line">KOMUNITAS VIDEO PORNO</span><br/>
Kumpulan VIDEO PORNO khusus untuk para dewasa.. anak anak dilarang mengklik.. <br/><br/> Kunjungi halaman untuk melihat foto bugil..<a class="mor3" href="http://www.rivai.org" target="_blank" rel="bookmark" title="Rivai Silaban">Lihat komunitas ....</a></p>
<p class="list_text_expo"><img alt="rivai silaban" src="http://1.bp.blogspot.com/-orTj4P1-6a8/UqgvWOUjQvI/AAAAAAAACC8/tA3aOdDDBkk/s1600/GAMBAR.gif" title="rivai silaban" /><span class="item_line">KOMUNITAS BLOGGER</span><br/>
Komunitas khusus buat para blogger yang suka blogspot untuk belajar.. <br/><br/> Kunjungi halaman untuk melihat BLOGGER KOMUNITAS..<a class="mor3" href="http://www.rivai.org" target="_blank" rel="bookmark" title="Rivai Silaban">Lihat komunitas ....</a></p> </div>
</div>
<div><span class="head_menu">About Me <img alt="tentang saya" src="http://2.bp.blogspot.com/-8oLEGV4ZUcc/UqgwGpnu3iI/AAAAAAAACDI/CRpq3MXcP_s/s1600/arrow.png" class="arrow" title="tentang saya" /></span>
<div class="rivai_silaban">
<ul class="list">
<li> <a href="http://www.rivai.org" target="_blank" rel="bookmark" title="Rivai Silaban">Foto foto saya</a></li>
<li> <a href="http://www.rivai.org" target="_blank" rel="bookmark" title="Rivai Silaban">Motto Blog saya</a></li>
<li><a href="http://www.rivai.org" target="_blank" rel="bookmark" title="Rivai Silaban">Visi Blog saya</a></li>
<li> <a href="http://www.rivai.org" target="_blank" rel="bookmark" title="Rivai Silaban">Skema Blog saya</a></li>
<li> <a href="http://www.rivai.org" target="_blank" rel="bookmark" title="Rivai Silaban">Partner Blog saya</a></li>
<li> <a href="http://www.rivai.org" target="_blank" rel="bookmark" title="Rivai Silaban">Link Blog Teman</a></li>
<li><a href="http://www.rivai.org" target="_blank" rel="bookmark" title="Rivai Silaban">Statistic Blog</a></li>
<li><a href="http://www.rivai.org" target="_blank" rel="bookmark" title="Rivai Silaban">Aktivitas Blog</a></li></ul>
<ul class="list">
<li><a href="http://www.blogger.com/follow-blog.g?blogID=5055362939739660258" target="_blank" rel="bookmark" title="Rivai Silaban">Join to Blog</a></li>
<li><a href="http://rivai-silaban.blogspot.com" target="_blank" rel="bookmark" title="Rivai Silaban">Komunitas Blog</a></li>
<li><a href="http://rivai-silaban.blogspot.com" target="_blank" rel="bookmark" title="Rivai Silaban">Fanspage FB saya</a></li>
<li><a href="https://www.facebook.com/rivaisilaban" target="_blank" rel="bookmark" title="facebook Rivai Silaban">Facebook saya</a></li>
<li><a href="https://www.google.com/+RivaiSilaban" target="_blank" rel="bookmark" title="gplus Rivai Silaban">Google plus saya</a></li>
<li><a href="http://www.rivai.org" target="_blank" rel="bookmark" title="Rivai Silaban">Google Page</a>
<li><a href="https://twitter.com/Rivai_Silaban" target="_blank" rel="bookmark" title="twitter Rivai Silaban">Twitter saya</a>
<li><a href="http://www.rivai.org" target="_blank" rel="bookmark" title="Rivai Silaban">Pirates </a></li>
</ul>
<ul class="list">
<li><a href="http://www.rivai.org" target="_blank" rel="bookmark" title="Rivai Silaban">Account Saya</a></li>
<li><a href="http://www.rivai.org" target="_blank" rel="bookmark" title="Rivai Silaban">Komentar Blog</a></li>
<li><a href="http://www.rivai.org" target="_blank" rel="bookmark" title="Rivai Silaban">Adsense</a></li>
<li><a href="http://www.rivai.org" target="_blank" rel="bookmark" title="Rivai Silaban">Email Blog saya</a></li>
<li><a href="http://www.rivai.org" target="_blank" rel="bookmark" title="Rivai Silaban">My wordpress</a></li>
<li><a href="http://www.rivai.org" target="_blank" rel="bookmark" title="Rivai Silaban">www.joomla-saya.com</a></li>
<li><a href="http://www.rivai.org" target="_blank" rel="bookmark" title="Rivai Silaban">www.web-jualan_saya.com</a></li>
<li><a href="http://www.rivai.org" target="_blank" rel="bookmark" title="Rivai Silaban">www.web-site-saya.com</a></li></ul>
<p class="list_text"><img alt='Logo_admin' src='https://lh3.googleusercontent.com/-OJtrnRti_10/Ufd68cAeF9I/AAAAAAAABmY/LiZkXCAwI7g/h76/admin.png' title='admin' />
Blog ini membahas tentang berbagai tips dan tutorial blogspot untuk mengoptimalkan halaman blog di search engine ( SEO ), Validasi HTML 5 , CSS 3, Script dan tehnik kontribusi dalam tag tag html begitu juga dengan XML. </p> </div>
</div>
<div><span class="head_menu">Tutorial <img alt="tutorial" src="http://2.bp.blogspot.com/-8oLEGV4ZUcc/UqgwGpnu3iI/AAAAAAAACDI/CRpq3MXcP_s/s1600/arrow.png" class="arrow" title="tutorial" /></span>
<div class="rivai_silaban">
<p class="list_text_expo"><img alt="tutorial wordpress" src="http://3.bp.blogspot.com/-8CIcYjTmd4w/UqgynjmG5GI/AAAAAAAACDY/oHdDcuMG9uA/s1600/WPTUT.gif" title="tutorial wordpress" />
Lihat berbagai tutorial tentang wordpress di sini...<a class="mor3" href="http://www.rivai.org" target="_blank" rel="bookmark" title="Rivai Silaban">Lihat tutorial wordpress</a>
</p>
<p class="list_text_expo"><img alt="tutorial blogspot" src="http://1.bp.blogspot.com/-l_Q-4vqP6ZU/Uqg0t3-qp4I/AAAAAAAACDk/h2O6dglWh6Y/s1600/BBL.gif" title="tutorial blogspot"/>
Lihat berbagai tutorial tentang blogspot di sini...<a class="mor3" href="http://www.rivai.org" target="_blank" rel="bookmark" title="Rivai Silaban">Lihat tutorial blogspot</a></p>
<p class="list_text_expo"><img alt="html" src="http://1.bp.blogspot.com/-1CUbwqBNXsc/Uqg2AGpD_pI/AAAAAAAACDw/D61FPyVXKGs/s1600/html.gif" title="html" />
Lihat berbagai tutorial tentang HTML di sini...<a class="mor3" href="http://www.rivai.org" target="_blank" rel="bookmark" title="Rivai Silaban">Lihat tutorial html</a></p>
<p class="list_text_expo"><img alt="css 3" src="http://2.bp.blogspot.com/-uMVOc0rc170/Uqg23Bd9kNI/AAAAAAAACD8/ztZh__iHmII/s1600/css3.gif" title="css 3" />
Lihat berbagai tutorial tentang CSS 3 di sini...<a class="mor3" href="http://www.rivai.org" target="_blank" rel="bookmark" title="Rivai Silaban">Lihat tutorial CSS 3</a></p> </div>
</div>
</div>
</div><div style="clear:both"/></div>
<!-- BDRS widget mega menu blogspot code end -->

Keterangan Gambar
  • Code warna MERAH pada CSS tutorial widget mega menu blogspot diatas merupakan ukuran lebar menu, sesuaikan paa ukuran template blogspot anda .
  • Silahkan anda edit kembali kode CSSnya untuk menyesuaikan tampilannya sesuai dengan template anda.
  • Silahkan anda edit code HTMLnya sesuai dengan kebutuhan anda, ganti semua link yang ada dengan link anda.

Kesimpulan

widget mega menu blogspot sangat cocok buat blog anda yang berbasis news ataupun yang memiliki link atau kategori yang banyak.

Bila teman teman mengalami kesulitan dalam memasang kode widget mega menu blogspot ini atau mendapatkan kode yang Error, silahkan hubungi saya atau share bersama saya pada form komentar dibawah. Pergunakan semua fasilitas di halaman blog ini untuk mempermudah anda. Semoga postingan ini bermanfaat buat teman teman.

widget mega menu blogspot
Rabu 11 Desember 2013
Rivai Silaban | Blog Design

Terimakasih atas kunjungannya,Bila anda suka dengan artikel ini silahkan JOIN TO MEMBER BLOG atau berlangganan geratis Artikel dari blog ini, daftarkan email anda pada form subscribe dibawah halaman . Pergunakan vasilitas diblog ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui kotak komentar yang ada dibawah atau gunakan fasilitas yang ada diblog ini untuk menghubungi saya.

Salam Blogger.... !!! .

Me

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter
Di posting oleh : Rivai Silaban Update pada : 9:18 PM

2 comments :

1. Komentar SPAM Akan secepatnya dihapus
2. Pastikan untuk " Berlangganan Lewat Email " untuk membangun kreatifitas blog ini
3. Cek komentar masuk sebelum bertanya.
4. Link aktiv tidak akan berpungsi.
5. Dilarang menyebarluaskan artikel tanpa persetujuan dari saya.
6. Untuk mengajukan pertanyaan diluar postingan diatas, silahkan klik " Forum Diskusi "
7. Bergabung dengan kami untuk menjadi member Klik " Join to Member "
8. Komentar yang mengandung code tag HTML, konversikan terlebih dulu silahkan klik " Konversi Kode "

Salam bloger .. !!
Pergunakan semua fasilitas di Blog ini untuk mempermudah anda..
Konversi Kode Forum Diskusi Join to Blog