Membuat Map Widget Dengan JQuery

Niat Ngeblog - Sering kali kita banyak menambahkan widget pada blog kita, dan saking banyaknya akan memakan banyak tempat. Kondisi ini akan membuat blog kita tampak tidak rapi. Dengan trik membuat map untuk widget-widget kita, akan mengurangi pemakain banyak tempat pada blog.

Caranya sangat lah mudah bro, untuk langkah pertama atur letak widget kamu seperti gambar di bawah ini :

Note : Teknik JQuery Map ini hanya akan memuat 3 widget saja

Kemudian copy kode widget JQuery ini dan letakkan tepat di urutan paling atas widget yang telah kamu atur tadi.

<style type="text/css">
.tabber {
 padding: 0px !important;
 border: 0 solid #bbb;
}
.tabber h2 {
 float: left;
 margin: 0 1px 0 0;
 font-size: 12px;
 padding: 3px 5px;
 border: 1px solid #bbb;
 margin-bottom: -1px; /*--Pull tab down 1px--*/
 overflow: hidden;
 position: relative;
 background: #e0e0e0;
 cursor:pointer;
 -moz-border-radius:5px 5px 0 0;
 border-radius:5px 5px 0 0;
}
html .tabber h2.active {
 background: #fff;
 border-bottom: 1px solid #fff; /*--"Connect" active tab to its content--*/
}
.tabber .widget-content {
 border: 1px solid #bbb;
 padding: 10px;
 background: #fff;
 clear:both;
 margin:0;
}
.codewidget, #codeholder {
 display:none;
}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bloggertabs0.1_min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
 $('#codeholder').bloggerTabber ({
  tabCount : 3
 });
});
</script>

<!-- to make sure the widget works, do not alter the code below -->
<div id='codeholder'><p>Get this <a href="http://www.bloggersentral.com/2011/05/create-tabbed-content-blogger-widgets.html" target="_blank">widget</a></p></div>

Setelah kamu save dan lihat blog kamu, maka widget tersebut akan menjadi map.

Selamat mencoba