Cara Buat Spoiler di Blogspot

Kali ini saya ingin membahas tentang tutorial cara membuat spoiler di Blogspot. Sebelumnya apakah sobat tahu apa itu spoiler? spoiler berfungsi sebagai widget untuk menyembunyikan (show and hidden) suatu teks atau gambar agar tidak memakan tempat dan terlihat lebih simple. Spoiler ini bagus sekali digunakan bagi sobat yang ingin postingnya tidak terlihat terlalu panjang dan banyak berisi gambar-gambar, fungsi spoiler ini bisa sobat dapati dibeberapa forum-forum lokal atau luar, misal kaskus.us. Nah sekarang yang jadi pertanyaan apakah bisa memasang spoiler di blogspot yang notabenenya gratisan? jawabannya lagi-lagi sangat bisa, malah sobat bisa memodifikasi tampilan spoiler tersebut misalnya dengan warna dan sebagainya. Bagaimana tertarik ingin memasangnya?

Ikuti langkah berikut:

1. Pasang kode berikut dimana spoiler ingin sobat pasang. Misalnya di postingan sobat yang banyak berisi gambar.

Ini dia kodenya:

<div style="margin: 20px; margin-top:5px"><div class="smallfont" style="margin-bottom: 2px;"><input value="Tampilkan" type="button" style="margin: 0px; padding: 5px; width: auto; font-size: 11px;" 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 = 'Sembunyikan'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Tampilkan'; }" type="button"/></div><div class="alt2"><div style="display: none;"><div style="border: none; color:none; background-color:none; text-align: justify; padding:10px;">

GAMBAR ATAU TEKS SOBAT LETAKKAN DISINI

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

Contoh ingin memasang sebuah GAMBAR ini:


Maka hasilnya seperti ini:

Spoiler untuk gambar:

contoh spoiler dengan teks:

Ini adalah teks untuk contoh spoiler.
Bagaimana mudahkan?

Maka hasilnya seperti ini:

Spoiler untuk teks:

Ini adalah teks untuk contoh spoiler.
Bagaimana mudahkan?

KETERANGAN

sobat bisa memodifikasi spoiler tersebut dengan mengubah font, warna, background dan lainya. Gunakan keahlian sobat agar spoilernya tampak menarik hehe. Selesai.



Full DEMO Here

Selamat ngeblog!

Read More »

Menghilangkan Angka di Label dan Arsip

Pada posting yang lalu saya telah membahas tentang cara membuat tulisan berkedip dan link berkedip dalam istilah blogger disebut blink text dan blink link, sobat bisa baca disini. Sekarang saya ingin membahas tentang cara menghilangkan angka pada label dan arsip. Sebenarnya fungsi angka ini adalah untuk menginformasikan pada pengunjung tentang berapa jumlah arsip sobat dan banyaknya posting dalam satu label. Namun sebagian teman merasa risih dengan adanya angka pada label dan arsip blognya, bisa jadi salah satu alasan karna postingnya masih sedikit dan tentu ada alasan lain lagi. Nah bagi sobat tertarik ingin mencoba tutorial ini?

Ikuti langkah dibawah ini dengan seksama dan khidmat hehe kayak upacara aja ya?

1. Sign In ke blog anda.

2. Tuju tab Layout -> Edit HTML

3. Backup template anda dengan mengklik Download Full Template.

4. Centang kotak yang bertuliskan Expand Widget Template.

5. Cari kode dibawah ini untuk menghilangkan angka di label:

(<data:label.count/>)

5. Setelah ketemu, HAPUS kode yang dicari tadi.

7. Setelah itu cari kode berikut ini untuk menghilangkan angka di arsip:

(<data:i.post-count/>)

8. Setelah ketemu, HAPUS kode tersebut.

Perhatian:

Penting: untuk Arsip: ada TIGA kode seperti kode diatas, yang harus dihapus adalah kode PERTAMA. Dan kode ini hanya ada jika sobat memasang arsip di blog sobat. Selesai

9. Simpan template dan lihat hasilnya...

Moga manfaat...!


Salam Blogger

Read More »

Membuat Teks/Link Berkedip-kedip

Wah rasanya saya sudah banyak memosting tentang modifikasi blog, widget blog dan sebagainya. Kali ini saya mau posting apa ya? Hmmm... kayaknya saya akan memosting cara membuat link berkedip-kedip dan tulisan berkedip-kedip/berkejap-kejap, kalau dalam bahasa daerah saya yaitu "Blink Link" (untuk link) and "Blink Text" (untuk tulisan) hehe... Bagaimana mengertikan sobat-sobat blogger? :)).

Fungsi dari Blink Text ini biasanya di fokuskan untuk membuat para pengunjung blog agar pandangannya terarah ke link atau tulisan tersebut ketika mengunjungi blog kita. Ya walaupun banyak cara seperti dengan mem-Bold-kan tulisan atau memberikan background pada tulisan.
Nah sekarang apakah sobaters tertarik membuat link dan tulisan berkedip-kedip? Jika tertarik, lanjutkan membaca posting ini :D.

Ikuti langkah berikut:

# Untuk Link

1. Tambahkan kode berikut pada tulisan di link sobat:


<blink>TEKS_UNTUK_LINK_DISINI</blink>


contoh:


<a href="http://arawna.blogspot.com/"><blink>CONTOH_TEKS_UNTUK_LINK_BERKEDIP-KEDIP</blink></a>


Maka hasilnya seperti ini:

CONTOH_TEKS_UNTUK_LINK_BERKEDIP-KEDIP

# Untuk tulisan/teks/paragraf

1. Tambahkan kode berikut pada tulisan/teks/paragraf di blog sobat:


<blink>TULISAN/TEKS/PARAGRAF_DISINI</blink>


contoh 1 baris:


<blink>CONTOH TEKS BERKEDIP KEDIP</blink>


Maka hasilnya seperti ini:

CONTOH TEKS BERKEDIP KEDIP

Contoh 1 paragraf:


<blink>Paragraf ini adalah contoh
untuk membuat link berkedip-kedip
atau berkejap-kejap
bagaimana, bagus bukan?</blink>


Maka hasilnya seperti ini:

Paragraf ini adalah contoh
untuk membuat link berkedip-kedip
atau berkejap-kejap
bagaimana, bagus bukan?

Well, selamat mencoba!

Salam Blogger!

Read More »

Pasang Jam Menggunakan Javascript

Sobat blogger apa kabar? Bagaimana masih tetap nge-blog? Pada artikel sebelumnya saya telah memposting cara pasang jam di blog dengan menggunakan flash disini. Kali ini saya akan membahas tentang pasang jam dengan javascript biasanya disebut live clock. Ada banyak kelebihan menggunakan jam javascript, salah satunya adalah karna simple dan tidak menggangu over loading alias blog anda cepat akses. Dan tentunya masih banyak lagi. Bagaimana tertarik tidak? Kalau sobat tertarik teruskan bacanya :D.

Ikuti langkah berikut:

1. Sign In ke blog anda.

2. Tuju tab Layout/Tata Letak -> Edit HTML

3. Backup template anda dengan mengklik Download Full Template.

4. Centang kotak yang bertuliskan Expand Widget Template.

5. Cari kode ini: </head> (contoh, bisa dipasang dimana saja)

6. Setelah ketemu, Pasang kode dibawah ini persis di BAWAH kode tadi:


<script language="javascript" src="http://roele112.googlepages.com/digitalclock.js"></script>


7. Setelah itu cari kode ini: <body>

8. Setelah ketemu, ganti kode tersebut dengan kode dibawah ini:


<body onLoad="show_clock()">


9. Simpan dan lihat hasilnya...

Perhatian:

Sobat juga bisa memasang dimana saja sobat mau, di </head> hanya sebagai contoh saja.

Misal sobat bisa pasang di Sidebar blog sobat, caranya:

1. Kode di Langkah no. 6 sobat pasang di sidebar
2. Langkah no. 7 dan 8 tetap dilakukan.

Selesai, selamat mencoba!

Moga manfaat...!

Salam Blogger

Read More »

Membuat Kontak Kami/Contact Form

Sebenarnya ada banyak cara untuk membuat kontak email di blogspot, namun yang paling banyak dibahas blog-blog tutorial yaitu dengan menggunakan layanan gratis seperti di emailmeform.com. Kali ini saya ingin memosting cara yang berbeda. Saya akan membahas dua cara/versi untuk membuat contact form/kontak kami. Berminat untuk melanjutkan membaca posting ini?
Ikuti langkah berikut:

# Cara Pertama:

1. Tambahkan kode dibawah ini di Menu Navbar anda atau dimanapun anda ingin memasangnya:

<a href="mailto:ALAMAT_EMAIL_ANDA">Kontak</a>

misal: <a href="mailto:dodol@yahoo.com">Kontak</a>

2. Simpan Template dan lihat hasilnya.

# Cara Kedua:

1. Sign In ke blog anda.

2. Tuju tab Layout -> Edit HTML

3. Backup template anda dengan mengklik Download Full Template.

4. TIDAK PERLU mencentang kotak Expand Widget Template.

5. Cari kode ini:

</head>

6. Setelah ketemu, Pasang kode dibawah ini persis di ATAS kode tadi:

<script type='text/javascript'>
//<![CDATA[
function valid(form) {
var field = form.email;
var str = field.value;
if (window.RegExp) {
var reg1str = "(@.*@)|(\.\.)|(@\.)|(\.@)|(^\.)";
var reg2str = "^.+\@(\[?)[a-zA-Z0-9\-\.]+\.([a-zA-Z]{2,3}|[0-9]{1,3})(\]?)$";
var reg1 = new RegExp(reg1str);
var reg2 = new RegExp(reg2str);
if (!reg1.test(str) && reg2.test(str)) {
return true;
}
field.focus();
field.select();
return false;
} else {
if(str.indexOf("@") >= 0)
return true;
field.focus();
field.select();
return false;
}
}
//]]>
</script>

7. Simpan template

8. Langkah selanjutnya adalah memasang kode di bawah ini di posting seperti halnya anda membuat posting tulisan.

<form action="http://girlyblogger.site90.net/email.php" method="post" name="myform" onsubmit="return valid(this)"><input type="hidden" name="recipient" value="ALAMAT_EMAIL_ANDA"><input type="hidden" name="subject" value="E-Mail dari Kontak Blog Anda"><input type="hidden" name="redirect" value="ALAMAT_BLOG_ANDA">
Nama: (Wajib)<br><input type="text" size="30" name="realname"><br>
E-mail: (harus diisi, tidak akan ditampilkan)<br><input type="text" size="30" name="email"><br>
Situs Web: (Optional)<br><input type="text" size="30" name="website" id="website"><br>
Pesan Anda:<br>
<textarea cols=40 rows=6 name="Comments" wrap="soft"></textarea>
<input type="submit" value="Kirim"> <input type="reset" value="Batal">
</form>

TIP:

Buat postingan pada tanggal sebelum awal postingan Anda agar tidak terlihat di Posting Terbaru dan JANGAN diberikan LABEL pada postingannya, selesai.


9. Simpan posting dan lihat hasilnya...

Untuk demo silahkan klik disini

Moga manfaat...!

Read More »

Buku Tamu Satu Halaman

Sekarang saya ingin membahas tentang posting membuat buku tamu satu halaman. Biasanya sobat blogger meletakkan buku tamu di sidebar. Nah sekarang saya ingin mengajak sobat memasang buku tamu di dalam satu halaman seperti di blog wordpress.com. Lalu apakah di Blogspot bisa? Jawabannya bisa sekali. Jika tertarik memasang buku tamu satu halaman, ikuti langkah berikut:

# Langkah Pertama:

1. Copy kode di bawah ini ke Notepad Anda:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!Code by: http://arawna.blogspot.com pada Jum'at-17 Juli-2009 >
<html>
<body>

<div style="position:center;width:900px;height:auto;padding:10px;border:3px double #CCC; background:#fff; font:verdana;">
<img src="YOUR_LOGO_LINK" width="160" height="100"> <!-- Begin - http://www.bidvertiser.com -->
<SCRIPT LANGUAGE="JavaScript1.1" SRC="http://bdv.bidvertiser.com/BidVertiser.dbm?pid=243704%26bid=603375" type="text/javascript"></SCRIPT>
<noscript><a href="http://www.bidvertiser.com">affiliate program</a></noscript>
<!-- End - http://www.bidvertiser.com -->
<br/><br/>
<center>
<div style=background:#f1f1f1; border:1px solid #CCC; height:50px;><a href="ALAMAT_BLOG_ANDA"><b>HOME</b></a> - <a href="http://arawna.blogspot.com/search/label/Tutorial"><b>TUTORIAL BLOG</b></a> - <a href="http://freeshop2.blogspot.com" target="_blank"><b>DOWNLOAD CENTER</b></a> - <a href="mailto:ALAMAT_EMAIL_ANDA"><b>CONTACT</b></a></p></div>
<p><b>BUKU TAMU</b></p>
<!-- Begin: http://adsensecamp.com/ -->
<script src="http://adsensecamp.com/show/?id=xSYnwj7nmi0%3D&cid=1mKE6FR8OXo%3D&chan=8la%2BmOzMXOs%3D&type=4&title=0000FF&text=000000&background=FFFFFF&border=FFFFFF&url=006699" type="text/javascript">
</script>
<!-- End: http://adsensecamp.com/ -->  <!-- ISI DENGAN KODE SHOUTMIX/CBOX/LAINNYA ANDA -->

KODE BUKU TAMU PASANG DISINI

<!-- END SHOUTBOX CODE -->  <!-- Begin: http://adsensecamp.com/ -->
<script src="http://adsensecamp.com/show/?id=xSYnwj7nmi0%3D&cid=1mKE6FR8OXo%3D&chan=8la%2BmOzMXOs%3D&type=4&title=0000FF&text=000000&background=FFFFFF&border=FFFFFF&url=006699" type="text/javascript">
</script>
<!-- End: http://adsensecamp.com/ -->
<br/><br/>
<a href="http://www.bidvertiser.com/bdv/bidvertiser/bdv_ref.dbm?Ref_Option=pub&Ref_PID=243704" target="_blank" rel="bookmark" title="ads"><img alt="ads" width="125" src="http://roele112.googlepages.com/bidvertiser125x125.png" height="125"/></a>  <a href="http://adsensecamp.com/?ref_id=20709" target="_blank" rel="bookmark" title="Adsense Indonesia"><img alt="ads" src="http://adsensecamp.com/images/banner/happy-money.jpg"/></a>  <a href="http://kumpulblogger.com/?refid=80103" target="_blank" rel="bookmark" title="ads"><img alt="ads" width="125" src="http://roele112.googlepages.com/imgad.gif" height="125"/></a>  <a href="http://www.co.cc/?id=167010" target="_blank" rel="bookmark" title="co cc"><img alt="co cc" width="125" src="http://get-banner.lookup.co.cc/banner_img/cocc250_250c.gif" height="125"/></a>
<br/>
</center>
<span style="font-size: 80%">Design by: <a href="http://arawna.blogspot.com/" target="_blank">aRawna</a></span>
</div>

</body>
</html>


2. Setelah selesai di copy simpan dengan extensi .html
(contoh: bukutamu.html)

3. Kemudian upload di Google Pages atau di mana saja seperti 000webhost.com atau yang lainnya.

# Langkah Kedua:

1. Sign In ke blog anda.

2. Tuju tab Layout/Tata Letak » Edit HTML

3. Backup template anda dengan mengklik Download Full Template.

4. Centang kotak yang bertuliskan Expand Widget Template.

5. Setelah itu copy file link yang sudah di upload tadi
(misal: http://demo.googlepages.com/bukutamu.html )

6. Setelah di copy pasang di Navbar Menu
(jika di blog anda sudah ada fasilitas Navbar Menu)

7. Simpan template dan lihat hasilnya...

PENTING:

Untuk tulisan yang saya warna merah-kan itu Sobat ganti dengan milik sobat contoh alamat email.
Lalu isi kode buku tamu Sobat diantara <!-- ISI DENGAN KODE SHOUTMIX/CBOX/LAINNYA ANDA --> dan <!-- END SHOUTBOX CODE -->, Selesai.

Untuk melihat DEMO klik disini

Moga manfaat...!

Salam Blogger

Read More »

Google Translator For Blogger (Versi 3)

Sebelumnya saya telah memposting dua posting berkenaan tentang Google Translator untuk Blogger. Versi pertama menggunakan layanan script dari google langsung, lengkapnya bisa di baca disini. Untuk versi 2 menggunakan bendera kecil yang tidak terlalu memakan tempat, untuk menginstall translator versi 2 bisa dibaca disini. Nah sekarang saya lagi-lagi ingin memosting tentang google translator versi 3, perbedaan fitunya terletak pada benderanya.



Untuk sekarang menggunakan bendera animasi (animation flag) alias benderanya berkibar-kibar. Bagus bukan untuk hiasan blog kita? Sobat tertarik? Jika ya silahkan klik tombol installer dibawah ini:

<br /><br /><center><a href="" target=" blank"><b>Google Translate</b></a></center><br /><br /><div style="overflow:no; width:100%px; height:100%px; padding: 5px; background: transparant;"><br /><br /><style><br /><br />.google_translate img { filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0; }<br /><br />.google_translate:hover img { filter:alpha(opacity=30); -moz-opacity: 0.30; opacity: 0.30; }<br /><br />.google_translatextra:hover img { filter:alpha(opacity=0.30); -moz-opacity: 0.30; opacity: 0.30; }<br /><br /></style><br /><br /><div style="overflow:no; width:100%px; height:100%px; padding:5px 0px 0px 0px;"><br /><br /><center><br /><br /><a class="google_translate" href="#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Car&hl=en'); return false;"><img border="0" alt="Arabic" style="cursor: pointer;margin-right:3px" src="http://img31.imageshack.us/img31/1661/pinginbelajarsaudiarabi.gif" title="Arabic" align="absbottom"/></a><br /><br /><br /><br /><a class="google_translate" href="#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cko&hl=en'); return false;"><img border="0" alt="Korean" style="cursor: pointer;margin-right:3px" src="http://img43.imageshack.us/img43/2771/pinginbelajarsouthkorea.gif" title="Korean" align="absbottom"/></a><br /><br /><br /><br /><a class="google_translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cja&hl=en'); return false;"><img border="0" alt="Japanese" style="cursor: pointer;margin-right:3px" src="http://img34.imageshack.us/img34/4583/pinginbelajarjapan.gif" title="Japanese" align="absbottom"/></a><br /><br /><br /><br /><a class="google_translate" href="#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Czh-CN&hl=en'); return false;"><img border="0" alt="Chinese Simplified" style="cursor: pointer;margin-right:0px" src="http://img41.imageshack.us/img41/1681/pinginbelajarchina.gif" title="Chinese Simplified" align="absbottom"/></a><br /><br /></center><br /><br /></div><br /><br /><br /><br /><div style="overflow:no; width:100%px; height:100%px; padding:7px 0px 0px 0px;"><br /><br /><center><br /><br /><a class="google_translate" href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cru&hl=en'); return false;"><img border="0" alt="Russian" style="cursor: pointer;margin-right:3px" src="http://img32.imageshack.us/img32/7591/pinginbelajarrussia.gif" title="Russian" align="absbottom"/></a><br /><br /><br /><br /><a class="google_translate" href="#" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cpt&hl=en'); return false;"><img border="0" alt="Portuguese" style="cursor: pointer;margin-right:3px" src="http://img31.imageshack.us/img31/7112/pinginbelajarbrazil.gif" title="Portuguese" align="absbottom"/></a><br /><br /><br /><br /><a class="google_translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cen&hl=en'); return false;"><img border="0" alt="English" style="cursor: pointer;margin-right:3px" src="http://img43.imageshack.us/img43/2598/pinginbelajarunitedking.gif" title="English" align="absbottom"/></a><br /><br /><br /><br /><a class="google_translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cfr&hl=en'); return false;"><img border="0" alt="French" style="cursor: pointer;margin-right:0px" src="http://img40.imageshack.us/img40/4035/pinginbelajarfrance.gif" title="French" align="absbottom"/></a><br /><br /></center><br /><br /></div><br /><br /><br /><br /><div style="overflow:no; width:100%px; height:100%px; padding:7px 0px 0px 0px;"><br /><br /><center><br /><br /><a class="google_translate" href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cde&hl=en'); return false;"><img border="0" alt="German" style="cursor: pointer;margin-right:3px" src="http://img38.imageshack.us/img38/344/pinginbelajargermany.gif" title="German" align="absbottom"/></a><br /><br /><br /><br /><a class="google_translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Ces&hl=en'); return false;"><img border="0" alt="Spain" style="cursor: pointer;margin-right:3px" src="http://img41.imageshack.us/img41/1191/pinginbelajarspain.gif" title="Spain" align="absbottom"/></a><br /><br /><br /><br /><a class="google_translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cit&hl=en'); return false;"><img border="0" alt="Italian" style="cursor: pointer;margin-right:3px" src="http://img36.imageshack.us/img36/6670/pinginbelajaritalia.gif" title="Italian" align="absbottom"/></a><br /><br /><br /><br /><a class="google_translate" href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cnl&hl=en'); return false;"><img border="0" alt="Dutch" style="cursor: pointer;margin-right:0px" src="http://img33.imageshack.us/img33/2439/pinginbelajarnetherland.gif" title="Dutch" align="absbottom"/></a><br /><br /></center><br /><br /></div><br /><br /></div><br /><br /></div><br /><br /><br/><br/><span style="font-size: 80%">Ingin pasang Translator di blog? <a href="http://arawna.blogspot.com/">Klik disini! </a></span>

Untuk menginstall translator versi 3, Anda hanya butuh sign in diblog Anda lalu klik tombol installer diatas. Selesai!.

Simple bukan?

Moga manfaat!



Salam Blogger

Read More »