Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / Script dan HTML / Tutorial Blog

Cara Menyembunyikan Gambar Pada Postingan Blog

Menyembunyikan Gambar pada Postingan Blog, berbicara soal menyembunyikan gambar di artikel blog mungkin Anda pernah melihat pada suatu blog atau web ada gambar yang disembunyikan pada suatu postingan atau artikel dan untuk melihatnya Anda harus mengklik pada kata view, lihat gambar, spoiler ataupun kata lainnya dan sama halnya untuk menutupnya kembali Anda harus mengklik pada kata close, tutup, sembunyikan ataupun kata lainnya. Hal tersebut yaitu hal sederhana yang ada pada suatu artikel di blog namun hal tersebut akan menciptakan blog teman terlihat lebih rapi, elegan dan terlihat menyerupai professional.

Menyembunyikan Gambar pada Postingan Blog Cara Menyembunyikan Gambar pada Postingan Blog
Membuat gambar tersembunyi sanggup menjadi suatu alternatif bagi sebuah artikel yang panjang dan terdapat banyak gambar. Nah kini saya akan menjelaskan bagaimana cara untuk menyembunyikan suatu gambar pada artikel blog semoga pada blog kita juga sanggup menyerupai itu, mungkin tutorial ini juga sudah banyak diluaran sana namun tetap saja niscaya berbeda dalam penyampaian tutorialnya. Sebagai sebuah tumpuan semoga Anda tidak penasaran, bila lihat gambar dibawah ini dengan cara klik "Lihat Gambar" dan menutupnya dengan cara klik "Tutup".


Gambar diatas yaitu sebuah logo kelas pada ketika saya kuliah dengan nama MAPK (Management Administrasi Pelayanan Kesehatan)

Bila Anda tertarik dan ingin menciptakan gambar tersembunyi menyerupai pada tumpuan diatas maka perhatikan cara membuatnya dibawah ini dan pahami supaya tidak gampang lupa.

Cara Menyembunyikan Gambar pada Postingan Blog

Untuk menyembunyikan gambar pada postingan blog pada artikel ini kita akan memakai sebuah script dan untuk mencobanya sendiri Anda sanggup ikuti langkah-langkah berikut.

  1. Pertama Anda perhatikan script berikut dan salin script untuk menciptakan gambar tersembunyi pada artikel blog.

    2. <div id="spoiler">
    <div>
    <input name="button" 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 Gambar'; }" style="font-size: 11px; font-weight: bold; margin: 5px; padding: 0px;" type="button" value="Lihat Gambar" /></div>
    <div id="show" style="border: 1px solid white; display: none; margin: 5px; padding: 2px; width: 98%;">
    <img alt="Menyembunyikan Gambar pada Postingan Blog Cara Menyembunyikan Gambar pada Postingan Blog" class="aligncenter" height="auto" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG0M_t_nQ3WxIP0bPydpAlQ2jM_r7ecKvVGKyxOOhVBNK-jG92aE-8QesUUq3HlmJ81b-GOMa8ETVomeS87cyOcQ4I_axW_vmqoOaHCUHfxAS8KzJZhDuu-3EQjtl9xtDIgh1S41hlKoc/s1600/mapk.jpg" width="auto" />
    </div>
    <div id="hide">
    </div>
    </div>

    • Tulisan yang berwarna merah merupakan teks untuk tampilan pada kotak untuk lihat dan tutup (view/close), Anda sanggup mengubahnya sesuai keinginan.
    • Tulisan yang berwarna hijau merupakan ukuran/size gambar yang akan ditampilkan nantinya, Anda sanggup menyesuaikan ukurannya.
    • Tulisan yang berwarna biru yaitu url/link gambar yang akan disembunyikan dan ditampilkan, Anda ganti dengan url gambar Anda yang ingin disembunyikan pada postingan blog.
  2. Setelah menyalin script diatas, Anda tempel pada mode HTML di sebuah artikel yang akan diposting dengan memakai gambar yang akan disembunyikan. Sesuaikan script menyerupai pada klarifikasi diatas. Lakukan semua langkah untuk setiap gambar yang ingin disembunyikan.

    3. Menyembunyikan Gambar pada Postingan Blog Cara Menyembunyikan Gambar pada Postingan Blog
    (Gambar HTML pada Blogger)

  3. Setelah artikelnya simpulan dan gambar yang ingin disembunyikan sudah mengikuti langkah yang dijelaskan, maka Anda sudah sanggup mempublish artikelnya pada blog.

Baca juga "Cara Menyembunyikan Teks pada Postingan Blog"

Script yang saya berikan diatas harus Anda edit atau ubah pada teks yang sudah saya beri warna dimulai dari goresan pena view/close, size gambar dan juga tentunya url gambar sebab bila tidak mengubahnya maka yang akan muncul yaitu gambar logo mapk punya saya, bukan gambar yang Anda ingin sembunyikan pada artikel blog.

Apabila Anda mengerti dan mengikuti langkahnya dengan benar maka tutorial Cara Menyembunyikan Gambar pada Postingan Blog akan berhasil dilakukan, namun apabila tidak atau belum mengerti Anda sanggup menanyakan kepada saya di komentar atau menghubungi saya di Kontak blog, terima kasih.
Sumber http://www.bloggars.com/