Home Posts filed under BelajarBlog #2 - Hiasan
Showing posts with label BelajarBlog #2 - Hiasan. Show all posts
Showing posts with label BelajarBlog #2 - Hiasan. Show all posts

Friday, July 6, 2018

Cara Merapikan Widget dan Membuat Iklan Saling Bersampingan

✔ Mas Mochen Comment
Ketika saya mencoba untuk menjadi publisher di kliksaya, saya mengalami sedikit kendala karena ukuran banner iklan yang tersedia kurang sesuai dengan ukuran ukuran kolom pada template yang saya miliki. Ukuran-ukuran yang ada pada situs kliksaya tersebut di antara nya :
  1. 125x125 dan 300x250 (Persegi)
  2. 468x60 dan 728x90 (Horisontal)
  3. 120x600  dan 160x600 (Vertikal)
Sementara ukuran kolom template yang saya gunakan sampai februari 2015 adalah 212px pada sisi kanan dan ukuran 425px untuk kolom kiri (jajaran artikel post). Sehingga memilih untuk menggunakan ukuran iklan manapun, hampir tidak ada yang cocok untuk diletakan di bagian kanan (sidebar) karena terlalu besar ataupun terlalu kecil. Memilih iklan untuk diletakan di bagian atas artikel pun sebenarnya tidak ada ukuran yang benar-benar cocok. Sampai akhirnya saya menemukan ide untuk mengambil iklan ukuran persegi 125x125 untuk diletakan di bagian atas artikel, serta merapikannya dengan table.

Jika anda belum berpengalaman menggunakan table untuk merapikan widget (termasuk iklan maupun banner), kurang lebih beginilah cara merapikan iklan dengan table agar berjejer kesamping.

Langkah-Langkah Merapikan Iklan berjejer :
Masuk ke tata letak di blog yang anda miliki
Pilih Tata Letak kemudian tambah Widget HTML
Buat Script HTML Seperti Berikut :

</div>
<table><tr>
<td>Widget A yang Dikehendaki</td>
<td></td>
<td>Widget B yang Dikehendaki</td>
<td></td>
<td>Widget C yang Dikehendaki</td>
</tr></table>
</div>

Pada Kasus Kali ini, Script dari Widget yang ingin saya pasang misalnya ketiga-tiganya sebagai berikut :
<a title="Blog Pelajar Terbaik" href="http://pelajarterbaikupi.blogspot.com" target="_blank"><img alt="Kunjungi Blog Pelajarterbaik" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzHbyIjkuvA5X_NRSt59rI0FmplJz4C79ssGqCC1LIV5vRcTfDxGU9T3ufmj1ErSUtXbPZfovl6JIQhix5eTr2cxprGZx_k2Nz9_uZnQeFxKAw9DOoapmT-Y6RXQzGXeSjQXSLw65sots/
s1600/Mahfudin_IW.gif" width="125px" height="125px"/></a>

Maka Tampilan yang akan diperoleh ketika Script tersebut dimasukan ke dalam Script HTML di atas adalah sebagai berikut :

Kunjungi Blog PelajarterbaikKunjungi Blog PelajarterbaikKunjungi Blog Pelajarterbaik

Jika Kita ingin menambah jarak antar gambar tersebut, maka kita cukup membuat kolom kosong lebih banyak lagi (HTML yang berwarna merah) sebanyak yang kita perlukan. Jika melihat polanya, tentu anda memahami bagaimana jika ingin menambahkan lebih banyak widget lagi, sehingga bukan sekedar tiga widget.

Teknik tabel ini, juga sering digunakan untuk merapikan foto-foto di blog, sehingga kumpulan foto (galeri) tersebut bisa lebih rapi karena di atur berjejer seperti gambar di atas.
BelajarBlog #2 - HiasanAssalamualaikum Wr Wb, Hallo Kawan - kawan Hobbyku Desain | TrendingKita | Tutorial Desain Dan Blog, Pada Artikel yang kami buat dan juga anda baca kali ini dengan judul BelajarBlog #2 - Hiasan, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan Artikel BelajarBlog #2 - Hiasan, yang kami tulis ini dapat anda pahami dan juga bermanfaat.

Download Kumpulan Wallpaper Mobile Legends di MasMochen

Judul Artikel: Cara Merapikan Widget dan Membuat Iklan Saling Bersampingan
link : Cara Merapikan Widget dan Membuat Iklan Saling Bersampingan

Baca juga


BelajarBlog #2 - Hiasan

Ketika saya mencoba untuk menjadi publisher di kliksaya, saya mengalami sedikit kendala karena ukuran banner iklan yang tersedia kurang sesuai dengan ukuran ukuran kolom pada template yang saya miliki. Ukuran-ukuran yang ada pada situs kliksaya tersebut di antara nya :
  1. 125x125 dan 300x250 (Persegi)
  2. 468x60 dan 728x90 (Horisontal)
  3. 120x600  dan 160x600 (Vertikal)
Sementara ukuran kolom template yang saya gunakan sampai februari 2015 adalah 212px pada sisi kanan dan ukuran 425px untuk kolom kiri (jajaran artikel post). Sehingga memilih untuk menggunakan ukuran iklan manapun, hampir tidak ada yang cocok untuk diletakan di bagian kanan (sidebar) karena terlalu besar ataupun terlalu kecil. Memilih iklan untuk diletakan di bagian atas artikel pun sebenarnya tidak ada ukuran yang benar-benar cocok. Sampai akhirnya saya menemukan ide untuk mengambil iklan ukuran persegi 125x125 untuk diletakan di bagian atas artikel, serta merapikannya dengan table.

Jika anda belum berpengalaman menggunakan table untuk merapikan widget (termasuk iklan maupun banner), kurang lebih beginilah cara merapikan iklan dengan table agar berjejer kesamping.

Langkah-Langkah Merapikan Iklan berjejer :
Masuk ke tata letak di blog yang anda miliki
Pilih Tata Letak kemudian tambah Widget HTML
Buat Script HTML Seperti Berikut :

</div>
<table><tr>
<td>Widget A yang Dikehendaki</td>
<td></td>
<td>Widget B yang Dikehendaki</td>
<td></td>
<td>Widget C yang Dikehendaki</td>
</tr></table>
</div>

Pada Kasus Kali ini, Script dari Widget yang ingin saya pasang misalnya ketiga-tiganya sebagai berikut :
<a title="Blog Pelajar Terbaik" href="http://pelajarterbaikupi.blogspot.com" target="_blank"><img alt="Kunjungi Blog Pelajarterbaik" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzHbyIjkuvA5X_NRSt59rI0FmplJz4C79ssGqCC1LIV5vRcTfDxGU9T3ufmj1ErSUtXbPZfovl6JIQhix5eTr2cxprGZx_k2Nz9_uZnQeFxKAw9DOoapmT-Y6RXQzGXeSjQXSLw65sots/
s1600/Mahfudin_IW.gif" width="125px" height="125px"/></a>

Maka Tampilan yang akan diperoleh ketika Script tersebut dimasukan ke dalam Script HTML di atas adalah sebagai berikut :

Kunjungi Blog PelajarterbaikKunjungi Blog PelajarterbaikKunjungi Blog Pelajarterbaik

Jika Kita ingin menambah jarak antar gambar tersebut, maka kita cukup membuat kolom kosong lebih banyak lagi (HTML yang berwarna merah) sebanyak yang kita perlukan. Jika melihat polanya, tentu anda memahami bagaimana jika ingin menambahkan lebih banyak widget lagi, sehingga bukan sekedar tiga widget.

Teknik tabel ini, juga sering digunakan untuk merapikan foto-foto di blog, sehingga kumpulan foto (galeri) tersebut bisa lebih rapi karena di atur berjejer seperti gambar di atas.

Thursday, July 5, 2018

Cara Membuat Gambar Terang Redup di Blog

✔ Mas Mochen Comment
Ketika kita berkunjung ke blog-blog sahabat, mungkin kita menjumpai beberapa efek yang cukup membuat kita teratarik. Efek-efek tersebut sangat beragam, misalnya gambar di blog menjadi berputar, membesar, bergerak ke kiri atau kanan (atau arah lainnya), redup menjadi terang, terang menjadi redup, maupun gabungan dari beberapa efek (misalnya berputar sekaligus membesar).

Nah, Hal yang ingin saya sampaikan hari ini terkait dari salah satu efek tersebut yaitu cara membuat gambar redup menjadi terang serta terang menjadi redup di blog ketika mouse komputer yang kita miliki berada di atas gambar tersebut.

Berikut adalah sebuah gambar yang saya sediakan dengan efek gambar terang menjadi redup saat mouse yang anda miliki diarahkan di atasnya.

Untuk Membuat gambar di Blog memiliki efek seperti gambar di atas, sebenarnya sangatlah mudah. Kita bisa menggunakannya efek nya untuk satu gambar saja, maupun kepada seluruh gambar yang ada di seluruh blog.

Gambar Terang-Redup Seluruh Gambar di Blog
Jika kita ingin membuat seluruh gambar di blog mempunyai efek terang redup maupun redup terang. Sebenarnya mudah saja,  kita cukup menambahkan Script di kode HTML template, maupun bisa menambahkannya pada Widget, melalui tata letak (lay Out). Berikut adalah Script yang bisa anda tambahkan :

Membuat Gambar Terang menjadi Redup
<style>
.post a img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
}
 .post a:hover img {
 filter:alpha(opacity=70);
-moz-opacity: 0.7;
 opacity: 0.7;
}
</style>

Membuat Gambar Redup menjadi Terang
<style>
 img {
filter:alpha(opacity=70);
-moz-opacity:0.7;
opacity:0.7;
 }
 img:hover {
 filter:alpha(opacity=100);
 -moz-opacity:.0;
opacity:1.0;
}
 </style>

Cara Memasang di Blog Melalui Tata Letak
Saya sendiri lebih suka menambahkan Script-Script melalui Widget di Tata letak. Jika anda mau meletakannya di tata letak Juga, maka anda Bisa mengikuti Langkah berikut ini :
  1. Log in di Blogspot anda
  2. Klik Menu Tata Letak
  3. Tambah Widget
  4. Tambah HTML
  5. Copi Paste Script di atas (Pilih salah satu)
  6. Save
Coba Periksa gambar-gambar yang ada di Blog anda sekarang, apakah Script tersebut telah bekerja cukup Baik.

Gambar Terang-Redup Salah satu gambar
Jika hanya salah satu gambar saja yang ingin kita berikan efek, maka langkah paling mudah yang saya sarankan adalah, upload saja gambar seperti biasa, kemudian masuk ke Mode penulisan HTML (Bukan Compose) lalu tambahkan beberapa kode HTML setelah URL Gambar. Misal  Gambar berikut :

Normal
<a title="Komunitas IDA DARMA AYU" href="" rel="nofollow" target="_blank"><img alt="Komunitas IDA DARMA AYU" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMnpTbDVcrJU10tasDBK7GAC-ryfFZI_PCTsW3r9iUp3zdQXtlImJTs9gu3vnfpBd3uyfV3gUfFHa4ZyNHT8hzFtzIxCbRvR3ShzHEaXyNvZH7qSzaQ6N0v-g7Z2KssGOBi0Pex940HIQ/
s1600/KOMUNITAS.png" width="145px" height="145px"/></a>


Di Tambahkan Script Terang-Redup
<a title="Komunitas IDA DARMA AYU" href="" rel="nofollow" target="_blank"><img alt="Komunitas IDA DARMA AYU" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMnpTbDVcrJU10tasDBK7GAC-ryfFZI_PCTsW3r9iUp3zdQXtlImJTs9gu3vnfpBd3uyfV3gUfFHa4ZyNHT8hzFtzIxCbRvR3ShzHEaXyNvZH7qSzaQ6N0v-g7Z2KssGOBi0Pex940HIQ/
s1600/KOMUNITAS.png" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseover="this.style.opacity=0.2;this.filters.alpha.opacity=40" style="opacity: 1;" width="145px" height="145px"/></a>

BelajarBlog #2 - HiasanAssalamualaikum Wr Wb, Hallo Kawan - kawan Hobbyku Desain | TrendingKita | Tutorial Desain Dan Blog, Pada Artikel yang kami buat dan juga anda baca kali ini dengan judul BelajarBlog #2 - Hiasan, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan Artikel BelajarBlog #2 - Hiasan, yang kami tulis ini dapat anda pahami dan juga bermanfaat.

Download Kumpulan Wallpaper Mobile Legends di MasMochen

Judul Artikel: Cara Membuat Gambar Terang Redup di Blog
link : Cara Membuat Gambar Terang Redup di Blog

Baca juga


BelajarBlog #2 - Hiasan

Ketika kita berkunjung ke blog-blog sahabat, mungkin kita menjumpai beberapa efek yang cukup membuat kita teratarik. Efek-efek tersebut sangat beragam, misalnya gambar di blog menjadi berputar, membesar, bergerak ke kiri atau kanan (atau arah lainnya), redup menjadi terang, terang menjadi redup, maupun gabungan dari beberapa efek (misalnya berputar sekaligus membesar).

Nah, Hal yang ingin saya sampaikan hari ini terkait dari salah satu efek tersebut yaitu cara membuat gambar redup menjadi terang serta terang menjadi redup di blog ketika mouse komputer yang kita miliki berada di atas gambar tersebut.

Berikut adalah sebuah gambar yang saya sediakan dengan efek gambar terang menjadi redup saat mouse yang anda miliki diarahkan di atasnya.

Untuk Membuat gambar di Blog memiliki efek seperti gambar di atas, sebenarnya sangatlah mudah. Kita bisa menggunakannya efek nya untuk satu gambar saja, maupun kepada seluruh gambar yang ada di seluruh blog.

Gambar Terang-Redup Seluruh Gambar di Blog
Jika kita ingin membuat seluruh gambar di blog mempunyai efek terang redup maupun redup terang. Sebenarnya mudah saja,  kita cukup menambahkan Script di kode HTML template, maupun bisa menambahkannya pada Widget, melalui tata letak (lay Out). Berikut adalah Script yang bisa anda tambahkan :

Membuat Gambar Terang menjadi Redup
<style>
.post a img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
}
 .post a:hover img {
 filter:alpha(opacity=70);
-moz-opacity: 0.7;
 opacity: 0.7;
}
</style>

Membuat Gambar Redup menjadi Terang
<style>
 img {
filter:alpha(opacity=70);
-moz-opacity:0.7;
opacity:0.7;
 }
 img:hover {
 filter:alpha(opacity=100);
 -moz-opacity:.0;
opacity:1.0;
}
 </style>

Cara Memasang di Blog Melalui Tata Letak
Saya sendiri lebih suka menambahkan Script-Script melalui Widget di Tata letak. Jika anda mau meletakannya di tata letak Juga, maka anda Bisa mengikuti Langkah berikut ini :
  1. Log in di Blogspot anda
  2. Klik Menu Tata Letak
  3. Tambah Widget
  4. Tambah HTML
  5. Copi Paste Script di atas (Pilih salah satu)
  6. Save
Coba Periksa gambar-gambar yang ada di Blog anda sekarang, apakah Script tersebut telah bekerja cukup Baik.

Gambar Terang-Redup Salah satu gambar
Jika hanya salah satu gambar saja yang ingin kita berikan efek, maka langkah paling mudah yang saya sarankan adalah, upload saja gambar seperti biasa, kemudian masuk ke Mode penulisan HTML (Bukan Compose) lalu tambahkan beberapa kode HTML setelah URL Gambar. Misal  Gambar berikut :

Normal
<a title="Komunitas IDA DARMA AYU" href="" rel="nofollow" target="_blank"><img alt="Komunitas IDA DARMA AYU" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMnpTbDVcrJU10tasDBK7GAC-ryfFZI_PCTsW3r9iUp3zdQXtlImJTs9gu3vnfpBd3uyfV3gUfFHa4ZyNHT8hzFtzIxCbRvR3ShzHEaXyNvZH7qSzaQ6N0v-g7Z2KssGOBi0Pex940HIQ/
s1600/KOMUNITAS.png" width="145px" height="145px"/></a>


Di Tambahkan Script Terang-Redup
<a title="Komunitas IDA DARMA AYU" href="" rel="nofollow" target="_blank"><img alt="Komunitas IDA DARMA AYU" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMnpTbDVcrJU10tasDBK7GAC-ryfFZI_PCTsW3r9iUp3zdQXtlImJTs9gu3vnfpBd3uyfV3gUfFHa4ZyNHT8hzFtzIxCbRvR3ShzHEaXyNvZH7qSzaQ6N0v-g7Z2KssGOBi0Pex940HIQ/
s1600/KOMUNITAS.png" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseover="this.style.opacity=0.2;this.filters.alpha.opacity=40" style="opacity: 1;" width="145px" height="145px"/></a>

Saturday, June 9, 2018

Menyembunyikan Tulisan di Artikel Seperti Di Kaskus

✔ Mas Mochen Comment
Pada Artikel Sebelumnya saya telah membahas cara menyembunyikan gambar di postingan seperti gambar-gambar di kaskus. Nah, pada kesempatan kali ini, saya akan membahas hal yang kurang lebih sama, namun teks lah yang ingin kita sembunyikan. Sebagai contoh, perhatikan potongan artikel berikut ini :


Cumi-cumi Transparan



Spoiler 

Jika anda tertarik membuat hal seperti itu pada blog yang anda miliki. Maka anda bisa mengikuti cara berikut ini :
Copi Paste Script Berikut ini pada Artikel yang anda inginkan (Mode HTML - Bukan Compose)

<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 PENJELASAN'; }" name="button" type="button" value="LIHAT PENJELASAN" /></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;">TULIS KALIMAT YANG AKAN DISEMBUNYIKAN DI SINI.</p>
</div><div id="hide"></div></div></div>


Tulisan Berwarna Merah Bisa anda ganti sesuai keperluan. Sedangkan teks yang tersembunyi yang akan ditampilkan adalah teks yang berwarna Biru pada Contoh di atas.

Baca Juga :
Menyembunyikan Gambar di artikel seperti kaskus
Menyembunyikan Tulisan di Artikel Seperti Di Kaskus
Membuat Galeri Blog Slide Show bertombol di Blog
Mengubah Gambar menjadi PDF dengan NitroPDF
Cara membuat gambar Zoom di Blog
Daftar Artikel Blog
BelajarBlog #2 - HiasanAssalamualaikum Wr Wb, Hallo Kawan - kawan Hobbyku Desain | TrendingKita | Tutorial Desain Dan Blog, Pada Artikel yang kami buat dan juga anda baca kali ini dengan judul BelajarBlog #2 - Hiasan, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan Artikel BelajarBlog #2 - Hiasan, Artikel BelajarBlog #3 - Trik, yang kami tulis ini dapat anda pahami dan juga bermanfaat.

Download Kumpulan Wallpaper Mobile Legends di MasMochen

Judul Artikel: Menyembunyikan Tulisan di Artikel Seperti Di Kaskus
link : Menyembunyikan Tulisan di Artikel Seperti Di Kaskus

Baca juga


BelajarBlog #2 - Hiasan

Pada Artikel Sebelumnya saya telah membahas cara menyembunyikan gambar di postingan seperti gambar-gambar di kaskus. Nah, pada kesempatan kali ini, saya akan membahas hal yang kurang lebih sama, namun teks lah yang ingin kita sembunyikan. Sebagai contoh, perhatikan potongan artikel berikut ini :


Cumi-cumi Transparan



Spoiler 

Jika anda tertarik membuat hal seperti itu pada blog yang anda miliki. Maka anda bisa mengikuti cara berikut ini :
Copi Paste Script Berikut ini pada Artikel yang anda inginkan (Mode HTML - Bukan Compose)

<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 PENJELASAN'; }" name="button" type="button" value="LIHAT PENJELASAN" /></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;">TULIS KALIMAT YANG AKAN DISEMBUNYIKAN DI SINI.</p>
</div><div id="hide"></div></div></div>


Tulisan Berwarna Merah Bisa anda ganti sesuai keperluan. Sedangkan teks yang tersembunyi yang akan ditampilkan adalah teks yang berwarna Biru pada Contoh di atas.

Baca Juga :
Menyembunyikan Gambar di artikel seperti kaskus
Menyembunyikan Tulisan di Artikel Seperti Di Kaskus
Membuat Galeri Blog Slide Show bertombol di Blog
Mengubah Gambar menjadi PDF dengan NitroPDF
Cara membuat gambar Zoom di Blog
Daftar Artikel Blog

Menyembunyikan Gambar di Postingan Seperti di Situs Kaskus

✔ Mas Mochen Comment
Jika anda pernah membuka situs kaskus.com. Mungkin anda tidak asing dengan gambar-gambar maupun tulisan disana yang tersembunyi di dalam sebuah tombol. Setiap kali kita ingin melihat foto maupun teks tambahan, kita umumnya menekan sebuah tombol terlebih dahulu di artikel tersebut, kemudian gambar atau teks tersebut baru muncul. Nah, tahukah anda bahwa kurang lebih kita juga bisa membuat tombol seperti itu pada artikel yang kita miliki di blog.

Menyembunyikan gambar di postingan dengan cara seperti ini, mungkin bisa menjadi salah satu alternatif agar blog terlihat menjadi lebih rapi, maupun sebagai antisipasi karena artikel yang terlalu panjang. Sebagai gambaran terkait apa itu menyembunyikan gambar di sebuah artikel, anda bisa melihat contoh gambar berikut ini :

Cumi-cumi Transparan
Ditemukan di samudera belahan bumi selatan, Cumi-cumi kaca (Teuthowenia pellucida) memiliki organ yang ringan di atas matanya dan memiliki kemampuan untuk melingkar menjadi bola, seolah-olah landak yang hidup di air. Cumi-cumi ini merupakan mangsa dari banyak ikan laut-dalam (seperti hiu goblin) dan juga paus dan burung-burung laut.
Spoiler

Jika anda tertarik membuat hal seperti itu pada blog yang anda miliki. Maka anda bisa mengikuti cara berikut ini :
Copi Paste Script Berikut ini pada Artikel yang anda inginkan (Mode HTML - Bukan Compose)
 <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 GAMBAR'; }" name="button" type="button" value="LIHAT GAMBAR" /></div>
<div id="show" style="border: 1px solid white; display: none; margin: 5px; padding: 2px; width: 98%;">
<img class="aligncenter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGXdMKOIfO2zG2QFSDpmHMnrSgd1B4Fa3AxKSDMj4ojfndGXzIfEt9li8OkhfWky0inJHWCquSWTOH9L-mJhkaahdn6bYkl2aMRXdQJbQxVkDHYgzlnd-YsWq2k-CJHVkpjpj5rUNCsSA/w490-h296-no/Cumi-cumi+Transparan.jpg" alt="monyet" width="400" height="241" />
</div><div id="hide"></div></div></div>

Kode Berwarna Merah Merupakan Tulisan Yang Tampil di Kotak
Tulisan Berwarna Biru adalah URL gambar yang ingin di Tampilkan
Tulisan Berwarna Hijau adalah Ukuran Lebar dan Tinggi gambar yang di inginkan

Anda bisa mengatur beberapa hal tersebut. Sesuaikan dengan baik, terutama kesesuaian ukuran lebar dan tinggi gambar, agar tampilan gambar memiliki perbandingan gambar yang sama dengan ukuran gambar aslinya.

Baca Juga :
Menyembunyikan Gambar di artikel seperti kaskus
Menyembunyikan Tulisan di Artikel Seperti Di Kaskus
Membuat Galeri Blog Slide Show bertombol di Blog
Mengubah Gambar menjadi PDF dengan NitroPDF
Memperkecil Foto tanpa mengurangi kualitas
Cara membuat gambar Zoom di Blog
Daftar Artikel Blog
BelajarBlog #2 - HiasanAssalamualaikum Wr Wb, Hallo Kawan - kawan Hobbyku Desain | TrendingKita | Tutorial Desain Dan Blog, Pada Artikel yang kami buat dan juga anda baca kali ini dengan judul BelajarBlog #2 - Hiasan, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan Artikel BelajarBlog #2 - Hiasan, Artikel BelajarBlog #3 - Trik, yang kami tulis ini dapat anda pahami dan juga bermanfaat.

Download Kumpulan Wallpaper Mobile Legends di MasMochen

Judul Artikel: Menyembunyikan Gambar di Postingan Seperti di Situs Kaskus
link : Menyembunyikan Gambar di Postingan Seperti di Situs Kaskus

Baca juga


BelajarBlog #2 - Hiasan

Jika anda pernah membuka situs kaskus.com. Mungkin anda tidak asing dengan gambar-gambar maupun tulisan disana yang tersembunyi di dalam sebuah tombol. Setiap kali kita ingin melihat foto maupun teks tambahan, kita umumnya menekan sebuah tombol terlebih dahulu di artikel tersebut, kemudian gambar atau teks tersebut baru muncul. Nah, tahukah anda bahwa kurang lebih kita juga bisa membuat tombol seperti itu pada artikel yang kita miliki di blog.

Menyembunyikan gambar di postingan dengan cara seperti ini, mungkin bisa menjadi salah satu alternatif agar blog terlihat menjadi lebih rapi, maupun sebagai antisipasi karena artikel yang terlalu panjang. Sebagai gambaran terkait apa itu menyembunyikan gambar di sebuah artikel, anda bisa melihat contoh gambar berikut ini :

Cumi-cumi Transparan
Ditemukan di samudera belahan bumi selatan, Cumi-cumi kaca (Teuthowenia pellucida) memiliki organ yang ringan di atas matanya dan memiliki kemampuan untuk melingkar menjadi bola, seolah-olah landak yang hidup di air. Cumi-cumi ini merupakan mangsa dari banyak ikan laut-dalam (seperti hiu goblin) dan juga paus dan burung-burung laut.
Spoiler

Jika anda tertarik membuat hal seperti itu pada blog yang anda miliki. Maka anda bisa mengikuti cara berikut ini :
Copi Paste Script Berikut ini pada Artikel yang anda inginkan (Mode HTML - Bukan Compose)
 <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 GAMBAR'; }" name="button" type="button" value="LIHAT GAMBAR" /></div>
<div id="show" style="border: 1px solid white; display: none; margin: 5px; padding: 2px; width: 98%;">
<img class="aligncenter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGXdMKOIfO2zG2QFSDpmHMnrSgd1B4Fa3AxKSDMj4ojfndGXzIfEt9li8OkhfWky0inJHWCquSWTOH9L-mJhkaahdn6bYkl2aMRXdQJbQxVkDHYgzlnd-YsWq2k-CJHVkpjpj5rUNCsSA/w490-h296-no/Cumi-cumi+Transparan.jpg" alt="monyet" width="400" height="241" />
</div><div id="hide"></div></div></div>

Kode Berwarna Merah Merupakan Tulisan Yang Tampil di Kotak
Tulisan Berwarna Biru adalah URL gambar yang ingin di Tampilkan
Tulisan Berwarna Hijau adalah Ukuran Lebar dan Tinggi gambar yang di inginkan

Anda bisa mengatur beberapa hal tersebut. Sesuaikan dengan baik, terutama kesesuaian ukuran lebar dan tinggi gambar, agar tampilan gambar memiliki perbandingan gambar yang sama dengan ukuran gambar aslinya.

Baca Juga :
Menyembunyikan Gambar di artikel seperti kaskus
Menyembunyikan Tulisan di Artikel Seperti Di Kaskus
Membuat Galeri Blog Slide Show bertombol di Blog
Mengubah Gambar menjadi PDF dengan NitroPDF
Memperkecil Foto tanpa mengurangi kualitas
Cara membuat gambar Zoom di Blog
Daftar Artikel Blog

Subscribe to: Posts (Atom)