Kamis, 31 Januari 2013

Cara Menambahkan Komentar Facebook pada Blogspot


#KLIK GAMBAR UNTUK MEMPERBESAR#
Rasa-rasanya para blogger telah dimanjakan dengan berbagai fitur dalam berkomentar ya? Seperti ada kata Reply untuk membalas komentar teman, dan ada juga komentar diberi garis berwarna yang dimana komentar tersebut menandakan milik si admin. Nah pada hari ini saya akan share yang lebih terbaru nih, yaitu kita bisa berkomentar dari dua sumber, yaitu dari Blogspot dan Facebook. Kotak komentar tersebut seperti sebuah menu, jadi kita memiliki dua opsi untuk berkomentar. Letaknya tetap berada di bawah posting yang kita entri. Untuk lebih jelasnya bisa melihat preview gambar dari kotak komentar milik saya.


Kotak Komentar Facebook


Kotak Komentar Blogspot
Bagaimana? Apakah ini yang anda cari? Jika iya, yuk meluncur ke tutorialnya.

1. Masuk / Log in ke blog

2. Pilih menu template

3. Edit HTML

4. Expand template widget

5. Gunakan Ctrl + F untuk mencari sebuah kata

6. Cari kode ]]></b:skin>

7. Jika sudah ketemu, letakkan kode berikut di atas kode ]]></b:skin> yang kamu cari tadi lalu simpan
.comments-page { background-color: #;}
    #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;}

8. Cari kode </head> lalu letakkan kode berikut diatasnya dan simpan
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
    <script src='http://code.jquery.com/jquery-latest.js'/>
    <meta content='ID Facebook Kamu' 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>
9. Perhatikan Kode Diiatas.!!!
Pada tulisan yang berwarna biru, silahkan ganti dengan ID Facebook kamu. Misalnya link profil Facebook kamu adalah : https://www.facebook.com/Nama Akun Facebook Kamu, maka ID kamu itu adalah yang berada pada tulisan berwarna biru.

10. Cari kode <div class='comments' id='comments'> lalu masukan kode ini dibawahnya
<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='5' width='630'/>
    </b:if>
    </div>
    <div class='comments comments-page' id='blogger-comments-page'>
 
Angka 5 adalah jumlah komentar yang akan ditampilkan pada komentar Facebook.
Angka 630 merupakan lebar kotak komentar Facebooknya.
Dan kamu bisa mengubah angka-angka tersebut, sesuai dengan lebar template blog kamu.


12. Kilk "Simpan Template" atau "Save"

Sekian yang dapat saya share pada sore hari ini. Terima kasih atas perhatiannya.
klik tombol share untuk saling berbagi kepada sesama ya ^^

Comments
1 Comments

1 komentar:

thanks ..
makasih banget yaah postingannya manfaat bgd .

visit my blog : andhinaimagination.blogspot.com

Posting Komentar

Tata cara berkomentar di blog ini :
1. Silahkan berkomentar setelah membaca.
2. Jika berkomentar, gunakanlah bahasa yang sopan dan tidak kasar.
3. Dilarang membuat komentar sampah (Spam) di sini.
Terima kasih atas perhatiannya.

Share

Twitter Delicious Facebook Digg Stumbleupon Favorites More