Membuat Kotak Komentar Facebook-Blogger Responsif Menyesuaikan Layar Seluler

Melihat judulnya, kita akan banyak menemukan para sobat blogger yang membuat tutorial tentang cara membuat kotak komentar facebook dan blogger di internet. Kolom komentar facebook dan blogger tersebut berdampingan dan pengunjung dapat memilih untuk meninggalkan komentarnya. Tetapi terkadang tampilannya masih kurang responsive dan kurang menyesuaikan layar ponsel dibeberapa resolusi layar seluler atau mobile.  
Membuat Kotak Komentar Facebook-Blogger Responsif  Menyesuaikan Layar Seluler


Hal ini juga di alami pada blog ini, dimana kotak komentar facebook tidak tertampil full atau terpotong jika resolusi layar di kecilkan. Untuk itu kami ingin share dan semoga bisa membantu sobat yang ingin memasang kolom komentar facebook dan blogger secara berdampingan dan dapat diakses full tanpa terpotong untuk beberapa resolusi layar seluler yang lebih kecil.
Oke mungkin kita bisa langsung praktek caranya,
1. Silahkan sobat masuk ke dashboard blogger

2. Masuk ke template, lakukan backup dulu ya..
Atau sobat bisa copy kode html semuanya dan paste ke notepad

3. Silahkan cari kode ]]></b:skin>  dengan bantuan ctrl + F agar lebih cepat

4. Kemudian silahkan copy kode di bawah ini tepat diatas 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 : Sobat dapat menghapus kode yang berwarna merah diatas jika ingin membuat kolom komentar menjadi transparan.

5. Kemudian cari kode </head> , letakkan kode dibawah ini diatas  </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>
Kode biru diatas bisa diisi dengan kode Fanpage sobat, jika tidak punya, biarkan saja.

6. Selanjutnya copy kode dibawah ini dan pastekan tepat dibawah kode <div class='comments' id='comments'>. Jika ada lebih dari satu sobat bisa mencobanya satu per satu :-)
<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='5' width='500'/>
    </b:if>
    </div>
    <div class='comments comments-page' id='blogger-comments-page'>
Angka 5 adalah jumlah komentar yang terlihat, sedangkan 500 adalah adalah lebar kotak komentar facebook, Anda bisa menyesuaikannya.

Nah jika sudah selesai silahkan save saja, kemudian silahkan lihat apakah sudah muncul apa belum kotak komentarnya? Jika sukses kita bisa cek apakah sudah menyesuaikan layar seluler atau mobile apa belum, bisa di cek disini http://quirktools.com/screenfly/.

Eeeits jangan pergi dulu, kita masih perlu menambahkan beberapa kode agar hasilnya bisa oke di smartphone kita. Disini kita anggap template blog sobat sudah mendukung fitur responsif dimana seluruh bagian blog sudah menyesuaikan ukuran layar mobile. Kita bisa melihat tampilan blog kita menjadi vertical untuk bagian – bagian tertentu, misal widget, content blog, footer dan lain sebagainya.

Tetapi pada kotak komentar facebok yang baru saja kita pasang belum tentu menyesuaikan dengan lebar atau kolom seluler seperti gambar di bawah ini.
Membuat Kotak Komentar Facebook-Blogger Responsif  Menyesuaikan Layar Seluler
Kotak komentar facebook terpotong, tidak full
Untuk itu kita perlu menyisipkan sedikit kode saja yang menurut pengalaman berhasil menjadikannya full layar tanpa terpotong. Silahkan copy kode bawah ini, kemudian paste di pengaturan responsive pada templete blog sobat.

Contohnya seperti dibawah ini :
@media screen and (max-width:725px) {
    #outer-wrapper {width:85%; margin:10px auto;}
    #first-nav li, #second-nav li {width: 100%;text-align: center;}
    #second-nav ul a {width: 97%;}
    #second-nav li ul {width: 100%;position: relative;top: 0;}
    #second-nav li ul a:hover {text-align: center;}
.fb-comments-page, .content{float:none;display:block;width:auto;}
}
Catatan : Kode merah diatas adalah kode yang sobat tambahkan pada kode pengaturan templete responsif di templete blog sobat. Silahkan sobat cari kode yang mirip dengan kode diatas, silahkan sesuaikan  untuk penempatannya.
Tampilan facebook koment telah full tanpa terpotong lagi

Jika sudah, kita kembali ke kode yang tadi kita masukkan dibawah <div class='comments' id='comments'>. Disitu terdapat kode <fb:comments expr:href='data:post.url' num_posts='5' width='500'/>.  Ganti angka 500 menjadi ‘100%

Jika sudah, silahkan save dan lihat hasilnya di http://quirktools.com/screenfly/. Nah itulah cara membuat kotak komentar facebook dan blogger menjadi full menampilkan bagian – bagiannya tanpa terpotong di layar seluler kita, semoga membantu.

0 Komentar untuk "Membuat Kotak Komentar Facebook-Blogger Responsif Menyesuaikan Layar Seluler"

Terima kasih sudah berkunjung, silahkan meninggalkan komentar yang sopan, Copy paste harap disertai link sumber.