Jumat, 29 Juni 2012

Komentar Blogger Seperti Facebook

Komentar Blogger dengan gaya Facebook. Banyak tutorial CSS untuk merubah tampilan standar Blogger threded comment yang di persembahkan oleh rekan-rekan blogger. Hal ini dikarenakan tampilan komentar standar blogger kurang elegan, terkesan biasa-biasa saja.

Tutorial kali ini tentang komentar Blogger menyerupai Facebook, dengan penambahan kode CSS. Kode CSS ini dipersembahkan oleh hompimpaalaihumgambreng, dan saya edit sedikit dengan menghilangkan garis pinggir dan perubahan padding-left dan padding right. Contoh hasil tampilan komentar blogger seperti facebook (facebook style) bisa dilihat pada screenshoot di bawah, atau bisa Anda kunjungi Live Demonya.

komentar blogger seperti facebook


Cara Membuat Komentar Blogger Seperti Facebook

1. Login ke Blogger
2. Klik Template --> Edit HTML
3. Cari kode ]]></b:skin>
4. Tambahkan kode ini diatas ]]></b:skin>
/* CSS Komentar Blogspot - Tema Facebook
 */

.comments {
  font:normal 11px/14px "Lucida Grande",Tahoma,Verdana,Arial,Sans-Serif !important;color:rgb(51,51,51);
}

.comments .comments-content a {color:#3B5998 !important;}

.comments h2, .comments h3, .comments h4 {
  font-family:"Lucida Grande",Tahoma,Verdana,Arial,Sans-Serif !important;
  font-size:16px;}

.comments .comments-content .comment {
  margin:0 0 0;
  padding:10px 0px 10px 0px;
  border-top:1px solid #e9e9e9;
  border-left:none;
}

.comments .comment .comment-header,
.comments .comment .comment-actions,
.comments .comment .comment-actions a,
.comments .comment .comment-thread.inline-thread,
.comments .comment .continue {margin:0 0 0; padding:0 0 0; border:none; background:transparent;}

.comments .comment .comment-header {margin-bottom:4px;}

.comments .comment .comment-header .datetime a {color:#808080 !important;}

.comments .comment .comment-actions a {padding-right:5px;}

.comments .thread-toggle .thread-arrow {width:7px; height:7px; padding-right:4px} 
.comments .comment .avatar-image-container,
.comments .comment .avatar-image-container img {
  width:50px;
  height:50px;
  max-width:none;
  max-height:none;
  border:none;
  padding:0;
  margin:0;
  outline:none;
}

.comments .comment .comment-block {margin:0 0 0 60px !important;}

.comments .comment .comment-thread.inline-thread {margin:7px 0 0 22px;}

.comments .comment .comment-thread.inline-thread ol {margin:7px 0 10px !important;}

.comments .comment .comment-thread.inline-thread .comment {
  background-color:#EDEFF4;
  padding:5px 5px 0;
  margin:1px 0 0;
  border:none;
  border-bottom:1px solid #D2D9E7;
}

.comments .comment .comment-thread.inline-thread .comment .avatar-image-container,
.comments .comment .comment-thread.inline-thread .comment .avatar-image-container img {width:32px;height:32px;}

.comments .comment .comment-thread.inline-thread .comment .comment-block {
 margin:0 0 0 40px !important;}

.comments .comment .comment-content {text-align:left;}

.comments .comments-content .icon.blog-author {
  width:16px;
  height:16px;
  display:inline-block;
  vertical-align:top;
  background:transparent url('/favicon.ico') no-repeat 50% 50%;}

.comments .comment .comment-thread.inline-thread .comment:last-child {
 border-left:2px solid #A8B2CE !important;
}

5. Simpan Template

Congrats... komentar Blogger anda sudah berubah dengan gaya facebook.

66 komentar

Silahkan berkomentar seusuai dengan tema Artikel di atas.
avatar

wahh..trend baru lagi nie..tp lebih enak mana kanag pake itu apa threaded comments?atau lbh ringan yg mana??

avatar

ini juga masih threaded comments, tapi tampilan default blogger diedit hingga menyerupai komentar facebook. kecuali yang hack... itu berbeda sob...

avatar

ohh..yha denk..keren kang..hemat tempat hehehe..

avatar

saya pernah pasang threated komen ini, tapi kok gak bisa jadi scroll ya..

avatar

maksudnya di buat didalam box scroll sob ?

avatar

wah baru lagi nih, izin nyoba kang, hatur nuhun pisan kang:}

avatar

Mangga kang... keren blogna :)

avatar

Keren banget model komentarnya, kang...cuma, kira-kira cocok ga ya sama template saya?
Btw...makasih sharing super duper bagusnya, kang. :)

avatar

Sama2 sob... dicoba aja, kalo ga cocok nanti ganti lagi :)
emang sih, harus sesuai sama template.

avatar

mantab kang..izin share ya kang?

avatar
avatar

asik neh kayak nya kang,,,, tapi masih betah ma tampilan yang sekarang,,mungkin lain kali bisa saya coba kang,, :)

avatar

wahh, keren nih kang.. ace coba ah :)

avatar

buatannya hompimpa? haha :D
tuh tombol hapusnya ngilang, caranya munculin pake css ini :
.item-control {
display: inline;
}

avatar

Iya mas... masa baru tau? kan underground404 pernah pake CSS ini wahtu theme yang putih :)

Tombol hapus ada kok.. coba komennya jangan pake anonim

avatar

wah ilmu baru nih kang...
boleh nih dicoba, tp memang harus disesuaikan dengan template kita ya kang...

maju terus kang :-bd

avatar

nimbrung mas,...cuma tes doang,..

avatar

iya sih... kalau ga sesuai jadinya aneh :)

avatar

gk berubah sama skali kang ?? @_@

avatar

kayanya template ane bnyk errornya yah @_@

avatar

kang templatenya keren dan nyaman,,boleh dunk di share dikit :p
Search Engine Marketing Online | Best Mobile Apps

avatar

kok saya ga berhasil yah ????

avatar

bukan error, coba hapus CSS yang ada. jangan lupa backup dulu

avatar

coba hapus CSS yang lama, tapi untuk jaga2 silahkan backup dulu

avatar

kalau di share, banyak yang sama dong :)
nanti share yang mirip2 deh...

avatar

Kang Ismet, gimana cara buat tampilan followers blog menjadi seperti itu? share dong. Terima Kasih

avatar

waduh... udah lama banget tampilan kayak gitu...
yang pasti di GFC nya saya edit, tapi detailnya lupa :)

avatar

saya sudah googling berkali-kali tentang cara membuat tampilan seperti itu, bahkan ada dalam versi youtubenya. Namun tutor itu sudah versi GFC lama, jadi sudah tidak cocok lagi. saya rasa Kang Ismet lebih tau tentang ini, "Jika ada waktu senggang" mohon share sedikit tutor baru dengan beberapa screenshot "jika ada waktu senggang, Kang"

avatar

Insya Allah saya coba... tapi ga janji kapan ya..

avatar

hehe :) terima kasih Kang, sempatkanlah jika ada wakktu senggang tentang ini untuk saya dan newbie yang lain.

avatar

Alhamdulillah sudah saya coba. terimaasih kang sudah berhasil...

avatar

sama2 sob... keep sharing

avatar

makasih kangi ismet..

avatar

iya. template yg putih dulu udah bosen wkwkwk :D

dulu sy pake itu kagak ada soalnya..

avatar
avatar

taks kang sharenya...

tapi kok kaga ngefek yah sama blog saya, apa templatenya yang kaga suport apa gimana yah??

avatar

Terimakasih... sangat membantu

avatar
avatar

terima kasih..
cocok bgt neeh..
tapi 11:13 AM kok muncul 21:09 jamnya yahh kang..??
hehehh...

avatar

Coba edit time zone nya sob..

avatar

Kayaknya masih sistem komentar lama sob, blum threaded comment

avatar

okeeh..
ane coba...
tapi pas ane terapin ke blog y satunya lagi kog mlah ga bisa ya kang..?
http://e-seni.blogspot.com/

avatar

Biasanya udah ada settingan CSS lain, coba buang dulu sob..

avatar

iyaa..
sepertinya begitu..
trimakasih bnyak ya kang...:)
berjalan lancar di http://www.seniaceh.com/

avatar

sudah bisa kang...
trima kasih....hehehe
http://e-seni.blogspot.com/

avatar

Okey.. congrats deh sob.. keren blognya

avatar

Bagus bang bagus artikelnya ..!!
http://dyan-seller.blogspot.com

avatar

boleh dicoba gak nih sob..? hehehe.. :D

avatar

bebas sob sepuasnya.. heheheh :)

avatar

Makasih bnyak kang...
ane asik gonta ganti template...
ga prnah puas...
y ptg kreasi ya kan kang...
hehehee....
jempol buat kang ismet..!!

avatar
avatar

Makasih kang, aku ijin pakai

avatar
avatar
avatar
avatar
avatar
avatar
avatar

kang, cssnya ngga works..
Padahal bagus banget di demonya, aku baca komen2 diatas sih harusnya di hapus css yang lama, tapi ngga tau mau hapus bagian yang mana...
)* tepuk jidad...

avatar

gak ada tombol hapusnya yah kang??

avatar

Keren banget kang Kolom Komentarnya !!! perlu untuk dipraktekan smoga z berhasil hehehe...salam kenal z ea kang

avatar

I like this article very much because it is technical and very much useful for me to gather more knowledge. Good to read...Pakistani matrimonial sites

avatar

kang bermanfaat banget buat saya....trims.....yaaaaaa

avatar

DAPATKAN HARGA PROMO MEYAMBUT TAHUN BARU HAKIR BULAN SEMUAX MURAH-MURAH DI SANI SHOP
Produk dijamin asli orginal Barang yang Kami Tawarkan Semuanya Barang ASLI ORGINAL Ada Garansi Resmi Distributor dan Garansi TAM 2 bebas resiko bebas penipuan.
Semua Produk Kami Baru dan Msh Tersegel dLm BOX_nya.
BERMINAT HUB-0816-597-476 ATAU KLIK WEBSET RESMI KAMI http://sani-shop.blogspot.com/
Ready Stock! Samsung Galaxy S4 Mini Rp.2,500.000
Ready Stock! Apple iPhone 5 Rp.2,700.000
Ready Stock! BlackBerry 9380 Orlando - Black.Rp.900.000,-
Ready Stock! BlackBerry Curve 8520 Gemini.Rp.500.000,-
Ready Stock! BlackBerry Bold 9780 Onyx 2.Rp.800.000,-
Ready Stock! Blackberry Curve 9320.Rp.700.000,-
Ready Stock! Samsung Galaxy Note 10.1.Rp.2,500.000.
Ready Stock! Samsung Galaxy Tab 2 (7.0).Rp. 1.000.000
Ready Stock! Samsung Galaxy S III Mini.Rp.1.800.000.
Ready Stock! Samsung Galaxy Nexus I9250 - Titanium Si.Rp.1.500.000,-
Ready Stock! Samsung Galaxy Note N7100.Rp.2.500.000.
Ready Stock! Samsung Galaxy Note N7000 - Pink.Rp.1.700.000.

avatar

sippp keren kang, ikut nyimak buat nambah ilmu :)

avatar

ijin coba kang,, sekalian belajar..|o|

Komentar yang menyertakan link aktif, iklan, atau titip link, akan dimasukan ke folder SPAM.
Untuk pertanyaan di luar topik artikel silahkan kik OOT (apabila dipertanyakan di sini, mohon maaf apabila tidak dibalas).

Konversi KodeForum

Batal
Terima kasih telah berkomentar
 
Maintenance
Mohon maaf atas apabila kurang nyaman membaca dan melihat tampilan blog ini. Untuk sementara blog sedang dalam perbaikan. Terimakasih
close