Cara Membuat Tab View Postingan Blog - Hallo sahabat Apkpure, Pada Artikel yang anda baca kali ini dengan judul Cara Membuat Tab View Postingan Blog, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Blogging, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Cara Membuat Tab View Postingan Blog
link : Cara Membuat Tab View Postingan Blog

Cara Membuat Tab View Postingan Blog

Cara Membuat Tab View Postingan Blog - Menu tab view adalah menampilkan beberapa widget yang berbeda kemudian digabungkan penempatannya menjadi satu bagian dalam bentuk tab-tab yang terpisah. Fungsi dari menu tab view ini bisa kita gunakan untuk menghemat ruang di bagian sidebar maupun footer dan membuat kesan tampilan blog kita terlihat lebih profesional.

Cara Membuat Tab View di Postingan Pada Blog:

1. Copy Paste kode berikut sebelum kode ]]></b:skin>

ul.tabs{margin:0 -10px;}
.tabs li{list-style:none;display:inline;}
.tabs a{padding:5px 10px;display:inline-block;background:#666;color:#fff;text-decoration:none;}
.tabs a.active {background:#fff;color:#000;}
#tab1,#tab2,#tab3{padding:10px;width:600px;background:#fff;} 

2. Copy Paste kode berikut sebelum kode </head> 

<script type='text/javascript'>
$(document).ready(function(){
$(&#39;ul.tabs&#39;).each(function(){
var $active, $content, $links = $(this).find(&#39;a&#39;);
$active = $($links.filter(&#39;[href=&quot;&#39;+location.hash+&#39;&quot;]&#39;)[0] || $links[0]);
$active.addClass(&#39;active&#39;);
$content = $($active[0].hash);
$links.not($active).each(function () {
$(this.hash).hide();
});
$(this).on(&#39;click&#39;, &#39;a&#39;, function(e){
$active.removeClass(&#39;active&#39;);
$content.hide();
$active = $(this);
$content = $(this.hash);
$active.addClass(&#39;active&#39;);
$content.show();
e.preventDefault();
});
});
});
</script>

3. Copy Paste kode dibawah ini dipostingan anda pada HTML bukan Compose, dengan catatan Lebar dan Tinggi yang digunakan sesuai atau disesuaikan dengan nilai lebar yang ada di kode CSS diatas:

<ul class='tabs'>
<li><a href='#tab1'>Tab 1</a></li>
<li><a href='#tab2'>Tab 2</a></li>
<li><a href='#tab3'>Tab 3</a></li>
</ul>
<div id='tab1'>
<h3>Section 1</h3>
<p>Ganti dengan tulisan atau gambar atau apapun yang Anda inginkan</p>
</div>
<div id='tab2'>
<h3>Section 2</h3>
<p>Ganti dengan tulisan atau gambar atau apapun yang Anda inginkan</p>
</div>
<div id='tab3'>
<h3>Section 3</h3>
<p>Ganti dengan tulisan atau gambar atau apapun yang Anda inginkan</p>
</div>

Demikian informasi tentang Cara Membuat Tab View Postingan Blog. Maaf jika ada kekurangan, silahkan tambahkan beberapa kekurangan pada artikel di kolom komentar. Saya harap informasi ini bermanfaat.

Demikianlah Artikel Cara Membuat Tab View Postingan Blog

Sekianlah artikel Cara Membuat Tab View Postingan Blog kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Cara Membuat Tab View Postingan Blog dengan alamat link https://apkpure-123.blogspot.com/2019/01/cara-membuat-tab-view-postingan-blog.html

Cara Membuat Tab View Postingan Blog 2019-01-21T06:51:00-08:00 Rating: 4.5 Diposkan Oleh: BLOG LIRIK LAGU