Membuat Spoiler Pada Postingan Di Blog

Cara membuat Spoiler pada postingan blog. Ya, ini hanya buat dokumentasi saja saya tulis di blog ini. Karena saya juga memiliki blog yang bertemakan gambar. Agar terkesan lebih rapi dan mengurangi pada saat proses loading seningga menjadi ringan. Spoiler bisa anda masukkan dengan kode, gambar, video atau kode html.

Cara Membuatnya seperti di bawah ini :

1. Buat sebuah postingan yang sobat inginkan.
2. Jika ingin menggunakan Spoiler untuk gambar, klik Tab Edit HTML.
3. Letakkan kode dibawah ini untuk membuat Spoiler.

<div style="margin: 5px 20px 20px;"><div class="smallfont" style="margin-bottom: 2px;"><b>Spoiler</b> gambar : <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 = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Show" /></div><div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px; text-align: left;"><div style="display: none;">Isi dari Spoiler<br /> </div></div></div>

Contoh Spoiler dengan gambar.

<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;">
<b>Spoiler</b> gambar : <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 = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Show" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px; text-align: left;">
<div style="display: none;">

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpV-JJ9FyMUkzA6-R9Qu7DJ3TdhBwHk6ie362J9UMzcls3maq5QRMeJYRYdd0ShICV7Utl68jKeWXsTOs-bylaDU324O6CvPX8WGk0up1ypB9LwvhN-ja0qOK-2cxCvSgm9XPN5DLztYc/s1600/windows-7-blue-orange-black-wallpaper.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpV-JJ9FyMUkzA6-R9Qu7DJ3TdhBwHk6ie362J9UMzcls3maq5QRMeJYRYdd0ShICV7Utl68jKeWXsTOs-bylaDU324O6CvPX8WGk0up1ypB9LwvhN-ja0qOK-2cxCvSgm9XPN5DLztYc/s1600/windows-7-blue-orange-black-wallpaper.jpg" /></a>

</div>
</div>
</div>

Hasil

Spoiler gambar :

Huruf yang bercetak biru bisa anda ganti.

4. Coba di preview dahulu untuk melihat hasil postingan.
5. Setelah selesai publikasikan postingan sobat.

Selamat mencoba, and Keep Blogging.

Baca Selengkapnya

Cara Membuat Text Area Berbagai Macam Script

Berikut ini adalah cara membuat text area untuk ditempatkan pada postingan maupun widget pada blog.

- Text Area Standard
Di bawah ini merupakan script pengaturan text area standard.

<p align="center"><textarea name="code" rows="6" cols="20"> Tulis text di sini</textarea></p>

Tulis text di sini

Contoh

Baca Selengkapnya

Cara Membuat Button/Tombol Download Atau Link

Berikut ini akan saya berikan cara membuat Button, mungkin bisa dibilang klasik kali ya.
Tidak perlu basa-basi, langsung saja ya.
Contoh seperti di bawah ini.



- Di bawah ini merupakan scriptnya Button.
Script dibawah ini jika di klik tidak membuat efek sama sekali, hanya membuat tombol button.

<button>Cara Membuat Button Download</button>

Hasil klik di bawah ini :

Baca Selengkapnya

Cara Merubah Warna Link Blog

Awalnya saya ingin mengganti warna link pada blog, saya coba deh satu-satu saya edit sampe pusing (hehe).
Akhirnya ketemu juga caranya biar cepat (maklum newbie).

Ikuti langkah-langkah berikut ini :

1. Login pada Blog Kamu.
2. Klik Design, pilih Edit HTML.
3. Centang Expand Widget Templates.
4. Cari kode-kode di bawah ini yang mirip.

Baca Selengkapnya

Mengganti Tulisan Post A Comments manual pada Blogspot

Untuk mengganti Tulisan Post A Comments ikuti cara dibawah ini.

1. Login ke akun blog Anda. Lalu pilih Layout(Design).
2. Klik Edit HTML, lalu centang tanda Expand Widget Templates
3. Cari kode di bawah ini.

<h4 id='comment-post-message'><data:postCommentMsg/></h4>

4. Ganti tulisan yang berwarna merah sesuai dengan keinginan Anda. Contoh :

Baca Selengkapnya

Menghapus Navbar Blogger pada Blogspot

Cara menghapus navbar pada blog seperti diatas.
Masuk ke Rancangan >> Edit HTML
Cari kode

<b:skin><![CDATA[/*

Baca Selengkapnya

Cara Membuat Menu Halaman Daftar Isi Dengan Script

Menu halaman ini berfungsi untuk memperlihatkan daftar postingan-postingan yang kita buat (Daftar Isi).
Ini sangat berguna agar para  pembaca blog kita dapat melihat secara keseluruhan, daftar isi dari blog kita.

Langsung saja.

1. Masuk ke akun blogger anda.
2. Pilih Rancangan(Design) > > Posting >> Edit Halaman(Edit Pages) >> Halaman Bary (New Page)
3. Pilih salah satu script dibawah ini.

Baca Selengkapnya

Cara Membuat Widget Link Scroll

Untuk membuat widget link berscroll, ikuti langkah-langkah dibawah ini.

1. Masuk ke akun blogger.
2. Klik Rancangan > Elemen Halaman > Tambah Gadget.
3. Pilih HTML/JavaScript.
4. Copy Paste script dibawah ini.

<div style="overflow:auto;width:250px;height:200px;padding:10px;border:1px solid #eee">

Isi dengan Halaman anda atau kode script.

</div>

Baca Selengkapnya

Cara Pasang Banner/Iklan Secara Manual Pada Blogspot

Saya akan memberikan cara memasang banner/iklan dengan script.
Cara ini terbilang mudah, anda hanya perlu mengcopy-paste script yang ada di bawah.
Tapi sebelumnya.

Masuk ke Desain, klik Tambah Gadget, pilih HTML/Java Script.

Baca Selengkapnya

Cara Pasang Google Translator Dengan Menggunakan Bendera Negara

Bagi blogger yang sudah sering menulis blog, cara ini sudah pernah dilakukan. Tapi bagi blogger-blogger baru pasti menginginkan blog pribadinya mempunyai translater, agar mudah dibaca bila dilihat oleh negara lain. Agar tulisan mereka bisa mendunia. (hahaha....lebay saya). Seperti translater yang ada diatas blog saya.

Ikuti cara dibawah ini :
Masuk ke desain, klik tambah gadget, pilih HTML/Java Script.

Copy Paste Script dibawah ini :

Baca Selengkapnya