my home: Tutorial cara Membuat dan memasang kotak komentar facebook di blogger berdampingan

Rabu, 27 Agustus 2014

Tutorial cara Membuat dan memasang kotak komentar facebook di blogger berdampingan

Hmmmm, beginilah nasib seorang jomblo, malalm mingguannya cuma blogging, alias ngeblog alias no honey.

tapi tak apalah. heee ..Selamat malam para pengunjung setia blog ini, semoga selalu dalam keadaan sehat saja. pada kesempatan malam minggu yang sangat indah ini saya akan mencoba share mengenai Tutorial/ cara Membuat dan memasang kotak komentar facebook di blogger berdampingan", pada postingan yang lalu saya sudah share mengenai Gratis download google talk, semoga bermanfaat saja.

Sobat blogger yang berbahagia, back to title ya......

Memasang kotak komentar facebook, saya yakin sobat semua tidak asing lagi dengan yang namanya fesbuk, hee. karena facebook adalah sebuah layanan jejaring sosial yang diluncurkan pada bulan Februari 2004, oleh Mr. Mark Elliot Zuckerberg. Satu miliar lebih pengguna facebook aktif sedunia.

Keuntungan memakai kotak komentar facebook adalah bentuknya thread comment, sehingga dapat membalas komentar. Selain itu juga terintegrasi dengan facebook, sehingga komentar bisa dibagikan (dishare) di facebook si komentator. Keuntungan lainnya dengan kotak komentar facebook adalah lebih menghemat tempat (space) juga akan membuat blog kita popular. :)

Ok, jika sobat ingin tahu demo/ gambar dari kotak komentar facebook berdampingan dengan kotak komentar blogger, dibawah ini SS-nya, sob.

Kurang lebih seperti itu, sob kotak komentar fb berdampingannya.

Ok, jika sobat tertarik, heee maka langsung saja ke TKP, yukkkkk mari.....

Seperti biasa

1. Login ke akun Bloger

2. Masuk ke Bagian Template

3. Klik "Edit HTML" tidak usah di centang, karena edit HTML di blogger sudah berubah.

4. Cari Kode ]]></b:skin>

5. Letakan kode di bawah ini tepat di Atas kode ]]></b:skin>

.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;}

Nah, setelah nomor 6 yaitu nomor 7, ~~heee~~ ....cari kode </head>

8. Lalu letakan Kode di bawah ini tepat di Atas 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 Funs Page 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>

Yang berwarna merah di kolom tersebut ganti dengan ID funs page facebook sobat.
Contohnya https://www.facebook.com/pages/Dasarbahasainggriscom/350384035069267 (ID-nya adalah nomor itu, dan masukan nomor tersebut untuk mengganti yang berwarna merah diatas (dalam kotak)).
mungkin sobat sudah faham dengan cara pengambilan ID Funs page facebook-nya, bagi yang belum bisa disini caranya.

9. Silahkan cari kode <div class=comments id=comments>
10. Umumnya kode <div class=comments id=comments> ada 2, jadi masukan kode di bawah ini tepat di Bawah kedua kode tersebut, sob

<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=3 width=400/>
    </b:if>
    </div>
    <div class=comments comments-page id=blogger-comments-page>

Silahkan sobat Hapus kode berwarna merah tersebut jika dibawahnya ada kode yang sama, jika tidak ada tidak usah. Untuk yang nomor 10 adalah Jumlah komentar yang ingin dimunculkan. dan untuk nomor 400 adalah Lebar kotak Komentar, Silahkan di ganti sendiri jika sobat ingin memperbesar dan memperkecilnya.

11. Kemudian klik Save, dan selesai.

Bagaimana hasilnya, Sob?...........

Ku tunggu komentarnya ya di Tutorial/ cara Membuat dan memasang kotak komentar facebook di blogger berdampingan! heeee.

Good luck.

my home

Rabu, 27 Agustus 2014

Tutorial cara Membuat dan memasang kotak komentar facebook di blogger berdampingan

Tidak ada komentar:

Posting Komentar