Cara Membuat Tab View Postingan Blog - Halo Sobat NapaRom, Pada Artikel yang sobat baca kali ini dengan judul Cara Membuat Tab View Postingan Blog, khusus untuk sobat pembaca sedia blog NapaRom. mudah-mudahan isi artikel atau postingan Artikel Blogging, yang saya tulis ini dapat sobat pahami. baiklah, selamat membaca.
Judul : Cara Membuat Tab View Postingan Blog
link : 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.
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(){
$('ul.tabs').each(function(){
var $active, $content, $links = $(this).find('a');
$active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);
$active.addClass('active');
$content = $($active[0].hash);
$links.not($active).each(function () {
$(this.hash).hide();
});
$(this).on('click', 'a', function(e){
$active.removeClass('active');
$content.hide();
$active = $(this);
$content = $(this.hash);
$active.addClass('active');
$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 Cara Membuat Tab View Postingan Blog. Semoga berhasil dan terima kasih telah berkunjung..
Sekian Artikel Cara Membuat Tab View Postingan Blog
Sampailah kita pada akhir artikel Cara Membuat Tab View Postingan Blog kali ini, mudah-mudahan bisa memberi manfaat untuk sobat semua. baiklah, sampai jumpa di postingan artikel lainnya.
sobat sekarang membaca artikel Cara Membuat Tab View Postingan Blog dengan alamat link https://naparom.blogspot.com/2018/06/cara-membuat-tab-view-postingan-blog.html
EmoticonEmoticon