Showing posts with label berdampingan. Show all posts
Showing posts with label berdampingan. Show all posts

Friday, December 16, 2016

Cara Membuat Kotak Komentar Facebook dan Blog Berdampingan

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

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

Read more »

Tuesday, November 1, 2016

Cara Membuat Komentar Facebook dan Blogger Berdampingan Pada Semua Template

Cara Membuat Komentar Facebook dan Blogger Berdampingan Pada Semua Template



Salam Blogger, Melengkapi permintaan salah satu sahabat Ide cemerlang.com yang meminta saya menjelaskan tentang cara memasang komentar facebook dan blogger berdampingan.

Mungkin tutorial ini sudah usang dan tidak asing lagi bagi Sobat semua, akan tetapi tutorial yang sudah ada saya coba tidak berhasil pada semua template, dan kemungkinan banyak berhasil pada template premium saja.

Disini saya sedikit mengulas lagi agar tutorial ini berhasil di semua template, karena pada saat saya coba pada blog uji coba saya yang bertemplate standar, tuorial yang lama tidak berhasil, hanya berhasil pada template premium saja, berikut cara yang saya dapatkan dari salah satu blog yang sudah lama bergelut di dunia blogger.

Cara Membuat Komentar Facebook dan blogger Berdampingan Pada semua template: DEMO
  1. Login ke account blogger Sobat
  2. Klik rancangan lalu klik Edit HTML
  3. Download template Sobat dulu untuk berjaga-jaga jika nanti terjadi kesalahan
  4. Beri centang atau ceklis pada kotak kecil yang bertuliskan Expand Template Widget
  5. Jika sudah, cari kode  ]]></b:skin>  (gunakan ctrl + f untuk mempermudah pencarian)
  6. Kalau sudah ketemu maka masukkan kode berikut ini 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;}

    Hilangkan kode berwarna hijau bila ingin background kedua komentar transparan.

    Cara di atas ini yang biasanya mewajibkan penempatan kode di bawah kode /* Comment atau #comments, Sebenarnya sama saja, mungkin para master terdahulu menyarankan begitu agar tampak lebih rapi.

  1. Kemudian Sobat cari kode </head>
    Jika sudah ketemu, masukkan kode berikut ini tepat di atas kode </head>

  2.     <script src=http://connect.facebook.net/en_US/all.js#xfbml=1/>
        <script src=http://code.jquery.com/jquery-latest.js/>
        <meta content=ID FB Sobat 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>

    Perhatikan tulisan yang berwarna hijau di atas, ganti dengan ID facebook Sobat, misalkan https://www.facebook.com/nama Sobat maka ID Sobat berada pada tulisan yang berwana hijau. Namun jika Sobat belum merubah ID Sobat maka yang tertera adalah berupa angka. contohnya seperti ini: https://www.facebook.com/1234567890

  3. Kemudian cari kode  <div class=comments id=comments>


  4. Keterangan:  Pada umumnya kode tersebut ada 2, copy dan pastekan kode berikut ini 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=2 width=400/>
        </b:if>
        </div>
        <div class=comments comments-page id=blogger-comments-page>

    NB: Pada penempatan kode yang ke dua Sobat hapus kode yang berwarna ungu ya: <div class=comments comments-page id=blogger-comments-page> apabila kode di bawahnya sama.

    Perhatikan angka yang berwarna biru dan hijau di atas, angka 2 merupakan jumlah komentar yang akan ditampilkan pada komentar facebook. Sedangkan angka 400 merupakan lebar kotak komentar facebook. Sobat dapat menyesuaikannya sesuka hati, tapi kalu boleh saya kasih saran, sesuaikanlah dengan lebar template Sobat agar kelihatan rapi.

    Pada cara di atas yang biasanya menyarankan hanya menempatkan pada kode <div class=comments id=comments> yang kedua saja, saat saya coba pada template blog uji coba saya tidak berhasil, jadi harus menempatkan di bawah kedua kode tersebut.

  5. Kemudian klik save, dan lihat hasilnya.

Demikianlah  Cara Membuat Komentar Facebook dan Blogger Berdampingan Pada Semua Template,,
Selamat mencoba ya Sobat dan jangan lupa nih Komentarnya, hehehe,,,  bila ada kata-kata yang salah saya mohon maaf,,

Sumber: http://super-bee.blogspot.com


Go to link Download

Read more »