Membuat Spoiler Dalam Postingan Blogger Dan WordPress

Sederhana dan jarang digunakan, namun akan sangat penting dan berguna sekali saat kita ingin menggunakannya. Karena itu kali ini saya sempatkan untuk mengabadikannya dalam postingan blog ini. Dua macam spoiler yang mungkin paling sering kita temukan, yakni spoiler dengan dan tanpa Border.

Cara membuat spoiler dengan menggunakan border.

<div><div style="margin: 5px;"><div style="margin-bottom: 2px;"><i><span style="font-weight: bold;">Contoh (judul)</span></i><input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" 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'; }" type="button"/>
</div><div style="border: 1px inset ; margin: 0px; padding: 6px;"><div style="display: none;">Isi spoiler, bisa diisi dengan text, embed video atau pun kode script</div></div></div></div>

Contoh 

Cara membuat spoiler dengan menggunakan border pada postingan Blogger dan wordPress.

 

Cara membuat spoiler tanpa menggunakan border.

<div id="spoiler"><div><div id="show" color="transparent" style="border-style: solid; border-width: 1px; margin: 0px; padding: 4px; display: none; width: 98%;"></div><div id="spoiler"><div><input value="Show Spoiler!" style="margin: 10px; padding: 0px; width: 100px;font-size:12;" 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 = 'Hide Spoiler!'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'Show Spoiler!'; }" type="button"><br/><div id="button" style="border-style: solid; border-width: 0px; margin: 0px; padding: 4px; display: none; width: 98%;color:black;">Isi spoiler, bisa diisi dengan text, embed video atau pun kode script</span></div></div></div></div></div>

*ket: Masukkan kode dari mode HTML post, kedua kode di atas dapat digunakan dalam postingan blogger ataupun wordpress. 

Semoga bermanfaat dan tetap semangat . . . ,

:-)

Kesan Pertama Menggunakan WordPress Self Hosting

Yup setelah menghabiskan waktu sekitar 9 jam bergulat dengan puluhan opsi-opsi membingungkan di cpanel hosting akhirnya terinstal sudah wordpress 3.2.1 pertama saya. Didorong  oleh rasa penasaran, sedikit semangat dan begitu banyaknya kebodohan lah yang membuat saya memberanikan diri sewa domain dan hosting.

Okelah, berikut point-point berharga yang dapat saya simpulkan secara singkat;

1. Awal yang cukup sulit, melelahkan dan membingungkan.

Tentu saja, saya sama sekali belum pernah berkenalan dengan opsi2 di cpanel seperti FTP, FileZilla, MySQL, phpmyadmin, Public_html dsb harus berhadapan secara nyata. Saya rasa point ini adalah point yang paling  sesuai dengan judul postingannya.

2. Keren!

Tidak bisa dipungkiri, dengan menggunakan wordpress self hosting ini, secara tidak langsung kepercayaan diri kita sebagai blogger newbie agak sedikit meningkat, coba aja !!?

;-)

3. Lebih optimal (mungkin sih . . .)

Sementara ini saya masih dan cukup percaya dengan tulisan di blog-blog para mastah yang sering kita temui kalo blog dari WP itu akan lebih ramah SEO, page yang lebih ringan daripada blo**er, dan terkesan profesional. Tapi secara keseluruhan saya belum bisa memastikan itu, dikarenakan saya sendiri masih mengoptimasi beberapa blog dari blogger.

Semoga bermanfaat dan tetap semangat . . . . ,

:-)

Pasang Widget Mesin Pencarian Google Custom

Untuk memudahkan pengunjung dalam mencari artikel di blog kita, sudah selanyaknya kita pasang mesin pencari di blog kita. Banyak widget mesin pencari yang dapat ditambahkan, seperti fitur tambah gadget di blogger sudah menyediakan. Tapi kali ini mencoba cara lain dengan membuat mesin pencari sendiri di Google Custom Search. Selain mudah membuatnya, fitur ini juga mempunyai banyak keunggulan.

Berikut cara membuat mesin pencari google custom search

Pertama masuk ke Google Custom Search di sini

Kemudian klik tulisan Buat Mesin Telusur Ubah Suaian


Isi formulir yang telah di sediakan



Nama : Isi dengan nama yang di inginkan

Deskripsi : Tulis sedikit gambaran mesin telusur kamu

Bahasa : Pilih bahasa yang kamu inginkan

Situs yang akan ditelusuri : Isi dengan situs yang ingin kamu telusuri
Contoh : seperti punya saya di isi dengan http://www.bagollum.com ( kamu bisa menambahkan lebih dari satu URL )

Edisi : Pilih Edisi Standart ( biasanya sudah tercentang )

Centang kotak kecil persyaratan.

Klik tombol Lanjut/Next

Pilih tampilan yang kamu inginkan



Kamu bisa mengedit tampilan sesuai selera kamu ( klik ubahsuaikan/customise )

Jika sudah Klik Lanjut

Dapatkan Kode : Ambil kode yang diberikan dan pasang di Web kamu.




Nb : Kamu Masih bisa mengoptimalkan lagi mesin pencari kamu.

Seperti menambahkan kata kunci, menambah URL yang ingin di indek, membuat peta situsdan lain-lain..

seperti gambar di bawah ini.



Silahkan di edit sendiri ya .. 

:D


sumber artikel