Membuat Tab View Di Blog

Membuat Tab View Di Blog

Bola Hero Gawai

Membuat Tab View Di Blog

Screenshot
Membuat Tab View Di Blog

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

Cara Membuat Tab View Di Blog sedikit gampang karena kita tidak usah mengobok-obok kode HTML blog kita, cukup menambahkan kode scriptnya di gadget HTML sidebar blog kita. Bagi yang ingin mencobanya, silahkan copy kode script Tab View di bawah ini, kemudian 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='http://kompiajaib.blogspot.com/2012/06/membuat-tab-view-di-blog.html' target='_blank'>widget</a></div>

Keterangan:

Perhatikan tulisan yang berwarna hijau, itu keterangan untuk tiap kode 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 keinginan Anda.

Tulisan berwarna ungu muda adalah kode script untuk recent post berdasarkan 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 kode script widget yang lain seperti recent comment atau yang lainnya. Atau Anda bisa isi semua tab dengan kode 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 membuat dua buah tab view atau lebih, cukup menggunakan 1 buah javascript seperti di bawah ini. Sebaiknya simpan di atas kode </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 tulisan TabView sehingga menjadi TabView2. Begitu juga kalau Anda ingin membuat 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 pasti melakukan try and error.

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

30 Comments Add Comment

Pertamax gan , thaks akhirnya dui jawab juga m oh iya ada pertanyaan nih gan , template ane kayak punya agan , tapi ane bingung ngatur sider bar kanannya , bisa bantu ?

Balas

Wah lumayan banyak yang diopreknya sob... kalau ingin seperti blog saya nanti kalau ada waktu saya kasih scriptnya lewat email

Balas

wah makasih ya gan , kirimnya ke wawanekasetiawan567@yahoo.co.id ya gan , makasih banyak

Balas

Sama2 gan...tunggu aja ya..

Balas

thans gan tutorialnya, sangat bermanfaat :)

http://bangprohi.blogspot.com/

Balas

Sama2 gan...semoga bermanfaat.

Balas

Salam kabpemalang..
Sekedar info gan, ternyata setelah outbound link saya cek satu persatu. banyak temen2 blogger yang dulu minta tukeran link dan sekarang sudah mendapatkan pagerank yang lumayan, kini meghapus link saya saya secara sepihak dan tanpa memberitahukan alasan. saya salut atas konsekuensi http://kompiajaib.blogspot.com/
Semoga tetap sukses!

Balas

Kalau begitu keadaanya sangat disayangkan ya sob...padahal tujuannya tidak hanya untuk mendapatkan pagerank tetapi lebih ke arah hubungan antar blogger ya sob...semoga tetap semangat...dan hubungan ini terus membawa barokah.

Balas

om maap ngerepotin lagi , saya mau minta bantu buat ngedit bagian bawah postingan template blog saya biar kayak punya agan , mkasih ya sebelumnya :D

Balas

waaaahhh menarik nhe,, aye segera praktekan..

Balas

Silahkan sob...mudah2an bermanfaat.

Balas

sob saya boleh minta template sob gak?

Balas

gan, saya mw nanya, ane dah pasang nie widget, di blog ane, http://indosoftgame.blogspot.com/ , trus ane pasang lagi jadi dua widget, kok biasanya gk bsa ya, tabnya diklik, hanya satu widget yg aktif, gmana thu, gan, tlg bantuannya, txs juga scriptnya :)

Balas

Jika membuat dua buah tab view, hapus kode script tab_view2.js pada tab view kedua. Kemudian tambahkan angka 2 pada Tabview yang kedua pada setiap tulisan TabView sehingga menjadi TabView2.

Balas

ow, oke2 bro txs ya :)

Balas

tetep gak bsa gan, coba lihat diblog ane deh http://indosoftgame.blogspot.com/ , di klik tabnya tetep gk bsa.

Balas

Gan pada tabview atas ( tabview2 ) coba cari kode tabview2_initialize('TabView2'), rubah jadi tabview_initialize('TabView2'. (tabview_initialize jangan dirubah).

Balas

maaf gan, ttep gk bsa, klo gk keberatan krm scriptnya ke e-mail saya ya gan, indosoftgame@gmail.com , thanks.

Balas

ow, ternyata harus dikasih kode, yang kata agan suruh hapus di tutorialnya.
thanks dah bantu ya gan :)

Balas

Sip gan...trial and error hasilnya sukses dan tambah ilmu.

Balas

SALAM BLOGGER....THANK U..

Balas

Ini yang dicari cari, minta ijin mencoba. terima kasih

Balas

pertama ke blog ini terinspirasi dengan shadows borders nya gray smua mantap terima kasih banyak gan

Balas

maaf gan mau tanya kalo nambah style biar ada border atas dan bawah tiap link gmn kayak contoh diatas koq di blog ku ga nampak garis pemisahnya

Balas

Pada sidebar blog Agan? Coba cari pada edit HTML pada kode CSS untuk sidebar...Cari kode "sidebar li{border-bottom:1px dotted" (tanpa tanda kutip) ganti kode "dotted" dengan "solid" mudah-mudahan betul itu yang dimaksud...

Balas

mas ada nggak tab view yg mirim Detik.com?

Balas

Ikut menyimak gan. Belum berhasil juga gan. Saya coba Tab1 dengan Popular Posts, Tab2=Rec.Posts, Tab3=Rec.Comment.
Mohon bantuannya setelah Tarawih....
Terimakasih sebelumnya Mas Kompi.

Balas

ane udah pasang tab view menu ini mas, cuman didalam postingan, tutorialnya sama persis dari maskolis cuman setelah ane pasang tab view ini didalam postingan homepagenya blog ane yang buat toko online jadi berantakan... ane setting 6 post di homepage, setelah pakai tab ini post yang nampak cuman 3 post atau 2... www.demoselularstore.blogspot.com

Balas

trimakasih gan atas tutorialnya salam kenal dari --> handexcel.blogspot.com

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×