SEO Ciyus Blog

Pilih Blogger atau Wordpress? mungkin pertanyaan ini yang lagi ada di pikiran loe kan gan. Memilih itu memang hal yang sulit dilakukan di dalam hidup kita. Belum tentu yang menurut loe terbaik itu juga terbaik buat orang lain. Jika kita berbicara mau pilih yang mana antara Blogger atau Wordpress itu pun susah ditentukan.

Kali ini gw bakal memberikan ulasan tentang kedua platform gratisan untuk blogging ini agar loe bisa nentuin mau pilih yang mana. Sebenernya keduanya sama-sama bagus dan terbaik namun memiliki keunggulan dan kelemahan masing-masing. Memilih antara Blogger atau Wordpress itu sebenarnya tergantung dari tujuan yang ingin kita capai gan. Kalau gw sih saat ini pake keduanya baik untuk blogging maupun bisnis online. Biar lebih jelas agar nanti di akhir loe bisa nentuin mau pilih yang mana langsung aja gw bahas dibawah ini.

Pilih Mana Blogger Atau Wordpress?

Seperti yang gw jelasin di atas pemilihan ini semua tergantung dengan tujuan dan gak lepas juga dari selera. Menurut gw rata-rata orang yang sekarang menggunakan Wordpress sebelumnya pasti pernah menggunakan Blogger gan. Bukan berarti mereka gak puas dengan Blogger tapi mereka memilih Wordpress karena ingin sesuatu yang lebih. Ow iya yang kita bandingkan kali ini adalah Wordpress dengan hosting sendiri atau self hosting bukan wordpress.com gan. Berikut gw kasi alasan kenapa harus pilih Blogger atau Wordpress sesuai dengan pengalaman bukan nebak-nebak.

Gw Pilih Blogger Karena

1. Blogger itu GRATIS, keluar duit paling buat ganti domain.
2. Blogger paling bagus buat Blogging yang sifatnya buat have fun bukan money oriented.
3. Blogger gampang pakenya buat ngemodifnya juga gampang.
4. Blogger optimasinya gampang cuma nambahin meta tag di template.
5. Blogger templatenya yang bagus dan premium rata-rata gratis.
6. Blogger jarang sekali error bahkan gak pernah kalau dibuka blognya.
7. Blogger keamananya terjamin dan sangat susah dibobol jadi blog gw aman.

Gw Pilih Wordpress Karena

1. Wordpress bikin gw lebih berkembang dalam dunia blogging maupun internet marketing.
2. Wordpress juga gratis tapi bagusnya sewa hosting berbayar dan pake domain sendiri.
3. Wordpress punya banyak plugin keren ada gratis maupun berbayar.
4. Wordpress optimasinya lebih gampang dengan plugin.
5. Wordpress bagus buat cari duit di internet semisal affiliate marketing.
6. Wordpress itu open source jadi banyak tempat buat gw cari ide ngemaksimalin kinerjanya.
7. Wordpress gak akan pernah dihapus kecuali hsoting atau domain loe habis.


Itulah beberapa alasan gw pilih Blogger atau Wordpress gan, jadi semua tergantung kebutuhan. Intinya kalo loe pemula banget dan pengen buat blog gw saranin pake Blogger dulu. Selanjutnya kalo loe mau maen affiliate marketing lebih bagus pake Wordpress karena akan lebih maksimal hasilnya. Sedangkan kalo loe mau buat toko online ini 50:50 loe bisa pake Blogger atau Wordpress terserah sesuai selera. Gw ga akan membahas masalah kekurangan dari kedua platform ini karena gak baik menurut agama :p.

Banyak yang berpendapat kalo Wordpress SEOnya lebih bagus dari pada Blogger, secara garis besar iya benar tapi semua itu tergantung dari yang punya apa dia paham SEO atau gak serta isi web atau blognya berkualitas gak. Gak ada istilah kalo loe pake Wordpress terus blog loe bakal muncul di halaman pertama, buang jauh-jauh omong kosong itu gan. Memang peluang loe ada buat itu karena Wordpress optimasinya bisa lebih bagus dari Blogger.

Kalo loe mau ada di halaman pertama Google yang harus loe lakuin buat konten atau postingan yang berkualitas. Bisa gw bilang 50% ini yang nentuin sisanya faktor lain-lain, cuma share aja kalo semua postingan di blog ini ga ada satu pun yang gw optimasi, terutama optimasi off page macam cari backlink gitu gak pernah gan kecuali artikel kontes tapi udah gw hapus semua. Backlink gw paling dari blog yang copasin isi postingan blog ini kalo ga ya dari yang pasang widget yang gw ulas disini. Gw cuma nulis asal tapi bermanfaat karena gw gak cari duit pake blog ini jadi istilah gw Blogging for Human :D.

Setelah baca ulasan gw di atas sekarang loe udah bisa nentuin kan mau pilih Blogger atau Wordpress. Keputusan ada di tangan loe gan, coba dulu masing-masing dan pilih yang terbaik. Sekian dulu untuk postingan kali ini semoga bermanfaat dan jangan lupa cuap-cuap di bawah walaupun gw jarang bales yang penting kan di publish jadi loe bisa numpang eksis di blog ini :D.

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.

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/AVvXsEja9IdayO8SGjQ8UeYyMx2mas9C7epDR4tnu4wQ-sHKumyCddtlVqxW62LOIe1UYLMMGK-v7gH3dmusKsgbioGbBQvNuA3a4SterT6aO8_FeGlKrgQkfyVZra5w2dtr-nyaNBUkI2XMLwQR/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/AVvXsEhregVhOODtPQGLh_l_uNmVmJaV__3_Bujtd_I2VRtUCubMqdJ09JI8iJMjou6O44coLrWrgnxL-f_4CnUbo5mlU1JhdHzJejKqmdGvQs2zAjY6kZPtb5WjqCBkPuE9IJWT-SIaIF4vpYMJ/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/AVvXsEhSilZgSzmjzrADFMFyGVrHPmEDMma2CIgsZt4HYZt8PXOAZTJ5LvTK3YXgfG2GRg9GkAy0lJa6JcvESybw2Id2KdQ488-4HM-4bC7m49lz1V4fcEswFIJ8jYp4tZWfWj2SliiKR6wsMemR/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/AVvXsEh_1vPnOypt25pNrgf9jJj8VQPQb6m0pO1ZaKTqFc9CeDXy9bvKimBJAQ4V2q-_Qlydsu0XyffMB3vGkjGD9X7ca5w4YPjyy3GUElLOWBayNMf9Q_xy99K_RJGykb7EU4Hp9j351iVVAUNc/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.

Lama rasanya gak bikin tutorial pembuatan widget di blog ini. Mumpung lagi ada waktu luang kali ini gw bakal share cara pasang emoticon campuran keren di blog gan. Postingan ini terilhami dari tutorial gw sebelumnya tentang cara memasang emo onion head gan. Gak nyangka aja ternyata postingan gw tersebut banyak yang ngeshare.


Untuk yang sekarang emoticonnya sengaja gw campur biar lebih menarik gan. Emoticon-emoticon ini walaupun gak sengetop si onion head tapi banyak juga di gunain di beberapa forum gan. Gw yakin kalau loe pasang emoticon ini bakal bikin blog tambah menarik dan berwarna. Selain itu bakal banyak juga yang komen di blog loe karena ingin nyobain emoticon campuran ini.

Udah gak sabar pengen pasang emoticon campuran ini gan? Baiklah kalau begitu langsung aja kita ke cara pasangnya gan. Silahkan disimak biar gak salah pasang. Soalnya kalau salah pasang nanti emoticonnya gak mau muncul gan. Kalau gak muncul ntar gw yang di komplain lagi, cek it dot gan...

Note : Inget selalu di back up atau di download template blognya sebelun edit HTML untuk menghindari hal-hal yang gak di inginkan gan.

[DEMO]

Pasang Emoticon Campuran Keren Di Komentar Blogmu

• Yang pertama loe lakuin masuk ke Dashboard blog lalu pilih Template lalu klik Edit HTML gan. Lalu loe cari kode <div class='post-footer-line post-footer-line-3'> atau <p class='post-footer-line post-footer-line-3'> ini gan. Kalau gak ngerti cara nyarinya tinggal teken Ctrl+F di keyboard terus bakal muncul kotak search di kanan atas. Nah loe tinggal pastein kodenya disana lalu teken Enter, ntar bakal ketemu kodenya gan. Kalau udah ketemu loe scroll kebawah sampai nemuin kode di bawah ini gan.

</div>
</b:includable>

• Lanjut sekarang loe copy paste kode yang gw kasi di bawah ini di tengah-tengah kode tadi gan.

Contoh:

</div>

Paste kodenya disini gan.

</b:includable>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style=' width: auto; text-align: left; border: 4px double #0084ce;background: #FFFFFF; padding: 10px; color:#000000; font-weight:bold; margin-left:40px;'><h3 style='text-align: center;'>
<a style='color: #3d85c6;'>Kode Smiley Untuk Komentar </a></h3><br/>
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEPQbEdxfdgS3rnWckW1DIKF2Dw-sYNF7FptnU0DTN6Sd-5NLB0O8OpOQl1DGVfxgeMG3MD0lYtTHMJ1ureAULxNlgyVfkZnmOHkLPOrQxJ9TIiRbHIzTVMR2HtiksGzLRvkoMErUb-DGr/s1600/seociyus.blogspot.com_015.gif'/> :a
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy_eYKWk8rlNRg5HOpRD30R3hXDI_rfsrEqShGH8Kmak7QqLPWWwcJ4DQH3VLgauVLf8Ns0lGxruyngFxSMn5FJCjtiJO0NWL8bd7cY2n9FHfd7lwpC_AR3VvsXMfMCmhDVLfEYNoJj3fO/s1600/seociyus.blogspot.com_016.gif'/> :b
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR3a1_L3DlTbn_y8CNSqy-8vXCCryAA-h1gHc3_q-KfcGq-OIhfH63NZvGBLdl3lLakVG0WNyYIHUUagfimf0GYgo0oEzeYKKkqqrPGu2dL4QFKr-fLUQISoGvlWPZTe7vY0c_a4qUK5BW/s1600/seociyus.blogspot.com_017.gif'/> :c
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJqmlJsiBMqmZyTaBD99zljOOM3LepQPeGBvBi3XTup6e0cB9zWc70zc91yvAmarmofwXN80tRDxp16aPEMJCUHfk1JLly77MgSFsickiU-wrRpdzNhLy3LSGsAHM5GlOt0BvisGxAQpxX/s1600/seociyus.blogspot.com_018.gif'/> :d
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2ecsxaxIljO16wX_HbyPSluvZnG0Vo5L3o92aYgecZVpe_utfOAL5CXAnVCpMWKflHX3mU322aSR0dEzUPDml4vgPy7x8shZ7HCZ3j4tiBxf6AGF_eGAr7k4W34LcKvP8DRbwrkIlrp0W/s1600/seociyus.blogspot.com_022.gif'/> :e
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVgKLSJzmsTM49tD2CzTKKZ5RqSdMOdipOqMOo__Se_b0OvWomeVXd2kjvYNhLRuXAeOPkST0YgQvbpDxeVh-F6Cykaj0i-8TwxK-WFjX-DvcjSksyVz2tY5QctHd5EPM4rirgCwtEtSRF/s1600/seociyus.blogspot.com_025.gif'/> :f
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvUG5sGSAWr0iuZqgkyg5HmW1CwYCqN6BnSQFzZAMD1Sur7c2zs5ElwJiamiItuNT95TqyEsweI1ohFY8UbkTOauLjfzxp45a7Wj80IZ82ryvyBYq97J7mxZsUtGphn18bhFxKmAutUBBO/s1600/seociyus.blogspot.com_027.gif'/> :g
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGDRZGcRyVb9NAce9_voCEOwVmrH1bHrdj8loMZ5lhzFVHFiWYg_AVni5V_3tMSHDSo-66NHh0kkRNOE2ipt8wN56oAZuw_EMOjkqcKMQ4mbzo2cy-P7RqxFxrTkW89H3vK7ntRg031u1C/s1600/seociyus.blogspot.com_028.gif'/> :h
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq1e5cq_lDced2Ao3h9CnbZBvEXPZAiI-boJXpzaPER6bBDA8hJTKVJVR8H4yXYQQhUwBTwqyEhObDUvrX0xC_6dfLsgZoxxXlbk04RJlZo0uAFLNCTYWREN4rNZnIJDh-3gUd4JzjnL1O/s1600/seociyus.blogspot.com_029.gif'/> :i
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzAK4-ySaAb3j1fpoJZVfvy33Zm6L5IOe_4zLFfeNQhwueS-QiltgveI9K2Zj_r-tnA18DV8lL1LBS2aYXGAUXCKpgONFTcsHca-FDNp_bm2X4_fNEImTW7B2IIWlp6RAduDeMvQaop6zE/s1600/seociyus.blogspot.com_031.gif'/> :j
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWtI1xKf3eqlDxo8jkn3rz7LUyON1qCDY_c9KG87eGMhJy0GgZT3AtkAaK_SOsc_dU8Vcfqsvnd4g_qG4cnEUhELtH9Ug8biKjI8kx7Ufj-zbVzZi1SPnXj6tLY2PqpTlwazpJGj0g_IAy/s1600/seociyus.blogspot.com-chick-smiley-01.gif'/> :k
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQPzmEjEPK1dTKtZQYuhybjjx9eaKsqezrXhnlmZWNGKzFqolmrqJFte4b5xMgM9_PSr-_f0gS5tjpD6vlKq5PsX5ppYV4Aua473CFSmYo7hRQNoJtuKU04gcVHf8r3cyITDOLIfhUNJyP/s1600/seociyus.blogspot.com-chick-smiley-05.gif'/> :l
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEaFt7rrJ6qUCOo8_tf-1C2FnSclnVISgUkBc1TBWzEUhFoAFpq7TMQj1sX4iLlmqakSrkHoDOV_Pd6-PtIrtEI_Ga-XVlC43jqPas0NJu7aKEjfXNnE0iTSHAzZ6LbXMknEVN1cSiWwi6/s1600/seociyus.blogspot.com_042.gif'/> :m
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheqM6IoqFsURtXHl0mYz5ersrf7pzF6ukDTcFJKn_r0cd2rCL674Q4Wt4tNYfPM8EQAjdjRLxrXQXHi99lKw3oRQYrdEqjFeK-GZFXDYM0Bd1_HhaNiOsp5qMbdNr0gIZnfEvf-DkF-dYG/s1600/seociyus.blogspot.com_040.gif'/> :n
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPgTBojpQ_3ut01XR4iLac4y7ZRB9Kv_J-NBer54IrpO_BlEk4YiqfM_XnRhTeAM0ltQf_mMY4sx8EP58Sg7S_Oo3K0Mvwrfpl-N5Tpl2LGBsFe1aRzknhGLb1z2CQxVFj3VNGkx1DYt4v/s1600/seociyus.blogspot.com-girl-emoticon-11.gif'/> :o
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMlarwTBG2rT6Vhr3QvTA5ZJ9OjgrOWwXSJ-FHDbFJnrb2_QFEW-FUJr1BfkbFQ2LMu-bTHtz5StPuQx3VtxkUtJYeVkTWDpbIbZs_K4E6Fzu1AafirLmKMyDa-Zj7watVDePzRakKb1Y8/s1600/seociyus.blogspot.com-girl-emoticon-19.gif'/> :p
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpXA0S72RnzWdyJwtt2JiAbSjn3jFPHdlhAnecxuTRcA1dRIViAyQWF1yJn7CMdhqAx7B4bgvxR8m0YdyZ8DlGSBqlCKOBlPXLnZvjOiemJKW95Qk8YnSvoqgjcCLxcWwQZVTvk75LQzsF/s1600/seociyus.blogspot.com-girl-emoticon-18.gif'/> :q
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYzRjHsCGFAbw-kNwImUZmt0HMwM3X0AgdzZX0sgIqocUh1xobbFA9VuqAOc7CxaKCvEzxxcrJUO230hcUnTeJ_bgRhnK7Jxzz1d3iCyJd3bIhe3slEGLbIDFPE6dWuIkiuwjxamYOodC6/s1600/seociyus.blogspot.com-glass-leaf-emoticon.gif'/> :r
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTsGy0cmY8BIoz6juyzTCucEg3nuIxatb_2J7qbDK_dF8KJXLwP9KPM8Q-iE78S09pMvOuZC0KqNzTcy1tGxWp81yBp5m0jmBquUDbOeNJ1HshpSyd7HjW47ndbkPFHfs65r_Aq8Jo_25T/s1600/seociyus.blogspot.com-laugh-leaf-emoticon.gif'/> :s
&#160;
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd6uFnN8kkAZER9_68ePxjcRDBweHZGljpsRCV_kiPKVxdXYaxNMdE4W8H3bYiAM90WKVZVYz6ifRDJIPqwKgPdtAmAjuHR4ZE5kafkG99P5k1uG17g_TNKN00g9ZzmMfyx3Q0oqckkrZ6/s1600/seociyus.blogspot.com-sign-leaf-emoticon.gif'/> :t
&#160;
<div style='text-align: right;'>
<a href='http://seociyus.blogspot.com/2013/04/pasang-emoticon-campuran-keren-di-komentar-blog.html' target='_blank' style='color: #1e7ab7; font-size: x-small;'> Dapatkan emoticon ini!</a></div></div></b:if>

• Kalau udah beres sekarang ke langkah selanjutnya gan. Sekarang loe cari kode </body> di template blog dan copy paste kode Javascript di bawah ini di atasnya gan.

<script src='https://sites.google.com/site/seociyussite/file/seo_ciyus_smiley_komentar_bloggerV2.js' type='text/javascript'/>

• Dua langkah di atas beres berarti sekarang blog loe udah ada emoticon campuran kerennya gan. Tinggal di preview dulu kalau gak ada masalah baru di Save template gan. Coba di buka blognya pasti udah ada emoticonnya, selamat gan dan jangan lupa bilang terima kasih.

Sekarang tinggal di edit aja kalau loe mungkin gak suka sama warna dan style bordernya atau ukuran kotaknya gan. Caranya tinggal ganti aja warna sama style border dan ganti juga ukuran width sesuka loe gan. Terus buat posisi kotak emoticonnya loe bisa atur sesuai keinginan, tinggal dirubah aja angka di margin-left semakin besar maka semakin ke kanan kotaknya gan. Kalau loe pengen kotak emoticonnya ada tombol buka tutupnya silahkan di cek kode javascript untuk blog.

Note : Tolong jangan di hapus link ke postingan ini ya gan. kalau loe gak suka ada linknya silahkan di isi rel nofollow gak kenapa ok gan.


Sekian yang bisa gw share tentang cara pasang emoticon campuran keren di komentar blog gan. Semoga aja loe suka sama emoticon ini, kalau ada pertanyaan silahkan di tanyain dan jangan lupa ninggalin komentar gan.

Udah pada tau kan kalau sekarang tampilan edit template Blogger udah berubah gan. Lebih keren, moderen dan simple mirip-mirip kayak edit template di WP. Sekarang udah gak ada lagi fitur Expand Widget di edit templatenya gan. Kalau mau cari kode langsung tinggal di search aja dan kalau mau edit bagian tertentu dari widget di template udah disediain pilihannya gan.

Sebenernya buat yang udah lama ngeblog tampilan edit template baru ini sama aja gak ada bedanya gan. Tapi mungkin buat yang baru ngeblog pasti bingung, apalagi kebanyakan tutorial yang ada di blog ini masih pake cara edit template versi lama. Oleh karena itu gw buat tutorial cara edit template Blogger versi baru ini biar loe bisa ngerti gan.

Langsung aja silahkan disimak penjelasan tentang cara edit template Blogger versi baru ini gan.

Cara Edit Template Blogger Versi Baru

Pertama kalau mau edit widget udah disediain pilihannya gan. Tinggal di klik aja Jump to widget ntar bakal muncul pilihan widget yang ada di blog loe. Setiap widget yang loe pilih ntar bakal ditandai kodenya dengan tanda panah kecil dan sudah ada angka yang nunjukin urutan baris ke berapa kode tersebut gan.



Sekarang untuk mencari kode di template blog, kalau dulu kita mesti centang Expand Widget Template sekarang gak pake lagi gan. Untuk nyari kode tinggal klik aja di sembarang tempat di dalam kotak kodenya lalu teken Ctrl+F. Nanti bakal muncul kotak search di pojok kanan atas, tinggal di ketik aja kodenya nanti bakal langsung ketemu gan.



Itu aja yang baru di edit tempalte Blogger gan. Untuk Format Template itu tentu fungsinya untuk memformat tempalte blog biar lebih rapi dan valid, silahkan aja dicoba sendiri gan. Sekian dulu ulasan singkat gw tentang cara edit template Blogger versi baru ini, semoga bermanfaat. Jangan lupa ninggalin komentar di bawah gan.

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.

Salah satu cara biar blog kita ada di halaman pertama Google adalah dengan membuat blog lebih SEO friendly gan. Disamping isi postingan yang menjadi faktor utama blog ada di halaman pertama Google. Blog yang SEO friendly itu biasanya lebih mudah bersaing di pencarian. Karena robotnya om Google lebih gampang membaca dan menganalisa blog tersebut.


Memang ada juga blog yang gak SEO friendly bisa nangkring di halaman pertama pencarian. Kenapa bisa begitu? karena memang isi dari blog tersebut memang bener-bener unik dan sangat menarik jadi Google memberi nilai plus gan. Mungkin di luaran sana sudah banyak yang membahas cara membuat blog agar lebih SEO friendly, tapi gak ada salahnya kali ini gw juga pengen share hal yang sama gan.

Tutorial ini khusus untuk blog berflatform Blogger gan. Silahkan disimak kalau mungkin blog kalian belum SEO friendly. Siapa tau dengan menyimak dan mempraktekan ulasan gw berikut ini blog kalian bisa ada di halaman depan om Google. Langsung aja ke topik utama cara membuat blog agar lebih SEO friendly, cek it dot gan.

Membuat Blog Agar Lebih SEO Friendly

Sebelumnya gw cuma mau ngingetin aja kalau Blog yang super SEO friendly sekalipun gak akan bisa bersaing di pencarian Google kalau isi postingannya gak unik dan menarik sama sekali gan. Jadi ini hanya salah faktor penting pembantu aja agar blog kita mampu bersaing dan disukai mesin pencari.

Yang pertama kita edit dari sisi Template blog gan. Kode-kode HTML di template blog biasanya yang paling diperhatikan seorang blogger agar blognya lebih SEO friendly. Ada beberapa bagian tempalte yang akan kita edit diantaranya sebagai berikut ini gan.

1. Meta Tag

Pasang meta tag di template blog biar Googlebot lebih mudah merayapi blog kalian gan. Baca di tutorial gw sebelumnya tentang cara memasang meta tag.

2. Title Tag

Buka edit template blog lalu cari kode <title><data:blog.pageTitle/></ title> dan ganti dengan kode dibawah ini gan.

<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>

Fungsi kode ini agar judul postingan kita ada di depan judul blog, ini penting untuk posisi di pencarian terutama dengan kata kunci yang persaingannya berat gan.

3. Heading Tag

Kita awali ganti Heading tag untuk postingan, kalian cari kode di bawah ini lalu ganti h3 dengan h2 gan.

<b:if cond='data:post.title'>
<h3>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

Masih dengan heading tag untuk judul postingan, kalian cari kode dibawah ini lalu ganti h3 menjadi h2 gan. Kadang di beberapa template kodenya akan ada kalimat tambahan itemprop='name' dan memakai h1 tag, tetep lakuin hal yang sama dengan mengganti jadi h2 gan.

<h3 class='post-title entry-title'>
<data:post.title/>
</h3>
 
Atau/Dan

<h3 class='mobile-index-title entry-title'>
<data:post.title/>
</h3>

Lanjut edit heading tag untuk widget, kalian cari kode dibawah ini lalu ganti h2 jadi h3 gan. Sebenernya gak perlu dirubah juga gak kenapa, tapi agar lebih SEO friendly diganti aja gan. Kalau jumlahnya lebih dari satu diganti semua gan.

<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'>
<data:title/>
</h2>
</b:if>

Heading tag ini menurut gw gak begitu berpengaruh, yang penting jangan sampai ada lebih dari satu H1 tag karena bakal bikin robotnya om Google bingung gan.

4. Duplikat Konten (Archive)

Yang terakhir kita pasang kode untuk menghindari duplikat konten dari archive blog gan. Silahkan copy kode dibawah ini lalu paste di antara <head> </head> tag gan.

<b:if cond='data:blog.pageType == "archive"'>
<meta content='noindex' name='robots'/>
</ b: if>

Jangan sampai ada duplikat konten di blog karena sangat membahyakan kelangsungan blog kalian. Selain penurunan rangking hal ini juga bisa menyebabkan blog lenyap dari pencarian Google gan.


Setelah mengedit template blog sekarang lanjut mengatur tampilan dan struktur blog kita gan. Apa saja yang perlu ditambahkan di blog kita gan. Berikut ini hal-hal yang perlu ditambahan agar blog lebih SEO friendly gan.

1. Google Analystic & Webmaster Tool

Google merupakan mesin pencari yang paling banyak digunakan di internet. Bisa dikatakan 90% pengunjung blog kita berasal dari Google gan. Oleh karena itu kita harus bersahabat sama om Google dengan cara memasang Google Analystic di blog dan submit blog ke Webmaster Tools. Untuk tutorialnya silahkan cari di pencarian karena gw gak buat soalnya gampang banget caranya gan.

Kedua alat gratisan ini penting dan banyak sekali fungsinya, yang paling utama untuk menganalisa blog kita. Dari hasil analisa tersebut nanti kita bisa semakin meningkatkan kualitas blog dan menambah jumlah pengunjung gan. Memang butuh waktu untuk mempelajarinya, banyak tutorialnya di google gan.

2. Google+

Ini mungkin gak banyak disadari sama para blogger, kalau kita memasang Google+ badge atau button akan membuat blog lebih SEO friendly. Kalian tau kalau Google+ itu kepunyaanya om Google jadi dengan memasang badge ini kita lebih dekat dan bersahabat dengan Google gan.

Kelebihan dari Google+ ini adalah postingan yang kalian share ke Google+ akan cepat terindex Google, lalu kalau kalian sudah menyambungkan Google+ dengan profil Blogger (setingnya ada di dashboard blog) dan foro author muncul di pencarian maka Google akan ngasi nilai plus agar blog kalian lebih bisa bersaing gan. Selain itu juga dapat meningkatkan trafik blog kita secara organik gan. (sekarang sudah gak ada lagi)

3. Menu Navigasi

Buat dan aturlah menu navigasi blog semudah mungkin untuk pengunjung gan. Karena Google gak suka dengan blog yang menu navigasinya menyusahkan pengunjung. Usahakan menu utama kalau pakai dropdown jangan yang menggunakan Javascript tapi cukup dengan CSS aja gan.

Kalau blog kalian isi postingannya banyak, tambahin menu navigasi Blog Archive atau Label. Jangan pakai label cloud yang menggunakan Flash karena akan membuat blog tambah berat gan. Bisa juga pasang breadcrumbs kalau postingan di blog sangat banyak gan.

4. Widget

Untuk widget ini masalah selera aja, tapi usahakan jangan memasang widget yang menggunakan Flash gan. Widget yang penting harus dipasang antara lain widget Popular Post, lalu Related Post dan Share Button ke Sosial Media gan. Ketiga widget tersebut sederhana namun sangat berguna untuk membuat blog lebih SEO friendly dan meningkatkan pageview serta backlink gan.

Tambahkan juga widget email subcription dari Feedburner untuk menambah jumlah pengunjung blog gan. Tambahan aja kalian juga bisa submit blog ke Alexa dan pasang widgetnya di blog, karena Alexa Rank salah satu faktor penting untuk memoneytize blog selain Page Rank gan.

Intinya sebelum memasang widget dipikir dulu apa perlu dipasang atau tidak gan. Jangan memasang widget cuma untuk memperkeren blog, gak ada gunanya malah bikin blog tambah berat gan.


Sekian dulu yang bisa gw share tentang cara-cara membuat blog agar lebih SEO friendly gan. Cuma ngingetin aja jangan pusing mikirin SEO tapi fokus membuat postingan yang semenarik mungkin untuk pengunjung bukan Google gan. Semoga postingan ini bermanfaat buat kalian semua dan jangan lupa ninggalin komentar ya gan.

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 tutorial membuat blogspot.

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.

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

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.

<meta content='Facebook Profile ID' property='fb:admins'/>
<meta content='Aplikasi Facebook ID' property='fb:app_id'/>

• Tinggal di ganti aja Facebook Profile ID dan Aplikasi Facebook ID dengan ID punya kalian. Buat tau facebook profile ID bisa di cek di findmyfacebookid.com gan.

• Sekarang cari kode ]]></b:skin> lalu copy dan paste kode CSS di bawah ini di atasnya gan.

 .comments-page{ background:#fff;}
#blogger-comments-page { padding: 20px; display: none;border:1px solid orange;border-radius:5px;}
#fb-comments-page{border:1px solid blue;border-radius:5px;padding:20px;margin-top:10px;}
.facebook-tab { float: left;cursor: pointer;margin-right:2px;border:1px solid #25729a; -webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius: 3px;font-family:arial, helvetica, sans-serif; padding: 10px 10px 10px 10px; text-shadow: -1px -1px 0 rgba(0,0,0,0.3);font-weight:bold; text-align: center; color: #FFFFFF; background-color: #3093c7;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3093c7), color-stop(100%, #1c5a85));
background-image: -webkit-linear-gradient(top, #3093c7, #1c5a85);
background-image: -moz-linear-gradient(top, #3093c7, #1c5a85);
background-image: -ms-linear-gradient(top, #3093c7, #1c5a85);
background-image: -o-linear-gradient(top, #3093c7, #1c5a85);
background-image: linear-gradient(top, #3093c7, #1c5a85);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#3093c7, endColorstr=#1c5a85);
}
.facebook-tab:hover {border:1px solid #1c5675; background-color: #26759e;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#26759e), color-stop(100%, #133d5b));
background-image: -webkit-linear-gradient(top, #26759e, #133d5b);
background-image: -moz-linear-gradient(top, #26759e, #133d5b);
background-image: -ms-linear-gradient(top, #26759e, #133d5b);
background-image: -o-linear-gradient(top, #26759e, #133d5b);
background-image: linear-gradient(top, #26759e, #133d5b);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#26759e, endColorstr=#133d5b);
}
.blogger-tab {float: left;cursor: pointer;border:1px solid #ffc826; -webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius: 3px;font-family:arial, helvetica, sans-serif; padding: 10px 10px 10px 10px; text-shadow: -1px -1px 0 rgba(0,0,0,0.3);font-weight:bold; text-align: center; color: #FFFFFF; background-color: #ffd65e;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffd65e), color-stop(100%, #febf04));
background-image: -webkit-linear-gradient(top, #ffd65e, #febf04);
background-image: -moz-linear-gradient(top, #ffd65e, #febf04);
background-image: -ms-linear-gradient(top, #ffd65e, #febf04);
background-image: -o-linear-gradient(top, #ffd65e, #febf04);
background-image: linear-gradient(top, #ffd65e, #febf04);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#ffd65e, endColorstr=#febf04);
}
.blogger-tab:hover{ border:1px solid #f7b800; background-color: #ffc92b;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffc92b), color-stop(100%, #ce9a01));
background-image: -webkit-linear-gradient(top, #ffc92b, #ce9a01);
background-image: -moz-linear-gradient(top, #ffc92b, #ce9a01);
background-image: -ms-linear-gradient(top, #ffc92b, #ce9a01);
background-image: -o-linear-gradient(top, #ffc92b, #ce9a01);
background-image: linear-gradient(top, #ffc92b, #ce9a01);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#ffc92b, endColorstr=#ce9a01);
}

• Tahap berikutnya loe copy dan paste kode javascript di bawah ini di antara kode ]]></b:skin> dan </head> gan. Bebas mau di pastein di bagian mananya.

<script src='https://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<script type='text/javascript'>
function commentToggle(selectTab) {
$(".comments-tab").addClass("inactive-select-tab");
$(selectTab).removeClass("inactive-select-tab");
$(".comments-page").hide();
$(selectTab + "-page").show();
}
</script>

• Langkah terakhir gan, loe cari kode <div class='comments' id='comments'> lalu pastein kode HTML di bawah ini tepat di bawahnya gan. Kodenya bisa ada 2 atau 1 tergantung templatenya, kalo ada 2 pastein di bawah kedua kodenya gan. Info aja kalo template loe gak pake threaded comment gak bisa gan.

<div class='facebook-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Komentar Dari Facebook'>
<fb:comments-count expr:href='data:post.url'/> Komentar di Facebook
</div>
<div class='blogger-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Komentar Dari Blogger'>
<data:post.numComments/> Komentar di Blogger
</div><div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/><div align='left'><font color='blue' size='4'><strong>Silahkan Berkomentar Melalui Akun Facebook Anda</strong></font></div><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTvrwcYWiwbWQcJWncSeStvyYxl9g-KddTcwYAUv812TJH7BsjEH2XC0xKRsh4CHLb5MOlPPgedVK9Os1__KIpS8RJGJL0CgTe23417W7-nQ_YCaa5YxhNelWuOjd_A1AQDi8ylX16tU3j/s1600/facebook-icon.png'/><div align='right'><a href='http://seociyus.blogspot.com/2013/02/cara-membuat-komentar-facebook-keren-di-blog.html' target='blank'><small>Get This Facebook Comment</small></a></div>
<fb:comments expr:href='data:post.url' num_posts='5' width='500'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>
<div align='left'><font color='orange' size='4'><strong>Silahkan Tinggalkan Komentar Anda</strong></font></div><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaBeTaWwC8edcv4Ielio0Dh7aFpr7X71en_vD0YuvNUm-osvs3A3QjSId3vQbcUd7w1Pl25U6mU6SoONXk-G6m3QiWQkJ2lxR1GAnEsCg0PAEi-R4eHUm300C8F96cmbUmw3n7sYI0JqqI/s1600/Blogger-icon.png'/>

• Buat jumlah komentar facebook yang mau di tampilin loe rubah aja angka 5 sesuai keinginan dan ganti angka 500 untuk ukuran lebar komentar facebooknya di sesuaiin sama template loe gan. 

• Belum selesai gan, satu step lagi sekarang cari di bawah kode tadi kode <h4><data:post.commentLabelFull/>:</h4> lalu hapus, kalo ada 2 hapus keduanya beres deh tinggal di preview buat mastiin gak ada masalah, baru di Save template gan.

Sekarang coba di buka blognya apa udah ada komentar facebooknya belum. Kalo ada selamat berarti loe berhasil membuat komentar facebook keren di blog gan. Mulai sekarang pengunjung blog loe bisa dengan mudah ninggalin komentar lewat akun facebook mereka gan.


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


Sekian dulu yang bisa gw share kali ini semoga kalian suka dengan komentar facebook keren ini. Kalo ada masalah silahkan di tanyakan dan jangan lupa meninggalkan komentar di bawah gan.