Cara Membuat Widget 3 in 1 di Sidebar Blogger (Multi Tab)

Cara Membuat Widget 3 in 1 di Sidebar Blogger (Multi Tab) ala Arlina - membuat widget navigasi seperti popular post, label dan recent post jika dibuat terpisah. Pastinya akan memakan tempat cukup banyak di sidebar karena widget tersebut akan memanjang kebawah sesuai dengan banyaknya widget yang ditampilkan.

Maka tidak heran banyak yang mencari tutorial membuat widget multi tab sidebar untuk menghemat tempat tersebut dan menggunakan tempat lain untuk keperluan seperti untuk iklan atau content placement.

Cara Membuat Widget Multi Tab di Sidebar Blogger

• Buka akun Blogger
• Perhatikan Tabel dibawah terdapat 3 Menu, yaitu HTML - CSS - JS yang berurutan dari sebelah kiri dan cobalah klik satu persatu menu tersebut.

See the Pen Widget Multi Tab Sidebar by William Rinaldo (@masrinaldo) on CodePen.

1. Menambahkan HTML Multi Tab di Template

• Copy semua kode pada Menu HTML diatas.
• Pada Edit HTML Blogger. Sobat cari <div id='sidebar-wrapper'> atau id='sidebar-wrapper' dan pastekan kode yang sudah di copy pada langkah ke 4 setelah id='sidebar-wrapper'.

Note : Sobat bisa mengganti judul untuk setiap Tab nya. Dengan mencari Popular, Tags dan Archive pada Tabel HTML di atas untuk mengganti judul.

2. Memperganteng Multi Tab dengan Menambahkan CSS di Template

• Copy semua kode di Menu CSS pada Tabel di atas.
• Cari dan pastekan CSS tersebut tepat sebelum ]]></skin> atau </style>

3. Menambah fungsi klik dengan Javascript di Widget Multi Tab

• Pada Tabel diatas. Copy kode yang ada di Menu JS
• Paste kode tersebut sebelum / diatas </body>
• Simpan Tema atau Save Template

4. Memasang Widget di Multi Tab di Blogger

• Buka Menu Tata Letak
• Cari fitur Sidebartab1, sidebartab2 dan sidebartab3
• Klik Tambah Gadget untuk menambahkan navigasi di masing-masing sidebartab tersebut seperti Label dan Popular Post.
• Simpan setelan

Note : saya sudah mencoba membuat widget 3 in 1 atau widget multi tab ini dan tampilan sempat berantakan seperti ketika klik menu TAGS.
1. Widget akan berpindah posisi menjadi ke atas (hanya menu Tags saja). Ini diakibatkan adanya element error yang di ::before tidak sesuai atau bertabrakan. Tetapi saya coba mengulangi dari awal lagi dengan langkah yang sama, error tersebut hilang dan disetiap menu berfungsi dengan baik tidak ada yang berantakan lagi.

2. Setelah selesai menambahka navigasi popular post, label dan navigasi lainnya. Lebar navigasi akan menjadi tidak responsive atau hanya tampil setengah dari setiap menu navigasi saja (Tidak full Width). Cobalah menambahkan width:100% pada class widget-content.

Tampilan berantakan tersebut mungkin hanya terjadi di beberapa template saja. Karena ada yang sudah menggunakan template ini dan tidak ada tampilan yang berantakan.

Demikian "Tutorial Cara Membuat Widget 3 in 1 di Sidebar Blogger (Multi Tab)" dan Silahkan di coba.

Source code : https://www.arlinadzgn.com/2015/05/cara-memasang-multi-tab-sidebar-widget.html