Cara Membuat Top Menu Statis Melayang di atas Header Blog

TUTORIAL tentang cara membuat top menu navigasi statis, sticky, atau melayang di atas header blog sudah beberapa kali di-share di blog CB ini, seperti  Cara Membuat Header Bar (Top Menu) Mirip Facebook dan Cara Membuat Navigasi Menu di Atas Header Blog.

Yang dimaksud menu statis, sticky, atau melayang (floating) adalah navigasi menu yang tetap muncul saat halaman discroll ke bawah.

Kali ini CB share tentang Cara Membuat Top Menu Statis Melayang di Atas Header Blog plus Media Sosial. Contohnya? Lihat Demo.

Sticky menu merupakan salah satu trending di dunia desain situs web/blog saat ini.

Cara Membuat Top Menu Statis Melayang di Atas Header Blog
1. Template > Edit HTML
2. Copy + Paste kode berikut ini di atas kode ]]></b:skin>

/*--Sticky Navigation Menu Bar--*/
#MBL_wrapper .MBL_social_wrapper{margin-top: 15px;}

#MBL_wrapper
{
width: 100%;
margin: auto;
background: #fff;
height: 50px;
border-top: 5px solid #2c2f32;
border-bottom: 1px solid #EBEBEC;
-webkit-box-shadow: 0 1px 0 #D2D2D3, 0 1px 3px rgba(0, 0, 0, .2);
-moz-box-shadow: 0 1px 0 #d2d2d3, 0 1px 3px rgba(0,0,0,.2);
-o-box-shadow: 0 1px 0 #d2d2d3, 0 1px 3px rgba(0,0,0,.2);
box-shadow: 0 1px 0 #D2D2D3, 0 1px 3px rgba(0, 0, 0, .2);
position: fixed;
z-index: 999;
}

#MBL_wrapper .topmenu.notice
{
float: left;
width: 500px;
margin-top: 15px;
color: #fff;
}

#top_menu a
{
color: #fff;
}

#top_menu
{
display: block;
float: left;
list-style: none;
margin-top: 12px;
}

#top_menu li
{
display: inline-block;
margin-right: 15px;
font-family: 'Patua One', 'Helvetica Neue', Helvetica, Arial,Verdana,sans-serif;
font-size: 14px;
text-transform: uppercase;
}

#top_menu li ul
{
display: none;
}

#boxed_wrapper
{
width: 980px;
margin: auto;
}

.MBL_standard_wrapper
{
width: 960px;
margin: auto;
}

.MBL_standard_wrapper.wide
{
width: 980px;
}

.MBL_standard_wrapper.header
{
margin-bottom: 0px;
}

.MBL_social_wrapper
{
width: auto;
float: right;
}

#menuforall .MBL_social_wrapper
{
margin-top: 15px;
}

.MBL_social_wrapper ul
{
list-style: none;
}

.MBL_social_wrapper ul li
{
float: right;
margin-left: 5px;
}

.MBL_social_wrapper ul li img
{
width: 24px;
}

#MBL_menu_wrapper
{
width: 930px;
height: 50px;
padding: 0;
margin:auto;
}

.mainmenu.notice
{
float: left;
width: 600px;
padding: 17px 0 10px 12px;
z-index: 999;
}

#MBL_menu_wrapper .nav ul, #MBL_menu_wrapper .nav
{
list-style: none;
display: block;
float: left;
margin: 0 23px 0 5px;
width: 700px;
}

#MBL_menu_wrapper .nav ul li, #MBL_menu_wrapper .nav li
{
display: block;
float :left;
margin: 0;
}

#MBL_menu_wrapper .nav ul li ul, #MBL_menu_wrapper div .nav li ul, .main_nav li ul
{
display: none;
list-style: none;
background: #000;
position:absolute;
padding: 0;
margin-top: 51px;
width: 200px;
height: auto;
z-index: 1000;
padding-top: 5px;
border-bottom: 5px solid #000;
border-left: 0;
}

#MBL_menu_wrapper .nav ul li ul li ul, #MBL_menu_wrapper div .nav li ul, .main_nav li ul li ul
{
margin-left: 200px;
margin-top: 5px;
}

#MBL_menu_wrapper .nav li ul li a, .nav li ul li a, #MBL_menu_wrapper .nav ul li.current_page_parent ul.sub-menu li.current_page_item a, .nav li.current-menu-parent ul.sub-menu li.current_page_item a
{
background: none;
}

.main_nav li ul li
{
width: 100%;
}

#MBL_menu_wrapper .nav li ul li a, #MBL_menu_wrapper .nav li.current-menu-item ul li a, #MBL_menu_wrapper .nav li ul li.current-menu-item a,#MBL_menu_wrapper .nav ul li ul li a, #MBL_menu_wrapper .nav ul li.current-menu-item ul li a, #MBL_menu_wrapper .nav ul li ul li.current-menu-item a
{
color: #fff;
display: block;
width: 188px;
font-weight: bold;
line-height: 1em;
padding: 10px 0 10px 12px;
background: none;
}

.main_nav ul, .main_nav
{
list-style: none;
margin: auto;
width: 600px;
height: 50px;
z-index: 999;
float: left;
border-left: 1px solid #EBEBEC;
}

.main_nav ul li,  .main_nav li
{
display: block;
float :left;
margin: 0;
}

.main_nav ul li a,  .main_nav li a
{
display: block;
float :left;
margin: 0 0 0 0;
padding: 18px 15px 14px 15px;
color: #2c2f32;
font-family: 'Patua One';
text-transform: uppercase;
font-size: 13px;
font-weight: 500;
border-right: 1px solid #EBEBEC;
}

.main_nav ul li ul li a,  .main_nav li ul li a
{
width: 165px;
padding: 7px 19px 7px 16px;
border: 0;
font-size: 12px;
font-weight: normal;
color: #ccc;
font-family: 'Helvetica Neue', Helvetica, Arial,Verdana,sans-serif;
}

.main_nav ul li ul li:last-child a,  .main_nav li ul li:last-child a
{
border-bottom: 0;
}

.main_nav ul li a:hover,  .main_nav li a:hover, .main_nav ul li a.hover,  .main_nav li a.hover, .main_nav ul li a:active,  .main_nav li a:active, .main_nav li.current-menu-item a
{
color: #fff;
background: #1bc4de;
}

.main_nav li:last-child a:hover, .main_nav li:last-child a.hover
{
border-right: 0;
}

.main_nav li ul li a,  .main_nav li.current-menu-item ul li a,#MBL_menu_wrapper .nav ul li ul li a, #MBL_menu_wrapper .nav ul li.current-menu-item ul li a, #MBL_menu_wrapper .nav ul li ul li.current-menu-item a,
{
display: block;
width: 170px;
line-height: 0.7em;
padding: 5px 0 5px 30px;
}

.main_nav li ul li a:hover,  .main_nav li.current-menu-item ul li a:hover, .main_nav li ul li a.hover,  .main_nav li.current-menu-item ul li a.hover, #MBL_menu_wrapper .nav ul li.current-menu-item ul li a:hover, #MBL_menu_wrapper .nav ul li ul li.current-menu-item a:hover, .main_nav li ul li:last-child a:hover, .main_nav li ul li:last-child a.hover
}

 div
{
margin:0;
padding:0;
border:0;
font-weight:inherit;
font-style:inherit;
font-size:100%;
font-family:inherit;
vertical-align:baseline;
}

a
{
color: #2C2F32;
text-decoration: none;
-webkit-transition: color .2s linear, background .1s linear;
-moz-transition: color .2s linear, background .1s linear;
-ms-transition: color .2s linear, background .1s linear;
-o-transition: color .2s linear, background .1s linear;
transition: color .2s linear, background .1s linear;
}

/* Font Face ----------------------------------------------- */
@font-face {
font-family: 'Patua One';
font-style: normal;
font-weight: 400;
src: local('Patua One'), local('PatuaOne-Regular'), url(http://themes.googleusercontent.com/static/fonts/patuaone/v3/yAXhog6uK3bd3OwBILv_SLO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');
}

ul{
margin: 0;
padding: 0;
list-style: none;
}

3. Copy + Paste kode berikut ini di bawah kode <body>

Jangan lupa ganti tanda pagar (#) dengan link dan nama-nama menu-nya, juga link media sosialnya!

<!-- Begin Navigation -->
<div id='MBL_wrapper'>
<div class='MBL_standard_wrapper'>
<div class='menu-main-menu-container'><ul class='main_nav' id='main_menu'><li class='menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-533' id='menu-item-533'>

<a href='#'>Home</a></li>
<li><a href='#'>Blog</a></li>
<li><a href='#'>About Us</a></li>
<li><a href='#'>Advertise Here</a></li>
<li><a href='#'>Contact Us</a></li>
<li><a href='htto://cbbloggerlab.blogspot.com'>CBBloggerLab</a></li>
</ul></div>
<div id='menu_border_wrapper'></div>
<div class='MBL_social_wrapper'>
<ul>

<li><a href='#' target='_blank'><img alt='' src='http://4.bp.blogspot.com/-xodteBnLv_o/UMt2MhUxNTI/AAAAAAAAJkI/OaeijLxpGbM/s1600/facebook.png'/></a></li>

<li><a href='#' target='_blank'><img alt='' src='http://3.bp.blogspot.com/-y2QGcmB-W8c/UMt2N7nGwZI/AAAAAAAAJkU/cgiX_vZKuJE/s1600/twitter.png'/></a></li>

<li><a href='#' target='_blank' title='Google+'><img alt='' src='http://1.bp.blogspot.com/-35AQ0H_SNHQ/UMt2dVSPtmI/AAAAAAAAJkg/cV1dPIIQoN4/s1600/google.png'/></a></li>

<li><a href='#' target='_blank' title='Linkedin'><img alt='' src='http://2.bp.blogspot.com/-qu2EsReNPng/UMt3aIQ6sSI/AAAAAAAAJlY/RcCW3BI06o4/s1600/linkedin.png'/></a></li>

<li><a href='#' target='_blank' title='Pinterest'><img alt='' src='http://3.bp.blogspot.com/-nZJuxAiV91c/UMt2xc-ydNI/AAAAAAAAJlE/y_2cYBzI8-M/s1600/pinterest.png'/></a></li>

<li><a href='#' target='_blank'><img alt='' src='http://2.bp.blogspot.com/-kjb4ky538Ss/UMt2yD_43JI/AAAAAAAAJlM/TsonJ3OT0r4/s1600/rss.png'/></a></li>

</ul>
</div>
</div>
</div>
<!-- End Navigation -->

4. Tambahkan kode padding-top:50px di dalam kode #header-wrapper. Contohnya begini:

#header-wrapper {

overflow: hidden;
padding-top:50px;
}

Bisa juga dengan menambahkan kode margin-top:50px di kode "wrapper" atau "main-wrapper" atau "content-wrapper". Intinya, kode ini untuk memunculkan header biar gak ketutup top menu statis melayang  yang baru saja kita buat.

Angka 50 bisa berkurang, bisa juga ditambah, tergantung "pas" tidaknya ukuran jarak header dengan top menu statis tadi!

Good Luck!

Sumber
http://www.mybloggerlab.com/2012/12/how-to-create-sticky-floating-navigation-menu.html

Read more ...

Cara Membuat Navigasi Menu Blog ala Metro UI Windows 8

SETELAH share tentang Cara Membuat Featured Posts Metro UI Style, kali ini CB share Cara Membuat Navigasi Menu Blog ala Metro UI juga. Bagi yang belum paham, Metro UI itu merujuk pada tampilan menu Start Windows 8.

Ini dia penampakan Navigasi Menu Metro UI Style. Demonya bisa dilihat di CB Blogger Lab.

Dengan tampilan Navigasi Menu Blog ala Metro UI Windows 8 ini, maka blog Anda akan "unik", lain dari yang lain, kecuali yang lain itu juga sama-sama pang juga!

Ini dia cara memasangnya:
1. Template > Edit HTML
2. COPAS kode berikut ini di atas kode ]]></b:skin>

/*===MBL METRO UI Menu==*/

body {
 font-family:sans-serif;
}
a {
 text-decoration:none;
}
.mblmetromenu {
 width:960px;
 margin:auto;
}
@media screen and (max-width:960px) {
 .mblmetromenu {
 width:100%;
 }
}

/* MblMetroMenu */
.MblMetroMenu {
 position:relative;
}
.om-nav {
 position:absolute;
 width:100%;
 z-index:999;
 display:none;
}
.om-ctrlbar {
 width:100%;
 height:48px;
}
.om-ctrlitems {
 margin:auto;
 padding:0px;
 height:48px;
 display:inline-block;
 text-align:center;
}
.om-ctrlitem {
 height:48px;
 width:48px;
 display:none;
 cursor:pointer;
 float:left;
 opacity:0.5;
 -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=50)" !important;
 filter: alpha(opacity=50) !important; /* For IE8 and earlier */ }
.om-ctrlitem:hover {
 opacity:0.8;
 -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=80)" !important;
 filter: alpha(opacity=80) !important; /* For IE8 and earlier */ }
.om-activectrlitem {
 opacity:1 !important;
 -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)" !important;
 filter: alpha(opacity=100) !important; /* For IE8 and earlier */ }
.om-controlitems {
 width:960px;
 margin:auto;
}
.om-controlitem {
 height:48px;
 cursor:pointer;
}
.om-closenav {
 float:left;
}
.om-movenext {
 float:right;
}
.om-itemholder {
 margin:auto;
 padding:20px 0px;
}
@media screen and (max-width:960px) {
 .om-closenav {
  position:absolute;
  z-index:9999;
  left:0;
  top:0;
 }
 .om-movenext {
  position:absolute;
  z-index:9999;
  right:0;
  top:0;
 }
 .om-controlitems {
  width:100%;
 }
 .om-itemholder {
  width:100%;
 }
 }
.om-centerblock {
 display:inline-block;
}
.om-item {
 display:none;
}
.om-showitem {
 margin:5px;
 float:left;
 display:none;
}
/* END MblMetroMenu */

/* TILE BUTTONS */
/* Standar Buttons */
.tile-bt {
 text-align:center;
 cursor:pointer;
 width:90px;
 height:90px;
}
.tile-bt a {
 display:block;
 padding-top:12px;
 text-decoration: !important;
}
.tile-bt img {
 margin:0 auto 0 auto;
 padding-bottom:5px;
 height:48px;
 width:48px;
 position:relative;
 display:block;
}
.tile-bt span {
 font-size:12px;
 padding-bottom:10px;
 display:block;
}
.tile-bt:active {
 opacity:0.5;
}
/* End Standard Buttons */


/* Large Buttons */
.tile-bt-large {
 width:190px;
 height:90px;
 line-height:90px;
 text-align:center;
 cursor:pointer;
}
.tile-bt-large a {
 display:block;
 text-decoration: !important;
}
.tile-bt-large img {
 vertical-align: middle;
 margin:auto;
 padding:0px;
 position:relative;
 width:48px;
 height:48px;
}
.tile-bt-large span {
 vertical-align: middle;
 display:inline;
}
.tile-bt-large:active {
 opacity:0.5;
}
/* End Large Buttons */
/* Extralarge Buttons */
.tile-bt-extralarge {
 text-align:center;
 cursor:pointer;
 width:190px;
 height:190px;
}
.tile-bt-extralarge a {
 display:block;
 padding-top:52px;
 text-decoration: !important;
}
.tile-bt-extralarge img {
 margin:0 auto 0 auto;
 padding-bottom:22px;
 height:80px;
 width:80px;
 position:relative;
 display:block;
}
.tile-bt-extralarge span {
 font-size:14px;
 padding-bottom:20px;
 display:block;
}
.tile-bt-extralarge:active {
 opacity:0.5;
}
/* End Extralarge Buttons */

/* END TILE BUTTONS */

/* SHADOW LIST */
.shadow-white, .shadow-black, .shadow-blue, .shadow-green, .shadow-red {
 /*display:inline-block;*/
}
.shadow-white:hover {
 box-shadow:0px 0px 6px 3px #fff;
 -webkit-box-shadow:0px 0px 6px 3px #fff;
 -moz-box-shadow:0px 0px 6px 3px #fff;
 -o-box-shadow:0px 0px 6px 3px #fff;
 -ms-box-shadow:0px 0px 6px 3px #fff;
}
.shadow-blue:hover {
 box-shadow:0px 0px 6px 3px #38D1F7;
 -webkit-box-shadow:0px 0px 6px 3px #38D1F7;
 -moz-box-shadow:0px 0px 6px 3px #38D1F7;
 -o-box-shadow:0px 0px 6px 3px #38D1F7;
 -ms-box-shadow:0px 0px 6px 3px #38D1F7;
}
.shadow-green:hover {
 box-shadow:0px 0px 6px 3px #AACA37;
 -webkit-box-shadow:0px 0px 6px 3px #AACA37;
 -moz-box-shadow:0px 0px 6px 3px #AACA37;
 -o-box-shadow:0px 0px 6px 3px #AACA37;
 -ms-box-shadow:0px 0px 6px 3px #AACA37;
}
.shadow-red:hover {
 box-shadow:0px 0px 6px 3px #E81750;
 -webkit-box-shadow:0px 0px 6px 3px #E81750;
 -moz-box-shadow:0px 0px 6px 3px #E81750;
 -o-box-shadow:0px 0px 6px 3px #E81750;
 -ms-box-shadow:0px 0px 6px 3px #E81750;
}
.shadow-black:hover {
 box-shadow:0px 0px 6px 3px #444;
 -webkit-box-shadow:0px 0px 6px 3px #444;
 -moz-box-shadow:0px 0px 6px 3px #444;
 -o-box-shadow:0px 0px 6px 3px #444;
 -ms-box-shadow:0px 0px 6px 3px #444;
}
/* END SHADOW LIST */
/* BACKGROUND LIST */
/* Solid Colors */
.solid-blue { background:#00BBE2; }
.solid-blue-2 { background:#2C84EE; }
.solid-darkblue { background:#044E94; }
.solid-violetred { background:#781766; }
.solid-red { background:#E51400;}
.solid-red-2 { background:#E81750; }
.solid-pink { background:#FF539B; }
.solid-purple { background:#D02090; }
.solid-orange { background:#FB8F02; }
.solid-orange-2 { background:#FF6600; }
.solid-orange-3 { background:#DD5F37; }
.solid-coral { background:#CD5B45; }
.solid-green { background:#67B239; }
.solid-green-2 {background:#96BF01; }
.solid-darkgreen { background:#016C38; }
.solid-olive { background:#999900}
.solid-grass { background:#CDCD00; }
.solid-darkred { background:#5F0000; }
.solid-gold { background:#FEE9AE; }
.solid-yellow { background:#F7D100; }
.solid-black { background:#000; }
.solid-smoke { background:#F5F5F5; }
/* End Solid Colors */

/* MISC */
.clearspace { clear: both; }
.floatleft { float:left; }
.floatright { float:right; }
.none { display: none !important; width:0px !important; }
.light-text {
 color:#fff;
}
.dark-text {
 color:#1e1e1e;
}
.gradient {
 background: -moz-linear-gradient(-45deg,  rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,0.3))); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(-45deg,  rgba(255,255,255,0) 00%,rgba(255,255,255,0.3) 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(-45deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(-45deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%); /* IE10+ */
 background: linear-gradient(-45deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%); /* W3C */
}
.margin-5 { margin:5px; }

3. COPAS kode berikut ini di bawah kode header atau di atas kode menu. Bisa juga menggantikan kode menu yang ada sebelumnya, replace saja dengan kode berikut ini:

<!-- mblmetromenu -->
<div class="mblmetromenu">

<div data-navid="om-nav" class="tile-bt-extralarge solid-violetred shadow-black margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="http://1.bp.blogspot.com/-1e7sOUI4miE/UMnHdKMffTI/AAAAAAAAJaQ/y3xR-9BNINI/s1600/home.png" alt="" />
<span class="light-text">Homepage</span>
</a>
</div>
   
<div data-navid="om-nav" class="tile-bt-large solid-coral shadow-red margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="http://3.bp.blogspot.com/-OKlDEjd3DyQ/UMnHyxn_apI/AAAAAAAAJaY/DbBPG79a-xU/s1600/messanger.png" alt="" />
<span class="light-text">About US</span>
</a>
</div>
   
<div data-navid="om-nav2" class="tile-bt solid-purple shadow-blue margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="http://1.bp.blogspot.com/-ZabrvxcoO_A/UMnH-8h_glI/AAAAAAAAJag/qtGW4c9kOKg/s1600/rss.png" alt="" />
<span class="light-text">Rss Feeds</span>
</a>
</div>
   
 <div data-navid="om-nav" class="tile-bt-large solid-red shadow-red margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="http://3.bp.blogspot.com/-PXSPYg5B3dI/UMnIKNsGLDI/AAAAAAAAJao/XWlIvLhJTAg/s1600/search.png" alt="" />
<span class="light-text">Search</span>
</a>
</div>
     
 <div data-navid="om-nav2" class="tile-bt solid-darkred shadow-red margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="http://2.bp.blogspot.com/-0XPGQ944VLU/UMnIlODiItI/AAAAAAAAJaw/LNBotNMbPD0/s1600/mail.png" alt="" />
<span class="light-text">Contact US</span>
</a>
</div>
     
<div data-navid="om-nav2" class="tile-bt solid-black shadow-black margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="http://4.bp.blogspot.com/-GckD4Ca5lVA/UMnIplw9GDI/AAAAAAAAJa4/M6OypxXIBhY/s1600/help.pn" alt="" />
 <span class="light-text">Get HELP</span>
</a>
 </div>
     
<div data-navid="om-nav2" class="tile-bt solid-orange shadow-black margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="http://1.bp.blogspot.com/-qFPzfaP6wNk/UMnJJPIXmjI/AAAAAAAAJbI/gSDHtW5y8Xw/s1600/youtbe.png" alt="" />
<span class="light-text">YouTube</span>
</a>
</div>
     
<div data-navid="om-nav2" class="tile-bt solid-darkblue shadow-blue margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="http://3.bp.blogspot.com/-yejzZVIQT14/UMnI5OiBqRI/AAAAAAAAJbA/hB4j8dQkoUk/s1600/face.png" alt="" />
<span class="light-text">Facebook</span>
</a>
</div>
     
<div data-navid="om-nav" class="tile-bt-large solid-blue shadow-blue margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="http://4.bp.blogspot.com/-TuiJy6qhQOg/UMnJam4XwjI/AAAAAAAAJbY/tyLP82SmbV4/s1600/photo.png" alt="" />
<span class="light-text">Photos</span>
</a>
</div>
     
<div data-navid="om-nav2" class="tile-bt solid-olive shadow-green margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="http://1.bp.blogspot.com/-sQ2itPD97gQ/UMnJ5mLaNNI/AAAAAAAAJbo/1XoBqKVwnzM/s1600/music.png" alt="" />
<span class="light-text">Music</span>
</a>
 </div>
     
<div data-navid="om-nav" class="tile-bt-large solid-blue-2 shadow-blue margin-5 floatleft MblMetroMenu">
<a href="http://www.mybloggerlab.com" class="gradient">
<img src="http://3.bp.blogspot.com/-9xF88_PUrZE/UMnrZV_8rJI/AAAAAAAAJdQ/uoC0sUcGUmQ/s1600/MBL.png" alt="" />
<span class="light-text">MyBloggerLab</span>
</a>
</div>
        <!-- End MblMetroMenu -->
  </div>
<!-- END mblmetromenu -->

4. Ganti link (#) dan nama-nama menunya sesuai dengan selera Anda.
4. Save!

Selamat, kini tampilan navigasi menu Anda keren bingit, mirip tampilan "Windows 8 Metro Menu". Good Luck!

Sumber:
http://www.mybloggerlab.com/2012/12/how-to-create-metro-ui-navigation-menu.html

Read more ...

Cara Mengubah Warna Tampilan Blog

SALAH satu masalah yang dihadapi "newbie" adalah Cara Mengubah Warna Tampilan Blog, misalnya warna latar belakang menu atau header dari hitam ke merah dst.

Mengubah warna sangat mudah, yaitu tinggal ganti kode warna HTML-nya di template. (Lihat Kode Warna HTML).

Contohnya, kita mau mengubah warna background menu:

1. Intip dulu di mana posisi kode warnanya dengan cara: arahkan cursor mouse ke bagian menu, lalu klik kanan, dan pilih "inspect element", maka akan muncul kode warna seperti #000 (hitam).
2. Template > Edit HTML 
3. Cari (Ctrl+F) elemen yang akan diubah warnanya
4. Ganti dengan kode warna lainnnya, misalnya dari HITAM (#000) menjadi MERAH (#c00).

MENGUBAH WARNA HURUF

Semua warna di template blog bisa diubah. Sebagai contoh, kita akan mengubah jenis huruf, ukuran huruf, dan warnanya. Maka, temukan kode-kode seperti ini:

Mengubah Warna Huruf
1. Template > Edit HTML
2. Cari [CTRL+F] kode body {3. Biasanya akan ada kode warna sepoerti color:#333333
4. Ubah menjadi, misalnya. #ff0000 

Mengubah Jenis Huruf
1. Template > Edit HTML
2. Cari [CTRL+F] kode #outer-wrapper {
3. Biasanya akan ditemukan kode seprti font: 14px Arial; or font-family:Arial;
4. Ganti saja jenis hurfnya menjadi, misalnya, Georgia, Helvetica, Times, etc.

INTINYA

Kode warna HTML berupa ANGKA, HURUF, atau kombinas ANGKA & HURUF, yang diawali dengan tanda pagar (#). Contohnya:

#000000 Black

#FFEBCD Blanchedalmond

#0000FF Blue

#8A2BE2 Blueviolet

#A52A2A Brown

#DEB887 Burlywood

Kode Warna Selengkapnya

CARA MODIFIKASI TOTAL

Bagi pengguna template bawaan blogger (default blogger template), lebih mudah lagi. Bukan hanya mengubah warna, tapi hampir semua elemen bisa dimodifikasi: ukuran, warna, jenis huruf, sidebar, dll. 

Caranya:

1. Template > klik "Customize" (bukan Edit HTML)

2. Panduan Lengkap ada di Blogger Template Designer.

Demikian Cara Mengubah Warna Tampilan Blog dan lainnya, dengan catatan: jangan habiskan waktu dan energi Anda ke desain tampilan, tapi fokuslah ke Konten Berkualitas sebagaimana disarankan Google!

Warna tidak pengaruh bagi indeks Google! Warna hanya masalah "selera" dan "estetika". Warna dan desain yang kita pilih dan sukai, belum tentu disukai pengguna. Good Luck!

Read more ...

Mengubah Tampilan Windows 8 ke Windows 7 (Start Menu)

Cara memunculkan atau menampilkan Menu START di Windows 8 ala Win 7 & XP tanpa menghilangkan Start Menu Asli Win 8.

TAMPILAN Windows 8 is OK, look good. Flat Metro UI Style! Tapi, bagi sebagian orang, termasuk CB, yang sudah lama bangat terbiasa dengan Win 7 ke bawah, tampilan start menu Win 8 cukup "ribet". Beras lebih mudah menggunakan Start Menu alas Windows 7 seperti dulu.

Maka, seperti biasa, Googling saja dan menemukan salah satu cara praktis Mengubah Tampilan Windows 8 ke Windows 7 (Start Menu), yaitu hanya dengan satu klik: Start is Back!

Tenang, tampilan Win 8 masih ada kok, gak hilang. Begitu kita install Start is Back, tampilan Win 8 kita akan seperti Win 7, ada tombol Start di kiri bawah monitor, namun saat muose kita arahkan ke kanan bawah, menu tampilan Win 8 masih ada. So.... aman!

CB berbagi Mengubah Tampilan Windows 8 ke Windows 7 (Start Menu) setelah mencobanya dan berhasil.

Cara Mengubah Tampilan Windows 8 ke Windows 7: Memunculkan Start Menu

1. Buka situs Start is Back
2. Klik Download atau Get StartIsBack
3. Pilih versi Win 8 yang saat ini digunakan: Win 8 atau Win 8.1

Dengan klik salah satu tombol di atas, nanti file setup otomatis akan terdownload. 

4. Double Click file hasil download tadi
5. Lakukan setting seperlunya, sesuai selera.
6. Beres!

Selamat! Start Menu sudah muncul di kiri bawah layar monitor komputerAnda!

Start menu is back!The missing Windows 8 start menu is back. Get the most useful and authentic start menu for Windows 8 and Windows 8.1.

KENAPA START MENU?

Seperti dikemukakan di awal, ini menyangkut UX, User Experience. Soal kebiasaan, namun yang lebih penting adalah Start Menu membuat aktivitas blogging dll akan lebih cepat!

Star Menu memudahkan dan mempercepat kita untuk membuka program/aplikasi yang sering diguakan, juga memudahkan Restart dan Shutdown.

Genuine start menu:

1. Your faithful desktop friend which helps you:
2. Launch programs you use frequently
3. Open documents you're working on
4. Find stuff you're looking for
5. Go to system places in one click
6. Easily shut down your system
7. Feel at home with Windows 8

StartIsBack fully integrates with Windows 8 and provides original Windows 7 start menu experience, enhanced with many new features as well.

Jangan khawatir, katanya, Start is Back ini sepenuhnya mengintegrasikan Windows 8 dan Win 7 alias aman damai tanpa ada status tersangka yang bikin kisruh KPK-Polri!

APLIKASI LAIN
Jika cara di atas gagal --kayanya gak deh, jamin berhasil, kita bisa menggunakan aplikasi atau program lainnya, seperti Start Menu 8, Stardock Start 8, Classic Shell,  dll.

Demikian share CB tentang mengubah tampilan Win 8 menjadi Win 7 dengan menampilkan Start Menu. Good Luck!

Read more ...

Cara Membuat Kotak Pencarian plus Ikon Media Sosial

CARA memasang, menampilkan, atau membuat widget Kotak Pencarian (Search Box) plus Ikon Media Sosial di sidebar blog sangat mudah. Kita tinggal pasang kode.

Contohnya ada di sidebar blog CB  ini, namun yang persis sama dengan kode yang CB share di bawah ini demonya bisa dilihat di Online News Template yang baru saja dipasang.

Kotak Pencarian merupakan salah satu menu utama dalam sebuah situs web/blog. Kotak ini memudahkan pengunjung dan admin blog sendiri untuk mencari informasi yang dibutuhkan.

Blog yang tidak dipasangi kotak pencarian termasuk kategori yang buruk dan tidak user friendly. Sedangkan ikon sosial media berguna bagi nusa dan bangsa, eh.... berguna bagi meningkatkan jumlah follower, teman, atau liker.

Sebelum memasangnya, tentu saja Anda harus punya dulu akun-akun media sosialnya.

Cara Membuat Kotak Pencarian plus Ikon Media Sosial

1. Layout > Add a Gadget di sidebar paling atas.
2. Copy + Paste kode berikut ini di kolom "Content". Kolom judul biarkan kosong.

<!-- SEARCH BOX -->
<style>
#search-box {position: relative;width: 100%;margin: 0;}
#search-form {height: 30px;border: 1px solid #999;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;background-color: #fff;overflow: hidden;}
#search-text {font-size: 14px;color: #ddd;border-width: 0;background: transparent;}
#search-box input[type=&quot;text&quot;]
{width: 90%;padding: 7px 0 12px 1em;color: #333;outline: none;}
#search-button {position: absolute;top: 0;right: 0;height: 32px;width: 80px;font-size: 14px;color: #fff;text-align: center;line-height: 32px;border-width: 0;background-color: #4d90fe;-webkit-border-radius: 0px 5px 5px 0px;-moz-border-radius: 0px 5px 5px 0px;border-radius: 0px 5px 5px 0px;cursor: pointer;}
</style>
<div id='search-box'>
<form action='/search' id='search-form' method='get' target='_top'>
<input id='search-text' name='q' placeholder='Search here...' type='text'/>
<button id='search-button' type='submit'><span>Search</span></button>
</form>
</div>
<!-- SEARCH BOX END -->

<!-- SOCIAL PROFILE END -->
<div class='widget-content'>
<style>
#socialwidget {width: 300px;margin:10px 1px 10px 1px;}
    .TZ-social{padding:0 5px 15px;}
    .TZ-social img:hover{opacity:0.8}
    .googleplus {background: #ffffff;border-top: 1px solid white;border-bottom: 1px solid #ebebeb;font-size: 12px;color: #000;padding: 9px 11px;line-height: 1px;font-family: Verdana, Geneva, sans-serif;}
    .TZ {background: #ffffff;border-top: 1px solid white;font-size: 12px;color: #000;padding: 9px 11px;line-height: 1px;font-family: Verdana, Geneva, sans-serif;}
    .TZ span {color: #000;font-size: 11px;position: absolute;margin: -12px 100px;width: 310px;}
    #widgetbox .author-credit a {font-size: 10px;font-size: 10px;letter-spacing: 1px;color: #1E598E;text-decoration: none;}
    .TZDefault {border: 0px solid #dedede;text-shadow: #d08d00 1px 1px 0;background-color: #ff9b00;background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#ffca00),color-stop(1,#ff9b00));background: -webkit-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -moz-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -o-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -ms-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: linear-gradient(center top,#ffca00 0,#ff9b00 100%);}
    .TZDefault:hover {background-color: #ff9b00;background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#ffe480),color-stop(1,#ff9b00));background: -webkit-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -moz-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -o-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -ms-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: linear-gradient(center top,#ffe480 0,#ff9b00 100%);}
    </style>
    <div id='socialwidget'>
    <div class='TZ-social'>
    <!-- social ico -->
    <center>

    <a href='http://facebook.com/cbblogger' rel='nofollow' style='margin-right: 15px;' target='_blank'>
    <img alt='Facebook' src='http://2.bp.blogspot.com/-1UYOmpOWMv8/T65vfQFE80I/AAAAAAAAABY/H0t0CMEwyO0/s1600/facebook.png'/></a>

    <a href='http://twitter.com/contohblog' rel='nofollow' style='margin-right: 12px;' target='_blank'>
    <img alt='Twitter' src='http://1.bp.blogspot.com/-4xPK0hkcELk/T65vi83XGqI/AAAAAAAAAB0/ef6Af1cesHE/s1600/twitter.png'/></a>

    <a href='https://plus.google.com/106869251529186655236/posts' rel='me' style='margin-right: 12px;' target='_blank'>
    <img alt='Google Plus' src='http://3.bp.blogspot.com/-QEdzJcR1pfI/T65vgBJxxMI/AAAAAAAAABg/2eXrz-32Gds/s1600/gplus.png'/></a>

    <a href='http://www.pinterest.com/cbblogger' style='margin-right: 12px;' target='_blank'>
    <img alt='Pinterest' src='http://1.bp.blogspot.com/-2A1sbDGCgOw/T65vhAL4VZI/AAAAAAAAABo/2XDEIAFUuEI/s1600/pinterest.png'/></a>

    <a href='http://feeds.feedburner.com/contohblognih' rel='nofollow' style='margin-right: 12px;' target='_blank'>
    <img alt='RSS Feed' src='http://1.bp.blogspot.com/-wK9q4eUXA6U/T65viJ1HVmI/AAAAAAAAABs/DyIkCZdJ1Y4/s1600/rss.png'/></a>

    <a href='http://www.linkedin.com/in/cbblogger' rel='nofollow' style='margin-right: 12px;' target='_blank'>
    <img alt='Linkedin' src='http://1.bp.blogspot.com/-uQdbnT1u1e0/Ui26eZOy3VI/AAAAAAAAJqA/h4wzaYt2L_Y/s1600/linkedin.png'/></a>

    </center>
    </div>
    </div>
</div>
<!-- SOCIAL PROFILE END -->

3. Ganti ID yang berwarna merah dengan kepunyaan Anda.
4. Save!

Selamat, kini Kotak Pencarian plus Ikon Media Sosial sudah muncul di sidebar blog Anda!

Read more ...

Cara Membuat Related Post Berupa Gambar Thumbnail

UNTUK melengkapi posting Cara Membuat Recent Post (Lates Post, Posting Terbaru) dengan Gambar yang cocok buat blog foto dan toko online, kali ini CB share tentang Related Postnya (Posting Terkait) yang juga dengan gambar (thumbnail image).

Jenis Posting Terkait ini HANYA berupa gambar. Judul akan muncul saat cursor mouse diarahkan ke gambar.

Ini penampakan Related Posts dengan gambar yang sudah coba diterapkan dan berhasil di CB Blogger Lab.

Untuk blogger biasa --bukan blog foto/toko online, sebaiknya tidak menggunakan Related Post dengan Thumbnail Image biar lebih cepat loadingnya.

Related Post sendiri adalah bagian dari navigasi dan internal link blog yang bagus buat seo dan user. Google menganjurkan navigasi dan internal linking di halaman situs web. Related Post juga memudahkan user mencari informasi lain denga tag, label. atau topik yang sama.

Cara Membuat Related Post Berupa Gambar Thumbail di Blogger

1. "Template" > "Edit HTML"
2. Copy & Paste kode berikut ini di atas kode ]]></b:skin>

/* Related Posts dengan Gambar  */
.related-post .post-thumbnail {
z-index: 1;
position: relative;
width: 98px;
height: 98px;
margin: 0;
display: block;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: inset 2px 2px 5px #444;
-moz-box-shadow: inset 2px 2px 5px #444;
box-shadow: inset 2px 2px 5px #555;
}
.related-post {
float: left;
position: relative;
width: 98px;
height: 98px;
margin: 0 10px 10px 0;
background: #F6F6F6;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.related-post .related-post-title {
display: none;
float: left;
background: #000;
color: #fff;
text-shadow: none;
font-weight: bold;
padding: 10px;
position: absolute;
top: -20px;
left: 40px;
z-index: 2;
width: 200px;
-webkit-box-shadow: 0 0 2px #444;
-moz-box-shadow: 0 0 2px #444;
box-shadow: 0 0 2px #444;
}
.related-post:hover .related-post-title {display: block;}

Keterangan:

Yang berwarna merah adalah ukuran gambar.

2. Cari (Ctrl+F) kode yang seprti berikut ini:

<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'/>
<div class='post-footer-line post-footer-line-2'/>
<div class='post-footer-line post-footer-line-3'/>
</div>
</div>

3. Copy & Paste kode berikut ini di bawah kode tersebut:

<div id='related-posts'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>//<![CDATA[
var ry='<h3>Related Posts</h3>';rn='<h3>&nbsp;&nbsp;&nbsp;No related post available</h3>';rcomment='comments';rdisable='disable comments';commentYN='no';
var dw='';titles=new Array();titlesNum=0;urls=new Array();timeR=new Array();thumb=new Array();commentsNum=new Array();comments=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if('thr$total' in d){commentsNum[titlesNum]=d.thr$total.$t+' '+rcomment}else{commentsNum[titlesNum]=rdisable};if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;timeR[titlesNum]=d.published.$t;if('media$thumbnail' in d){thumb[titlesNum]=d.media$thumbnail.url}else{thumb[titlesNum]='http://lh3.ggpht.com/--Z8SVBQZ4X8/TdDxPVMl_sI/AAAAAAAAAAA/jhAgjCpZtRQ/no-image.png'};titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);c=new Array(0);e=new Array(0);f=new Array(0);g=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])){b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=timeR[a];f.length+=1;f[f.length-1]=thumb[a];g.length+=1;g[g.length-1]=commentsNum[a]}}urls=b;titles=c;timeR=e;thumb=f;commentsNum=g}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){var y=a.indexOf('?m=0');if(y!=-1){a=a.replace(/\?m=0/g,'')}for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);timeR.splice(b,1);thumb.splice(b,1);commentsNum.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;if(titles.length==0){dw+=rn}else{dw+=ry;dw+='<div class="clear"/></div><ul>';while(b<titles.length&&b<20&&b<maxresults){if(y!=-1){urls[c]=urls[c]+'?m=0'}if(commentYN=='yes'){comments[c]=' - '+commentsNum[c]}else{comments[c]=''};dw+='<div class="related-post"><div class="related-post-title">'+titles[c]+'</div><a href="'+urls[c]+'" rel="nofollow"><img border="0" class="post-thumbnail" alt="'+titles[c]+'" src="'+thumb[c]+'"/></a></div></div>';if(c<titles.length-1){c++}else{c=0}b++}dw+='</ul>'};urls.splice(0,urls.length);titles.splice(0,titles.length);document.getElementById('related-posts').innerHTML=dw};
//]]></script>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&quot;' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>varmaxresults=5;removeRelatedDuplicates();printRelatedLabels(&#39;<data:post.url/>&#39;);</script>
</b:if>
</div>
<div class='clear'/>

Keterangan:

Yang berwarna merah adalah jumlah Related Post atau Jumlah Thumbnail Image yang ingin ditampilkan.

4. Baca basmalah biar berhasil dan berkah... dan Save Template!

Mestinya, jika keempat langkah di atas dilakukan dengan baik dan benar, maka Related Post berupa Thumbnail Image (gambar) akan muncul di postingan blog. Good Luck!

Sumber

Read more ...

Cara Membuat Tabbed Widget di Sidebar Blog

MEMBUAT Tabbed Widget di Sidebar Blog bisa "menghemat" ruangan sidebar. Contohnya Tabber yang ada dalam ilustrasi gambar posting ini --Popular Posts, Latest Post, Comments. Keren 'kan?

Widget seperti ini dalam istilah bahasa Inggrisnya disebut "Multi Tabbed Widget".

Lihat DEMO

Di blog CB ini juga ada, tapi hanya dimunculkan di halaman depan dengan menampilkan "Terbaru", "Terpopuler", dan "Teraniaya".

Tabber Widget ini termasuk Navigasi Blog sekaligus Internal Link yang sangat dianjurkan Google.

Internal Link atau Navigasi Menu akan memudahkan pengunjung mengeksplorasi konten blog.

Cara Membuat Tabbed Widget di Sidebar Blog 

1. Template > Edit HTML
2. Cari (Ctrl+F) kode </head> dan Copy & Paste kode berikut ini tepat di atas </head>

<!-- Tabber Widget  -->
<script type='text/javascript'> 
//<![CDATA[ 
document.write('<style type="text/css">.tabber{display:none;}<\/style>'); 
function tabberObj(argsObj) 
{ 
  var arg; 
  this.div = null; 
  this.classMain = "tabber"; 
  this.classMainLive = "tabberlive"; 
  this.classTab = "tabbertab"; 
  this.classTabDefault = "tabbertabdefault"; 
  this.classNav = "tabbernav"; 
  this.classTabHide = "tabbertabhide"; 
  this.classNavActive = "tabberactive"; 
  this.titleElements = ['h2','h3','h4','h5','h6']; 
  this.titleElementsStripHTML = true; 
  this.removeTitle = true; 
  this.addLinkId = false; 
  this.linkIdFormat = '<tabberid>nav<tabnumberone>'; 
  for (arg in argsObj) { this[arg] = argsObj[arg]; } 
  this.REclassMain = new RegExp('\\b' + this.classMain + '\\b', 'gi'); 
  this.REclassMainLive = new RegExp('\\b' + this.classMainLive + '\\b', 'gi'); 
  this.REclassTab = new RegExp('\\b' + this.classTab + '\\b', 'gi'); 
  this.REclassTabDefault = new RegExp('\\b' + this.classTabDefault + '\\b', 'gi'); 
  this.REclassTabHide = new RegExp('\\b' + this.classTabHide + '\\b', 'gi'); 
  this.tabs = new Array(); 
  if (this.div) { 
    this.init(this.div); 
    this.div = null; 
  } 
} 
tabberObj.prototype.init = function(e) 
{ 
  var 
  childNodes, 
  i, i2, 
  t, 
  defaultTab=0, 
  DOM_ul, 
  DOM_li, 
  DOM_a, 
  aId, 
  headingElement; 
  if (!document.getElementsByTagName) { return false; } 
  if (e.id) { 
    this.id = e.id; 
  } 
  this.tabs.length = 0; 
  childNodes = e.childNodes; 
  for(i=0; i < childNodes.length; i++) { 
    if(childNodes[i].className && 
       childNodes[i].className.match(this.REclassTab)) { 
      t = new Object(); 
      t.div = childNodes[i]; 
      this.tabs[this.tabs.length] = t; 
      if (childNodes[i].className.match(this.REclassTabDefault)) { 
    defaultTab = this.tabs.length-1; 
      } 
    } 
  } 
  DOM_ul = document.createElement("ul"); 
  DOM_ul.className = this.classNav; 
  for (i=0; i < this.tabs.length; i++) { 
    t = this.tabs[i]; 
    t.headingText = t.div.title; 
    if (this.removeTitle) { t.div.title = ''; } 
    if (!t.headingText) { 
      for (i2=0; i2<this.titleElements.length; i2++) { 
    headingElement = t.div.getElementsByTagName(this.titleElements[i2])[0];
    if (headingElement) { 
      t.headingText = headingElement.innerHTML; 
      if (this.titleElementsStripHTML) { 
        t.headingText.replace(/<br>/gi," "); 
        t.headingText = t.headingText.replace(/<[^>]+>/g,""); 
      } 
      break; 
    } 
      } 
    } 
    if (!t.headingText) { 
      t.headingText = i + 1; 
    } 
    DOM_li = document.createElement("li"); 
    t.li = DOM_li; 
    DOM_a = document.createElement("a"); 
    DOM_a.appendChild(document.createTextNode(t.headingText)); 
    DOM_a.href = "javascript:void(null);"; 
    DOM_a.title = t.headingText; 
    DOM_a.onclick = this.navClick; 
    DOM_a.tabber = this; 
    DOM_a.tabberIndex = i; 
    if (this.addLinkId && this.linkIdFormat) { 
      aId = this.linkIdFormat; 
      aId = aId.replace(/<tabberid>/gi, this.id); 
      aId = aId.replace(/<tabnumberzero>/gi, i); 
      aId = aId.replace(/<tabnumberone>/gi, i+1); 
      aId = aId.replace(/<tabtitle>/gi, t.headingText.replace(/[^a-zA-Z0-9\-]/gi, '')); 
      DOM_a.id = aId; 
    } 
    DOM_li.appendChild(DOM_a); 
    DOM_ul.appendChild(DOM_li); 
  } 
  e.insertBefore(DOM_ul, e.firstChild); 
  e.className = e.className.replace(this.REclassMain, this.classMainLive); 
  this.tabShow(defaultTab); 
  if (typeof this.onLoad == 'function') { 
    this.onLoad({tabber:this}); 
  } 
  return this; 
}; 
tabberObj.prototype.navClick = function(event) 
{ 
  var 
  rVal, 
  a, 
  self, 
  tabberIndex, 
  onClickArgs; 
  a = this; 
  if (!a.tabber) { return false; } 
  self = a.tabber; 
  tabberIndex = a.tabberIndex; 
  a.blur(); 
  if (typeof self.onClick == 'function') { 
    onClickArgs = {'tabber':self, 'index':tabberIndex, 'event':event}; 
    /* IE uses a different way to access the event object */ 
    if (!event) { onClickArgs.event = window.event; } 
    rVal = self.onClick(onClickArgs); 
    if (rVal === false) { return false; } 
  } 
  self.tabShow(tabberIndex); 
  return false; 
}; 
tabberObj.prototype.tabHideAll = function() 
{ 
  var i; 
  for (i = 0; i < this.tabs.length; i++) { 
    this.tabHide(i); 
  } 
}; 
tabberObj.prototype.tabHide = function(tabberIndex) 
{ 
  var div; 
  if (!this.tabs[tabberIndex]) { return false; } 
  div = this.tabs[tabberIndex].div; 
  if (!div.className.match(this.REclassTabHide)) { 
    div.className += ' ' + this.classTabHide; 
  } 
  this.navClearActive(tabberIndex); 
  return this; 
}; 
tabberObj.prototype.tabShow = function(tabberIndex) 
{
  var div; 
  if (!this.tabs[tabberIndex]) { return false; } 
  this.tabHideAll(); 
  div = this.tabs[tabberIndex].div; 
  div.className = div.className.replace(this.REclassTabHide, ''); 
  this.navSetActive(tabberIndex); 
  if (typeof this.onTabDisplay == 'function') { 
    this.onTabDisplay({'tabber':this, 'index':tabberIndex}); 
  } 
  return this; 
}; 
tabberObj.prototype.navSetActive = function(tabberIndex) 
{
  this.tabs[tabberIndex].li.className = this.classNavActive; 
  return this; 
}; 
tabberObj.prototype.navClearActive = function(tabberIndex) 
{
  this.tabs[tabberIndex].li.className = ''; 
  return this; 
}; 
function tabberAutomatic(tabberArgs) 
{ 
  var 
    tempObj, 
    divs, 
    i; 
  if (!tabberArgs) { tabberArgs = {}; } 
  tempObj = new tabberObj(tabberArgs); 
  divs = document.getElementsByTagName("div"); 
  for (i=0; i < divs.length; i++) { 
    if (divs[i].className && 
    divs[i].className.match(tempObj.REclassMain)) { 
      tabberArgs.div = divs[i]; 
      divs[i].tabber = new tabberObj(tabberArgs); 
    } 
  } 
  return this; 
} 
function tabberAutomaticOnLoad(tabberArgs) 
{ 
  var oldOnLoad; 
  if (!tabberArgs) { tabberArgs = {}; } 
  oldOnLoad = window.onload; 
  if (typeof window.onload != 'function') { 
    window.onload = function() { 
      tabberAutomatic(tabberArgs); 
    }; 
  } else { 
    window.onload = function() { 
      oldOnLoad(); 
      tabberAutomatic(tabberArgs); 
    }; 
  } 
} 
/* Run tabberAutomaticOnload() unless the "manualStartup" option was specified */ 
if (typeof tabberOptions == 'undefined') { 
    tabberAutomaticOnLoad(); 
} else { 
  if (!tabberOptions['manualStartup']) { 
    tabberAutomaticOnLoad(tabberOptions); 
  } 
} 
//]]> 
</script>

3. Cari kode ]]></b:skin> dan Copas kode berikut ini di atasnya!

.tabberlive{
    margin:0;
    padding:5px;
    clear:both;
    background:#f8f8f8;
    border:1px solid #DDD;
}
.tabbernav {
    margin:0;
    padding: 3px 0;
    font-family:Arial,Helvetica,sans-serif;
    font-size:12px;
    font-weight:bold;
}
.tabbernav li {
    list-style:none;
    margin:0;
    display:inline;
}
.tabbernav li a {
    padding:6px 0.5em;
    margin-right:1px;
    border:1px solid #DDD;
    border-bottom:none;
    background:#0084ce;
    text-decoration:none;
    color:#ffffff;
}
.tabbernav li a:hover {
    color:#fff;
    background:#333;
    border:1px solid #DDD;
    text-decoration:none;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}
.tabbernav li.tabberactive a, .tabbernav li.tabberactive a:hover {
    background:#333;
    color:#fff;
    border-bottom: 0px solid #ffffff;
}
.tabberlive .tabbertab {
    padding:5px;
    border:0px solid #DDD;
    border-top:0;
    background:#ffffff;
}
.tabberlive .tabbertab h2,
    .tabberlive .tabbertabhide {
    display:none;
}
.tabbertab .widget-content ul{
    list-style:none;
    margin:0 0 10px 0;
    padding:0;
}
.tabbertab .widget-content li {
    border-bottom:1px solid #ddd;
    padding:2px 0 5px 0;
}

4. Cari kode <div id='sidebar-wrapper'> dan Copas kode berikut ini di bawahnya:

<div style='clear:both;'/> <div class='tabber'>
<b:section class='tabbertab' id='tab1' maxwidgets='1'/>
<b:section class='tabbertab' id='tab2' maxwidgets='1'/>
<b:section class='tabbertab' id='tab3' maxwidgets='1'/>
</div>

Catatan:
Kode di atas akan memunculkan Tiga Tabber Widget Baru di Sidebar bagian paling atas. 

Jika ingin menampilkan Tabbed Widget ini di bawah widget yang sudah ada, maka Copas kode tersebut sebelum kode penutup </div> pada kode elemen <div id='sidebar-wrapper'> atau yang semisalnya (elemen sidebar), seperti dalam gambar di bawah ini:

Untuk pengguna template New Johny Wuss, baik V1, V2, maupun V3, pemasangannya bisa seperti ini. Kodenya bukan <div id='sidebar-wrapper> tapi <div class='sidebar-wrapper>

5. Save Template!

Sekarang tinggal mengisi tab yang sudah siap dimunculkan di Sidebar.
Di "Layout" akan tampak tiga widget baru yang masih kosong. Silakan diisi dengan Latest Post, Popular Post, Comment, atau widget apa saja yang dikehendaki.

Klik Layout > Add a Gadget > silakan pilih widget yang akan ditampilkan.

Kode untuk Membuat Tabbed Widget di Sidebar Blog ini CB ambil dari My Blogger Buzz dan baru berani nge-share setelah sukses diterapkan. Good Luck!

Read more ...