Cara Menciptakan Tab View Postingan Blog

Cara Membuat Tab View Postingan Blog - Menu tab view ialah menampilkan beberapa widget yang berbeda lalu digabungkan penempatannya menjadi satu bab dalam bentuk tab-tab yang terpisah. Fungsi dari sajian tab view ini dapat kita gunakan untuk menghemat ruang di bab sidebar maupun footer dan menciptakan kesan tampilan blog kita terlihat lebih profesional.

Cara Membuat Tab View di Postingan Pada Blog:

1. Copy Paste isyarat berikut sebelum isyarat ]]></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 isyarat berikut sebelum isyarat </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 isyarat dibawah ini dipostingan anda pada HTML bukan Compose, dengan catatan Lebar dan Tinggi yang dipakai sesuai atau diadaptasi dengan nilai lebar yang ada di isyarat 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 goresan pena atau gambar atau apapun yang Anda inginkan</p> </div> <div id='tab2'> <h3>Section 2</h3> <p>Ganti dengan goresan pena atau gambar atau apapun yang Anda inginkan</p> </div> <div id='tab3'> <h3>Section 3</h3> <p>Ganti dengan goresan pena atau gambar atau apapun yang Anda inginkan</p> </div>

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