html css Tab Fauqo Duridwan

Berikut ini adalah postingan berupa tampilan tabulasi di atas yang apabila diklik muncul postingan dibawahnya.
caranya:

1. Masuk ke akun blog
2. Pilih menu desain atau dasbor
3. Pilih entry baru. Boleh pada postingan atau juga pada halaman.
4. copy paste semuanya. boleh secara berurutan, boleh juga dimodifikasi sesuai keinginan kalau memang memahai coding
Apabila sudah mengerti, bagian kotak 'style' dan 'cript' boleh di pindahkan ke tema blog. lebih lanjut hal ini dibahas kemudian. Insya Alloh.

 Untuk stylenya adalah sebagai berikut di bawah ini: <style> /* Style the tab */ .dridwantabfauqo { overflow: hidden; border: 1px solid #ccc; background-color: #f1f1f1; } /* Style the buttons inside the tab */ .tabdridwantabfauqo button { background-color: inherit; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; transition: 0.3s; font-size: 17px; } /* Change background color of buttons on hover */ .dridwantabfauqo button:hover { background-color: #ddd; } /* Create an active/current tablink class */ .dridwantabfauqo button.active { background-color: #ccc; } /* Style the tab content */ .dridwantabfauqocontent { display: none; padding: 6px 12px; border: 1px solid #ccc; border-top: none; } </style> Untuk buttonnya adalah ini <h2> Wakasek Pembantu Kepala Sekolah</h2> Klik pada tabulasi yang tersedia:<br /> <div class="dridwantabfauqo"> <button class="dridwantabfauqolinks" onclick="openWks(event, 'wks1')">Bendahara</button> <button class="dridwantabfauqolinks" onclick="openWks(event, 'wks2')">Tata Usaha</button> <button class="dridwantabfauqolinks" onclick="openWks(event, 'wks3')">Operator</button> </div> <div class="dridwantabfauqocontent" id="wks1"> <h3> Bendahara</h3> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQRVbAIxWcSyAxrbfZmqWpQiIEAbS0b3uNjxlXe2dxz3zRj5mTNwb0bsxeTyAs4FweTrcSLI0FVy8Og8OI_sM7XWI8imzduysdPqsIoXal8o_sbvk6flCMCIvIwnyP334i5F7Qk6KNQlU/s200/2018--+LOGO+SMAPTA+CL.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="191" data-original-width="200" height="191" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQRVbAIxWcSyAxrbfZmqWpQiIEAbS0b3uNjxlXe2dxz3zRj5mTNwb0bsxeTyAs4FweTrcSLI0FVy8Og8OI_sM7XWI8imzduysdPqsIoXal8o_sbvk6flCMCIvIwnyP334i5F7Qk6KNQlU/s200/2018--+LOGO+SMAPTA+CL.jpg" width="200" /></a></div> <br /> Nama:<br /> Tempat Tanggal Lahir:<br /> Alamat:<br /> E-mail/Blog:<br /> Riwayat Pendidikan:</div> <div class="dridwantabfauqocontent" id="wks2"> <h3> Tata Usaha</h3> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQRVbAIxWcSyAxrbfZmqWpQiIEAbS0b3uNjxlXe2dxz3zRj5mTNwb0bsxeTyAs4FweTrcSLI0FVy8Og8OI_sM7XWI8imzduysdPqsIoXal8o_sbvk6flCMCIvIwnyP334i5F7Qk6KNQlU/s200/2018--+LOGO+SMAPTA+CL.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="191" data-original-width="200" height="191" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQRVbAIxWcSyAxrbfZmqWpQiIEAbS0b3uNjxlXe2dxz3zRj5mTNwb0bsxeTyAs4FweTrcSLI0FVy8Og8OI_sM7XWI8imzduysdPqsIoXal8o_sbvk6flCMCIvIwnyP334i5F7Qk6KNQlU/s200/2018--+LOGO+SMAPTA+CL.jpg" width="200" /></a><br /> Nama:<br /> Tempat Tanggal Lahir:<br /> Alamat:E-mail/Blog:<br /> Riwayat Pendidikan:</div> <div class="dridwantabfauqocontent" id="wks3"> <h3> Opetator</h3> Nama:Tempat Tanggal Lahir:Alamat:E-mail/Blog:Riwayat Pendidikan:</div> Untuk scriptnya adalah sebagai berikut: <script> function openWks(evt, wksName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("dridwantabfauqocontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } tablinks = document.getElementsByClassName("dridwantabfauqolinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } document.getElementById(wksName).style.display = "block"; evt.currentTarget.className += " active"; } </script>