Cara Membuat Kotak Komentar Facebook dan Blog Berdampingan

 Blog, Tutorial

Selamat pagi sobat Caritahu. Pagi ini Caritahu akan kembali berbagi tutorial blog.Seperti judul postingan di atas, tutorial kali ini mengenai Cara Membuat Kotak Komentar Facebook dan Blog Berdampingan.
Berikut adalah tampilannya :

Cara Membuat Kotak Komentar Facebook di blog
Cara Membuat Kotak Komentar Facebook di blog

Untuk tutorialnya, silahkan sobat ikuti langkah-langkah berikut ini :

Pertama, masuk ke menu Template – Edit Template dan cari kode  ]]></b:skin>. Kemudian copy 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;}

Kedua, cari kode </head> kemudian tambahkan kode berikut 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=https://www.facebook.com/atoinkuanproperty=’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>

Sekarang yang harus sobat lakukan adalah mengganti tulisan berwarna merah tersebut dengan ID Facebook sobat sendiri.

Ketiga, cari kode <div class=’comments’ id=’comments’>. Sobat akan menemukan dua kode yang sama, untuk itu silahkan copy paste  koe berikut ini tepat di bawah kedua kode
<div class=’comments’ id=’comments’> :

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

Keterangan : 7 adalah jumlah komentar yang tampil. sedangkan 525 adalah lebar kotak komentar.
Setelah itu langkah terakhir adalah Simpan Template adn silahkan sobat lihat perubahannya. Sekian tutorial ini, semoga bermanfaat.

                                                                        * * * * * * * *
Sumber kode : umstrieduatiga

Related Posts

5 Responses

  1. Ace Maxs31Jan 26, 2015 at 8:53 amReply

    mantap dah artikelnya
    http://acemaxs31.com/obat-kanker-paru-paru/

  2. Cara Alami Mengobati Disfagia (Gangguan Menelan)Mar 31, 2016 at 2:28 pmReply

    Sip gan … Terimakasih banyak sudah mau berbagi ilmunya

  3. Obat AmbeienApr 5, 2016 at 8:50 amReply

    terima kasih banyak mas atas infonya izin sedot scrippnya . . .!

  4. Obat Tradisional Kanker Otak TerpercayaApr 5, 2016 at 8:59 amReply

    Others can, why can not I? It is not like that

  5. obat ambeienJul 20, 2016 at 3:09 pmReply

    terima kasih kaka http://acemaxs31.com/obat-ambeien-herbal/

Leave a Reply