Menu responsive Simple

Sebuah menu horizontal minimalis dan ringan dibangun dengan CSS murni. Menu ini juga responsif, mengubah dirinya menjadi menu vertikal pada perangkat mobile dengan layar kecil.



DEMO

• Home


• Products


• About


• Contact

Cara membuat menu responsive simple:

1. Login blog

2. Template > edit html

3. Letakkan kode css berikut di atas ]]></b:skin>

@import url(http://fonts.googleapis.com/css?family=Open+Sans:700);

#cssmenu {

  background: #f96e5b;

  width: auto;

}

#cssmenu ul {

  list-style: none;

  margin: 0;

  padding: 0;

  line-height: 1;

  display: block;

  zoom: 1;

}

#cssmenu ul:after {

  content: ' ';

  display: block;

  font-size: 0;

  height: 0;

  clear: both;

  visibility: hidden;

}

#cssmenu ul li {

  float: left;

  display: block;

  padding: 0;

}

#cssmenu ul li a {

  color: #ffffff;

  text-decoration: none;

  display: block;

  padding: 15px 25px;

  font-family: 'Open Sans', sans-serif;

  font-weight: 700;

  text-transform: uppercase;

  font-size: 14px;

  position: relative;

  -webkit-transition: color .25s;

  -moz-transition: color .25s;

  -ms-transition: color .25s;

  -o-transition: color .25s;

  transition: color .25s;

}

#cssmenu ul li a:hover {

  color: #333333;

}

#cssmenu ul li a:hover:before {

  width: 100%;

}

#cssmenu ul li a:after {

  content: '';

  display: block;

  position: absolute;

  right: -3px;

  top: 19px;

  height: 6px;

  width: 6px;

  background: #ffffff;

  opacity: .5;

}

#cssmenu ul li a:before {

  content: '';

  display: block;

  position: absolute;

  left: 0;

  bottom: 0;

  height: 3px;

  width: 0;

  background: #333333;

  -webkit-transition: width .25s;

  -moz-transition: width .25s;

  -ms-transition: width .25s;

  -o-transition: width .25s;

  transition: width .25s;

}

#cssmenu ul li.last > a:after,

#cssmenu ul li:last-child > a:after {

  display: none;

}

#cssmenu ul li.active a {

  color: #333333;

}

#cssmenu ul li.active a:before {

  width: 100%;

}

@media screen and (max-width: 768px) {

  #cssmenu ul li {

    float: none;

  }

  #cssmenu ul li a {

    width: 100%;

    -moz-box-sizing: border-box;

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

  }

  #cssmenu ul li a:after {

    display: none;

  }

  #cssmenu ul li a:before {

    height: 1px;

    background: #ffffff;

    width: 100%;

    opacity: .2;

  }

  #cssmenu ul li.last > a:before,

  #cssmenu ul li:last-child > a:before {

    display: none;

  }

}

anda bisa mengganti warna menu pink menjadi warna lain.

simpan template



3. Letakkan kode html berikut di layout

<div id='cssmenu'>

<ul>

   <li class='active'><a href='index.html'><span>Home</span></a></li>

   <li><a href='#'><span>Disclaimer</span></a></li>

   <li><a href='#'><span>About</span></a></li>

   <li class='last'><a href='#'><span>Contact</span></a></li>

</ul>

</div>

Ganti kode berwarna dengan url dan menu url anda.



4. simpan



Semoga tutorialnya bermanfaat.

Orange Menu Vertical

Tutorial blog kali ini tentang cara membuat orange menu vertikal.

DEMO

• Home


• Products


• About


• Contact

 Dan berikut ini caranya:



1. Login blog

2. Template > edit html dan letakkan kode css berikut di atas ]]></b:skin>

#cssmenu {

  width: 200px;

  border-style: solid solid none solid;

  border-color: #D76100;

  border-size: 1px;

  border-width: 1px;

  padding: 0px;

}

#cssmenu ul {

  margin: 0px;

  padding: 0px;

  list-style: none;

}

#cssmenu li a {

  height: 32px;

  height: 24px;

  text-decoration: none;

  font-weight: normal;

  color: #9E3C02;

  display: block;

  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij6W_S4sODte30myNe30LDd0xrSZzXeOeLJmdVZVFX1kK5tbBrGHPjzO6DBkC5yUtVi6h5r8R1KVwoZ64uGP_pqemuA4LlJN5oJ8jyEI0cMSboBtbBQpXBNlIMIp3IcnTFPslgaF_KH2U/s1600/mig33eaglemenu4.gif);

  padding: 8px 0 0 30px;

}

#cssmenu li a:hover {

  color: #fff;

  background: url(menu4.gif) 0 -32px;

  padding: 8px 0 0 30px;

}

#cssmenu li a:active {

  color: #fff;

  background: url(menu4.gif) 0 -64px;

  padding: 8px 0 0 30px;

}

simpan template

3. Letakkan kode html berikut di layout

<div id='cssmenu'>

<ul>

   <li class='active'><a href='index.html'><span>Home</span></a></li>

   <li><a href='#'><span>Products</span></a></li>

   <li><a href='#'><span>About</span></a></li>

   <li class='last'><a href='#'><span>Contact</span></a></li>

</ul>

</div>

Ganti kode yang berwarna dengan url dan menu yang anda inginkan



4. selesai

Fashion Style Navigation Menu Blog

Menu navigasi yang saya share berikut cocok untuk blog girly, fashion.

Karena hover menu berwarna pink.

LIVE DEMO

Dan berikut caranya:

1. Login blog 


2. Layout 


3. Add gadget "html/javascript" 


4. Simpan kode berikut

<style type="text/css">
#menu8 ul {
list-style:none;
font-family: Helvetica, Arial, sans-serif;
font-size: 44px;
letter-spacing: -2px;
line-height: 1.2em;
float:left;
clear:both;
margin:20px;
border:5px solid #fff;
}
#menu8 ul li{
float:left;
}
#menu8 ul li a{
display:block;
text-decoration:none;
padding:5px 10px 5px 10px;
background-color:#fff;
width:170px;
border-left:6px solid #888;
}
#menu8 ul li a span{
display:block;
}
#menu8 ul li a span.title{
color:#888;
}
#menu8 ul li a:hover{
border-left:6px solid #000;
}
#menu8 ul li a:hover span.title{
color:#df246f;
}
#menu8 ul li a span.text{
padding:0px 5px;
font-size: 14px;
font-style: italic;
font-weight: normal;
letter-spacing: normal;
line-height: 1.4em;
visibility:hidden;
color:#df246f;
text-align:right;
border-top:5px solid #000;
}
#menu8 ul li a:hover span.text{
visibility:visible;
}
</style>
<div id="menu8">
<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>

King Of Black Navigation Menu Bar Widget For Blogger

King Of Black Navigation Menu dapat di gunakan pada blog, wordpress dan semua website lainnya.

Karena kode scriptnya murni css dan html.

LIVE DEMO

1. Login blog


2. Layout


3. Add gadget "html/javascript"


4. Simpan kode berikut

<style type="text/css">
/* this code is by www.mig33eagle.com Main */
#menu{
width: 100%;
margin: 0;
padding: 10px 0 0 0;
list-style: none;
background: #111;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-border-radius: 50px;
border-radius: 50px;
-moz-box-shadow: 0 2px 1px #9c9c9c;
-webkit-box-shadow: 0 2px 1px #9c9c9c;
box-shadow: 0 2px 1px #9c9c9c;
}
#menu li{
float: left;
padding: 0 0 10px 0;
position: relative;
}
#menu a{
float: left;
height: 25px;
padding: 0 25px;
color: #999;
text-transform: uppercase;
font: bold 12px/25px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#menu li:hover > a{
color: #fafafa;
}
*html #menu li a:hover{ /* IE6 */
color: #fafafa;
}
#menu li:hover > ul{
display: block;
}
/* Sub-menu */
#menu ul{
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
top: 35px;
left: 0;
z-index: 99999;
background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-border-radius: 5px;
border-radius: 5px;
}
#menu ul li{
float: none;
margin: 0;
padding: 0;
display: block;
-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}
#menu ul li:last-child{
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#menu ul a{
padding: 10px;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
*html #menu ul a{ /* IE6 */
height: 10px;
width: 150px;
}
*:first-child+html #menu ul a{ /* IE7 */
height: 10px;
width: 150px;
}
#menu ul a:hover{
background: #0186ba;
background: -moz-linear-gradient(#04acec, #0186ba);
background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background: -webkit-linear-gradient(#04acec, #0186ba);
background: -o-linear-gradient(#04acec, #0186ba);
background: -ms-linear-gradient(#04acec, #0186ba);
background: linear-gradient(#04acec, #0186ba);
}
#menu ul li:first-child a{
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
#menu ul li:first-child a:after{
content: '';
position: absolute;
left: 30px;
top: -8px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #444;
}
#menu ul li:first-child a:hover:after{
border-bottom-color: #04acec;
}
#menu ul li:last-child a{
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
/* Clear floated elements */
#menu:after{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html #menu { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */
</style>


<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function() {
if ($.browser.msie && $.browser.version.substr(0,1)<7)
{
$('li').has('ul').mouseover(function(){
$(this).children('ul').show();
}).mouseout(function(){
$(this).children('ul').hide();
})
}
});
</script>

<ul id="menu">
<li><a href="#">Home</a></li>
<li>
<a href="#">Categories</a>
<ul>
<li><a href="#">CSS</a></li>
<li><a href="#">Graphic design</a></li>
<li><a href="#">Development tools</a></li>
<li><a href="#">Web design</a></li>
</ul>
</li>
<li><a href="#">Work</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>

Edit url dan nama url sesuai yang sobat inginkan!

Cute Yellow Navigation Menu Bar Blog

Cute Yellow Navigation Menu untuk Blog, contoh sepeti gambar di atas.

Detail penampakan  Cute Yellow Navigation Menu:



LIVE DEMO



Kode cssnya sebagai berikut, simpan di layout sobat.

<style type="text/css">
#menu6 ul {
list-style:none;
font-family: "Trebuchet MS", sans-serif;
font-size: 28px;
font-weight: bold;
letter-spacing: -1px;
line-height: 1.1em;
float:left;
clear:both;
margin:20px;
border:4px groove #ffe430;
}
#menu6 ul li{
float:left;
}
#menu6 ul li a{
display:block;
text-decoration:none;
padding:10px 10px 5px 10px;
color:#fff;
background-color:#ffc730;
width:170px;
}
#menu6 ul li a span{
display:block;
}
#menu6 ul li a span.title{
border-bottom:2px solid #ffc730;
}
#menu6 ul li a:hover{
background-color:#fff;
}
#menu6 ul li a:hover span.title{
color:#ffc730;
border-bottom:2px solid #ffe430;
}
#menu6 ul li a span.text{
padding:0px 5px;
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
font-style: italic;
font-weight: normal;
letter-spacing: normal;
line-height: 1.4em;
background-color:#ffc730;
visibility:hidden;
color:#fff;
}
#menu6 ul li a:hover span.text{
visibility:visible;
}
</style>
<div id="menu6">
<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>

Cara membuat menu navigasi kwick pada blog

Ga asing bagi blogger yang infonya pada terupdate tentang modif blog dan tutorialnya.

Bagi yang blom tau, coba menu navigasi kwick ney, keren ko...

sumpaa ヽ(ヅ)ノ

1. Login blog

2. Template

3. Letakkan kode css berikut di atas ]]></b:skin>

.kwicks{height:50px;list-style:none;margin:0;padding:0;position:relative;width:840px;z-index:2

}

.kwicks li{cursor:pointer;display:block;float:left;height:50px;overflow:hidden;padding:0;width:120px;z-index:2}

.kwicks li a{background-image:url(http://4.bp.blogspot.com/-e1c5hdvd0MQ/TbgSHi-7EEI/AAAAAAAAAzs/Y9aTBHEgh84/s1600/menu%2Bjquery%2Bpelajaran%2Bblog.jpg

);background-repeat:no-repeat;cursor:pointer;display:block;height:50px;outline:none;text-indent:-9999px;z-index:2}

#kwick1 a:hover{background-position:0 -50px!important}

#kwick2 a{background-position:-190px 0}

#kwick2 a:hover{background-position:-190px -50px!important}

#kwick3 a{background-position:-380px 0}

#kwick3 a:hover{background-position:-380px -50px!important}

#kwick4 a{background-position:-570px 0}

#kwick4 a:hover{background-position:-570px -50px!important}

#kwick5 a{background-position:-760px 0}

#kwick5 a:hover{background-position:-760px -50px!important}

#kwick6 a{background-position:-950px 0}

#kwick6 a:hover{background-position:-950px -50px!important}

.kwicks li ul a{float:left;width:12em}

.kwicks ul ul{top:auto}

.kwicks li ul ul{left:12em;margin:0 0 0 10px}

.kwicks li:hover ul,#nav li li:hover ul,#nav li li li:hover ul,#nav li li li li:hover ul{display:block}

4. Kemudian letakkan kode script jquery di atas </head>

<script src='http://mig33eaglemenu.googlecode.com/files/jquery-1.3.2.min.js' type='text/javascript'/>

<script src='http://mig33eaglemenu.googlecode.com/files/jquery.kwicks-1.5.1.pack.js' type='text/javascript'/>

<script src='http://mig33eaglemenu.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'/>

<script type='text/javascript'>

$().ready(function() {

$(&#39;.kwicks&#39;).kwicks({

max : 205,

spacing : 5

});

});

</script>

@hilangkan script jquery berwarna merah jika sobat sudah memasang jquery versi brapapun.



5. Selanjutnya add gadget dan pilih html/javascript dan letakkan kode berikut kemudian simpan

<center><div class='kwickswrap'>

<ul class='kwicks'>

<li id='kwick1'><a href='http://www.mig33eagle.com/' title='Mig33 Eagle'>Home</a></li>

<li id='kwick3'><a href='http://mig33eagle.com/2012/09/sitemap.html' title='Sitemap'>Sitemap</a></li>

<li id='kwick4'><a href='http://mig33eagle.com/2012/02/link-exchange.html' title='Link Exchange'>Exchange</a></li>

<li id='kwick5'><a href='http://www.123contactform.com/form-366627/Ayuningnareswari' title='contact us'>Contact</a></li>

<li id='kwick6'><a href='http://www.mig33eagle.com/2011/12/eagle-bot-flooder-multy-flood.html' title='Info EBF'>Info EBF</a></li>

</ul>

</div></center>

 @Ubah url sesuai keinginan sobat.



Demikian tutorial blog cara membuat menu navigasi kwick, semoga infonya berguna!

Cara membuat menu slide pada sisi blog

Banyak sekali menu blog yang dapat di modifijasi sesuai selera sobat.

Pada kesempatan kali ini saya akan share cara membuat menu blog slide yang berada pasa sisi halaman blog.

Jika sobat tertarik ingin mencobanya, simak cara2nya:



1. Login blog

2. Layout dan add gadget "html/javascript"

3. Letakkan script berikut dan simpan

<script language="JavaScript1.2" src="http://mig33eaglemenu.googlecode.com/files/slidemenu.js"></script>

<script>

resizereinit=true;

menu[3] = {

id:'menu3',

bartext:'MENU BLOG',

menupos:'left',

kviewtype:'fixed',

barbgcolor:"#00ff00",

barcolor:"#000000",

barfontweight:"bold",

bordercolor:'#000000',

hdingbgcolor:"#ffffff",

fontsize:'80%',

linkheight:20 ,

hdingwidth:210 ,

menuItems:[

["Home", "http://www.mig33eagle.com/", "_self"],

["My Facebook", "http://www.facebook.com/mig33eagle",""],

["Berita", "http://www.okezone.com/", ""],

["Kaskus", "http://www.kaskus.us", ""],

["My Profile", "http://www.blogger.com/profile/08032455232856850277", ""],

["free Download", "http://www.download.com", ""],

["Tips And Trics Blog", "http://www.mig33eagle.com/", ""],

["Bisnis Uang Blog", "http://www.bisnis.com/", ""],

["free game", "http://freegamepick.com", ""],

["Back To Top", "#", ""] //tidak ada tanda koma pada akhir entry

]};

make_menus();

</script>

@Ubah url sesuai keinginan sobat



Demikian Cara membuat menu slide pada sisi blog.

SEMOGA BERMANFAAT...

Cara Membuat Menu Horisontal colourful

Menu horisontal colourful yang kali saya share adalah seperti gambar di atas.

Sobat boleh ganti warna sesuai keinginan sobat.

Dan berikut ini caranya:

1. Login blog

2. Layout

3. Add gadget html/javascript

4. Letakkan kode berikut dan simpan

<style>
#menuwrapperpic{margin:0 auto;padding:0 auto;}
#menuwrapper{width:980px;height:27px;margin:0 auto}
.clearit{clear:both;height:0;line-height:0.0;font-size:0}
#menubar{width:100%}
#menubar,#menubar ul{list-style:none;font-family:Arial, serif;margin:0;padding:0}
#menubar a{display:block;text-decoration:none;font-size:14px;font-weight:700;text-transform:uppercase;color:#333;padding:8px 8px 8px}
#menubar a.trigger{padding:8px 20px 8px 20px;border-right:1px solid #B2B2B2;}
#menubar a.trigcome{padding:8px 18px 8px 20px;}
#menubar li{float:left;position:static;width:auto}
#menubar li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a{background-color:#008E00;color:#fff;-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;-moz-box-shadow:0 2px 4px rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.6); }
#menubar a.trighome{padding:8px 20px 8px 20px;border-right:1px solid #B2B2B2;background:#ff9900;}
#menubar a.trighealth{padding:8px 20px 8px 20px;border-right:1px solid #B2B2B2;background:#E42B2B;color:#fff;}
#menubar a.triglove{padding:8px 20px 8px 20px;border-right:1px solid #B2B2B2;background:#a800ff;color:#A89B9B;}
#menubar a.trigfoto{padding:8px 20px 8px 20px;border-right:1px solid #B2B2B2;background:#06D0D4;color:#fff}
#menubar a.trigfood{padding:8px 20px 8px 20px;border-right:1px solid #B2B2B2;background:#F6FF52;color:#24B200}
#menubar a.trigtravel{padding:8px 20px 8px 20px;border-right:1px solid #B2B2B2;background:#60FF52;}
</style>
<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a class='trighome' href='http://namablog.blogspot.com/'>Home</a></li>
<li><a class='trighealth' href='#'>Health</a></li>
<li><a class='triglove' href='#'>Love</a></li>
<li><a class='trigfoto' href='#'>Foto</a></li>
<li><a class='trigfood' href='#'>Food</a></li>
<li><a class='trigtravel' href='#'>Travel</a></li>
</ul>
<br class='clearit'/>
</div>
<div style='clear:both;'/>
</div></div>

Selesai dan selamat mencoba.

Cara membuat tab menu horisontal dengan css pada blog

Sobat ingin  membuat menu horisontal seperti gambar  di atas?

Berikut ini  caranya:

1. Login  blog

2. Rancangan

3.Add gadget html/javascript

4. Copast kode script di bawah ini

<style type="text/css">

#msuteja ul li a {

position: relative;

float: bottom;

display: block;

width: AUTO;height: 15px;

padding: 5px 0 0 0;

margin-right: 5px;

text-align: center;

font-size: 15px;

text-decoration: none;

color:transparant;

font-weight: bold;

outline: none;

}

#msuteja li .current{

color: transparant;

}

#msuteja li a:hover,

#msuteja li a:active {

background: #4B0082;

background: -webkit-gradient(linear, left top, left bottom, from(#4B0082), to(#FF0000));

background: -moz-linear-gradient(top,#4B0082, #FF0000);

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4B0082', endColorstr='#FF0000'); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4B0082', endColorstr='#FF0000'); display: inline-block;zoom: 1; *display: inline;border: dotted 1px #555555;padding: 3px 5px;-webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; -webkit-box-shadow: 0 1px 0px rgba(1,0,0,.1); -moz-box-shadow: 0 1px 0px rgba(0,0,0,.1); box-shadow: 0 1px 0px rgba(0,0,0,.1); -webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out; -webkit-transform:rotate(10deg);-moz-transform:rotate(10deg);-o-transform:rotate(10deg);}color: #ffffff;margin: 0;font-size:18px;padding: 9px 15px 8px;text-decoration: none;}#msuteja {width: auto;float: left;margin: 0;padding: 0;}#msuteja {margin: 0;padding: 0;}#msuteja ul {float: left;list-style: none;margin: 0;padding: 0;}#msuteja li {list-style: none;margin: 0;padding: 0;}#msuteja li a, #msuteja li a:link, #msuteja li a:visited {color: #ffffff;display: block;text-transform: capitalize;margin: 0;padding: 9px 15px 8px;font: Bold 15px Georgia, Arial;}#msuteja li a:hover, #msuteja li a:active {background:transparant;color: #ffffff;margin: 0;font-size:20px;padding: 9px 15px 8px;text-decoration: none;}#msuteja li li a, #msuteja li li a:link, #msuteja li li a:visited {background: #00FFFF;background: -webkit-gradient(linear, left top, left bottom, from(#00FFFF), to(#000000)); background: -moz-linear-gradient(top,#00FFFF, #000000); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00FFFF', endColorstr='#000000'); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00FFFF', endColorstr='#000000'); width: 250px;color: #E6E6FA;-webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; border-style: outset;-webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out; -webkit-transform:rotate(10deg);-moz-transform:rotate(10deg);-o-transform:rotate(10deg);float: none;margin: 0;padding: 7px 10px;border-bottom: transparant;border-left: transparant;border-right: transparant;font: bold 14px kristen itc, Arial;}#msuteja li li a:hover, #msuteja li li a:active {background: #FF0000;background: -webkit-gradient(linear, left top, left bottom, from(#FF0000), to(#00FF00)); background: -moz-linear-gradient(top,#FF0000, #00FF00); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF0000', endColorstr='#00FF00'); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF0000', endColorstr='#00FF00'); color: #ffffff;font-size:20px;font-family:kristen itc;text-align: center;padding: 7px 10px;}#msuteja li {float: left;padding: 0;}#msuteja li ul {z-index: 9999;position: absolute;left: -999em;height: 20px;width: 170px;margin: 0;padding: 0;}#msuteja li ul a {width: 140px;}#msuteja li ul ul {margin: -32px 0 0 171px;}#msuteja li:hover ul ul, #msuteja li:hover ul ul ul, #msuteja li.sfhover ul ul, #msuteja  li.sfhover ul ul ul {left: -999em;}#msuteja  li:hover ul, #msuteja  li li:hover ul, #msuteja  li li li:hover ul, #msuteja  li.sfhover ul, #msuteja  li li.sfhover ul, #msuteja  li li li.sfhover ul {left: auto;}#msuteja  li:hover, #msuteja  li.sfhover {position: static;}#footer-column-divide {clear:both;}#msuteja{font-family:Comic Sans Ms;background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiaPm5zVPWe5hhgGG8NS9zbY3QPAPmN_gDy77NviUaWU_LY7fApEd-cgwamfmSb07TY54ZPXwK-u8lDaftw9UOgE7KhomJAda5zMXJceeK7ZIgj1xbLuMo05k1sV3IRs_5SmkyBjbc45OB/)repeat-x;(0,0,0, 0.80);border:1px solid #C0C0C0;padding:2px 0;z-index:999;top:0px;left:1px;right:1px;position:fixed;-moz-border-radius:10px;-webkit-border-radius:10px;}

</style>

<div id='msuteja'>

<ul id='msuteja'>

<li><a href='Disini letak link sobat'>Home</a></li>

<li><a href='Disini letak link sobat' target='_blank'>Daftar Isi</a></li>

<li><a href='http://tejahtc.blogspot.com/' target='_blank'>Download</a>

<ul class='children'>

<li><a href='Disini letak link sobat' target='_blank'>Download Aplikasi</a></li>

<li><a href='Disini letak link sobat' target='_blank'>Download Game</a></li>

</ul>

</li>

<li><a href='http://tejahtc.blogspot.com/' target='_blank'>About Me</a>

<ul class='children'>

<li><a href='Disini letak link sobat' target='_blank'>Facebook</a></li>

<li><a href='Disini letak link sobat' target='_blank'>Twitter</a></li>

</ul>

</li>

</div>

Url dan judul menu  url edit atau  ubah sesuai keinginan.

Selanjutnya simpan.

Demikian cara membuat tab menu horisontal dengan css.

Semoga infonya bermanfaat.

Cara membuat menu horisontal bubble pada blog

Menu dropdown dengan efek bubble menarik untuk di coba.

Contoh seperti gambar di atas.

Berikut ini caranya:

1. Login blog

2. Rancangan

3. Edit html

4. Letakkan kode berikut di atas </head>

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

<script type="text/javascript" src="http://tympanus.net/Tutorials/BubbleNavigation/jquery.easing.1.3.js">

</script>

<script type="text/javascript">

 $(function() {

  $('#nav > div').hover(

  function () {

   var $this = $(this);

   $this.find('img').stop().animate({

    'width'     :'199px',

    'height'    :'199px',

    'top'       :'-25px',

    'left'      :'-25px',

    'opacity'   :'1.0'

   },500,'easeOutBack',function(){

    $(this).parent().find('ul').fadeIn(700);

   });

   $this.find('a:first,h2').addClass('active');

  },

  function () {

   var $this = $(this);

   $this.find('ul').fadeOut(500);

   $this.find('img').stop().animate({

    'width'     :'52px',

    'height'    :'52px',

    'top'       :'0px',

    'left'      :'0px',

    'opacity'   :'0.1'

   },5000,'easeOutBack');

   $this.find('a:first,h2').removeClass('active');

  }

 );

 });

</script>

<style>

.BubbleNavigation

{

width:950px;

height:70px;

border:2px solid #ddd;

-moz-border-radius:5px;

-webkit-border-radius:5px;

border-radius:5px;

-moz-box-shadow:1px 1px 4px #666;

-webkit-box-shadow:1px 1px 4px #666;

box-shadow:1px 1px 4px #666;

margin:0px auto;

padding:5px;

            }

.content{

width:100%;

height:50px;

background-color:#ccc;

opacity:0.7;

margin:0px auto;

            }

.navigation{

    margin: 0px auto;

    font-family: "Trebuchet MS", sans-serif;

    font-size: 24px;

    font-style: normal;

    font-weight: bold;

    letter-spacing: 1.4px;

}

.navigation .item{

    position:absolute;

}

.menu-1{

    top:30px;

    left:50px;

}

.menu-2{

   top:30px;

   left:225px;

}

.menu-3{

   top:30px;

   left:425px;

}

.menu-4{

   top:30px;

   left:620px;

}

.menu-5{

   top:30px;

   left:815px;

}

a.icon{

    width:52px;

    height:52px;

    position:absolute;

    top:0px;

    left:0px;

    cursor:pointer;

}

.menu-1 a.icon{

    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNM5xR8GG5bmzdFxWocEN1obym8G4JJxKIB8xdk2YSf9WRj1OHUhWf5qNKJj9Nio0cTJ3lmDC7y0q2R_uayZ7r2F-cs9rOyQKcx6FhFve2ABZHG-hiQzBX8NgH-xAt_1bW_1hBQVuXiEVG/s104/Bubble+home.png) no-repeat 0px 0px;

}

.menu-2 a.icon{

    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXhZAcNLHCoUCiqgjl7GzlPK3dZyhBP62PqylxhEYNXCBE2QQsxH08MdyJEQDGpt4blL1eDccsmjmjTV9Lkrs18DXZkVTfna0-ELYrR5Gtomz4LR03E0y7RXacBtN3S9Di7nbmCQ2eARNd/s104/bubble+user.png) no-repeat 0px 0px;

}

.menu-3 a.icon{

    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQtbhe76torMMpKU3La0_r2erGqYJYusSKoRCY-AjtpZemGyoG-ClPs9n6sSRRHihHZ418wjR3tr2212Xw3NrWy6oYsJS928UEVDVzpNfs6rqFnwDJ7YUFyZcgfvqeo9b1BLT1wSZbdkd-/s104/bubble+shop.png) no-repeat 0px 0px;

}

.menu-4 a.icon{

    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3Vyla9RQu04JYMmAxULDzHYigR_koGalL6SbItQBCAOJJWwLi3ieZ9S0-dbjTrixCgN-st13MSh76j1P1R_m91ScBaDfAtur4g5V8hQYeWJKKKksglR-CMO7xMS8yPTWZ_ZhscQBsD0lM/s104/bubble+camera.png) no-repeat 0px 0px;

}

.menu-5 a.icon{

    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhauH56YxqHvyjE8auwqMHvHkO-P-tiFP6Zt1ZhTUsqBjyRwuoJrXHpoxkVi9rBm8X3n_lwV7LOS8JePgofj2lG6MpEF9mN1WQk0JLHQzZI-CpxGlFsoyvL_cI6aT2JagMm5INyA6tP_Ec2/s104/bubble+fav.png) no-repeat 0px 0px;

}

.navigation .item a.active{

    background-position:0px -52px;

}

.item img.circle{

    position:absolute;

    top:0px;

    left:0px;

    width:52px;

    height:52px;

}

.item h2{

    position:absolute;

    width:px;

    height:25px;

    background-color:#ccc;

border:1px solid #ccc;

    -moz-border-radius:20px;

    -webkit-border-radius:20px;

    border-radius:20px;

    -moz-box-shadow:1px 1px 4px #000;

    -webkit-box-shadow:1px 1px 4px #000;

    box-shadow:1px 1px 4px #000;

    color:#222;

    font-size:18px;

    top:0px;

    left:60px;

padding:5px 10px 5px;

    text-shadow:1px 1px 1px #fff;

    text-transform:uppercase;

}

.item h2.active{

    color:#fff;

    text-shadow:1px 0px 1px #555;

}

.item ul{

    list-style:none;

    position:absolute;

    top:45px;

    left:0px;

    display:none;

}

.item ul li a{

    font-size:15px;

    text-decoration:none;

    letter-spacing:1.5px;

    text-transform:uppercase;

    color:#222;

    padding:3px;

    float:left;

    clear:both;

    width:px;

    text-shadow:1px 1px 1px #fff;

}

.item ul li a:hover{

    background-color:#fff;

    color:#444;

    -moz-border-radius:5px;

    -webkit-border-radius:5px;

    border-radius:5px;

    -moz-box-shadow:1px 1px 4px #666;

    -webkit-box-shadow:1px 1px 4px #666;

    box-shadow:1px 1px 4px #666;

}

</style>

5. Simpan template

Selanjutnya:

1. Rancangan

2. Add gadget html/javascript

3. Copy dan paste kode berikut

<div class="BubbleNavigation">

<div class="content">

<div class="navigation" id="nav">

<div class="item menu-1">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOUEBGC9Er6k1-u7Feg5wNKvumbsEcPPki3jztCLkd2ridoHnua23VLw-XnLGNf5-7KCdmWJEShQ5ryuzE6VbDf1F_nowdTxKwI2_WfGT6v5JCBS8ALE1l39HAfoJ28ThNIEegYviyRFim/s104/Bubble+1.png" alt="" width="199" height="199" class="circle"/>

<a href="ULR HALAMAN / ARTIKEL" class="icon"></a>

<h2>Home</h2>

<ul>

<li><a href="ULR HALAMAN / ARTIKEL">Portfolio</a></li>

<li><a href="ULR HALAMAN / ARTIKEL">Services</a></li>

<li><a href="ULR HALAMAN / ARTIKEL">Contact</a></li>

</ul>

</div>

<div class="item menu-2">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsrvwJWOkNds0sOOUkRAYVAn_uAsWMRQxqwkIZTNvPrj6ucadUKdh_XnXb7g_h862JYDUWVNVcQZG0L6ZCyKqu4Y4gecPbZaxhhqMRYE7olQATrEBSmNDE1DUsobVP3vWTLg46k-Z0w_mu/s104/Bubble+2.png" alt="" width="199" height="199" class="circle"/>

<a href="ULR HALAMAN / ARTIKEL" class="icon"></a>

<h2>About</h2>

<ul>

<li><a href="ULR HALAMAN / ARTIKEL">Profile</a></li>

<li><a href="ULR HALAMAN / ARTIKEL">Properties</a></li>

 <li><a href="ULR HALAMAN / ARTIKEL">Privacy</a></li>

</ul>

</div>

<div class="item menu-3">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI_4oQCE2qK0gJHPraXwhX-YiC1hWHnSCHG6R5QkN9OyPRUdLs9wtZ-kq_H_Pf-NCqFY9asNjVJld_K7Pxl6kjrfGnaukrOhgmY5XUcyzDdOIW64CK5I2y24wOR6-ameOkNpjdVX6WGR82/s104/Bubble+3.png" alt="" width="199" height="199" class="circle"/>

<a href="ULR HALAMAN / ARTIKEL" class="icon"></a>

<h2>Shop</h2>

<ul>

<li><a href="ULR HALAMAN / ARTIKEL">Harga</a></li>

<li><a href="ULR HALAMAN / ARTIKEL">Katalog</a></li>

<li><a href="ULR HALAMAN / ARTIKEL">Order</a></li>

</ul>

</div>

<div class="item menu-4">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5d5MmMhEtmr5da3XK5UO0slmxoGTQs39G9fHla_kgkp78npgKfZjS6ljzp-Vwat7Z0ixbxQwFiOQczW131HShwRgcwtZLsrCk2S8TOQTMeyODEWB9_McqxsvZtl14Ipt3b0p80bzxSQeC/s104/Bubble+4.png" alt="" width="199" height="199" class="circle"/>

<a href="ULR HALAMAN / ARTIKEL" class="icon"></a>

<h2>Album</h2>

<ul>

<li><a href="ULR HALAMAN / ARTIKEL">Terbaru</a></li>

<li><a href="ULR HALAMAN / ARTIKEL">Work Shop</a></li>

<li><a href="ULR HALAMAN / ARTIKEL">Trend</a></li>

</ul>

</div>

<div class="item menu-5">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjThVbc6huAnANLAvax5GSnSVW5cGn_2kxwXJeAwBKah-o2utjKewf31I1BFII6c2IOlPUAyB28rG72LcKGV02-q2YmIlmDbRIPVZvGzONMj-xbzrlwDcfreD-zE29SLfy6k_qoGdnGVArl/s104/Bubble+5.png" alt="" width="199" height="199" class="circle"/>

<a href="ULR HALAMAN / ARTIKEL" class="icon"></a>

<h2>Kontak</h2>

<ul>

<li><a href="ULR HALAMAN / ARTIKEL">Service</a></li>

<li><a href="ULR HALAMAN / ARTIKEL">Support</a></li>

<li><a href="ULR HALAMAN / ARTIKEL">Comments</a></li>

</ul>

</div>

</div>

</div>

</div>

Ganti url menu sobat sesuai keinginan

Kemudian simpan

Demikian cara membuat menu drop down dengan efek bubble.

semoga artikenya bermanfaat.