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.

68 komentar

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

Balas

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

Balas

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

Balas

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

Balas

maksudnya di buat didalam box scroll sob ?

Balas

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

Balas

Mangga kang... keren blogna :)

Balas

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

Balas

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

Balas

mantab kang..izin share ya kang?

Balas

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

Balas

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

Balas

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

Balas

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

Tombol hapus ada kok.. coba komennya jangan pake anonim

Balas

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

maju terus kang :-bd

Balas

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

Balas

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

Balas

gk berubah sama skali kang ?? @_@

Balas

kayanya template ane bnyk errornya yah @_@

Balas

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

Balas

kok saya ga berhasil yah ????

Balas

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

Balas

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

Balas

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

Balas

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

Balas

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

Balas

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"

Balas

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

Balas

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

Balas

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

Balas

sama2 sob... keep sharing

Balas

makasih kangi ismet..

Balas

iya. template yg putih dulu udah bosen wkwkwk :D

dulu sy pake itu kagak ada soalnya..

Balas

taks kang sharenya...

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

Balas

Terimakasih... sangat membantu

Balas

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

Balas

Coba edit time zone nya sob..

Balas

Kayaknya masih sistem komentar lama sob, blum threaded comment

Balas

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

Balas

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

Balas

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

Balas

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

Balas

Okey.. congrats deh sob.. keren blognya

Balas

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

Balas

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

Balas

bebas sob sepuasnya.. heheheh :)

Balas

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

Balas

Makasih kang, aku ijin pakai

Balas

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

Balas

gak ada tombol hapusnya yah kang??

Balas

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

Balas

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

Balas

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

Balas

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.

Balas

sippp keren kang, ikut nyimak buat nambah ilmu :)

Balas

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

Balas

Keren.. tapi di http://jobmarketfair.blogspot.com gak sesuai dgn demo, mohon infonya kang.

Balas

Saya pasang di www.jobmarketfair.blogspot.com tapi tampilan tdk berubah. Mohon batuannya kang.

Balas

Poskan Komentar


×
Chat