June 2011 - Anwariz.com Sahabat Inspirasi Indonesia

Cari aja disini

Membuat Spoiler Pada Postingan Blog Itu Mudah

Anwariz Blog - Spoiler merupakan salah satu alternatif bagi kita untuk menghemat ruang saat menampilkan konten di dalam isi postingan blog kita. Selain memiliki fungsi untuk menghemat ruang, spoiler juga dapat digunakan untuk mempercantik tampilan isi postingan blog dengan gaya yang terbilang cukup keren, karena dengan spoiler ini konten yang ditampilkan dapat dibuka tutup sesuai keinginan kita yang membuatnya tampil lebih elegan.

cara buat spoiler di blog

Bagiamana cara menampilkannya?

Cara untuk menampilkan spoiler di dalam isi postingan blog kita ini adalah dengan menggunakan kode HTML dalam menulis sebagai berikut.

<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;"></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 class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
ISI SPOILER
</div></div></div></div>

Pertama, masuk ke akun blogger kita masing-masing.
Pada saat kita ingin membuat postingan blog, jangan pilih compose tetapi pilih lah edit HTML.
Masukan kode HTML untuk menampilkan spoiler di atas.
Klik terbitkan dan selesai.
Wah, mudah bukan?


Contoh untuk Menampilkan Tulisan dengan Spoiler.

Untuk menampilkan sebuah tulisan menggunakan spoiler pada isi postingan blog kita, gunakan kode HTML untuk menampilkan spoiler sama seperti di atas.

Briptu Norman adalah seorang anggota Brimob di Gorontalo kini sedang tenar di dunia maya karena videonya yang beredar di situs berbagi youtube mengundang perhatian para pengguna internet.
Selain mendapatkan ketenaran, kini Briptu Norman juga telah mendapatkan dukungan dari pengguna jejaring sosial di dunia maya agar dia tidak dikenakan sanksi oleh atasannya, ulahnya yang sedang bernanyi lagu india secara lypsinc ketika sedang bertugas.

Bukan cuma orang biasa yang memberikan dukungan kepada Briptu Norman. Namun dia juga didukung oleh kalangan artis dan salah satunya adalah Glenn Fredly. Siapapun yg ngaku penyanyi & Lipsync mulai sekarang, kalo tidak lebih keren dr #Briptu Norman lebih baik ditindak aparat..sekian," tulis Glenn Fredly dalam akun Twitter-nya.
http://karodalnet.blogspot.com/2011/04/briptu-norman.html

Maka kode HTML untuk menampilkan spoiler di atas adalah sebagai berikut.

<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;"></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 class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
Briptu Norman adalah seorang anggota Brimob di Gorontalo kini sedang tenar di dunia maya karena videonya yang beredar di situs berbagi youtube mengundang perhatian para pengguna internet.
Selain mendapatkan ketenaran, kini Briptu Norman juga telah mendapatkan dukungan dari pengguna jejaring sosial di dunia maya agar dia tidak dikenakan sanksi oleh atasannya, ulahnya yang sedang bernanyi lagu india secara lypsinc ketika sedang bertugas.

Bukan cuma orang biasa yang memberikan dukungan kepada Briptu Norman. Namun dia juga didukung oleh kalangan artis dan salah satunya adalah Glenn Fredly. Siapapun yg ngaku penyanyi & Lipsync mulai sekarang, kalo tidak lebih keren dr #Briptu Norman lebih baik ditindak aparat..sekian," tulis Glenn Fredly dalam akun Twitter-nya.
http://karodalnet.blogspot.com/2011/04/briptu-norman.html
</div></div></div></div>

Contoh untuk Menampilkan Gambar dengan Spoiler.


Maka kode HTML untuk menampilkan spoiler di atas adalah sebagai berikut.

<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;"></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 class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
<a href=”URL”><img src=”http://3.bp.blogspot.com/-L99QfFvfESs/TfTA_Nua42I/AAAAAAAAATw/e1mPA-lwIwE/s1600/Briptu+Norman.jpg”></a>
</div></div></div></div>

Contoh untuk Menampilkan Video dengan Spoiler.


Maka kode HTML untuk menampilkan spoiler di atas adalah sebagai berikut.

<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;"></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 class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
<embed autostart=”true” src=”http://www.youtube.com/watch?v=jsVW-XO9nuY&feature=player_detailpage” hidden=”true”></embed>
</div></div></div></div>

Keterangan:

Untuk menampilkan gambar dan video menggunakan tampilan spoiler, gunakan URL gambar dan video tersebut yang kemudian dikemas sebagai berikut.
  1. Untuk gambar,
    <a href=”URL”><img src=” URL Gambar ”></a>
    .
  2. Untuk video,
    <embed autostart=”true” src=” URL Video ” hidden=”true”></embed>
Read More

Situs Penyedia Emoticon Gartis

Apa itu emoticon?
Emoticon merupakan sebuah karakter atau avatar yang menggambarkan ekspresi kita guna menguatkan maksud tulisan yang kita beri emoticon tersebut.


Pada dasarnya, emoticon berguna untuk menguatkan maksud dari penulisan kita agar lebih ekspresif dan terlihat menarik. Misalnya, 

“waah, senangnya. Di hari ulang tahunku ini, akun mendapatkan kado sebuah laptop Sony Vaio dari ayah!”.

Bandingkan dengan yang ini,

“waah, senangnya. Di hari ulang tahunku ini, aku mendapatkan kado sebuah laptop Sony Vaio dari ayah!” .

Apa yang beda? Tulisan yang dimunculkan sama bukan? Tapi, kita cenderung menganggap tulisan kedua lebih menarik karena tulisan tersebut diimbuhi oleh sebuah karakter yang mempertegas makna dan ekspresi dari tulisan tersebut.

Bagaimana cara menampilkan emoticon tersebut dalam setiap postingan kita?

Mudah. Saat kita menuliskan sebuah postingan di blog, masuk ke bagian edit HTML, bukan bagian compose. Kemudian masukan URL emoticon tersebut di dalamnya.
Format untuk menuliskan URL tersebut adalah sebagai berikut.

<img src="URL gambar emoticon">

Nah, setelah itu coba lihat di bagian compose, maka emoticon tersebut akan muncul di postingan kita. Untuk keterangan lebih jelasnya dapat kita baca di halaman bagaimana cara menampilkan emoticon pada postingan blog.

Di mana saja kita dapat menemukan emoticon yang lucu-lucu, ekspresif, dan menarik secara gratis?

Yup, ini lah yang sejak tadi ditunggu-tunggu.
So, berikut ini merupakan beberapa daftar situs yang menyediakan emoticon secara gratis.

  1. Add Emoticons.
  2. Emocutez.
  3. Pic4Ever.
  4. Rkasigi.net.
  5. Emoticons 4 U.
  6. Free Smileys.
  7. My Emoticons.

Wah, menarik bukan?
Emoticon mana nih yang disukai? Sudahkah emoticon tersebut mewakili ekspresi kita dalam menulis?
Yup, dengan emoticon pastinya akan membuat setiap tulisan dalam postingan blog kita akan semakin seru dan menarik untuk dibaca!

Ada tanggapan?
Jika ada yang masih ingin ditanyakan silakan tulis saja di kotak komentar di bawah ini ya kawan. Mari kita bagikan pengalaman dan pengetahuan kita bersama.
Salam blogger!
Read More