Cara Membuat Contact Form / Kontak Kami

Akibat dari Kang Rohman memasang fasilitas kontak kami di blog ini, maka banyak sekali email masuk yang menanyakan bagaimana cara membuat contact form seperti itu. Hmmm.. gimana ya? lupa lagi dhenk, soalnya dulu tidak saya catat langkah-langkah nya… sebentar ya Kang Rohman ingat-ingat dulu .

Sebelum anda memasang kontak form di blog, ada baiknya mempertimbangkan baik dan buruknya terlebih dahulu. Salah satu kebaikan atau kelebihan dari mamasang fasilitas kontak form yaitu mempermudah pengunjung untuk mengirimkan pesan ke anda. Lalu kekukarangan atau keburukannya yaitu karena sangat mudahnya orang mengirimkan pesan, maka anda harus bersiap-siap kebanjiran email di inbox anda dan tentunya anda harus meluangkan waktu untuk membalasnya, betul tidaaakk? dan sekaian saja Kang Rohman mohon maaf kepada pengirim email yang belum sempat kang Rohman balas, karena banyak sekali email yang masuk sehingga belum sempat kang Rohman jawab semuanya.

Dimanakah kita bisa mendapatkan kontak form? di luar sana banyak sekali website yang menyediakan fasilitas ini, selain yang berbayar ada juga yang gratisan. Dan Kang Rohman sebagai  peramal masa depan sudah tahu isi kepala anda, pasti ingin tahu yang gratisan bukan? o’o….. kamu ketauan… suka gratisan… karna dirimu sama dengan aku . Web penyedia kotak form secara gratisan antara lain http://www.emailmeform.com,http://kontactr.com, http://www.zoho.com dan banyak lagi yang lainnya.

Kontak form yang kang Rohman pergunakan adalah kontak form dari http://www.emailmeform.com, dan agar seragam maka tutorial yang akan kang rohman terangkan adalah tentunya dari web ini. Masih ingin lanjut? berikut adalah langkah-langkah membuat sebuah kontak form :

1. Silahkan kunjungi situs http://www.emailmeform.com.
2. Arahkan pandangan anda ke sebelah kanan atas monitor.
3. Klik pada tulisan Sign up for free.
4. Isilah form yang ada dengan data diri anda :
   
   
   First Name : » isi dengan nama depan anda. Misal : jaka.
   Last Name  : »  isi dengan nama belakang anda. Misal : tingkir.
   Username   : » isi dengan username yang di inginkan. Misal : jaka25.
   Password    : » isi dengan kata kunci yang di inginkan. Misal : juralitjungkel.
   Retype Password : » isi dengan kata kunci yang tadi di isikan. Misal : juralitjungkel.
   Your Email  : » isi dengan alamat email anda. Misal : jakatingkir25@yahoo.com.
   
   
5. Klik tombol Sign up.
6. Setelah muncul tulisan terima kasih, silahkan cek email yang tadi di masukan oleh anda untuk memeriksa email verifikasi.
7. Buka email kiriman dari EmailMeForm yang bertajuk Your new account information.
8. klik link yang di berikan di email tersebut atau kalau tidak bisa, copy alamat URL tersebut lalu paste di address bar browser internet anda untuk melakukan verifikasi bahwa email yang tadi di masukan adalah benar-benar milik anda.
9. Setelah proses verifikasi selesai, silahkan klik tulisan click here untuk menuju halaman akun kontrol panel anda.
10. Alihkan perhatian anda ke sebelah kanan monitor. Klik tulisan Create new form.
11. Ada beberapa form yang perlu di sisi :
    
    
    Web form Name : » isi dengan nama yang anda inginkan, atau biarkan saja (di sana sudah tertera Contact Webmaster).
    Recipients Emails : » isi dengan alamat email yang akan menerima pesan.
    Spam Email address : » isi dengan alamat email yang di inginkan untuk menerima pesan spam (email sampah, email iseng doank, email iklan, dll) atau kosongkan saja bila tidak mau menerima pesan email spam.
    Thank you page : » isi dengan alamat URL yang memuat tulisan terima kasih, contoh postingan yang ini. Atau jika bingung, tulis saja alamat blog anda.
    Number of fields : » biarkan 4 saja.
    
    
12. Klik tombol next yang ada di sebelah kanan.
13. Ada beberapa field name yang bisa di ganti sesuai keinginan, misal : Your Name jadi Nama, Your Email Address jadi alamat Email, dst. Atau biarkan saja seperti itu.
14. Klik tombol next yang ada di sebelah kanan.
15. Klik tombol next lagi.
16. Silahkan isi dengan keinginan anda ( hehehe… cape kalau nerangin yang ini) atau biarkan saja seperti itu.
17. Klik tombol next lagi.
18. Klik tombol next lagi.
19. Akan di perlihatkan contoh tampilan kontak form yang tadi di buat oleh anda.
20. Klik tombol Finish.
21. Klik tulisan Get the HTML codes.
22. Copy kode yang ada di text area, di bawah tulisan Copy and paste this HTML code into your page. Lalu paste pada notepad atau text editor lainnya.
23. Selesai.

Untuk membuat sebuah halaman kontak kami, anda tinggal membuat sebuah postingan seperti biasa. Untuk memasukan kode yang tadi di dapat dari EmailMeForm, anda pindah dulu dari menu compose ke Edit HTMLlalu paste di situ. publish dech. Beres.

Selamat berbingung ria bagi yang masih bingung.

Membuat Read More Plus Judul Artikel

Semenjak kang Rohman mengganti template dengan yang baru, ada sedikit yang berbeda dari sebelumnya. Apaan tuh? yang beda adalah kang Rohman menambahkan sedikit variasi pada link Baca selengkapnya ( Read more ) menjadi Lanjut membaca plus “Judul Artikel”. Variasi ini terinspirasi dari blog milik mas eko. Walaupun notabene blog mas eko menggunakan mesin wordpress, kang Rohman mempunyai pemikiran bahwa hal itu bisa juga di lakukan pada mesin blogger yang Kang Rohman gunakan. Setelah melakukan sedikit percobaan, akhirnya berhasil juga deh…. hehehe… seneng aku.

Rupanya ada dari pembaca blog ini yang ingin tahu tentang trik tersebut. Oleh karena itu pada posting kali ini, Kang Rohman mencoba untuk menuliskannya, walaupun setelah melakukan blog walking ternyata ada dari teman-teman blogger lainnya yang telah memposting trik ini terlebih dahulu, ah biarin saja itung-itung nambahin keyword buat mbah google..hihihi.

Perlu anda ketahui terlebih dahulu bahwa trik ini khusus di tujukan bagi anda yang telah menggunakan trik Read more seperti postingan Kang Rohman yang di sini. Jika pada postingan tersebut, kode read more yang di pasang adalah seperti ini :

<b:if cond='data:blog.pageType == "item"'>

<style>.fullpost{display:inline;}</style>

<p><data:post.body/></p>

<b:else/>

<style>.fullpost{display:none;}</style>

<p><data:post.body/>

<a expr:href='data:post.url'><strong>Selengkapnya...</strong></a></p>

</b:if>

Maka anda perlu mengubahnya menjadi seperti ini :

<b:if cond='data:blog.pageType == "item"'>

<style>.fullpost{display:inline;}</style>

<p><data:post.body/></p>

<b:else/>

<style>.fullpost{display:none;}</style>

<p><data:post.body/></p>

<strong><a expr:href='data:post.url'>Lanjut membaca   &#8220;<data:post.title/>&#8221; &#160;&#187;&#187; </a></strong>

</b:if>

Jangan lupa untuk menekan tombol SIMPAN TEMPLATE untuk mengakhirinya. Mudah sekali bukan?

Pasang Game Di Blog

Kemarin ada yang rikues minta di buatkan tutorial cara Pasang Game di blog, dan sepertinya tutorial yang akan di tulis tidak terlalu sulit, maka langsung saya buatkan saja. 

Sebagai catatan kecil saja, memasang game di blog memang menyenangkan bagi sebagian orang, namun hal ini akan mengakibatkan loading blog anda akan sedikit berat. Jadi silahkan dipikir dulu baik dan buruknya.

Untuk memasang Widget game, anda bisa mendapatkannya secara gratis di internet, silahkan lakukan googling saja. Sebagai contoh, salah satu penyedia layanan ini adalah http://www.khemer.com. Contoh game yang bisa di pasang adalah seperti ini :

Caranya menginstall nya seperti ini : 

Untuk template Baru : 

Langkah #1 :

1. Silahkan kunjungi http://www.khemer.com.



2. Silahkan lihat dan coba game-game yang ada dengan cara meng klik pada judul game.



3. Setelah menemukan game yang di rasa cocok, perhatikan ke bagian bawah.



4. Copy kode yang ada pada text area, lalu paste pada notpad atau text editor lainnya, kemudian save dulu di komputer.



5. Sekarang anda mempunyai kode game untuk di pasang di blog.



6. Silahkan close halaman browser anda jika di rasa cukup.

Langkah #2 : 

1. Sign in di blogger dengan ID anda.
2. Klik Layout.
3. Klik tab Elemen Halaman.
4. Klik Tambahkan sebuah Elemen Halaman.
5. Klik tombol TAMBAHKAN KE BLOG di bawah tulisan HTML/JavaScript.
6. Copy kode game yang tadi di dapat, lalu paste pada pop up window yang muncul.
7. Klik tombol SIMPAN PERUBAHAN.
8. Pindahkan elemen yang baru anda buat tadi pada tempat yang di di rasa cocok.
9. Klik tombol SIMPAN yang ada di sebelah atas.
10. Selesai. Silahkan lihat hasilnya!

Untuk template Klasik : 

1. Sign in di blogger dengan ID anda.
2. Klik Layout.
3. Klik tab Edit HML.
4. Copy seluruh kode template anda, kemudian paste pada notepad. Silahkan di save dulu untuk backup (sangat penting).
5. Copy kode game yang tadi di dapat, lalu paste pada tempat yang dinginkan.
6. Klik tombol Simpan Perubahan Template.
7. Selesai. Silahkan lihat hasilnya!

Gampang bukan? Selamat mencoba ! 

Buat Daftar Isi Blog

Apakah sobat suka membaca buku? jawaban sobat tentunya akan beragam, ada yang akan menjawab suka dan ada juga yang akan menjawab tidak suka. Namun saya yakin sobat pernah membaca sebuah buku. Dalam sebuah buku ada satu bagian yang dinamakan daftar isi, dengan adanya daftar isi buku maka akan mempermudah pembaca buku tersebut untuk menemukan bagian-bagian isi buku yang ingin di baca. Pertanyaan yang mungkin muncul adalah apa hubungannya antara buku dengan blog? tak hanya sebuah buku yang bisa memuat daftar isi untuk mempermudah para pembacanya, didalam sebuah blog pun kita bisa melakukannya, contoh yang bisa dilihat adalah saya memuat judul-judul artikel yang pernah saya posting di bagian footer halaman ini ataupun ketika sobat membuka keluruhan artikel yang mau di baca maka di akhir artikel akan muncul sederet judul-judul artikel lainnya yang menggoda sobat untuk membacanya. Selain untuk menggoda pengunjung agar lebih berlama-lama di blog kita, cara ini pun akan sangat mempermudah para pembaca untuk menemukan artikel yang di rasa menarik untuk di baca. Akan tetapi cara tersebut saya lakukan secara manual yakni saya mencatat seluruh alamat artikel yang telah saya posting kemudian membuatkan link ke artikel tersebut.

Teknik pembuatan daftar isi di atas bisa saja kita lakukan, akan tetapi tentunya perlu waktu yang lama untuk mebuatnya dan tentunya akan menyita waktu kita. Nah... yang ingin saya terangkan saat ini adalah bagaimana cara membuat sebuah Daftar isi blog secara otomatis. Yupppsss.. dengan hanya sekali kita membuatnya maka daftar isi tidak usah di buat berulang-ulang namun terus bekerja secara otomatis, teknik ini di perkenalkan oleh hans yang di muat melalui blognya beautiful beta. Agar tidak bingung tentang daftar isi blog yang akan saya terangkan, silahkan alihkan perhatian sobat ke bagian sebelah kanan atas blog ini, di sana terdapat link brtuliskan Lihat Daftar Isi, jika sobat meng klik link tersebut maka secara otomatis akan di perlihatkan seluruh judul artikel yang pernah saya posting lengkap dengan tanggal serta kategori dari artikel tersebut. Sunguh menarik bukan? jika sobat ingin melihatnya sobat bisa mengkliknya dan jika sobat tidak ingin melihatnya sobat tinggal mengkliknya kembali dan daftar isi pun akan di sembunyikan sehingga tidak akan menggangu pemandangan. Tertarik untuk membuatnya? silahkan ikuti langkah-langkah berikut : 

Langkah pertama : 

1. Sign in di blogger



2. Klik menu Layout



3. Klik menu Edit HTML



4. Klik link Download full template, silahkan save untuk backup data



5. Copy paste kode CSS berikut di atas kode ]]></b:skin>







6. Klik tombol SIMPAN TEMPLATE

Langkah kedua : 

1. Klik menu Elemen Halaman



2. Klik tulisan Tambah sebuah Elemen Halaman



3. Klik tombol TAMBAHKAN KE BLOG di bawah tulisan JavaScript/HTML



4. Copy paste kode berikut ke dalam elemen yang muncul






5. Klik tombol Simpan



6. Pindahkan elemen yang baru di buat tepat di atas elemen Post



7. Klik tombol Simpan yang berada di sebelah atas



8. Klik tulisan Tambah sebuah Elemen Halaman kembali



9. Klik tombol TAMBAHKAN KE BLOG di bawah tulisan JavaScript/HTML



10. Beri judul elemen tersebut dengan yang kata yang sobat ke hendaki. Contoh : DAFTAR ISI, kemudian copy paste kode berikut ke dalam kotak elemen







11. Ganti tulisan YOURBLOG dengan nama blog sobat



12. Klik tombol Simpan



13. Pindahkan elemen yang baru di buat ke tempat yang sobat sukai (sebaiknya di simpan disebelah atas)



14. Klik tombol SIMPAN yang berada di sebelah atas



15. Selesai

Kode yang terakhir di pasang merupakan kode asli yang di buat oleh hans dan tentunya semua hasil dari kode tersebut berbahasa inggris, baik itu judul , alert dan segala macamnya adalah berbahasa inggris, jika sobat menginginkan jadi berbahasa indonesia, saya sudah memodifikasi javascrips nya sehingga akan menjadi berbahsa indonesia seperti milik saya. Cara yang harus di lakukan sangatlah mudah, sobat tinggal mengganti kode terakhir yang di pasang dengan kode di bawah ini : 

Jangan lupa untuk mengganti tulisan YOURBLOG dengan nama blog sobat. 

Selamat mencoba ! 

Eh... yang mau dapet menu navigasi buat di header yang cantik, kunjungi aja http://css-lybrary.blogspot.com

Menu Dropdown Dengan JavaScript

Bagi sobat yang suka akan pernak-pernik blog, ada kabar baik nih. Pada kesempatan kali ini saya akan membahas tentang cara membuat menu Dropdown menggunakan JavaScript. 

Biar agak seru, silahkan klik tombol di bawah untuk melihat demo : 


 


Caranya silahkan arahkan mouse sobat ke deretan menu yang ada pada halaman demo lalu klik untuk membuka submenu yang ada di dalamnya dan untuk menutupnya kembali sobat klik sekali lagi ke menu yang ingin di tutup, silahkan mencoba : 

Bagaimana sudah di coba belum? kalau belum, coba dulu deh biar agak seru pembahasannya! Nah kalau sudah, bagaimana tanggapannya, seru tidak? kalau seru silahkan sobat baca artikel ini sampai tuntas (kaya adu banteng aja pake acara seru apa kagak), nah kalau sekiranya tidak seru, ya mending cari topik lain biar semangat bacanya. 

Oke biar tidak terlalu ngelantur, kita langsung ke topik bahasan. Untuk membuat menu seperti di atas, kita perlu memasang kode JavaScript serta stylesheet CSS pada template blog kita, akan tetapi karena di blogger terdapat dua pemakaian template yaitu template klasik dan template baru, maka tentu saja dalam membuat menu dropdown tersebut caranya berbeda pula. Oleh karena itu, pembahasannya pun akan saya bagi dua juga yaitu untuk template klasik serta untuk template baru. Akan tetapi karena pembahasannya terlalu panjang, maka kali ini akan saya bahas untuk template baru saja, dan untuk template klasik akan saya bahas pada postingan berikutnya. 

Untuk membuatnya silahkan ikuti langkah-langkah berikut ini : 

Langkah pertama yaitu membuat dua buah tombol untuk background dari tulisan menu, sebaiknya warna ataupun style nya di bedakan, ini dimaksudkan agar antara menu utama dengan sub menu akan terlihat perbedaannya. sebagai contoh lihat gambar tombol di bawah ini :

 

 

Langkah kedua adalah menyimpan file gambar tombol tersebut pada hosting untuk menyimpan gambar, bisa di blogger sendiri atau dengan hosting lain. Agar lebih terarah, saya ambil contoh menggunakan hosting lain yaitu www.photobucket.com. Untuk cara upload gambar ke situs ini sudah saya terangkan pada postinganterdahulu, jika ingin baca - baca lagi silahkan klik di sini. Saya ambil contoh kedua tombol tadi sudah saya upload dan mempunyai URL address sebagai berikut : 

http://i162.photobucket.com/albums/t253/rohman24/tombol_03.gif 

http://i162.photobucket.com/albums/t253/rohman24/tombol_06.gif

Langkah ketiga adalah memasukan kode JavaScript serta stylesheet CSS pada kode template blog, silahkan ikuti langkah-langkahnya :

1. Sign in di blogger.com dengan id sobat


2. Klik menu LayOut


3. Klik menu Edit HTML


4. Klik tulisan Download Full Template, lalu save data tersebut. Ini untuk berjaga-jaga apabila terjadi kesalahan dalam mengedit kode template


5. Klik kotak kecil di samping tulisan Expand Widget Templates untuk memberi tanda centang. Sekali lagi jangan lupa klik kotak kecil di samping tulisan Expand Widget Templates


6. Tunggu beberapa saat sampai proses selesai


7. Simpan kode berikut di bawah kode <title><data:blog.pageTitle/></title>



<script> 
var last_expanded = ''; 
function showHide(id) 
{ 
var obj = document.getElementById(id); 
var status = obj.className; 
if (status == 'hide') { 
if (last_expanded != '') { 
var last_obj = document.getElementById(last_expanded); 
last_obj.className = 'hide'; 
} 
obj.className = 'show'; 
last_expanded = id; 
} else { 
obj.className = 'hide'; 
} 
} 

</script> 



8. Masukan kode berikut di dalam stylesheet CSS, atau untuk lebih mudah silahkan cari kode ]]></b:skin>, lalu simpan kode berkut di atasnya



.ogah{
background-image:url('http://i162.photobucket.com/albums/t253/rohman24/tombol_03.gif');
text-align:center;
width:90%;
font-family: georgia, Helvetica, sans-serif;
padding-left:20px;
padding-right:20px;
padding-top:10px;
padding-bottom: 10px;
display:block;
text-decoration: none;
color: #000000;
height: 20px;
}

.ogahniye{
background-image: url('http://i162.photobucket.com/albums/t253/rohman24/tombol_06.gif');
text-align:center;
width:90%;
font-family: georgia, Helvetica, sans-serif;
padding-left:20px;
padding-right:20px;
padding-top:13px;
padding-bottom: 10px;
display:block;
text-decoration: none;
color: #000000;
height: 20px;
}

.hide{
display: none;
}

.show{
display: block;
}


a{cursor: hand} 



9. Klik tombol SAVE TEMPLATE


Sedikit unek-unek, kode-kode diatas tentunya tidak seratus persen mutlak harus begitu, tapi bisa di sesuaikan dengan kondisi blog sobat.Contoh : width:90%; --> angka "90" artinya lebar dari gambar yang akan tampil sebesar 90%, nilai ini bisa diganti dan di sesuaikan dengan blog sobat, misal di ganti menjadi "80" atau berapa saja. 



10. Klik menu Page Elements


11. Klik tulisan Add a Page Element



12. Klik tulisan ADD TO BLOG di bawah tulisan HTML/JavaScript


13. Masukan kode berikut :


<a class="ogah" onclick="showHide('ogahku1')">Menu utama 1</a>
<div id="ogahku1" class="hide">
<a href="#" class="ogahniye">Link 1 di sini</a>>
<a href="#" class="ogahniye">Link 2 di sini</a>
<a href="#" class="ogahniye">Link 3 di sini</a>
<a href="#" class="ogahniye">Link 4 di sini</a>
</div>
<a class="ogah" onclick="showHide('ogahku2')">Menu utama 2 </a>
<div id="ogahku2" class="hide">
<a href="#" class="ogahniye">Link 1 di sini</a>
<a href="#" class="ogahniye">Link 2 di sini</a>
<a href="#" class="ogahniye">Link 3 di sini</a>
<a href="#" class="ogahniye">Link 4 di sini</a>
</div>
<a class="ogah" onclick="showHide('ogahku3')">Menu utama 3 </a>
<div id="ogahku3" class="hide">
<a href="#" class="ogahniye">Link 1 di sini</a>
<a href="#" class="ogahniye">Link 2 di sini</a>
<a href="#" class="ogahniye">Link 3 di sini</a>
<a href="#" class="ogahniye">Link 4 di sini</a>
</div>
<a class="ogah" onclick="showHide('ogahku4')">Menu utama 4 </a>
<div id="ogahku4" class="hide">
<a href="#" class="ogahniye">Link 1 di sini</a>
<a href="#" class="ogahniye">Link 2 di sini</a>
<a href="#" class="ogahniye">Link 3 di sini</a>
<a href="#" class="ogahniye">Link 4 di sini</a>
</div>


14. Klik tombol SAVE CHANGES


15. Klik pada element yang baru di buat, tahan lalu pindahkan di tempat yang di sukai ( di drag & drop )


16. Klik tombol SAVE


17. Selesai

Keterangan : pada kode diatas ada tanda pagar (#), tanda itu harus di ganti dengan URL yang mau di pasang. 


Jika di lihat dari reaksi menu ini yang bersifat membuka dan menekan isi yang ada di bawahnya, maka menu ini hanya cocok di simpan pada sidebar dan tidak cocok apabila di simpan pada header. 


Mudah-mudahan dapat di mengerti. Selamat mencoba !