Cara membuat Tab Menu View Tanpa Edit HTML seperti contoh Demonya Dibawah ini
Nah ini dia Langkah-Langkahnya Sobat
1. Login ke Akun blog Sobat
2. Pilih Rancangan >Edit HTML >Tambah Gadget
3. Pilih Gadget HTML/JavaScript
4. Copy kode dibawah ini dan letakkan ke dalam Gadget HTML/JavaScript.
Nah ini dia Langkah-Langkahnya Sobat
1. Login ke Akun blog Sobat
2. Pilih Rancangan >Edit HTML >Tambah Gadget
3. Pilih Gadget HTML/JavaScript
4. Copy kode dibawah ini dan letakkan ke dalam Gadget HTML/JavaScript.
<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="http://cueros.googlecode.com/files/tapmenuview.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://sites.google.com/site/cuerosbhelatos/labeles.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://sites.google.com/site/cuerosbhelatos/site-map.js'></script>
<script src='http://cuerosbhelatos.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://cuerosbhelatos.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5" type="text/javascript"></script>
</div>
</div>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
</form>
5. Ganti Link http://cuerosbhelatos.blogspot.com dengan alamat Blog Sobat/*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="http://cueros.googlecode.com/files/tapmenuview.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://sites.google.com/site/cuerosbhelatos/labeles.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://sites.google.com/site/cuerosbhelatos/site-map.js'></script>
<script src='http://cuerosbhelatos.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://cuerosbhelatos.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5" type="text/javascript"></script>
</div>
</div>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
</form>
Posted On : 21 September 2011 Time : 10.42