Cara Menciptakan Tab View Postingan Blog

FAST DOWNLOADadsCara Membuat Tab View Postingan Blog - Menu tab view yaitu 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 diubahsuaikan 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 isu ihwal Cara Membuat Tab View Postingan Blog. Maaf kalau ada kekurangan, silahkan tambahkan beberapa kekurangan pada artikel di kolom komentar. Saya harap isu ini bermanfaat.FAST DOWNLOADads| Server1 | Server2 | Server3 |