Gudang Tutorial Blog

@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:#fff;  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:#333}

#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:#fff;  opacity:.5}

#cssmenu ul li a:before{ content:'';  display:block;  position:absolute;  left:0;  bottom:0;  height:3px;  width:0;  background:#333;  -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:#333}

#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:#fff;  width:100%;  opacity:.2}

 #cssmenu ul li.last >a:before,

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

}

<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>

#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/AVvXsEhL1fxzkdxVVnP3i9I2aiVprPiEaDFmQWjI83IunDeI7bUFb3ZE1rmsoy-9mgk8jBH9jvBVgiGDCki7AVbogs5BbBOHm9E5rfrXDIKdxnl4xOU8WZvtMxvE6jiwpE6EsdJlceZq_KoiGww/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;

}

<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>

<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>

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>

<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>

.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}

<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>

<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>

<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>

<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>

<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/AVvXsEgTvwn1Har9N4GW5Augbc2b4o7Rb1-ndXzfuycKrOquHI_s00foPdBNV5hlg_wCCsaVz-Ix-XSMsOyHhA9wfv1Ej8g_sCUL2cJZfBjsf7Eh-Gqd18rxq6sOGXeYh1Vyw9lOA8SUgpHwpCut/)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>

<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/AVvXsEi21FBx7EM3edjCHEsHj3gwp1qDuSHQ42Deu_WUV2PcvlN72bmitYSnbE88zNKRZbl2_uzqhUifc4rO3BzDRRB6Iq8kAFhAo2gQOrc2o63hu9yxMy6g_iKJX9pSb_n6JlE_cNJAmAk-pVZ9/s104/Bubble+home.png) no-repeat 0px 0px;

}

.menu-2 a.icon{

    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY7QDO_0-N70X16vkYmyGedumQGd5yX9_KlGzDDdZdgrWVefvX1KZe_-91TTZEI3Vk4e-4Y2_4W33YZtvCmtinhH7lxUSNqLqNd8CfqypRSpWDIQ3l1wXp4-fpqvgXccDwODKICd6WgI9n/s104/bubble+user.png) no-repeat 0px 0px;

}

.menu-3 a.icon{

    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgADYPCwgOquJeAcMuGemqrCYhFDkqdSjagqYI6Wi2n2-clcNIeLuwM_yv-w6h0D4nE1bZuRnrF8E_J1Jac7gMESQMEyDTwCCa6ZSSPb47odu8kC-vjRl2IfjVJkzj2itIWUGyi3aftb6Uk/s104/bubble+shop.png) no-repeat 0px 0px;

}

.menu-4 a.icon{

    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimaRAqOgKgd3TaRa59bsuG2l19-OvK1SFwPly5LkiD_Apa-IFqctdIffjhkMHnB3W97N4C_LIQlvgnZ7eIyrIZEICHfRSS_l8nMc_sACtoNOaW0A3WxAO1Q2WwRYTpI8dnQd-5gjKUALSu/s104/bubble+camera.png) no-repeat 0px 0px;

}

.menu-5 a.icon{

    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis-YvqWQ7fWC2x4znarwPyX91uXN9HStUerPZiNQTYr5uGMgN2jPusFHvt_1bpOS8FnvBfUFUE-i68ejsu-1cgrkBvSaqEY1ATlrshnQVHyEcjknYt5VWLQlNPsjerpMd4ZvAL4dRnEyqw/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>

<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/AVvXsEhhpyc_9esSF64tbPEzJhQRJrGD9b0LYs58qTmmmvkigsE97R69vAWnG2lZZ6byKaaNCNxgAypIp7iEQdrHsGQJVGrtBDtiXZtLsucDFMp1GhNNHQo7_N26QOf7E_1zQ-zt4tsSOB5J44yP/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/AVvXsEgm-V9C0oDq5ZFCsY8YOboMDH_mU8aQDM-62tq3v5ReXq_C9-S4EWkUoa086opd8JknkpOdYgPcaJkfj-S6nbcH4V2UCS7QJ1V9R-SIetIpMgOI-8Ow4on7oeXv0RhIUWkBu5n8jEHrUfFf/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/AVvXsEh5VsT6QKsY-48z69XrLUP0j4wJYyQLu_1RaX2N8ttSZFqAahsfx5B6IakGnBUQA7kpRYXMO92mNAhQ1rq39giQPQtqMNLPxoIvd1Fr-8zIQSZmx9KicfIa9ZCPKm8-rjXXoTU3TVR90Rjd/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/AVvXsEidiMkR_kWUgIboK86ns8DBFB2DRwUC4Z7YF8j50XPrrLxZ-8yzrodjs-LgInx1JM39xaJf1Ly8QVGaWfJ3_Jo8jxS6eAA28rSTLRWi89YgBebow2h3rtdFMvPnYeNpT661AkEF7Udjdad3/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/AVvXsEjXr6jJ2IEjSJeVPM7ktL1El3Q6797mkcNUjFlNdYK-W6wlzbKRpaPFHhTpBYuSGX0mtyBzT9ZsntdKM1hg_QZQ0OqtvEULp73Ct8_L4W4BMpne3phuFfwe9RzY-x-Te0Xt9G8zWyqq8qHS/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>