Menu Horizontal Dark Lavalamp With jQuery
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/AVvXsEhMfnjn0r7tvJu2B40o3UlyO-vKtspI4gFmH9AJkmxADfm6XmfZvIsAojfM2Av9l4SzMETK0m410iWapms5lVPIptCmfPvKzUjGs8U7EyLzoXAs6ipMSRBDwNnL_NVOD80h81sxMOj1ttE/') 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/AVvXsEijpOKVOqi8EfXCH0_V7PkgtOZfCUppuSxn4BpGVQvZNwyvccbpjrfgwsHWofdDgboMqUwMMAcGIH0ZacPxJ0gVmnx4PHBJmajlsu0kZkIizIgijKgEwlkOnglAs-F6DSV5TdHpOxO1fCc/') 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... :)
Original By Ut2a-4down
Comments
Post a Comment
-Berkomentarlah yang baik dan rapi.
-Menggunakan link aktif akan dihapus.