Tab View Menarik di Blogger | Pendidikan dan Pengajaran

Tab View yang digunakan para blogger bukan hanya untuk mempercantik blog tetapi lebih dari itu untukmenghemat tempat untuk pemasangan beberapa widget. menampilkan salah satu dan menyembunyikan yang lain. yang lain akan tampak apabila diklik.

Banyak sekali cara untuk membuat tab view, sayang cara itu terlalu panjang, untuk kemudian memasangnya di sidebar. akan tetapi sekarang ada cara yang
sangat mudah untuk memasang tab view di sidebar blog anda.
Cara Mudah Pasang Tab View Di Blog adalah sebagai berikut :- Silahkan login keBlogger dengan account anda.

- Pergi Ke "Tata Letak".
- Klik "Tambah Gadget" dan pilih "HTML/JavaScript".
- Copy paste code berikut kedalamnya :

</span><b><span class="fullpost"><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js" type="text/javascript"></script><br>
<script><br>
<br>
// When the document loads do everything inside here ...<br>
$(document).ready(function(){<br>
<br>
// When a link is clicked<br>
$("a.tab").click(function () {<br>
<br>
// switch all tabs off<br>
$(".active").removeClass("active");<br>
<br>
// switch this tab on<br>
$(this).addClass("active");<br>
<br>
// slide all content up<br>
$(".content").slideUp();<br>
<br>
// slide this content up<br>
var content_show = $(this).attr("title");<br>
$("#"+content_show).slideDown();<br>
<br>
});<br>
<br>
});<br>
</script><br>
<style type="text/css" media="screen"><br>
<!--<br>
<br>
.tabbed_area {<br>
border:1px solid #494e52;<br>
background-color:#333;<br>
padding:8px;<br>
}<br>
<br>
div.tabs {<br>
margin-top:5px;<br>
margin-bottom:6px;<br>
}<br>
div.tabs div {<br>
display:inline;<br>
}<br>
div.tabs a {<br>
background:#464c54;<br>
color:#ffebb5;<br>
padding:8px 14px 8px 14px;<br>
text-decoration:none;<br>
font-size:9px;<br>
font-family:Verdana, Arial, Helvetica, sans-serif;<br>
font-weight:bold;<br>
text-transform:uppercase;<br>
background-repeat:repeat-x;<br>
background-position:bottom;<br>
}<br>
div.tabs a:hover {<br>
background-color:#2f343a;<br>
border-color:#2f343a;<br>
}<br>
div.tabs a.active {<br>
background-color:#ffffff;<br>
color:#282e32;<br>
border:1px solid #464c54;<br>
border-bottom: 1px solid #ffffff;<br>
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm5BcGsq2x7EGUeWHWC5haUacS5-JpovoBVrchMywf6AQVpJYe2s5_MJyMylgnI1VH4L8Zq0I_n8TiZOnhayBP_VKDAi3BZPHAdgkdc-zx3svFRtzzFOdEnCRG-i41JqtiDyFdesNzAz8d/s320/tab_on.jpg);<br>
background-repeat:repeat-x;<br>
background-position:top;<br>
}<br>
.content {<br>
background-color:#ffffff;<br>
padding:10px;<br>
border:1px solid #464c54;<br>
font-family:Arial, Helvetica, sans-serif;<br>
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqqa3ez7rbn1G8f9toqwReP8yr9KN98QAC3TWajOdQQynLjHsUDzbz2rsVl31nhFSoTWsSGjAxktba27II6Tn4X3S7hpX5_Et931b2W5WzsJ1pbfyA2CHfyOXRv4fGxzJiMJcC_LYVQ_ER/s320/content_bottom.jpg);<br>
background-repeat:repeat-x;<br>
background-position:bottom;<br>
}<br>
#content_2, #content_3 { display:none; }<br>
<br>
.content ul {<br>
margin:0px;<br>
padding:0px 20px 0px 20px;<br>
}<br>
.content ul li {<br>
list-style:none;<br>
border-bottom:1px solid #d6dde0;<br>
padding-top:15px;<br>
padding-bottom:15px;<br>
font-size:13px;<br>
}<br>
.content ul li:last-child {<br>
border-bottom:none;<br>
}<br>
.content ul li a {<br>
text-decoration:none;<br>
color:#3e4346;<br>
}<br>
.content ul li a small {<br>
color:#8b959c;<br>
font-size:9px;<br>
text-transform:uppercase;<br>
font-family:Verdana, Arial, Helvetica, sans-serif;<br>
position:relative;<br>
left:4px;<br>
top:0px;<br>
}<br>
.content ul li a:hover {<br>
color:#a59c83;<br>
}<br>
.content ul li a:hover small {<br>
color:#baae8e;<br>
}<br>
.content div {<br>
margin:0px;<br>
padding:0px;<br>
}<br>
--><br>
</style><br>
<div class="tabbed_area"><br>
<br>
<div class="tabs"><br>
<div><a class="tab active" title="content_1" href="#<span style="font-weight: bold;">JUDUL1</span>"><span style="font-weight: bold;">JUDUL1</span></a></div><br>
<div><a class="tab" title="content_2" href="#<span style="font-weight: bold;">JUDUL2</span>"><span style="font-weight: bold;">JUDUL2</span></a></div><br>
<div><a class="tab" title="content_3" href="#<span style="font-weight: bold;">JUDUL3</span>"><span style="font-weight: bold;">JUDUL3</span></a></div><br>
</div><br>
<br>
<div class="content" id="content_1"><br>
<div><br>
<span style="color: #073763; font-weight: bold;">          CODE WIDGET DISINI</span><br>
</div><br>
</div><br>
<div class="content" id="content_2"><br>
<ul><br>
<li><a href=""><span style="color: #38761d; font-weight: bold;">DAFTAR JUDUL</span></a></li><br>
<li><a href=""><span style="color: #38761d; font-weight: bold;">DAFTAR JUDUL</span></a></li><br>
<li><a href=""><span style="color: #38761d; font-weight: bold;">DAFTAR JUDUL</span></a></li><br>
<li><a href=""><span style="color: #38761d; font-weight: bold;">DAFTAR JUDUL</span></a></li><br>
<li><a href=""><span style="color: #38761d; font-weight: bold;">DAFTAR JUDUL</span></a></li><br>
</ul><br>
</div><br>
<div class="content" id="content_3"><br>
<ul><br>
<li><a href="/"><span style="color: #cc0000; font-weight: bold;">Home</span></a></li><br>
<li><a href="/"><span style="color: #cc0000; font-weight: bold;">About</span></a></li><br>
<li><a href="/"><span style="color: #cc0000; font-weight: bold;">All Category</span></a></li><br>
<li><a href="/"><span style="color: #cc0000; font-weight: bold;">Contact</span></a></li><br>
</ul><br>
</div><br>
<br>
</div></span></b><span style="font-family: Comic Sans MS;">

- Simpan dan lihat hasilnya