Post Game: Cara Membuat Kotak Komentar Facebook dan Blog Berdampingan

Friday, December 16, 2016

Cara Membuat Kotak Komentar Facebook dan Blog Berdampingan

Mat malam sobat blogger pada kesempatan kali ini saya akan membagikan Tutorial blog Cara Membuat Kotak Komentar Facebook dan Blog Berdampingan, mungkin sobat sudah pada tau Tutorial Blog yang satu ini, sudah banyak juga yang memposkannya tapi tak ada salahnya kan saya berbagi lagi untuk mempermudah sobat blogger yang mungkin masih baru seperti saya ini untuk menemukannya

Screen Shoot :

Ingin memasang Kotak Komentar Facebook dan Blog Keren ini

Silahkan ikuti langkah" di bawah ini :

1. Login ke akun Bloger Sobat

2. Masuk ke Bagian Template

3. Klik "Edit HTML"

4. Centang "Expand Template Widget"

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

6. Letakan kode di bawah ini tepat 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;}

Catatan :

Silahkan Hapus kode yang berwarna Merah jika ingin membuat kotak Komentar Facebook menjadi Transparan.

7. Kemudian 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 FP 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>

Catatan :

Silahkan Ganti Kode berwarna Merah dengan ID FP(Fans Page) anda.. Contohnya https://www.facebook.com/1000r2blog.com atau http://facebook.com/301619369919206

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.

<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>

Catatan :

Silahkan anda Hapus kode berwarna merah tersebut jika kode di bawah sama, jika tidak y tidak usah. Untuk yang nomor 3 adalah Jumlah komentar yang akan muncul. Untuk nomor 400 adalah Lebar kotak Komentar, Silahkan di ganti sendiri..

Semoga dapat bermanfaat....

Go to link Download