Membuat tab Menu View

Print this page
Simpan kode berikut dalam posting baru anda, bisa juga berkreasi dengan menambah tag tabel agar tampilan lebarnya bisa diatur, ganti  http://amarajenhht.blogspot.com/ dengan URL blog anda :

Read more: http://amarajenhht.blogspot.com/2014/11/membuat-scroll-bar-pada-posting-blog.html#ixzz3KeEHS6Xs <style type="text/css">
/*menu Tab Views*/
div.TabView div.Tabs{width:auto;text-align:center;
}
div.TabView div.Tabs a {background:#000;padding:4px;border-radius:10px 10px 0 0;border:4px double #ddd;text-decoration: none; font:bold 15px Arial;color:#fff;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {background-color: #f00;font-style:italic;
}
.Pages {width:auto;height:320px;border:4px double #ddd;background:#f00;overflow:hidden;margin-top:6px;color:#000;
}
.Page {width:auto;height:300px;overflow:auto;
}
.Page a{color:#fff;
}
/*NEW POST*/
#rp_plus_img{width:auto;height:300px;overflow:hidden;font-size:16px;color:#fff;padding:5px;
}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0;
}
#rp_plus_img li{border:1px; margin:0; padding:0; list-style:none;
}
#rp_plus_img li{height:48px;padding:5px;list-style:none;border-radius:10px;border:1px solid #fff;-moz-box-shadow:inset 0 0 30px #000;-webkit-box-shadow:inset 0 0 30px #000;box-shadow:inset 0 0 30px #000;
}
#rp_plus_img .news-title{display:block;font-size:14px;font-weight:bold;text-align:center;text-transform:uppercase;
}
#rp_plus_img .news-text{display:block;font-size:12px;font-weight:normal;color:#000;text-align:left;text-transform:capitalize;
}
#rp_plus_img img{float:left;margin-right:14px;padding:2px;width:40px;height:35px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;border:4px double #fff;
}
/*Archive*/
.judul-label{background-color:#424242;text-align: center;padding:5px;font:bold 16px Baumans;text-transform:uppercase;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;-webkit-box-shadow:0 1px 10px #fff;-moz-box-shadow:1px 1px 10px #fff;box-shadow:0 1px 10px #fff;color:#ddd;border:2px solid #fff;
}
.data-list a{font-size:14px;
}
/*Koment*/
    ul.w2b_recent_comments {
    list-style: none;padding:5px;
    }
    .w2b_recent_comments li {
    background:#ddd;
    margin:6px !important;
    padding:6px !important;
    display: block;
    clear: both;
    overflow: hidden;
    list-style: none;
    border-radius: 10px;
    border:1px solid #000;
    }
    .w2b_recent_comments li .avatarImage {
    padding: 3px;
    float: left;
    margin: 0 6px 0 0;
    position: relative;
    overflow: hidden;
    }
    .avatarRound {
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    border:2px solid #000;
    box-shadow:inset 0 0 10px #000,0 0 10px #000;
    }
    .w2b_recent_comments li img {
    padding: 0px;
    position: relative;
    overflow: hidden;
    display: block;
    }
    .w2b_recent_comments li span {
    margin-top: 4px;
    color: #000;
    display: block;
    font-size: 12px;
    font-style: italic;
    line-height: 1.4;
    }
</style>

<script src="https://overlay-basic.googlecode.com/svn/branches/tapmenuview-amarajen.js" type="text/javascript">
</script>
<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs">
<a>NEW POST</a><a>BLOG ARSIP</a><a>NEW COMMENT</a></div>
<div class="Pages">
<div class="Page">
<script src='https://overlay-basic.googlecode.com/svn/branches/labeles-amarajen.js' type='text/javascript'>
</script>
<ul id='rp_plus_img'><script>
var numposts = 6;
var numchars = 70;
</script> <script src='/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt'>
</script></ul>
</div>

<div class="Page">
<script src='https://overlay-basic.googlecode.com/svn/branches/site-map-revfinal-amarajen.js'></script>
<script src='http://amarajenhht.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc'></script><script type='text/javascript'>var accToc=true;</script>
</div>
<div class="Page">
<script src="https://sites.google.com/site/kontols33/recent-comment.js" type="text/javascript">
</script>
<script src="http://amarajenhht.blogspot.com/feeds/comments/default?alt=json&amp;callback=w2b_recent_comments&amp;max-results=5" type="text/javascript"></script>
</div>
</div>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
</form>

Artikel Terkait