Membuat Tab View Dengan CSS dan HTML di Blogger

Membuat Tab View Dengan CSS dan HTML di Blogger - Tab View merupakan sebuah aplikasi untuk meminimalisasi tampilan halaman sidebar atau footer blog, yang digunakan untuk meletakkan widget/gadget bawaan blogger (popular post, label, category dll) maupun pihak kedua (fanspage facebook, link friend, recent comment dll). Jadi tab view sangat bermanfaat buat para blogger untuk mendekorasi halaman blog mereka. Untuk contohnya anda bisa melihat gambar berikut atau langsung melihat tab view blog ini pada bagian footer.

Tab View

Ada banyak blogger yang membuat tutorial tentang cara membuat tab view di blog, tapi kebanyakan tidak responsive karena menggunakan JavaScript atau JQuery sehingga loading halaman blog menjadi lama dan memakan banyak kuota. Menurut pengalaman memasang tab view yang dibuat menggunakan kode Javascript, tab viewnya akan memanjang kebawah terlebih dahulu untuk menunggu proses loading kode javascript selesai dan tab view menyatu seperti halnya tab view.

Pada tutorial kali ini saya akan memaparkan cara membuat tab view yang inshaAllah responsive, tidak menggunakan JavaScript maupun JQuery dan tanpa Edit HTML template blog anda. Bagaimana sobat? Apakah anda berminat? Kode yang akan saya gunakan untuk membuat tab view ini murni hanya menggunakan sedikit kode CSS dan beberapa kode HTML yang akan anda letakkan pada gadget/widget blog dengan pilihan gadget HTML/JavaScript. Yuk kita langsung ke langkah-langkahnya.

Cara Membuat Tab View Dengan CSS dan HTML di Blogger Tanpa Edit HTML

1. Pertama-tama silahkan anda login ke akun blogger anda. Pada menu blogger atau Dashboard pilih menu Tata Letak, lalu klik Add Gadget/Tambahkan Gadget.

2. Selanjutnya pilih dan klik HTML/JavaScript.

3. Copy kode di bawah ini.

#Tombol1,#Tombol2{margin-top:-30px;padding:0;text-align:center;float:left;border:1px solid #aaa;background:#ddd;cursor:pointer;width:32%;height:25px;line-height:25px}
#Tombol2{margin-left:34%}
#Tombol3{margin-top:-30px;margin-right:-2px;padding:0;text-align:center;float:right;border:1px solid #aaa;background:#ddd;cursor:pointer;width:32%;height:25px;line-height:25px}
#Content1{display:block;width:100%;height:300px;padding:0;margin:40px auto;border:1px solid #aaa;text-align:left;background:#fff; overflow: auto;}
#Content2,#Content3{display:none;width:100%;height:300px;padding:0;margin:40px auto;border:1px solid #aaa;text-align:left;background:#fff; overflow: auto;}
#Content1 p,#Content2 p,#Content3 p{margin:10px}

<div id="Tombol1" onclick="document.getElementById('Content1').style.display='block';Content2.style.display='none';Content3.style.display='none';">Tombol 1</div>
<div id="Tombol2" onclick="document.getElementById('Content1').style.display='none';Content2.style.display='block';Content3.style.display='none';">Tombol 2</div>
<div id="Tombol3" onclick="document.getElementById('Content1').style.display='none';Content2.style.display='none';Content3.style.display='block';">Tombol 3</div>
<div id="Content1">
<p>
Kode widget.
</p>
</div>
<div id="Content2">
<p>
Kode widget.
</p>
</div>
<div id="Content3">
<p>
Kode widget.
</p>
</div>
<div style='border: 0px; padding: 0px; background-color: none;
text-align: right; font-size:9px;'>Get this <a
href='http://harmansh.blogspot.com/2017/09/membuat-tab-view-dengan-css-dan-html-di.html'
target='_blank'>widget</a></div>

Catatan :

Tulisan 300px berwarna merah merupakan tinggi widget tab view ini, silahkan anda sesuaikan dengan keinginan anda.

Tulisan Kode widget berwarna biru silahkan anda ganti dengan kode script widget yang kalian inginkan, seperti recent comment, fanspage facebook.

4. Paste atau tempelkan kode tadi ke dalam kotak Konten.

5. Terakhir klik Simpan / Save.

Cukup mudah bukan? Silahkan klik lihat blog untuk melihat apakah anda sudah berhasil atau belum. Saya yakin anda pasti berhasil.
Dengan membuat dan memasang aplikasi tab view di blog, maka akan meminimalisir tampilan widget atau gadget blog anda.

Demikian tutorial sederhana mengenai bagaimana cara membuat tab view dengan css dan html di blogger. Semoga bermanfaat and "Happy Blogging"

Related Posts :

Silahkan klik disini untuk berlangganan Artikel Gratis via email, Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di HARMANSYAH BLOG