Skip to main content

Cara memasukan kotak komentar facebook di blog

Masih bingung gimana caranya membuat kotak komentar facebook diblog.ikuti caranya berikut ini


1. Masuk ke akun blogger sobat
2. Selanjutnya masuk pada bagian Template
3. Klik Edit HTML
4. Silahkan centang Expand Template Widget
5. Sudah itu, Anda cari kode ]]></b:skin>
6. Setelah ketemu, silahkan letakkan 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;}

7. Kemudian Anda cari kode </head>
8. Jika sudah ketemu, silahkan letakkan kode di bawah ini tepat di atas kode </head> tadi

  <script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
    <script src='http://code.jquery.com/jquery-latest.js'/>
    <meta content='271922886233753' 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 anda ganti angka yang berwarna biru tersebut dengan AppId anda. jika anda belum punya AppId caranya gampang koq.



9.   Langkah selanjutnya, Anda cari lagi  kode <div class='comments' id='comments'>
10. Biasanya kita akan menemukan dua kode <div class='comments' id='comments'>
Jika memang bener terdapat dua kode tersebut anda letakkan kode dibawah ini tepat di bawah kode <div class='comments' id='comments'>yang ke dua tersebut.

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

11. Terakhir simpan template, dan untuk memastikanya apakah sudah berhasil atau tidak silahkan anda buka salah satu postingan anda. jika belum muncul juga kotak  komentar facebooknya berarti ada yang salah.jangan menyerah sob.. ulangi lagi mungkin ada yang salah. Namun jika masih juga belum berhasil ikuti cara yang kedua ini

Caranya masih sama dengan cara yang pertama

1. Login Blogger
2. Pilih Rancangan
3. EDIT HTML
4. Centang tulisan Expend Widget
5. Car kode yang mirip di ibawah ini :
</b:includable>
<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>
<b:includable id='comment-form' var='post'>
<div class='comment-form-block'>
Jika sudah ketemu tambahkan kode komentar fb ini di attas </b:includable> :

<b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='fb-root'/>
<script src=' http://connect.facebook.net/en_US/all.js#appId=271922886233753&amp;xfbml=1'/>
<fb:comments expr:href='data:post.url' num_posts='2' width='400'/>
</b:if>

6. Jangan lupa untuk mennganti dengan appId facebook sobat masing-masing
Catatan:Angka yang berwarna biru adalah lebar main posting, jika terlalu lebar bisa sobat atur ukuranya menyesuaikan template sobat masing-masing dengan mengganti nilainya

Saya rasa aja yang bisa saya berikan. selamat mencoba semoga gak bikin pusing.hee..........


Labels:

Comments

  1. Pierresimo15 September 2015 at 15:24

    Mantab gan infonya bermanfaat sekali! kunjungan balik indonesiantara.blogspot.com

    ReplyDelete
  2. Unknown2 February 2017 at 17:56

    gan data yang sudah dimasukkan sebelumnya gimana di hapus apa tidak kalau tidak muncul fb komentarnya, kalau mau dengan opsi yang kedua

    ReplyDelete

Post a Comment

Popular posts from this blog

Cara mengganti warna jilbab dan baju menggunakan adobe photoshop cs5

    S ebenarnya tehnik mengganti warna jilbab,baju dan lainya pada foto dapat dilakukan dengan mudah menggunakan Adobe photoshop baik itu Adobe photoshop CS sampai yang terakhir Adobe photoshop CS5 . Tentunya dengan menguasai tehnik ini akan membuat kita lebih muda dalam  menentukan warna pakaian yang paling cocok untuk kita sebelum membelinya di toko. Dan yang paling menyenangkan dari tehnik ini warna yang dihasilkan  akan terasa lebih segar dan tentunya tidak kaku.Nah...bila sobat tertarik ingin tahu bagaimana caranya, silahkan ikuti tutorial berikut... 1.  Pertama kita buka foto yang akan kita ubah jilbabnya.sebelumnya kita buat duplikatnya dulu agar foto kita tetap aman bila terjadi kesalahan dalam mengedit.Setelah itu kita buat seleksi pada bagian jilbabnya.Dalm hal menyeleksi terserah anda ingin menggunakan tool apa saja ,bisa menggunakan Lasso tool , Poligonal lasso tool ataupun Quicck selection tool , terserah anda mana yang menurut anda paling anda kuasai.lakukakan
6 comments
Read more

Cara instal dan menjadikan adobe photoshop cs5 trial version menjadi full version

   Masih melanjutkan tentang tuturial cara instal  Adobe photoshop cs5 pada kesempatan kali ini aku akan melanjutkan kembali tutorial cara instal dan menjadikan software canggih Adobe photoshop cs5 yang trial version ini mnjadi full version selamanya. Mari ikuti tahap-tahapnya berikut ini:  Oea,  sebelumnya aku minta maaf karena pada tutorial kali ini aku menggunakan Adobe illustrator cs5 sebagai tutorialnya tapi santai saja sob karena cara instal untuk product Adobe cs5 family sama saja.yang berbeda cuma serialnya doank Silahkan simak caranya berikut ini: 1.  Pertama kita buka folder file Adobe photoshop kemudian klik Set-up untuk menginstalnya. setelah muncul tampilan seperti gambar berikut ini, pada pilihan bahasa kita pilih  English (international) kemudian klik Accept untuk melanjutkan.  2.  Akan muncul lagi gambar seperti dibawah ini..kita pilih Install this product as a trial. pada pilihan bahasa kita pilih lagi bahasa English international kemudian klik Next
14 comments
Read more

Menyamakan warna antara dua gambar

    Masih melanjutkan tentang tutorial photoshop.kali ini saya akan membuat tutorial tentang Menyamakan warna antara dua gambar .Tehnik ini  tentunya sangat berguna bagi kita dalam mengkomposisikan warna gambar. Dengan menguasai  tehnik ini  kita dapat  menyamakan warna dengan objek yang berbeda secara otomatis.Oke sekarang kita coba untuk  mempraktekanya 1.  Pertama kita buka sebuah file gambar yang akan kita komposisikan warnanya 2.  Kemudian kita buka lagi gambar yang akan kita ambil sampel warnanya. kemudian  buat seleksi menggunakan lasso tool . setelah selesai kita kembali pada dokumen yang pertama. 3.  Pada dokumen pertama kita klik menu Image > Adjustment > Match color .      * Pada kotak source kita pilih sunset.jpg      * Kemudian kita atur nilai      * Luminance dengan nilai  = 80      * Fade menjadi                = 40 Setelah selesai klik Ok 4.  Langah terakhir kita klik menu Edit > Fade match color . Ganti mode blending mode m
11 comments
Read more