Cara Membuat Spoiler Keren di Blog (Cocok untuk Pemula)

Anda ingin halaman konten ada spoilernya tapi resah kok waktu mengganti template tidak ada spoilernya?

...atau sudah ada spoilernya tapi tidak tau cara mengaktifkannya bagaimana?

Hmmm.. Mengapa kok mampu pengen....

Mungkin alasannya ialah ini,

1. Terlihat keren, mampu buka tutup,
2. Mengelabui panjang pos, maksudnya pos akan terlihat pendek jikalau memakai spoiler,
3. Tempat menunjukkan kejutan.

Namun Anda harus tau juga jikalau pos menggunakan spoiler maka mungkin akan terjadi hal ibarat ini,

1. Pos tidak terbaca secara utuh oleh pembaca, alasannya ialah spoiler tidak dibuka oleh pengunjung,
2. Visitor malas membuka spoiler yang terlalu banyak,
3. Ada pembaca yang tidak tau cara membuka spoiler
4. Pengunjung takut kalau mengeklik spoiler akan dibawa ke halaman lain (mungkin dikira link).

Anda sudah tau kelebihan serta kekurangan jikalau pos dalam blog menggunakan spoiler.

Apakah Anda jadi semakin tertarik untuk menambahkan sebuah spoiler di pos blog Anda?

Baiklah, saya akan bagikan tahap-tahap persiapan dan pemasangan sebuah spoiler di pos blog Anda.

Spoiler ini memiliki tampilan kurang lebih sama ibarat yang ada di blog ini.

Inilah langkah-langkah yang mampu ditempuh untuk menambahkan spoiler pada pos blog....

• Letakkan script berikut ini, sempurna di atas aba-aba HTML ]]></b:skin>

#pedomane { text-align: center; } #pedomane button { background: red; color: #fff; text-align: left; margin: 0 auto; border: none; border-radius: 3px; padding: 8px 16px; margin: 10px auto; font-size: 12px; font-weight: bold; box-shadow: 1px 5px 0px 0px blue; vertical-align: middle; cursor: pointer; text-shadow: 0 2px rgba(0, 0, 0, 0.5); transition: background 0.1s ease-in-out; } #pedomane button:hover, #pedomane button:focus { background: green; outline: none; } #pedomanepanel { padding: 1px; text-align: left; background: #f0f0f0; border: 0px; } #pedomanepanel { padding: 24px; display: none; }

• Letakkan script berikut ini, sempurna di atas aba-aba </body>

• Simpanlah script di bawah ini

<div id="pedomane"> <button>Buka??</button> </div> <div id="pedomanepanel"> ISI DI SINI ! </div>

#Spoiler yang ini cuma berlaku 1 setiap halaman.

Nah, untuk menambahkan spoiler pada pos Anda harus menggunakan mode HTML dalam pembuatan pos di blog.

Lalu setelah itu masukkan aba-aba yang Anda simpan tadi di sana.

Ganti goresan pena ISI DI SINI ! dengan teks atau gambar yang Anda mau.

Contoh pribadi langkah-langkahnya ibarat berikut

Setelah itu Anda mampu pribadi mempublish pos tersebut, alasannya ialah script untuk membuat spoiler hanya mampu dilihat risikonya di halaman browser.

...atau beralihlah ke mode Compose untuk menambah konten Anda. Dengan mode penulisan yang lebih mudah.

Kalau Anda mau begitu, letakkan beberapa aksara setelah aba-aba </div> di mode HTML tadi. Sebagai pola di manakah Anda harus menambahkan perhiasan konten Anda.

Acuan Anda hapus => lalu ketikkan perhiasan konten milik Anda.

O ya. Kalau yang akan dimasukkan ke dalam spoiler bukan berupa text (contoh: Gambar, Video, dll)...

...Anda harus menguploadnya terlebih dahulu ke halaman buat konten, lalu sisipkan aba-aba yang Anda simpan sama ibarat contoh di atas (karena contoh tersebut ialah cara memasukkan gambar ke dalam spoiler)

Nah itu tadi ialah langkah-langkah yang mampu Anda tempuh untuk menambahkan sebuah spoiler dalam konten blog Anda.

Saya harap halaman pos blog Anda semakin keren dengan hadirnya spoiler tersebut.

Kalau Anda mendapati kesusahan dan kesulitan dalam memasang kode-kode di atas, silakan pribadi olok-olokan pertanyaan Anda di kolom komentar di bawah.

Saya akan menanggapinya dengan senang hati. :)

Oke. Happy blogging.

ISI DI KONTEN PADA SPOILER SINI !

Terima kasih.

Tweet