Cara Membuat Tab View di Blog

L oading yang ringan pada blog merupakan salah satu cara untuk membuat orang senang berkunjung di blog kita, apalagi ditambah artikel-artikel yang keren, pastinya pengunjung akan mendatangi blog sobat. Cara agar loading blog kita cepat  adalah dengan memperingkas tampilan dan tidak terlalu banyak widget, salah satu caranya adalah dengan membuat widget Menu TAB View.

Menu TAB view merupakan widget tambahan berbentuk tab. Dengan cara menggunakan tab view kita dapat menghemat sidebar pada blog kita sehingga kita tidak perlu menambahkan banyak widget yang akhirnya akan memberatkan loading pada blog kita.


1. Silakan Login ke blog sobat
2. Masuk ke tab Perancangan lalu pilih edit HTML
3. Seperti biasa centang "Expand widget templates" untuk menghindaran apabila terjadi kesalahan.
4. Silahkan cari kode ]]></b:skin> Tekan CTRL+F untuk mengeluarkan kotak pencarian
5. Setelah ketemu kode diatas silahkan letakkan kode dibawah ini di atas kode ]]></b:skin>


/* tab model 2 ateonsoft.com */<br /> div.Tabateonsoft div.TFs<br /> {height: 30px; overflow: hidden;}<br /> div.Tabateonsoft div.TFs a<br /> {float: left; display: block; text-align: center; text-decoration: none; font: normal 12px arial; padding:3px 5px 3px 3px; margin:0 5px 0 0;letter-spacing:-0.07em;<br /> background:#f0f0f0;<br /> color: #333;<br /> border-top:1px solid #CCCCCC;<br /> border-right:1px solid #999999;<br /> border-bottom:1px solid #999999;<br /> border-left:1px solid #cccccc;<br /> -moz-border-radius-bottomright: 10px; -moz-border-radius-topright: 0px;<br /> }<br /> div.Tabateonsoft div.TFs a:hover<br /> { background: #E8E8E8;<br /> border-top:1px solid #999999;<br /> border-right:1px solid #cccccc;<br /> border-bottom:1px solid #cccccc;<br /> border-left:1px solid #999999;}<br /> div.Tabateonsoft div.TFs a.Active<br /> { background: #E8E8E8;<br /> color: #000000;<br /> border-top:1px solid #999999;<br /> border-right:1px solid #cccccc;<br /> border-bottom:1px solid #cccccc;<br /> border-left:1px solid #999999; font-weight:bold;}<br /> div.Tabateonsoft div.Pages<br /> { clear: both; overflow: hidden; height:240px; border:1px solid #EFF0F1; padding:0;background: #ffffff; -moz-border-radius:5px;}<br /> div.Tabateonsoft div.Pages div.Page<br /> {height: 100%;padding: 0px; overflow: hidden; }<br /> div.Tabateonsoft div.Pages div.Page div.floor<br /> { font-size:11px;padding: 3px 5px; text-align:left;}

5. Letakkan kode di bawah ini di atas kode </head>

<script src='http://ayomaju.com/friendsharingfile/ateonsoft_tab.js' type='text/javascript'/>

6. Save template

7. Masuk ke tab Elemen laman

8. Tambahkan widget HTML/JavaScript

9. Silakan letakkan kode di bawah ini di dalam widget HTML/JavaScript

<form action="tabateonsoft.html" method="get"><br /> <div class="Tabateonsoft" id="Tabateonsoft"><br /> <div class="TFs"><br /> <a>tab1</a><br /> <a>tab2</a><br /> <a>tab3</a><br /> <a>tab4</a><br /> </div><br /> <div class="Pages"><br /> <div class="Page"><!-- Tab --><br /> <div class="floor"><br /> Disini letakkan kode untuk tab 1 anda<br /> </div><br /> </div><!-- end Tab --><br /> <div class="Page"><!-- Tab --><br /> Disini letakkan kode untuk tab 2 anda<br /> </div><!-- end Tab --><br /> <div class="Page"><!-- Tab --><br /> <div class="floor"><br /> Disini letakkan kode untuk tab 3 anda<br /> </div><br /> </div><!-- end Tab --><br /> <div class="Page"><!-- Tab --><br /> <div class="floor"><br /> Disini letakkan kode untuk tab 4 anda<br /> </div><br /> </div><!-- end Tab --><br /> </div><br /> </div><br /> </form><br /> <script type="text/javascript">tabateonsoft_name('Tabateonsoft');</script>

Simpan widget dan lihat hasilnya.
Sumber : Cwiter.blogspot.com

Kembali ke atas

Label :Tutorial