cara membuat spoiler di blog valid html5

Membuat spoiler di halaman blog sangat berguna untuk berbagai artikel postingan, disamping spoiler ini valid html 5 dan CSS 3 tampilannya juga menarik. Fungsi dari pada spoiler itu bervariasi tergantung kebutuhan sipemakai. Buat saya dan blog ini spoler membantu saya untuk memperringkas tampilan berbagai tutorial yang telah saya posting di halaman blog ini. Buat teman teman yang sering berkunjung ke blog yang sederhana ini spoiler bukanlah hal yang lain sebab saya memakainya hampir disemua tutorial yang ada dihalamanblog ini. Spoiler dapat meringkas atau meminimalkan pemakaian halaman blog sehingga lebih rapi kelihatannya disamping itu juga menurut pengalaman saya pribadi, spoler ternyata mampu untuk mengurangi berat loading blog saya ini. Postingan saya kali ini terinspirasi dari beberapa teman dan sahabat saya, setelah berbagai email , chat dan komentar yang disampaikan kepada saya tentang bagaimanan membuat tombol kode pada halaman blog ini, dan saya dengan senang hati saya membuat postingan ini.Oke langsung saja saya harap teman teman bloger sudah paham hal ini untuk DEMOnya saya harap anda juga sudah tau cara pemakaian dan fungsinya. lihat saja tombol tulisan KODE CSS yang ada dibawah itulah yang dinamakan dengan spoiler. tapi yang ini lebih unik dan menarik. Oke langsung saja menuju TKP.

Install Program CSS

1. Login ke dashboard anda
2. Masuk ke "TEMPLATE" lalu klik " Edit HTML "
3. Cari code ]]></b:skin> 
4. Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi

.BD_spoler{
background:#09f;
border: 2px solid rgb(9, 149, 223);
border-radius: 3px 3px 3px 3px;
box-shadow: 2px 4px 4px rgb(113, 112, 112);
color:#FFFF00;
cursor:pointer;
font-family:verdana;
font-weight:700;
padding:20px;
text-shadow:1px 1px 0 rgba(0,0,0,.4);
text-transform:uppercase;
width:100%;
background-color: #0099FF;
border-color: #00FFFF;
}
.BD_spoler:hover,.BD_spoler:focus{
background-color: #0066CC;
color: #FFFFFF;
border-color: #00CCFF;
}

Install dihalaman postingan

• Untuk pemasangan code tag spoiler valid html 5 ini tergantung dengan kebutuhan halaman blog anda, anda dapat memasangnya dimana saja,
• Untuk memasang dihalaman postingan artikel , anda hanya memasukkan code tag html dibawah ini pada artikel yang anda posting.
• Masuk ke " Post "
• Kemudian buat " Entri baru "
• Untuk menyematkan code dibawah ini pada postingan anda harus klik " HTML " ( bukan "compose " ) Setelah anda klik " HTML " masukkan code html dibawah ini ditempat yang anda inginkan, kemudian ganti tulisan warna merah pada kode dibawah dengan tulisan anda, kode anda, dll.
• Setelah selesai lihat dulu " Pratinjau " sebelum anda save untuk melihat kesempurnaan pemasangan spoiler tersebut.
• Setelah benar benar sudah sempurna silahkan klik " publikasikan "

<br/><div><div style="margin: 2px;text-align:center" >
<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;"> </span></i><input type="button" class="BD_spoler" style="margin: 0px; padding: 0px; width: 320px; font-size: large; text-align: center;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'TUTUP CODE'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'CODE CSS'; }" value="CODE CSS"/>
</div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 4px; background-color: #EBEBEB; font-family: Arial, Helvetica, sans-serif; font-size: 12px;">
<div style="display: none">
<p align="left" >

GANTIKAN TULISAN INI DENGAN TEXT, CODE, DLL
( INI ADALAH ISI SPOLER )

</p></div></div></div></div><br/>

Keterangan Code

• Tulisan kode warna MERAH adalah isi dari spoiler, baik itu text, code html , script , css dll. Hanya tulisan warna merah yang dapat anda gantikan dengan berbagai keperluan anda.
• Tulisan warna BIRU adalah tulisan yang ada pada tombol spoiler, tulisan awal dan setelah diklik, ganti tulisan tersebut sesuai dengan selera anda.
• Tulisan code warna HIJAU adalah warna latar belakan didalam spoiler, silahkan anda ganti sesuai dengan selera anda.
• Untuk Code CSSnya silahkan anda edit ( code yang ada pada spoiler atas dengan tulisan CSS )
• Untuk kode tag htmlnya, buat yang belum paham kode html jangan pernah merubahnya agar tidak mempengaruhi cara kerjanya.

Kesimpulan

Tag html spoiler ini dapat anda pasang pada template blog HTML 5 dan CSS 3. Penempatan spoiler ini tergantung dari kebutuhan anda, dapat anda pasang pada halaman, header, sidebar dan footer halaman anda bahkan di window pop Up juga dapat anda pasang.

Terimakasih atas kunjungannya,Bila anda suka dengan artikel ini silahkan JOIN TO MEMBER BLOG atau berlangganan geratis Artikel dari blog ini, daftarkan email anda pada form subscribe dibawah halaman . Pergunakan vasilitas diblog ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui kotak komentar yang ada dibawah atau gunakan fasilitas yang ada diblog ini untuk menghubungi saya.

Salam Blogger.... !!! .

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter

Di posting oleh : Unknown Update pada : 8:54 PM