CSS Komentar Blogger ala 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 disini - Reviewer: Unknown - ItemReviewed: CSS Komentar Blogger ala Facebook

Memasang Emoticons di Komentar Blog Versi DonsCit

Nah karena ada yang Request saya terima degh :D
Nah udah taukan gimana Emoticon itu ? Woke kita langsung ke tutorialnya aja ...

1. Pertama sobat yang pastinya udah Login, Kemudian ke Edit HTML dan jangan lupa Expan Template Widget

Pastekan kode ini di atas kode </body>

<script src='https://sites.google.com/site/adityameilaz/emo/emot_keren_baru.js' type='text/javascript'/>

2. Kemudian Cari kode

<div class='post-footer-line post-footer-line-3'/>
    </div>
  </div>

3. Simpan kode ini dibawah </div> yang ke-2 jika tampilannya tidak sesuai sobat bisa lihat gambar dan perhatikan peletakan kode berikut

<b:if cond='data:blog.pageType == &quot;item&quot;'>  
<div style='background-color:#000;border:1px dashed #0F0;border-radius:5px;padding-top:10px;padding-bottom:10px;'>
<center>
   <p style='color:#fff'>
      <b>
         <img src='http://adityas.vacau.com/emotion/nangis.gif' width='20'/>:a:
         <img src='http://adityas.vacau.com/emotion/80.gif' width='20'/>:b:
         <img src='http://adityas.vacau.com/emotion/02.gif' width='20'/>:c:
         <img src='http://adityas.vacau.com/emotion/77.gif' width='20'/>:d:
         <img src='http://adityas.vacau.com/emotion/48_002.gif' width='20'/>:e:
         <img src='http://adityas.vacau.com/emotion/67.gif' width='20'/>:f:
         <img src='http://adityas.vacau.com/emotion/grrr.gif' width='20'/>:g:
         <img src='http://adityas.vacau.com/emotion/39_002.gif' width='20'/>:h:
         <img src='http://adityas.vacau.com/emotion/17_002.gif' width='27'/>:i:
         <img src='http://adityas.vacau.com/emotion/51_002.gif' width='25'/>:j:
      </b>
      <br/>
      <br/>
      <a OnClick='window.open(&quot;http://donscit.blogspot.com/2012/06/cara-memasang-emoticons-di-komentar.html&quot;, &quot;popupwindow&quot;, &quot;scrollbars=yes, width=550, height=520&quot;);return true' href='#!' rel='nofollow'>See More Emoticons</a>
   </p>
</center>
</div>
</b:if>

klik gambar untuk memperbesar

4. Klik save Template dan lihat Hasilnya
5. Jika tidak muncul Emoticons'nya pindahkan kode ini di atas

<data:blogTeamBlogMessage/>

6. Jika Masih tidak muncul juga letakan di bawah kode

<a name='comments'/>

7. Save Template sobat dan lihat hasilnya.

Ini sengaja saya panjangan karena emoticons ini kadang muncul kadang tidak karena template kita berbeda-beda jdi Ini buat emoticons yang tidak muncul versi saya, Jika masih tidak mengerti juga silahkan berkomentar-lah saya akan menjawab selagi saya bisa menjawab nya, Terimakasih.

Jika Emoticons sobat sudah muncul di No.3 atau 4 itu anda sudah berhasil dan anda sudah aman :)

Cara ke-2

Cari kode <b:if cond='data:post.embedCommentForm'>
dan letakan kode di bawah ini di atas kode tadi

<b:if cond='data:blog.pageType == &quot;item&quot;'>  
<div style='background-color:#000;border:1px dashed #0F0;border-radius:5px;padding-top:10px;padding-bottom:10px;'>
<center>
   <p style='color:#fff'>
      <b>
         <img src='http://adityas.vacau.com/emotion/nangis.gif' width='20'/>:a:
         <img src='http://adityas.vacau.com/emotion/80.gif' width='20'/>:b:
         <img src='http://adityas.vacau.com/emotion/02.gif' width='20'/>:c:
         <img src='http://adityas.vacau.com/emotion/77.gif' width='20'/>:d:
         <img src='http://adityas.vacau.com/emotion/48_002.gif' width='20'/>:e:
         <img src='http://adityas.vacau.com/emotion/67.gif' width='20'/>:f:
         <img src='http://adityas.vacau.com/emotion/grrr.gif' width='20'/>:g:
         <img src='http://adityas.vacau.com/emotion/39_002.gif' width='20'/>:h:
         <img src='http://adityas.vacau.com/emotion/17_002.gif' width='27'/>:i:
         <img src='http://adityas.vacau.com/emotion/51_002.gif' width='25'/>:j:
      </b>
      <br/>
      <br/>
      <a OnClick='window.open(&quot;http://donscit-emoticons.cc.cc&quot;, &quot;popupwindow&quot;, &quot;scrollbars=yes, width=550, height=520&quot;);return true' href='#!' rel='nofollow'>See More Emoticons</a>
   </p>
</center>
</div>
</b:if>

kemudian Save Template lihat hasilnya :)

Semoga Cara Memasang Emoticons di Komentar Blog Berguna dan Bermanfaat. - Reviewer: Unknown - ItemReviewed: Memasang Emoticons di Komentar Blog Versi DonsCit