logo blog
Welcome To Blog Tekhnik Blogging
Thank you for your visit on the blog Tekhnik Blogging,
I hope what I share here can be useful and provide motivation to all of us to continue working and doing something that could be useful for many people.

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
Enter your email address to get update from Tekhnik Blogging.
Print PDF
Next
« Prev Post
Previous
Next Post »

82 komentar

Tutorial yg keren sob, terima kasih sudah bebagi!

Reply

Komentar Fbnya gak bikin berat blog, kan sob
thanx ya

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

Reply

menurut saya sih tidak,buktinya loading blog ini.

Reply

terimakasih juga atas kunjunganya.

Reply

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

Reply

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.

Reply

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

Reply

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

Reply

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

Reply

bagus sobat, bakal bermanfaat sekali tuh.

Reply

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

Reply

met pgi mas trmksh,ni infonya sangat membantu mas

Reply

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

Reply

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

Reply

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

Reply

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

Reply

bagi2 donk ringgitnya..:D

Reply

kalau masih gak bisa, pakai tali aja kang.

Reply

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

Reply

huwa.. gak bikin berat kan.

Reply

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

Reply

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

Reply

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 =))

Reply

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

Reply

gak bikin berat. ringan banget seperti krupuk ringanya

Reply

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

nunggu dapet gratisan bang..:D

*club gratisan

Reply

hahaha , nyaranin yang gak boleh ditiru , boleh2 juga

Reply

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

Reply

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

Reply

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

Reply

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

Reply

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

Reply

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

Reply

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

Reply

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

Reply

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

Reply

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

Reply

berhasil kang...makasih yah.

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

Reply

salut dan angkat topi dengan semangat ng'blognya

Reply

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

Reply

pasang KY,boleh ringankan loading blog.

Reply

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

Reply

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

Reply

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.

Reply

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

Reply

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

Reply

mana yang disebut "kang silet" Kang?

Reply

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

Reply

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

Reply

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

Reply

gmn kalau punyaan Pak Dhe zach dulu...

Reply

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

Reply

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

Reply

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

Reply

mas cara untuk membuat scrool pada komen gmna?

Reply

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

Reply

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

Reply

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

Reply

oh ada ya kliniknya :D

Reply

lihat didaftar isi

Reply

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

Reply

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

Reply

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 :-/

Reply

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.

Reply

pasang sendiri,gitu aja kok repot :D

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

Reply

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

Reply

blog ini loadingnya rata-rata air.

Reply

lagi ngapa koh wong loro. nylekamin pisan.

Reply

yang gambar lingkaran biru tuh

Reply

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

Reply

ayo mbak bayar dengan senyuman

Reply

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

Reply

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

Reply

wah keren keren ne tutorial nya, makasih gan

Reply

mantap tutornya, langsung saya praktekin n sukses, thanks

Reply

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

Reply

Berkomentar disini,berarti anda telah menyetujui DISCLAIMER blog ini Show Konversi KodeHide Konversi Kode Show EmoticonHide Emoticon

Terima kasih sudah berkomentar
Copyright © 2013. Tekhnik Blogging - All Rights Reserved | Template Created by Kompi Ajaib Proudly powered by Blogger