Cara Membuat Spoiler Pada Postingan Di Blog

Tujuan dari pembuatan Spoiler ini adalah untuk menyembunyikan isi dari Content (Teks, Gambar, Video, Dll) yang ingin kita sembunyikan yang nanti nya dengan hanya menekan tombol "Show / Hide" pengunjung bisa melihat isi dari spoiler tersebut. Selain menghemat tempat, pembuatan Spoiler dalam Postingan membuat loading content blog menjadi ringan dan tidak terlalu berat saat membuka sebuah blog.

Buat yang sering berkunjung di Forum" pasti penggunaan Spoiler udah gak asing lagi , pembuatan spoiler di Forum bisa dibilang sangat mudah. Tapi kali ini saya akan mengajarkan bagaimana cara membuat Spoiler di dalam sebuah Postingan Blog. Langsung aja disimak yaa .

Cara Membuat Spoiler Di Blog 

1. Silahkan Login terlebih dahulu ke akun Blogger.
2. Pilih Entri Pos , seperti biasa membuat postingan
3. Pilih Edit HTML 

4. Silahkan masukan Scirpt berikut untuk membuat Spoiler
 

<div style="margin: 5px 30px 30px;"> <div class="smallfont" style="margin-bottom: 2px;"> <b>Judul Spoiler</b>: <input value="Open" style="margin: 0px; padding: 0px; width: 55px; font-size: 12px;" 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 = 'Open'; }" type="button"> </div> <div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;"> <div style="display: none;"> <b>Letakan Content Disini</b> <br> </div> </div> </div>

5. Silahkan ganti Judul Spoiler dan Content yang mau disembunyikan dengan cara merubah "Letakkan Content Disini".
6. Untuk melihat hasil sementara , bisa dengan mengklik PRATINJAU, apabila postingan sudah dirasa cukup bisa langsung di PUBLIKASIKAN.

Berikut contoh dari hasil pembuatan Spoiler.

Contoh Spoiler:

Itu tadi cara untuk membuat spoiler pada postinga di blog. Ternyata tidak sulit dan cukup mudah, hanya Copy Scirpt Spoiler selesai deh .
Semoga postingan ini bisa membantu pembaca yang sedang belajar nge-Blog seperti seperti saya ini.

Continue

Cara Membuat CD Installer Windows 7 With UltraISO

Judul artikel saya hari ini saya adalah bagaimana cara membuat CD Installer Windows 7 dengan software UltraISO , mungkin sudah banyak teman-teman yang tau tentang artikel ini. Tapi apa salahnya apabila saya coba untuk menuliskan apa yang sudah saya pelajari :) Semakin banyak berbagi ilmu , maka akan semakin bertambah juga ilmu yang kita miliki . hehehe Dalam membuat CD Installer Windows 7 adalah beberapa alat yang perlu disiapkan :

1. File ISO Windows 7
2. Software UltraISO
3. DVD-RW
4. CD-R / DVD-RW

Jika semua perlengkapan sudah siap, sekarang waktu nya membuat CD Installernya :

Step 1
Buka Software UltraISO yang tadi sudah disiapkan , apabila belum ada silahkan di download terlebih dahulu. Kemudian buka file ISO Windows 7 , klik icon Burn CD / DVD Image.
Perhatikan Gambar 1

Gambar 1

Step 2
Kemudian pilih Burn , tunggu sampai proses burning berhasil . Biasanya membutuhkan waktu sekitar 10 menit .

Gambar 2

Apabila proses burning berhasil , nanti akan muncul notice bahwa burning sukses dan CD Installer Windows 7 yang telah dibuat sudah bisa digunakan untuk Install Windows :)

Continue

Cara Membuat READ MORE Otomatis Di Blog

Berhubung masih banyak temen2 Blogger yang belum tahu bagaimana cara membuat READ MORE di Blog , kali ini saya ingin share bagaimana cara membuat READ MORE pada blog. Mohon maaf apabila tips yang saya share ini repost :) Langsung aja yukk disimak :

Cara Membuat READ MORE Otomatis

1. Silahkan login ke Blogger > Template 
2. Supaya lebih aman, klik tombol Cadangkan / Pulihkan yang ada di pojok kanan > Unduh Template Lengkap, setelah selesai template terunduh, tekan Tutup
3. Sekarang klik tombol Edit HTML.
4. Copy kode ini:
</head>
5. Letakkan kursur DI DALAM kotak Edit HTML.
6. Tekan CTRL+F untuk mencari lalu tekan CTRL+V lalu tekan ENTER
7. Setelah ketemu kode </head> , maka letakkan kode berikut diatas </head>

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 250;
summary_img = 220;
img_thumb_height = 120;
img_thumb_width = 220;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(b,a){if(b.indexOf("<")!=-1){var d=b.split("<");for(var c=0;c<d.length;c++){if(d[c].indexOf(">")!=-1){d[c]=d[c].substring(d[c].indexOf(">")+1,d[c].length)}}b=d.join("")}a=(a<b.length-1)?a:b.length-2;while(b.charAt(a-1)!=" "&&b.indexOf(" ",a)!=-1){a++}b=b.substring(0,a-1);return b+" [...]"}function createSummaryAndThumb(d){var f=document.getElementById(d);var a="";var b=f.getElementsByTagName("img");var e=summary_noimg;if(b.length>=1){a='<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+b[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';e=summary_img}var c=a+"<div>"+removeHtmlTag(f.innerHTML,e)+"</div>";f.innerHTML=c};
//]]>
</script>

8. Sekarang cari kode <data:post.body/> sebagaimana anda tadi mencari </head> maka akan anda temui kode tersebut tidak hanya satu. sehingga kita harus coba-coba, tapi mulailah dari <data:post.body/> yang paling bawah atau akhir.

Jika sudah ketemu yang paling akhir, maka ganti kode tersebut dengan ini:

 <b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span class='rmlink' style='float:left'><b>Baca Selengkapnya</b> &#8594; <a expr:href='data:post.url'><data:post.title/></a></span>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
</b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

9. Klik Pratinjau Template untuk melihat apakah artikel di homepage anda sudah menampilkan baca selengkapnya kemudian judul artikel. Contohnya seperti di blog ini  http://inibeli.blogspot.com/

Jika belum berhasil maka klik tombol Edit Template  lalu hapus script yang baru saja anda tambahkan tadi atau tekan CTRL + Z. Sekarang coba ganti dengan <data:post.body/> yang ada di atasnya, semoga kali ini anda berhasil. Jika ketika di Pratinjau sudah terpasang dengan benar klik tombol Save Template.

Jika anda ingin mengatur seberapa panjang teks yang di tampilkan atau seberapa besar gambar yang dimuat berikut ini keterangannya:

summary_noimg = 250;  adalah banyaknya karakter yang ditampilkan ketika postingan anda tidak ada gambar

summary_img = 220; adalah banyaknya karakter yang ditampilkan ketika postingan atau pada artikel anda terdapat gambar.

img_thumb_height = 120; adalah tinggi gambar thumbnail

img_thumb_width = 220; adalah lebar gambar thumbnail

Anda bisa juga mengganti BACA SELENGKAPNYA dengan kata-kata lain.

Demikian artikel Cara Memasang Read More Pada Artikel di Blog. Silahkan baca artikel lainnya, terima kasih.

Continue