19 February 2015

Membuat Menu Tab Multi Widget Blog

Tags


Membuat Menu Tab Multi Widget Blog
Gambar ilustrasi: © social media com


Cara Membuat Menu Widget Multi Tab di Sidbar Blog atau Membuat tab widget tiga kolom sebenarnya tidaklah susah,
sebuah website atau blog profesional dengan tampilan menarik adalah dambaan bagi semua blogger ,hal ini tentu membutuhkan proses dan waktu. untuk membuat blog kita makin banyak pungunjung kita sebagai pemilik blog di tuntut sebisa mungkin menyediakan berbagai macam sumber informasi dimana informasi tersebut sangat di butuhkan bagi para pengunjung. oky itulah sekilas kata pendahuluan dari Admin , kembali ke pokok pembahasan yaitu Cara Membuat Menu Widget Multi Tab di Sidbar Blog atau Membuat tab widget tiga kolom

Mungkin artikel tentang Menu Tab Multi Widget Di Blog ini sudah banyak berkeliaran di luar sono , tapi kali ini saya memutuskan untuk tetap membuat artikel ini sebagai Documen untuk saya sendiri dan jika kalian semua ingin menerapkan di blog silahkan ikuti beberapa langkah penjelasan di bawah,

Fungsi membuat Menu Tab Multi Widget di blog ini terbukti bisa membuat tampilan widget blog menjadi simpel dan tidak amburadul atau acak-acakan. Karena dengan membuat menu tab multi widget di blog, maka widget akan menjadi satu tampilan atau memiliki efek show hidden widget. Intinya adalah dapat menghemat tempat dalam blog, sebab menu tab multi widget ini dapat berisi banyak widget. Tentunya hal ini sangat berguna sekali bagi blogger yang mengutamakan kerapian, apalagi blog yang banyak sekali memasang widget. demo anda sekalian bisa melihat sidbar blog ini


  1. Login ke >> Blogger.com

  2. Pada Dasbor pilih menu >> Template >> Edit HTML.
  3. Silahkan anda cari kode </head> (Gunakan CTRL+F untuk mempermudah pencarian)
  4. copy paste kode script berikut tepat di atas kode </head>


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


    Jika dalam template kalian sudah ada kode script diatas, maka tidak perlu menambahkan lagi kedalam template blog anda. Karena efeknya Menu Tab Multi Widget tidak bisa berfungsi dengan baik


  5. Simpan Template
  6. Setelah kode di atas tersimpan di dalam template blog anda, sekarang kita menuju ke penerapan kode CSS-nya ke dalam widget blog ,

  7. Kembali ke "Dashboard" blog, pilih menu
    >> Tata Letak
    >> Tambah Gadget
    >> HTML/JavaScript
  8. Masukkan semua kode CSS di bawah kedalam kotak HTML/JavaScriptyang baru saja anda buat tadi



<style type="text/css">

        .blogtabs {padding: 0px !important;border: 0 solid #bbb;}

        .blogtabs h2 {float:left;margin:1px;font-size: 12px;padding: 2px 2px;border: 1px solid #000;overflow: hidden;position: relative;background: #49A4EE;cursor:pointer
display: block;
width: 30%;height: 25px;text-align: center;}

        html .blogtabs h2.active {background: #235C76;}

        .blogtabs .widget-content {border-top:1px solid #C6C6C8;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>
Terakhir; Simpan widget Catatan: silahkan edit background tampilan widget dengan merubah kode-kode berikut:
  • baris no:5 -border: 1px solid #000 (garis tepi boks kotak widget)

  • baris no:5 -background: #49A4EE; ( boks kotak widget )

  • baris no:7 -width: 30%;height: 25px; ( lebar tinggi kotak widget)


  • baris no:9 -background: #235C76; ( hover widget jika di klik )

  • baris no:11 -background: #fff (warna teks judul widget )




Agar widgetnya dapat menyatu dan menjadi multi tab widget, maka cara penerapan widget di blog harus tersusun seperti gambar di bawah ini.
oky para pengunjung sekalian saya rasa sudah cukup jelas ,Saya yaqin anda sekalian mudah memahami dan bisa mempraktekkan ......

4 comments

Ijin copas bang

Lam kenal mas.....to gadis cantik

Tunjuk dirimu hai gadis cantik.!!!!!

ko cuma bisa di home page aj ya mas?


EmoticonEmoticon