Patah Online - Sebelumnya saya ingin mengucapkan selamat menunaikan ibadah puasa, tak terasa kita sudah memasuki hari ke 21 bulan ramadhan, gimana nich sudah ada yang bolong belom yaa.. hhehhe. Uke langsung saja kita menuju ke laptop. Postingan kali ini merupakan kelanjutan dari postingan sebelumnya seputar blogger, yakni Cara pasang menu dropdown di blog.
Dimana di tutorial blogger kali ini saya coba sedikit memodifikasi menu dropdown dengan sedikit tambahan javascript sehingga menu dropdown kita menjadi melayang, contohnya bisa di lihat di blog ini. Bagi anda yang suka memodifikasi menu blog anda seperti saya. dimana berbagai macam menu blog seperti menu horizontal, menu dengan effect mouseover dan Menu melayang di samping kiri saya coba terapkan di blog berharap menemukan menu yang cocok sesui keinginan hati.
Berikut cara membuat menu dropdown melayang di blog.
1. Login ke blogger => Rancangan => edit HTML
2. Bagi sobat yang belum menggunakan menu dropdown, atau di blognya belum menggunakan menu horizontal, silahkan copy kode CSS di bawah ini jangan lupa tempatkan kode tersebut di atas ]]></b:skin>
#NavbarMenu {
background: #000;
width: 400px;
height: 10px;
font-size: 11px;
font-family: Trebuchet MS, Tahoma, Verdana;
color: #fff;
margin: 0px;
padding: 0px;
}
#NavbarMenuleft {
width: 400px;
float: left;
margin: 0;
padding: 0;
}
#nav {
margin: 0;
padding: 0;
}
#nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#nav li {
list-style: none;
margin: 0;
padding: 0;
}
#nav li a, #nav li a:link, #nav li a:visited {
background: #222222;
height: 15px;
color: #fff;
display: block;
font-size: 11px;
font-family: trebuchet ms, ;
text-transform: none;
text-decoration: none;
margin: 0;
padding-top:6px;
padding-bottom:5px;
padding-left:13px;
padding-right:13px;
border-right: 1px solid #000;
}
#nav li a:hover, #nav li a:active {
background: #7f7f7f;
color: #222222;
margin: 0;
padding-top:6px;
padding-bottom:5px;
padding-left:13px;
padding-right:13px;
text-decoration: none;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #7f7f7f;
width: 150px;
color: #fffff;
font-size: 11px; font-family:
trebuchet ms,;
font-weight:strong;
text-transform: none;
float: none;
margin: 0;
padding: 7px 10px;
border: 1px solid #000;
}
#nav li li a:hover, #nav li li a:active {
background: #222222;
color: #7f7f7f;
padding: 7px 10px;
}
#nav li {
float: left;
padding: 0;
}
#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0;
padding: 0;
}
#nav li ul a {
width: 140px;
}
#nav li ul ul {
margin: -32px 0 0 171px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
position: static;
}
background: #000;
width: 400px;
height: 10px;
font-size: 11px;
font-family: Trebuchet MS, Tahoma, Verdana;
color: #fff;
margin: 0px;
padding: 0px;
}
#NavbarMenuleft {
width: 400px;
float: left;
margin: 0;
padding: 0;
}
#nav {
margin: 0;
padding: 0;
}
#nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#nav li {
list-style: none;
margin: 0;
padding: 0;
}
#nav li a, #nav li a:link, #nav li a:visited {
background: #222222;
height: 15px;
color: #fff;
display: block;
font-size: 11px;
font-family: trebuchet ms, ;
text-transform: none;
text-decoration: none;
margin: 0;
padding-top:6px;
padding-bottom:5px;
padding-left:13px;
padding-right:13px;
border-right: 1px solid #000;
}
#nav li a:hover, #nav li a:active {
background: #7f7f7f;
color: #222222;
margin: 0;
padding-top:6px;
padding-bottom:5px;
padding-left:13px;
padding-right:13px;
text-decoration: none;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #7f7f7f;
width: 150px;
color: #fffff;
font-size: 11px; font-family:
trebuchet ms,;
font-weight:strong;
text-transform: none;
float: none;
margin: 0;
padding: 7px 10px;
border: 1px solid #000;
}
#nav li li a:hover, #nav li li a:active {
background: #222222;
color: #7f7f7f;
padding: 7px 10px;
}
#nav li {
float: left;
padding: 0;
}
#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0;
padding: 0;
}
#nav li ul a {
width: 140px;
}
#nav li ul ul {
margin: -32px 0 0 171px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
position: static;
}
3. Kemudian simpan tamplate
4. Klik elemen halaman => tambah gatget => pilih HTML/Javascript lalu copy paste kode di bawah ini
<style type="text/css">#gb{position:fixed;top:0px;z-index:+1500;}* html #gb{position:relative;}
.gbcontent{float:right;background:#fff;padding:1px;}</style>
<script type="text/javascript">function showHideGB(){var gb = document.getElementById("gb");var w = gb.offsetWidth;gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);gb.opened = !gb.opened;}function moveGB(x0, xf){var gb = document.getElementById("gb");var dx = Math.abs(x0-xf) > 10 ? 5 : 1;var dir = xf>x0 ? 1 : -1;var x = x0 + dx * dir-100;gb.style.top = x.toString() + "px";if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}}</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()">
</div>
<div class="gbcontent">
<div class="menuhorisontal">
<ul id="nav">
<li><a href="http://www.patahonline.com/">Home</a></li>
<li><a href="http://www.patahonline.com/p/about-me.html">Profil</a></li>
<li><a href="http://www.patahonline.com/p/kontak.html">Kontak</a></li>
<li><a href="http://www.patahonline.com/search/label/Photoshop">Photoshop</a></li>
<li><a href="http://www.patahonline.com/search/label/Coreldraw">CorelDraw</a></li>
<li><a href="http://www.patahonline.com/search/label/Trik%20Internet">Trik Internet</a>
<ul>
<li><a href="http://www.patahonline.com/search/label/Aplikasi%2F%20Software">Download</a></li>
</ul>
</li>
<li><a href="http://www.patahonline.com/search/label/tutorial">Softwere</a></li>
<li><a href="http://www.patahonline.com/search/label/Blogger"> Blogger</a>
<ul>
<li><a href="http://pattah12.blogspot.com/search/label/Artikel">Artikel</a></li>
<li><a href="http://www.patahonline.com/p/daftar-isi.html">Daftar Isi</a></li>
<li><a href="http://www.patahonline.com/p/cek-berat-blog.html">Cek Berat Blog</a></li>
<li><a href="http://www.patahonline.com/p/prase-html-to-xml-blogger.html">Parse HTML Blogger</a></li>
<li><a href="http://www.patahonline.com/p/link-exchange.html">Tukar Link</a></li>
</ul>
</li>
<li><li><a href="http://www.patahonline.com/p/buku-tamu.html">GuestBook</a>
</li>
<li><a href="http://pattah.16mb.com/mivo.html" target="_blank">TV Online</a>
<ul>
<li><a href="http://pattah.16mb.com/global.html" target="_blank">Global TV</a>
</li>
<li><a href="http://pattah.16mb.com/mnc.html" target="_blank">MNC TV</a>
</li>
<li><a href="http://pattah.16mb.com/game_online.html" target="_blank">Game Online</a>
</li>
<li><a href="http://pattah.16mb.com/photoshop_online.html">Photoshop Online</a></li>
</ul>
</li>
</li></ul>
</div>
<script type="text/javascript">var gb = document.getElementById("gb");gb.style.center = (20-gb.offsetWidth).toString() + "px";</script>
</div>
</div>
Note : Ganti Url blog dengan Url blog anda sendiri ya :).gbcontent{float:right;background:#fff;padding:1px;}</style>
<script type="text/javascript">function showHideGB(){var gb = document.getElementById("gb");var w = gb.offsetWidth;gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);gb.opened = !gb.opened;}function moveGB(x0, xf){var gb = document.getElementById("gb");var dx = Math.abs(x0-xf) > 10 ? 5 : 1;var dir = xf>x0 ? 1 : -1;var x = x0 + dx * dir-100;gb.style.top = x.toString() + "px";if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}}</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()">
</div>
<div class="gbcontent">
<div class="menuhorisontal">
<ul id="nav">
<li><a href="http://www.patahonline.com/">Home</a></li>
<li><a href="http://www.patahonline.com/p/about-me.html">Profil</a></li>
<li><a href="http://www.patahonline.com/p/kontak.html">Kontak</a></li>
<li><a href="http://www.patahonline.com/search/label/Photoshop">Photoshop</a></li>
<li><a href="http://www.patahonline.com/search/label/Coreldraw">CorelDraw</a></li>
<li><a href="http://www.patahonline.com/search/label/Trik%20Internet">Trik Internet</a>
<ul>
<li><a href="http://www.patahonline.com/search/label/Aplikasi%2F%20Software">Download</a></li>
</ul>
</li>
<li><a href="http://www.patahonline.com/search/label/tutorial">Softwere</a></li>
<li><a href="http://www.patahonline.com/search/label/Blogger"> Blogger</a>
<ul>
<li><a href="http://pattah12.blogspot.com/search/label/Artikel">Artikel</a></li>
<li><a href="http://www.patahonline.com/p/daftar-isi.html">Daftar Isi</a></li>
<li><a href="http://www.patahonline.com/p/cek-berat-blog.html">Cek Berat Blog</a></li>
<li><a href="http://www.patahonline.com/p/prase-html-to-xml-blogger.html">Parse HTML Blogger</a></li>
<li><a href="http://www.patahonline.com/p/link-exchange.html">Tukar Link</a></li>
</ul>
</li>
<li><li><a href="http://www.patahonline.com/p/buku-tamu.html">GuestBook</a>
</li>
<li><a href="http://pattah.16mb.com/mivo.html" target="_blank">TV Online</a>
<ul>
<li><a href="http://pattah.16mb.com/global.html" target="_blank">Global TV</a>
</li>
<li><a href="http://pattah.16mb.com/mnc.html" target="_blank">MNC TV</a>
</li>
<li><a href="http://pattah.16mb.com/game_online.html" target="_blank">Game Online</a>
</li>
<li><a href="http://pattah.16mb.com/photoshop_online.html">Photoshop Online</a></li>
</ul>
</li>
</li></ul>
</div>
<script type="text/javascript">var gb = document.getElementById("gb");gb.style.center = (20-gb.offsetWidth).toString() + "px";</script>
</div>
</div>
5. Langkah terakhir silahkan klik simpan. lalu lihat perubahanya.
Cukup sekian postingan saya tentang Cara Buat Menu Dropdown Melayang di Blog, semoga bisa bermanfaat.
62 Komentar
Write Komentarwah wah keren nih menu drop downnya sobat...
Replywahhh demonya di atas ini ya sob yang position:fixed
ReplyTips yang bagus bang pattah
Replyboleh juga dicoba nih
@Asis Sugianto
Replymkasih sobat.... :)
@Widodo
Replyiya sobat, hehhehe
@Laku.com Media Belanja Online
Replysilahkan aja sob, moga bermanfaat aja :)
wis keren sob....? bs tambah keren nih blog nya hehehe nice post
Reply@Masnady_Bloegreen
Replysilahkan sobat, semoga bisa menambah kekerenan blog sobat, hahahahhayyy
waw tutorial yang bagus
Replyentar saya coba deh di blog saya yang satunya :)
@Kumpulan Cara Mengatasi Hanya Di Cara-Mengatasi.Com
Replysilahkan sobat, moga berhasil ya sobat :)
Kunjungan perdana gan, blog nya baguuus. visitornya rame :D
ReplySalam kenal ya
@Just Copy and Leave It !!!
ReplyMksih sobat,mksih udah berkunjung :)
@goyang patah patah Sini lagi sob meramaikan suasana
Reply@Widodo
Replymhon untuk berkomtar sesui dengan isi artikel ya sobat :)
bagus sob menunya,,,
Replymungkin kalo warnanya bisa disesuaikan dg warna blog tinggal atur saja di stylenya ,,,
wilujeng ngeblog
@Kang Asep
Replyiya kang, tinggal sesuaiin deangan warna tampalate kita, makin oke lah blog kita kang :)
Keren nih, langsung coba deh
Reply@Ilham Bachtiar
Replymkasih sob, silahkan dicoba moga bisa berhasil sobat :)
makasih atas ilmunya sob :D
Reply@Septialdo Nursukma
Replysama2 sobat, moga bisa bermanfaat sobat :)
Asyikk ntar aku coba diblog dummy aku ya bang Fattah,trims banget nih bang..hahhahyyyy
Reply@Icahbanjarmasin
Replysama2 bang icah, moga bisa berhasil bang :)
keren..keren bang pattah...
Replyseperti punya bang pattah tuh kan...
kalau di scoll ttp muncul?
mohon maaf baru bisa mampir lagi sobat, kemarin lagi ada kesibukan ofline sobat...
Reply@Untaian Kalimat
Replyyo'i sobat, n mkasih banyak sobat :)
@Asis Sugianto
Replyngomong2 ada kesibukan apakah gerangan nich sobat nya :)
sip gan, ane mau coba terapin di blog ane...
Reply@Windows Blog
Replyuke silahkan sobat, smoga berhasil :)
Seperinya blog saya juga perlu menggunakan hal yang menu dropdown melayangnya sahabat
Replymantab. kayaknya bisa dipraktekkan nih.
Replysalam.
wah, klo pake gini, keren donk...
Replysalam kenal bosss... ^_^
wahhh oke juga nih bang.... ane mang kurng faham dengan menu2 gini....
Replysaya save dulu yah mas
Replylumayan buat pembelajaran, thanks buat ilmunya :)
keren menunya, kapan2 saya coba menunya
Replymakasih sob, salam kenal
Wuih keren banget Menu dropdownnya sob :D
Reply@Blog Keperawatan
Replykw katagorynya banyak mending pakek aja sobat :)
@Quantum Artikel
Replysilahkan sobat, moga bisa mempercakep blog sobat :)
@Cendekiawan IT
Replysalam kenal juga bos, n mkasih sudah berkunjung :)
@Ehwansah Jailani
Replymksih bang, moga bisa bermanfaat aja dech bang :)
@sc
Replysama2 sobat, moga bisa bermanfaat :)
@Admin Andreas
Replysalam kenal juga sobat, mkasih buat kunjunganya :)
@Fahmi Setiawan
Replymkasih banyak sobat...
tutorialnya sangat menarik kawan..dan sepertinya bisa mempercantik tampilan blog dengan menu dropdown begini :)
Reply@BlogS of Hariyanto
Replymkasih bang hariyanto, moga aja ya bang,hehhe :)
mantab ne sob,,,izin nyimak aja dulu
Reply@Gopar
Replysilahkan sobat, moga bisa bermanfaat sobat :)
ijin copas sob kodenya,, mau saya terapin di blog saya ,,,, salam kenal,,
Reply@intim harmonis
Replysilahkan sobat, moga berhasil dan salam kenal juga sobat :)
mantapp gan :D
Reply@Hzndi
Replymkasih gan
Saya takut tambah berat sob loading blog saya :)
Reply@Abed Saragih
Replytapi kw mank berat blognya udah melebihi batas mending jangan pasang sob :)
mantap sob, perlu di coba nih
Reply@andrea suyoko
Replymkasih sobat,silahkan dicoba, moga berhasil :)
wah, udah aya coba sob, tapi hanya mucul di beranda aja, cara munculin juga di postingan gimana kang ??
Reply@irfan295_
Replylho kox bisa kyak bisa gitu ya sobat, kode ini dah saya pasang bisa muncul di beranda n posting, coba sobat cek di css atau javascript mungkin ada yang salah sobat :)
@goyang patah patah
Replyoke gan ..
@Irfani syafiudin
Replysip
membantu sekali nih asek,,,thnx bro
Reply@Zaky Argha
Replysenang bisa membantu mas bro
Artikel yang sangat bermanfaat, ..mantap, Eitss jngn lupa daftar di sini ya AutoTraffic Exchange dan SEO Killer
ReplyNice info sob, visit back kesini ya...
Replykata kata lucu,
biodata tarra budiman,
kata kata penyemangat,
kata pantun idul fitri,
download idm terbaru
kata galau
Jadilah pembaca yang bermartabat dengan memberikan komentar yang santun,indah di pandang dan sesuai dengan norma yang baik serta sesuai dengan apa yang ada di postingan.
Kriteria Komentar yang di tampilkan:
1. Bukan Komentar Spam
2. Komentar tidak sesuai dengan isi artikel
3. Menyisipkan Link/url baik itu blog/web pada komentar EmoticonEmoticon