Membuat Tab View Di Blog

Membuat Tab View Di Blog

Pagi ini saya akan share cara Membuat Tab View Di Blog ibarat yang Anda lihat pada gambar di atas atau pada Tab View blog saya di samping kanan. Sebenarnya saya sanggup isyarat scriptnya dari Maskolis (pembuat template blog ini), namun alasannya yakni ada temen yang request scriptnya, sekalian saja saya buat postingannya.

Cara Membuat Tab View Di Blog sedikit praktis alasannya yakni kita tidak usah mengobok-obok isyarat HTML blog kita, cukup menambahkan isyarat scriptnya di gadget HTML sidebar blog kita. Bagi yang ingin mencobanya, silahkan copy isyarat script Tab View di bawah ini, lalu paste di gadget HTML sidebar blog Anda.

 <style type="text/css">
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Lebar Kotak Tab */
height: 22px; /* Tinggi Menu Utama Atas */
text-align: center; /* Posisi Teks Menu Tab */
margin: 5px 0px 0px 3px; /* Posisi Kotak Tab */
background-color: #000; /* Warna background Kotak Tab */
padding-top: 2px; /* Spasi Atas */
border: 2px solid #393939; /* Warna border kotak Tab */
border-bottom: 2px solid #393939; /*Warna border bawah kotak tab */
font-family: "Arial, Helvetica, sans-serif", Arial; /* Font Kotak Tab */
font-weight: 900; /* Ketebalan Teks kotak tab */
}
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: none; /* Warna border Kotak Konten */
overflow: hidden;
background-color: none; /* Warna background 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: 300px;" class="Tabs">
<a><span style="color: #fff">Title Tab 1</span></a>
<a><span style="color: #fff">Title Tab 2</span></a>
<a><span style="color: #fff">Title Tab 3</span></a>
</div>
<div style="width: 300px; height: 350px;" class="Pages">
<div class="Page">
<div class="Pad">
<script type='text/javascript'>var numposts = 1;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 60;</script>
<script type="text/javascript" src="/feeds/posts/default/-/Software?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>
<script type="text/javascript">function recentpostslist(json) { document.write('<ul>'); for (var i = 1; i < json.feed.entry.length; i++) {    for (var j = 1; j < json.feed.entry[i].link.length; j++) {      if (json.feed.entry[i].link[j].rel == 'alternate') {        break;      }    }var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";//bsvar entryTitle = json.feed.entry[i].title.$t;var item = "<li>" + "<a href="+ entryUrl + '" target="_blank">' + entryTitle + "</a> </li>"; document.write(item); } document.write('</ul>'); }</script><script src="http://kompiajaib.blogspot.com/feeds/posts/summary/-/Software?max-results=30&alt=json-in-script&callback=recentpostslist"></script><a href="http://kompiajaib.blogspot.com/search/label/Software" style="float:right;font:normal 11px Arial;padding:5px 0;">More on this category &#187;</a>
</div>
</div>
<div class="Page">
<div class="Pad">
Kode HTML Anda Di Sini
</div>
</div>
<div class="Page">
<div class="Pad">
Kode HTML Anda Di Sini
</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>
<div style='border: 0px; padding: 5px; background-color: none;  text-align: right; font-size:9px;'>Get this <a  href='https://komporajaibku.blogspot.com//search?q=membuat-tab-view-di-blog'  target='_blank'>widget</a></div> 

Keterangan:

Perhatikan goresan pena yang berwarna hijau, itu keterangan untuk tiap isyarat di sampingnya, silahkan rubah kode-kodenya dan sesuaikan dengan theme blog Anda.

Tulisan 300px merupakan lebar widget tab view ini, sesuaikan dengan lebar sidebar blog Anda.

Tulisan 350px merupakan tinggi untuk widget tab view, silahkan sesuaikan dengan impian Anda.

Tulisan berwarna ungu muda yakni isyarat script untuk recent post menurut katagori/label dengan 1 buah thumbnail untuk postingan terakhir. Tulisan Software untuk label postingan Anda yang ingin ditampilkan. kompiajaib.blogspot.com silahkan ganti dengan blog Anda. 30 merupakan banyaknya recent post yang ditampilkan, dan http://kompiajaib.blogspot.com/search/label/Software silahkan ganti dengan URL label yang Anda tampilkan.

Kode HTML Anda Di Sini silahkan ganti dengan isyarat script widget yang lain ibarat recent comment atau yang lainnya. Atau Anda sanggup isi semua tab dengan isyarat script recent post yang warna ungu muda di atas, tinggal ganti nama labelnya saja. Seperti pada tab view di blog saya ini.

Jika Anda ingin menciptakan dua buah tab view atau lebih, cukup memakai 1 buah javascript ibarat di bawah ini. Sebaiknya simpan di atas isyarat </body>

 <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> 

Kemudian tambahkan angka 2 pada setiap goresan pena TabView sehingga menjadi TabView2. Begitu juga jikalau Anda ingin menciptakan tiga buah tab view di sidebar blog Anda.

Demikian sharing cara Membuat Tab View Di Blog kali ini mudah-mudahan bermanfaat. Jangan takut mencoba sesuatu yang baru, setiap orang niscaya melaksanakan try and error.

Sumber https://www.kompiajaib.com/

Share this post