Bismillah Gratis™

Software Komputer Dan Aplikasi Android Terbaru Full Version, Crack, Keygen, Serial Number, Patch, Loader, APK Mod, Game RePack, Game Highly Compressed Dan Tutorial Komputer Secara Gratis

Cari Blog Ini

21 Juli 2016

Beberapa Widgets Menu Bar Terbaru Keren Dan Unik Untuk Blog


Beberapa Widgets Menu Bar Terbaru Keren Dan Unik Untuk Blog kesayangan Sobat Bismillah Gratis™ Yang Sedang Belajar Blogging atau mengedit Blog kesayangannya.. Cara pemasangannya sangatlah gampang, Sobat Bismillah Gratis™ tinggal masuk ke...
  1. layout ( Tata Letak ). 
  2. Click on add a gadget ( Tambahkan Gadget ). 
  3. Pilih html / javascript. 
  4. Copy kode menubarnya di bawah ini. 
  5. Dan paste kode ke dalam html / javascript / gadget. 
  6. Simpan
Ada Beberapa Widgets Menu Bar Terbaru Keren Dan Unik Untuk Blog, Silahkan Pilih menu Bar yang Sobat Bismillah Gratis™ suka.

1. Black Navigation Menu Bar












Ini kode javascript nya :

 <style type="text/css">
#avd-nav {margin: 100px auto;list-style: none;width: 632px;height: 87px;overflow-y: hidden;}
#avd-nav li {float: left;}
#avd-nav li a {display: block;color: white;width: 120px;height: 61px;margin-top: 24px;text-decoration: none;text-align: center;border-top: 1px solid #bbb;border-bottom: 1px solid #555;}
#avd-nav li a span.myname {font: bold 17px/61px "Arial";color: #fff;text-transform: uppercase;cursor: pointer;position: relative;top: 0;transition: top .5s ease;text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);}
#avd-nav li a img {position: relative;top: 0;transition: top .5s ease;}
#avd-nav li a:hover {cursor: pointer;}
#avd-nav li a:hover img {top: -85px;}
#avd-nav li a:hover .myname {top: 85px;}
#avd-nav li:nth-child(1) a {background: #0088cc;border-radius: 5px 0 0 5px;border-left: 1px solid #bbb;}
#avd-nav li:nth-child(2) a {background: #cc6600;}
#avd-nav li:nth-child(3) a {background: #00cccc;}
#avd-nav li:nth-child(4) a {background: #00cc66;}
#avd-nav li:nth-child(5) a {background: #00cc66;} border-radius: 0 5px 5px 0;border-right: 1px solid #555;}
</style>
<div id="avd-nav">
<li> <a href="Link Target 1"><span class="myname">Homes</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgog0h0pypoYHqbDCGF5Rdtld3iK95U-9qMfluRGfJPgo5hz7AUr1GF21dKC638G6BtKxITgt9_GWKSbfjQsoFWvdcQKYeto4HyDQnHbSQ0xIO-gh8UpbsNAiAeBovbr28HRJI_ZcEgdAw/s1600/Arrows-Up-circular-icon.png" /> </a> </li>
<li> <a href="Link Target 2"> <span class="myname">About</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgog0h0pypoYHqbDCGF5Rdtld3iK95U-9qMfluRGfJPgo5hz7AUr1GF21dKC638G6BtKxITgt9_GWKSbfjQsoFWvdcQKYeto4HyDQnHbSQ0xIO-gh8UpbsNAiAeBovbr28HRJI_ZcEgdAw/s1600/Arrows-Up-circular-icon.png" /> </a> </li>
<li> <a href="Link Target 3"> <span class="myname"> Author</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgog0h0pypoYHqbDCGF5Rdtld3iK95U-9qMfluRGfJPgo5hz7AUr1GF21dKC638G6BtKxITgt9_GWKSbfjQsoFWvdcQKYeto4HyDQnHbSQ0xIO-gh8UpbsNAiAeBovbr28HRJI_ZcEgdAw/s1600/Arrows-Up-circular-icon.png" /> </a> </li>
<li> <a href="Link Target 4"> <span class="myname">Contact</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgog0h0pypoYHqbDCGF5Rdtld3iK95U-9qMfluRGfJPgo5hz7AUr1GF21dKC638G6BtKxITgt9_GWKSbfjQsoFWvdcQKYeto4HyDQnHbSQ0xIO-gh8UpbsNAiAeBovbr28HRJI_ZcEgdAw/s1600/Arrows-Up-circular-icon.png" /> </a> </li> </div> 

Keterangan :

  1. Link Target : Isi Link yang akan sobat tuju.
  2. Homes/About/Author/Contact : Ganti Sesuai Nama Link Yang Akan Dituju.

2. Animated call to action navigation menu bar





Ini kode javascript nya :

 <style type="text/css">
#avd-nav {margin: 100px auto;list-style: none;width: 632px;height: 87px;overflow-y: hidden;}
#avd-nav li {float: left;}
#avd-nav li a {display: block;color: white;width: 120px;height: 61px;margin-top: 24px;text-decoration: none;text-align: center;border-top: 1px solid #bbb;border-bottom: 1px solid #555;}
#avd-nav li a span.myname {font: bold 17px/61px "Arial";color: #fff;text-transform: uppercase;cursor: pointer;position: relative;top: 0;transition: top .5s ease;text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);}
#avd-nav li a img {position: relative;top: 0;transition: top .5s ease;}
#avd-nav li a:hover {cursor: pointer;}
#avd-nav li a:hover img {top: -85px;}
#avd-nav li a:hover .myname {top: 85px;}
#avd-nav li:nth-child(1) a {background: #0088cc;border-radius: 5px 0 0 5px;border-left: 1px solid #bbb;}
#avd-nav li:nth-child(2) a {background: #cc6600;}
#avd-nav li:nth-child(3) a {background: #00cccc;}
#avd-nav li:nth-child(4) a {background: #00cc66;}
#avd-nav li:nth-child(5) a {background: #00cc66;} border-radius: 0 5px 5px 0;border-right: 1px solid #555;}
</style>
<div id="avd-nav">
<li> <a href="#"><span class="myname">Homes</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgog0h0pypoYHqbDCGF5Rdtld3iK95U-9qMfluRGfJPgo5hz7AUr1GF21dKC638G6BtKxITgt9_GWKSbfjQsoFWvdcQKYeto4HyDQnHbSQ0xIO-gh8UpbsNAiAeBovbr28HRJI_ZcEgdAw/s1600/Arrows-Up-circular-icon.png" /> </a> </li>
<li> <a href="#"> <span class="myname">About</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgog0h0pypoYHqbDCGF5Rdtld3iK95U-9qMfluRGfJPgo5hz7AUr1GF21dKC638G6BtKxITgt9_GWKSbfjQsoFWvdcQKYeto4HyDQnHbSQ0xIO-gh8UpbsNAiAeBovbr28HRJI_ZcEgdAw/s1600/Arrows-Up-circular-icon.png" /> </a> </li>
<li> <a href="#"> <span class="myname"> Author</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgog0h0pypoYHqbDCGF5Rdtld3iK95U-9qMfluRGfJPgo5hz7AUr1GF21dKC638G6BtKxITgt9_GWKSbfjQsoFWvdcQKYeto4HyDQnHbSQ0xIO-gh8UpbsNAiAeBovbr28HRJI_ZcEgdAw/s1600/Arrows-Up-circular-icon.png" /> </a> </li>
<li> <a href="#"> <span class="myname">Contact</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgog0h0pypoYHqbDCGF5Rdtld3iK95U-9qMfluRGfJPgo5hz7AUr1GF21dKC638G6BtKxITgt9_GWKSbfjQsoFWvdcQKYeto4HyDQnHbSQ0xIO-gh8UpbsNAiAeBovbr28HRJI_ZcEgdAw/s1600/Arrows-Up-circular-icon.png" /> </a> </li> </div> 


3. Mega Drop Down Menu Bar

Ini kode javascript nya :

 <style type="text/css">
#multimenu{ background:#156AA6; overflow:hidden;
}
#multimenu ul { float:left; height:30px; list-style:none; overflow:hidden; margin:0; padding:0;
}
#multimenu li { float:left; text-shadow:1px 1px 2px #0066B3; padding:0;
}
#multimenu li a { background:#156AA6; color:#eee; display:block; font-weight:400; line-height:30px; border-left:1px solid #4B88B3; border-right:1px solid #043457; text-align:center; text-decoration:none; margin:0; padding:0 25px;
}
#multimenu li.depan a { border-left:none;
}
#multimenu li ul { background:#156AA6; height:auto; border:0; position:absolute; width:225px; z-index:80; box-shadow:0 1px 5px #034257; display:none; margin:0; padding:0;
}
#multimenu li li { display:block; float:none; width:225px; border-top:1px solid #4B88B3; border-bottom:1px solid #043457; margin:0; padding:0;
}
#multimenu li:hover li a { background:#156AA6;
}
#multimenu li ul a { display:block; height:30px; font-size:12px; font-style:normal; text-align:left; margin:0; padding:0 10px 0 15px;
}
#multimenu li a:hover,#multimenuli:hover > a { color:#fff;
}
#multimenu li:hover ul.hidden { display:block;
}
</style>
<nav id='multimenu'>
<ul>
<li class='depan'><a href='/'>Home</a></li>
<li><a href='#'>Widgets</a>
<ul class='' style='display: none;'>
<li><a href='#'>Dropdown</a></li>
<li><a href='#'>Dropdown</a></li>
<li><a href='#'>Dropdown</a></li>
<li><a href='#'>Dropdown</a></li>
</ul>
</li>
<li><a href='#'>Gadgets</a>
<ul class='' style='display: none;'>
<li><a href='#'>Dropdown</a></li>
<li><a href='#'>Dropdown</a></li>
</ul>
</li>
<li><a href='#'>Blogging Tips</a>
<ul class='' style='display: none;'>
<li><a href='#'>Dropdown</a></li>
<li><a href='#'>Dropdown</a></li>
<li><a href='#'>Dropdown</a></li>
</ul>
</li>
</ul>
</nav>
<script type="text/javascript">
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<script src='http://code.jquery.com/ui/1.8.21/jquery-ui.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
$('#multimenu li ul').removeClass('hidden');
$('#multimenu li').hover(function() {
$('ul', this).filter(':not(:animated)').slideDown(600, 'easeOutBounce');
}, function() {
$('ul', this).slideUp(600, 'easeInExpo');
});
//]]>
</script>
</script>


4. 3D Flying Book Navigation Menu Bar










Ini kode javascript nya :

<style type="text/css">
.menuHolder {margin:25px 0 100px 0; text-align:center; position:relative; height:40px; z-index:20; background:#069;
background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
background-image: -webkit-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
background-image: -o-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
background-image: linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
border-radius:8px;
box-shadow:0 15px 10px -8px rgba(0,0,0,0.4);
-moz-perspective: 100px;
-webkit-perspective: 100px;
-o-perspective: 100px;
perspective: 100px;
}
.menuHolder ul.nav li {display:inline-block; display:inline;}
.menuHolder ul.nav {padding:0; margin:0; list-style:none; display:inline-block;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.menuHolder ul.nav li {float:left; display:block; padding:0 4px;}
.menuHolder ul.nav > li {-moz-transform-style: preserve-3d;-webkit-transform-style: preserve-3d;}
.menuHolder ul.nav li a.top-a {display:block; text-decoration:none; margin-top:4px; float:left; height:36px;}
.menuHolder ul.nav li a.top-a b {display:block; padding:0 20px; font:normal 14px/30px arial, sans-serif; color:#fff;}
.menuHolder ul.nav li:hover a.top-a {background:#09c; border-radius:8px 8px 0 0;
-moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
}
.menuHolder ul.nav div {position:absolute; top:40px; left:4px; background:#09c; padding:5px 0 10px 0;
border-radius:0 0 15px 15px;
box-shadow:0 15px 10px -8px rgba(0,0,0,0.4);
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
-moz-transform-origin: 0px 0px;
-moz-transform: rotateX(-90deg);
-webkit-transform-origin: 0px 0px;
-webkit-transform: rotateX(-90deg);
-o-transform-origin: 0px 0px;
-o-transform: rotateX(-90deg);
transform-origin: 0px 0px;
transform: rotateX(-90deg);
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.menuHolder ul.nav div.left {left:auto; right:4px;}
.menuHolder ul.nav div ul {padding:10px 0; list-style:none; width:140px; margin:10px 5px 0 5px; float:left; display:inline; text-align:left; background:#fff; border-radius:6px;
-moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
}
.menuHolder ul.nav div ul.colLeft {margin-left:10px;}
.menuHolder ul.nav div ul.colRight {margin-right:10px;}
.menuHolder ul.nav div ul.colSingle {margin-left:10px; margin-right:10px;}
.menuHolder ul.nav div ul li {float:left; border-bottom:1px dotted #09c; margin:0 5px 0 5px; display:inline;}
.menuHolder ul.nav div ul li:last-child {border:0;}
.menuHolder ul.nav div ul li a {display:block; width:105px; text-decoration:none; font:13px/16px arial, sans-serif; color:#069; margin:0; padding:4px 0 4px 15px; background:transparent url(droplistcolumns/arrow.gif) no-repeat left center;}
.menuHolder ul.nav div ul li a:hover {color:#09c; background:transparent url(droplistcolumns/arrow.gif) no-repeat 1px center;}
.menuHolder ul.nav div.col1 {width:160px;}
.menuHolder ul.nav div.col2 {width:310px;}
.menuHolder ul.nav div.col3 {width:460px;}
.menuHolder ul.nav li:hover div {
-moz-transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
transform: rotateX(0deg);
}
</style>
<div id="info">
<div class="menuHolder">
<ul class="nav">
<li><a class="top-a" href="#url"><b>Home</b></a></li>
<li><a class="top-a" href="#url"><b>Blogger</b></a>
<div class="col3">
<ul class="colLeft">
<li><a href="#url">blogger widget</a></li>
<li><a href="#url">blogger design</a></li>
<li><a href="#url">blogger tips</a></li>
<li><a href="#url">blogger seo</a></li>
<li><a href="#url">blogger templates</a></li>
</ul>
<ul class="col">
<li><a href="#url">Related post</a></li>
<li><a href="#url">Popular post</a></li>
<li><a href="#url">Recent Post</a></li>
<li><a href="#url">Chat widget</a></li>
</ul>
<ul class="colRight">
<li><a href="#url">navigation menu</a></li>
<li><a href="#url">Side menu</a></li>
<li><a href="#url">Horizontal menu</a></li>
<li><a href="#url">Vertical menu</a></li>
</ul>
</div>
</li>
<li><a class="top-a" href="#url"><b>Website SEO </b></a>
<div class="col2">
<ul class="colLeft">
<li><a href="#url">Header</a></li>
<li><a href="#url">Footer</a></li>
<li><a href="#url">Post</a></li>
<li><a href="#url">Links</a></li>
<li><a href="#url">Menu</a></li>
</ul>
<ul class="colRight">
<li><a href="#url">Mobile </a></li>
<li><a href="#url">Mobile traffic</a></li>
<li><a href="#url">Mobile seo</a></li>
<li><a href="#url">small screen</a></li>
</ul>
</div>
</li>
<li><a class="top-a" href="#url"><b>Contact</b></a>
<div class="col1">
<ul class="colSingle">
<li><a href="#url">Email ID</a></li>
<li><a href="#url">Mobile No.</a></li>
<li><a href="#url">Contact Form</a></li>
<li><a href="#url">My email</a></li>
</ul>
</div>
</li>
<li><a class="top-a" href="#url"><b>Privacy</b></a></li>
<li><a class="top-a" href="#url"><b>Benefits</b></a>
<div class="col2 left">
<ul class="colLeft">
<li><a href="#url">Google traffic</a></li>
<li><a href="#url">Permanent Links</a></li>
<li><a href="#url">Alexa Rank</a></li>
<li><a href="#url">High page rank</a></li>
</ul>
<ul class="colRight">
<li><a href="#url">Snow Hotel</a></li>
<li><a href="#url">The Snowman</a></li>
<li><a href="#url">Ice Cavern</a></li>
<li><a href="#url">Ski Inn</a></li>
</ul>
</div>
</li>
</ul>
</div>
<br /><br /><br /><br /><br /><br /><br /><br />
</div> <!-- end info -->


5. Blue White





Ini kode javascript nya :

<style type="text/css">
#menu9 ul {
list-style:none;
font-family: "Lucida Sans Unicode", sans-serif;
font-size: 40px;
letter-spacing: -3px;
line-height: 1.2em;
float:left;
clear:both;
margin:20px;
}
#menu9 ul li{
float:left;
}
#menu9 ul li a{
display:block;
text-decoration:none;
padding:5px 10px 5px 10px;
background-color:#00adef;
width:170px;
text-align:center;
}
#menu9 ul li a span{
display:block;
}
#menu9 ul li a span.title{
color:#fff;
border-bottom:2px solid #fff;
padding-bottom:5px;
}
#menu9 ul li a:hover{
}
#menu9 ul li a:hover span.title{
color:#074a64;
border-bottom:2px solid #0b6f95;
}
#menu9 ul li a span.text{
padding:0px 5px;
font-size: 14px;
font-weight: bold;
letter-spacing: normal;
line-height: 1.4em;
color:#fff;
background-color:#074a64;
visibility:hidden;
}
#menu9 ul li a:hover span.text{
line-height: 3.4em;
visibility:visible;
}
</style>


<h2>Menu 9</h2>
<div id="menu9">
<ul>
<li><a href="">
<span class="title">About</span>
<span class="text">Who we are</span>
</a>
</li>
<li><a href="">
<span class="title">Portfolio</span>
<span class="text">What we do</span>
</a>
</li>
<li><a href="">
<span class="title">Blog</span>
<span class="text">What we talk about</span>
</a>
</li>
<li><a href="">
<span class="title">Contact</span>
<span class="text">How to get in touch</span>
</a>
</li>
</ul>
</div>


Cukup itu saja dulu Widgets Menu Bar Terbaru Keren Dan Unik Untuk Blog, Semoga bermanfaat untuk seluruh sobat Bismillah Gratis™.



Tidak ada komentar:

Posting Komentar

Sitemap