Membuat Social Icon Keren Spesial Gratis

Lama gak sempet buat postingan baru soalnya sibuk banget gan. Nah kebetulan sekarang ada waktu jadi gw pengen share yang keren ni gan, pasti loe demen. Pada kesempatan kali ini gw pengen share bagaimana cara membuat social icon keren hanya dengan CSS gan. Kalo di postingan yang laen gw udah share cara membuat social icon mobil bergerak, yang ini beda lagi gan.

Contoh social iconnya seperti yang ada di blog ini, kalo di sentuh ada efek slidingnya gan. Cuma info aja social icon ini murni CSS gak pake gambar icon beneran gan. Social icon keren ini hasil karya gw sendiri, dan sempat pengen gw pake buat guest post di blog laen tapi gak jadi gan.

Kalo loe tertarik dengan social icon ini silahkan aja disimak langsung cara membuatnya gan. Cara buatnya gampang, tinggal nambahin widget aja di blog gan. Tanpa banyak basa-basi lagi, langsung kita praktekan aja gan.

Membuat Social Icon Keren Hanya Dengan CSS

• Pertama loe masuk ke Blogger lalu pilih Layout dan klik Add a Gadget terus tambahkan widget HTML/JavaScript gan. Lalu copy dan pastein kode yang gw kasi di bawah ini di widget baru itu gan.

• Kalo kalian mau pasang di Wordpress langkahnya sama, tinggal nambahin Text Widget ke sidebar blog Wordpressnya, dan copy paste kode dibawah ini gan.

<!-- Social Icon Keren Dengan CSS Efek Sliding by http://www.seociyus.blogspot.com/ -->

<style type="text/css">

/*start Facebook Icon*/
#SC a.sos1{
opacity:0.7;
margin:5px 5px 20px 20px;
padding:7px 5px 5px 5px;
background:#0282c2;
box-shadow:2px 2px 0 #ccc,3px 3px 0 #fff, 4px 5px 0 #ccc,5px 6px 0 #fff, 6px 8px 0 #ccc,7px 9px 0 #fff, 8px 11px 0 #0282c2,13px 11px 10px 1px rgba(0,0,0,0.5);
transform:matrix(0.866,0.1,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* IE 9 */
-moz-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* Firefox */
-webkit-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* Safari and Chrome */
-o-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* Opera */
text-transform: uppercase;
border-radius: 5px;
float:left;
text-decoration:none;
height:20px;
color: transparent;
font: 12px 'Arial black';
letter-spacing:1px;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7KGgGJHPhzpqPdRVBdx547208W75PSMLmc4zb8IRqTNyCHkvwUPfjYsdIKhtcO3Jh38H2OETUfP9h2AAuABzW7yxbvk5arr8qFwh93WtTyHpCxz5dd5BU1CdgmDwvKEAh8sMidFVLVBEl/s1600/Web-Facebook+icon.png');
background-repeat:no-repeat;
background-position:center;
background-size: 100% 100%;
}

#SC a.sos1:hover{
opacity:1;
box-shadow:2px 12px 0 #ccc,3px 13px 0 #fff, 4px 15px 0 #ccc,5px 16px 0 #fff, 6px 18px 0 #ccc,7px 19px 0 #fff, 8px 21px 0 #0282c2,13px 21px 10px 1px rgba(0,0,0,0.5),13px 5px 10px 1px rgba(0,0,0,0.2);
}
/*End Facebook Icons*/

/*Start Google+ Icons*/
#SC a.sos2{
opacity:0.7;
margin:5px;
padding:7px 5px 5px 5px;
background:#d44137;
box-shadow:2px 2px 0 #ccc,3px 3px 0 #fff, 4px 5px 0 #ccc,5px 6px 0 #fff, 6px 8px 0 #ccc,7px 9px 0 #fff, 8px 11px 0 #d44137,13px 11px 10px 1px rgba(0,0,0,0.5);
transform:matrix(0.866,0.1,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* IE 9 */
-moz-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* Firefox */
-webkit-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* Safari and Chrome */
-o-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* Opera */
text-transform: uppercase;
border-radius: 5px;
float:left;
text-decoration:none;
height:20px;
color: transparent;
font: 12px 'Arial black';
letter-spacing:1px;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb84ZrkLfDALVEFz7HCaoIV2yVgPUbXb4y_e3tqhkLm6ayYfWB_IV3JM71XQ1RV9YY03bLAg1K7fcRWvOkgD7RiKXzgVjxAPXXhyphenhyphenfmqTSaeyjRXLU9vLU36gQ1bJXSzLgmKtiuO7mvBtOX/s1600/Web-Google+icon.png');
background-repeat:no-repeat;
background-position:center;
background-size: 100% 100%;
}

#SC a.sos2:hover{
opacity:1;
box-shadow:2px 12px 0 #ccc,3px 13px 0 #fff, 4px 15px 0 #ccc,5px 16px 0 #fff, 6px 18px 0 #ccc,7px 19px 0 #fff, 8px 21px 0 #d44137,13px 21px 10px 1px rgba(0,0,0,0.5),13px 5px 10px 1px rgba(0,0,0,0.2);
}
/*End Google+ Icons*/

/*Start Twitter Icons*/
#SC a.sos3{
opacity:0.7;
margin:5px;
padding:7px 5px 5px 5px;
background:#63c8f7;
box-shadow:2px 2px 0 #ccc,3px 3px 0 #fff, 4px 5px 0 #ccc,5px 6px 0 #fff, 6px 8px 0 #ccc,7px 9px 0 #fff, 8px 11px 0 #63c8f7,13px 11px 10px 1px rgba(0,0,0,0.5);
transform:matrix(0.866,0.1,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* IE 9 */
-moz-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* Firefox */
-webkit-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* Safari and Chrome */
-o-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* Opera */
text-transform: uppercase;
border-radius: 5px;
float:left;
text-decoration:none;
height:20px;
color: transparent;
font: 12px 'Arial black';
letter-spacing:1px;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJfdGWFoWs9d5pOxnS7VIc51Ecv_XpFPUfFwIJ1NM9C8rXbcEZWljyFgsXjnjcYIYZR27gQG_DwY3S1Zi9RIoBwyrNNMGSl0ZI8qen3pmwLux0NAKklE7W2LEl1BmjZE9hKZ5hJGMKiDxZ/s1600/Web-Twitter+icon.png');
background-repeat:no-repeat;
background-position:center;
background-size: 100% 100%;
}

#SC a.sos3:hover{
opacity:1;
box-shadow:2px 12px 0 #ccc,3px 13px 0 #fff, 4px 15px 0 #ccc,5px 16px 0 #fff, 6px 18px 0 #ccc,7px 19px 0 #fff, 8px 21px 0 #63c8f7,13px 21px 10px 1px rgba(0,0,0,0.5),13px 5px 10px 1px rgba(0,0,0,0.2);
}
/*End Twitter Icons*/

/*Start RSS Icons*/
#SC a.sos4{
opacity:0.7;
margin: 5px;
padding:7px 5px 5px 5px;
background:#fc9c14;
box-shadow:2px 2px 0 #ccc,3px 3px 0 #fff, 4px 5px 0 #ccc,5px 6px 0 #fff, 6px 8px 0 #ccc,7px 9px 0 #fff, 8px 11px 0 #fc9c14,13px 11px 10px 1px rgba(0,0,0,0.5);
transform:matrix(0.866,0.1,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* IE 9 */
-moz-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* Firefox */
-webkit-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* Safari and Chrome */
-o-transform:matrix(0.866,0.1,-0.5,0.866,0,0); /* Opera */
text-transform: uppercase;
border-radius: 5px;
float:left;
text-decoration:none;
height:20px;
color: transparent;
font: 12px 'Arial black';
letter-spacing:1px;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzrTqoxTsZ0kFyF0uBfCyTH5LcU-Yc78EABNCmwFQHautQ6i9CK6cvYUFP69RHLQA9JrjWjWchHBTO99qBCZeDwdKkkbJNFLzYZvn1tK8mkMYZR6kLrU9PYHggCcR1YADz9XGYKIq12g0s/s1600/Web-RSS+icon.png');
background-repeat:no-repeat;
background-position:center;
background-size: 100% 100%;
}

#SC a.sos4:hover{
opacity:1;
box-shadow:2px 12px 0 #ccc,3px 13px 0 #fff, 4px 15px 0 #ccc,5px 16px 0 #fff, 6px 18px 0 #ccc,7px 19px 0 #fff, 8px 21px 0 #fc9c14,13px 21px 10px 1px rgba(0,0,0,0.5),13px 5px 10px 1px rgba(0,0,0,0.2);
}
/*End RSS Icons*/
</style>

<center><div id="SC">
<a href="URL-FACEBOOK-PROFILE" class="sos1" rel="nofollow" target="_blank" title="Like us on Facebook">Icon</a>
<a href="URL-GOOGLE PLUS-PROFILE" class="sos2" rel="author" target="_blank" title="Follow us on Google+">Icon</a>
<a href="URL-TWITTER-PROFILE" class="sos3" rel="nofollow" target="_blank" title="Follow us on Twitter">Icon</a>
<a href="URL-RSS-FEED" class="sos4" rel="nofollow" target="_blank" title="Grab Our Rss Feed ">Icon</a>
</div></center><div align='right'><a href='http://seociyus.blogspot.com/2013/05/membuat-social-icon-keren-spesial-gratis.html' target='blank'><small>[Get This Icon]</small></a></div>

<!-- Jangan Dirubah-rubah Kodenya Nanti Tampilannya Gak Karuan Gan -->

• Sekarang tinggal ganti aja tulisan yang gw highlight dengan alamat akun sosial media dan rss feed blog loe, kalo udah beres tinggal di Save gan. Jangan dirubah-rubah kodenya dan juga ganti tulisan Icon karena bakal bikin tampilan social iconnya jadi berantakan gan.

Sekarang coba di buka blognya buat ngeliat hasil dari social icon kerennya gan.Cuma sekedar info kalo social icon keren ini gak suport di browser IE gan.


Note : Tolong jangan dihapus link ke postingan ini ya, kalo gak suka di isi nofollow aja gan.


Sekian dulu yang bisa gw share kali ini, semoga kalian suka dengan social icon keren CSS ini. Kalo ada masalah dalam membuat atau memasangnnya silahkan ditanyakan dan jangan lupa ninggalin sepatah dua patah kata di kotak komentar di bawah gan.

Cara Menggunakan Webmaster Tools Untuk Pemula

Kebetulan lagi sering buka Webmaster Tools makanya dapet ide buat postingan ini gan. Webmaster Tools ini alat yang disediain sama Google secara gratis untuk kita pemilik blog atau situs. Fungsi utamanya adalah untuk mengetahui laporan lengkap tentang blog atau situs kita. Mulai dari jumlah penayangan blog sampai masalah error yang terjadi di blog kita gan.

Untuk pemula mungkin akan sedikit kebingungan menggunakan Webmaster Tools ini. Sama gw juga dulu kagak ngerti sama tools ini, tapi seiring waktu sekarang udah bisa menggunakan Webmaster Tools ini gan. Buat loe yang masih belum mengerti cara menggunkan Webmaster Tools, kali ini gw bakal share caranya gan.

Webmaster tools ini kadangkala dilupakan oleh sebagian Blogger karena mungkin menganggap tools ini gak ada gunannya. Padahal peran tools ini lebih dari semua tools yang ada buat optimasi SEO. Jadi gw kasi tau jangan pernah anggep remeh Webmaster tools buat ngoptimalin blog loe gan. Lanjut aja ke topik utama bagaimana cara menggunankan Webmaster Tools ini dari cara mendaftar dan fungsi masing-masing toolsnya silahkan disimak gan.

Cara Menggunakan Webmaster Tools Untuk Pemula

Cara Mendaftarkan Blog ke Webmaster Tools

Untuk bisa menggunakan Webmaster Tools tentu loe harus punya akun Google. Kalau udah punya langsung aja login ke Google Webmaster Tools gan. Setelah login yang pertama loe lakuin adalah menambahkan blog atau situs loe gan. Caranya tinggal klik tombol warna merah di kanan atas TAMBAHKAN SITUS, lalu isi dengan URL blog loe dan klik Terus. Setelah itu loe bakal dibawa ke halaman verifikasi, disini pilih tab Metode Alternatif dan centang Tag HTML.

Abis itu loe copy kode meta HTML yang dikasi dan pastein ke template blog di bagian tag <head> gan. Kalau udah lalu klik tombol merah VERIFIKASI di Webmaster Tools dan liat hasilnya kalau berhasil maka blog loe bakal muncul di Dashboard Webmaster Tools gan. Beres gampang kan cara nambahin blog ke Webmaster Toolsnya gan. Sekarang lanjut ke cara menggunakannya gan.

Cara Menggunakan Webmaster Tools

Sudah daftar di Webmaster Tools sekarang kita cari tau cara menggunakannya gan. Di halaman awal Webmaster Tools loe pilih blog yang mau dikelola, diklik aja URLnya gan. Setelah masuk  loe bakal liat halaman Dasboard awal dari Webmaster Tools. Disana ada status pesan Baru dan Penting serta Status Saat Ini, gak usah kaget kalau Kueri Penelusuran sama Peta Situs masih kosong karena loe baru mendaftar gan.

Lanjut disisi kiri Webmaster Tools loe bakal nemuin banyak tab gan. Dibalik tab-tab tersebut loe bakal nemuin banyak Tool yang bisa digunain gan. Gw bakal jelasin yang penting-penting aja dan yang bakal sering loe pake biar gak terlalu panjang postingan gw, cek it dot gan.


1. Konfigurasi > Setelan >> Disini loe bisa ngerubah Target Geografis tinggal pilih aja negara yang jadi target blog loe gan.

2. Kesehatan > Ambil Sebagai Google >> Fungsi tools ini untuk proses pengindekan URL postingan lama atau pun baru gan. Bisa juga digunakan untuk memaksa Google agar cepat mengindex URL postingan lama yang baru di update. Caranya tinggal nambahin URL postingan ke kolom yang udah disediain lalu klik Ambil. Tunggu beberapa detik kalau berhasil tinggal klik Kirimkan ke index gan. Setelah itu loe submit URLnya ke Google melalui alamat ini https://www.google.com/webmasters/tools/submit-url gan.

3. Pengoptimalan > Peta Situs >> Ini alat yang sangat penting agar Googlebot bisa merayapi setiap halaman blog loe dengan baik gan. Cara nambahinnya tinggal klik tombol TAMBAHKAN/UJI PETA SITUS, lalu ketikan sitemap.xml ke dalam kotak kosongnya dan klik Mengirim Peta Situs gan. Beres tinggal ditunggu aja hasilnya, untuk berapa lama sitemap ini terindex tergantung dari kondisi kesehatan blog dan aktivitas update postingan di blog gan.

4. Pengoptimalan > Hapus URL >> Tools yang bisa digunakan untuk menghapus URL postingan kita dari pencarian Google gan. Tinggal masukin aja URL postingan yang mau dihapus dari pencarian Google. Sebelum menghapus URL loe harus baca aturannya dulu di https://support.google.com/webmasters/bin/answer.py?hl=en&answer=59819 gan.


Itulah tools penting yang akan sering kalian gunakan di Google Webmaster Tools gan. Masih ada juga beberapa tools penting yang fungsinya untuk menganalisa blog loe. Gw bakal jelasin beberapa aja sebagai berikut ini gan.


1. Kesehatan > Kesalahan Perayapan >> Disini loe bakal nemuin URL-URL di blog loe yang rusak atau tidak ditemukan gan. Kalau Google nemuin kesalahan perayapan, loe tinggal centang URLnya lalu klik TANDAI SEBAGAI TELAH DIPERBAIKI gan. Agar kedepanya Google gak ngindex lagi URL yang rusak tersebut.

2. Lalu Lintas > Kueri Penelusuran >> Disini bakal ditampilin grafik lengkap penelusuran blog loe di Google gan. Jadi loe bakal tau berapa jumlah kueri, penayang dan klik blog loe. Juga loe bisa menganalisa kata kunci apa aja yang paling banyak penayanganya sama posisi rata-rata di pencarian gan.

3. Lalu Lintas > Tautan ke Situs >> Disini loe bisa tau berapa jumlah backlink blog loe yang dihitung sama Google gan. Dan juga loe bakal tau dari mana aja asal backlink tersebut. Kalau gw gak salah Google ngupdate data backlink ini setiap hari Selasa gan.

Gw rasa itu aja yang perlu diperhatikan dalam menggunakan Webmaster Tools untuk pemula gan. Untuk fitur-fitur yang lainnya loe silahkan dicoba-coba sendiri dan gw yakin seiring waktu loe bakal lebih mengerti gan. Semoga postingan tentang cara menggunakan Webmaster Tools untuk pemula ini bermanfaat. Kalau ada yang gak ngerti silahkan ditanyakan dan jangan lupa ninggalin komentar ya gan.

Cara Share Postingan Otomatis Ke Sosial Media

Salah satu cara biar blog banyak yang mengunjungi adalah dengan share postingan kita ke sosial media gan. Banyak banget ada yang namanya sosial media, tapi yang umum dipake sama orang Indonesia cuma Facebook, Twitter dan Google+ ya kan gan? Nah ngomongin soal share postingan ke sosial media tentu kalian udah tau caranya, tinggal buka akun sosial media terus share link postingannya beres gan.

Tapi pasti ribet banget, kalau setiap buat postingan kita harus share satu-satu secara manual ke sosial media gan. Untuk itu pada kesempatan kali ini gw pengen ngasi tutorial cara share postingan otomatis ke sosial media gan. Jadi kita gak perlu ribet buka akun sosial media satu persatu cuma buat share postingan kita gan.

Ada banyak cara dan aplikasi yang bisa kita gunain buat share postingan secara otomatis gan. Kalau mau share otomatis ke Google+ udah disediain di dashboard Blogger fiturnya gan. Sedangkan share otomatis ke situs sosial media yang lain kita butuh alat bantu gan. Banyak banget alat bantu yang bisa kita pakai dari Feedburner, IFTTT, Buffer, Hootsuite dan lain-lain.

Yang bakal gw share kali ini adalah cara share postingan otomatis pake Hootsuite gan. Kenapa Hootsuite? karena alat ini populer, gampang buat pemula dan merupakan favorit gw gan. Langsung aja disimak cara share postingan otomoatis ke sosial media pake Hootsuite gan. Gw coba jelasin secara detail, semoga bisa dengan mudah dimengerti ya gan.

Cara Share Postingan Otomatis Ke Sosial Media ( Hootsuite )

Pertama kalian menuju ke situs Hootsuite lalu daftar gan. Cara daftarnya gampang bisa pake akun Facebook atau pake email gan. Tinggal di isi aja datanya yang lengkap terus klik Sign Up Now gan.

Kalau udah selesai daftar sekarang loe login ke Hootsuite gan. Di halaman awal dashboard hootsuite setelah loe login pilih Add Social Network gan. Disana ada 8 sosial media yang bisa loe pilih buat ditampilin di Hootsuite dan nanti buat share postingan otomatisnya juga gan. Misal loe pilih Twitter, langsung aja klik Connect with Twitter. Lalu bakal muncul halaman pop up login ke Twitter buat ngasi izin aplikasi Hootsuite terhubung sama akun Twitter loe gan. Login ke Twitter dan klik Authorize app gan.

Setelah berhasil ngizinin aplikasi Hootsuite terhubung sama akun sosial media, maka akan muncul tab baru gan. Silahkan di hubungkan akun sosial media lain yang loe punya ke Hootsuite dengan cara yang sama gan. Kalau udah beres menghubungkan semua akun sosial medianya sekarang kita lanjut menghubungkan Blog yang kita pengen share postingannya secara otomatis via Hootsuite gan.

Caranya di dashboard Hootsuite loe pilih Setting dan klik RSS/Atom atau bisa juga pilih Publisher lalu klik RSS Feeds gan. Setelah itu klik tanda + ( Add New Feed ), terus tinggal di isi datanya gan. Tambahin alamat feed blog loe, pilih akun sosial media yang mau dipake buar share postingan, pilih waktu ngeceknya, pilih jumlah postingan, kata-kata tambahan dan URL shortenernya kalau udah lengkap tinggal klik Save Feed aja gan.

Lakukan hal yang sama untuk nambahin feed ke akun sosial media yang laennya gan. Semua udah beres sekarang loe gak perlu repot-repot lagi share postingan ke sosial media karena semua udah secara otomatis di share melalui Hootsuite gan. Untuk fitur dari Hootsuite yang laennya silahkan dicoba-coba sendiri misal nambahin Aplikasi Blogger. Jadi nanti loe bisa buat postingan langsung dari Hootsuite gan.


Sekian dulu ulasan gw tentang cara share postingan otomatis ke sosial media via Hootsuite semoga bermanfaat gan. Kalau ada yang gak dimengerti silahkan ditanyakan dan jangan lupa berkomentar di bawah ya gan.

Tips Memulai Blogging Untuk Pemula Banget

Punya blog itu asyik karena kita bisa nulis sesuatu yang kita pikirkan dan membaginya ke jutaan orang melalui internet gan. Buat sebagian orang blogging itu hanya sebuah hobi ( gw banget ) dan buat sebagian lagi blogging itu merupakan sebuah pekerjaan bener gak gan? Untuk menjadi seorang blogger sebenernya gak susah-susah amat, yang penting punya ide buat bisa dituangkan menjadi sebuah karya tulis beres gan.

Buat loe yang mungkin baru ingin memulai blogging, kali ini gw punya sedikit tips. Tips ini semuanya dari pengalaman gw aja selama ngeblog gan. Yang namanya pemula wajar kalau gak begitu ngerti tentang dunia perbloggingan. Oleh sebab itu kita harus terus belajar dan belajar gan. Gw aja ampe sekarang masih terus belajar biar bisa jadi blogger yang profesional ( cita-cita ).

Dari ngeblog banyak keuntungan yang bisa kita dapet, diantaranya jadi punya banyak temen, menambah pengetahuan dan bisa menghasilkan duit juga gan. Kita langsung aja ke topik utama, berikut ini gw bakal share tips memulai blogging untuk pemula banget gan. Inget untuk pemula banget, kalau loe udah senior silahkan aja di baca-baca siapa tau berguna gan.

Tips Memulai Blogging Untuk Pemula Banget

Sebelum memulai blogging tentu harus punya blog, kalau belum punya ya buat dulu gan. Banyak platform blog gratis yang bisa loe pake misal Blogger, Wordpress, Tumblr, TypePad dan masih banyak lagi, silahkan dipilih sesuai selera aja gan. Kalau mau buat blog di Blogger bisa baca tutorialnya disini.

Kalau buat blog usahain namain blognya yang unik, menarik dan gak terlalu panjang. Misal pake nama loe aja gak masalah atau nama yang ada kaitannya sama topik blog yang bakal loe buat gan. Udah buat blog sekarang lanjut ke tips-tipsnya, cek it dot gan.

1. Tujuan Dan Topik

Tentuin apa tujuan loe blogging misal cuma buat fun, hobi, cari duit atau yang lainnya. Ini penting karena biar kedepannya loe bisa jadi seorang blogger yang jelas dan fokus gan. Maksudnya loe gak bakal berubah-rubah haluan dan ngikut-ngikutin orang laen. Kalau cuma ngikutin orang laen gak bakal sukses, karena setiap blogger punya kelebihan sendiri-sendiri gan.

Tujuan udah jelas sekarang tentuin topik blog loe gan. Sebaiknya topik blog sesuai sama hobi atau hal-hal yang loe sukai. Alasannya sederhana aja karena loe bakal lebih mudah dapet ide buat nulis postingan. Buat blogger ide menarik itu yang paling susah dicari gan. Selain itu kalau loe buat blog yang ada hubungannya sama hal-hal yang disukai, itu bakal bikin loe ngerasa lebih enjoy dan semangat ngelola blognya jadi bakal gak ada matinya gan.

2. Menulis Postingan

Udah punya blog dengan tujuan dan topik yang jelas, sekarang saatnya memulai menulis postingan gan. Sebelum mulai nulis, loe pasti pengen kelak postingan yang dibuat bakal dibaca banyak orang ya kan gan. Untuk itu loe perlu cari tau apa yang disukai dan menarik perhatian orang. Cara sederhana aja loe search di Google, ide menarik yang bakal loe tulis. Dari situ loe bakal tau berapa jumlah blog yang udah buat postingan tentang ide tersebut gan.

Manfaatin Google Keyword juga buat nyari tau jumlah orang yang mencari dan tingkat persaingan kata kunci gan. Ini penting karena sebagai pemula loe gak bakal bisa langsung ngalahin blogger-blogger senior dan nembus halaman depan Google semua butuh waktu gan. Jadi awalai dari yang tingkat persaingannya gak terlalu tinggi gan.

Buat postingan yang semenarik mungkin, usahain pake gambar kalau buat postingan karena " sebuah gambar lebih bermakna dari pada ribuan kata-kata " gan, memberi manfaat buat yang baca, bahasanya mudah dimengerti ( tulis sesuai gaya loe jangan ikut-ikutan orang ), jangan terlalu mikirin SEO ( gak penting buat pemula banget ), sering-sering update postingan biar blog loe di indexnya cepet sama Google juga bikin Alexa rank semakin bagus dan menulislah dengan tulus pasti hasilnya bakal maknyus gan.

Jangan pernah buat postingan yang gak sesuai dengan fakta alias nipu gan. Dan satu kesalahan seorang pemula biasanya seneng copas postingan orang laen, dengan tujuan biar isi postingan blog jadi banyak. Buat apa gan isi blog loe banyak tapi gak menarik dan cuma hasil copas?

Kunci sukses sebuah blog ada pada isi postingannya gan. Isi yang menarik selain disukai sama pengunjung juga bakal bikin postingan tersebut ada di halaman depan Google. Ini fakta bukan mimpi, silahkan dibuktikan sendiri gan.

3. Mencari Sesuatu ( Inspirasi )

Nyari sesuatu apaan ni gan? gini gan maksudnya mencari sesuatu itu loe sering-sering berkunjung ke blog orang laen istilah kerennya Blogwalking terutama blog-blog yang top, keren dan jumlah pengunjungnya banyak. Tujuannya ya buat mencari sesuatu yang berguna untuk kemajuan blog loe. Pertama amati gimana cara yang punya blog itu menyampaikan isi postingannya, terus desain blognya dan hal-hal menarik lainnya, yang kirannya nanti bisa jadi inspirasi dan diterapkan di blog loe gan.

Beda kalau loe udah senior gak perlu ngelakuin hal beginian sering-sering, karena orang laen yang bakal blogwalking ke blog loe gan. Coba aja loe cek mana ada blogger senior blogwalking kesana kemari terus ninggalin komen di blog orang laen, jarang banget kan. Bukannya mereka sombong tapi mereka udah punya pendirian dan fokus ke blognya sendiri gan.

Saat berkunjung ke blog orang laen kalau loe ngerasa dapet inspirasi, ada baiknya loe ninggalin komen gan. Buat komentar yang biasa aja gak pake ninggalin link-link segala, belajar jadi blogger yang punya tata krama biar loe dihargai sama temen-temen blogger yang laen gan. Boleh aja ninggalin link tapi jangan sering-sering dan jangan pake link hidup gan.

4. Target ( Rangking & Pengunjung )

Dalam membuat dan melakukan sesuatu tentu kalau punya target tinggi itu bagus banget gan. Disini sebagai seorang blogger pemula banget, saran gw jangan pasang target yang terlalu tinggi. Misal blog gw harus ada di urutan no 1 Google dan bisa ngalahin blognya si A, si B dll. Ini motivasi yang bagus sebenernya tapi loe juga harus sadar dan realistis kalau loe sebagai pemula butuh waktu untuk bisa mencapai itu semua gan.

Gak usah mikirin posisi di pencarian, tetep fokus buat postingan yang menarik dan kedepannya bakal di baca banyak orang. Dengan begini tanpa disadari apa yang menjadi harapan loe bakal tercapai dengan mudah gan. Jangan sering-sering ngecek posisi postingan di pencarian, karena kalau posisinya jelek bakal bikin semangat loe drop, biarin aja om Google bekerja membawa postingan loe ke posisi teratas dengan syarat isi postingan loe unik dan menarik gan.

Jangan juga terlalu mikirin jumlah pengunjung ke blog loe gan. Hal yang sangat wajar kalau blog baru jumlah pengunjungnya sedikit. Jadi gak usah dibawa stres kalau blog loe sepi, tetep semangat buat sesuatu yang menarik dan yakin sama apa yang loe buat. Dengan begitu tanpa loe sadari kedepannya pengunjung blog loe bakal meningkat dan semakin ramai gan. Gak ada yang mustahil di dunia perbloggingan gan.

5. Sosialisasi ( Promosi )

Ini salah satu hal yang paling penting buat ningkatin jumlah pengunjung dan popularitas blog loe gan. Mensosialisasikan blog loe melalui media sosial ke temen-temen atau orang-orang yang loe kenal gan. Jangan pernah merasa malu mempromosikan blog loe, PD aja sama hasil karya loe gan. Karena ini salah satu cara yang ampuh buat menarik perhatian pengunjung terutama buat blog pemula banget.

Beda kalau loe udah senior, gak perlu promosi pasti blog loe bakal banyak yang ngunjungin gan. Karena blog yang udah lama dan bagus udah punya pengunjung setia dan tetap gan. Juga para blogger senior punya trik masing-masing buat ningkatin jumlah pengunjungnya gan. Jadi buat pemula banget loe harus terus mempromosikan blog baru yang udah dibuat gan.

Tapi ada metode-metode promosi yang harus loe usahain untuk dihindari gan. Di antaranya submit postingan ke sosial bookmark, blog direktori dan artikel direktori. Alasannya karena banyak sosbook, blog direktori, maupun artikel direktori yang kualitasnya buruk gan. Jangan awali blog baru loe dengan hal-hal yang gak berkualitas gan. Mending loe join di forum buat nyari temen dan secara bertahap loe bisa mempromosikan blog loe, tapi jangan mengumbar link terutama link hidup dimana-mana gan.

6. Desain & SEO

Kenapa gw taruh desain dan SEO di bagian belakang? karena yang namamnya pemula kalau udah ngomongin desain sama SEO bakal lupa segalanya. Biasanya blogger pemula seneng banget ngutak-atik desain blognya, bahkan lebih fokus ngurusin desain dari pada buat postingan bener gak gan? Jadi usahain jangan terlalu mikirin desain blog, karena seiring dengan waktu loe bakal bisa bikin tampilan blog yang keren dan profesional gan.

SEO itu memang salah satu elemen penting biar blog yang loe buat bisa ada di halaman depan Google gan. Dimana-mana semua orang ngomongin SEO buat ningkatin rangking blog di mesin pencari. Tapi loe sebagai pemula ada baiknya jangan terlalu mikirin yang namanya SEO karena ini bisa bikin loe bingung gan. Jadi setiap mau buat postingan loe bakal kebayang-bayang yang namanya SEO.

Ini bisa bikin hasil postingan loe gak maksimal karena terlalu mikirin SEO, ngerasa serba salah dan terjebak dengan yang namanya SEO. Jujur ampe sekarang gw gak pernah terlalu mikirin SEO kalau buat postingan, yang gw pikirin cuma gimana postingan gw biar dibaca dan disukai banyak orang gan.

Tujuan utama kita nulis postingan untuk pengunjung bukan mesin pencari gan. Si om Google pun nyaranin kita buat ngelakuin hal ini gan. Untuk urusan SEO buat pemula sebaiknya lakuin hal-hal dasar aja misal memasang meta tag kalau pake Blogger, terus penempatan kata kunci di judul postingan dan submit blog loe ke Google Webmaster Tool sama tambahin Google Analystic di blog ( tutorialnya cari di Google ) gan. Seiring waktu loe bakal lebih mengerti dan memahami gimana SEO itu gan.

7. Belajar

Ini tips terakhir buat pemula banget yakni belajar gan. Kalau kita pengen pinter ya harus belajar bener kan gan. Jangan pernah takut buat belajar tentang hal-hal yang berkaitan dengan dunia blogging gan. Awali buat belajar hal-hal dasar tentang kode HTML, karena kode HTML merupakan elemen dasar sebuah blog terutama di Blogger. Jadi kedepannya loe bakal lebih mudah buat ngedit-ngedit blog gan.

Belajar juga hal-hal dasar tentang SEO lalu secara bertahap loe coba praktekan. Karena SEO itu harus dipraktekan buat ngetahui berhasil apa gak gan. Gw gak bakal bahas SEO terlalu jauh disini, loe bisa baca postingan gw tentang tips SEO untuk pemula gan.

Selain belajar kedua hal di atas loe juga harus belajar dari blogger laen gan. Jangan pernah malu buat bertanya, kalau emang gak enak nanya lewat kotak komentar loe bisa email yang punya blog. Semakin banyak loe belajar semakin bertambah kemampuan yang loe miliki gan.



Itulah tips-tips yang bisa dipertimbangkan buat memulai blogging untuk yang pemula banget gan. Sebelum gw akhiri ini ada beberapa tips sederhana tentang hal-hal yang harus loe hindari dalam blogging untuk pemula banget, berikut ini tipsnya gan :

• Hindari pakai widget yang berlebihan, selain bikin berat blog juga bikin tampilan blog gak karuan.
• Memoneytize blog, jangan terlalu banyak pasang banner iklan kalau bisa gak perlu pasang iklan dulu. Biarin blog loe umurnya agak lama dan pengunjungnya mulai rame baru pasang iklan gan. Sederhana aja, blog yang baru tentu gak punya nilai jual yang tinggi kalau di banding blog yg umurnya udah lama. Kalau mau dapet duit dari iklan harus sabar gan.
• Jangan menonaktifkan fitur komentar, karena loe sebagai blogger harus deket sama pengunjung blog. Tanpa mereka blog yang loe buat gak akan ada artinya gan.
• Tukeran link sama blog yang gak relevan, biasanya pemula seneng banget tukeran link dan ngerasa bangga kalau punya banyak link dari blog laen ya kan gan? Hati-hati ini melanggar aturan dari Google, kedepannya loe pasti bakal ngerti gan.

Sekian dulu yang bisa gw share kali ini, semoga bermanfaat buat kalian yang ingin memulai blogging terutama bagi pemula banget. Inget juga buat ninggalin komentar di bawah ya, gak usah malu-malu gan.

Kode Javascript Dan HTML Sederhana Buat Di Blog

Setiap blogger baik pemula maupun yang udah ahli pasti bakal nemuin kode Javascript dan HTML di dalam blognya bener gak gan. Karena kedua kode ini merupakan elemen dasar dalam membuat dan memperkeren blog kita terutama di Blogger.

Pada kesempatan kali ini gw pengen share beberapa kode Javascript dan HTML sederhana buat di blog. Mungkin kode-kode ini sederhana tapi bisa sangat berguna buat memperkeren blog gan. Jadi bisa di gunakan di blog kalian nantinya.

Silahkan langsung disimak kode-kode di bawah ini gan, siapa tau berguna buat kalian atau memang kalian lagi mencari kode-kode ini. Semoga kode-kodenya bemanfaat dan menambah pengetahuan kita tentang kode Javascript dan HTML.

Kode Javascript Dan HTML Sederhana Buat Di Blog

1. Anti Klik Kanan

Kode javascript ini buat menonaktifkan klik kanan di blog kalian gan, jadi pengunjung gak bisa klik kanan dan melihat source kode blog loe. Cari kode <body> di template blog kalian lalu ganti dengan kode dibawah ini gan.

<body oncontextmenu="return false;">

2. Kotak Pesan Peringatan ( Alert Box )

Pesan Pembuka

Kode ini buat nampilin pesan saat pengunjung pertama kali membuka atau mengunjungi blog kalian gan. Cari kode </head> di template blog, lalu copy paste kode di bawah ini tepat di bawahnya gan. Tinggal di edit aja kalimat yang di highlight sesuai keinginan kalian gan.

<script type="text/javascript">
 alert("SELAMAT DATANG DI BLOG GAK JELAS INI");
</script>

Pesan Penutup

Kode ini muncul kalau pengunjung mau meninggalkan atau menutup tab blog kalian gan. Cara pasangnya sama dengan pesan pembuka, cari kode </head> lalu copy paste kode berikut di bawahnya gan. Tinggal di edit aja kalimat yang di highlight sesuai keinginan kalian gan.

<script type="text/javascript">
window.onbeforeunload=function(){
return confirm("Yakin Ingin Meninggalkan Blog Ini?? Masih Banyak Yang Menarik Loh Untuk Di Baca!!");
}
</script>

3.Onmouseover Sound

Kode ini buat memberikan backsound musik kalau pengunjung mengarahkan atau mengklik mousenya ke text atau gambar gan. Caranya tinggal copy paste kode di bawah ini ke mode HTML edit post blog kalian.

<script language="javascript" type="text/javascript">
 function playSound(soundfile) {
 document.getElementById("SCsound").innerHTML=
 "<embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";
 }
 </script>

<span id="SCsound"></span>

Lalu copy dan paste kode di bawah ini buat ngemunculin musik/soundnya gan.

<a href="#" onmouseover="playSound('URL-FILE-MUSIK/SOUND');">
Mouseover DISINI Buat Dengerin Musik</a>

Atau

<a href="#" onclick="playSound('URL-FILE-MUSIK/SOUND');">Klik DISINI Buat Dengerin Musik</a>

Tinggal dipilih aja mau yang onmouseover atau onclick gan. Lalu ganti URL-FILE-MUSIK/SOUND dengan Url file musik/sound kalian. Silahkan di edit sendiri kalimatnya atau bisa juga diganti sama gambar gan. Contoh kayak di bawah ini, silahkan di coba dan mungkin loadnya agak lama karena gw pake file mp3 gan.

Mouseover DISINI Buat Dengerin Musik

Klik DISINI Buat Dengerin Musik

4.Show Hide Konten / Spoiler

Kode untuk menampilkan atau menyembunyikan konten, mirip tombol spoiler yang ada  di forum-forum gan. Cara pasangnya gampang, loe cari kode </head> lalu copy paste kode javascript di bawah ini di atasnya gan.

<script language='javascript' type='text/javascript'>
function showHide() {     var ele = document.getElementById("showHideDiv");
 if(ele.style.display == "block") {             ele.style.display = "none";       }
else {         ele.style.display = "block";     } }
</script>

Sekarang tinggal nambahin kode di konten yang pengen di isi tombol buka tutupnya gan. Copy paste kode di bawah ini dan letakan kontenya di tempat yang udah gw kasi tanda gan.

<form action="" method="post">
<input onclick="return showHide();" type="button" value="Show-Hide" />
</form>
<div id="showHideDiv" style="display: none;">

---------> Konten Disini Gan <---------

</div>

Konten bisa apa aja bisa gambar, teks atau apapun. Buat edit tulisan di tombolnya ganti aja Show-Hide sesuai keinginan loe. Contoh seperti di bawah ini di klik aja gan.

5. Teks Berjalan / Marquee

Kode ini bisa kalian gunakan untuk menampilkan teks berjalan gan. Kodenya sangat sederhana bisa juga untuk gambar atau link gan. Tinggal copy kode di bawah ini dan pastekan di manapun kalian suka.

<marquee onmouseover="this.stop()" onmouseout="this.start()" behavior="scroll" direction="left" bgcolor="#FF0000">Teks, Link Atau Gambar Kalian Disini</marquee>

Buat ngerubah arahnya tinggal di ganti aja "left" sesuai keinginan kemana arah yang loe mau gan. Buat behavior bisa juga diganti pake alternate atau slide, untuk bgcolor silahkan ganti warnanya sesuka hati gan.

Contoh :

"scrool" direction="left"

Contoh marquee atau teks berjalan

"alternate"

Contoh marquee atau teks berjalan

"scrool" direction="left" dengan gambar

6. Downloading Progress Bar

Dengan kode ini kita bisa dengan mudah membuat bar proses download yang sederhana gan. Yang ini pake javascript kalau di klik progress barnya bergerak atau berubah otomatis gan. Tinggal copy dan paste kode di bawah ini dimana pun loe mau gan.

<script type="text/javascript">
//current progress
var currProgress = 0;
//is the task complete
var done = false;
//total progress amount
var total = 100;

//function to update progress
function startProgress() {
//get the progress element
var prBar = document.getElementById("prog");
//get the start button
var startButt = document.getElementById("startBtn");
//get the textual element
var val = document.getElementById("numValue");
//disable the button while the task is unfolding
startButt.disabled=true;
//update the progress level
prBar.value = currProgress;
//update the textual indicator
val.innerHTML = Math.round((currProgress/total)*100)+"%";
//increment the progress level each time this function executes
currProgress++;
//check whether we are done yet
if(currProgress>100) done=true;
//if not done, call this function again after a timeout
if(!done)
    setTimeout("startProgress()", 100);
//task done, enable the button and reset variables
else    
{
    document.getElementById("startBtn").disabled = false;
    done = false;
    currProgress = 0;
}
}
</script>
<progress id="prog" value="0" max="100"></progress>
<br />
<input id="startBtn" onclick="startProgress()" type="button" value="start" />
<div id="numValue">
0%</div>

Standarnya progress bar ini kodenya cuma <progress value="0" max="100"></progress> gan. Contoh seperti yang dibawah ini, silahkan di coba gan.
Sumber : http://www.developerdrive.com/2012/07/displaying-the-progress-of-tasks-with-html5/

Progress Bar

0%

7. Textarea

Fungsi textarea ini bisa buat naruh kode di postingan gan sebagai pengganti blockquote. Cara pasangnya gampang gan tinggal copy paste kode di bawah ini dan ada tiga pilihan gan.

Biasa

<textarea rows="4" cols="50">
Teks atau Kode Disini Gan
</textarea>

Seleksi Otomatis

<textarea rows="4" cols="50" onclick="this.focus();this.select()" readonly="readonly">
Teks atau Kode Disini Gan
</textarea>

Seleksi Dengan Tombol

<form name="selectall">
<textarea name="messageBody" rows="4" cols="50">Teks atau Kode Disini Gan</textarea>
<br />
<input type="button" value="Select Text" onClick="javascript:this.form.messageBody.focus();this.form.messageBody.select();">
</form>

Tinggal di edit aja gan rows buat tinggi dan cols buat lebar. Untuk yang pake tombol kalian bisa ganti tulisan Select Text sesuai keinginan gan. Contoh ada dibawah ini gan silahkan dicoba.


Biasa
Teks atau Kode Disini Gan

Seleksi Otomatis
Teks atau Kode Disini Gan

Seleksi Dengan Tombol

Teks atau Kode Disini Gan

8.Link Dengan Pop Up

Yang terakhir gan, ini kode buat link kalau di klik bakal muncul pop up sesuai dengan target Urlnya. Misal digunakan untuk iklan atau link download gan. Copy paste kode javascript di bawah ini di atas kode </head> atau bisa juga paste langsung di postingan dengan linknya gan.

<script language="javascript" type="text/javascript">
function scpopup(url) {
    newwindow=window.open(url,'name','height=200,width=150');
    if (window.focus) {newwindow.focus()}
    return false;
}
</script>

Buat kode linknya seperti di bawah ini silahkan di copy paste gan.

<a href="Target URL Pop up" onclick="return scpopup('Target URL Pop up')">Contoh Link Popup</a>

Tinggal diganti aja Target URL Pop up dengan link yang kalian inginkan gan. Buat contoh klik aja link di bawah ini gan.


Contoh Link Popup



Sekian dulu yang bisa gw share kali ini gan semoga kode javascript dan HTML sederhana ini bisa berguna buat di blog kalian. Kalau kalian juga punya kode-kode yang keren silahkan di share sama jangan lupa juga ninggalin komentar gan.

3D Social Icon Keren Gratis Dari SEO Ciyus

Kalau kita browsing di internet banyak banget ada 3D social icon keren ya gak gan. Model apa aja yang loe cari pasti ada gan. Tujuan utama kita pasang social icon ini tentu biar blog kita tambah keren dan nambah jumlah pengikut blog di sosial media ya gak gan? Dalam memilih social icon keren itu semua tergantung selera masing-masing, ada yang demen social icon simple ada juga juga yang demen 3D social icon.

Setelah di postingan yang laen gw share cara membuat social icon mobil bergerak sekarang gw pengen ngasi 3D social icon gratis buat loe semua gan. 3D social icon ini buatan gw sendiri gan, jadi harap dimaklumi kalo gak keren-keren amat.

Gw cuma pengen berbagi hasil karya gw ke loe semua, mudah-mudahan aja bisa diterima dengan baik dan berguna ya gan. Tampilannya kotak biasa mirip kayak scrabble gitu, kalian tau pasti kan. Disini gw buat cuma 3 ukuran aja gan dari 48px, 64px sama 72px.

Total jumlah 3D social iconnya semua ukuran ada 42 buah gan. Sekedar info aja kalo gw buat social icon ini cuma pake css doank dan sedikit bantuan dari sotoshop ( photoshop ) gan.

Kalo loe demen langsung aja di download 3D social icon keren gratis dari SEO Ciyus gan, linknya ada di bawah ini gan.

[ Download 3D Social Icon by SEO Ciyus ]



Sekian dulu yang bisa gw share kali ini, semoga bermanfaat gan, nantikan yang gratisan laennya dari SEO Ciyus di postingan berikutnya. Kalo kalian suka sama social icon yang kayak di blog ini, silahkan di request ntar gw buatin tutorialnya dan jangan lupa ninggalin komentar ya gan.

Membuat Social Icon Mobil Bergerak Di Blog

Hampir di setiap blog yang kita kunjungi pasti selalu ada social iconnya di sidebar ya gak gan? Selain buat ornamen di blog, social icon ini juga buat nambah pengikut blog kita di sosial media gan. Berbagai macam efek ditambahin di social icon itu biar tambah keren ya kan gan.

Pada kesempatan kali ini gw pengen berbagi hasil karya gw gan. Gw bakal share cara membuat social icon mobil bergerak di blog baik buat Blogger maupun Wordpress. Bagaimana apa loe tertarik gan? Kalo tertarik silahkan lanjut di baca postingan ini dan di ikutin tutorialnya.

Social icon mobil bergerak ini fiturnya keren, pertama ada background kotanya jadi keliatan kayak beneran gan. Terus gw buat 2 efek berbeda yang satu mobilnya gerak otomatis kalo disentuh baru berhenti dan yang satunya mobilnya diem kalo disentuh baru mobilnya bergerak gan. Dan yang paling penting ini kode murni CSS gak pake javascript jadi aman buat SEO gan.

Ok gan langsung aja ke cara membuat social icon mobil bergeraknya. Caranya gampang tinggal nambahin widget gak perlu edit HTML. Silahkan disimak caranya gan kalo loe suka. Di liat demonya dulu gan biar tau gimana iconnya.

[ DEMO ]

Membuat Social Icon Mobil Bergerak Di Blog

 

Buat di Blogger

• Pertama loe masuk ke dashboard Blogger terus pilih Layout lalu klik Add a Gadget terus tambahin HTML/Javascript dan copy salah satu kode di bawah ini lalu pastein di kotak kosongnya gan.

Buat di Wordpress

• Buat di Wordpress, caranya sama loe masuk ke Dashboard Wordpress lalu pilih Appearance lalu klik Widget dan tambahin widget Text ke sidebar dan copy salah satu kode dibawah ini lalu pastein di widget tersebut gan.

Kode social icon mobil diam

<!-- Social Icon Mobil Bergerak by http://seociyus.blogspot.com/ -->
<style type="text/css">
#SCsocial a:hover{
position:relative;
animation:SCgerak 10s infinite;
-moz-animation:SCjalan 10s infinite; /* Firefox */
-webkit-animation:SCjalan 10s infinite; /* Safari and Chrome */
-o-animation:SCjalan 10s infinite; /* Opera */
transition: all 3s ease-in-out;
-moz-transition: all 3s ease-in-out; /* Firefox 4 */
-webkit-transition: all 3s ease-in-out; /* Safari and Chrome */
-o-transition: all 3s ease-in-out; /* Opera */
}

@keyframes SCgerak
{
0%   {right:0px;}
100% {right:300px;}
}
@-moz-keyframes SCjalan /* Firefox */
{
0%   {right:0px;}
100% {right:250px;}
}

@-webkit-keyframes SCjalan /* Safari and Chrome */
{
0%   {right:0px;}
100% {right:250px;}
}

@-o-keyframes SCjalan /* Opera */
{
0%   {right:0px;}
100% {right:250px;}
} 
</style>

<center><div id="SCsocial" style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrIwr4_b6Vd3XBAvzYDYmyi0sqh1SW9f3glJzMpB0TN1ABYSTjzPT9FA8BJ412Ey5xW2l_jsDvM85_4f8w-Z5BlOoIYutDZwnC-_tzJWgghQDP1-ELSXPuwZ6DeoP5eDaNNhpyCQGWVNuz/s1600/city.jpg); background-repeat:no-repeat; height: 225px; width: auto; border: 0; overflow:hidden;"> 
<!--Start Facebook Icon-->
<a title="Like Us on Facebook" href="URL Facebook Loe" target="_blank" rel="nofollow"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV8dCjVH9enofBlWQeo_ZQ0liw9u_ix1vG39QqmYLajSYwO_KqTa1cDEaktUsTOI8mEd-zmB9juMhxgld7WP9eRybwPNAjO_UQcmNleeBERgoZGh62dFH_QgZTJXNb56X7DmqNqsGrM4Kr/s1600/truck+facebook-2-icon.png" height="50" widht="50" alt="Icon" style="margin-top:175px;"/></a>
<!--End Facebook Icon-->

<!--Start Twitter Icon-->
<a title="Follow Us on Twitter" href="URL Twitter Loe" target="_blank" rel="nofollow"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAkgN8YfciRRYIwacaIAu6j1r68o9XVBTSvPjFjy1f43TXkKaLZVByiTXhbJPLg4QJiQVSqO1AZ1KV5KvJsqSkqRo-jAZOXzj_bZO1DddhpXpzOH8Bi4RWyU3GVIBaiqx5zWKQB69yWp7a/s1600/truck+twitter-icon.png" height="50" widht="50" alt="Icon" style="margin-left:8px;"/></a>
<!--End Twitter Icon-->

<!--Start Google+ Icon-->
<a title="Follow Us on Google+" href="URL Google+ Loe" target="_blank" rel="author"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp43jv8GXmUaye6ynhkgdy3p6pQB3DsnZW4LTvSjinf0LW1jCRToCGI9zSyMmoH6meu_zvUxjWDuDrW0n9OktFZe1QXeRUklczZ2G6ngbPZIosgPnP5NV6ZB2NOZFNWEBkfLImjAmPnbrZ/s1600/truck+google.png" height="50" widht="50" alt="Icon" style="margin-left:8px;"/></a>
<!--End Google+ Icon-->

<!--Start Rss Icon-->
<a title="Grab Our RSS Feed" href="URL RSS Feed Loe" target="_blank" rel="nofollow"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2l6CY_qeFWZUaf_Y-h3lzoWNuixazdhYLMwKDxHiJ6GmfkMOer5sG1U2XcQ8ijNxf8x_F9VpSb_QBS1697RCl09c00i9t0rlu-RzEVhmS1iM437NKsajTdtGz0rq4DgCO3SUoQN7Rb8Xt/s1600/truck+rss-icon.pn" height="50" widht="50" alt="Icon" style="margin-left:8px;"/></a>
<!--End Rss Icon-->
</div></center>
<div style="font-size:11px" align="right"><a href="http://seociyus.blogspot.com/2013/01/membuat-social-icon-mobil-bergerak-di-blog.html" rel="nofollow">[Get This Icon]</a></div>

Kode social icon mobil gerak otomatis

<!-- Social Icon Mobil Bergerak by http://seociyus.blogspot.com/ -->
<style type="text/css">
#SCsocial a{
position:relative;
animation-name: SCgerak;
-moz-animation-name:SCgerak; /* Firefox */
-webkit-animation-name:SCgerak; /* Safari and Chrome */
-o-animation-name:SCgerak; /* Opera */ 
animation-duration: 15s;
-moz-animation-duration:15s; /* Firefox */
-webkit-animation-duration:15s; /* Safari and Chrome */
-o-animation-duration:15s; /* Opera */ 
animation-iteration-count: infinite;
-moz-animation-iteration-count:infinite; /* Firefox */
-webkit-animation-iteration-count:infinite; /*Safari and Chrome*/
-o-animation-iteration-count:infinite; /* Opera */ 
animation-timing-function: linear;
-moz-animation-timing-function:linear; /* Firefox */
-webkit-animation-timing-function:linear; /* Safari and Chrome */
-o-animation-timing-function:linear; /* Opera */ 
transition: all 5s ease-in-out;
-moz-transition: all 5s ease-in-out; /* Firefox 4 */
-webkit-transition: all 5s ease-in-out; /* Safari and Chrome */
-o-transition: all 5s ease-in-out; /* Opera */
}

@keyframes SCgerak
{
0% { right: -250px; }  
100% { right: 300px; }
}
@-moz-keyframes SCgerak /* Firefox */
{
0% { right: -250px; }  
100% { right: 300px; }
}

@-webkit-keyframes SCgerak /* Safari and Chrome */
{
0% { right: -250px; }  
100% { right: 300px; }
}

@-o-keyframes SCgerak /* Opera */
{
0% { right: -250px; }  
100% { right: 300px; }
} 

#SCsocial a:hover{
animation-play-state:paused;
-moz-animation-play-state:paused; /* Firefox*/
-webkit-animation-play-state:paused; /* Safari and Chrome */
-o-animation-play-state:paused; /* Opera */ 
}
</style>

<center><div id="SCsocial" style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrIwr4_b6Vd3XBAvzYDYmyi0sqh1SW9f3glJzMpB0TN1ABYSTjzPT9FA8BJ412Ey5xW2l_jsDvM85_4f8w-Z5BlOoIYutDZwnC-_tzJWgghQDP1-ELSXPuwZ6DeoP5eDaNNhpyCQGWVNuz/s1600/city.jpg); background-repeat:no-repeat; height: 225px; width: auto; border: 0; overflow:hidden;"> 
<!--Start Facebook Icon-->
<a title="Like Us on Facebook" href="URL Facebook Loe" target="_blank" rel="nofollow"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV8dCjVH9enofBlWQeo_ZQ0liw9u_ix1vG39QqmYLajSYwO_KqTa1cDEaktUsTOI8mEd-zmB9juMhxgld7WP9eRybwPNAjO_UQcmNleeBERgoZGh62dFH_QgZTJXNb56X7DmqNqsGrM4Kr/s1600/truck+facebook-2-icon.png" height="50" widht="50" alt="Icon" style="margin-top:175px;"/></a>
<!--End Facebook Icon-->

<!--Start Twitter Icon-->
<a title="Follow Us on Twitter" href="URL Twitter Loe" target="_blank" rel="nofollow"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAkgN8YfciRRYIwacaIAu6j1r68o9XVBTSvPjFjy1f43TXkKaLZVByiTXhbJPLg4QJiQVSqO1AZ1KV5KvJsqSkqRo-jAZOXzj_bZO1DddhpXpzOH8Bi4RWyU3GVIBaiqx5zWKQB69yWp7a/s1600/truck+twitter-icon.png" height="50" widht="50" alt="Icon" style="margin-left:8px;"/></a>
<!--End Twitter Icon-->

<!--Start Google+ Icon-->
<a title="Follow Us on Google+" href="URL Google+ Loe" target="_blank" rel="author"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp43jv8GXmUaye6ynhkgdy3p6pQB3DsnZW4LTvSjinf0LW1jCRToCGI9zSyMmoH6meu_zvUxjWDuDrW0n9OktFZe1QXeRUklczZ2G6ngbPZIosgPnP5NV6ZB2NOZFNWEBkfLImjAmPnbrZ/s1600/truck+google.png" height="50" widht="50" alt="Icon" style="margin-left:8px;"/></a>
<!--End Google+ Icon-->

<!--Start Rss Icon-->
<a title="Grab Our RSS Feed" href="URL RSS Feed Loe" target="_blank" rel="nofollow"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2l6CY_qeFWZUaf_Y-h3lzoWNuixazdhYLMwKDxHiJ6GmfkMOer5sG1U2XcQ8ijNxf8x_F9VpSb_QBS1697RCl09c00i9t0rlu-RzEVhmS1iM437NKsajTdtGz0rq4DgCO3SUoQN7Rb8Xt/s1600/truck+rss-icon.pn" height="50" widht="50" alt="Icon" style="margin-left:8px;"/></a>
<!--End Rss Icon-->
</div></center>
<div style="font-size:11px" align="right"><a href="http://seociyus.blogspot.com/2013/01/membuat-social-icon-mobil-bergerak-di-blog.html" rel="nofollow">[Get This Icon]</a></div>

• Kalo udah di pastein sekarang tinggal ganti semua tulisan yang gw highlight sama URL profile sosial media dan Feed loe lalu di save beres gan.

• Coba sekarang di buka blognya apa udah ada social icon mobil bergeraknya belum gan. Selamat menikmati social icon mobil bergerak yang baru di blog gan.

Note : Mungkin di beberapa template mobilnya bakal keluar dari gambar, untuk ngatasinya silahkan tinggalin pertanyaan loe di bawah gan. Buat link ke postingan ini tolong jangan di hapus ya udah nofollow kok gan thanks.

Sekian dulu yang bisa gw share kali ini tentang cara membuat social icon mobil bergerak di blog gan. Kalo ada kesempatan gw bakal share cara membuat social icon keren yang laennya. Jangan lupa ninggalin komentar loe di bawah ato kalo ada pertanyaan silahkan ditanyain juga gan.

Update : Lupa gw gan kalo social icons mobil ini gak suport di browser IE.

Cara Membuat Pop Up Email Subscription Box Keren

Biar semakin banyak yang mengikuti blog kita melalui email, jadi harus pasang email subscription dimana-mana gan. Di sidebar, di bawah postingan atau pun dengan pop up gan. Kalo kalian sering berkunjung ke website yang keren-keren pasti setiap kita buka situsnya ada pop up email subscription nya ya gak.

Kalian tau PopUp Domination gak gan? Itu loh software berbayar buat bikin pop up box keren di website. Kalo loe pake tu software buat bikin pop up email subscription box dijamin deh website loe bakal tambah keren dan bisa nambah pengikut melalui email gan.

Kalo buat di Blogger bisa gak ya buat kayak begituan. Kabar baeknya sekarang loe bisa membuat pop email subscription box di Blogger cuma dengan nambahin kode aja gan. Kali ini gw bakal share cara membuatnya gan.

Sebelum ke cara membuatnya, gw mau ngasi tau kelebihan pop up email subscription box ini gan. Yang pertama pop up ini keren pastinya, terus pake cookie jadi bisa one time pop up gan. Dan juga dijamin berfungsi dan 99.9% mirip banget sama PopUp Domination gan.

Langsung aja disimak cara membuat pop up email subscription boxnya gan. Oh ya ini bukan gw yang buat tapi dari orang laen jadi dilarang keras ngerubah kode yang udah ada soalnya widget ini sudah ada hak ciptanya dan di lindungi sama DMCA gan.


Note : Inget selalu backup atau download template blognya untuk menghindari hal-hal yang gak di inginkan.

[ DEMO ]

Cara Membuat Pop Up Email Subscription Box Keren

• Masuk ke Blogger terus pilih Template dan klik Edit HTML. Terus cari kode </body> dan pastein kode yang gw kasi di bawah ini di atasnya gan. 

• Bisa juga dengan cara cuma nambahin widget, cari Layout terus pilih Add a Gadget lalu cari HTML/JavaScript dan pastein kodenya disana. Tapi cara ini gw coba di beberapa template gak bagus posisinya terlalu kesamping kanan gan. Loe coba aja kalo gak berhasil pastein di template aja.

<!-- This Is A Copyrighted "EXE Style POP UP" Widget, Don't Try To Theft It Otherwise... -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
<script src="https://raw.github.com/EXEIdeas/JS/master/ColorBox-v1.3.16"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=true') == -1)
{
var fifteenDays = 1000*60*60*24*30;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"770px", inline:true, href:"#exestylepopups"});
}
});
</script>
<style type="text/css">
/*
ColorBox v1.3.16
(Copyright (c) 2011 Jack Moore - jack@colorpowered.com)
UpDated By www.exeideas.com
(Copyright (c) 2011 EXEIdeas International - admin@exeideas.tk)
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
.cboxPhoto{float:left; margin:auto; border:0; display:block;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
#cboxOverlay{background:#000;opacity:0.5 !important;}
#cboxTopCenter{height:35px;}
#cboxMiddleRight{width:0px;}
#cboxContent{overflow:visible;}
#cboxLoadedContent{margin-bottom:5px;}
#cboxLoadingOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggI5ZV6DcFLQZuL8g3GXvhA29nFohyphenhyphenrBzQBPtfoTbVbmPeVFj8E4ChVogNUxXnUz0j1RqcJnAGQpmmvPhTUeZ1IDOFv4vx7v3eKY5pr1fNfIR0ak03T6283U87AXfxzU2py-RG_xRNhWI/s400/loadingbackground.png) no-repeat center center;}
#cboxLoadingGraphic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-a2_NFxBMi63kCMgVo08Kdq_daK-w1RITPkOD0QKfUHYAqnCNnpwMmyFLpChMoviddGDCSu3yzOe9j0BMUpxjBakQ30x0YERBmJNpbXthG2BzEXdQez6wXWmmprIC9uHZiXAu6_deDTI/s400/loading.gif) no-repeat center center;}
#cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;}
#cboxClose{position:absolute; bottom:338px; right:0; cursor:pointer; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj10S6dSWI88aY3u2PA6HunjkJzkN4VZa1wz9hxkeAp02sRzuTl7D-vZg1VtpKVC6n86zvOrH22i0H4SJT_2gEOs5H4KOPeUMYHnx5hRD8uSGrgzQ8xVgZrIrSP1AFLLiVbnwKcmikz_Q/s40/exestylepopupclosebutton.png) no-repeat; width:40px; height:40px; text-indent:-9999px;}
#cboxClose.hover{opacity:0.8 !important;}
#exestylepopup{overflow:none; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrKJ3fauZMkzn12S00Kzz1ucIb6uyQeV9tBEJ3vGcYWq9Gr2RFJBotAq1nCxVDG-7wNxlWRMon3fgOUkoQTADTAM8VUGWoq_tjPvUJqMNooKNPwzz0aBN2GhkuKJCa2uWtfCzToF6Jew/s748/EXEIdeasBlog.png) ; background-repeat: no-repeat; height: 350px; width: 770px; }
form#exestylepopup{display:block; margin:0;}
form#exestylepopup #exefield{padding:2px; position:absolute; top:162px; left:480px; width:238px; font-size:16px; border:none; background:transparent;}
form#exestylepopup #exebutton{position:absolute; left:474px; top:205px; width:249px; height:42px; border:none; background:transparent;}
</style>
<div style='display:none'>
<div id='exestylepopups' >
<form id="exestylepopup" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Alamat Feed', 'popupwindow', 'scrollbars=yes, width=600, height=550'); return true">
<input type="hidden" value="Alamat Feed" name="uri"/>
<input id='exefield' name='email' onblur='if (this.value == "") {this.value = "Ketik email disini...";}' onfocus='if (this.value == "Ketik email disini...") {this.value = ""}' type='text' value='Ketik email disini...'/>
<input type="hidden" name="loc" value="en_US" />
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="exebutton" />
</form>
</div>
</div>
<!-- This Is A Copyrighted "EXE Style POP UP" Widget, Don't Try To Theft It Otherwise... -->

• Sekarang tinggal ngedit aja gan. Ganti ke 2 Alamat Feed sama alamat feed blog loe. Terus buat tampilannya loe bisa download file PSDnya [ disini ] gan, nanti tinggal di edit sendiri mau kayak gimana tampilan sama kata-katanya. Ngeditnya pake photoshop atau bisa edit online di pixlr gan.

• Jangan pernah ganti ukuran tinggi sama lebar file gambarnya gan, ntar gak cocok sama kodenya. Terus kalo udah jadi gambarnya tinggal ganti aja background-image sama url gambar loe gan. Abis itu tinggal di Save beres. Sekarang loe udah punya pop up email subscription box keren di blog gan.

• Buat setting biar pop up email subscription box ini muncul sekali aja jadi kalo pengunjung buka halaman yang laen pop up box ini gak muncul. Settingan awalnya udah kayak gitu, tapi kalo loe mau ngerubah biar si pop up box selalu muncul setiap pengunjung buka halaman laen tinggal diganti aja visited true jadi false gan.

• Terus buat lamanya ( berapa hari ) biar pop up box ini muncul lagi kalo pengunjung balik lagi ke blog loe, tinggal di rubah aja angka 30 jadi angka antara 1 ampe 30 sesuai jumlah hari gan. Ini buat kalo loe set visitednya true gan.

Peringatan : Sekali lagi gw kasi tau kalo Widget ini ada hak ciptanya gan dan dilindungi sama DMCA jadi jangan coba-coba atau berani ngerubah kodenya.


Ow ya kalo loe mau pasang di Wordpress tinggal add widget aja, gw udah nyoba dan hasilnya sempurna gan. Sekian dulu yang bisa gw share tentang cara membuat pop up email subscription box keren di blog, semoga bermanfaat dan jangan lupa buat ninggalin komentar gan.

Update >>> Mohon maaf agan-agan gw gak tau kalau kode JSnya udah gak berfungsi, buat yang udah pasang tapi gak mau muncul silahkan di copy ulang kode di atas karena udah gw perbaiki.


Sumber : EXEIdeas - Cool EXE-Style POP-UP V2 Widget For Blog And Website.

Cara Membuat Contact Form Di Blog

Halaman contact us wajib hukumnya gan, biar pengunjung blog bisa ngirim pesan ke kita kapan pun mereka mau. Dan juga buat loe yang pengen daftar Adsense halaman contact us ini harus ada. Kalo buat halaman contact us cuma isinya tulisan doank gak aysik gan, jadi harus di isi formnya biar keren.

Loe ada niat buat halaman contact us tapi gak tau cara buat formnya. Tenang pada postingan kali ini gw bakal share cara buatnya gan. Gw share cara yang gampang dan gak perlu registrasi2an segala gan, silahkan disimak.

Cara Membuat Contact Us Form Di Blog

• Pertama loe masuk ke Blogger terus dari buat Page baru judulnya misal Contact Us lalu copy kode dibawah ini gan and pastein di mode HTMLnya. Kalo udah save lalu di close jangan di publish dulu.

<div style="border: solid 1px #000000;"><form action="http://www.SnapHost.com/captcha/send.aspx" id="ContactUsCaptchaWebForm" method="post" onsubmit="return ValidateForm(this);">
<input name="skip_WhereToSend" type="hidden" value="Alamat Email Loe" />
<input name="skip_SnapHostID" type="hidden" value="BM833MKCXEXQ" />
<input name="skip_WhereToReturn" type="hidden" value="URL Halaman Pesan Terkirim" />
<input name="skip_Subject" type="hidden" value="Contact Form" />
<input name="skip_ShowUsersIp" type="hidden" value="1" />
<input name="skip_SendCopyToUser" type="hidden" value="1" />
<script type="text/javascript">
function ValidateForm(frm) {
if (frm.Nama.value == "") {alert('Nama harus di isi.');frm.Nama.focus();return false;}
if (frm.Dari.value == "") {alert('Alamat email harus di isi.');frm.Dari.focus();return false;}
if (frm.Dari.value.indexOf("@") < 1 || frm.Dari.value.indexOf(".") < 1) {alert('Tolong masukan alamat email yang benar.');frm.Dari.focus();return false;}
if (frm.Pesan.value == "") {alert('Silahkan kirimkan komentar atau pertanyaan.');frm.Pesan.focus();return false;}
if (frm.skip_CaptchaCode.value == "") {alert('Masukan kode di samping.');frm.skip_CaptchaCode.focus();return false;}
return true; }
function ReloadCaptchaImage(captchaImageId) {
var obj = document.getElementById(captchaImageId);
var src = obj.src;
var date = new Date();
var pos = src.indexOf('&rad=');
if (pos >= 0) { src = src.substr(0, pos); }
obj.src = src + '&rad=' + date.getTime();
return false; }
</script>
<br />
<table border="0" cellpadding="5" cellspacing="0" style="width: 600px;"><tbody>
<tr> <td><b>Nama* :</b></td> <td><input maxlength="60" name="Nama" style="width: 350px;" type="text" /></td> </tr>
<tr> <td><b>Nomer Telpon :</b></td> <td><input maxlength="43" name="NomorTelepon" style="width: 350px;" type="text" /></td> </tr>
<tr> <td><b>Email* :</b></td> <td><input maxlength="60" name="Dari" style="width: 350px;" type="text" /></td> </tr>
<tr> <td><b>Pesan* :</b></td> <td><textarea cols="40" name="Pesan" rows="7" style="width: 350px;"></textarea></td> </tr>
<tr> <td align="center" colspan="2"><table border="0" cellpadding="0" cellspacing="0"><tbody>
<tr><td colspan="2" style="padding-bottom: 18px;"><a href="http://www.snaphost.com/" rel="nofollow" style="color: #000099; font-family: Verdana, Arial, Helvetica; font-size: 11px; text-decoration: none;" target="_blank">
Kontak form ini dilindungi dari SPAM by :
<span style="text-decoration: underline;">SnapHost.com</span></a></td></tr>
<tr valign="top"><td><i>Masukan kode berikut*.</i>
<input maxlength="6" name="skip_CaptchaCode" style="width: 80px;" type="text" /></td><td><a href="http://www.snaphost.com/" rel="nofollow" target="_blank"><img alt="Web Form Code" src="http://www.SnapHost.com/captcha/CaptchaImage.aspx?id=BM833MKCXEXQ&amp;ImgType=2" id="CaptchaImage" style="margin-left: 20px;" title="Anti-spam web forms" /></a></td></tr>
</tbody></table>
* Harus Di Isi. &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
<input name="skip_Submit" type="submit" value="Kirim" /></td></tr>
</tbody></table>
</form></div>

• Lalu buat page baru lagi gan, ini buat redirect halaman pas pesan udah terkirim. Loe bisa buat isinya mungkin "selamat pesan anda sudah terkirim" ato apalah terserah loe gan. Kalo udah beres tinggal di publish gan.

• Langkah selanjutnya loe edit kode kontak form yang tadi, tinggal ganti Alamat Email Loe dengan alamat email kemana pesannya bakal dikirim, terus buat URL Halaman Pesan Terkirim loe ganti sama URL page yang tadi udah loe buat. Semua beres tinggal di publish aja gan. Sekarang loe udah punya contact form baru.
• Kalo mau edit kata-katanya silahkan aja gan tapi jangan ampe salah ntar gak berfungsi contact formnya.

Selain contact form di atas loe juga bisa buat langsung online gan, gak perlu registrasi tinggal masukin alamat email loe aja dan contact form siap dipasang di blog. Gw pake ini form gan, simple dan gampang cuman sayang bahasanya english. Kalo mau buat loe langsung cek di Foxyform. Bisa juga loe buat di Jotform.


Yang lainnya ada juga tapi harus registrasi gan misal : EmailMeForm, 123 Contact Form, Kontactr atau My Contact Form, pilih aja sesuka hati loe semua gratis gan.



Sekian dulu gw share cara buat contact us form di blog gan, semoga bermanfaat buat kalian. Kalo loe punya tips laen silahkan di share jangan malu-malu, dan inget jangan lupa berkomentar gan.