Senin, 21 Mei 2012

Cara Membuat dan Memasang Contact Us di Blog



 Cara Membuat dan Memasang Contact Us di Blog - Kali ini saya akan menerangkan secara detail tentang cara membuat dan memasang contact us di blog, termasuk blogspot dan wordpress. kita akan menggunakan bantuan dari situs pembuat kode html contact form.

Silahkan sobat ikuti langkah-langkahnya Cara Membuat Contact Us:
1. Siapkan email sobat untuk proses Registrasi atau pendaftaran.
2. Kunjungi situs pembuat kode Html Contact Us di http://123contactform.com dan ingat sobat pilihlah yang free atau gartis, klik >> "SIGN UP FOR FREE", pilih >> "Basic" lalu klik >> "Sign Up". Kalau ada $$ lebih bagus lagi pilih yang berbayar, karena fiturnya akan lebih lengkap.


3. Kemudian Create Account (membuat akun) atau Registrasi (pendaftaran):
  • Username = Masukkan dan buat Username Sobat.
  • Password = Masukkan dan buat Password sobat.
  • Confrim password = Masukkan Password yang sama.
  • Email = Masukkan Email sobat, Email ini yang akan menerima verifikasi dan Pesan dalam Form Contact Us sobat.

4. Setelah sobat melakukan Registrasi atau pendaftaran, silahkan sobat cek email untuk verifikasi Registrasi atau pendaftaran.
5. Login atau masuk akun menggunakan Username dan Password yang sobat buat tadi saat pendaftaran atau Registrasi. Lalu sobat pilih >> "creat new form" kemudian sobat pilih >> "contact form" setelah itu silahkan sobat kasih judul Formnya, seperti gambar Form Name (Contact Us) diatas.
6. Saat sobat sudah sampai langkah disini, silahkan sobat keluarkan kemampuan sobat untuk mendesain dan mengatur form Contact Us tersebut, bebas dan silahkan sobat mendesainya seperti yang sobat inginkan.
7. Langkah selanjutnya adalah apabila sobat sudah selesai mendesain form Contact Us tersebut, silahkan sobat klik >> "continue".
Lihat gambar berikut di bawah ini:


Keterangan:

  • No 1 adalah alamat Email yang akan menerima pesan apabila ada yang menghubungi sobat lewat form Contact Us tersebut, jadi silahkan sobat centang kotak kecil di sebelah email yang sobat daftarkan.
  • No 2 adalah pesan dari form Contact us sobat, yang akan tampil setelah pesan terkirim. (Your message has been sent. Thank you for filling out our form!) Sobat bisa menggantinya sesuai dengan keinginan sobat, contoh "Terima kasih ya Sobat, sudah menghubungi kami" atau yang lainya. kemudian klik >> "save".
  • Kalau sudah, langkah selanjutnya sobat bisa klik >> "continue" atau menuju no 3 >> "Publish Form" di bagian kanan atas.


Cara Memasang Form Contact Us di Blog:

  • Sekarang sobat tinggal pilih form tersebut ingin di pasang di blog di bagian yang mana. Silahkan di pilih sesuai yang sobat inginkan.
  • Karena banyaknya pilihan kode yang di suguhkan, Maka saya sarankan sobat pilih kode untuk Blogger atau Wordpress pada pilihan menu di samping kiri.




  • Langkah yang selanjutnya silahkan sobat copy semua kodenya dan paste di halaman contact us sobat. Bisa di pasang di Postingan atau juga di pasang pada Sidebar Blog.
  • Ingat sobat.!!! Tempel (taruh) atau paste kodenya pada mode HTML/java script, lalu simpan.
  • Selesai dan lihat hasilnya. Semoga sangat bermanfaat untuk sobat KUCOPAS semua.



KODE WARNA HTML

 Kode Warna Html - Cara membuat dan mengetahui warna atau kode warna Html caranya sangat mudah, Kali ini kita akan menggunakan Generator kode warna Html, karena generator ini bisa mempermudah kita untuk mengetahui berbagai macam kode warna Html dan cara menggunakanya juga sangat mudah, silahkan sobat ikuti terus cara-cara untuk menggunakan generator kode warna Html ini.

 Sedikit penjelasan untuk sobat semua, Code Color Html Generator ini sangat di perlukan banget saat kita akan mendesain suatu halaman website atau blog. Dalam mendesain website atau blog, yang pasti kita tidak akan terlepas dari gradiasi atau pemilihan warna yang tepat untuk blog atau website kita. Maka untuk itu kita perlu mengetahui berbagai macam jenis warna tersebut dalam HTML atau lebih tepatnya sering di sebut dengan kode warna HTML.


 Oke sobat, karena kebutuhan untuk mengetahui berbagai macam kode warna Html tersebut, saya sediakan untuk sobat semuanya, Generator kode warna HTML di bawah berikut ini:





keterangan:

  1. Kotak Brightness/Saturation adalah pengaturan warna yang bisa sobat geser sesuai yang sobat inginkan.
  2. Hue adalah mirip seperti Volume warna.
  3. Swatch adalah warna yang terpilih.
  4. Hex adalah Kode warna Html.
sobat bisa coba ganti dengan kode warna html yang lain, dan hasilnya bisa sobat lihat pada kotak Swatch untuk kode yang sobat ganti tadi.

 Selamat berkreasi untuk menghasilkan warna yang sobat inginkan dan jadikan semua jadi berwarna, Semoga bermanfaat untuk sobat KUCOPAS semua.



Cara Membuat dan Memasang Buku Tamu Yang Privasi di Blog

 Cara Membuat dan Memasang Buku Tamu Yang Privasi di Blog - Setelah lama tidak update posting, kali ini saya akan share artikel  tentang  Cara Membuat dan Memasang Buku Tamu Yang Privasi di Blog , dan kita akan membuatnya di Iboox.com.

Fungsi dari Buku Tamu Yang Privasi ini adalah hanya admin yang akan tahu isi dari pesan dalam buku tamu tersebut dan tidak ada orang lain yang akan tahu, karena untuk membuka isi pesan yang ada dalam buku tamu ini kita harus menggunakan Email atau ID dan password yang kita daftarkan pada buku tamu tersebut.

Tampilan dalam buku tamu ini sangat mudah di pahami dan sedap untuk dipandang. Sobat pun bisa mengatur tampilannya seperti yang sobat inginkan.

 Mungkin sobat juga pernah menemukan dan merasa sangat jengkel saat buku tamu di blog sobat di penuhi dengan isi pesan spam yang bersifat menjatuhkan, dan tentu saja tanpa sebab dan alasan yang jelas kenapa pelaku spammer tersebut melakukan aksinya di dalam buku tamu blog kita.

 Buku tamu yang pada umumnya seperti Shoutmix, Cbox atau Teriaklah yang gratisan sekalipun tidak menyediakan pengaturan agar bisa digunakan secara privasi dimana pesan hanya bisa dlihat dan dibaca oleh si Admin buku tamu tersebut.

Dan kali ini ada layanan buku tamu gratis yang bisa diandalkan untuk menghindari sikap dan aksi sentimental dari para pelaku Spammer. Tentunya kita tidak perlu membayar hosting dan domain untuk membuat buku tamu yang gratis jenis ini.

Saya yakin buku tamu ini juga cocok sekali diletakkan pada situs yang dioptimasi untuk earning seperti Google adsense atau sponsor yang lainnya.

Berikut Cara Membuat Buku Tamu Yang Privasi di Iboox.com:
1. Silahkan sobat masuk di Iboox.com dan melakukan registrasi atau pendaftarn.
Catatan
Sobat hanya perlu membuat akun seperti membuat akun untuk layanan-layanan buku tamu seperti yang lainnya.

2. Setelah akun sobat sudah jadi, Segera konfirmasi email pendaftarannya yang telah dikirimkan ke email sobat dan selanjutnya sobat sudah bisa login atau masuk menuju halaman control panel di Iboox.com.

Secara default buku tamu ini hampir sama dengan buku tamu yang lainnya, yaitu semua isi pesannya juga dapat dilihat oleh siapapun yang mengunjungi blog kita.
Berikut langkah-langkahnya agar isi pesan dalam buku tamu hanya dapat di lihat oleh sobat  pemilik akun:
Silhkan sobat klik menu >> "Configuration" pada sidebar sebelah kiri halaman.
Kemudian sobat menuju menu >> "Moderation" dan jangan lupa sobat centang opsi >> "Moderated Guestbook".

Cara Memasang Buku Tamu Iboox.com di Blog:
Langkah selanjutnya sekarang sobat tinggal memasang dan meletakkannya pada blog, Berhubung buku tamu pada Iboox.com hanya menyediakan link, maka sobat harus meng-Embed atau membuat <iframe> secara manual.
Berikut caranya sobat:

  • Silahkan sobat ambil atau copy id angka unik yang menjadi link buku tamu sobat, lihat pada contoh gambar yang dilingkari warna hijau dibawah ini.



Lalu sobat sisipkan atau taruh ke dalam kode di bawah ini:
<iframe align="left" frameborder="1" src="http://Angka / Id.iboox.com/" width="100%" height="600" scrolling="auto"></iframe>

Keterangan:
Sobat ganti Angka / Id.iboox.com dengan Id sobat seperti contoh gambar diatas yang saya lingkari.
Kemudian letakkan kode tersebut dimanapun sobat inginkan di blog sobat.
Sobat bisa mengatur sendiri semua opsi yang ada melalui halaman control panel, mulai dari font, warna, ukuran, smile dan lain-lain, agar sesuai dengan keinginan sobat.
Selesai dan semoga bermanfaat untuk sobat KUCOPAS semua.


Mengganti "Older Posts" Dengan Angka

Secara umum, navigasi untuk pindah halaman di blogspot biasanya menggunakan link dengan teks "Older Posts (posting lama)" dan "Newer Posts (posting baru)". Beda dengan wordpress yang navigasinya bisa berbentuk angka sehingga bisa memudahkan untuk loncat beberapa halaman ke postingan yg lama maupun baru.
Nha trik kali ini akan menjelaskan bagaimana cara mengganti link "Older Posts (posting lama)" dan "Newer Posts (posting baru)" menjadi angka seperti gambar di bawah ini


1. Langkah awal tentu saja harus menuju ke desain template anda kemudian ke "Edit HTML"
2. setelah itu cari kode ini ]]></b:skin> kalo sudah ketemu taruh script dibawah ini sebelum kode tersebut

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}



3. setelah itu cari kode ini </body> kemudian taruh script dibawah ini sebelum kode tersebut.

<!--Page Navigation Starts-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://bloggergadgets.googlecode.com/files/blogger_pagenavi_min.js' type='text/javascript'/>
</b:if> </b:if>
<!--Page Navigation Ends -->



Kalau sudah silahkan dilihat hasilnya.

Senin, 14 Mei 2012

Cara Mengubah Template Blogspot Menjadi SEO Friendly

SEO
Cara Mengubah Template Blogspot Menjadi SEO Friendly - Cara menjadikan / membuat / mengubah template blog / blogspot / web menjadi / lebih SEO friendly / mudah diindex oleh google / mesin pencari / search engine – Punya template yang SEO Friendly memang mengasyikkan. Kenapa? Karena kalau template blog kita sudah SEO Friendly, maka setiap post artikel yang kita posting akan mudah diindex oleh Google dan kawan-kawannya, sehingga blog kita akan punya banyak pengunjung. Tapi sayang, pada template default blogger strukur template nya kurang SEO Friendly, oleh karena itu kita perlu memodifikasinya sehingga akan menjadi SEO Friendly. Ohya, jangan-jangan sobat belum tau ya apa itu SEO Friendly? SEO Friendly artinya “ramah SEO”, artinya kalau template blog kita SEO Friendly, maka akan ramah dengan SEO dengan begitu akan disayang oleh si mbah Google dan cucu-cucunya, hehe.. Oke, langsung saja berikut langkah-langkah membuat template blogspot menjadi SEO Friendly:
>> Klik jika ingin membacanya.
2. Pasang Meta Tag Keyword dan Deskripsi di Blog
3. Memasang Kode Cannonical Link Element di Blog
Tujuan dari langkah ketiga ini adalah mencegah terjadinya duplicat content. Dikarenakan Google dkk sangat tidak menyukai adanya duplicat content, maka untuk menghindarinya kita bisa menambahkan kode Cannonical link element di template blog kita. Bagaimana sih contoh duplicat content itu? Perhatikan contoh dua url berikut yang sebenarnya sama tapi berbeda, berikut adalah contoh url post dan show comment:
http://namablog.blogspot.com/2011/4/judul-post.html
http://namablog.blogspot.com/2011/4/judul-post.html?ShowComment=12345678910

Contoh diatas akan mengakibatkan terjadinya duplicat title dan deskripsi. Nah, supaya Google tidak mengindex url yang kurang berguna (nomor 2), maka kita harus memberitahukan kepada Google agar mengindex url yang pertama saja, yaitu dengan menambahkan kode canoonical link element. Lantas bagaimana caranya? Mudah saja, tambahkan kode yang tercetak tebal berikut tepat di atas kode <b:skin><![CDATA[
<link expr:href='data:blog.url' rel='canonical'/> 
4. Memasang Navigasi Breadcrumb di Blog
5. Membuat Auto Readmore di Blog
6. Membuat Related Post atau Artikel Terkait
7. Mematikan Setting Archive
Menurut infromasi yang saya dapat, mematikan setting archive juga bertujuan untuk mencegah duplicat content. Berikut ini caranya:
Masuk ke dashbor blog sobat >> Setelan >> Arsip >> Frekuensi arsip >> Ubah menjadi tidak ada.
8.  Menambahkan berbagai meta tag contentdi atas tepat di atas kode <b:skin><![CDATA[
<meta content='1 day' name='revisit-after'/>
<meta content='all' name='audience'/>
<meta content='global' name='distribution'/>
<meta content='text/html; charset=UTF-8'   http-equiv='Content-Type'/>
<meta content='true' name='MSSmartTagsPreventParsing'/>
<meta content='blogger' name='generator'/>
<meta content='general' name='rating'/>
<meta content=' global' name='target'/>
<meta content='index, follow, snipet' name='googlebot'/>
<meta content='follow, all' name='Googlebot-Image'/>
<meta content='follow, all' name='Scooter'/>
<meta content='follow, all' name='msnbot'/>
<meta content='follow, all' name='alexabot'/>
<meta content='follow, all' name='Slurp'/>
<meta content='follow, all' name='ZyBorg'/>
<meta content='follow, all' name='Scooter'/>
<meta content='ALL' name='SPIDERS'/>
<meta content='ALL' name='WEBCRAWLERS'/>
Ket: Fungsi pemasangan berbagai jenis meta tag content ini adalah memudahkan search engine untuk mengindex blog kita dan menginformasikan kepada seacrh engine robot apa saja yang boleh memasuki blog kita. Meta tag content di atas sudah cukup lengkap dan sering digunakan oleh master blog.
9.  Simpan template blog sobat..!
Akhirnya, selesai juga kita mengubah template kita menjadi SEO Friendly. Oke, sekian tips dari saya mengenai cara menjadikan template blogspot menjadi SEO Friendly, apabila ada kata-kata yang kurang dipahami saya minta ma’af. Semoga saja dengan tips-tips diatas, blog sobat bisa lebih disayang oleh search engine dan meningkat pengunjungnya.

Share

Twitter Delicious Facebook Digg Stumbleupon Favorites More