author-photo

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

Share this:

82 komentar

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

Tutorial yg keren sob, terima kasih sudah bebagi!

Balas Hapus
avatar
admin
February 15, 2013 at 1:00 AM

Komentar Fbnya gak bikin berat blog, kan sob
thanx ya

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

Balas Hapus
avatar
admin
February 15, 2013 at 1:07 AM

menurut saya sih tidak,buktinya loading blog ini.

Balas Hapus
avatar
admin
February 15, 2013 at 1:08 AM

terimakasih juga atas kunjunganya.

Balas Hapus
avatar
admin
February 15, 2013 at 2: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 Hapus
avatar
admin
February 15, 2013 at 3: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 Hapus
avatar
admin
February 15, 2013 at 4:22 AM

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

Balas Hapus
avatar
admin
February 15, 2013 at 5: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 Hapus
avatar
admin
February 15, 2013 at 5:52 AM

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

Balas Hapus
avatar
admin
February 15, 2013 at 6:35 AM

bagus sobat, bakal bermanfaat sekali tuh.

Balas Hapus
avatar
admin
February 15, 2013 at 6: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 Hapus
avatar
admin
February 15, 2013 at 8:08 AM

met pgi mas trmksh,ni infonya sangat membantu mas

Balas Hapus
avatar
admin
February 15, 2013 at 8: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 Hapus
avatar
admin
Anonymous
February 15, 2013 at 10:35 AM

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

Balas Hapus
avatar
admin
February 15, 2013 at 10:35 AM

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

Balas Hapus
avatar
admin
February 15, 2013 at 11:22 AM

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 Hapus
avatar
admin
February 15, 2013 at 11:49 AM

kalau masih gak bisa, pakai tali aja kang.

Balas Hapus
avatar
admin
February 15, 2013 at 11:49 AM

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

Balas Hapus
avatar
admin
February 15, 2013 at 11:50 AM

huwa.. gak bikin berat kan.

Balas Hapus
avatar
admin
February 15, 2013 at 11:52 AM

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

Balas Hapus
avatar
admin
Anonymous
February 15, 2013 at 11:58 AM

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

Balas Hapus
avatar
admin
February 15, 2013 at 12: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 Hapus
avatar
admin
February 15, 2013 at 12: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 Hapus
avatar
admin
February 15, 2013 at 12:14 PM

gak bikin berat. ringan banget seperti krupuk ringanya

Balas Hapus
avatar
admin
February 15, 2013 at 12:25 PM

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

nunggu dapet gratisan bang..:D

*club gratisan

Balas Hapus
avatar
admin
February 15, 2013 at 2:15 PM

hahaha , nyaranin yang gak boleh ditiru , boleh2 juga

Balas Hapus
avatar
admin
February 15, 2013 at 2: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 Hapus
avatar
admin
February 15, 2013 at 3:27 PM

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

Balas Hapus
avatar
admin
February 15, 2013 at 3:29 PM

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

Balas Hapus
avatar
admin
February 15, 2013 at 3: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 Hapus
avatar
admin
February 15, 2013 at 3: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 Hapus
avatar
admin
February 15, 2013 at 4: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 Hapus
avatar
admin
February 15, 2013 at 4:55 PM

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

Balas Hapus
avatar
admin
February 15, 2013 at 7:47 PM

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

Balas Hapus
avatar
admin
February 15, 2013 at 8: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 Hapus
avatar
admin
February 15, 2013 at 9:18 PM

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

Balas Hapus
avatar
admin
February 15, 2013 at 11:07 PM

berhasil kang...makasih yah.

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

Balas Hapus
avatar
admin
February 15, 2013 at 11:10 PM

salut dan angkat topi dengan semangat ng'blognya

Balas Hapus
avatar
admin
February 15, 2013 at 11:30 PM

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

Balas Hapus
avatar
admin
February 16, 2013 at 12:15 AM

pasang KY,boleh ringankan loading blog.

Balas Hapus
avatar
admin
February 16, 2013 at 12:16 AM

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

Balas Hapus
avatar
admin
February 16, 2013 at 7:19 AM

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

Balas Hapus
avatar
admin
Anonymous
February 16, 2013 at 7: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 Hapus
avatar
admin
February 16, 2013 at 7:54 AM

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

Balas Hapus
avatar
admin
February 16, 2013 at 7:55 AM

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

Balas Hapus
avatar
admin
February 16, 2013 at 7:56 AM

mana yang disebut "kang silet" Kang?

Balas Hapus
avatar
admin
February 16, 2013 at 7:58 AM

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

Balas Hapus
avatar
admin
February 16, 2013 at 8:00 AM

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

Balas Hapus
avatar
admin
February 16, 2013 at 11:29 AM

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

Balas Hapus
avatar
admin
February 16, 2013 at 11:36 AM

gmn kalau punyaan Pak Dhe zach dulu...

Balas Hapus
avatar
admin
February 16, 2013 at 11:46 AM

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

Balas Hapus
avatar
admin
February 16, 2013 at 11:48 AM

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

Balas Hapus
avatar
admin
February 16, 2013 at 11:57 AM

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

Balas Hapus
avatar
admin
February 16, 2013 at 1:02 PM

mas cara untuk membuat scrool pada komen gmna?

Balas Hapus
avatar
admin
February 16, 2013 at 2:09 PM

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

Balas Hapus
avatar
admin
February 16, 2013 at 7:26 PM

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

Balas Hapus
avatar
admin
Anonymous
February 16, 2013 at 7:28 PM

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

Balas Hapus
avatar
admin
February 16, 2013 at 9:11 PM

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

Balas Hapus
avatar
admin
February 16, 2013 at 9:17 PM

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

Balas Hapus
avatar
admin
February 16, 2013 at 9: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 Hapus
avatar
admin
February 16, 2013 at 9: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 Hapus
avatar
admin
February 16, 2013 at 9:36 PM

pasang sendiri,gitu aja kok repot :D

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

Balas Hapus
avatar
admin
February 16, 2013 at 10:08 PM

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

Balas Hapus
avatar
admin
February 16, 2013 at 10:08 PM

blog ini loadingnya rata-rata air.

Balas Hapus
avatar
admin
February 16, 2013 at 10:09 PM

lagi ngapa koh wong loro. nylekamin pisan.

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

yang gambar lingkaran biru tuh

Balas Hapus
avatar
admin
February 16, 2013 at 10:12 PM

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

Balas Hapus
avatar
admin
February 16, 2013 at 10:13 PM

ayo mbak bayar dengan senyuman

Balas Hapus
avatar
admin
February 18, 2013 at 11:12 PM

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

Balas Hapus
avatar
admin
February 19, 2013 at 11:53 AM

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

Balas Hapus
avatar
admin
August 1, 2013 at 12:22 AM

wah keren keren ne tutorial nya, makasih gan

Balas Hapus
avatar
admin
September 19, 2013 at 2:51 AM

mantap tutornya, langsung saya praktekin n sukses, thanks

Balas Hapus
avatar
admin
March 24, 2014 at 8:00 PM

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

Balas Hapus
avatar
admin

PERINGATAN....!!!
Gak Usah Di Komen Bro....
ADMIN lagi maen game
Show Konversi KodeHide Konversi Kode Show EmoticonHide Emoticon

Terima kasih sudah berkomentar