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.

65 komentar

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

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

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

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

maksudnya di buat didalam box scroll sob ?

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

Mangga kang... keren blogna :)

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

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

mantab kang..izin share ya kang?

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

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

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

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

Tombol hapus ada kok.. coba komennya jangan pake anonim

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

maju terus kang :-bd

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

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

gk berubah sama skali kang ?? @_@

kayanya template ane bnyk errornya yah @_@

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

kok saya ga berhasil yah ????

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

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

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

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

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

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"

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

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

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

sama2 sob... keep sharing

makasih kangi ismet..

iya. template yg putih dulu udah bosen wkwkwk :D

dulu sy pake itu kagak ada soalnya..

Makasih tuturnya Kang

taks kang sharenya...

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

Terimakasih... sangat membantu

jadi simple nih

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

Coba edit time zone nya sob..

Kayaknya masih sistem komentar lama sob, blum threaded comment

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

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

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

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

Okey.. congrats deh sob.. keren blognya

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

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

bebas sob sepuasnya.. heheheh :)

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

Makasih kang, aku ijin pakai

info yang bagus ini

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

gak ada tombol hapusnya yah kang??

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

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

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

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.

sippp keren kang, ikut nyimak buat nambah ilmu :)

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 KodeOOT & Request Tutorial

Batal
Terima kasih telah berkomentar
 
Pray for Adhy's son
Mohon dukungan do'a dari sahabat blogger, untuk kesembuhan anak dari Adhy 'KompiAjaib' Suryadi DISINI

Untuk Donasi, silahkan kunjungi link INI
close