Category: Tab View

Tab View berfungsi sebagai pemisah kontent yang berbeda dalam satu post. Tab View biasanya digunakan pada blog download entah itu dengan niche Game, Software, Video atau Film. Tab View berikut ini dibuat dari CSS, HTML, dan Jquery.

Jika sudah jadi akan terlihat seperti gambar diatas. Jika Anda tertarik untuk menggunakannya pada blog atau web sobat, silahkan langsung ikuti tutorialnya.

<script src=’//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js’></script>

Sekarang blog Anda sudah memiliki tab view sendiri. Untuk memunculkan tab view pada postingan blog Anda silahkan ikuti tutorial pemasangannya pada postingan.

1. Siapkan artikel post yang akan dipasangi tab view lalu ubah post dari Compose ke HTML

2. Letakkan kode Tab View berikut kedalam postingan tersebut.

Silahkan ganti tulisan Tab #1, Tab #2, Tab #3 dan Tab #4 dengan judul tab yang Anda inginkan.
Ganti Isikan Kontent Anda disini ! dengan isi kontent, bisa profil, about, screenshot, dll.

Sekian Artikel kali ini dengan judul Cara Memasang Tab View Pada Postingan Blog. Semoga dapat berguna bagi sobat blogger yang membutuhkannya.

Jangan lupa untuk berkomentar sebelum memasang Tab View ini agar saya bisa terus update artikel diblog ini. Terima kasih banyak telah membaca artikel di labor blog.

Gambar diatas adalah tangkapan layar Widget tab view 3 kolom adalah widget yang dipergunakan untuk menghemat tempat yang dapat diisikan dengan 3 buah widget lainnya agar tidak terlalu banyak memakan tempat.

Kalau anda masih belum faham apa itu widget tab view 3 kolom itu apa… anda bisa melihat Lihat demonya disini. Nah, bagi yang mau coba, Langsung saja.

1. Masuk ke Blogger > Dashboard Blogger > Tata Letak > Tambah Widget > HTML/Javascript.

2. Pastekan kode dibawah ini:

<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: 1px solid #ffffff; /* Warna border kotak Tab */
border-bottom: 1px solid #ccc; /*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: 1px solid #cccccc; /* Warna border Kotak Konten */
overflow: hidden;
background-color: #ffffff; /* 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”>Tab 1</span></a>
<a><span style=”color: #fff”>Tab 2</span></a>
<a><span style=”color: #fff”>Tab 3</span></a>
</div>
<div style=”width: 310px; height: 400px;” class=”Pages”>
<div class=”Page”>
<div class=”Pad”> <a href=”http://www.google.com/“>mbah google1</a>
</div></div>
<div class=”Page”>
<div class=”Pad”> <a href=”http://www.google.com/“>mbah google2</a>
</div></div>
<div class=”Page”>
<div class=”Pad”> <a href=”http://www.google.com/“>mbah google3</a>
</div></div>
</div>
</div>
</form>
<script src=”http://airalokadotcom.googlecode.com/files/tab%20view.js”>
</script>
<script type=”text/javascript”>
tabview_initialize(‘TabView’);
</script>
<div style=”text-align:right;margin-right:7px;”><a title=”Widget Tab View 3 Kolom” style=”font:bold 8px Arial,Sans-Serif;color:#666 !important;text-shadow:0px 1px 0px rgba(255,255,255,0.1);opacity:1 !important;visibility:visible !important;display:block !important;” href=”https://www.laborblog.site/2018/07/cara-membuat-tab-view-menu-3-kolom-di.html” target=”_blank”>&#9658;Get this widget</a></div>

– Ganti teks yang berwarna biru dengan judul dari widget yang ada pada tab tersebut.

– Ganti teks yang berwarna merah dengan teks atau script yang akan anda tambahkan.

3. Selanjutnya cari kode </head> kemudian Copas script di bawah ini tepat di atas kode </head>

<script type=’text/javascript’>
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);
// —– Tabs —–
var Tabs = TabView.firstChild;
while (Tabs.className != &quot;Tabs&quot; ) Tabs = Tabs.nextSibling;
var Tab = Tabs.firstChild;
var i = 0;
do
{
if (Tab.tagName == &quot;A&quot;)
{
i++;
Tab.href = &quot;javascript:tabview_switch(&#39;&quot;+TabViewId+&quot;&#39;, &quot;+i+&quot;);&quot;;
Tab.className = (i == id) ? &quot;Active&quot; : &quot;&quot;;
Tab.blur();
}
}
while (Tab = Tab.nextSibling);
// —– Pages —–
var Pages = TabView.firstChild;
while (Pages.className != &#39;Pages&#39;) Pages = Pages.nextSibling;
var Page = Pages.firstChild;
var i = 0;
do
{
if (Page.className == &#39;Page&#39;)
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+&quot;px&quot;;
Page.style.overflow = &quot;auto&quot;;
Page.style.display = (i == id) ? &#39;block&#39; : &#39;none&#39;;
}
}
while (Page = Page.nextSibling);
}
// —– Functions ————————————————————-
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
</script>

4. Jika dirasa sudah benar, lalu Save. (Jika dilakukan dengan benar maka hasilnya akan terlihat seperti digambar/ Demo). Seperti itulah Cara Membuat Tab View Menu 3 Kolom di Blog.

Selamat Mencoba & Berkreasi. Semoga Bermanfaat… ^_^