Icon Label Blogger

1. Tambahkan kode dibawah ini diatas kode </head>

   <script type='text/javascript'> 
   function lebel_logo(etiqueta) {
   imagenes = new Array();
   imagenes[1] = &quot;<img src='https://lh3.googleusercontent.com/-cfmqvl_aeUU/T9RWXMUKLwI/AAAAAAAAAFk/KOMuyeM2gVs/s84/image.png' title='Image'/>&quot;
   imagenes[2] = &quot;<img src='https://lh3.googleusercontent.com/-spKt-dCuWDw/T9RZq64fDoI/AAAAAAAAAGA/h25ovtaAfsY/s84/video.png' title='Video'/>&quot;
   imagenes[3] = &quot;<img src='https://lh6.googleusercontent.com/-JqMoz73EsdI/T9RZpQdYL7I/AAAAAAAAAGE/Xh3kRqQkQZ8/s84/audio.png' title='Music'/>&quot;
   imagenes[4] = &quot;<img src='https://lh5.googleusercontent.com/-qvAfIbwadro/T9RZqVD3stI/AAAAAAAAAF4/U2A6BssgJQU/s84/quote.png' title='Quote'/>&quot;
   imagenes[5] = &quot;<img src='https://lh5.googleusercontent.com/-ZGIdlq5LlUM/T9RZpvwahHI/AAAAAAAAAFw/B94_LHUkup8/s84/note.png' title='Note'/>&quot;
   imagenes[6] = &quot;<img src='https://lh6.googleusercontent.com/-ZgQr4FMDm_I/T9ca1xRfDSI/AAAAAAAAADM/4GZTJjeHlwo/s84/Blogger.png' title='Blogger'/>&quot;
   imagenes[7] = &quot;<img src='https://lh5.googleusercontent.com/-JPLBQx4F72Y/T9ca51o-Y0I/AAAAAAAAADU/aaUDQVk_EmM/s84/wp.png' title='Wordpress'/>&quot;
   if (etiqueta == &quot;Image&quot;)
   {document.write(imagenes[1]);}
   if (etiqueta == &quot;Video&quot;)
   {document.write(imagenes[2]);} 
   if (etiqueta == &quot;Music&quot;)
   {document.write(imagenes[3]);} 
   if (etiqueta == &quot;Quote&quot;)
   {document.write(imagenes[4]);} 
   if (etiqueta == &quot;Blog&quot;)
   {document.write(imagenes[5]);} 
   if (etiqueta == &quot;Blogspot&quot;)
   {document.write(imagenes[6]);} 
   if (etiqueta == &quot;Wordpress&quot;)
   {document.write(imagenes[7]);} 
   }
   </script>
   

   Kode diatas dikelompokan dalam bentuk Label → "Image, Music, Quote, Note, Blogger, dan Wordpress"
2. Masukkan kode CSS dibawah ini diatas kode ]]></b:skin>

   .format-icon{
   position: absolute;
   display:block;
   margin:0px 0px 0px -62px;
   padding:0px;
   border:0px;
   }

3. Sekarang cari kode <div class='post-header'> kemudian tambahkan kode dibawah ini tepat diatasnya :

   <b:loop values='data:post.labels' var='label'>
   <a class='format-icon' expr:href='data:label.url' rel='tag'>
   <script type='text/javascript'>lebel_logo(&quot;<data:label.name/>&quot;);</script>
   </a>
   </b:loop>
   

4. Selesai dan simpan template.

Image Auto Readmore Blogger

• Terlebih dahulu masukkan kode CSS dibawah ini pada template yang penempatanya diatas kode </b:skin>, sesuaikan dengan template anda :

  .readmore{float:left;width:200px;line-height:20px;margin-right:15px;}
  .readmore img{background-image: url('https://lh4.googleusercontent.com/-wxD_93A9meY/T9YV80IuQGI/AAAAAAAAAgY/p4Mql4p4wiE/s25/putih.png'); border:1px solid #ccc;padding:5px;height:120px;width:95%;}
  .readmore .isi{border:1px solid #000;}
  

• Template Standart Blogger → Jika template blogger belum memanfaatkan auto read more, silahkan cari code <data:post.body/> kemudian ganti dengan kode dibawah ini :

  <div class='post-body'>
  <b:if cond='data:blog.pageType != &quot;item&quot;'>
  <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  <div class='readmore'>
  <b:if cond='data:post.firstImageUrl'>
  <a expr:href='data:post.url'><img expr:alt='data:post.title' expr:src='data:post.firstImageUrl'/></a>
  <b:else/>
  <b:if cond='data:post.thumbnailUrl'>
  <a expr:href='data:post.url'><img expr:alt='data:post.title' expr:src='data:post.thumbnailUrl'/></a>
  <b:else/>
  <a expr:href='data:post.url'><img expr:alt='data:post.title' src='http://2.bp.blogspot.com/-T35hHb1U34o/Uk2Q6XVpO0I/AAAAAAAAAsg/W8LNJO_zkIA/s320/no-thumbnail.jpg'/></a>
  </b:if>
  </b:if>
  </div>
  <div class='isi'><data:post.snippet/></div>
  <a class='button' expr:href='data:post.url'>Baca Selengkapnya</a>
  <b:else/>
  <data:post.body/>
  </b:if>
  <b:else/>
  <data:post.body/>
  </b:if>
  </div>

• Template Blogger yang terpasang Read More Javascript → Temukan kode dibawah ini kemudian silahkan dihapus dan ganti dengan kode diatas :

  
  <b:if cond='data:blog.pageType != "item"'>
  .......
  <script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
  .......
  </b:if>
  <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
  

<b:if cond='data:blog.url == &quot;http://namablog.blogspot.com/p/demo.html&quot;'>
<script src='http://reog.googlecode.com/files/jquery-1.js' type='text/javascript'/>
<script src='http://reog.googlecode.com/files/iframe.js' type='text/javascript'/>
<style type='text/css'>
html, #iframe{overflow: hidden;} 
iframe{position: absolute; width: 100%; height: 100%; border:none; overflow: visible;}
</style>
</b:if>
</head>

<body>
<b:if cond='data:blog.url != &quot;http://namablog.blogspot.com/p/demo.html&quot;'>

</b:if>
<b:if cond='data:blog.url == &quot;http://namablog.blogspot.com/p/demo.html&quot;'>
<div id='iframe'><iframe src=''/></div>
</b:if>
</body>

Cara membuat Live Demo menggunakan Java Script dan Laman Blogger Template yang dibuat diatas merupakan cara yang sangat sederhana, silahkan dikembangan sendiri.

Boxes and Legends Style

Headings

This is heading 1

This is heading 2

This is heading 3

This is heading 4

Headline

• Cara penulisan <p class="Headline">This is a headline</p> <p class="SubHeadline">
• Cara penulisan small headline <p class="SmallHeadline">This is a Small Headline</p>
• Cara penulisan Large Headline <p class="LargeHeadline">This is a LargeHeadline</p>

Tooltips

• Classic TooltipsThis is just an example of what you can do using a CSS tooltip, feel free to get creative and produce your own! menggunakan kode : <a class="gkTooltip" href="/">Classic<span class="classicTooltip">Isi Keterangan Tooltips</span></a>
• Critical TooltipsCriticalThis is just an example of what you can do using a CSS tooltip, feel free to get creative and produce your own! use code : <a class="gkTooltip" href="http://blogger.com">Critical<span class="customTooltip criticalTooltip"><i>Critical</i>This is just an example of what you can do using a CSS tooltip, feel free to get creative and produce your own!</span></a>
• Help TooltipsHelpThis is just an example of what you can do using a CSS tooltip, feel free to get creative and produce your own! use code : <a class="gkTooltip" href="http://blogger.com"><b>Help Tooltips</b><span class="customTooltip helpTooltip"><i>Help</i>This is just an example of what you can do using a CSS tooltip, feel free to get creative and produce your own!</span></a>
• Information TooltipsInformationThis is just an example of what you can do using a CSS tooltip, feel free to get creative and produce your own! use code : <a class="gkTooltip" href="http://blogger.com"><b>Information Tooltips</b><span class="customTooltip infoTooltip"><i>Information</i>This is just an example of what you can do using a CSS tooltip, feel free to get creative and produce your own!</span></a>
• Warning TooltipsWarningThis is just an example of what you can do using a CSS tooltip, feel free to get creative and produce your own! use code : <a class="gkTooltip" href="http://www.blogger.com/"><b>Warning Tooltips</b><span class="customTooltip warningTooltip"><i>Warning</i>This is just an example of what you can do using a CSS tooltip, feel free to get creative and produce your own!</span></a>

Additional typography elements

<script src='http://reog.googlecode.com/files/jquery.js' type='text/javascript'/>
<script src='http://reog.googlecode.com/files/dropmenu.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;#nav-one&quot;).dropmenu();
});
</script>

/* Menu Live
----------------------------------------------- */
#Live ul, li{
padding: 0px;
margin: 0px;
}
#Live ul.dropmenu{
position: relative;
margin: 0px;
padding: 1px 0px 0px 0px;
background:transparent url(http://s3.envato.com/files/1075971/images/navigation.png) repeat-x scroll 0 0;
display:block;
height: 35px;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size: 12px;
}
#Live .dropmenu li{
position: relative;
list-style: none;
float: left;
margin: 0px;
padding: 0px;
}
#Live .dropmenu li a{
height: 22px;
padding: 9px 30px 0px 15px;
display: block;
cursor: point;
border-right: solid 1px #4a779d;
color: #FFFFFF;
text-transform: uppercase;
text-decoration: none;
}
#Live .dropmenu li span{
display: block;
float: right;
height: 10px;
width: 10px;
background:transparent url(http://s3.envato.com/files/1075971/images/arrow_up.png) repeat-x scroll 0 0;
position: absolute;
top: 12px;
right: 10px;
}
#Live .dropmenu li a:hover span{
background:transparent url(http://s3.envato.com/files/1075971/images/arrow_hover.png) repeat-x scroll 0 0;
}
#Live .dropmenu li:hover ul, .dropmenu li:hover div{
display: block;
}
#Live .dropmenu ul{
position: absolute;
display: none;
width: 140px;
padding: 0px;
margin: 0px;
border-bottom: 1px solid #ccc;
background: #FFFFFF url(http://s3.envato.com/files/1075971/images/gradient.png) repeat-x scroll 0 0;
}
#Live .dropmenu ul li{
border: 0;
float: none;
}
#Live .dropmenu ul a {
border: 1px solid #ccc;
border-bottom: 0;
white-space: nowrap;
display:block;
color: #0657AD;
text-transform: none;
}
.dropmenu a.selected, .dropmenu a:hover{
color: #0657AD !important;
background: #FFFFFF url(http://s3.envato.com/files/1075971/images/gradient.png) repeat-x scroll 0 0;
}
#Live a.selected span{
background:transparent url(http://s3.envato.com/files/1075971/images/arrow_hover.png) repeat-x scroll 0 0;
}
#Live .dropmenu ul a:hover {
color:#F67A00 !important;
text-decoration: none;
background-color: #F0F0F0;
background-image: none;
}
#Live .dropmenu div ul{
position: relative;
display: block;
}
#Live .dropmenu li div{
background: #FFFFFF url(http://s3.envato.com/files/1075971/images/gradient.png) repeat-x scroll 0 0;
border: 1px solid #ccc;
padding: 5px;
display: none;
position: absolute;
}
#Live .dropmenu li div ul{
border: none;
background: none;
position: relative !important;
}
#Live .dropmenu li div a{
border: none;
border-bottom: 1px solid #ccc;
}
#Live .dropmenu li div div{
display: block;
position: relative;
background: none;
border: none;
}
#Live .dropmenu li div div a{
display: inline;
border: none;
color: #0657AD;
padding: 0px;
margin: 0px;
text-transform: none; 
}
#Live .dropmenu li div div a:hover{
color: #F67A00;
text-decoration: none;
border-bottom: 1px dashed #000;
}
#Live ul.left{
float: left;
width: 145px;
}
#Live ul.right{
float: right;
width: 145px;
}
#Live .small{
color: #666;
font-size: 11px;
padding: 10px 5px 8px 5px !important;
display: block;
clear: both;
}
#Live .products{
width: 300px;
padding: 15px !important;
}
#Live .products ul{
width: 100%;
}
#Live .products ul li{
border-bottom: 1px solid #ccc;
height: 40px;
padding: 10px 0px;
}
#Live .products h2{
font-size: 16px;
padding: 2px 0px 3px 0px;
margin: 0px;
}
#Live .products p{
color: #666;
font-size: 10px;
padding: 0px;
margin: 0px;
}
#Live .products img{
float: left;
padding-right: 10px;
}
#Live .products ul li a{
display: inline;
border: none;
color: #666;
padding: 0px;
margin: 0px;
text-transform: none; 
}
#Live .products ul li a:hover{
color: #000 !important;
text-decoration: none;
background: none !important;
border-bottom: 1px dashed #000;
}
#Live .tutorials{
width: 300px;
}
#Live .profile{
width: 300px;
padding: 15px !important;
}
#Live .profile ul{
width: 100%;
}
#Live .profile ul li{
border-bottom: 1px solid #ccc;
height: 40px;
padding: 10px 0px;
}
#Live .profile h2{
font-size: 16px;
padding: 2px 0px 3px 0px;
margin: 0px;
}
#Live .profile p{
color: #666;
font-size: 10px;
padding: 0px;
margin-left: 120px;
}
#Live .profile img{
float: left;
padding-right: 10px;
border: 1px solid rgb(226, 226, 226);
width: 100px;
height: 100px;
padding: 5px;
margin-top: 17px;
margin-right: 10px;
}
#Live .profile a:hover {
background:none;
}
#Live .login{
padding: 15px !important;
width: 180px;
}
#Live input{
border:1px solid #4A779D;
padding: 3px 8px;
margin-bottom: 8px;
width: 164px;
}
#Live label{
padding: 0px 0px 4px 0px;
display:block;
}
#Live button{
background: #4A779D url(http://s3.envato.com/files/1075971/images/navigation.png) repeat-x scroll 0 0;
color: #FFF;
border:1px solid #4A779D;
padding: 4px 10px;
width: 180px;
}

<ul class='dropmenu' id='nav-one'>
<li>
<a href='#'>Home</a>
</li>
<li>
<a href='#'>Forum</a>
<ul>
<li><a href='#'>Support</a></li>
<li><a href='#'>Help</a></li>
<li><a href='#'>Examples</a></li>
<li><a href='#'>Your work</a></li>
</ul>
</li>
<li>
<a href='#item3'>Downloads</a>
<ul>
<li><a href='#'>Tools</a></li>
<li><a href='#'>Office</a></li>
<li><a href='#'>Custom projects</a></li>
</ul>
</li>
<li>
<a href='#'>Services</a>
<div class='products'>
<ul>
<li><img alt='Thumb' border='0' height='40' src='https://lh3.googleusercontent.com/_HR8egC6j8tg/TaO0_4J88II/AAAAAAAAAWQ/jXzJP5JiRr4/design.png' width='40'/><h2>Design Template</h2><p><a href='#'>Desig Template Blogger</a></p></li>
<li><img alt='Thumb' border='0' height='40' src='https://lh4.googleusercontent.com/_HR8egC6j8tg/TaO1GgOaqvI/AAAAAAAAAWU/9Gy6ImALKXk/gallery.png' width='40'/><h2>Gallery Blogger</h2><p><a href='#'>View and Download Template</a></p></li>
<li><img alt='Thumb' border='0' height='40' src='https://lh6.googleusercontent.com/_HR8egC6j8tg/TaO1MROxsBI/AAAAAAAAAWY/d6UthoqsB0I/help.png' width='40'/><h2>Blogger Help</h2><p><a href='#'>Can Help Blog Problem</a></p></li>
<li><img alt='Thumb' border='0' height='40' src='https://lh4.googleusercontent.com/_HR8egC6j8tg/TaO1T5uh_VI/AAAAAAAAAWc/SrFLXC-dwPM/safety.png' width='40'/><h2>Blogger Safety</h2><p><a href='#'>Safety Blogger Template</a></p></li>
</ul>
<div class='small'>Style Blogger Template hanya sebuah catatan kecil dari seorang Blogger Indonesia, blog ini berisi tentang Tip Trik Blogger Template, Kumpulan Artikel Blogger, Gallery Style Template Blogger, CSS, HTML, New Template Blogger, New Article Blogger, Free Blogger Template, Elegant Style Blogger Template, dan Blogger Indonesia.</div>
</div>
</li>
<li>
<a href='#'>Tutorials</a>
<div class='tutorials'>
<ul class='left'>
<li><a href='#'>Javascript</a></li>
<li><a href='#'>Python</a></li>
<li><a href='#'>PHP</a></li>
</ul>
<ul class='right'>
<li><a href='#'>HTML/CSS</a></li>
<li><a href='#'>ASP.NET</a></li>
<li><a href='#'>Actionscript</a></li>
</ul>
<div class='small'>View <a href='#'>all categories</a> or a <a href='#'>list of the best tutorials</a>.</div>
</div>
</li>
<li>
<a href='#'>Links</a>
<ul>
<li><a href='#'>Programming</a></li>
<li><a href='#'>Inspiration</a></li>
<li><a href='#'>My websites</a></li>
<li><a href='#'>Clients</a></li>
<li><a href='#'>Cool stuff</a></li>
<li><a href='#'>Sitebase</a></li>
<li><a href='#'>Other</a></li>
</ul>
</li>
<li>
<a href='#'>Profile</a>
<div class='profile'>
<div class='small'>
<a href='http://www.facebook.com/fianhar' target='_blank'><img src='https://lh3.googleusercontent.com/_HR8egC6j8tg/TYIGkw5J-2I/AAAAAAAAAVw/XrtCnnTwQQk/aha.jpg'/></a>
<p style='text-align: justify;'>Saya adalah <a href='http://fianhar.blogspot.com' target='_blank'>Fianhar</a>, berasal dan dibesarkan di <a href='http://id.wikipedia.org/wiki/Kabupaten_Ponorogo' target='_blank'>Kota Reog Ponorogo</a> Indonesia. Sekarang tinggal di <a href='http://id.wikipedia.org/wiki/Jakarta' target='_blank'>Kota Jakarta</a> dan bekerja di Institusi Penegak Hukum. Photografi dan Web Design hanya sebuah hobby.</p>
<p style='text-align: justify'>Hukum, Web design, dan fotografi adalah merupakan suatu seni yang menghasilkan keindahan jika berjalan seimbang.
</p>
</div>
</div>
</li>
<li>
<a href='#'>Login</a>
<div class='login'>
<label for='txtuser'>Username: </label>
<input id='txtuser' name='txtuser' type='text'/>
<label for='txtuser'>Password: </label>
<input id='txtpass' name='txtpass' type='password'/>
<button>Login</button>
</div>
</li>
</ul>

• Drop Menu by Sitebase
• jQuery And CSS Drop Down Multi Level Menu Solutions

1. Langkah 1 : Login Blogger -> Rancangan -> Rancangan
2. Langkah 2 : Back Up template Anda.
3. Langkah 3 : Copy kode di bawah ini di atas kode ]]></b:skin>
   
#janko #menu{ margin:0px; padding:0px; list-style:none; color:#fff; line-height:45px; display:inline-block; float:left; z-index:1000; }
#janko #menu a { color:#fff; text-decoration:none; }
#janko #menu > li {background:#172322 none repeat scroll 0 0; cursor:pointer; float:left; position:relative;padding:0px 10px;}
#janko #menu > li a:hover {color:#B0D730;}
#janko #menu .logo {background:transparent none repeat scroll 0% 0%; padding:0px; background-color:Transparent;}
/* sub-menus*/
#janko #menu ul { padding:0px; margin:0px; display:block; display:inline;}
#janko #menu li ul { position:absolute; left:-10px; top:0px; margin-top:45px; width:150px; line-height:16px; background-color:#172322; color:#0395CC; /* for IE */ display:none; }
#janko #menu li:hover ul { display:block;}
#janko #menu li ul li{ display:block; margin:5px 20px; padding: 5px 0px; border-top: dotted 1px #606060; list-style-type:none; }
#janko #menu li ul li:first-child { border-top: none; }
#janko #menu li ul li a { display:block; color:#0395CC; }
#janko #menu li ul li a:hover { color:#7FCDFE; }
/* main submenu */
#janko #menu #main { left:0px; top:-20px; padding-top:20px; background-color:#7cb7e3; color:#fff; z-index:999;}
/* search */
#janko .searchContainer div { background-color:#fff; display:inline; padding:5px;}
#janko .searchContainer input[type="text"] {border:none;}
#janko .searchContainer img { vertical-align:middle;}
/* corners*/
#janko #menu .corner_inset_left { position:absolute; top:0px; left:-12px;}
#janko #menu .corner_inset_right { position:absolute; top:0px; left:150px;}
#janko #menu .last { background:transparent none repeat scroll 0% 0%; margin:0px; padding:0px; border:none; position:relative; border:none; height:0px;}
#janko #menu .corner_left { position:absolute; left:0px; top:0px;}
#janko #menu .corner_right { position:absolute; left:132px; top:0px;}
#janko #menu .middle { position:absolute; left:18px; height: 20px; width: 115px; top:0px;}
4. Langkah 4 : Tambahkan kode dibawah ini pada bagian HEADER atau pada bagian BODY atau jika template masih setandar letakkan pada bagian <div id='outer-wrapper'> :
   
<div id='janko'>
<div style='margin-left:50px;'>
<ul id='menu'>
<li class='logo'>

<img alt='' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/menu_left.png' style='float:left;'/>
<ul id='main'>
<li>Welcome to <b>Create Vimeo-like top navigation</b> tutorial!</li>
<li class='last'>
<img alt='' class='corner_left' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/corner_blue_left.png'/>
<img alt='' class='middle' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/dot_blue.png'/>
<img alt='' class='corner_right' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/corner_blue_right.png'/>

</li>
</ul>

</li>
<li><a href='#'>Login</a>
</li>
<li><a href='#'>Help</a>
<ul id='help'>
<li>

<img alt='' class='corner_inset_left' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/corner_inset_left.png'/>
<a href='#'>General help</a>
<img alt='' class='corner_inset_right' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/corner_inset_right.png'/>
</li>
<li><a href='#'>Posts</a></li>
<li><a href='#'>Pages</a></li>
<li><a href='#'>Posts</a></li>
<li><a href='#'>Pages</a></li>
<li><a href='#'>Posts</a></li>
<li class='last'>

<img alt='' class='corner_left' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/corner_left.png'/>
<img alt='' class='middle' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/dot.gif'/>
<img alt='' class='corner_right' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/corner_right.png'/>
</li>
</ul>
</li>

<li><a href='#'>Help</a>
<ul id='help'>
<li>
<img alt='' class='corner_inset_left' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/corner_inset_left.png'/>
<a href='#'>General help</a>
<img alt='' class='corner_inset_right' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/corner_inset_right.png'/>
</li>
<li><a href='#'>Posts</a></li>
<li><a href='#'>Pages</a></li>
<li><a href='#'>Posts</a></li>
<li><a href='#'>Pages</a></li>
<li><a href='#'>Posts</a></li>
<li class='last'>

<img alt='' class='corner_left' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/corner_left.png'/>
<img alt='' class='middle' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/dot.gif'/>
<img alt='' class='corner_right' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/corner_right.png'/>
</li>
</ul>
</li>

<li class='searchContainer'>
<div>
<input id='searchField' type='text'/>

<img alt='Search' onclick='alert(&apos;You clicked on search button&apos;)' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/magnifier.png'/></div>
<ul id='search'>
<li>
<img alt='' class='corner_inset_left' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/corner_inset_left.png'/>
<input id='cbxAll' type='checkbox'/>All
<img alt='' class='corner_inset_right' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/corner_inset_right.png'/>
</li>
<li><input id='Articles' type='checkbox'/>Articles</li>
<li><input id='Tutorials' type='checkbox'/>Tutorials</li>

<li><input id='Reviews' type='checkbox'/>Reviews</li>
<li><input id='Resources' type='checkbox'/>Resources</li>
<li class='last'>
<img alt='' class='corner_left' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/corner_left.png'/>
<img alt='' class='middle' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/dot.gif'/>
<img alt='' class='corner_right' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/corner_right.png'/>
</li>
</ul>

</li>
</ul>
<img alt='' src='http://www.jankoatwarpspeed.com/examples/vimeo_navigation/menu_right.png' style='float:left;'/>
</div>
</div>

Fitur

• Dukungan Menu Multi-Level
  Menu AJAX adalah menu drop-down multi-level yang didasarkan pada daftar HTML tanpa urutan standar.
• Kompatibilitas Lintas-browser
  Sebagian besar aplikasi AJAX akan berfungsi di berbagai peramban bahkan dengan plugin lain atau teknologi kepemilikan yang sudah terpasang.
  
• Tampilan Sub-Menu Otomatis
  Dengan menu AJAX baru, Anda hanya perlu menggulirkan item menu dan sub-menu akan dimuat secara otomatis. Tidak perlu mengklik menu untuk mendapatkan sub-menu untuk drop down. Ini tidak hanya menghemat waktu navigasi yang berharga bagi pengguna, tetapi juga lalu lintas keluar.
  
• Menu Styling
  Ada banyak fitur lain, tetapi Anda tidak akan dapat menggunakan atau mengalaminya jika Anda tidak menginstal mega menu baru dengan gambar. Apa yang perlu Anda lakukan kemudian untuk menerapkannya di blog atau situs web Anda?
  

]]></b:skin>

.megamenu *{margin:0;padding:0;font-family:'PT Sans Narrow'}ul.megamenu{list-style:none;line-height:1;overflow:visible !important}ul.megamenu:after{margin:0;padding:0;content:' ';display:block;height:0px;clear:both}ul.megamenu li{float:left;display:inline;position:relative;text-transform:uppercase}ul.megamenu li a.menu-target:after{content:"";width:0;height:0;border-left:3px solid transparent;border-right:3px solid transparent;border-top:3px solid #fff;font-size:0;line-height:0;bottom:22px;right:5px;position:absolute}ul.megamenu li a{display:block;line-height:50px;padding:0px 20px;text-decoration:none;border-left:1px solid #000;box-shadow:1px 0 0 0 rgba(255, 255, 255, 0.1) inset;color:#d9d9d9;font-size:14px;transition:all 0.3s ease-in-out}ul.megamenu li a:hover{background:#111111;color:#fff}ul.megamenu ul{position:absolute;display:none;top:100%}ul.megamenu li:hover > ul{display:block}ul.megamenu ul li{z-index:72;min-width:149px;float:none;background:#000;text-shadow:none}ul.megamenu ul li a{text-transform:none;font-weight:normal}ul.megamenu ul li a:hover,ul.megamenuid ul li a.hover{background:#E0E0E0;color:#444}ul.megamenu ul ul{display:none;left:100%;top:0}ul.megamenuid li div.megasubmenu{background:#F9F9F9;position:absolute;width:830px;z-index:90;left:0;top:100%;overflow:hidden;min-height:150px;-moz-transform:translate(0,30px);-webkit-transform:translate(0,30px);-o-transform:translate(0,30px);transform:translate(0,30px);transform-origin:50% 0;visibility:hidden;opacity:0;color:#888;box-shadow:0 10px 7px -7px rgba(0,0,0,0.1);transition:all 0.3s ease-in-out}ul.megamenuid li:hover div.megasubmenu{visibility:visible;opacity:1;-moz-transform:translate(0,0);-webkit-transform:translate(0,0);-o-transform:translate(0,0);transform:translate(0,0)}ul.megamenuid ul,ul.megamenuid ul li{display:block !important;border:0 none !important;margin:0 !important;padding:0 !important}ul.megamenuid ul li{background:none !important;float:left !important}ul.megamenuid ul.leftmenulist{position:absolute;width:18%;left:0;top:0;bottom:0;background:#EEEEEE;border-right:1px dashed #e5e5e5 !important}ul.megamenuid ul.leftmenulist a{border-left:none !important;color:#555}ul.megamenuid ul.rightmenulist{position:relative;display:block;width:81%;float:right;margin:0px 0px 0px !important;background:none}ul.megamenuid ul.rightmenulist li{display:block;overflow:hidden;position:relative;min-height:210px;padding:5px 17px 5px 0px !important}ul.megamenuid ul.rightmenulist li .thumb-container{left:0;width:100%;height:100%;position:absolute;overflow:hidden;font-size:0;line-height:0}ul.megamenuid ul.rightmenulist li .thumb-container img{position:relative;top:10px;padding:0;width:100%;height:100%;display:block}ul.megamenuid ul.rightmenulist li a{display:block;border-left:none !important;padding:0px 5px !important;line-height:1.4;color:#777;font-weight:bold;font-size:14px}ul.megamenuid ul.rightmenulist li a:hover{color:#000;background:transparent}ul.megamenuid .loading-icon{background:url('http://2.bp.blogspot.com/-N9HNU11nhiA/Va-NLcGF0lI/AAAAAAAALW4/HzSlCK7PGeY/s1600/wait.gif') no-repeat scroll 0 0 transparent;width:22px;height:22px;position:absolute;top:50%;margin-top:-11px;right:5px}ul.megamenuid .menu-icon{border-bottom:4px solid transparent;border-top:4px solid transparent;border-left:4px solid #777;display:block;height:0;margin-top:-4px;position:absolute;right:11px;top:50%;width:0}#megamenuid{background:rgba(0, 0, 0, 0) -moz-linear-gradient(center top , #3d3d3d, #212121) repeat scroll 0 0;background:-webkit-linear-gradient(top,#3d3d3d,#212121);background-color:#3d3d3d;box-shadow:1px 1px 0 0 rgba(255, 255, 255, 0.1) inset;height:50px;width:100%;position:relative;max-width:1000px;margin:0 auto;padding:0px}#megamenuid h5{font-size:16px;margin-top:70px;text-align:center}#megamenuid h5:before{content:"";position:absolute;top:50px;left:50%;width:5px;height:2px;margin-left:-4px;border-left:2px solid black;border-right:2px solid black}#megamenuid h5:after{content:"";position:absolute;top:55px;left:50%;width:10px;height:5px;margin-left:-7px;border-top:2px solid black;border-left:2px solid black;border-right:2px solid black;border-radius:8px 8px 0px 0px}li.search-box{float:right !important;line-height:35px;margin:7px 10px 0 0}li.search-box .search-field{border:none;padding:3px;background:#3F3F3F;color:#fff;width:135px;font-size:13px}li.search-box .search-field:focus{border:none;outline:none;background:#4C4C4C;color:#fff}li.search-box .search-button{background:url('http://4.bp.blogspot.com/-VJqk_zzkAuw/VazlDH_goDI/AAAAAAAALVM/t-AjU3ix55k/s1600/search.png') no-repeat;border:none;cursor:pointer;padding:5px 10px;transition:all 0.3s ease-in-out}li.search-box .search-button:hover{opacity:0.9}.search-alert{background:#E84C3D url(http://3.bp.blogspot.com/-TQMok5egm8c/Va44AXnjg3I/AAAAAAAALV8/eq_8ICAlH2I/s1600/search-info.png) no-repeat;background-position:5px;text-transform:capitalize;color:#fff;margin:-5px;padding:0px 15px 0px 40px;display:none;border-radius:5px}

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

<script type='text/javascript'>
//<![CDATA[
(function(e){var t=function(e,t){this.elem=e;this.settings=t;this.megaMenuHtml();this.ajaxcall=null;this.menulist=this.elem.find(".leftmenulist li a");this.menuHelper(this.elem);this.addEvents()};t.prototype={regex:{islabel:new RegExp("/search/label/","g"),issearch:new RegExp("[?&]q=","g"),labelsearch:new RegExp("(http://[^/]+)/search/label/([^/?&]+).*[?&]q=([^$&]+)(?:[^$]+)?","g"),label:new RegExp("(http://[^/]+)/search/label/([^/?&$]+)","g"),search:new RegExp("(http://[^/]+)/search/?[?&]q=(.*)","g")},addEvents:function(){var t=this;this.menulist.hover(function(){if(e(this).data("menuloaded")!=="true"){t.li=e(this);t.url=t.li.attr("href");t.container=t.li.closest("ul").siblings("ul");t.hoverOver()}},function(){t.hoverOut()})},hoverOver:function(){var t=this;this.getAJAXUrl();if(!this.ajaxUrl)return;this.ajaxcall=e.ajax({type:"GET",url:t.ajaxUrl,dataType:"jsonp",data:t.ajaxData,beforeSend:function(){t.showLoader()},success:function(e){t.hideLoader();t.addArrow();t.showPosts(e)},error:function(e){t.showError(e)}})},hoverOut:function(){this.ajaxcall.abort();this.hideLoader()},getAJAXUrl:function(){if(this.url){var e=this;this.ajaxData={alt:"json","max-results":this.settings.postsNumber};this.url.search(this.regex.islabel)!==-1&&this.url.search(this.regex.issearch)!==-1?this.ajaxUrl=this.url.replace(this.regex.labelsearch,function(t,n,r,i){e.ajaxData.q=i;return[n,"/feeds/posts/default/-/",r,"/"].join("")}):this.url.search(this.regex.islabel)!==-1&&this.url.search(this.regex.issearch)===-1?this.ajaxUrl=this.url.replace(this.regex.label,function(t,n,r){delete e.ajaxData.q;return[n,"/feeds/posts/default/-/",r,"/"].join("")}):this.url.search(this.regex.islabel)===-1&&this.url.search(this.regex.issearch)!==-1?this.ajaxUrl=this.url.replace(this.regex.search,function(t,n,r){e.ajaxData.q=r;return[n,"/feeds/posts/default"].join("")}):this.ajaxUrl=!1}else this.ajaxUrl=!1},showLoader:function(){e("<span></span>",{"class":"loading-icon"}).appendTo(this.li.closest("li"))},hideLoader:function(){this.li.closest("li").find("span.loading-icon").remove()},showPosts:function(t){var n=this,r=[],i,s,o;t.feed.openSearch$totalResults.$t>0?e.each(t.feed.entry,function(t,u){i=u.title.$t;e.each(u.link,function(e,t){t.rel==="alternate"?s=t.href:s="#"});o=u.media$thumbnail?u.media$thumbnail.url.replace(/\/s72\-c\//,"/s200-c/"):n.settings.noThumbnail;r.push('<li><span class="thumb-container"><a title="',i,'" href="',s,'"><img alt="',i,'" src="',o,'"/><br />',i,"</a></span></li>")}):r.push("<h5>","No posts available.","</h5>");this.container.html(r.join(""));this.menulist.removeData("menuloaded");this.li.data("menuloaded","true")},showError:function(e){if(e.statusText==="error"){this.hideLoader();this.addArrow();this.container.html("<h5>Oops... Could not fetch the blog posts.</h5>")}},addArrow:function(){this.menulist.closest("li").find("span").remove();this.menulist.removeClass("hover-menu");this.li.addClass("hover-menu");e("<span></span>",{"class":"menu-icon"}).appendTo(this.li.closest("li"))},menuHelper:function(t){var n=this;t.find(">li").hover(function(){var t=e(this);t.find("a:first").addClass("hover-menu");var r=e(this).find("ul.leftmenulist li").height()*e(this).find("ul.leftmenulist li").length;t.find("ul.rightmenulist").css({"min-height":r+"px"});n.requestFirstAjax(t)},function(){e(this).find("a:first").removeClass("hover-menu")})},megaMenuHtml:function(){this.elem.find("ul ul").remove();this.elem.addClass("megamenuid").find(">li").find("ul:first").addClass("leftmenulist").wrap(e("<div></div>",{"class":this.settings.divClass}));e("ul.leftmenulist").after(e("<ul></ul>",{"class":"rightmenulist"}))},requestFirstAjax:function(e){e=e.find(".leftmenulist li:first-child a");this.url=e.attr("href");this.container=e.closest("ul").siblings("ul");this.li=e;this.hoverOver()}};e.fn.megaBloggerMenu=function(n){var r={postsNumber:4,divClass:"megasubmenu",postsClass:"rightmenulist",noThumbnail:"/default.png"},i=e.extend({},r,n);return this.each(function(){var n=new t(e(this),i)})}})(jQuery);
//]]>
</script>

<script type='text/javascript'>
jQuery(document).ready(function($) {
 $(&#39;#megamenuid&#39;).megaBloggerMenu({
  postsNumber : 4, 
  noThumbnail : &#39;http://2.bp.blogspot.com/-Z7jG9iO9OTg/Vazz6YJnFQI/AAAAAAAALVs/wlSvXPgdDAo/s1600/no_image_available.png&#39; 
 });
});>
$(function(){
  $(&#39;.search-here&#39;).submit(function(e){
    if($(&#39;.search-box .search-field&#39;).val().length==0){
       $(&#39;.search-box .search-alert&#39;).fadeIn().css(&#39;display&#39;,&#39;inline-block&#39;);
      e.preventDefault();
    }
  });
});
</script>

postsNumber : 4

noThumbnail : 'http://2.bp.blogspot.com/-Z7jG9iO9OTg/Vazz6YJnFQI/AAAAAAAALVs/wlSvXPgdDAo/s1600/no_image_available.png' 

<ul class='megamenu' id='megamenuid'>
<li><a href='/'>Home</a></li>    
<li><a class='menu-target' href='#'>MENU TITLE</a>
<ul>
<li><a href='http://ADDURLHERE.com'>LABEL NAME</a></li>
<li><a href='http://ADDURLHERE.com'>LABEL NAME</a></li>
<li><a href='http://ADDURLHERE.com'>LABEL NAME</a></li>
</ul>
</li>
<li><a class='menu-target' href='#'>MENU TITLE</a>
<ul>
<li><a href='http://ADDURLHERE.com'>LABEL NAME</a></li>
<li><a href='http://ADDURLHERE.com'>LABEL NAME</a></li>
<li><a href='http://ADDURLHERE.com'>LABEL NAME</a></li>
</ul></li>
<li><a href='http://ADDURLHERE.com'>Normal Link</a></li>
<li class='search-box'>
<form action='/search' class='search-here' method='get'>
<input class='search-field' name='q' placeholder='Search Here' size='30' type='text'/>
<input class='search-button' type='submit' value=' '/>
</form>
<p class='search-alert'>Search form is empty!</p>
</li>
</ul>
<div class='clear'/>
<div class='clear'/>

1. Langkah 1 : Silahkan Login dan Back Up template Anda.
2. Langkah 2 : Beri tanda centang pada kotak di samping tulisan Expand Template Widget kemudian cari kode ]]></b:skin> .
3. Langkah 3 : Copy kode di bawah ini di atas kode ]]></b:skin>
   .comment-body-author {
        border: 1px solid #333;
        background: #181816;
        margin: 10px 10px 10px 15px;
        padding: 5px;
        }
4. Langkah 4 : Silahkan Anda cari kode yang di bawah ini
   <dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
5. Langkah 5 : Tambahkan kode dibawah ini berikut di atas kode yang telah Anda temukan pada Langkah 4
   <b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>
6. Langkah 6 : Tambahkan kode </b:if> di bawah kode yang Anda temukan pada Langkah 4
7. Langkah 7 : Copy kode di bawah ini di atas kode ]]></b:skin>
   <b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
</b:if>
   

   Keterangan :
   Kode yang berwarna kuning merukapakn kode yang saudara cari sesuai Langkah 4 sedangkan kode yang berwarna hijau adalah kode yang baru anda tambahkan.
8. Langkah terakhir silahkan Save Template.