Horas: Membuat Tab View Menu Tanpa Edit HTML di Blogspot

Berikut cara membuat Tab View tanpa harus Edit HTML dan membackup template di blog. Tidak usah berlama-lama langsung aja ke TKP .

Silahkan sobat Login ke Blogger sobat.
Klik menu Tata Letak
Klik Tambahkan Gadget, lalu klik HTML/Javascript
Setelah itu copy dan paste kode script dibawah ini

}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #736F6E; /* Warna background utama kotak tab */ }
div.TabView div.Pages
{
clear: both;
border: 2px dashed white; /* Warna border Kotak Konten */
overflow: hidden;
border-radius: 0 15px;border: 3px ridge yellow; /* Warna border Kotak Konten */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 5px; /* Jarak teks dalam kotak content */
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
</style>

<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 350px;" class="Tabs">
<a><span style="color:yellow"><b>Tutor Blog</b></span></a>
<a><span style="color:yellow"><b>Masih Hangat</b></span></a>
<a><span style="color:yellow"><b>Twitter</b></span></a>
<a><span style="color:yellow"><b>Recent Comment</b></span></a>
<a><span style="color:yellow"><b>Software</b></span></a>
<a><span style="color:yellow"><b>...</b></span></a>
</div>
<div style="width: 321px; height: 410px;" class="Pages">

<div class="Page">
<div class="Pad">
<style type="text/css">
#rp_plus_img{height:385px;overflow:hidden;border:0;padding:2px 3px 3px 2px;background:transparant}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0}
#rp_plus_img li{border:solid 1px #ccc; margin:0;height:82px;padding:5px; list-style:none;-moz-border-radius: 10px; border-radius: 5px;background:#ffffff}
#rp_plus_img li:hover{background-color: #EFFBEF;}
#rp_plus_img a{color:#d90000;font-weight:bold}
#rp_plus_img .news-title{display:block;font-weight:400 !important;margin-bottom:3px;font-size:11px;}
#rp_plus_img img{float:left;margin-right:10px;padding:4px;border:solid 1px #ccc;width:65px; height:65px;-moz-border-radius: 10px; border-radius: 5px;}
</style>
<script type="text/javascript" src="https://sites.google.com/site/filescriptcollection/jquery.min.js"></script>
<script type="text/javascript" src="https://sites.google.com/site/filescriptcollection/slideshow.js"></script>
<script type="text/javascript">
var speed = 1500;
var pause = 3500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 10;
var numchars = 40;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul>
</div>
</div>

<div class="Page">
<div class="Pad">
<a class="twitter-timeline"  href="https://twitter.com/henrydunanz"  data-widget-id="408505379102814208">Tweets by @henrydunanz</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
</div>

<div class="Page">
<div class="Pad">
<style type="text/css" scoped> 
ul.kangismet_recent{list-style:none;margin:0;padding:0;} 
.kangismet_recent li{background:none !important;margin:0 0 6px !important;padding:3px  
!important;display:block;clear:both;overflow:hidden;list-style:none; border: 1px solid transparent;
border-radius:9px; max-height: 100px;} 
.kangismet_recent li:hover{border: 1px solid #ddd;}
.kangismet_recent a {text-decoration:none;}
.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;width:35px;height:35px} 
.kangismet_recent li span{margin-top:4px;color: #222;display: block;font-size: 12px;line-height: 1.4;} 
</style>
<script type="text/javascript">
//<![CDATA[
    var
 numComments  = 20
 showAvatar  = true,
 avatarSize  = 35,
 roundAvatar = true,
 characters  = 40,
 defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
 hideCredits = true;
 maxfeeds=50,
 adminBlog='horas';
//]]>
</script>
<script type="text/javascript" src="https://sites.google.com/site/filescriptcollection/recentcomments2.js"></script>
<script type="text/javascript" src="/feeds/comments/default?alt=json&callback=kangismet_recent&&max-results=50">
</script>
</div>
</div>
<div class="Page">
<div class="Pad">
<script src="https://sites.google.com/site/filescriptcollection/labelTertentu.js">
</script>
<script>
var numposts = 1000;
var showpostdate = false;
var showpostsummary = false;
var numchars = 100;
var standardstyling = true;
var shownumposts = true;
</script>
<script src="http://henry-dunanz.blogspot.com/feeds/posts/default/-/software?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script>
</div>
</div>
<div class="Page">
<div class="Pad">
No Content 2
</div>
</div>
</div>
</div>
</form>
<script type='text/javascript'>
//<![CDATA[function tabview_aux(TabViewId,id){var TabView=document.getElementById(TabViewId);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);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)}function tabview_switch(TabViewId,id){tabview_aux(TabViewId,id)}function tabview_initialize(TabViewId){tabview_aux(TabViewId,1)}
//]]>
</script>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

Keterangan:

Tulisan berwarna kuning merupakan keterangan dari masing-masing kode. Silahkan atur nilainya sesuai keinginan
Tulisan berwarna orange merupakan warna judul Tab
Tulisan berwarna hijau merupakan judul Tab
Angka 300 pada 'Width' menunjukkan panjang kotak dan 200 pada 'height' menunjukkan tinggi kotak. Silahkan ganti nilainya sesuai ukuran template anda.
Tulisan yang dicetak tebal merupakan isi tab view. Silahkan ganti dengan teks, link, banner atau widget anda.

Jika anda ingin menambah menu tab baru cukup tambahkan kode yang berkedip dibawahnya. Demikian tadi tutorial membuat tab view widget tanpa edit HTML ...

"Terima kasih sudah membaca artikel Tutorial : Membuat Tab View Menu Tanpa Edit HTML di Blogspot. Anda bisa bookmark halaman ini dengan URL https://henry-dunanz.blogspot.com/2013/11/membuat-tab-view-menu-tanpa-edit-html.html. Jangan lupa klik salah satu tombol dibawah ini."

Membuat Tab View Menu Tanpa Edit HTML di Blogspot

Tidak ada komentar:

Posting Komentar