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.

html

• fungsi mode html pada menu entri baru blogspot
• fungsi compose pada menu entri baru blogspot
• cara membuat box keterangan code
• fungsi float pada html
• fungsi style clear both
• fungsi margin pada html
• cara membuat style link type square
• cara membuat Image pseudo style
• cara membuat speech bubble style
• cara membuat Google Plus buttons style
• cara membuat Blockquote di blogspot

post

• blockquote blogger
• cara membuat read more otomatis dengan snippet
• solusi kesalahan membuat pesan komentar diblog
• mengantisipasi tag heading h4 h5 h6 not found pada tool seo
• membuat link internal dan external seo friendly
• cara membuat tool parse kode html diblog
• meningkatkan trafik pengunjung dengan feedburner
• Random post dengan gambar valid html5
• Widget random post seo friendly html5
• Cara membuat pesan komentar di blogspot

widget

• tutorial footer style ide blogspot v1
• widget social media blogspot
• widget social media
• cara membuat widget spoiler background style
• widget kategori floating
• cara membuat widget link di atas postingan blog
• cara membuat widget space iklan text
• cara membuat widget permalink with space iklan
• cara membuat halaman kontak di blog
• cara membuat subscribe with advertise
• cara membuat widget share image hover

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