Membuat Tab View Responsive Dengan Onclick Event

Membuat Tab View Responsive Dengan Onclick Event - Hai sobat Blogger, berjumpa lagi dengan Saya di postingan yang keren ini. Nah kali ini Saya akan memberikan tutorial cara membuat onclick event yang saya dapatkan dari nama blog tidak asing, yups kompi ajaib. Dengan onclick event maka kita dapat membuat perintah yang sederhana dari pada kita membuatnya dengan menggunakan printah javascript.

Kalian dapat melihat demo tampilannya dibawah ini :

Demo

Bagaimana, cukup keren buka ? caranya mudah kok, berikut cara penerapannya.

Cara Penerapan :

---

1. Buka Blogger

• Masuk Dashboard.
• Klik Template.
• Pilih Edit HTML.

Lalu salin dan taruh kode CSS dibawah ini tepat diatas kode  ]]></b:skin> atau </style>

#Button1,#Button2{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}
#Button2{margin-left:34%}
#Button3{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} 

2. Lalu Klik Simpan / Save Template.
3. Sekarang adalah penerapan kode HTML pada postingan Sobat.

INFO!:
Masukan kode HTML dibawah ini pada tab HTML bukan Compose.

<div id="Button1" onclick="document.getElementById('Content1').style.display='block';Content2.style.display='none';Content3.style.display='none';">Button 1</div>
<div id="Button2" onclick="document.getElementById('Content1').style.display='none';Content2.style.display='block';Content3.style.display='none';">Button 2</div>
<div id="Button3" onclick="document.getElementById('Content1').style.display='none';Content2.style.display='none';Content3.style.display='block';">Button 3</div>
<div id="Content1">
<p>
Enter some content here.
</p>
</div>
<div id="Content2">
<p>
Enter some content here.
</p>
</div>
<div id="Content3">
<p>
Enter some content here.
</p>
</div> 

Perhatikan! :
Pada Button1, disitu kita menampilkan Content1 display='block' dengan menyembunyikan Conten2 dan Content3 display='none'. Untuk Button2 kita menampilkan Content2 dengan menyembunyikan Content1 dan Content3. Begitu pula dengan Button3, Kita menampilkan Content3 dengan menyembunyikan Content1 dan Content2

Bagaimana? cukup mudah bukan untuk menerapkannya? semoga bermanfaat bdan dapat membantu sobat ya :D

Source : http://www.kompiajaib.com/2014/05/membuat-tab-view-dengan-onclick-event.html

http://bloggerisn.blogspot.com/2015/05/membuat-tab-view-responsive-dengan-onclick-event.html

Suka Dengan Artikel Diatas? Bagikan Gratis:

• Tweet
• Share
• Share
• Share
• Share

Irham Satriawan

Saya adalah seorang yang sangat menyukai design dan juga dunia internet sobat bisa memanggil saya (CT), dengan blog ini semoga saya akan berbagi pengalaman saya kepada sobat semua.

Artikel Menarik Lainnya