Dente On The Blog: widget

<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: justify;"><div class="separator" style="clear: both; text-align: center;"><a alt="Tabs Widget" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAOIflTuMxAfGVw43VE2KHNw4XMFqXH8wRDwzUnwzrZI3wtjdNj40ET157lHsUxNy0unYrRxZeOuUGZHLAyM6QfGkgMvc8042JDhbUY8RpE2XMZr2WjCqIfn-a8aP-1mZ8PSqBrdKsQZCK/s1600/Capture.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" tittle="Cara Membuat Tabs Widget"><img border="0" height="88" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAOIflTuMxAfGVw43VE2KHNw4XMFqXH8wRDwzUnwzrZI3wtjdNj40ET157lHsUxNy0unYrRxZeOuUGZHLAyM6QfGkgMvc8042JDhbUY8RpE2XMZr2WjCqIfn-a8aP-1mZ8PSqBrdKsQZCK/s400/Capture.JPG" width="400" /></a></div><div style="text-align: right;"></div><a href="http://justdente.blogspot.com/2011/11/tabs-widget.html" rel="nofollow"><b>Cara membuat tabs widget</b></a> untuk menghemat ruang pada blog sudah sering di tulis pada artikel blog-blog tetangga. Bermacam-macam <i><a href="http://justdente.blogspot.com/search/label/trik" rel="nofollow">trik</a></i> yang mereka berikan untuk dapat berbagi ilmu kepada para <i>reader</i>.  Ada yang mudah untuk dipraktekan namun ada juga yang cukup membingungkan dan diantaranya ada juga yang memberikan trik yang sama karena <i>"mungkin mereka 1 guru dan 1 ilmu</i>" :) Kali ini saya juga ingin ikut berpartisipasi dalam menyebarkan  <a href="http://justdente.blogspot.com/2011/11/tabs-widget.html" rel="nofollow"><b>cara membuat tab widget</b></a> yang menurut saya <u><b>cukup mudah</b></u> untuk dipraktekan...</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;">Seperti biasa silahkan masuk ke <b>blogger</b> >>> <b>rancangan</b> >>> <b>Edit HTML</b></div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;"><u><i><b>Langkah Pertama</b></i></u>: Masukan kode dibawah ini tepat diatas kode <b></head></b></div><div style="background: none repeat scroll 0% 0% rgb(255, 250, 205); border: 1px solid rgb(187, 187, 187); height: 200px; overflow: auto; padding: 10px; text-align: justify; width: 450px;"><span style="font-size: x-small;"><link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/></span><br />
<span style="font-size: x-small;"><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script></span><br />
<span style="font-size: x-small;"><script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script></span><br />
<span style="font-size: x-small;"> </span><br />
<span style="font-size: x-small;"><script></span><br />
<span style="font-size: x-small;">$(document).ready(function() {</span><br />
<span style="font-size: x-small;">$("#tabs").tabs();</span><br />
<span style="font-size: x-small;">});</span><br />
<span style="font-size: x-small;"></script> </span></div><div style="text-align: justify;"><br />
<u><i><b>Langkah selanjutnya</b></i></u> : Cari kode <b><div id='sidebar-wrapper'></b> atau terserah anda ingin memasang <b><a href="http://justdente.blogspot.com/2011/11/tabs-widget.html">tabs widget</a></b> ini dibagian mana pada blog anda :) dan letakan kode dibawah ini tepat dibawahnya.</div><div style="background: none repeat scroll 0% 0% rgb(255, 250, 205); border: 1px solid rgb(187, 187, 187); height: 200px; overflow: auto; padding: 10px; text-align: justify; width: 450px;"><span style="font-size: x-small;"><div id="tabs"></span><br />
<span style="font-size: x-small;"><ul></span><br />
<span style="font-size: x-small;"><li><a href="#fragment-1"><span></span><span style="color: red; font-size: x-small;">Popular Post</span><span style="font-size: x-small;"></span></a></li></span><br />
<span style="font-size: x-small;"><li><a href="#fragment-2"><span></span><span style="color: red; font-size: x-small;">Categories</span><span style="font-size: x-small;"></span></a></li></span><br />
<span style="font-size: x-small;"><li><a href="#fragment-3"><span></span><span style="color: red; font-size: x-small;">Archive</span><span style="font-size: x-small;"></span></a></li></span><br />
<span style="font-size: x-small;"></ul></span><br />
<span style="font-size: x-small;"><div id="fragment-1"></span><br />
<span style="font-size: x-small;"><b:section class='sidebar' id='sidebartab1' preferred='yes'></span><br />
<span style="font-size: x-small;"><b:widget id='PopularPosts1' locked='false' title='Popular Post' type='PopularPosts'/></span><br />
<span style="font-size: x-small;"></b:section></span><br />
<span style="font-size: x-small;"></div></span><br />
<span style="font-size: x-small;"><div id="fragment-2"></span><br />
<span style="font-size: x-small;"><b:section class='sidebar' id='sidebartab2' preferred='yes'></span><br />
<span style="font-size: x-small;"><b:widget id='Label1' locked='false' title='Labels' type='Label'/></span><br />
<span style="font-size: x-small;"></b:section></span><br />
<span style="font-size: x-small;"></div></span><br />
<span style="font-size: x-small;"><div id="fragment-3"></span><br />
<span style="font-size: x-small;"><b:section class='sidebar' id='sidebartab3' preferred='yes'></span><br />
<span style="font-size: x-small;"><b:widget id='BlogArchive1' locked='false' title='Archive' type='BlogArchive'/></span><br />
<span style="font-size: x-small;"></b:section></span><br />
<span style="font-size: x-small;"></div></span><br />
<div style="color: lime;"><br />
</div><div style="color: lime;"><span style="font-size: x-small;"></div></span></div><br />
</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;">Setelah itu klik <b>PRATINJAU</b> terlebih dahulu, jika sudah <b>OK</b>, <b>SIMPAN TEMPLATE</b> dan <b> </b><b>Selesai</b>. <br />
<b><br />
</b><br />
<u><b><i>Catatan:</i></b></u> <br />
Untuk tulisan yang berwana <span style="color: red;">merah</span>, silahkan ganti dengan nama dan <b>widget</b> yang sesuai dengan selera anda. Anda juga bisa menambahkan <b>tabs</b> dengan menambah kode dibawahnya sebelum kode <span style="color: lime;"></div></span> yang berwarna <span style="color: lime;">hijau</span>. </div><div style="text-align: justify;"><u><b><i>contoh:</i></b></u></div><div style="background: none repeat scroll 0% 0% rgb(255, 250, 205); border: 1px solid rgb(187, 187, 187); height: 200px; overflow: auto; padding: 10px; text-align: justify; width: 450px;"><br />
<div style="color: black;"><span style="font-size: x-small;"><div id="fragment-</span><span style="color: blue; font-size: x-small;">3</span><span style="font-size: x-small;">"></span></div><div style="color: black;"><span style="font-size: x-small;"><b:section class='sidebar' id='sidebartab</span><span style="color: blue; font-size: x-small;">3</span><span style="font-size: x-small;">' preferred='yes'></span></div><div style="color: black;"><span style="font-size: x-small;"><b:widget id='BlogArchive1' locked='false' title='Archive' type='BlogArchive'/></span></div><div style="color: black;"><span style="font-size: x-small;"></b:section></span></div><span style="font-size: x-small;"></div></span><br />
<span style="font-size: x-small;"><div id="fragment-</span><span style="color: blue; font-size: x-small;">4</span><span style="font-size: x-small;">"></span><br />
<span style="font-size: x-small;"><b:section class='sidebar' id='sidebartab</span><span style="color: blue; font-size: x-small;">4</span><span style="font-size: x-small;">' preferred='yes'></span><br />
<span style="font-size: x-small;"><b:widget id='Followers1' locked='false' title='Followers' type='Followers'/></span><br />
<span style="font-size: x-small;"></b:section></span><br />
<span style="font-size: x-small;"></div></span><br />
<span style="font-size: x-small;"><br />
</span><br />
<span style="font-size: x-small;"> <span style="color: red;">< !-- dan seterusnya </span></span><span style="font-size: x-small;"><i>"perhatikan angka yang berwarna <span style="color: blue;">biru</span></i>" </span><span style="font-size: x-small;"><span style="color: red;">--></span></span><br />
<br />
<span style="color: lime; font-size: x-small;"></div> </span></div><div style="text-align: justify;"><br />
Demikian <b><a href="http://justdente.blogspot.com/2011/11/tabs-widget.html" rel="nofollow">Cara Membuat Tabs Widget</a></b> ala <b><a href="http://justdente.blogspot.com/">Dente On The Blog</a></b>, semoga trik ini dapat bermanfaat bagi kita semua dan jangan lupa untuk menjadi <b>follower</b> blog ini...<br />
<br />
<b>Terima Kasih</b></div></div>

Cara Membuat Tabs Widget

Cara membuat tabs widget untuk menghemat ruang pada blog sudah sering di tulis pada artikel blog-blog tetangga. Bermacam-macam trik yang m...