Cara Membuat Tab View Unik Pada Blog

Cara Membuat Tab View Unik Pada Blog – setelah banyak membahas tutorial blog yang salah satunya Cara Membuat Iklan Teks Seperti Iklan PPC dan kembali lagi penulis ingin memberikan tutorial kembali mengenai Cara Membuat Tab View Unik Pada Blog.  Tab View merupakan desain yang simple untuk menempatkan beberapa artikel blog sehingga mengehmat space atau tempat pada blog. Mungkin ada banyak tutorial yang bisa anda cari di google dan semoga artikel ini juga bisa menambah wawasan anda mengenai pembuatan Tab View tersebut.

Jika anda berminat untuk mengikuti tutorial Cara Membuat Tab View Unik Pada Blog silahkan bisa membaca artikel ini hingga selesai dan anda dapat mengaplikasikanya pada blog anda. Memang terlihat agak sulit dalam penerapanya jadi sedikit diperlukan kelteliatian jika anda ingin benar – benar memasang di blog atau situs anda.

Berikut Tutorial Cara Membuat Tab View Unik Pada Blog

1. Pertama, login dahulu pada blogger.com

2. Kemudian menuju menu Template dan pilih edit HTML

3. Carilah kode ]]></b:skin>

4. Tempatkan kode divbawah ini tepat diatas ]]></b:skin>

div.TabView div.Tabs a{float:left;display:block;width:92px;height:22px;text-align:center;background-color:#999;padding-top:6px;border:1px solid #fff;border-bottom:1px solid #ccc;font-family:"Arial, Helvetica, sans-serif", Arial;font-weight:900;margin:5px 0 0 3px} div.TabView div.Tabs a:hover,div.TabView div.Tabs a.Active{background-color:#444343} div.TabView div.Pages{clear:both;border:1px solid #ccc;overflow:hidden;background-color:#F2F2F2} div.TabView div.Pages div.Page{height:100%;overflow:hidden;padding:2px} div.TabView div.Pages div.Page div.Pad{padding:3px 5px} .list{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioxrI4gXENvYS50NQuXqH8YgbzxFNEKHBcfQBK1dQnFvMsz2NjZMFSb8HJxnt9KETyOsKRfKMHueWQpacX-fsoWAFGZRkSCkzN1dApUVsp3CjGDEwl8T1AgDX3ta9ZEyxRy017B73oQdMh/) no-repeat left center;border-bottom:1px dotted #7f7f7f;line-height:1.5em;padding:3px 0 3px 20px}

5. Lalu save dan langkah selanjutnya memesang widget pada menu Tata Letak

6. Pilih +HTML/Javascript

7. Masukkan kode dibawah ini lalu save

<style type="text/css"> div.TabView div.Tabs a { float: left; display: block; width: 90px; /* Lebar Kotak Tab */ height: 25px; /* Tinggi Menu Utama Atas */ text-align: center; /* Posisi Teks Menu Tab */ margin: 5px 0px 0px 3px; /* Posisi Kotak Tab */ background-color: #0066CC; /* Warna background Kotak Tab */ padding-top: 6px; /* Spasi Atas */ border: 1px solid #ffffff; /* Warna border kotak Tab */ border-bottom: 1px solid #ccc; /*Warna border bawah kotak tab */ font-family: "Arial, Helvetica, sans-serif", Arial; /* Font Kotak Tab */ font-weight: 900; /* Ketebalan Teks kotak tab */ } div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active { background-color: #cccccc; /* Warna background utama kotak tab */ } div.TabView div.Pages { clear: both; border: 1px solid #cccccc; /* Warna border Kotak Konten */ overflow: hidden; background-color: #ffffff; /* Warna background Kotak konten */ } div.TabView div.Pages div.Page { height: 100%; padding: 2px; /* Jarak teks dalam kotak content */ overflow: hidden; } div.TabView div.Pages div.Page div.Pad { padding: 3px 5px; } </style> <form action="tabview.html" method="get"> <div id="TabView" class="TabView"> <div style="width: 298px;" class="Tabs"> <a><span style="color: #ffffff">Tutorial</span></a> <a><span style="color: #ffffff">Tips n Trick</span></a> <a><span style="color: #ffffff">Template</span></a> </div> <div style="width: 298px; height: 248px;" class="Pages"> <div class="Page"> <div class="Pad"> <div class="list"> <a href="http://namadomain.blogspot.com/2013/06/menampilkan-widget-tertentu-di-homepage.html" target="_blank" title="Menampilkan Widget Tertentu Di Homepage">Menampilkan Widget Tertentu Di Homepage</a></div> <div class="list"> <a href="http:// namadomain.blogspot.com/2013/05/mengganti-google-translate-dengan.html" target="_blank" title="Ganti Translate Dengan Gambar Bendera">Ganti Translate Dengan Gambar Bendera</a></div> <div class="list"> <a href="http:// namadomain.blogspot.com/2013/06/merubah-popular-post-seperti-gallery.html" target="_blank" title="Modifikasi Popular Post Seperti Gallery">Modifikasi Popular Post Seperti Gallery</a></div> <div class="list"> <a href="http:// namadomain.blogspot.com/2013/04/membuat-tab-view-ala-maskolis.html" target="_blank" title="Membuat Tab View Ala Maskolis">Membuat Tab View Ala Maskolis</a></div> <div class="list"> <a href="http://namadomain.blogspot.com/2013/04/Jurus-mematikan-control-a-c-u.html" target="_blank" title="Blogger Anti Maling">Blogger Anti Maling</a></div> <div class="list"> <a href="http://namadomain.blogspot.com/2013/04/membuat-daftar-isi-blog-dengan-jquery.html" target="_blank" title="Membuat Site Map Blog Efek Jquery">Membuat Site Map Blog Efek Jquery</a></div> <div class="list"> <a href="http://namadomain.blogspot.com/2013/04/cara-memperbaiki-h1-zero-that-is-really.html" target="_blank" title="ara Memperbaiki H1 Zero that is Really Bad di Chkme.com">Cara Memperbaiki H1 Zero that is Really Bad di Chkme.com</a></div> <div class="list"> <a href="http://namadomain.blogspot.com/2013/04/gambar-berputar-di-halaman-tertentu.html" target="_blank" title="Gambar Beputar di Halaman Tertentu">Gambar Beputar di Halaman Tertentu</a></div> <div class="list"> <a href="http://namadomain.blogspot.com/2013/04/cara-menghilangkan-tulisan-powered-by.html" target="_blank" title="Menghilangkan Tulisan Powered By Blogger">Menghilangkan Tulisan Powered By Blogger</a></div> <div class="list"> <a href="http://namadomain.blogspot.com/2013/05/cara-membuat-iklan-teks-seperti-iklan-ppc.html" target="_blank" title="Membuat Iklan Teks Sendiri Seperti Adsense">Membuat Iklan Teks Sendiri Seperti Adsense</a></div> <div class="list"> <a href="http://namadomain.blogspot.com/2013/05/cara-memasang-widget-alexa-di-blog.html" target="_blank" title="Solusi Meningkatkan Traffik Alexa">Solusi Meningkatkan Traffik Alexa</a></div> <div class="list"> <a href="http://namadomain.blogspot.com/2013/05/effect-shadow-di-bawah-widget-blog.html" target="_blank" title="Membuat Widget Blog Lebih Hidup">Membuat Widget Blog Lebih Hidup</a></div> </div> </div> <div class="Page"> <div class="Pad"> <div class="list"> <a href="http://namadomain.blogspot.com/2013/04/kumpulan-tempat-mencari-backlink-gratis.html" target="_blank" title="Backlink Gratis Dari PR 9">Backlink Gratis Dari PR 9</a></div> <div class="list"> <a href="http://namadomain.blogspot.com/2013/04/backlink-gratis-dari-direktori-artikel.html" target="_blank" title="Backlink Gratis Dari Direktori Artikel">Backlink Gratis Dari Direktori Artikel</a></div> <div class="list"> <a href="http://namadomain.blogspot.com/2013/05/cara-membangun-komunitas-blogger-sesama-daerah.html" target="_blank" title="Cara Membangun Komunitas Blogger Sesama Daerah">Cara Membangun Komunitas Blogger Sesama Daerah</a></div> <div class="list"> <a href="http://namadomain.blogspot.com/2013/06/cara-memberikan-tanda-pada-komentar-spam.html" target="_blank" title="Memberikan Efek Jera Kepada Spammer">Memberikan Efek Jera Kepada Spammer</a></div> <div class="list"> <a href="http://namadomain.blogspot.com/2013/06/mengetahui-jumlah-murni-pageviews-blog.html" target="_blank" title="Cara Mengetahui Jumlah Murni Pengunjung blog">Cara Mengetahui Jumlah Murni Pengunjung blog</a></div> </div> </div> <div class="Page"> <div class="Pad"> <div class="list"> <a href="http://namadomain.blogspot.com/2013/05/blogger-templates-kompi-centil.html" target="_blank" title="Template Centil">Template Centil</a></div> <div class="list"> <a href="http://namadomain.blogspot.com/2013/05/template-imut-bikin-gemes-kompiimut.html" target="_blank" title="Template Imut Bikin Gemez">Template Imut Bikin Gemez</a></div> <div class="list"> <a href="http://namadomain.blogspot.com/2013/05/template-blogger-kompiana-ala-kompi.html" target="_blank" title="Template Kompiana">Template Kompiana ( fast Loading )</a></div> <div class="list"> <a href="http://namadomain.blogspot.com/2013/05/gamer-darkpaper-maskolis-blogger.html" target="_blank" title="Gamer Darkpaper">Gamer Darkpaper</a></div> <div class="list"> <a href="http://namadomain.blogspot.com/2013/06/celebritymag-coralle-mondo-suvline.html" target="_blank" title="CelebrityMag">CelebrityMag</a></div> </div> </div> </div> </div> </form> <script type='text/javascript'> //<![CDATA[ function tabview_aux(TabViewId,id){var TabView=document.getElementById(TabViewId);var Tabs=TabView.firstChild;while(Tabs.className!="Tabs")Tabs=Tabs.nextSibling;var Tab=Tabs.firstChild;var i=0;do{if(Tab.tagName=="A"){i++;Tab.href="javascript:tabview_switch('"+TabViewId+"', "+i+");";Tab.className=(i==id)?"Active":"";Tab.blur()}}while(Tab=Tab.nextSibling);var Pages=TabView.firstChild;while(Pages.className!='Pages')Pages=Pages.nextSibling;var Page=Pages.firstChild;var i=0;do{if(Page.className=='Page'){i++;if(Pages.offsetHeight)Page.style.height=(Pages.offsetHeight-2)+"px";Page.style.overflow="auto";Page.style.display=(i==id)?'block':'none'}}while(Page=Page.nextSibling)}function tabview_switch(TabViewId,id){tabview_aux(TabViewId,id)}function tabview_initialize(TabViewId){tabview_aux(TabViewId,1)} //]]> </script> <script type="text/javascript">tabview_initialize('TabView'); </script>

8. Dan Selesai.

Untuk Keterangan kode – kode di atas dan yang perlu diperhatikan diantaranya:

a. Pada ukuran dari Tab View tersebut dan anda bisa mengganti sesuai keinginan anda.

b. Kemudian judul Tab dari posisi kiri ke kanan dan bisa diganti sesuai isi blog anda, seperti gambar diatas.

c. Gantilah URL dan judul artikelnya sesuai dengan URL blog dan judul artikel pada blog anda.

d. Dianjurkan agar lebih teliti pada pengeditan kode Javascriptnya agar anda bisa berhasil melakukanya.

Demikianlah tutorial kali ini tentang Cara Membuat Tab View Unik Pada Blog agar dapat menghemat ruang space pada bagian blog bila anda ingin memasang beberapa artikel yang banyak sehingga bisa dilihat oleh para visitor maupun pembaca blog. Semoga dapat bermanfaat dan anda lekas mencobanya. Jangan lupa like jika anda menyukai artikel ini.