membuat tab view menggunakan efek jquery

cara membuat tab view banyak sekali tapi kali ini berbeda yaitu menggunakan efek jquery. Tapi sayang cara-cara yang lain terlalu rumit untuk membuatnya saya mempostingkan agar caranya lebih simple dan langsung diletakkan di sidebar blog kalian



* Masuk ke blogger
* Rancangan
* Tambah Gadget
* Pilih HTML/JavaScript
* Copy kode dibawah ini

TAB VIEW BACKGROUND HITAM PUTIH

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

// When the document loads do everything inside here ...
$(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>
<style type="text/css" media="screen">
<!--

.tabbed_area {
border:1px solid #494e52;
background-color:#333;
padding:8px;
}

div.tabs {
margin-top:5px;
margin-bottom:6px;
}
div.tabs div {
display:inline;
}
div.tabs a {
background:#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;
background-repeat:repeat-x;
background-position:bottom;
}
div.tabs a:hover {
background-color:#2f343a;
border-color:#2f343a;
}
div.tabs 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/AVvXsEjoVb0zgHQfWt9zJOyfBnBQ3CxwA_IcvK06fz4xeb7x-DxwGcwK5HWGzoc9p4VqRgm6Pn-lMVyDiCJWORwJAtWmOUvckplpNOsYYP73bI-G0qKo55GoALdyL2r6bVYHbxDJvG_HEqsQEAPG/s320/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/AVvXsEgpBFj9GL9UtIEnOWbC3qhtkAm5w4Hdos21nEtlUWvJWQDvWCXORRv8sSM9AqkPLTvr6kD-VFk4FY4k58SVg3QPHEYB87pwpBADJPl74M_DKcGPmMdUQrHxyuCBlPJPuK6CoNTGnqpt999T/s320/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;
}
.content div {
margin:0px;
padding:0px;
}
-->
</style>
<div class="tabbed_area">

<div class="tabs">
<div><a class="tab active" title="content_1" href="#JUDUL1">JUDUL1</a></div>
<div><a class="tab" title="content_2" href="#JUDUL2">JUDUL2</a></div>
<div><a class="tab" title="content_3" href="#JUDUL3">JUDUL3</a></div>
</div>

<div class="content" id="content_1">
<div>
Code Widget Disini
</div>
</div>
<div class="content" id="content_2">
<ul>
<li><a href="">Daftar Judul</a></li>
<li><a href="">Daftar Judul</a></li>
<li><a href="">Daftar Judul</a></li>
<li><a href="">Daftar Judul</a></li>
<li><a href="">Daftar Judul</a></li>
</ul>
</div>
<div class="content" id="content_3">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/">About</a></li>
<li><a href="/">All Category</a></li>
<li><a href="/">Contact</a></li>
</ul>
</div>

</div>

DAN DIBAWAH INI KODE MENU TAB VIEW MODIF SENDIRI (TRANSPARANT)

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

// When the document loads do everything inside here ...
$(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>
<style type="text/css" media="screen">
<!--

.tabbed_area {
border:1px solid transparent;
background-color:transparent;
padding:8px;
}

div.tabs {
margin-top:5px;
margin-bottom:6px;
}
div.tabs div {
display:inline;
}
div.tabs a {
background:transparent;
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;
background-repeat:repeat-x;
background-position:bottom;
}
div.tabs a:hover {
background-color:transparent;
border-color:#2f343a;
}
div.tabs a.active {
background-color:transparent;
color:#282e32;
border:1px solid #464c54;
border-bottom: 1px solid transparent;
background-image:url(https://ssl2.msstate.edu/NetPassword/images/spacer.gif);
background-repeat:repeat-x;
background-position:top;
}
.content {
background-color:transparent;
padding:10px;
border:1px solid #464c54;
font-family:Arial, Helvetica, sans-serif;
background-image:url(https://ssl2.msstate.edu/NetPassword/images/spacer.gif);
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 transparent;
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:transparent;
}
.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;
}
.content div {
margin:0px;
padding:0px;
}
-->
</style>
<div class="tabbed_area">

<div class="tabs">
<div><a class="tab active" title="content_1" href="#Translate">Translate</a></div>
<div><a class="tab" title="content_2" href="#JUDUL2">Artikel</a></div>
<div><a class="tab" title="content_3" href="#JUDUL3">Arsip</a></div>
</div>

<div class="content" id="content_1">
<div>
<div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en'
}, 'google_translate_element');
}
</script><script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<li><a href="http:///">cara membuat menu ini</a></li></div>
</div>
</div>
<div class="content" id="content_2">
<ul>
<li><a href="http://shofisanjaya.blogspot.com/2010/10/membuat-teks-area-sensitif-hightlight.html">membuat teks area sensitif hightlight</a></li>
<li><a href="http://shofisanjaya.blogspot.com/2010/10/membuat-teks-area-dengan-onclick.html">membuat teks area dengan onlick</a></li>
<li><a href="http://shofisanjaya.blogspot.com/2010/10/membuat-bingkai-posting-di-blog.html">membuat bingkai posting di blog</a></li>
<li><a href="">DAFTAR JUDUL</a></li>
<li><a href="">DAFTAR JUDUL</a></li>
</ul>
</div>
<div class="content" id="content_3">
<ul>
<li><a href="/">Home</a></li>
<li><a href="http://feeds.feedburner.com/ScreenBlog">Feed Rss</a></li>
<li><a href="http://shofisanjaya.blogspot.com/">All Category</a></li>
<li><a href="/">Contact</a></li>
</ul>
</div>