CARA GAMPANG. Menyimak judul artikel ini pasti anda merasa sedikit kebingungan, membuat Tab View Widget pengganti Related Post di sini maksudnya adalah mengganti fitur Related Post yang biasanya terletak di bagian bawah setiap postingan blog, dengan Tab View Widget yang juga menampilkan thumbnail dari masing-masing artikel blog. Kelebihan dari Tab View Widget ini adalah dapat menampilkan artkel-artikel yang tidak sama label (kategori) nya, dengan demikian kita memberikan kesempatan kepada pengunjung atau visitor blog untuk mengakses halaman-halaman lainnya (yang tidak sama label/kategorinya) dalam satu kesempatan yang sama. Hal ini bertujuan untuk meningkatkan pageviews dari masing-masing halaman yang ada. Dengan demikian baik langsung ataupun tidak langsung, akan membawa dampak positif bagi keberadaan blog kita.
Pertanyaan yang mungkin timbul adalah : Bagaimana sih bentuk dari Tab View Widget tersebut ? Baiklah anda dapat perhatikan gambar di bawah ini :
Nah, jikalau anda belum puas dengan gambar tersebut, anda dapat menuju ke bagian bawah artikel ini, di sanalah anda akan melihat demo dari Tab View Widget ini.
Anda tertarik untuk membuatnya ? Dan bila anda tertarik untuk membuatnya, berikut ini akan saya uraikan tahapan-tahapan secara rinci :
- Pertama Anda mesti login ke blogger dengan akun Anda
- Kedua pilih blog yang ingin anda tambahkan Tab View Widget ini.
- Setelah itu masuk ke template >> Edit HTML, kemudian centang expand widget templates
- Untuk berjaga-jaga jika terjadi kesalahan dalam pengeditan nantinya, sebaiknya backup dulu template anda.
- Setelah semua langkah diatas anda lakukan, letakkan kode berikut ini diatas kode ]]></b:skin>
Karena pada blog demo yang saya gunakan lebar main-wrapper (kolom postingan) adalah 600px maka untuk membungkus tab view widget lebarnya harus sama, yaitu 600px. Anda bisa sesuaikan dengan lebar main-wrapper pada template yang Anda gunakan. Dan untuk tab viewnya sendiri lebarnya harus dikurangi 2px (1px kanan
dan kiri), karena tab ini dibungkus dengan border setebal 1px, sehingga
lebarnya menjadi 598px. Lebar tiap satu post disini 134px, jika pada template yang Anda gunakan lebar main-wrapper lebih kecil/lebar, maka lebar untuk satu post ini pun juga harus diperkecil/perlebar sehingga jarak antara bagian sisi kanan dan kiri sama.
Langkah selanjutnya, masih pada posisi Edit HTML, masukkan kode berikut ini diatas kode </head> :
Keterangan :
Perhatikan URL script warna biru diatas, itu adalah kode script jQuery.min.js seri terbaru yang di gunakan untuk membuat tab view widget. Jika pada template Anda sudah terdapat jQuery.min.js walaupun serinya berbeda, kode warna biru diatas tidak perlu lagi Anda masukkan. Cukup satu jQuery.min.js yang ada di template, terserah mau seri berapa, kalau bisa versi yang terbaru.
Tulisan warna merah : Blogging, Backlink dan seterusnya adalah judul untuk tab view widget, anda bisa ganti sesuai katehori yang ingin ditampilkan pada widget tersebut. Warna biru (49 dan 49) diatas adalah ukuran lebar dan tinggi thumbnail pada satu post kategori, silahkan ukurannya anda sesuaikan sendiri.
Kemudian masukkan kode berikut sebelum kode </body> :
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function(){$(".tabber").hide();$("ul.tab-view li:first").addClass("active").show();$(".tabber:first").show();$("ul.tab-view li").click(function(){$("ul.tab-view li").removeClass("active");$(this).addClass("active");$(".tabber").hide();var activeTab=$(this).find("a").attr("href");$(activeTab).fadeIn();return false})});
//]]>
</script>
Langkah selanjutnya adalah bagaimana cara menempatkan tab view widget tersebut pada bagian bawah setiap artikel blog kita. Carilah rangkaian kode/script berikut ini :
<div class='post-footer-line post-footer-line-3'><span class='post-location'>
<b:if cond='data:top.showLocation'>
<b:if cond='data:post.location'>
<data:postLocationLabel/>
<a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>
</b:if>
</b:if>
</span></div>
Kemudian letakkan kode berikut ini dibawahnya :
<br/>
<br/>
<div id='tabber-wrapper'>
<ul class='tab-view'>
<li><a href='#tab1'><script>document.write(Title1);</script></a></li>
<li><a href='#tab2'><script>document.write(Title2);</script></a></li>
<li><a href='#tab3'><script>document.write(Title3);</script></a></li>
</ul><div class='clear'/>
<div class='tab-wrapper'>
<div class='tabber' id='tab1'>
<script>
document.write(" <script src=\"/feeds/posts/default/-/blogging?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script></div>
<div class='tabber' id='tab2'>
<script>
document.write(" <script src=\"/feeds/posts/default/-/backlink?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script></div>
<div class='tabber' id='tab3'>
<script>
document.write(" <script src=\"/feeds/posts/default/-/tips-trik?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script></div>
</div>
<div class='clear'/>
</div></div>
Tulisan warna merah pada kode diatas adalah label atau kategori yang saya tampilkan pada tab view widget milik saya, silahkan ganti dengan label Anda sendiri dan sesuaikan dengan judul tab view yang telah diuraikan diatas.
Simpan template anda, dan selesailah sudah, semoga bermanfaat.
8D89ZQED534W
Izin minta saran gan.. saya di tawari untuk memiliki akun Google Adsense d blog? Bagaimana Gan?
BalasHapus@ Debu Yandi : Silahkan saja and memiliki akun Google Adsense, namun ada satu hal yang perlu anda perhatikan, jangan sekali-kali menerapkan tehnik SEO Black Hat, karena blog anda kemungkinan besar akan di-banned oleh Google. Salam.
Hapus