Cara Membuat Tab View 3 Kolom

Advertise

Tangkapan Layar

Abdul Hamid Info - Fungsi dari tab view selain memperindah penampilan blog, tab view juga dapat mengurangi space/ruang yang berlebihan pada blog Sobat. Dan pastinya tidak memberatkan sebuah blog.

Langsung aja ya sob berikut cara membuat tabview :

Masuk blogger > rancangan > edit html > centang expand template widget

cari kode ]]></b:skin>

Copas kode di bawah ini tepat di atas kode ]]></b:skin>

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 120px;
text-align: center;
height: 24px;
padding-top: 3px;
vertical-align: middle;
border: 0.5px solid #000000;
border-bottom-width: 0;
text-decoration: none;
font: 12px Arial, &amp;quot;Times New Roman&amp;quot;, Serif;
font-weight: 900;
color: #000080;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FFFFFF;
}
div.TabView div.Pages
{
clear: both;
background-color: #FFFFFF; border: 0.5px solid #000000;
overflow: hidden;
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

Kemudian Simpan / Save Template.

Selanjutnya Klik Design/Rancangan >> Page Element >> Add a Gadget >>HTML/Javascript. copy kode di bawah ini di dalam box atau kotak HTML/Javascript

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Judul Tab 1</a>
<a>Judul Tab 2</a>
<a>Judul Tab 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">
<div class="Page">
<div class="Pad">
Isi tab 1
</div>
</div>
<div class="Page">
<div class="Pad">
Isi tab 2
</div>
</div>
<div class="Page">
<div class="Pad">
Isi tab 3
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

Keterangan:

width: 350px; ini adalah ukuran kotak seluruhnya bukan per tab.

Judul Tab 1,2,3 itu adalah lah judul tab, contoh gambar di atas judulnya adalah recent post, recent comment, statistic.

Isi tab 1,2,3 bisa di isikan script html, banner dan script widget lainnya.

Sumber: laborblog.site

Video Pilihan: Meningkatkan YouTube Views, Likes, Dan Subscribers Menggunakan ViewGrip

Baca Juga

Halaman: