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.

Cara Memasang Scroll Komentar Blog Yang Berdampingan Dengan Komentar Facebook

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

82 komentar

Click here for komentar
February 15, 2013 at 1:58 AM ×

Tutorial yg keren sob, terima kasih sudah bebagi!

Balas
avatar
admin
February 15, 2013 at 2:00 AM ×

Komentar Fbnya gak bikin berat blog, kan sob
thanx ya

+> Congratulations Valentine's Day <+ 2:-P

Balas
avatar
admin
February 15, 2013 at 2:07 AM ×

menurut saya sih tidak,buktinya loading blog ini.

Balas
avatar
admin
February 15, 2013 at 2:08 AM ×

terimakasih juga atas kunjunganya.

Balas
avatar
admin
February 15, 2013 at 3:53 AM ×

anuku itu malah udah tak hapus kang, ruwet dan ngga laku komen fb nya, malah jadi broken link.
saya mo pake scrollnya azh ah...moga pas kodenya ditempatku.

btw..ringgitnya udah bejibun nih dong yah?
sukses dan sehat selalu yah

Balas
avatar
admin
February 15, 2013 at 4:06 AM ×

kode ku cuman begini doang kang

.comments-page { background-color: #f2f2f2;}
#blogger-comments-page { height:400px; overflow:auto;padding: 0px 5px; display: none;}

saya pake kode semua dari yang disini tak pindahpun tetep ngga bisa.

Balas
avatar
admin
February 15, 2013 at 5:22 AM ×

kaya blog ini ya gan tampilan nya.. mantaf deh ijin nyicip..

Balas
avatar
admin
February 15, 2013 at 6:16 AM ×

Benar juga ya sob, tidak memasang srool pada kotak facebook dan blog yang berdampingan akan memakan space, sehingga loading blogpun menjadi berat....kedepannya akan saya coba dulu sob, karenaya saya minta ijin save isinya. Salam....

Balas
avatar
admin
February 15, 2013 at 6:52 AM ×

Langsung pratek sob...hehehe
terima kasih tutorialnya
Salam...

Balas
avatar
admin
February 15, 2013 at 7:35 AM ×

bagus sobat, bakal bermanfaat sekali tuh.

Balas
avatar
admin
February 15, 2013 at 7:57 AM ×

wah siip nih aobar, saya ijin simpan dulu dech, karena saya belum langsung bisa untuk praktek. seperti biasa kompi saya masih di toko wkwkwkkwkwkwkw

Balas
avatar
admin
February 15, 2013 at 9:08 AM ×

met pgi mas trmksh,ni infonya sangat membantu mas

Balas
avatar
admin
February 15, 2013 at 9:30 AM ×

kebetulan dari kemaren dah penasaran dengan coment facebook yg berdampingan dengan coment blogger, ntar kalau dah sempet mau coba juga ah.. thanks ya tips nya

Balas
avatar
admin
February 15, 2013 at 11:35 AM ×

alhamdulilah saya dapat ilmu baru lagi ,, trims gan :)
mampir balik yah :D

Balas
avatar
admin
February 15, 2013 at 11:35 AM ×

wah pelajaran baru lagi nih :D
keren postingane om :))

Balas
avatar
admin
February 15, 2013 at 12:22 PM ×

tiap template berbeda kang,kalo dipasang pada css ga jadi coba pake html

Cari kode
div class='comments' id='comments'

jika kode diatas ada 2 maka pilih kode yang pertama saja.

hapus kode tersebut dan ganti dengan kode ini
div class='comments' id='comments' style='max-height:400px;overflow:auto;'

jadi intinya cuma nambah scroll kedalam kode itu kang

Balas
avatar
admin
February 15, 2013 at 12:45 PM ×

bagi2 donk ringgitnya..:D

Balas
avatar
admin
February 15, 2013 at 12:49 PM ×

kalau masih gak bisa, pakai tali aja kang.

Balas
avatar
admin
February 15, 2013 at 12:49 PM ×

bang kalo cara meletakan koment facebook bukan berdampingan tapi diatas atau dibawah komen blog kaya punya abang ini gmn y?

Balas
avatar
admin
February 15, 2013 at 12:50 PM ×

huwa.. gak bikin berat kan.

Balas
avatar
admin
February 15, 2013 at 12:52 PM ×

tambahin di widget aja entar bisa juga disamping loh hahahha.
*jangan ditiru* .

Balas
avatar
admin
February 15, 2013 at 12:58 PM ×

kalau incip-incip jangan lupa pakai cabai ya, biar mantap..:))

Balas
avatar
admin
February 15, 2013 at 1:01 PM ×

hahahaha...ya kang malah bikin ribet,aku juga dah kembalikan semula,kurang praktis untuk komen2 kpk....jadi lama prosesnya.

ringgit pait kang....:D
Salam sukses juga kang Hadi.

mas Kstiawan...nyusul kesini aja,banyak yg bahenol =))

Balas
avatar
admin
February 15, 2013 at 1:10 PM ×

tak pikir dulu bang kalau mau pasang comment FB. soalnya script FB selalu bikin erat loading blog. blog saya sudah terasa berat nih soalnya..hehehe

kalau scroll comment saya tertarik untuk memasangnya..:D

oiya bang. bang Zach siang ini gak bisa hadir, beliau ada acara konser gantiin gitaris power metal katanya..

Balas
avatar
admin
February 15, 2013 at 1:14 PM ×

gak bikin berat. ringan banget seperti krupuk ringanya

Balas
avatar
admin
February 15, 2013 at 1:25 PM ×

aklau banyak yang bahenol, kang Hadi pasti ikut hadir tuh..:))

nunggu dapet gratisan bang..:D

*club gratisan

Balas
avatar
admin
February 15, 2013 at 3:15 PM ×

hahaha , nyaranin yang gak boleh ditiru , boleh2 juga

Balas
avatar
admin
February 15, 2013 at 3:18 PM ×

kepingin langsung praktek tp nggak ada yg mau blognya aku obrak-abrik.........

ayo-ayo siapa ini yg mau merelakan blognya untuk aku jadikan kelinci percobaan :p

Balas
avatar
admin
KY
February 15, 2013 at 4:27 PM ×

eeemmm..betul tu nampak kemas sekali..KY juga belum pasang scroll di komen...

Balas
avatar
admin
February 15, 2013 at 4:29 PM ×

Biarlah Blog saya apa adanya saja, males mau bongkar2 lagi. Takut makin hancur... :D

Balas
avatar
admin
February 15, 2013 at 4:58 PM ×

Wah ada Tri masketerrrrrr (mas Rawins, Mas Lembu dan Bang Zachlazz) yang jadi model dalam artikel mas Reo ini hiehiehiehiehie. Oops tapi model beneran kan ya

Balas
avatar
admin
February 15, 2013 at 4:59 PM ×

ini yg dari kemaren saya cari2.. udah ada nemu sih, tapi ternyata caranya ribet.. eh rupanya yg ini sama aja ribet mas buat saya, dasar sayanya yg pemalas sama kode html wkwkw

Balas
avatar
admin
February 15, 2013 at 5:00 PM ×

Wah kalau ada yang Bahenol, pasti ada mas Rawins hiehiehiheiee. Mana mana Gratisnya? Asal bukan jitak gratis hiehiehiehe. Untuk itu sih saya nda mau donk

Balas
avatar
admin
February 15, 2013 at 5:55 PM ×

blog saya perlu nggak ya Mas? saya jan nggak ngerti babarblas soal teknologi uprek-uprek kaya kiye koh..

Balas
avatar
admin
February 15, 2013 at 8:47 PM ×

ini nih yang saya cari-cari.
tapi bisa gk ya kalo di pasang tidak berdampingan dengan komentar facebook ?

Balas
avatar
admin
February 15, 2013 at 9:02 PM ×

scroll... emang jadi momok nii buat saiia.. :( pingin sii pasang.. supaya gag ngerepotin orang yg dateng.. :( tapi sempit banged nii waktunya kang ;( makasii artikelnya, mungkin nanti :p

Balas
avatar
admin
February 15, 2013 at 10:18 PM ×

Bagus sob,tinggal meletakkan saja pada kode diatas sudah jadi yah,mudah untuk diikuti sob :)

Balas
avatar
admin
February 16, 2013 at 12:07 AM ×

berhasil kang...makasih yah.

kang silet: buat gantung yang setipis silet pas tuh, tapi harus dijepit biar ngga terbang...;o)

Balas
avatar
admin
February 16, 2013 at 12:10 AM ×

salut dan angkat topi dengan semangat ng'blognya

Balas
avatar
admin
February 16, 2013 at 12:30 AM ×

ya betul kang hadi....masnady ni blogger hp,tapi ke-aktifannya didunia blogging memang sangat baik.
perlu dicontoh nih :)

Balas
avatar
admin
February 16, 2013 at 1:15 AM ×

pasang KY,boleh ringankan loading blog.

Balas
avatar
admin
February 16, 2013 at 1:16 AM ×

gapapa....yg penting orangnya ga ikut ancur :D

Balas
avatar
admin
February 16, 2013 at 8:19 AM ×

ow ini pake cara tab itu ya gan... wuh, keren tu, jadi rapi blognya...

Balas
avatar
admin
February 16, 2013 at 8:43 AM ×

G jadi tukar link sob, link ane g ada di blogroll anda, yang ada cuma banner yang anda pasang di dalam postingan, mhn maaf. Info copasnet hanya mau tukar link / banner yang di pasang di home page.

Balas
avatar
admin
February 16, 2013 at 8:54 AM ×

sebenarnya mas reo mau menampilkan komen saya saja Kang, tapi dua yang dibawah nggak sengaja kejepret juga. beruntunglah mereka jadinya.

Balas
avatar
admin
February 16, 2013 at 8:55 AM ×

mas rawins-nya lagi tapa di pinggir sungai. sampe jenggotnya lumutan.

Balas
avatar
admin
February 16, 2013 at 8:56 AM ×

mana yang disebut "kang silet" Kang?

Balas
avatar
admin
February 16, 2013 at 8:58 AM ×

dicontoh itu dicontek bukan? nah bung masnadynya ngijinin nggak buat dicontek?

Balas
avatar
admin
February 16, 2013 at 9:00 AM ×

gimana kalo kita saling mengobrak-abrik blog kita satu sama lain? tawaran bagus kan dari saya..

Balas
avatar
admin
February 16, 2013 at 12:29 PM ×

Dicoba saja pak dhe,klw ndak mau reiko suruh mas reo ajah yg ngerjain. dijamin deh :D

Balas
avatar
admin
February 16, 2013 at 12:36 PM ×

gmn kalau punyaan Pak Dhe zach dulu...

Balas
avatar
admin
February 16, 2013 at 12:46 PM ×

ada kok sob,coba cek pelan2 pada Friend Link tepatnya dibawah halaman blog sebelah kanan
link sobat nongkrong dengan title INFO COPASNET

Balas
avatar
admin
February 16, 2013 at 12:48 PM ×

weh....mbayar nuw kalo nyuruh aku :D

Balas
avatar
admin
February 16, 2013 at 12:57 PM ×

kalo sya pengin ngilangin balok scroll gimana ya mas, soalnya kurang enak di pandang

Balas
avatar
admin
February 16, 2013 at 2:02 PM ×

mas cara untuk membuat scrool pada komen gmna?

Balas
avatar
admin
February 16, 2013 at 3:09 PM ×

dulu sy pasang koment blog + facebook ..
tapi ngga di scroll kan...
ya setelah ke klinik, sy hapus aja koment facebooknya.

Balas
avatar
admin
February 16, 2013 at 8:26 PM ×

aq nggak minat om, maunya komentar facebook di samping ada fotonya aq :D

Balas
avatar
admin
February 16, 2013 at 8:28 PM ×

Sudah saya linkback sob, banernya belum coz skrng msh online lewat phonsel

Balas
avatar
admin
February 16, 2013 at 9:46 PM ×

oh ada ya kliniknya :D

Balas
avatar
admin
February 16, 2013 at 10:11 PM ×

Makasih ya Om Reo
punyaku dah jadi :-bd
itu om kalo buat emotion kaya diblog ini gimana?
balas ya om :)]

Balas
avatar
admin
February 16, 2013 at 10:17 PM ×

waduh ide yang bagus tuh mas
gimana ya(mikir dulu) soalnya ku juga belum pernah buat sih.

Balas
avatar
admin
February 16, 2013 at 10:21 PM ×

aihhhh....sapa lagi nih?
panggil2 om....emangnya aku kawin sama tantemu apa! =))

kapan2 aku share cara buat emotion itu,tapi gak janji ya.
blog aku belum dipolow nih :-/

Balas
avatar
admin
February 16, 2013 at 10:31 PM ×

udah aku follow kok om
aku tunggu ya om,bisa pasangkan sekali ga?
eh biar followernya banyak dan komentarnya gimana sih om,komentar blog ini banyak sekali.

Balas
avatar
admin
February 16, 2013 at 10:36 PM ×

pasang sendiri,gitu aja kok repot :D

blogwalking yg rajin,trus tinggalkan komen polbek =)) nanti juga followernya banyak.

Balas
avatar
admin
February 16, 2013 at 11:08 PM ×

ya gan,tapi ada kelemahanya juga saat masuk untuk liat komen harus klik dulu dong :D

Balas
avatar
admin
February 16, 2013 at 11:08 PM ×

blog ini loadingnya rata-rata air.

Balas
avatar
admin
February 16, 2013 at 11:09 PM ×

lagi ngapa koh wong loro. nylekamin pisan.

Balas
avatar
admin
February 16, 2013 at 11:11 PM ×

yang gambar lingkaran biru tuh

Balas
avatar
admin
February 16, 2013 at 11:12 PM ×

diangkat bareng2 aja lha wong cuma balok. kalo yang ngalangin traktor, baru tuh susah.

Balas
avatar
admin
February 16, 2013 at 11:13 PM ×

ayo mbak bayar dengan senyuman

Balas
avatar
admin
February 19, 2013 at 12:12 AM ×

saya bookmark ya mas.. kapan2 saya mau pakai'nya.. hehehe.. :D

Balas
avatar
admin
February 19, 2013 at 12:53 PM ×

Silahkan Bang Andy....makasih kunjungan siangnya :)

Balas
avatar
admin
August 1, 2013 at 1:22 AM ×

wah keren keren ne tutorial nya, makasih gan

Balas
avatar
admin
September 19, 2013 at 3:51 AM ×

mantap tutornya, langsung saya praktekin n sukses, thanks

Balas
avatar
admin
March 24, 2014 at 9:00 PM ×

keren nih tutornya..
makasih gan..
mampir ya di tafshare.blogspot.com

Balas
avatar
admin

PERINGATAN....!!!
1. Silahkan berkomentar sesuai topik di atas...!
2. Komentar OOT boleh asal tidak merugikan...!
3. Link hidup pada komentar otomatis akan terhapus..!
4. Link mati pada komentar juga akan dihapus...!!!
Show Konversi KodeHide Konversi Kode Show EmoticonHide Emoticon

Terima kasih sudah berkomentar