Cara Pasang Facebook Like Fan Box di Blogger

Apabila anda ingin memasang Facebook Like Fan Box di Blogger/Blogspot, ini adalah tombol suka FB sekaligus like Fan Page Facebook dalam satu kotak widget praktis dan cantik untuk di pasang di bawah posting blog anda. FB Like Fan Box ini sangat berguna untuk memudahkan pengunjung blog anda berbagi konten ke jaringan teman facebook mereka jika merasa suka dengan isi konten artikel blog anda. Paket tombol suka dan tombol penggemar halaman Facebook ini di desain oleh Dezign Matterz. Dan trik ini saya dapatkan via blog yang telah menggunakan Facebook Like Box for Blogger duluan dari blog Panduan Bloggers.
Lihat contoh di bawah ini, gaya dan elegant khan!?
Tertarik? siap mencoba? : ok, kita mulai dari:

1. Login ke akun blog Anda, masuk Design > Edit HTML dan centang "Expand Widget Templates"

2. Cari kode ini ]]></b:skin> (supaya mudah gunakan Ctrl +F), salin kode di bawah lalu tempelkan tepat di atas kode tadi.
.fb_like_box {
margin-top:10px;
-moz-border-radius:10px 10px 10px 10px;
border-radius:10px;
background-color:#3B5999;
border:3px solid #2B2B2B;
margin-bottom:10px;
padding:10px 7px;
width:500px;
}
.fb_like_top {
overflow:visible;
padding:0;margin:0 0 5px;
width:349px;
height:24px;
background:url("http://2.bp.blogspot.com/-H_AxehGZDl0/UQ_9hwK8GeI/AAAAAAAABmE/Kx5LK2gVP4U/s1600/BecomeaFan.jpg") no-repeat scroll left top transparent;
}
.fb_like_top a {
height:24px;
width:114px;
background:url("http://1.bp.blogspot.com/-w8dlQC7Q59U/UQ_9iLEgxII/AAAAAAAABmI/ohykLOK2ux0/s320/fblikeshare.jpg") no-repeat scroll left top transparent;
display:block;
margin-left:385px;
text-indent:-5000px;
}.fb_like_button_holder {
-moz-border-radius:10px 10px 10px 10px;
border-radius:10px;
background:none repeat scroll 0 0 #FFFFFF;
padding:12px 12px 0 12px;
width:475px;
height:42px;
}
3. Kemudian cari kode ini  <data:post.body/>, lalu simpan kode berikut tepat di bawah kode ini <data:post.body/> :
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='fb_like_box'>
<div class='fb_like_top'><a rel='nofollow' href='http://www.facebook.com/Tambahkan Profil halaman Facebook Anda'>Be a Fan</a></div>
<div class='fb_like_button_holder'>
<b:if cond='data:post.isFirstPost'>
<script>(function(d){
  var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
  js = d.createElement('script'); js.id = id; js.async = true;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  d.getElementsByTagName('head')[0].appendChild(js);
}(document));</script>
</b:if>
<fb:like expr:href="data:post.url" layout='standard' send='true' show_faces='false' width="450" font="arial" action="like" colorscheme="light"></fb:like>
</div>
</div>
</b:if>
 Ganti huruf yang di blok merah di atas dengan profil halaman FB blog Anda.

4.  Setelah itu, Anda harus memasang tag <html dengan tag FBML ini <html xmlns:fb="https://www.facebook.com/2008/fbml" - lihat contoh gambar di bawah:


 menjadi seperti ini:

Jika Anda sudah memiliki tag seperti di atas, lewatkan saja proses no 4 di atas.

5. Simpan/Save Template. Lihat hasilnya di halaman posting.

Jika ada masalah dalam cara pasang Facebook Like Fan Box di Blogger/blogspot, silahkan kirim lewat komentar. Saya akan berusaha membantu.
read more

Cara Pasang Kode Adsense di Bawah/Atas Posting

Untuk Bloggers yang ingin memasang kode adsense di bawah posting artikel atau memasang kode iklan di atas posting artikel blog, sebenarnya sangat mudah, cepat dan praktis. Mungkin anda sudah banyak membaca tips dan triks untuk menampilkan iklan yang benar dan tepat, tetapi terkadang agak sulit dan sering terjadi error akibat menyimpan kode script adsense di tempat yang salah dan dapat menggangu template blog anda.

Jika anda akan memasang kode script Google Adsense, sebaiknya di parse dulu agar muncul sempurna.
Untuk memparse kode GA silahkan gunakan layanan ads converter, cukup masukan kode GA di kotak lalu klik convert ad code, dan simpan hasilnya di notepad.

Untuk memasang kode iklan selain Google Adsense, anda tidak perlu memparse, karena dari pengalaman saya blogger template akan secara otomatis merubahnya. Kalaupun ada kode ads lain yang perlu di ubah, lakukan seperti proses parse kode GA di atas.

Mari mulai praktek:
1. Login  ke Dashboard blog anda, klik Design lalu klik Edit html.
Centang Expand Widget Template.

2. Cari kode <data:post.body/>, supaya mudah gunakan ( Ctrl+F )
Kemudian simpan kode adsense tepat di atas kode <data:post.body/> hasilnya lihat contoh di bawah :
<b:if cond='data:blog.pageType == &quot;item&quot;'>
Kode adsense di sini
</b:if>
<data:post.body/>
Catatan: Kode <b:if cond='data:blog.pageType == &quot;item&quot;'> fungsinya untuk membatasi iklan hanya muncul pada halaman posting saja, karena jika tidak dibatasi maka iklan akan muncul pada halaman index/label atau kategori.

Lalu Simpan/Save Template. Lihat hasilnya.

Cara di atas adalah cara mudah menampilkan iklan/google adsense tepat di bawah judul posting dan tepat di atas konten artikel.

Lalu bagaimana cara menempatkan kode iklan supaya muncul di samping kiri atau kanan bagian awal konten tapi masih di bawah judul posting ?
Mudah juga, anda cukup menambahkan kode berikut di antara kode iklan yang anda pasang :
<div style='display:block;float: left; margin: 5px; '>
</div>
Hasilnya akan terlihat seperti berikut ini :
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style=display:block;'float: left; margin: 5px; '>
Kode adsense anda di sini
</div>
</b:if>
Untuk menampilkan iklan di sebelah kanan samping artikel bagian atas, anda cukup ganti huruf left dengan right.
Kode <div style='display:block;float:left;margin: 5px;'> fungsinya untuk mengoptimalkan tampilan adsense agar muncul sempurna tanpa gangguan dari konten lain dan meningkatkan CTR adsense.

Catatan : Jika anda menggunakan cara menyisipkan kode iklan agar muncul di samping awal konten artikel ini, mungkin sebaiknya pertimbangkan dulu untuk mengecek apakah postingan artikel anda selalu di tambah gambar di awal artikel atau tidak, karena jika gambar artikel sama penempatannya dengan iklan muncul di samping, akan tidak terlihat baik di mata pengunjung. Jadi, anda harus coba dulu.

Untuk memasang script google adsense di bawah posting, simpan script iklan adsense di bawah kode <data:post.body/> seperti contoh berikut:
<data:post.body/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
Kode adsense anda di sini
</b:if>
Silahkan uji coba, semoga bermanfaat dalam mempelajari cara pasang kode adsense di bawah judul atau di atas konten artikel, dan cara menyisipkan kode iklan agar tampil di bawah postingan artikel blog.
read more

Cara Mudah Pasang Favicon di Blogger/Blogspot

Untuk teman bloggers yang ingin memasang favicon di blogger/blogspot. Mari kita praktek cara mudah dan praktis bikin favicon untuk dipasang di Blogger, bahkan tidak perlu menggunakan aplikasi lain seperti pada jaman dulu karena Blogger telah memberikan kemudahan pada kita untuk memasang favicon di blog kita walaupun blog gratisan. Gunanya favicon adalah untuk memberikan identitas khusus/pribadi berupa gambar kecil di sebelah kiri kolom alamat URL/tabs browser yang digunakan ketika pengunjung membuka blog anda. Gambar favicon kecil itu akan memberikan kesan bahwa anda serius dan kreatif membuat sebuah blog, bukan asal-asalan. Meski masih blog gratisan, anda tidak perlu merasa malu/minder dalam berkreasi, yang penting adalah blog anda beretika dan di isi konten yang berguna juga bermanfaat untuk pembaca. Toh, kualitas konten tidak di ukur dengan blog gratis atau berbayar khan.? yang penting Niat baik...teman!

Ok...kita mulai aja.
Teman hanya perlu menyiapkan sebuah gambar kecil kotak persegi dengan format file jpg, jpeg, gif, png dan file berukuran kurang dari 100kbyte saja (wajib), jangan gunakan gambar persegi panjang karena akan gagal.

1. Masuk/Login ke Dashboar Blogger teman. Kemudian klik Design > Page Element/Tata letak, lihat gambar di bawah : - Anda tinggal klik edit pada kotak Favicon untuk memasukan gambar.
Pasang Favicon di Blogger

2. Setelah klik Edit, akan muncul popup seperti gambar bawah, lalu klik Browse/Choose File atau kotak kosong untuk mengambil file gambar yang tersimpan di komputer anda. Pastikan gambar berukuran kotak persegi maksimal 100kbyte. Lalu klik Save / Simpan.
Pasang Favicon di Blogspot

3. Jika berhasil, maka akan kelhatan seperti gambar di bawah ini :
Cara Mudah Pasang Favicon

Perlu di ketahui, saya beberapa kali gagal dalam mengubah gambar favicon hanya karena memasukan gambar persegi panjang dan ukuran file lebih dari 100kbyte, lalu saya edit dgn photoshop agar hasil bener-bener kotak persegi dan ukurannya pas.

Tapi ada lagi cara mudah dan praktis untuk merubah gambar supaya menghasilkan gambar siap pake untuk Favicon blog dengan mengunjungi Favicon generator di sini. Anda hanya klik Browse (lihat gambar di bawah) untuk mengambil file gambar yang tersimpan pada komputer, lalu klik tombol Generate Favicon, kemudian klik Click Here to Download Your Favicon! > simpan di komputer.

Favicon generator

Hasil download dari Favicon Generator akan menggunakan file seperti ini favicon.ico, lalu ganti ico dgn jpg atau png. kemudian lakukan seperti proses ke 1 dan ke 2 di atas. Selesai. Cara ini adalah cara paling mudah dan cepat memasang favicon di Blogger/blogspot.
read more

Panduan Blogger | Belajar Blogging | Cara Membuat Blog | Blog Terbaik | Tips dan Trik Blogging | Search Engine Optimize | Peringkat Pertama Teratas | Halaman Pertama SERP | Pemahaman Blogging | Bisnis Online | Optimasi SEO | Tutorial Blogger | Blogger Widget | Hasil Penelusuran Google | Template SEO Friendly | Cara Posting Artikel | Webmaster Tools | Tips Google Adsense | Monitasi Blog | Menulis Kreatif | Ilmu Blogging | Rahasia Blogging | Rahasia SEO | Kata Kunci | Keywords | Meta Tag | HTML 5 | JavaScript | Internet | Template Blogger Gratis | Blogger Themes Premium | Mesothelioma | Meso the lioma | Mulai Membangun Blog | Blogger Pemula | Blogspot | Bagaimana Cara | Trik SEO