Tentang Ilmu Komputer, Android, Panduan Blogging dan Tips di Internet.

Cara Membuat Tab Multi Widget di Blog

Tab Multi Widget adalah penggabungan beberapa Widget pada satu kolom dengan Tab. Tab Multi widget ini sangat berguna jika Blog sobat mempunyai terlalu banyak widget. Sobat bisa menggabungkan widget-widget tersebut pada satu kolom dengan Tab di atasnya. Jadi sobat tidak perlu menyediakan area yang luas untuk widget yang banyak.


Oke langsung saja ke langkah-langkah pembuatannya.

Cara Membuat Tab Multi Widget di Blog

Widget bawaan Blogspot

  • Login ke kaun Blogger sobat.
  • Masuk pada bagian Template.
  • Pilih Edit HTML.
  • Cari kode </head>, agar lebih mudah gunakan tombol ctrl+F.
  • Masukan kode <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> , di atas kode </head>.
  • Klik simpan Template.
  • Selanjutnya masuk ke bagian Tata Letak.
  • Klik Tambah Gadget di posisi yang sobat inginkan.
  • Pilih HTML/Javascript.
  • Masukan kode berikut.

<style type="text/css">
        .blogtabs {padding: 0px !important;border: 0 solid #bbb;}
        .blogtabs h2 {float: left;margin: 0 2px 4px 0;font-size: 12px;padding: 3px 5px;border: 1px solid #bbb;overflow: hidden;position: relative;background: #e0e0e0;cursor:pointer;}
        html .blogtabs h2.active {background: #fff;}
        .blogtabs .widget-content {border: 1px solid #bbb;padding: 10px;background: #fff;clear:both;margin:0;}
        .btab, #showtabs {display:none;}
        </style>

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>

        <script type="text/javascript" src="http://ayriyzone.googlecode.com/files/SimpleTabViewJQuery.js"></script>

        <script type="text/javascript">

        $(document).ready(function() {
        $('#showtabs').simpleBlogTab ({organictabs: 3});
        });
        </script>

        <div id="showtabs"></div>

  • Ubahlah ({organictabs: 3}) sesuai dengan berapa jumlah tab yang akan sobat buat.
  • Klik Simpan widget.
  • Kemudian letakan widget-widget yang akan digabungkan tepat di bawah widget yang baru saja dibuat.
  • Maka setelah beberapa widget diletakkan tepat di bawah tab multi widget yang baru saja sobat buat, hasilnya kurang lebih akan seperti berikut.

Widget dengan mode HTML/Javascript.

  • Login ke akun Blogger sobat.
  • Masuk pada bagian Template.
  • Pilih Edit HTML.
  • Cari kode </head>, agar lebih mudah gunakan tombol ctrl+F.
  • Masukan kode berikut diatas kode </head> .

<script type='text/javascript'>
//<![CDATA[
function tabview_aux(TabViewId, id)
{

var TabView = document.getElementById(TabViewId);
// ----- Tabs -----
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);
// ----- Pages -----
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);
}
// ----- Functions -------------------------------------------------------------
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
//]]>
</script>
  • Cari kode ]]></b:skin>,  agar lebih mudah gunakan tombol ctrl+F.
  • Masukan kode berikut di atas kode  ]]></b:skin>.

div.TabView div.Tabs
{
height: 30px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 98px; /* Lebar Menu Atas */
text-align: center;
height: 30px; /* Tinggi Menu Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #BDBDBD; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Verdana", Serif; /* Font Menu Utama Atas */
font-weight: bold;
color: #000; /* Warna Font Menu Utama Atas */
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #E6E6E6; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #BDBDBD; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #E6E6E6; /* Warna background Kotak Utama */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

  • Klik Simpan Template.
  • Selanjutnya, Masuk ke bagian Tata Letak.
  • Klik Tambah gadget di posisi yang sobat inginkan.
  • Pilih HTML/Javascript.
  • Masukan kode berikut.

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 300px;">
<a>Menu 1</a>
<a>Menu 2</a>
<a>Menu 3</a>
</div>
<div class="Pages" style="width: 300px; height: 250px;">
<div class="Page">
<div class="Pad">
Letakkan konten menu 1 disini</div></div>
<div class="Page">
<div class="Pad">
Letakkan konten menu 2 disini</div></div>
<div class="Page">
<div class="Pad">
Letakkan konten menu 3 disini</div></div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

  • Masukan judul Tab pada kode berwarna biru, dan masukan kode HTML widget pada kode berwarna merah.
  • Klik Simpan widget dan selesai, sobat dapat lihat hasilnya.
Demikian pembahasan tentang Membuat Tab Multi Widget di Blog. Semoga memberikan manfaat untuk sobat-sobat sekalian.

Artikel terkait : Cara Membuat Tab Multi Widget di Blog

Artikel Blog Regi Brader Lainnya :

23 komentar:

  1. Nice ARtikel sob
    sangat membantu
    http://hollowinter.blogspot.com/
    kunjungi balik yah
    #berbagi itu indah#

    ReplyDelete
  2. kok ga mau ya sob , mohom pencerahannya


    ini blog saya "http://hardshoop.blogspot.com/"
    trims

    ReplyDelete
  3. agan minta saran di template bawaan sudah ada tab multi widget tapi masih terpisah bagaimana cara menyatukannya ?
    http://home-edukasi.blospot.com
    Terima kasih

    ReplyDelete
  4. thank ya agan settalah saya coba2 eh bisa juga membuat tab multi widget. untuk templates yang sudah ada multi tab seperti template saya hanya memasang kode javascripnya di widget j. terima kasih

    ReplyDelete
  5. Gan, kok gamau sih gan.. blog saya nih gan..
    http://berbagilmubersamaraffi.blogspot.com

    ReplyDelete
    Replies
    1. coba lebih teliti lagi sob, saya tidak bisa memberi penjelasan karena tidak tahu masalah yang sobat hadapi...

      Delete
  6. This comment has been removed by a blog administrator.

    ReplyDelete
  7. Nice info nih, secara kan saya masih newbie soal blog. Coba dulu gan. Thanks banget ilmunya. Kunjungi balik ya blog saya yg amat amburadul.

    joemulyono.blogspot.com

    ReplyDelete
  8. gan ggimana supaya kuran lebar tab atas sama seperti lebar kolom,
    mohon penjelasannya gan.
    trims !

    ReplyDelete
    Replies
    1. sobat harus mengatur lebar tab-nya, atau jarak antara tab, atau ukuran tulisan. Silakan sobat edit script yang telah saya berikan. Saya sudah tandai kode-kode ukuran ya kan. Maaf tidak bisa menjelaskan dengan detail

      Delete
  9. This comment has been removed by a blog administrator.

    ReplyDelete
  10. terima kasih tutorialnya, sangat bermanfaat.
    kunjungi juga www.umatmuhammad.com

    ReplyDelete
  11. alhamdulillah, bisa langsung dipraktekin ni,,
    thanks infonya, sangat bermanfaat...

    kunjungi balik ya http://www.bisniscimuth.blogspot.com :)


    ReplyDelete
  12. belum work nih bro di Blog ane http://gadget-island.blogspot.com/

    ReplyDelete
  13. ty gan infonya
    http://disiniadaloker.blogspot.com/
    DI SINI ADA LOKER
    Tempat berbagi informasi lowongan kerja untuk wilayah Pekanbaru dan sekitaranya - Riau

    ReplyDelete
  14. Terimakasih atas informasinya. Silahkan berkunjung ke blog saya Doa Ibu Blog

    ReplyDelete
  15. gan, untuk cara yang kedua nambahin menunya gimana?

    ReplyDelete
    Replies
    1. Kita masukan widget yang terdiri dari kode html pada tulisan menu1, menu2, menu3 yang berwarna hijau

      Delete
  16. gan mau tanya, cara buat langganan email kayak punya agan di bawah blog gimana ya..mhon pncerahannya, maaf kluar topik

    ReplyDelete
    Replies
    1. http://www.b-tutorial.com/2016/05/responsive-email-subscribe-di-footer.html

      Delete

Copyright © 2013-2016 Blog Regi Brader - All Right Reserved