Saya akan menyertakan widget Arsip, Links, dan Komentar yang dapat digunakan agar anda tidak susah payah lagi mencarinya. Saya jamin pemasangannya tidak sulit. Sekarang mari kita bahas cara membuat Tab Menu Deep Sea dengan JQuery. Ikuti langkah berikut.
Log in ke blogger
Klik Rancangan
Klik Tambah Gadget
Pilih HTML/JavaScript
Masukkan kode berikut ke dalamnya
<style>
/* css start */
#tabbed_box_1 {margin: 0px auto 0px auto;width:300px;}
.tabbed_box h4 {font-family:Arial, Helvetica, sans-serif;font-size:23px;color:#ffffff;letter-spacing:-1px;margin-bottom:10px;}
.tabbed_box h4 small {color:#e3e9ec;font-weight:normal;font-size:9px;font-family:Verdana, Arial, Helvetica, sans-serif;text-transform:uppercase;position:relative;top:-4px;left:6px;letter-spacing:0px;}
.tabbed_area {border:1px solid #494e52;background-color:#636d76;padding:8px;}
ul.tabs {margin:0px; padding:0px;margin-top:5px;margin-bottom:6px;}
ul.tabs li {list-style:none;display:inline;}
ul.tabs li a {background-color:#464c54;color:#ffebb5;padding:8px 14px 8px 14px;text-decoration:none;font-size:9px;font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;text-transform:uppercase;border:1px solid #464c54;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQmSz9zxKKYOpcYmPJNueiESaifhxMvEBwTz1EWAUABchyphenhyphenu4ytneBsZ3obT3_WXXNQZXKtTkd70zclu58YWnDsWEZM2FOXor5ViwxXwMWKywy-77Mbvkm3wursXg2ouyBqw431o_Finj0/s1600/tab_off.jpg); background-repeat:repeat-x;background-position:bottom;}
ul.tabs li a:hover {background-color:#2f343a;border-color:#2f343a;}
ul.tabs li a.active {background-color:#ffffff;color:#282e32;border:1px solid #464c54;border-bottom: 1px solid #ffffff;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwG-1n2ZuwUpq-jcHLW9hyphenhyphen_Z4KgKi6rmSf-AKA9MnohT5lQG9TM40aRkN_Yt3oi3akVpX7WXcvl1fZ-E_zy3vMibvWIJtvfEq0Xd-UXi45XaBUI-ZZpeG-exLJ3b64pWQmSr0Mo6hpu3E/s1600/tab_on.jpg);background-repeat:repeat-x;background-position:top; }
.content {background-color:#ffffff;padding:10px;border:1px solid #464c54;font-family:Arial, Helvetica, sans-serif; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-0kAYP1bhcPzoKMC4gpn9flwwvincMIIV2uZV6A0lclEz3a5auMG6b6eofpk-T6mW3wUzr5nGSA2UPGOXEXuxMe6DDFnAokr8bvTmvcSpGwibVFERVe6bjHBEKg4Zybr6YboHx8OBk1I/s1600/content_bottom.jpg);background-repeat:repeat-x;background-position:bottom;}
#content_2, #content_3 { display:none; }
.content ul {margin:0px;padding:0px 20px 0px 20px;}
.content ul li {list-style:none;border-bottom:1px solid #d6dde0;padding-top:15px;padding-bottom:15px;font-size:13px;}
.content ul li:last-child { border-bottom:none;}
.content ul li a {text-decoration:none;color:#3e4346;}
.content ul li a small {color:#8b959c;font-size:9px;text-transform:uppercase;font-family:Verdana, Arial, Helvetica, sans-serif;position:relative;left:4px;top:0px;}
.content ul li a:hover {color:#a59c83;}
.content ul li a:hover small {color:#baae8e;}
/* css end */
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
// When a link is clicked
$("a.tab").click(function () {
// switch all tabs off
$(".active").removeClass("active");
// switch this tab on
$(this).addClass("active");
// slide all content up
$(".content").slideUp();
// slide this content up
var content_show = $(this).attr("title");
$("#"+content_show).slideDown();
});
});
</script>
<div id="tabbed_box_1" class="tabbed_box">
<div class="tabbed_area">
<ul class="tabs">
<li><a href="javascript:void(0);" title="content_1" class="tab active">Arsip</a></li>
<li><a href="javascript:void(0);" title="content_2" class="tab">Services</a></li>
<li><a href="javascript:void(0);" title="content_3" class="tab">Komentar</a></li>
</ul>
<div id="content_1" class="content">
<div style="height: 250px; overflow: auto; width: 100%;">
<script style="text/javascript" src="http://bloekoetoek-blogonol.googlecode.com/files/blogonol-comment.js"></script><script style="text/javascript">var numcomments = 20;var showcommentdate = true;var showposttitle = true;var numchars = 100;var standardstyling = true;</script><script src="http://blogonol.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script></div>
</div>
<div id="content_2" class="content">
<div style="height: 250px; overflow: auto; width: 100%;">
<ul>
<li><a href="ALAMAT LINK" target="_blank">JUDUL</a></li><li><a href="ALAMAT LINK" target="_blank">JUDUL</a></li><li><a href="ALAMAT LINK" target="_blank">JUDUL</a></li>
<li><a href="ALAMAT LINK" target="_blank">JUDUL</a></li>
<li><a href="ALAMAT LINK" target="_blank">JUDUL</a></li>
<li><a href="ALAMAT LINK" target="_blank">JUDUL</a></li>
<li><a href="ALAMAT LINK" target="_blank">JUDUL</a></li>
<li><a href="ALAMAT LINK" target="_blank">JUDUL</a></li>
<li><a href="ALAMAT LINK" target="_blank">JUDUL</a></li> <li><a href="ALAMAT LINK" target="_blank">JUDUL</a></li></ul></div>
</div>
<div id="content_3" class="content">
<div style="height: 250px; overflow: auto; width: 100%;">
<script style="text/javascript" src="http://bloekoetoek-blogonol.googlecode.com/files/blogonol-comment.js"></script><script style="text/javascript">var numcomments = 20;var showcommentdate = true;var showposttitle = true;var numchars = 100;var standardstyling = true;</script><script src="http://blogonol.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script></div>
</div>
</div></div>
Ganti ALAMAT LINK dengan link yang akan digunakan
Ganti JUDUL dengan judul link
Silahkan edit height: 250px (ukuran tinggi widget bar dengan scroll) sesuai keinginan
Jika ingin menggenati dengan widget lain, silahkan hapus semua kode merah dan ganti dengan kode widget yang akan digunakan.
Klik Simpan dan lihat hasilnya
Selamat mencoba dan sukses selalu
"keep spirits and do the best"
