-->

FOLLOW BY EMAIL

Monday, 25 March 2013

Cara Membuat Komentar Blog Dan Facebook Berdampingan

Cara Membuat Komentar Blog Dan Facebook Berdampingan - Sebelum kita masuk ke cara pembuatannya, saya ingin sekali menyampaikan kepada Anda bahwa, komentar facebook yang kita pasang di blog menggunakan trik ini, juga secara tidak langsung merupakan sarana promosi blog yang kita miliki. Artinya jika pengunjung menggunakan komentar facebook untuk berkomentar maka secara otomatis ada pemberitahuan di wall sipengunjung tersebut bahwa dia berkomentar di blog Anda. Agar lebih jelas, silahkan Anda berkomentar di blog sekitarduniaunik ini dengan menggunakan komentar facebook. Kemudian setelah berkomentar coba Anda lihat diwall facebook Anda, disana akan tertera berupa pemberitahuan bahwa Anda berkomentar di blog sekitarduniaunik ini.

Sekarang bagaimana, tertarik untuk membuat komentar blog dan facebook ke dalam blog Anda ? Jika demikian perhatikan tutorial berikut ini :


1. Login ke account blogger Anda

2. Klik rancangan lalu klik Edit HTML

3. Download template Anda dulu untuk berjaga-jaga jika nanti terjadi kesalahan

4. Beri centang atau ceklis pada kotak kecil yang bertuliskan Expand Template Widget

5. Jika sudah, cari kode  ]]></b:skin>  (gunakan ctrl + f untuk mempermudah pencarian)

6. Kalau sudah dapat maka masukkan kode berikut ini di atas kode ]]></b:skin>



.comments-page { background-color: #f2f2f2;}
#blogger-comments-page { padding: 0px 5px; display: none;}
.comments-tab { float: left; padding: 5px; margin-right: 3px;
cursor: pointer; background-color: #f2f2f2;}
.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}
.comments-tab:hover { background-color: #eeeeee;}
.inactive-select-tab { background-color: #d1d1d1;}


7. Kemudian Anda cari kode </head>

8. Jika sudah dapat, masukkan kode berikut ini tepat diatas kode </head>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='ID FB Anda disini' property='fb:admins'/>
<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><span style="font-size: 50%">Widget edited by <a href="http://super-bee.blogspot.com/" target="_blank" rel="follow">super-bee</a></span>



Perhatikan tulisan yang berwarna merah di atas, ganti dengan ID facebook Anda, misalkan https://www.facebook.com/nama Anda maka ID Anda berada pada tulisan yang berwana biru. Namun jika Anda belum merubah ID Anda maka yang tertera adalah berupa angka. Udah ngertikan ? jika sudah maka Akan saya lanjut.

8. Kemudian cari kode  <div class='comments' id='comments'>

Keterangan:  Pada umumnya kode tersebut ada 2, copy dan pastekan kode berikut ini dibawah kode
<div class='comments' id='comments'> yang pertama dan kedua.



<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Comments made with Facebook'>
<img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
<fb:comments-count expr:href='data:post.url'/> Comments
</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Comments from Blogger'>
<img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments
</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'/>
<fb:comments expr:href='data:post.url' num_posts='2' width='400'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>



Perhatikan angka yang berwarna merah dan biru diatas, angka 2 merupakan jumlah komentar yang akan ditampilkan pada komentar facebook. Sedangkan angka 400 merupakan lebar kotak komentar facebook. Anda dapat menyesuaikannya sesuka hati, tapi kalu boleh saya kasih saran, sesuaikanlah dengan lebar template Anda agar kelihatan rapi. Dan perhatikan pula kode yang berwarna merah, jika penempatan kode dibawah <div class='comments' id='comments'> yang kedua terdapat kode yang sama, maka hapus salah satu kode tersebut.

contoh :
<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Comments made with Facebook'>
<img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
<fb:comments-count expr:href='data:post.url'/> Comments
</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle("#blogger-comments");' title='Comments from Blogger'>
<img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments
</div><div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == "item"'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='2' width='400'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>
<div class='comments comments-page' id='blogger-comments-page'> ( hapus salah satu)


9. Kemudian klik save, dan lihat hasilnya.

Jika semua langkah-langkah membuat komentar blog dan facebook berdampingan ini Anda ikuti dengan benar, maka seharusnya Anda berhasil melakukannya. Karena langkah diatas sudah saya lakukan dan berhasil seperti yang Anda lihat milik saya. Namun jika Anda memiliki struktur template yang berbeda, Anda dapat meletakkan kode pada poin no.8 dibawah kode <div class='comments' id='comments'> yang kedua saja.
Get Free Updates
Follow us on:
facebook gplus rss
Comments
14 Comments

14 comments:

evie saulina said...

Thanks Mas Artikel yang Sangat Menarik.
Tahitian Noni
ditunggu ya broo kunjungan baliknya..http://www.nonimaxidoid.com :)

Hendra Suhendra said...

@evie saulina trims sudah berkunjung. wah nice artikel & product yaa.. salam blogger... :)

Rani said...

terimakasih informasinya,,,

Ahmad Ghulam Azkiya said...

Terima kasih infonya bro !

Blitarian4rt

Eva Asnidah Purba said...

Terima kasih bop .. mantap.. langsung diaplikasikan di 3 blog
cara indonesia bangkit http://ib.ayobai.org
Indonesia Baru Afdol http://den.ayobai.org
Relawan Indonesia Berubah http://karib.ayobai.org

namun di blog itu, semuanya penempatan kode terakhir bisa dilakukan dibawah comments yang pertama.

terima kasih bop.. semoga sukses selalu

Ikfan ahmad fauzi said...

Bang kalo HApus Komentar facebook Gimna ??

Muchlis Al-Habibi said...

Sayangnya comment blog saya jadi tidak berfungsi,
ada saran?

http://alhabibi89.blogspot.com

edi sukarman said...

sangat membantu gan ...
terima kasih

www.edisukarman.com

Wahyu dcimal said...

thanks gan,.
berhasil,.
visit my blog
http://semuamasalahsatusolusi.blogspot.com/

RIDWAN SITUMORANG said...

terima kasih gan infonya,gimana Menurut Agan Tentang Blog Saya, di tunggu kunjungannya

http://Hacker-Siantar.blogspot.com

jangan lupa follow blog saya ya gan

defantri tampubolon said...

dicopy :)
tq

info-pcware.blogspot.com said...

you can ask your problem,here

Yupinara said...

Nggak bisa gan

Fil Meuy said...

bagus gan

FOLLOWERS