"Bismillahirrahmanirrahim"

Protected by Copyscape Online Copyright Protection Software

Cara Membuat Spoiler atau Tombol Show Hide di Blog

     Trik meringankan dan mempercepat loading blog - ilmair kali ini ingin sharing tentang "Cara Membuat Spoiler atau Tombol Show Hide di Blog"

     Sahabat ada yang sudah pernah pakai spoiler di blognya? Bagi agan dan aganwati pengguna kaskus pastinya kenal banget sama si spoiler ini ya, karena spoiler ini memang sering ada di thread kaskus. Iya, si spoiler itu yang biasa dipakai untuk menyembunyikan gambar atau tulisan. Bentuknya seperti tombol yang kalau kita klik maka gambar atau tulisannya baru bisa dilihat.

    Spoiler sendiri sudah cukup lama dipakai para blogger ya, pengaplikasiannya bisa di dalam postingan maupun di sidebar blog. Dan spoiler ini bisa jadi trik untuk meringankan dan mempercepat loading blog. Karena gambar disembunyikan dan tak langsung tampak di tampilan blog, jadi beban loadingnya bisa lebih ringan.

    Coba sahabat intip di sidebar blog ilmair, sebelah kiri ada tombol orange yang bertuliskan "buka" pada Setetes Karya Endah Nurzaira dan di footer yang bertuliskan "show data Blog dan Komunitas" itu dia si spoiler. 

    Untuk blogspot, perlu menggunakan kode html untuk menampilkan spoiler dan ada beragam jenis juga untuk tampilan yang berbeda.

    Terus gimana Cara Membuat Spoiler di blog? Kali ini saya share beberapa kode html dan tutorialnya ya, semoga bermanfaat ...

1. Pilih salah satu kode html berikut, lalu copy

<center><div style="border: 1px inset black; padding: 1px;"><div id="spoiler"><div><input 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 = 'NAMA TOMBOL UNTUK DI HIDE'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'NAMA TOMBOL SHOW LAGI'; }" style="color: #ff6600; font-size: 11px; font-weight: bold; margin: 2px; padding: 0px;" type="button" value="NAMA TOMBOL SHOW SPOILER" /><div id="show" style="border: 1px solid white; display: none; margin: 2px; padding: 2px; width: 98%;"><span style="color: #ff6600; font-weight: bold;"><div style="border: 1px solid rgb(153, 153, 153); height: 300px; overflow: auto; text-align: center; width: 270px;"><div class="separator" style="clear: both;"><div class="separator" style="clear: both;">Letakkan teks atau kode script (gambar atau video) di sini</div></div></div></span></div></div><div id="hide"></div></div></div></center>


Tampilannya akan seperti:


<div style="margin: 5px 20px 20px;"><div class="smallfont" style="margin-bottom: 2px;"><b>Judul Spoiler</b>: <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 = 'NAMA TOMBOL HIDE SPOILER '; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" style="font-size: 12px; margin: 0px; padding: 0px; width: 55px;" type="button" value="NAMA TOMBOL SHOW SPOILER" /></div><div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;"><div style="display: none;">Letakkan teks atau kode script (gambar atau video) di sini</div></div></div>

Kode tersebut tampilannya seperti:
spoiler:



<div style="margin: 5px;"><div class="normalfont" style="margin-bottom: 2px;"><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 = 'NAMA TOMBOL HIDE SPOILER'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'NAMA TOMBOL SHOW LAGI'; }" style="-moz-border-radius-bottomleft: 15px; -moz-border-radius-topright: 15px; background: none 0% 0% repeat scroll orange; color: white; font-size: 11px; margin: 0px; padding: 5px; width: 30%;" type="button" value="NAMA TOMBOL SHOW SPOILER" /></div><div class="alt2"><div style="display: none;"><div style="color: yellow; padding: 10px; text-align: justify;"><span style="color: #ff6600; font-weight: bold;"><div style="border: 1px solid rgb(153, 153, 153); height: 100px; overflow: auto; text-align: center; width: 270px;"><div class="separator" style="clear: both;"><div class="separator" style="clear: both;">Letakkan teks atau kode script (gambar atau video) di sini</div></div></div></span></div></div></div></div>

Tampilannya akan seperti:

Assalamu'alaikum sahabat semua

Semoga harimu dilimpahi kebaikkan, keberkahan dan kebahagiaan ya

Dimudahkan semua urusanmu

Diwujudkan semua mimpimu

Semoga ada cinta dan ridho Allah dalam tiap langkahmu

2. Paste kode tersebut ke postingan atau sidebar blogmu

- Pada postingan, pastekan dalam posisi "HTML view" ya

spoiler di postingan:


- Untuk sidebar ke "layout", lalu "add a gadget", klik "HTML/javascript" dan pastekan kode nya di sana, edit lalu save

spoiler di sidebar:


- Penambahan gambar di sidebar tinggal menambah kode "<img src="LINK GAMBAR" height="250" width="250" border="0"/>"

- Silahkan edit script spoiler sesuai kebutuhan dan keinginan sahabat
  • NAMA TOMBOL SHOW SPOILER : ganti kata ini dengan nama tombol spoiler sesuai kebutuhan dan keinginanmu,  contohnya seperti "ssst ada tulisan apa ya di sini" atau " klik boleh" atau "buka"
  • NAMA TOMBOL UNTUK DI HIDE : ini nama tombol untuk menutup kembali spoilernya.
  • NAMA TOMBOL SHOW LAGI: ini nama tombol ketika sudah di tutup.
  • style="color: #ff6600 : merupakan kode warna, bisa diganti warna tombol dan warna tulisan di dalam spoiler. Bisa sahabat ganti kodenya sesuai warna yang diinginkan, kodenya bisa sahabat cek di bagian warna text color di kolom postingan blogspot ya (A)
    Saya share beberapa kode warna yang umum :
     #000000 = warna hitam,
     #002fff = warna biru,
     
    #ff0000 = warna merah,
     
    #ff6600 = warna orange
    atau sahabat juga bisa pakai kata warna nya, misal "red", "orange"
  • font-size: 11px;  atau 12px  : Ukuran tulisan
  • height: 300px; dan width: 270px : ukuran kotak scrolling overflow nya
    Silahkan sahabat utak atik sendiri ya.
Gimana, mudahkan membuat spoiler di blog? Kalau ada pertanyaan silahkan tulis di kolom komentar di bawah ya ... Happy blogging!

Cara Cek Kecepatan Website dengan Tools Google Gratis

     Di artikel sebelumnya ilmair pernah menyebut-nyebut tentang kecepatan loading website (web speed) ya. Yups waktu saya lagi "galau untuk ganti template", karena memang banyak template yang waktu dicek dan diaplikasikan pada web ilmair, ternyata bikin loadingnya jadi terasa berat. Humm ... ya memang, template itu berpengaruh banget kan sama web speed.

    Terus kenapa juga saya harus mikirin kecepatan website? Ya jelas karena itu penting banget buat kebaikkan imair pastinya - untuk kepentingan SEO  (Search Engine Optimization) dan kepuasan pengunjung juga.





- Website yang lambat loadingnya itu bisa "Ditinggalkan Pengunjung alias Kehilangan Trafiict"

    Weblog ilmair jelas dibuat untuk dikunjungi, biar artikelnya bisa dibaca orang, menginspirasi dan juga bermanfaat. Ya ... kalau loading ilmair lambat, membuat orang yang mau berkunjungnya jadi nggak sabar juga, terus cari informasi yang dibutuhkan di tempat lain yaa. 

    Ada yang bilang, hasil riset google menyatakan bahwa sebanyak 53% pengguna internet akan  meninggalkan web yang loadingnya lebih dari 3 detik. Humm ... sebegitunya ya, sepenting itu waktu mereka.

    Bukan hanya kehilangan pengunjung baru, tapi bisa jadi pengunjung lama alias yang sudah pernah datang pun jadi malas masuk lagi ke web kita kalau loadingnya terlalu lama.


- Website yang cepat loadingnya akan semakin bagus rankingnya di Google

    Kecepatan website itu berpengaruh juga loh ternyata dengan penilaian Google untuk menentukan ranking. Tentu saja itu karena google amat sangat memperhatikan para pengguna internet yang mencari informasi di perambannya.

    Ya ... itu artinya kalau mau websitenya berada di halaman pertama, kita harus peduli juga sama pengguna internet yang mau berkunjung ke weblog kita, peduli sama kecepatan website atau blog kita ya sahabat.


    Terus gimana cara cek kecepatan website?

    Di internet sendiri ada banyak tools yang bisa digunakan, seperti Google PageSpeed Insight, Pingdom, Google Mobile Website Speed Testing Tool, Load Impact, WebPage Test, Chrome DevTool dan lain-lain.

    Kali ini ilmair pingin bahas tentang Cara Cek Kecepatan Website dengan Google PageSpeed Insight ya, Tools Google Gratis ... Berikut penjelasannya:

1. Kunjungi Google PageSpeed Insight

2. Masukkan alamat website atau blogmu sahabat, di kotak yang tersedia

3. Klik analisis

4. Tunggu proses analisis hingga selesai

5. Sahabat bisa lihat hasil laporan analisis website nya jika sudah muncul. 

    - Ada dua tampilan untuk "Seluler" dan "Deskop", tinggal klik aja ya dua tulisan itu di kiri atas.

    - Pada halaman analisis itu, gulir ke bawah untuk lihat analisis lengkap dan tips mempercepat loadingnya ya.

Untuk ilmair sendiri dengan template sekarang ini hasilnya:


    Terus apa yang mempengaruhi kecepatan website? 

    Ada beberapa hal yang mempengaruhi kecepatan website, tentunya selain kecepatan koneksi internet pengunjungnya ya, yaitu: 

- hosting yang dipakai, 

- ukuran file gambar, video dan multimedia lainnya yang menempel, 

- widget dan plugin yang digunakan,

- code sourche yang terdapat pada template.

    Nah si template ini berpengaruh juga kan pada kecepatan website, ada beragam kode di dalamnya yang nggak mudah bagi kita sebagai pengguna template untuk utak atik lagi, kecuali kalau kita ini ahli pembuat template ya.

    Jadi gimana kecepatan websitemu? Apa template yang kamu pakai sudah mendukung SEO websitemu? Kalau ilmair kayanya mau segera diutak-atik lagi ini, biar lebih wuuuzzz ... wuuuzzzz ... wuzzzz ... biar sahabat semua betah ada di website ini, mendapatkan inspirasi dan manfaat yang banyak, barakallahu aamiin.

    Semangat ngeblog sahabat semua!

Translate