Ass Wr Wb
Ane mau share multi tab nih buat menghemat tempat..
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
ini dia caranyaa...
- Login ke blog mu
- Tata Letak
- Tambah Gadget dan pilih HTML/JavaScript
- Copy paste code berikut kedalamnya :
<style type="text/css">
div.TabView div.Tabs
{height: 50px;overflow: hidden}
div.TabView div.Tabs a {float:left; display:block; width: 96px; /* Lebar Menu Utama Atas */
text-align:center ; height: 30px; /* Tinggi Menu Utama Atas */
padding-top:8px; vertical-align:middle; border:1px solid #BDBDBD; /* Warna border Menu Atas */
border-bottom-width:0; text-decoration: none; font-family: "Courier", Serif; /* Font Menu Utama Atas */
font-weight:bold; color:#000; /* Warna Font Menu Utama Atas */ -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {background-color: #E6E6E6; /* Warna background Menu Utama Atas */ }
div.TabView div.Pages {clear:both; border:1px solid #E6E6E6; /* Warna border Kotak Utama */ overflow:hidden; background-color:#E6E6E6; /* Warna background Kotak Utama */ }
div.TabView div.Pages div.Page {height:100%; padding:0px; overflow:hidden}
div.TabView div.Pages div.Page div.Pad {padding: 5px 5px}
</style>
<script type='text/javascript'>
//<![CDATA[
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);
// ----- Tabs -----
var Tabs = TabView.firstChild;
while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
var Tab = Tabs.firstChild;
var i = 0;
do
{
if (Tab.tagName == "A")
{
i++;
Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
Tab.className = (i == id) ? "Active" : "";
Tab.blur();
}
}
while (Tab = Tab.nextSibling);
// ----- Pages -----
var Pages = TabView.firstChild;
while (Pages.className != 'Pages') Pages = Pages.nextSibling;
var Page = Pages.firstChild;
var i = 0;
do
{
if (Page.className == 'Page')
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
Page.style.overflow = "auto";
Page.style.display = (i == id) ? 'block' : 'none';
}
}
while (Page = Page.nextSibling);
}
// ----- Functions -------------------------------------------------------------
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
//]]>
</script>
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 300px;" class="Tabs">
<a>statistik</a>
<a>Recen Comen</a>
<a>chat BOX</a>
</div>
<div style="width:290px; height:250px; " class="Pages">
<div class="Page">
<div class="Pad">
<center><a href="https://twitter.com/maftuhijore" class="twitter-follow-button" data-show-count="true" data-lang="id">Ikuti @maftuhijore</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script><center/>
</center></center></center></center></center></center></center></center></center></center></div>
</div>
<div class="Page">
<div class="Pad">
<style type="text/css">
ul.w2b_recent_comments {
list-style: none;
margin: 0;
padding: 0;
}
.w2b_recent_comments li {
background: none !important;
margin: 0 0 6px !important;
padding: 0 0 6px 0 !important;
display: block;
clear: both;
overflow: hidden;
list-style: none;
}
.w2b_recent_comments li .avatarImage {
padding: 3px;
background: #fefefe;
-webkit-box-shadow: 0 1px 1px #ccc;
-moz-box-shadow: 0 1px 1px #ccc;
box-shadow: 0 1px 1px #ccc;
float: left;
margin: 0 6px 0 0;
position: relative;
overflow: hidden;
}
.avatarRound {
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
}
.w2b_recent_comments li img {
padding: 0px;
position: relative;
overflow: hidden;
display: block;
}
.w2b_recent_comments li span {
margin-top: 4px;
color: #666;
display: block;
font-size: 12px;
font-style: italic;
line-height: 1.4;
}
</style>
<script type="text/javascript">
//<![CDATA[
// Recent Comments Settings
var
numComments = 5,
showAvatar = true,
avatarSize = 30,
roundAvatar = true,
characters = 40,
showMorelink = false,
moreLinktext = "More »",
defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/w2b recent comments with avatars.js"></script>
<script type="text/javascript" src="http://maf-tohe.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>
</div>
</div>
<div class="Page">
<div class="Pad">
<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="270" height="120" src="http://www5.cbox.ws/box/?boxid=716909&boxtag=5t3j2a&sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain5-716909" style="border:#DBE2ED 1px solid;" id="cboxmain5-716909"></iframe></div>
<div><iframe frameborder="0" width="270" height="120" src="http://www5.cbox.ws/box/?boxid=716909&boxtag=5t3j2a&sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform5-716909" style="border:#DBE2ED 1px solid;border-top:0px" id="cboxform5-716909"></iframe></div>
</div>
<!-- END CBOX -->
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
NB:
tex berwarna merah ganti dengan widget agan
semoga bermanfaat..
salam blogger :)
Title : Membuat Tam Menu Vie 3 bagian dengan Multifungsi
Description : Ass Wr Wb Ane mau share multi tab nih buat menghemat tempat.. Banyak sekali cara untuk membuat tab view , sayang cara itu terlalu panj...