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/AVvXsEhUKCoibGeiRZC_J68EP7RuJT-uljSlGksb2qNKTXHJTR2_YLcl_OhvJykoXN7y5Hh6Crs53WKHTkpw_g3Fm17o545E2XToaPW-2erEoXwWj91Q8QfKYfdw2GdFiymLARB3Z4itlB_XW_Y/') 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/AVvXsEg0Pl0hvKMOmqVnzU6DYKQklmMXhZFi-HsEw-CUj-85BZax3rlN5POiyqMePYvDu0ko4ZvKyW1AFYZX8b0J03bC4xuc9vozitRR0Gmorv1hlA0aSZENeMHINStJNixnNouEQhAYjxk_XU8/') 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 ^_^
Posting Komentar