Cara Buat Komentar Blogger Seperti Komentar Facebook dengan CSS dengan SIMPLE & CEPAT

Satria Perwira    12/04/2012    Trixs Blogging   

Cara Buat Komentar Blogger Seperti Komentar Facebook dengan CSS dengan SIMPLE & CEPAT

Rafi Orilya,-Siapa admin yang tidak mau blognya diberi komentar, pasti semuanya mau... karena dari komentar juga dapat menambah blogrank kita menjadi lebih tinggi.Naah, sebelum sobat mendapatkan komentar dari pengunjung alahkah baiknya sobat mempersiapkan bentuk form komentar yang baik yang disegani oleh pengunjung, sehingga pengunjung dapat berkeinginan untuk berkomentar di blog sobat.. okey

DEMO=> KLIK DISINI

Yuupzz, kali ini kita akan belajar cara membuat komentar di blog mirip Facebook dengan CSS
Kali ini saya tidak akan panjang lebar memberikan tutornya, karena memang ini sangat mudah.. baik ikuti langkah-langkah dibawah :

1. Login blogger
2. Masuk pada Template => Edit HTML => Centang “Expand Template Widget”
3. Kemudian cari kode ]]></b:skin> , tekan F5 aja biar cepat mas...
4. Copy CSS code komentar dibawah ini (harap jangan memodifikasinya) :

/* CSS Komentar Blogspot - Tema Facebook * Selengkapnya: https://facebook.com/rafi.orilya.groups */ .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 10px; border-top:1px solid #e9e9e9; border-left:1px solid #ccc; }.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. Pastekan diatas code ]]></b:skin> tadi

6. Save template
Silahkan cek, semoga sukses... :)

Begitu mudah bukan-? Hahaa... yaa seperti itulah ilmu, kita harus membaginya dengan semuanya. Agar bermanfaat untuk kita dari diri orang lain..
Sampai ketemu di post selanjutnya oke, tinggalkan komentarnya yaah..

Artikel Dilindungi
Sertakan alamat blog ini jika mengcopy paste
Hak Cipta Dilindungi

Terima Kasih
Rafi Orilya Groups
by Rafi Aldiansyha Asikin