Cara Membuat Tombol Spoiler di Blog

     Sambil nunggu mata ngantug, ane mau share neh Cara Membuat Tombol Spoiler, ada yang tau gak apa itu Tombol Spoiler ? Tombol spoiler adalah tombol yang mampu menyembunyikan sesuatu baik itu berupa tulisan,widget ataupun gambar. Tombol spoiler juga bisa memperingan loading blog anda. and ada berbagai macam Tombol Spoiler yang di gunakan di Blog, langsung aja yah kita mulai Cara Membuat Tombol Spoiler di Blog

Contoh Spoiler Pertama :

Spoiler is slang for any element of any summary or description of any piece of fiction that reveals any plot element which will give away the outcome of a dramatic episode within the work of fiction, or the conclusion of the entire work

Kode untuk membuatnya adalah seperti ini :

<div style="border: 0px inset green; padding: 0px;"><div><button class="button" onclick="this.parentNode.parentNode.childNodes[1].style.display = ; this.parentNode.style.display = none;" title="Click to show the spoiler." type="button"><span style="color:black;"><span style="color: rgb(0, 102, 0); font-weight: bold;"><blink>J U D U L S P O I L E R</blink></span></span></button></div><div id="spoiler" style="display: none;"><span style="font-weight: bold; color: rgb(0, 102, 0);">Letakkan Kode yang Ingin disembunyikan disini</span></div></div>

Contoh Spoiler ke 2

Spoiler is slang for any element of any summary or description of any piece of fiction that reveals any plot element which will give away the outcome of a dramatic episode within the work of fiction, or the conclusion of the entire work

Dan Kode untuk membuatnya adalah seperti berikut :

<div id="spoiler"><div><input style="font-size: 11px; font-weight: bold; margin: 5px; padding: 0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName(div)[show].style.display != ) { this.parentNode.parentNode.getElementsByTagName(div)[show].style.display = ; this.parentNode.parentNode.getElementsByTagName(div)[hide].style.display = none; this.innerText = ; this.value = TUTUP; } else { this.parentNode.parentNode.getElementsByTagName(div)[show].style.display = none; this.parentNode.parentNode.getElementsByTagName(div)[hide].style.display = ; this.innerText = ; this.value = LIHAT LAGI; }" name="button" type="button" value="LIHAT" /></div><div id="show" style="border: 1px solid white; display: none; margin: 5px; padding: 2px; width: 98%;"><p style="text-align: justify;">Letakkan Kode yang Dsembunyikan Disini</p></div><div id="hide"></div></div></div>

Contoh Spoiler ke 3

Spoiler is slang for any element of any summary or description of any piece of fiction that reveals any plot element which will give away the outcome of a dramatic episode within the work of fiction, or the conclusion of the entire work

Kode untuk membuatnya :

<div id="spoiler"><div><input style="font-size: 11px; font-weight: bold; margin: 5px; padding: 0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName(div)[show].style.display != ) { this.parentNode.parentNode.getElementsByTagName(div)[show].style.display = ; this.parentNode.parentNode.getElementsByTagName(div)[hide].style.display = none; this.innerText = ; this.value = TUTUP; } else { this.parentNode.parentNode.getElementsByTagName(div)[show].style.display = none; this.parentNode.parentNode.getElementsByTagName(div)[hide].style.display = ; this.innerText = ; this.value = LIHAT LAGI; }" name="button" type="button" value="BUKA" /></div><div id="show" style="border: 1px solid white; display: none; margin: 5px; padding: 2px; width: 98%;"><div style="color: #000000; background: none repeat scroll 0% 0% #ebf3fb; border: 1px solid #aaccee; padding: 7px; margin: 0px;"><p style="text-align: justify;">LETAKKAN KODENYA DISINI</p></div><div id="hide"></div></div></div>

Contoh Spoiler ke 4 :

Spoiler is slang for any element of any summary or description of any piece of fiction that reveals any plot element which will give away the outcome of a dramatic episode within the work of fiction, or the conclusion of the entire work

Kode untuk membuatnya :

<div style="margin: 5px;">
<div class="bigfont" style="margin-bottom: 2px;"><input value="Open" style="margin: 0px; padding: 0px; width: 60px;" 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 = Close; } else { this.parentNode.parentNode.getElementsByTagName(div)[1].getElementsByTagName(div)[0].style.display = none; this.innerText = ; this.value = Open; }" type="button">
</div><div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;"><div style="display: none;">LETAKKAN KODENYA DISINI</div></div></div>

Contoh Spoiler ke 5 :

Judul

Spoiler is slang for any element of any summary or description of any piece of fiction that reveals any plot element which will give away the outcome of a dramatic episode within the work of fiction, or the conclusion of the entire work

Kode untuk membuatnya :

<div>
<div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;">
<i><span style="font-weight: bold;">Judul</span></i><input 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 = Hide; } else { this.parentNode.parentNode.getElementsByTagName(div)[1].getElementsByTagName(div)[0].style.display = none; this.innerText = ; this.value = Show; }" style="font-size: 10px; margin: 0px; padding: 0px; width: 60px;" type="button" value="SPOILER 5" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
LETAKKAN KODE SOBAT DISINI</div>
</div>
</div>
</div>

Nah tinggal Sobat copy-paste aja kode di atas, semoga semua Tombol spoiler ini bermanfaat.

Source : http://tanpa-isi.blogspot.com

Read More..

Fungsi Tombol CTRL dari A Z

Jumpa lagi dengan saya, kali ini Machfud blog akan share tentang fungsi jalan pintas yang menggunakan tombol ctrl/ control . alasan saya mengapa memposting artikel gak mutu ini adalah karena saya sendiri tidak hapal semuannya hahahahha jadi kalau lupa tinggal klik artikel ni.. langsung aja cekidot :

Inilah Fungsi Tombol CTRL dari A-Z

CTRL + A

(ALL) --- fungsi memblok keseluruhan teks

CTRL + B

(BOLD) --- fungsi menebalkan teks

CTRL + C

(COPY) --- fungsi meng Copy teks

CTRL + D

--- fungsi membuka menu/kotak dialog Font

CTRL + E

(EQUATOR) --- fungsi rata tengah teks

CTRL + F

(FIND) ---fungsi membuka menu/kotak dialog Find and Replace

CTRL + G

(GO TO) --- fungsi membuka menu/kotak dialog Find and Replace

CTRL + H

--- fungsi membuka menu/kotak dialog Find and Replace (tab Replace)

CTRL + I

(ITALIC) --- fungsi membuat teks menjadi miring

CTRL + J

(JUSTIFY) --- fungsi rata kanan & kiri pada teks

CTRL + K

--- fungsi membuka menu/kotak dialog Insert Hyperlink

CTRL + L

(LEFT) --- fungsi rata kiri pada teks

CTRL + M

--- fungsi menggeser First Line Indent dan Left Tab pada mistar dokumen

CTRL + N

(NEW) --- fungsi membuka dokumen baru

CTRL + O

(OPEN) --- fungsi membuka menu/kotak dialog Open

CTRL + P

(PRINT) --- fungsi membuka menu/kotak dialog Print

CTRL + Q

--- fungsi menghilangkan nomor urut

CTRL + R

(RIGHT) --- fungsi membuat teks menjadi rata kana

CTRL + S

(SAVE) --- fungsi menyimpan dokume

CTRL + T

--- fungsi menggeser Left Tab pada mistar dokumen

CTRL + U

(UNDERLINE) --- fungsi menggarisbawahi teks

CTRL + V

(PASTE) --- fungsi menampilkan hasil teks yang sudah di Copy

CTRL + W

--- fungsi menyimpan dan langsung menutup program ms. Office yang di pakai

CTRL + X

(CUT) --- fungsi menghapus teks (teks terlebih dahulu di blok)

CTRL + Y

(RE DO) --- fungsi mengulang/meneruskan kembali aktivitas yang dibatalkan

CTRL + Z

(UN DO) --- fungsi membatalkan aktivitas terakhir

Semoga bermanfaat...

Read More..