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

Mengatasi Masalah Pada Pesan Formulir Yang tidak Sesuai

Masalah ini sangat sering ditanyakan di sini (kemunculan pertanyaan sejenis terbanyak bisa ditemukan di posting Emotikon Blogger Otomatis dengan JQuery). Ini mengenai masalah pesan formulir komentar yang akan jatuh/meletakkan diri di bawah formulir komentar tanpa kita inginkan pada saat-saat tertentu. Kita semua setuju bahwa pesan untuk para komentator idealnya terletak tepat di atas formulir komentar, tapi untuk beberapa kasus mereka biasanya akan turun ke bawah dengan cara yang aneh.

Pada awalnya Saya juga merasa bingung dengan cara kerja fitur baru Blogger ini, sampai Saya mencoba membandingkan sebagian script di blog Saya dengan salah satu script yang sudah berhasil diimplementasikan oleh sebuah blog yang Saya kunjungi:

document.getElementById(domId).insertBefore(replybox, null);

replybox adalah variabel. Jika Anda mengalihkan perhatian Anda sedikit ke sebelah atas maka Anda akan menemukan bahwa replybox adalah variabel yang menyatakan elemen #comment-editor:

var onReply = function(commentId, domId) {
    if (replybox == null) {
        // lazily cache replybox, and adjust to suit this style:
        replybox = document.getElementById('comment-editor');
        if (replybox != null) {
            replybox.height = '250px';
            replybox.style.display = 'block';
            replyUrlParts = replybox.src.split('#');
        }
    }
    if (replybox && (commentId !== replyParent)) {
        document.getElementById(domId).insertBefore(replybox, null);
        replybox.src = replyUrlParts[0]
        + (commentId ? '&parentID=' + commentId : '')
        + '#' + replyUrlParts[1];
        replyParent = commentId;
    }
};

Meskipun variabel tersebut tidak berada dalam satu kondisi, tapi setidaknya kita sudah tahu titik terangnya. Itulah kesalahannya! #comment-editor sebenarnya adalah elemen <iframe> formulir komentar yang sama sekali tidak berhubungan dengan pesan formulir komentar. Pesan formulir komentar bukanlah bagian dari elemen formulir komentar. Dia hanya meletakkan diri di sebelah atas formulir seperti ini:

<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' id='comment-editor' name='comment-editor' src='' width='100%'/>

<p><data:blogCommentMessage/></p> mewakili pesan formulir komentar, dan elemen <iframe> yang terletak di bawahnya mewakili formulir komentar (Selengkapnya mengenai struktur formulir komentar Blogger bisa Anda pelajari di artikel Struktur Label dan Status Komentar).

Oleh karena itu, saat kita mengeklik tombol Balas, maka yang akan terangkat hanya formulir komentarnya saja, sedangkan pesan formulir komentar yang seharusnya ikut dibawa akan ditinggalkan. Karena dalam script di atas, .insertBefore() hanya akan membawa replybox (yang notabene adalah #comment-editor):

Pesan formulir komentar tidak termasuk dalam wilayah #comment-editor (replybox)

Buat Elemen Pembungkus Baru untuk Mengangkat Formulir Komentar Beserta Kelengkapannya
Solusi untuk mengatasi masalah ini adalah dengan cara menambahkan elemen pembungkus baru yang akan kita gunakan untuk mengelilingi formulir dan pesan formulir komentar. Dengan begitu, kita tidak akan menugaskan .insertBefore() untuk mengangkat elemen replybox tapi kita akan membuat dia mengangkat elemen pembungkusnya, sehingga formulir komentar dan pesan formulir komentar di dalamnya akan ikut terbawa ke mana saja elemen pembungkus berpindah.

Masuklah ke halaman Editor HTML Template, kemudian cek Expand Template Widget.
Temukan kode ini:

<b:includable id='threaded-comment-form' var='post'>
  <div class='comment-form'>
    <a name='comment-form'/>
    <b:if cond='data:mobile'>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
    <b:else/>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
    </b:if>
    <data:post.friendConnectJs/>
    <data:post.cmtfpIframe/>
    <script type='text/javascript'>
      BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);
    </script>
  </div>
</b:includable>

TIP: Tekan CTRL + F lalu ketik 'threaded-comment-form' untuk mempermudah pencarian

Ganti semua kode di atas dengan kode ini:

<b:includable id='threaded-comment-form' var='post'>
  <div class='comment-form'>
    <a name='comment-form'/>
    <b:if cond='data:mobile'>
<div id='form-wrapper'>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
</div>
    <b:else/>
<div id='form-wrapper'>
      <p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
</div>
    </b:if>
    <data:post.friendConnectJs/>
    <data:post.cmtfpIframe/>
    <script type='text/javascript'>
      BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);
    </script>
  </div>
</b:includable>

Pada kode di atas Anda akan melihat bahwa Saya telah mengelilingi elemen <iframe> dan <p><data:blogCommentMessage/></p> dengan elemen <div id='form-wrapper'>.
Nah, kita akan menggunakan elemen pembungkus tersebut sebagai PEGANGAN bagi .insertBefore() untuk memindah-mindah elemen formulir komentar dan pesan formulir komentar di dalamnya.

Kita tahu bahwa di dalam #form-wrapper terdapat formulir komentar dan pesan formulir komentar, oleh karena itulah ke dua elemen tersebut (formulir dan pesan formulirnya) akan ikut terbawa seiring berpindahnya elemen #form-wrapper:

Pesan dan formulir komentar kini sudah dipegangi oleh elemen #form-wrapper

Terakhir, untuk memodifikasi script thread-commenting Blogger agar tidak hanya mengangkat/memindah formulir komentar, lihatlah kembali pada bagian ini:

document.getElementById(domId).insertBefore(replybox, null);

Ganti dengan kode ini:

document.getElementById(domId).insertBefore(document.getElementById('form-wrapper'), null);

Klik Simpan Template.

Sekarang setiap kali kita mengeklik tombol Balas, maka yang akan berpindah-pindah adalah elemen #form-wrapper dan bukan elemen #comment-editor.
#comment-editor dan pesan formulir komentar di dalamnya hanya akan berdiam diri di dalam #form-wrapper dan akan mengikuti ke mana saja dia berpindah.

Sumber - Reviewer: Unknown - ItemReviewed: Mengatasi Masalah Pada Pesan Formulir Yang tidak Sesuai

Modifikasi List Bullet dengan CSS

1. Masuk ke Template blogger
2. Cari kode ]]></b:skin>
3. Masukan kode di bawah ini di atas kode ]]></b:skin>

.post-body ul {
margin: 0 auto;
background: #def;
padding: 0 0 0 25px;
list-style-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQkaHFGo9e4qMsOLeiaQuTSK4g63Kd52byIx6J8qiNBlaJ-FK8657y-g8OjMBrRass-nCT-vNnRfnsEegPbNdPIlwTen6_NMbYfqyggZ7X5Tpb13EQ5SlFr0Imxa9d3OJHvLabNeoK-uc/s1600/uncheck.gif);
}
.post-body li {
margin: 0 0 0 10px;
padding: 3px;
border-bottom: 1px solid #999;
}
.post-body li:hover {
list-style-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoRV8nOSWRIh8CqThTma8sjKGcxEY3mNWa-aH0Y-jYe0t4oIM3tAwkkhR1E067GiOMGjHhlAMOwxE6dp9mwKgIq7X-R6Yo2U9hWCborKVCvM2_ydX_2tcViInLhe6mYx4JWoElkTGU22M/s1600/check.gif);
background-color: #CDE0E7;
cursor: pointer;
}

4. Klik SIMPAN TEMPLATE.

Ketika nanti anda menggunakan list bullet di postingan anda maka tampilannya otomatis akan seperti yang ada pada screenshot.

Jika kode css tersebut ada yang sama di dalam template anda hapus saja dan ganti dengan kode css list bullet yang saya share ini. jika anda gak mau pusing gak usah baca tulisan saya ini cukup sampai langkah ke 4 saja dan selesai.

ini ada masukan dari bang Taufik yang hanya menggunakan css, Namun anda harus membuatnya sendiri secara manual untuk kodenya html nya.

Masukan kode di bawah ini di atas kode ]]></b:skin>

ul.keren li {
  list-style:square;   
}

ul.keren li:before {
  content:"\2714 ";
  display:none;    
}

ul.keren li:hover {
  list-style:none;
  position:relative;
  left:-1em;
}

ul.keren li:hover:before {
  display:inline-block;
  font-size:60%;
  margin-right:8px;
}

Sebenarnya juga gak terlalu rumit ya yang kedua ini cuman anda perlu menambahkan class pada tag ul jadi seperti ini nanti kodenya

<ul class="keren">
    <li>List 1</li>
    <li>List 2</li>
    <li>List 3</li>
    <li>List 4</li>
    <li>List 5</li>
</ul>

Ini Bagi yang mau menggunakan saja, ok segitu aja dan terima kasih. - Reviewer: Unknown - ItemReviewed: Modifikasi List Bullet dengan CSS

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