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 »

83 komentar

Terima Kasih Sudah Berkomentar

Tutorial yg keren sob, terima kasih sudah bebagi!

Reply
Terima Kasih Sudah Berkomentar

Komentar Fbnya gak bikin berat blog, kan sob
thanx ya

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

Reply
Terima Kasih Sudah Berkomentar

menurut saya sih tidak,buktinya loading blog ini.

Reply
Terima Kasih Sudah Berkomentar

terimakasih juga atas kunjunganya.

Reply
Terima Kasih Sudah Berkomentar

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
Terima Kasih Sudah Berkomentar

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
Terima Kasih Sudah Berkomentar

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

Reply
Terima Kasih Sudah Berkomentar

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
Terima Kasih Sudah Berkomentar

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

Reply
Terima Kasih Sudah Berkomentar

bagus sobat, bakal bermanfaat sekali tuh.

Reply
Terima Kasih Sudah Berkomentar

kodenya banyak juga ya,,

Reply
Terima Kasih Sudah Berkomentar

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
Terima Kasih Sudah Berkomentar

met pgi mas trmksh,ni infonya sangat membantu mas

Reply
Terima Kasih Sudah Berkomentar

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
Terima Kasih Sudah Berkomentar

wah nice info sobat

Reply
Terima Kasih Sudah Berkomentar

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

Reply
Terima Kasih Sudah Berkomentar

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

Reply
Terima Kasih Sudah Berkomentar

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
Terima Kasih Sudah Berkomentar

bagi2 donk ringgitnya..:D

Reply
Terima Kasih Sudah Berkomentar

kalau masih gak bisa, pakai tali aja kang.

Reply
Terima Kasih Sudah Berkomentar

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

Reply
Terima Kasih Sudah Berkomentar

huwa.. gak bikin berat kan.

Reply
Terima Kasih Sudah Berkomentar

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

Reply
Terima Kasih Sudah Berkomentar

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

Reply
Terima Kasih Sudah Berkomentar

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
Terima Kasih Sudah Berkomentar

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
Terima Kasih Sudah Berkomentar

gak bikin berat. ringan banget seperti krupuk ringanya

Reply
Terima Kasih Sudah Berkomentar

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

nunggu dapet gratisan bang..:D

*club gratisan

Reply
Terima Kasih Sudah Berkomentar

hahaha , nyaranin yang gak boleh ditiru , boleh2 juga

Reply
Terima Kasih Sudah Berkomentar

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
Terima Kasih Sudah Berkomentar

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

Reply
Terima Kasih Sudah Berkomentar

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

Reply
Terima Kasih Sudah Berkomentar

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
Terima Kasih Sudah Berkomentar

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
Terima Kasih Sudah Berkomentar

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
Terima Kasih Sudah Berkomentar

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

Reply
Terima Kasih Sudah Berkomentar

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

Reply
Terima Kasih Sudah Berkomentar

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
Terima Kasih Sudah Berkomentar

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

Reply
Terima Kasih Sudah Berkomentar

berhasil kang...makasih yah.

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

Reply
Terima Kasih Sudah Berkomentar

salut dan angkat topi dengan semangat ng'blognya

Reply
Terima Kasih Sudah Berkomentar

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

Reply
Terima Kasih Sudah Berkomentar

pasang KY,boleh ringankan loading blog.

Reply
Terima Kasih Sudah Berkomentar

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

Reply
Terima Kasih Sudah Berkomentar

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

Reply
Terima Kasih Sudah Berkomentar

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
Terima Kasih Sudah Berkomentar

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

Reply
Terima Kasih Sudah Berkomentar

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

Reply
Terima Kasih Sudah Berkomentar

mana yang disebut "kang silet" Kang?

Reply
Terima Kasih Sudah Berkomentar

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

Reply
Terima Kasih Sudah Berkomentar

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

Reply
Terima Kasih Sudah Berkomentar

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

Reply
Terima Kasih Sudah Berkomentar

gmn kalau punyaan Pak Dhe zach dulu...

Reply
Terima Kasih Sudah Berkomentar

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

Reply
Terima Kasih Sudah Berkomentar

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

Reply
Terima Kasih Sudah Berkomentar

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

Reply
Terima Kasih Sudah Berkomentar

mas cara untuk membuat scrool pada komen gmna?

Reply
Terima Kasih Sudah Berkomentar

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

Reply
Terima Kasih Sudah Berkomentar

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

Reply
Terima Kasih Sudah Berkomentar

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

Reply
Terima Kasih Sudah Berkomentar

ya thanks sob :)

Reply
Terima Kasih Sudah Berkomentar

oh ada ya kliniknya :D

Reply
Terima Kasih Sudah Berkomentar

lihat didaftar isi

Reply
Terima Kasih Sudah Berkomentar

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

Reply
Terima Kasih Sudah Berkomentar

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

Reply
Terima Kasih Sudah Berkomentar

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
Terima Kasih Sudah Berkomentar

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
Terima Kasih Sudah Berkomentar

pasang sendiri,gitu aja kok repot :D

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

Reply
Terima Kasih Sudah Berkomentar

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

Reply
Terima Kasih Sudah Berkomentar

blog ini loadingnya rata-rata air.

Reply
Terima Kasih Sudah Berkomentar

lagi ngapa koh wong loro. nylekamin pisan.

Reply
Terima Kasih Sudah Berkomentar

yang gambar lingkaran biru tuh

Reply
Terima Kasih Sudah Berkomentar

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

Reply
Terima Kasih Sudah Berkomentar

ayo mbak bayar dengan senyuman

Reply
Terima Kasih Sudah Berkomentar

ngintip ya mas :D

Reply
Terima Kasih Sudah Berkomentar

yg dibawah itu ntuh ?

Reply
Terima Kasih Sudah Berkomentar

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

Reply
Terima Kasih Sudah Berkomentar

Hai Lucyana.. :D

Reply
Terima Kasih Sudah Berkomentar

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

Reply
Terima Kasih Sudah Berkomentar

wah keren keren ne tutorial nya, makasih gan

Reply
Terima Kasih Sudah Berkomentar

mantap tutornya, langsung saya praktekin n sukses, thanks

Reply
Terima Kasih Sudah Berkomentar

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

Reply
Terima Kasih Sudah Berkomentar

Cara yang ampuh untuk menghancurkan wasir peyakit ambeien tanpa operasi, pendek dan pengobatan yang kuat

obat wasir

Reply

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

Silahkan berkomentar sesuai topik...!
Copyright © 2013. Tekhnik Blogging - All Rights Reserved | Template Created by Kompi Ajaib Proudly powered by Blogger