Cara Membuat Pull Menu ~ NM Blog's

Sabtu, 03 Maret 2012

Cara Membuat Pull Menu

9:49:00 PM

Unknown

var popunder = true;

Pull Menu. Ada istilah lain? Sebetulnya saya tidak tahu persis istilah "hewan" ini tepatnya. Sama seperti ketika anda naik gunung dan menemukan satu spesies aneh dan tak tahu apa nama ilmiahnya (nama resmi yang dicatat ilmu biologi), apalagi untum mengerti arti bahasa latinnya. Pull Menu juga seperti itu. Kita tahu bendanya tapi tidak tahu persis istilahnya, jika ada yang tahu persis nama menu ini, silahkan tambahkan di kotak komentar.

Pull menu bisa anda lihat paling atas dengan tulisan Daftar Isi Blog, jika diklik akan muncul semua menu yang disembunyikan. Tiap menu berisi link ke halaman lain dan pada background Pull menu terdapat tulisan latar belakang sesuatu yang kita tonjolkan. Saya jualan texapon, bahan kimia pembuat sabun cair, pembersih lantai dalam kemasan pouch, itulah kenapa jualan saya saya taruh di background Pull Menu.

Jika ingin mengaplikasikan pull menu ke blog anda berikut inilah caranya.

Caranya adalah:

Pertama:

Masukkan kode berikut ini ke dalam CSS blog anda. Login ke blogger >> Layout >> Edit HTML. Lalu cari kode ]]></b:skin>. Tapi sebelumnya jangan lupa save dulu template anda.

Kedua:

Masukkan kode berikut ini tepat di atasnya.

/* for Internet Explorer to replace :target */ a#pull, a#push {behavior:url(wisencare.blogspot.com)} #pulldown {width:100%; height:400px; left:0; position:fixed; z-index:800; transition: 0.8s ease-in-out; -o-transition: 0.8s ease-in-out; -moz-transition: 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; } .close {top:-400px;} #opacity {position:absolute; width:100%; left:0; height:400px; background:#333; border-bottom:1px solid #222; opacity:0.9; filter: alpha(opacity=90); -o-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5); box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5); } #contents {height:400px; width:100%; left:0; position:absolute; color:#fff; background:url(cssplay23/top-back.gif) repeat-x; text-align:center; overflow:hidden;} #lowerContent {width:750px; margin:40px auto 0 auto;} #lowerContent dl {width:238px; margin:0 5px; padding:5px 0; background:#555; float:left; text-align:left; border:1px solid #888;} #lowerContent dl dt {color:#ff8000; font:bold 12px/25px arial, sans-serif; padding:0 5px;} #lowerContent dl dd {color:#aaa; font:12px/18px arial, sans-serif; margin:0; padding:0 5px;} #lowerContent dl dd a {color:#ddd;} #lowerContent dl dd a:hover {color:#fff;} a#pull {display:block; position:absolute; z-index:100; bottom:-30px; color:#fff; left:50%; background:url(http://3.bp.blogspot.com/-3hX84CiYm1w/Ta1ZuBXbEkI /AAAAAAAAAhE/ptOUBZDKTso/s400/close.png); z-index:-1; width:200px; margin- left:-100px; height:30px; text-align:center; text-decoration:none; font-family:arial, sans-serif; font-size:14px; line-height:30px;} a#push {display:none; position:absolute; z-index:100; bottom:-30px; color:#fff; left:50%;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6103K98XJvI9rzsLHc08YE8dRW4GX9EFnTOkJ5xnmeji17B7f4du8dZemEq2LXWZFSUBLiF_CcaZh-scd10YcdYQzIFcbRH_RxjBs-iCoa8j7qNQ8wt23SXFILDM8zbuEW4xZaGA7Lrs/s400/open.png); z-index:-1; width:200px; margin-left:-100px; height:30px; text-align:center; text-decoration:none; font-family:arial, sans-serif; font-size:14px; line-height:30px;} #pulldown:target {top:0;} #pulldown:target #pull {display:none;} #pulldown:target #push {display:block;} /* for IE 8 and lower */ .open {top:0;} .open #pull {display:none;} .open #push {display:block;} .close {top:-400px;} .close #pull {display:block;} .close #push {display:none;} /* this is a CSS answer to fix the hover/focus '~' and hover/focus '+' problem in safari and chrome */ html {-webkit-animation: safariSelectorFix infinite 1s;} @-webkit-keyframes safariSelectorFix { 0% {zoom:1;} 100% {zoom:1;} } .nav {width:745px; height:36px; background:#666; position:relative; z-index:100; font-family:arial, sans-serif; margin:0 auto; border-top:5px solid #ff8000; border-bottom:1px solid #000; text-align:left;} .menu, .menu ul {padding:0; margin:0; list-style:none;} .menu {width:730px; border-top:1px solid #333; padding-left:15px;} .menu ul.sub {position:absolute; left:-9999px; top:35px; background:#444; padding:0 0 0 10px; z-index:-1; border-top:1px solid #999;} .menu ul.sub1 {width:150px;} .menu ul.sub2 {width:300px;} .menu ul.sub3 {width:450px;} .menu ul.sub h5 {padding:4px 0; margin:0; color:#ff8000; font-size:12px; width:140px; line-height:18px;} .menu li.top-li {float:left; position:relative; background:#666; z-index:50;} .menu li.top-li a.top-a {display:block; float:left; line-height:35px; color:#ccc; padding:0 18px 0 10px; text-decoration:none; font-size:14px;} .menu li.top-li a.top-a:hover {background:#444; color:#fff;} .menu li.top-li:hover > a.top-a {background:#444; color:#fff;} .menu li.has-sub a.top-a:hover {height:36px;} .menu li.has-sub:hover > a.top-a {height:36px;} .menu li.close a {position:absolute; left:50%; top:-30px; width:100px; height:30px; line-height:30px; color:#fff; font-weight:bold; font-size:12px; padding:0; margin:0 0 0 -50px; background:#ff8000; text-align:center; text-decoration:none; display:none;} .menu ul li {width:150px; float:left;} .menu ul li a {line-height:15px; color:#fff; background:#666; display:block; width:120px; margin-bottom:1px; padding:3px 10px; text-decoration:none; font-size:12px;} .menu ul li a:hover {background:#ccc; color:#000;} .menu ul li.bottomLine {width:100%; clear:left; padding:5px 10px 5px 0; background:#333; margin-left:-10px; margin-top:5px; border-top:1px solid #888;} .menu ul li.bottomLine p {padding:0; margin:0; line-height:20px; font-size:12px; color:#ff8000; font-weight:bold; width:100%; padding-left:10px;} .menu ul li.bottomLine a {display:inline; padding:0 3px; line-height:20px; background:none; color:#ccc;} .menu ul li.bottomLine a:hover {color:#fff;} .menu :hover ul.sub {left:0;} .menu :hover ul.left1 {left:-150px;} /* for IE6 */ .menu table {border-collapse:collapse; margin-bottom:-1px;} * html .menu ul.sub {border:0;} * html .menu ul li.bottomLine {padding:5px 0 5px 10px;} * html #pulldown {position:absolute;}

Ketiga:

Klik Element Halaman >> Add Widget HTML/Javascript, pilih tempat yang sesuai menurut anda, lalu kopy paste kode berikut ini:

<div id="pulldown" class="close"> <div id="opacity"></div> <div id="contents"> <div class="nav"> <ul class="menu"> <li class="top-li"><a class="top-a" href="http://wisencare.blogspot.com">Home</a></li> <li class="top-li has-sub"><a class="top-a" href="http://wisencare.blogspot.com/2008/12/wise.html">CSS HTML</a>  <ul class="sub sub3"> <li class="sub"> <h5>Menu CSS</h5> <ul> <li><a href="http://wisencare.blogspot.com/2011/04/cara-membuat-menu-tab-view-dengan-css.html">Menu Tabview</a></li> <li><a href="http://wisencare.blogspot.com/2011/04/cara-membuat-menu-drop-line-horizontal.html">Menu Drop Line</a></li> <li><a href="http://wisencare.blogspot.com/2011/04/cara-membuat-menu-drop-horizontal.html">Menu Drop Hr</a></li> <li><a href="http://wisencare.blogspot.com/2011/04/cara-membuat-list-item-ul-li-mendatar.html">List Item Hr</a></li> <li><a href="http://wisencare.blogspot.com/2011/04/cara-membuat-label-s-menjadi-menu.html">Label Horizontal</a></li> </ul> <h5>Sidebar Nav.</h5> <ul> <li><a href="http://wisencare.blogspot.com/2011/04/cara-membuat-sidebar-bergerak-scrolling.html">Sidebar Scrolling</a></li> <li><a href="http://wisencare.blogspot.com/2011/04/cara-membuat-slide-out-navigasi.html">Slide Out Nav</a></li> <li><a href="http://wisencare.blogspot.com/2011/04/cara-membuat-css-play-photograph.html">Play Photograph</a></li> <li><a href="http://wisencare.blogspot.com/2011/04/mungkin-anda-sering-melihat-posting.html">Emoticon Clikable</a></li> </ul> </li> <li class="sub"> <h5>Widgets</h5> <ul> <li><a href="http://wisencare.blogspot.com/2011/04/cara-membuat-read-more-baca.html">Buat Readmore</a></li> <li><a href="http://wisencare.blogspot.com/2011/04/cara-membuat-bookmark-addthis-di-setiap.html">Bookmark Widget</a></li> <li></a><a href="http://wisencare.blogspot.com/2011/04/cara-membuat-blockquote-pada-blog.html">Bikin Blockquote</a></li> </ul> <h5>Yahoo Widgets</h5> <ul> <li><a href="http://wisencare.blogspot.com/2009/08/yahoo-messengeronline-indicator.html">YM Online Indicator</a></li> <li><a href="http://wisencare.blogspot.com/2011/04/mengganti-kursor-dengan-gambar.html">Cursor Gambar</a></li> </ul> <h5>Google Widgets</h5> <ul> <li><a href="http://wisencare.blogspot.com/2008/12/google-search-box.html">Google Search Box</a></li> <li><a href="http://wisencare.blogspot.com/2011/04/cara-mebuat-google-sitemap.html">Google Sitemap</a></li> <li><a href="http://wisencare.blogspot.com/2010/07/cara-menghapus-feedburner-badge.html">Hapus Feedburner badge</a></li> </ul> </li> <li class="sub"> <h5>Blog Widgets</h5> <ul> <li><a href="http://wisencare.blogspot.com/2011/04/cara-upload-foto-ukuran-besar-di.html">Maximize Photo</a></li> <li><a href="http://wisencare.blogspot.com/2011/04/cara-pasang-file-swf-ke-blog.html">Cara Pasang .swf</a></li> <li><a href="http://wisencare.blogspot.com/2009/09/gempa-bumi-hari-ini-melanda-jawa-barat.html">Zoom Photo</a></li> </ul> <h5>Simplize</h5> <ul> <li><a href="http://wisencare.blogspot.com/2011/04/cara-membuat-related-post-pada-blog.html">Buat Related Post</a></li> <li><a href="http://wisencare.blogspot.com/2009/06/favicon-codes-html-for-blogger.html">Ganti Favicon</a></li> <li><a href="http://wisencare.blogspot.com/2011/04/dua-cara-membuat-teks-bergerak.html">Teks Bergerak</a></li> <li><a href="http://wisencare.blogspot.com/2011/04/cara-membuat-meta-tag-title.html">Meta Tag Title</a></li> <li><a href="http://wisencare.blogspot.com/2011/04/cara-membuat-emoticon-pada-area-posting.html">Emoticon di Posting</a></li> </ul> </li> <li class="bottomLine"> <p>Visit Lapak kami.. Fresh Lime 400ml = Rp.3500, 800ml = Rp.5000.</p> <p><a href="http://wisencare.blogspot.com/2011/04/cara-membuat-sabun-cair.html">Sabun Cair Anti Lemak Kemasan Pouch</a>.</p> </li> </ul>  </li> <li class="top-li has-sub"><a class="top-a" href="#">Index Blog</a> < <ul class="sub sub2"> <li class="sub"> <h5>Blog Pilihan</h5> <ul> <li><a href="http://wisencare.blogspot.com/2010/06/congenital-hypothyroidism.html">Hyphothyroidism</a></li> <li><a href="http://wisencare.blogspot.com/2011/04/cara-memperbaiki-ntldr-or-ntdetectcom.html">NTLDR is Missing</a></li> <<li><a href="http://wisencare.blogspot.com/2011/02/kaya-cepat-cara-rentenir.html">Rentenir Cepat Kaya</a></li> <li><a href="http://wisencare.blogspot.com/2011/02/cara-membuat-warnet-warung-internet.html">Bikin Warnet</a></li> <li><a href="http://wisencare.blogspot.com/2011/04/cara-membanned-ip-address-visitor-blog.html">Banned Ip Adress</a></li> </ul> <h5>Jokes</h5> <ul> <li><a href="http://wisencare.blogspot.com/2009/08/humor-gusclur.html">Humor Gusclur</a></li> <li><a href="http://wisencare.blogspot.com/2009/06/salah-satu-cara-paling-absolut-untuk.html">Kursus Merayu Pria</a></li> <li><a href="http://wisencare.blogspot.com/2011/02/cara-membuat-bom-rakitan.html">Cara Bikin Bom</a></li> <li><a href="http://wisencare.blogspot.com/2009/08/ramalan-jimmy.html">Ramalan Jimmy</a></li> </ul> </li> <li class="sub"> <h5>Photoshop</h5> <ul> <li><a href="http://wisencare.blogspot.com/2011/04/cara-membuat-gambar-keluar-dari-bingkai.html">Foto Keluar Bingkai</a></li> <li><a href="#url">Sofas</a></li> <li><a href="http://wisencare.blogspot.com/2010/01/cara-membuat-hujan-dengan-photoshop.html">Animasi Hujan</a></li> <li><a href="http://wisencare.blogspot.com/2010/01/photo-animasi-gif-dengan-photoshop.html">Animasi Sederhana</a></li> <li><a href="http://wisencare.blogspot.com/2011/04/membuat-tulisan-indah-punch-hole-dengan.html">Tulisan Punch Hole</a></li> <li><a href="http://wisencare.blogspot.com/2010/01/adobe-photoshop-mengedit-foto-dengan.html">Edit Photo Cepat</a></li> <li><a href="http://wisencare.blogspot.com/2010/08/photoshop-cs5-beberapa-efek-dari-curves.html">Efek PS3</a></li> <li><a href="http://wisencare.blogspot.com/2011/03/cara-membuat-brush-gelembung-sabun.html">Bikin Gelembung</a></li> <li><a href="http://wisencare.blogspot.com/2010/05/photoshop-mengedit-photo-bayi-dengan.html">Magic Wand Tool</a></li> <li><a href="http://wisencare.blogspot.com/2010/04/photoshop-preview-luna-maya-diusia-tua.html">Luna Maya 2020</a></li> </ul> </li> <li class="bottomLine"> <p>Ikuti terus trik <a href="#">Photoshop</a> di Blog ini</p> </li> </ul>  </li> <li class="top-li has-sub"><a class="top-a" href="index.html">Religius.</a>  <ul class="sub sub1"> <li class="sub"> <h5>Tuhan Kita.</h5> <ul> <li><a href="http://wisencare.blogspot.com/2009/07/there-is-god-in-cyber.html">Tuhan Di Cyber.</a></li> <li><a href="http://wisencare.blogspot.com/2009/07/stop-olok-olok-tuhan.html">Stop Hina Tuhan</a></li> <li><a href="http://wisencare.blogspot.com/2009/07/there-is-god-in-cyber.html">Tauhid</a></li> <li><a href="http://wisencare.blogspot.com/2009/08/puasa-jimmy-antara-kapitalisme.html">Jimmy Dan Komunis</a></li> </ul> <h5>Agama Aktual</h5> <ul> <li><a href="http://wisencare.blogspot.com/2009/08/puasa-jimmy-antara-kapitalisme.html">Komunis VS Kapitalis</a></li> <li><a href="http://wisencare.blogspot.com/2009/10/tulisan-alquran-di-tubuh-anak-kecil.html">Keajaiban Dagestan</a></li> <li><a href="http://wisencare.blogspot.com/2009/05/facebook-haram_25.html">Facebook Haram?</a></li> </ul> </li> <li class="bottomLine"> <p>More <a href="http://wisencare.blogspot.com">writting</a> online. Stay With Us</p> </li> </ul>  </li> <li class="top-li has-sub"><a class="top-a" href="#"><span>Javascript</span><b></b></a>  <ul class="sub sub3 left1"> <li class="sub"> <h5>Menu.</h5> <ul> <li><a href="http://wisencare.blogspot.com/2011/03/merias-blog-dengan-jquery-ui-accordion.html">JQuery Accordion</a></li> <li><a href="http://wisencare.blogspot.com/2011/04/cara-membuat-label-cloud.html">Label Cloud</a></li> <li><a href="http://wisencare.blogspot.com/2011/04/cara-membuat-slide-out-navigasi.html">Slide Out Floating</a></li> <li><a href="http://wisencare.blogspot.com/2011/04/cara-membuat-alert-welcome-sebelum.html">Allert Welcome</a></li> <li><a href="http://wisencare.blogspot.com/2011/04/cara-membuat-tab-view-widget.html">Tab Widget</a></li> <li><a href="http://wisencare.blogspot.com/2011/03/kode-javascript-bikin-puzzle.html">Puzzle Jigzaw</a></li> </ul> <h5>Merias Blog</h5> <ul> <li><a href="http://wisencare.blogspot.com/2011/04/dua-cara-membuat-teks-bergerak.html">Teks Bergerak</a></li> <li><a href="http://wisencare.blogspot.com/2011/04/cara-membuat-sidebar-bergerak-scrolling.html">Sidebar Scrolling</a></li> <li><a href="http://wisencare.blogspot.com/2011/04/cara-membuat-pausing-up-down-message.html">Pausing Up down</a></li> </ul> </li> <li class="sub"> <h5>Script Bagus</h5> <ul> <li><a href="http://wisencare.blogspot.com/2011/04/cara-membuat-jquery-marquee-banner.html">JQuerry Marquee</a> <li><a href="http://wisencare.blogspot.com/2011/04/cara-membuat-image-reflection-otomatis.html">Image Reflection</a></li> <li><a href="http://wisencare.blogspot.com/2011/04/cara-membuat-site-map-pada-blogspot.html">Bikin Sitemap</a></li> </ul> <h5>Downloads</h5> <ul> <li><a href="http://wisencare.blogspot.com/2010/05/download-program-kasir-point-of-sale.html">Program Kasir</a></li> <li><a href="http://wisencare.blogspot.com/2011/03/download-photoshop-cs5-crack-keygen.html">Photoshop CS5 Full</a></li> <li><a href="http://wisencare.blogspot.com/2011/03/download-corel-draw-crack-keygen.html">Corel Draw X11</a></li> <li><a href="http://wisencare.blogspot.com/2011/03/download-autocad-2011-terbaru-full.html">Auto CAD 2011</a></li> <li><a href="http://wisencare.blogspot.com/2011/03/cara-membuat-logo.html">AAA Logo Full</a></li> <li><a href="http://wisencare.blogspot.com/2010/05/downloads.html">Serial Number Items</a></li> </ul> <h5>Hosting File</h5> <ul> <li><a href="http://wisencare.blogspot.com/2011/04/cara-hosting-file-di-ziddu-dan-promosi.html">Ziddu</a></li> </ul> </li> <li class="sub"> <h5>Bacaan Ringan</h5> <ul> <li></a><a href="http://wisencare.blogspot.com/2009/06/tujuh-alasan-kenapa-jimmy-tidak-suka.html">7 Alasan Dangdud</a></li> <li><a href="http://wisencare.blogspot.com/2009/11/kuningan-jawa-barat-tuyul-dan-kisah.html">Tuyuk Dari Kuningan</a></li> <li><a href="#url">Shoulder</a></li> <li><a href="http://wisencare.blogspot.com/2009/11/polygami-poliandri-poligami.html">Poligami</a></li> <li><a href="http://wisencare.blogspot.com/2009/07/kita-berasal-dari-satu-bintang-yang.html">Siapa Suruh Jakarta</a></li> <li><<a href="http://wisencare.blogspot.com/2009/06/teori-evolusi-untuk-mengusir-nyamuk.html">Mengusir Nyamuk</a></li> <li><a href="http://wisencare.blogspot.com/2009/06/apa-kata-jimmy- tentang-ganyang-malaysia.html">Ganyang Malaysia</a></li> </ul> </li> <li class="bottomLine"> <p>Apapun Yang anda bayangkan tentang Blog yang indah, belum tentu orang lain setuju. Sisi baiknya adalah: <a href="http://wisencare.blogspot.com">perbedaanlah yang membuat Indah.</a></p> </li> </ul>  </li> <li class="top-li"><a class="top-a" href="http://wisencare.blogspot.com/2009/09/contact-me.html">Contact Us</a></li> <li class="top-li"><a class="top-a last" href="http://www.facebook.com/masri.jakfar">Where to Find Us</a></li> </ul> </div> <div id="lowerContent"> <dl> <dt>Sabun Cair</dt> <dd>Jual Texapon, teksapon wilayah Bogor, Jakarta dan Bekasi (Jabotabek). Jika anda mencari bahan, bahan-bahan pembuat sabun cair, sunlight, sampo mobil, sabun ekonomi cream atau sabun colek ekonomi, Molto Pewangi pakaian, pengilap mobil, motor dan kendaran, pembersih lantai, kami jual bahan pembuatnya. Jika anda memiliki restoran, katering / catering yang berjibaku dalam cuci piring, kami jual sunlight, sabun cair cuci piring dalam bentuk curahan, dan kemasan.</dd> </dl> <dl> <dt>Butuh Produk Ini</dt> <dd>Anda memiliki doorsmer, buka usaha cuci motor/mobil atau memiliki salon mobil dan ingin produk sampo mobil/motor yang berkualitas tinggi dengan harga murah, maka anda mebutuhkan produk kami sekarang. Kualitas produk yang bermutu diperoleh dari tangan yang ahli, kami memiliki sarjana kimia yang mengerti betul bagaimana produk ini harus dibuat. Jika anda berminat<a href="http://wisencare.blogspot.com/2009/09/contact-me.html">Hubungi Kami.</a></dd> </dl> <dl> <dt>Bisnis Tambahan.</dt> <dd>Jika Anda Berminat menjalankan bisnis ini, <a href="http://wisencare.blogspot.com/2009/09/contact-me.html">Hubungi Kami.</a>mari kerjasama, kami siap memberikan bantuan bagi anda untuk mendapatkan bahan-bahan pembuatan produk-produk tersebut diatas sekaligus memberikan pelatihan cara-cara praktis membuat produk serta pemasarannya. </dd> </dl> </div> </div> <a href="#pulldown" id="pull">Daftar Isi Blog</a> <a href="#x" id="push">Close Menu</a>

Simpan HTML CSS anda dan lihat hasilnya. Hampir selesai kecuali Mengganti Link milik saya dengan link anda. Tapi jika anda orang yang murah hati, akan lebih baik meninggalkan satu saja link saya. Jika anda melakukan itu, informasikan ke saya dan saya akan link balik ke blog anda.

Selamat Mencoba...

source: http://wisencare.blogspot.com/2011/04/cara-membuat-pull-menu.html#x