Click Here

Labels

Kotak Komentar Facebook/Facebook Comment Box Terbaru (With Reply)

Setelah jalan-jalan ke google, walhasil ketemu dengan tips membuat facebook comment box/kotak komentar facebook yang cukup unik, berbeda dengan facebook comment box yang lama. disini terdapat perbedaan di bagian comment body-nya yaitu memiliki fitur Reply seperti layaknya status di facebook.

Pada Facebook Comment Box yang terbaru ini juga bisa mengirimkan pemberitahuan kepada admin atau pemilik website/blog tersebut jika ada seseorang yang meninggalkan komentar de website/blog tersebut. Cukup menarik bukan, karena berbeda dengan Comment Box yang lama, yang tidak memiliki fitur Reply (Balas), Like (Suka), Notification (Pemberitahuan).

Sebelum mencobanya, ada baiknya lihat screen shot nya dibawah ini :

Untuk melihat Demo nya, silakan kunjungi webblog teman saya yang sudah mencobanya DISINI

Untuk membuatnya, pertama-tama dapatkan Aplikasi ID dengan membuat aplikasinya disini [http://developers.facebook.com/setup/]
Jika kurang mengerti cara membuat Aplikasi ID Facebook, silakan lihat caranya DISINI

Jika sudah mendapatkan Aplikasi Id, sekarang anda bisa memasang Facebook Comment Box/Kotak Komentar Facebook yang baru ke Blog anda.Berikut cara-caranya.
  • Masuk ke blogger
  • Dihalaman Dasbor/Dashboard, klik Rancangan/Design.
  • Lalu klik Tab Edit HTML
  • Centang Expand Widget Template
Langkah 1
Cari kode berikut <head>
Letakkan kode berikut ini setelah kode diatas tadi
<meta content='App ID' property='fb:app_id'/>
<meta content='ID Profile Facebook' property='fb:admins'/>
  • Ganti tulisan App ID dengan Aplikasi ID anda
  • Ganti tulisan ID Profile Facebook dengan ID profil facebook anda

Langkah 2
Langkah selanjutnya, cari kode <data:post.body/>
Jika anda menggunakan fitur auto readmore, letakkan kode berikut ini setelah kode <data:post.body/> yang KEDUA.
atau
Anda bisa juga meletakkan kode berikut setelah code
<div class='post-footer-line post-footer-line-1'>

<!-- FACEBOOK COMMENT FORM -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/><script>window.fbAsyncInit = function() {
FB.init({appId  : &#39;App ID&#39;,
status : true,
cookie : true,
xfbml  : true});};
(function() {var e = document.createElement(&#39;script&#39;);e.src = document.location.protocol + &#39;//connect.facebook.net/en_US/all.js&#39;;e.async = true;document.getElementById(&#39;fb-root&#39;).appendChild(e);}());</script><fb:comments expr:href='data:post.url' migrated='1' expr:title='data:post.title'/>
<div style='float:right; padding:10px><a href='http://serba-seru.blogspot.com/2011/02/cara-pasang-kotak-komentarcomment-form.html' target='_blank' title='Cara pasang kotak komentar Facebook di Blogger'>Grab This Comment Form</a></div></div>
</b:if>
<!-- FACEBOOK COMMENT FORM -->


Nb :
Namun jika anda ingin kotak komentar yang sudah di perindah dengan tampilan kotak [lihat disini Demo-nya]
silakan gunakan kode berikut sebagai pengganti kode pada langkah kedua :
<!-- FACEBOOK COMMENT FORM -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='background-color:#ECEFF6; padding-top:10px; padding-left:10px; padding-right:10px; padding-bottom:40px; -moz-border-radius:4px 4px 4px 4px; -webkit-border-radius:4px 4px 4px 4px; -goog-ms-border-radius:4px 4px 4px 4px; border-radius:4px 4px 4px 4px; border:1px solid #627AAD; border-bottom:1px solid #2A4280; border-right:1px solid #2A4280;'>
<div align='left' style='text-align:left; background:#3B5998; -moz-border-radius:4px 4px 4px 4px; -webkit-border-radius:4px 4px 4px 4px; -goog-ms-border-radius:4px 4px 4px 4px; border-radius:4px 4px 4px 4px; border:1px solid #2A4280; border-bottom:1px solid #627AAD; border-right:1px solid #627AAD; padding:0 10px; margin-bottom:10px;'><a href='http://serba-seru.blogspot.com' target='new'><img alt='' class='icon-action' height='auto' src='https://lh3.googleusercontent.com/--OC-egBNE7s/TXevxG5Hj2I/AAAAAAAAAM4/PNYGgrc_Q8A/s1600/serba-blog-facebook-comment.png' width='100%'/></a></div>
<div id='fb-root'/><script>window.fbAsyncInit = function() {
FB.init({appId  : &#39;App ID&#39;,
status : true,
cookie : true,
xfbml  : true});};
(function() {var e = document.createElement(&#39;script&#39;);e.src = document.location.protocol + &#39;//connect.facebook.net/en_US/all.js&#39;;e.async = true;document.getElementById(&#39;fb-root&#39;).appendChild(e);}());</script><fb:comments expr:href='data:post.url' expr:title='data:post.title' migrated='1'/>
<div style='background-color: #3B5998;-moz-border-radius:4px 4px 4px 4px; -webkit-border-radius:4px 4px 4px 4px; -goog-ms-border-radius:4px 4px 4px 4px; border-radius:4px 4px 4px 4px; border:1px solid #2A4280; border-bottom:1px solid #627AAD; border-right:1px solid #627AAD; font-size:10px; padding:3px 5px;width:ancho; float:right; margin-bottom:5px;'><a href='http://serba-seru.blogspot.com/2011/02/cara-pasang-kotak-komentarcomment-form.html' target='_blank' title='Cara pasang kotak komentar Facebook di Blogger'>Grab This Comment Form</a></div></div>
</b:if>
<!-- FACEBOOK COMMENT FORM -->

  • Simpan hasilnya

Semoga bisa bermanfaat.

Source : http://adityameilaz.blogspot.com/2011/03/kotak-komentar-facebook-versi-terbaru.html
Kotak Komentar Facebook/Facebook Comment Box Terbaru (With Reply) - READ MORE
Serba Blog

Cara Membuat Halaman Posting Berpindah dari Kiri ke Kanan

Cara Membuat Halaman Posting Berpindah dari Kiri ke Kanan | Sempat bingung menentukan judul artikel yang satu ini, tapi yang jelas gambarannya seperti dibawah ini, Pernah lihat halaman blognya Kang Rohman (kolom-tutorial.blogspot.com), jika diperhatikan, ketika pada halaman beranda/Home page, bagian artikel/posting terletak di sebelah kiri dan sidebar berada di sebelah kanan, dan ketika masuk ke halaman postingnya, halaman artikel akan berada di sebelah kanan dan sidebar di sebelah kiri.

Nah, untuk membuat halaman tersebut agar bisa berpindah-pindah ternyata cukup simpel. ternyata yang dibutuhkan hanya sedikit penambahan pada struktur CSS nya saja. berikut cara-caranya :
  • Login ke Blogger
  • Langsung menuju ke Design/Rancangan
  • Klik Edit HTML
  • centang tulisan "Expand Widget Template"
  • Cari kode berikut :
]]></b:skin>
  • Letakkan kode berikut ini setelah kode diatas 
<style type='text/css'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
#main-wrapper{float:right;}
#sidebar-wrapper{float:left;}
</b:if>
</style>
  • Simpan hasilnya.
Untuk melihat Demonya, silakan lihat DISINI


Source code from kolom-tutorial.blogspot.com
Cara Membuat Halaman Posting Berpindah dari Kiri ke Kanan - READ MORE

Kelebihan dan Kekurangan Facebook Comment Box

Kelebihan dan Kekurangan Facebook Comment Box | Setelah sebelumnya membuat artikel tentang "Cara Pasang Kotak Komentar/Comment Form Facebook di Blogger", disana memaparkan tentang cara membuat Kotak Komentar Facebook di Blogger. Nah, kali ini mencoba mengangkat tentang kelebihan dan kekurangan dari penggunaan Facebook Comment Box atau Kotak Komentar Facebook.

Adapun kelebihan menggunakan Facebook Comment Box menurut saya khususnya, bisa menjaring jumlah pengunjung ke blog kita. Karena jika kita menggunakan Facebook Comment Box, pada comment box tersebut telah disetting akan memberikan laporan komentar dihalaman profil mereka secara default(tulisan Post comment to my Facebook profile otomatis di centang), sehingga ketika seseorang ingin memberikan komentar pada artikel kita, secara otomatis laporan/notifikasi komentar tersebut akan terkirim ke profil facebook mereka. Bayangkan saja jika ada 100 orang berkomentar di blog baik itu di postingan yang berbeda-beda. Maka secara otomatis 100 Link blog kita akan tersebar di halaman profil facebook mereka. Dengan catatan jika seseorang yang berkomentar tersebut tidak membuang centang pada keterangan "Post comment to my Facebook profile" di bawah kotak komentar tersebut.

Kelebihan lainnya, pada saat ini bisa dikatakan hampir semua kalangan memiliki akun Facebook, maka bisa memberikan kesempatan kepada semua orang dengan mudah untuk memberikan komentar pada artikel di blog kita. Jika kita sudah login ke akun Facebook kita, maka secara otomatis bisa langsung memberikan komentar pada artikel blog yang memiliki kotak komentar Facebook tersebut.

Pada kotak komentar Facebook juga terdapat tombol like, jadi tidak perlu lagi memasang aplikasi like button. nah keuntungan dari tombol like hampir sama dengan berkomentar diatas, jadi secara otomatis jika seseorang menekan tombol like pada kotak komentar artikel blog kita, secara otomatis juga link blog kita akan terkirim ke halaman profil mereka. Tersebar otomatis lagi deh link kita.

Nah, kali ini kekurangan dalam menggunakan Kotak komentar Facebook (Yang hanya menggunakan kotak komentar Facebook saja), kita tidak dapat melihat laporan pada artikel mana saja yang mendapat komentar terbaru. Karena menurut saya pribadi yang memiliki blog yang masih belum populer ini, sebuah komentar itu sesuatu yang sangat penting sekali, sangat berfungsi sebagai pesan/kesan/saran/ide/pendapat/kritik untuk blog. jadi saya masih membutuhkan komentar yang bisa saya kontrol keberadaannya.

Mungkin teman-teman memiliki pendapat lain mengenai kelebihan dan kekurangan Facebook Comment Box, jika ada, silakan tuangkan di kolom komentar dibawah. semoga bisa menambah ide bagi yang lainnya.
Jika dilihat, lebih banyak keuntungan yang diberikan dari Facebook Comment Box. jadi tidak ada salahnya untuk menggunakannya.

laaahhh...Serba Blog koq tidak menggunakan Kotak komentar Facebook..???
Untuk blog ini memang sengaja tidak menggunakan kotak komentar facebook, semua itu dikarenakan pada blog ini, saya mencoba fokus pada artikel yang berkaitan dengan tutorial/tips blogging. Jadi bisa dipastikan pengunjung yang hadir di blog ini sebagian besar mencari artikel yang berkaitan dengan blog dan memiliki akun Blogger sehingga dengan mudah bisa memberikan komentar menggunakan akun Blogger mereka. Bukan berarti saya tidak menggunakan Facebook Comment Box, saya pastinya juga menggunakan Kotak komentar facebook ini, namun saya gunakan di blog yang lain.
Kelebihan dan Kekurangan Facebook Comment Box - READ MORE

Happy Valentine Day 2011

Happy Valentine Day 2011 - READ MORE

Mengoptimalkan Meta Tag Blog

Mengoptimalkan Meta Tag Blog | Setelah kemarin membuat artikel tentang cara "Meningkatkan Jumlah Pengunjung dengan Meta Tag Blog" serta "Mengoptimalkan Blog dengan Meta Tag Title". Masih berhubungan dengan cara meningkatkan jumlah pengunjung dengan Meta Tag Blog. Kali ini mengulas tentang cara mengoptimalkan Meta Tag Blog. wah, kenapa banyak banget aturan mainnya nih, jika sebelumnya sudah menghadirkan  Setting Meta Tag, sekarang di optimalkan lagi, kenapa ga sekalian saja...???

Namanya juga tips & trik(saran), maka itu adalah sebuah pilihan, jadi terserah mau mengikuti/mengambil yang mana. ga di ambil juga ga kenapa-napa...namanya juga pilihan. Namun didalam pilihan tentu ada yang terbaik, jadi ga ada salahnya buat ngambil sesuatu yang terbaik.

Lagipula Tips & Trik mengoptimalkan Meta Tag ini sudah di terapkan oleh beberapa master blogger seperti Kang Rohman, o-om, dll yang sudah bisa kita lihat keberhasilan blog mereka. Jadi ga ada salahnya dong buat ngikutin cara mereka.

Jika pada Meta Tag sebelumnya kita mensetting meta tag deskripsi dan keyword utuh, kali ini mencoba mengoptimalkan meta tag dengan menambah keterangan Nama Blog dan Judul Artikel Blog pada deskripsi dan Keyword.

Berikut Penampakannya di Ruang Mbah Google :

Langsung saja, untuk membuat meta tag dengan keterangan Nama Blog & Judul Blog pada deskripsi & Keyword, berikut langkah-langkahnya :
  • Login ke Blogger
  • langsung menuju ke Design/Rancangan
  • Klik Tab Edit HTML
  • Cari kode berikut :
<title><data:blog.pageTitle/></title>
Ganti kode diatas dengan kode dibawah ini :
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<meta expr:content='data:blog.pageTitle + &quot; - DESCRIPTION&quot;' name='description'/>
<meta expr:content='data:blog.pageTitle + &quot;, KEYWORDS&quot;' name='keywords'/>
<b:else/>
<meta expr:content='data:blog.pageName + &quot; - DESCRIPTION&quot;' name='description'/>
<meta expr:content='data:blog.pageName + &quot;, KEYWORDS&quot;' name='keywords'/>
</b:if>
Ganti tulisan Description yang berwarna Merah dengan deskripsi blog anda.
Ganti tulisan Keywords yang berwarna Merah dengan kata kunci blog anda.
  • Kemudian simpan hasil kerja anda.


Contoh :
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<meta expr:content='data:blog.pageTitle + &quot; - Serba berbagi tentang tutorial, tips-trik blog, facebook&quot;' name='description'/>
<meta expr:content='data:blog.pageTitle + &quot;, Artikel blog, blogger, widget, gadget, serba, seru, tips trik, tutorial, html, javascript, software, download&quot;' name='keywords'/>
<b:else/>
<meta expr:content='data:blog.pageName + &quot; - Serba berbagi tentang tutorial, tips-trik blog, facebook&quot;' name='description'/>
<meta expr:content='data:blog.pageName + &quot;, Artikel blog, blogger, widget, gadget, serba, seru, tips trik, tutorial, html, javascript, software, download&quot;' name='keywords'/>
</b:if>


Dari contoh Meta tag diatas, maka akan menjadi seperti dibawah ini (dilihat dari page source) :
Ini contoh penampakan page source pada halaman Home/halaman depan :
Deskripsi
Serba Blog - Serba berbagi tentang tutorial, tips-trik blog, facebook, download ebook, software, film gratis
Keywords
Serba Blog, Artikel komputer, blog, blogger, widget, gadget, serba, seru, tips trik, tutorial, html, javascript, software, download, gratis

Ini contoh penampakan page source pada halaman Artikel :
Deskripsi
Serba Blog: Meningkatkan Jumlah Pengunjung dengan Meta Tag Blog - Serba berbagi tentang tutorial, tips-trik blog, facebook, download ebook, software, film gratis
Keywords
Serba Blog: Meningkatkan Jumlah Pengunjung dengan Meta Tag Blog, Artikel komputer, blog, blogger, widget, gadget, serba, seru, tips trik, tutorial, html, javascript, software, download, gratis

Sebagai catatan, pastinya kita membuat judul posting yang berbeda disetiap postingan, setelah menggunakan meta tag seperti diatas, maka hasil yang akan ditampilkan pada search engine akan memiliki awal deskripsi yang berbeda-beda disetiap postingan disesuaikan dengan judul postingan blog secara otomatis. Jadi bisa dibilang, kita bisa menebar benih lebih banyak di search engine dengan bantuan Nama Blog serta Judul Artikel Blog yang berperan sebagai deskripsi blog. Maka meta tag ini biasa disebut dengan Meta Tag Blogger Dinamis/Dynamic Blogger Meta Tag.



Source : http://www.blogspottutorial.com/2010/11/best-blogger-meta-tag.html
Mengoptimalkan Meta Tag Blog - READ MORE

Mengoptimalkan Blog Dengan Meta Tag Title

Mengoptimalkan Blog Dengan Meta Tag Title | Untuk mempermudah Search Engine memberikan pengunjung ke blog kita, ada beberapa cara seperti salah satunya yang sudah diungkapkan pada artikel sebelumnya yaitu "Meningkatkan Jumlah Pengunjung Dengan Meta Tag Blog". Adapun cara berikut ini cukup memberikan pengaruh untuk meningkatkan jumlah pengunjung, yaitu dengan mensetting Meta Tag Title. Biasanya Title Blog secara default akan di set seperti berikut :
<title><data:blog.pageTitle/></title>
Hasilnya akan ditampilkan di Search Engine (Google) seperti gambar dibawah ini :
Pada gambar diatas, yang ditampilkan terlebih dahulu yaitu Nama Blog kita, setelah itu baru Judul artikel pada blog kita.

Pada umumnya, pengunjung akan mencari artikel/gambar di Search Engine. Maka logikanya yang dicari adalah isi/konten artikel dari suatu blog dan yang mewakilkan isi/konten artikel blog adalah Judul Artikel Blog. Bayangkan saja jika misalkan nama blog anda adalah Catatan Budi. bisa dipastikan orang akan menulis Catatan Budi sebagai Kata Kunci sangat kecil kemungkinannya.
Namun misalkan didalam Blog Catatan Budi memuat artikel yang berjudul "Cara Mengoptimalkan SEO Blog", besar kemungkinan orang akan menuliskan kata kunci "Cara Mengoptimalkan SEO Blog/SEO/SEO Blog/dll".
Maka dari itu ada baiknya sebagai garis depan untuk mewakilkan blog kita, kita tempatkan Judul Artikel Blog pada posisi yang terdepan.

Contoh penampakan setelah dipasang Meta Tag Title yang akan ditampilkan di Search Engine Google seperti dibawah ini :
Berikut yang akan tampil di Browser kita :

Berikut cara mensetting Meta Tag Title di Blog :
  • Login ke Blogger
  • Klik Design/Rancangan
  • Pilih Edit HTML
  • cari code berikut :
<title><data:blog.pageTitle/></title>
  • Ganti code diatas dengan code berikut ini :
<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/><title><data:blog.pageTitle/></title>
</b:if>
  • Simpan hasilnya.

Untuk melihat hasilnya di Search Engine, butuh beberapa hari untuk Search Engine menerima settingan Meta Title Blog anda. jadi, harap bersabar....
Mengoptimalkan Blog Dengan Meta Tag Title - READ MORE

Meningkatkan Jumlah Pengunjung dengan Meta Tag Blog

Meningkatkan Jumlah Pengunjung dengan Meta Tag Blog | Sebagai salah satu cara untuk menarik pengunjung ke Blog kita adalah dengan memasang Meta Tag di blog kita.Tujuannya adalah supaya blog kita bisa memberikan keterangan yang jelas tentang Blog kita kepada Search Engine, apa saja yang di tuangkan dalam blog kita, blog kita ber-tema-kan apa, kata kunci apa yang menjadi kunci utama untuk membuka pintu menuju blog kita, dan lain sebagainya. Namun yang jelas, kita pasti berharap bahwa pengunjung blog dapat datang secara otomatis dan bukan melalui cara manual(blogwalking,dll).

Banyak cara menarik pengunjung ke Blog kita, salah satunya yaitu melalui Search Engine seperti Google, Yahoo, MSN, dan banyak lagi yang lainnya. Nah, bagaimana cara menarik perhatian Search Engine untuk melirik blog kita. Seperti pepatah, "Tak kenal maka tak sayang". begitu juga dengan Search Engine. Bagaimana Search Engine ingin menyayangi blog kita jika Search Engine tidak mengenal blog kita. Search engine tahu dengan SERBA BLOG, tapi Search engine belum tentu mengenal SERBA BLOG, apa sih itu serba blog, serba blog itu membahas apa, Search Engine bakalan memberikan kunci kepada pengunjung sesuai kriterianya. maka dari itu kita berikan keyword/kata kunci blog kita ke Seach Engine agar Search Engine bisa memberikan kunci tersebut kepada para pengunjung.

Bagaimana cara memperkenalkan blog kita kepada Search Engine, yaitu melalui META TAG.
Berikut Code Meta Tag :
<meta content='Deskripsi Blog Anda' name='description'/>
<meta content='Kata Kunci Blog Anda' name='keywords'/>

Ganti tulisan berwarna merah sesuai dengan deskripsi dan kata kunci blog anda
Untuk membuat meta tag description, sesuaikan dengan deskripsi blog kita.
Untuk meta tag keyword, buatlah kata kunci sesuai dengan artikel yang kita sajikan di blog kita dan tidak lebih dari 30 kata kunci.

Contoh :
<meta content='Serba berbagi tentang tutorial, tips-trik blog, facebook' name='description'/>
<meta content='Artikel blog, blogger, widget, gadget, serba, seru, tips trik, tutorial, html, javascript, software, download' name='keywords'/>

Untuk memasang Meta Tag di blog, silakan lihat cara seperti dibawah ini :
  • Masuk ke Blogger
  • Langsung menuju Design/Rancangan
  • Klik tab Edit HTML
  • Cari kode ini :
<title><data:blog.pageTitle/></title> .
  • Ganti code diatas dengan code berikut :
<title><data:blog.pageTitle/></title>
<meta content='Deskripsi Blog Anda' name='description'/>
<meta content='Kata Kunci Blog Anda' name='keywords'/>

Contoh :
<title><data:blog.pageTitle/></title> .
<meta content='Serba berbagi tentang tutorial, tips-trik blog, facebook' name='description'/>
<meta content='Artikel blog, blogger, widget, gadget, serba, seru, tips trik, tutorial, html, javascript, software, download' name='keywords'/>
  • Lalu simpan.

Maka selanjutnya tinggal tugas Search Engine untuk mengenali blog kita dan memberikan kunci blog kita kepada para pengunjung.
Meningkatkan Jumlah Pengunjung dengan Meta Tag Blog - READ MORE