Tampilkan postingan dengan label Menu Hoizontal. Tampilkan semua postingan
Tampilkan postingan dengan label Menu Hoizontal. Tampilkan semua postingan

Jumat, 15 Juli 2016

Baiklah pada kesempatan kali ini saya akan memberikan tutorial blogger yaitu cara membuat '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://lh6.googleusercontent.com/_Y6BnQr0IkcE/TdIDtbBKoZI/AAAAAAAAAEU/EpNRgBD-2iE/menu_line.png') 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://lh6.googleusercontent.com/_Y6BnQr0IkcE/TdIDsB8rptI/AAAAAAAAAEA/cWsS-64Bi7c/lavalamp.png') 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

Baiklah pada kesempatan kali ini saya akan berbagi lagi mengenai cara membuat 'Menu Horizontal Lavalamp Special Dark + Search Box'

 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.


/* lavalampv2 menu */
.lavalampv2  {margin:0;
    position: relative;
    padding:15px;
 height: 20px;
font-family: PT Sans Narrow;
}
.lavalampv2 a {font-weight:bold;
text-transform:uppercase;font-weight:bold;
    color: #aaa;font-size:14px;
    line-height: 20px;
}
.lavalampv2 a:hover {
color:#fff;text-shadow: 0 1px 0 #000;
    }
.lavalampv2 ul {
    margin: 0;
    padding: 0;
    z-index: 300;
    position: absolute;
}
.lavalampv2 ul li {
    list-style: none;
    float:left;
    text-align: center;
    }
.lavalampv2 ul li a {
    padding: 0 20px;
    text-align: center;
    }
.lavalamp {
    position: absolute;
    top:8px;
    z-index:50;
    width:70px;
    height:30px;
-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;
background : rgba(5,171,224, 0.8);border:1px solid rgba(5,171,224,0.9);
transition: all .4s ease-in-out;-webkit-transition: all .4s ease-in-out;-moz-transition: all .4s ease-in-out;
}
.sepecialdark {background: rgb(30,30,30);background:-moz-linear-gradient(top, rgba(30,30,30,1) 0%, rgba(15,15,15,1) 100%);
background:-webkit-linear-gradient(top, rgba(30,30,30,1) 0%, rgba(15,15,15,1) 100%);border: 1px solid rgba(0,0,0,.20);
}

/* e-searchbox */
#e-searchbox{float:right;padding:0;margin-top:-6px;}
#search {}
#search input[type="text"] {background:rgba(5,171,224, 0.8) url(http://2.bp.blogspot.com/-El7-211Pt7o/T5HBuBrNztI/AAAAAAAAAow/bV7f0allh4Q/s1600/cari.png) no-repeat 10px 6px;font:normal 12px century gothic;color:#ddd;width:150px;padding:6px 15px 6px 35px;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;
border:1px solid rgba(5,171,224,0.9);-webkit-box-shadow:0px 1px 0px rgba(255, 255, 255, 0.3), inset 0px 1px 3px rgba(0, 0, 0, 0.2);-moz-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3), inset 0px 1px 3px rgba(0, 0, 0, 0.2);box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3), inset 0px 1px 3px rgba(0, 0, 0, 0.2);
-webkit-transition: all 0.8s ease 0s;-moz-transition: all 0.8s ease 0s;-o-transition: all 0.8s ease 0s;transition: all 0.8s ease 0s;}

#search input[type="text"]:focus {background:rgba(0, 0, 0, 0.5) url(http://2.bp.blogspot.com/-El7-211Pt7o/T5HBuBrNztI/AAAAAAAAAow/bV7f0allh4Q/s1600/cari.png) no-repeat 10px 6px;width:190px;border:1px solid rgba(5,171,224,0.9);
-webkit-box-shadow:inset 0px 1px 4px rgba(5,171,224,1);-moz-box-shadow:inset 0px 1px 4px rgba(5,171,224,1);box-shadow:inset 0px 1px 4px rgba(5,171,224,1);}

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

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='http://ut2a-4down-blogspot-com.googlecode.com/files/lavalamp_specialdark.js' type='text/javascript'/>

6. Selanjutnya letakkan kode berikut, di atas kode header-wrapper (sesuaikan template) Masing-masing :

<div class='lavalampv2 sepecialdark'>
<ul>
<li class='active'><a href='/'><span style='color:#eee;text-shadow:0 1px 0 #000;'>Home</span></a></li>
<li><a href='URL-HERE'>Forum</a></li>
<li><a href='/search?max-results=20'>Archive</a></li>
<li><a href='URL-HERE'>SiteMap</a></li>
<li><a href='URL-HERE'>Contact</a></li>
<li><a href='URL-HERE'>Link Exchange</a></li>
<li><a href='URL-HERE'>Guest Book</a></li>
</ul>
 <div class='lavalamp'/>

<div id='e-searchbox'><form action='/search' id='search' method='get'>
<input name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Find article here&quot;;}' onfocus='if (this.value == &quot;Find article here&quot;) {this.value = &quot;&quot;;}' size='40' type='text' value='Find article here'/>
</form></div>

</div>

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