Cara Memasang Scroll Komentar Blog Yang Berdampingan Dengan Komentar Facebook

Cara Memasang Scroll Komentar Blog Yang Berdampingan Dengan Komentar Facebook
Hahahaa....judulnya panjang banget yah,tapi gapapa lah semoga bisa dipahami.

Dengan memasang komentar blog dan komentar facebook berdampingan,selain tampilanya yang cantik blogpun terlihat lebih kemas dan rapi.
Tujuanya adalah mempermudah pengunjung untuk memberikan komentar,baik melalui komentar facebook ataupun komentar blog itu sendiri.Dengan begitu pengunjung akan lebih mudah memberikan komentar pada blog kita.
Ingat pengunjung blog kita bukan cuma para blogger tapi para facebooker juga,jadi ga ada salahnya kita pasang komentar facebook pada blog.
Namun masih banyak blogger yang belum memasang scroll pada komentar blognya setelah mereka memasang komentar facebook dan komentar blog berdampingan.
Jadi saat kita klik untuk melihat komentar blognya terlihat memanjang kebawah seperti kereta api,sementara komentar blog yang tidak memasang scroll jelas menambah beban loading blog itu sendiri.

Untuk memasang scroll pada komentar blog sebetulnya tidaklah sulit,namun bagi sobat blogger yang sudah memasang komentar facebook dan komentar blog berdampingan mungkin mengalami kesulitan karena dari tutorial yang mereka dapat tidak menyertakan kode untuk scrollnya.

Baiklah langsung saja pada tutorialnya,simak betul-betul ya.
Bagi sobat yang sudah memasang komentar facebook dan komentar blog berdampingan untuk memasang scrool pada komentar blognya cukup mudah.
Cara Memasang Scroll Komentar Blog Yang Berdampingan Dengan Komentar Facebook

1. Login ke Blog sobat
2. Klik Design > Edit HTML > Centang pada Expand Widget Templates
3. Cari Kode

.comments-page {

Tampilan kode keseluruhan seperti dibawah ini :

.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;}

Untuk memasang secroll sobat tinggal tambahkan kode

height:400px; overflow:auto;

pada kode diatas sehingga tampilan kodenya menjadi seperti dibawah ini :

.comments-page { background-color: #f2f2f2;}
#blogger-comments-page { height:400px; overflow:auto; 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;}

Nah bagi sobat yang belum memasang komentar facebook berdampingan dengan komentar blog plus scrollnya
Silahkan simak baik-baik tutorial dibawah ini :

1. Login ke Blog sobat
2. Klik Design > Edit HTML > Centang pada Expand Widget Templates
3. Cari Kode ]]></b:skin>
Copy kode dibawah ini dan letakan diatas kode ]]></b:skin>

.comments-page { background-color: #f2f2f2;}
#blogger-comments-page { height:400px; overflow:auto; 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;}

4. Kemudian Anda cari kode </head>
Copy kode dibawah ini dan letakan diatas 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 FB ANDA' 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>

Keterangan : ganti teks merah ID FB ANDA pada kode diatas dengan ID facebook sobat

5. Kemudian cari kode  <div class='comments' id='comments'>
Pada umumnya dalam template ada 2 kode <div class='comments' id='comments'>
Copy kode dibawah ini dan letakan dibawah kode yang pertama dan kedua.

<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><span style="font-size: 50%">Widget edited by <a href="http://tekhnik-blog.blogspot.com/2013/02/cara-memasang-scroll-komentar-blog-yang.html" target="_blank" rel="follow">Tekhnik Blogging</a></span>
<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='20' width='450'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>

Keterangan :

num_posts='20' : Adalah jumlah komentar facebook nantinya,silahkan sobat ganti menurut keinginan sobat
width='400'  : Adalah lebar kolom komentar facebook nantinya,silahkan sobat ganti sesuaikan dengan template sobat masing-masing.
perhatikan kode yang saya beri warna merah <div class='comments comments-page' id='blogger-comments-page'>
jika pada pemasangan kode <div class='comments' id='comments'> yang kedua kode tersebut sudah ada maka hapus satu.

jika baground template sobat warna gelap maka untu untuk komentar facebooknya pada kode

<fb:comments expr:href='data:post.url' num_posts='20' width='450'/> 

rubah menjadi seperti ini

<fb:comments colorscheme='dark' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='450'/>

6. Kemudian klik save, dan lihat hasilnya.
Selamat mencoba,semoga bermanfaat.
Untuk sobat yang juga mungkin sedang mencari tutorial Cara Membuat Scroll Pada Bloglist atau daftar link sahabat bisa lihat disini