Menu Horizontal Dark Lavalamp With jQuery

Baiklah pada kesempatan kali ini saya akan memberikan tutorial blogger yaitu cara membuat 'Menu Horizontal Dark Lavalamp With jQuery', dimana pada postingan saya yang lalu pernah juga memberikan Cara Membuat 'Menu Horizontal Dark With Sound jQuery Ala UTta'.

Jika sobat ingin melihat contohnya silahkan klik disini.

Jika sobat tertarik ingin mencobanya, silahkan ikuti langkah-langkah berikut.
1. Login ke Akun Blogger anda masing-masing
2. Klik Design atau Rancangan, kemudian pilih edit html
3. Centang Expand Widget Template (saya anjurkan download dahulu template anda)
4. Cari kode : ]]></b:skin> , Jika Sudah Ketemu, letakkan Kode CSS berikut tepat diatasnya.

/* Lavalamp-Menu */
.sf-menu li:hover ul, .sf-menu li.sfHover ul { top: 2.5em; z-index: 400; }
ul.sf-menu li:hover li ul, ul.sf-menu li.sfHover li ul { top: -999em; z-index: 400; }
ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul { top: 0; }
ul.sf-menu li li:hover li ul, ul.sf-menu li li.sfHover li ul { top:    -999em; }
ul.sf-menu li li li:hover ul, ul.sf-menu li li li.sfHover ul { top: 0; }
.sf-menu { position: relative; margin:0 5px 5px; padding:0; list-style: none;clear:both; float: left;margin-bottom:1em; background: url('url') no-repeat;border-bottom:3px solid #111;border-top:3px solid #111;width: 960px; z-index: 400; }
.sf-menu a { display: block; position: relative; text-decoration:none; color: #fff; padding:15px 10px 0px 10px; height:30px; text-decoration: none; text-shadow: 1px 1px 1px #000; font-size:15px;font-weight: normal; float :left; }
.sf-menu li { float: left; position: relative;font-family:Advent Pro,serif;background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR4svh7RuGulcNGsdFFayoLnSYFGdQXpG7RyEbAu4giThPjS7o19yzHnQ7V-JL8-xPFWo8n21uy2NoWkW3z6TKQUPTmOAkwYh_yGmLbS8gHqa7F6SwKodbW941Zbawd-PELLb265fpNdo/') no-repeat; }
.sf-menu li ul li ul { left: 212px; margin-top: 0px;}
.sf-menu li a:hover {color: #00b4ff; }
.sf-menu li:hover, .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {background:rgba(5,5,5,0.55);outline: 0; }
ul.sf-menu li.backLava { position: absolute; z-index: 3; background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCN3BUagyV5nReVlaLAI3lYAREcQchOr8sr3cO0TekmCbsUbXqVC8I2EqIYsHVIYRqA6hnHF5pkxq07eripo6lU7khU2STZks_QSqcmyU8u7V7v5zR1ewmU6tvYyr5FZCU7o6iKRBjyL0/') no-repeat; background-position: center 0px; padding: 0; height: 16px; margin-top: 42px;}

5. Langkah selanjutnya letakkan kode script berikut diatas kode </head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

<script charset='utf-8' src='http://javatemplates-project.googlecode.com/files/jquery.lavalamp.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
jQuery(function(){
        jQuery.noConflict();
        var active_subpage = jQuery('ul.sf-menu ul li.current-cat, ul.sf-menu ul li.current_page_item').parents('li.top-level').prevAll().length;
        if (active_subpage) jQuery('ul.sf-menu').lavaLamp({ startItem: active_subpage });
        else jQuery('ul.sf-menu').lavaLamp();           
        });
//]]>
</script>

6. Selanjutnya letakkan kode berikut, di bawah kode Head-nav (sesuaikan template) Masing-masing :

<!-- Start Menu Lavalamp -->
<ul class='sf-menu'>
<li><a expr:href='data:blog.homepageUrl' style='background:#000;color:#00b4ff;'>Home</a></li>
<li><a href='URL-HERE' target='_blank' title='Site Maps'>Site Maps</a></li>
<li><a href='URL-HERE' target='_blank' title='Tips-Triks'>Tips-Triks</a></li>
<li><a href='URL-HERE' target='_blank' title='Handphone'>Handphone</a></li>
<li><a href='URL-HERE' target='_blank' title='Info UniQx'>Info UniQx</a></li>
<li><a href='URL-HERE' target='_blank' title='Entertainment'>Entertainment</a></li>
<li><a href='URL-HERE' target='_blank' title='Blogger Template'>Blogger Template</a></li>
<li><a href='URL-HERE' target='_blank' title='TV Online'>TV Online</a></li>
<li><a href='URL-HERE' target='_blank' title='Link Banner'>Link Exchange</a></li>
<li><a href='URL-HERE' target='_blank' title='Buku Tamu'>Guest Book</a></li>
</ul>
<div style='clear:both;'/>

7. Silahkan anda priview dulu, apabila semua berjalan dengan sempurna barulah anda save template.

Selamat mencoba, dan kembangkan sesuai keinginan masing-masing... :)

Jika ada pertanyaan jangan sungkan untuk meninggalkan jejak di kotak komentar trim atas kunjungannya ^_^ Please rate this article: