Merubah tampilan form Komentar Blogger

Komentar Fantastis

Form Komentar yang akan dibuat kali ini cukup menarik, untuk blog Karena form komentar ini sudah diedit dengan baik dan sempurna, dengan berbagai fitur seperti. dibawah ini

• Style Elegan dan Simpel
• Image Avatar
• Tombol Reply
• Styel Reply WP
• Highlight Blog Owners
• Pesan Ucapan "Terimakasi"
• Emoticon Onion (Kucing)

blog ini juga memakai form Komentar ini?

1. Login di Blogger.com, Pergi ke Template > Edit HTML (Expand Template Widget)
2. Tekan Ctrl+F cari ]]></b:skin>, Letakan kode berikut di atas ]]></b:skin>
   /* Comments ----------------------------------------------- */ #comments h4 { font-size: 18px; font-weight: normal; margin: 20px 0; } .cm_wrap { clear: both; margin-bottom: 10px; float: right; width: 100%; } .cm_head { margin: 0; width:60px; float: left; } .cm_avatar { margin: 0; vertical-align: middle; border: 1px solid #DDD; padding: 3px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfyISqjHyX6HeX-xG3kJ0jUBRqz3zTDF-YLpzhg4ekeyhj1wBz3-ePBngtz0G4RWD4xMvustq2lYdffCyMS4Ieyrzn6i8kLdv6W9RSESQdXnd2Y2_bdlXyu98-WWCqfJPuUBCE0tJCQcI/s1600/takdikenal.jpg) center no-repeat; width: 35px; height: 35px; } .cm_avatar_a { margin: 0; vertical-align: middle; border: 1px solid #DDD; padding: 3px; background:#c6e5f7; background-position:center; background-repeat:no-repeat; width: 35px; height: 35px; } .cm_reply { padding-top: 5px; } .cm_reply a { display: inline-block; margin: 0; padding: 1px 6px; border: 1px solid #C4C4C4; border-top-color: #E4E4E4; border-left-color: #E4E4E4; color: #424242 !important; text-align: center; text-shadow: 0 -1px 0 white; text-decoration: none; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; background: #EDEDED; background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) ); background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% ); font: 11px/18px sans-serif; } .cm_reply a:hover { text-decoration: none !important;; background: #ccc;; background: -webkit-gradient(linear,left top,left bottom,color-stop(.2, #eeeeee),color-stop(1, #cccccc));; background: -moz-linear-gradient(center top,#eeeeee 20%,#cccccc 100%);; } .cm_entry { padding: 16px; background: #fcfcfc; border: 1px solid #E4E4E4; overflow: hidden; } .cm_arrow { display: block; width: 9px; height: 18px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn1jiGoDWmHyFOPwF3J79umM4V8ZyLh34DbLIPgOjJxXEMrohyAPTnJwjyjC23sRNEQSCdTxY3ww60DqErLGElpwuMwvfdyUSSc6ExUEJ045uXQINIUMTBnBG_XLmEll0nFH3jQuJv4c0/s1600/comment-arrow.gif) no-repeat; position: absolute; margin-left: -25px; } .cm_info { margin-bottom: 5px; border: thin solid #E6E6E6; background-color: #F4F4F4; padding: 5px; } .cm_info_a { margin-bottom: 5px; border: thin solid #E6E6E6; background-color: #dff0fa; padding: 5px; } .cm_name { font-size: 14px; color: #666666 !important; text-decoration:none; float: left; } .cm_name_a { font-family:"Comic Sans MS", cursive; font-size: 14px; color: #666666 !important; text-decoration:none; font-weight: bold; float: left; } .cm_date { font-size: 10px; color: #999; text-decoration:none; float: right; } .cm_date_a { font-family:"Comic Sans MS", cursive; font-size: 10px; color: #2D5E7B; text-decoration:none; float: right; padding-top:5px; } .cm_entry p { padding: 5px; clear: both; border: thin solid #E6E6E6; background-color: #ffffff; font-size: 13px; color: #333; word-wrap:break-word; } .cm_entry_a p { padding: 5px; clear: both; border: thin solid #E6E6E6; background-color:  #ffffff; font-size: 13px; color: #333; word-wrap:break-word; } .cm_pagenavi { font-size: 10px; text-transform: uppercase; color: #666; text-shadow: 1px 1px white; font-weight: bold; } .cm_pagenavi a { color: #666; text-decoration: none; padding:10px; } .cm_pagenavi a:hover { text-decoration: underline } .cm_pagenavi span { color: #888; background: white; padding: 4px; border: 1px solid #E0E0E0; } /* Comment Admin  */ .comment-body-author { font-family:"Comic Sans MS", cursive; font-weight: 300; }
   Untuk menganti background agar sesuai dengan template yang anda gunakan cari saja kode CSS .cm_entry
3. Berikutnya cari </body>, Masukan kode berikut di atas kode </body>

   <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <script src='http://donor-ilmu.googlecode.com/files/comment.js' type='text/javascript'/>
   <script src='http://donor-ilmu.googlecode.com/files/emoticon_wp2.js' type='text/javascript'/>
   </b:if>

4. Selanjutnya cari kode
   <h4 id='comment-post-message'><data:postCommentMsg/></h4>
   Kalau suda ketemu letakan kode berikut tepat dibawah kode yang anda temukan.
   <div style='width:550px;text-align: center;border: 1px solid #ccc;padding: 2px 2px;margin-top: 15px;font-style:bold;color:#000;font-weight:normal;font-size:10px;'> <b><img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/70bff581.gif' width='30'/>:)) <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/069.gif' width='30'/>;)) <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/th_104_.gif' width='30'/>;;) <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/th_113_.gif' width='30'/>:D <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/4412144b.gif' width='30'/>;) <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/th_101_.gif' width='30'/>:p <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/33c4b951.gif' width='30'/>:(( <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/th_059_.gif' width='30'/>:) <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/875328cc.gif' width='30'/>:( <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/6f428754.gif' width='30'/>:X <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/th_087_.gif' width='30'/>=(( <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/e111de78.gif' width='30'/>:-o <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/efb50fe2.gif' width='30'/>:-/ <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/th_106_.gif' width='30'/>:-* <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/023.gif' width='30'/>:| <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/5c745924.gif' width='30'/>8-} <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/037.gif' width='31'/>:)] <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/042.gif' width='30'/>~x( <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/87a4e689.gif' width='30'/>:-t <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/047352f3.gif' width='30'/>b-( <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/th_116_.gif' width='30'/>:-L <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/4d6161fd.gif' width='30'/>x( <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/d5f02ecd.gif' width='30'/>:-p <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/071.gif' width='30'/>=)) </b> </div>
5. Terakhir cari <b:includable id='comments' var='post'>, ganti kode yang berada diantara dua kode dari pembuka <b:includable ...> sampai penutup </b:includable>
   

   <b:includable id='comments' var='post'>
   
   Kode yang harus di ganti
   
   </b:includable>

   Ganti kode dia antara b:includable dengan kode di bawah ini
   <div class='comments' id='comments'> <a name='comments'/> <b:if cond='data:post.allowComments'> <h4> <b:if cond='data:post.numComments &gt; 0'> <a href='#comment-form' style='float:right; margin-right:5px;'>+ <data:commentLabelPlural/> +</a> <b:if cond='data:post.numComments == 1'> <span id='cm_total'>1</span> <data:commentLabelPlural/> <b:else/> <span id='cm_total'><data:post.numComments/></span> <data:commentLabelPlural/> </b:if> </b:if> </h4> <div id='cm_reply_css'/> <div class='cm_pagenavi' id='cm_page'/> <div id='cm_block'> <b:loop values='data:post.comments' var='comment'> <b:if cond='data:comment.isDeleted'> <b:else/> <div expr:id='data:comment.anchorName'> <div class='cm_wrap'> <a expr:name='data:comment.anchorName'/> <div class='cm_head'> <div class='cm_avatar'> <b:if cond='data:blog.enabledCommentProfileImages'> <data:comment.authorAvatarImage/> </b:if> </div> <div class='cm_reply'> <a expr:href='&quot;https://www.blogger.com/comment.g?blogID=0000000000000000000&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500&quot;); return false;'>Reply</a> </div> </div> <b:if cond='data:comment.author == data:post.author'> <dd class='cm_entry'> <span class='cm_arrow'/> <div class='cm_info_a'> <div class='cm_name_a'> <b:if cond='data:comment.authorUrl'> <img height='20px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS1DdhASoHWIEDicPHVlg_dfJX2v6jccn4vSzTB5JWsBQO0FliLN7_iwESXwsPYIkikCt4OH4K5EBXW8Dj0bCI46Ar_3MHE7wUi1ILZcuxmjF0MYsJcleXcXpN3LyZEOH8RZVCBhyphenhyphensu4I/s1600/adminstar.png' title='Admin' width='20px'/> <a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'> <data:comment.author/> </a> <b:else/> <b><data:comment.author/></b> </b:if> </div> <div class='cm_date_a'> <data:comment.timestamp/> <b:include data='comment' name='commentDeleteIcon'/> </div> <div class='clear'/> </div> <div class='comment-body-author'> <p><data:comment.body/></p> </div> </dd> <b:else/> <dd class='cm_entry'> <span class='cm_arrow'/> <div class='cm_info'> <div class='cm_name'> <b:if cond='data:comment.authorUrl'> <a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'> <data:comment.author/> </a> <b:else/> <b><data:comment.author/></b> </b:if> </div> <div class='cm_date'> <data:comment.timestamp/> <b:include data='comment' name='commentDeleteIcon'/> </div> <div class='clear'/> </div> <p><data:comment.body/></p> <span style='text-align:center; font-size:9px;'>Terimakasih <b><data:comment.author/></b> atas Komentarnya di <b><data:post.title/></b></span> </dd> </b:if> </div> </div> </b:if> </b:loop> </div> <div class='cm_pagenavi' id='cm_page_copy'/> <b:if cond='data:post.embedCommentForm'> <b:if cond='data:post.allowNewComments'> <b:include data='post' name='comment-form'/> <b:else/> <data:post.noNewCommentsText/> </b:if> <b:else/> <b:if cond='data:post.allowComments'> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a> </b:if> </b:if> </b:if> </div>
   Dalam kode di ini anda perlu menganti Nomor 0000000000000000000 dengan ID Blog anda.
6. Langkah terakhir simpan template, Klik Save Template.                                                                                                              sumber  donorilmuDotCom
   

READ MORE - Merubah tampilan form Komentar Blogger

Bahasa Cinta Melalui SMS

Cinta tidak pernah kering dari kehidupan manusia.
Di mana pun dan kapan pun, cinta akan selalu menyertai kita.
Cinta juga telah melahirkan banyak pujangga, novelis,
seniman, bahkan legenda.
Kenapa? Karena di sanalah manusia bisa membuat ekspresi,
mencari kebahagiaan, menyelami jiwa,
atau lebih dari itu

READ MORE - Bahasa Cinta Melalui SMS

bubble tootip

Bubble Tool Tips ini berguna sekali untuk memberikan informasi tentang sebuah link (bisa link refferal supaya banyak orang yang ikutan). Jika digerakkan diatas link (hover) maka secara otomatis bubble tool tips akan keluar dengan segala informasi yang ada yang dituliskan. Biasanya untuk membuat balon tip ini sebagian orang memanggilnya dengan javascript yang akan membebani blog dengan size yang sangat besar. Nah ini ada trik yang menggunakan CSS murni sebagai pemanggilan codenya. Untuk lihat live previewnya silahkan klik aja link ini .




Penerapan trik ini pake CSS, dan ini dia codenya:

/*---------- balon tips -----------*/
a.bt{
position:relative;
z-index:24;
color:#3CA3FF;
font-weight:bold;
text-decoration:none;
}

a.bt span{ display: none; }

/*background:; ie hack, harus mengubah sesuatu untuk menampilkan di IE*/
a.bt:hover{ z-index:25; color: #aaaaff; background:;}

a.bt:hover span.balontips{
display:block;
position:absolute;
top:0px; left:0;
padding: 15px 0 0 0;
width:200px;
color: #993300;
text-align: center;
filter: alpha(opacity:90);
KHTMLOpacity: 0.90;
MozOpacity: 0.90;
opacity: 0.90;
}

a.bt:hover span.atas{
display: block;
padding: 30px 8px 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJiw7B9wVP5WVHrfisUQlh2ZmgiBhI1B8DWoTFqb9uct4bxCIPN3yKbqAw1WvX2ej9qenaGV6FcJ1vPh42FhfFTood6fWdeIqsPpi_ASljtC4eETTQ74uprMKRk5QmfS5hLqR4HaS4iW4/) no-repeat top;
}

a.bt:hover span.tengah{
display: block;
padding: 0 8px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv15UUmEG4GblRCXkK3h2onNgNQYiUBYlpobrBMPN23J-eN_8347rZp4qf_3mWCgk68N0trRd5OWLhyphenhypheny1X8VQ-274i_z-AQkBVTOHOb2rftwOQLjRNeEFo_IsrrjPz667Bb3Uk2lduNME/) repeat bottom;
}

a.bt:hover span.bawah{
display: block;
padding:3px 8px 10px;
color: #548912;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJiw7B9wVP5WVHrfisUQlh2ZmgiBhI1B8DWoTFqb9uct4bxCIPN3yKbqAw1WvX2ej9qenaGV6FcJ1vPh42FhfFTood6fWdeIqsPpi_ASljtC4eETTQ74uprMKRk5QmfS5hLqR4HaS4iW4/) no-repeat bottom;
}

/*---------- balon tips END-----------*/

Untuk penggunaannya:

1. Link yang udah dibuat di kasih deklarasi class="bt".
Link dalam code HTML bentuknya seperti ini <a href="http://dindingcoret.com"></a> Setelah diberi deklarasi akan jadi seperti ini : <a class="bt" href="http://dindingcoret.com"></a>

2. Deklarasikan balontips. Panggil code balontips dengan menuliskan <span="balontips"></span>. Masukkan diantara code link.

3. Panggil gambar atas dengan cara ketik <span="atas"></span>. Masukkan diantara kode "balontips".

4. Panggil gambar tengah dengan cara ketik <span="tengah"></span>. Masukkan diantara kode "balontips" dibawah code "atas". Ditempat inilah sobat menuliskan komentar sobat.

5. Panggil gambar bawah dengan cara ketik <span="bawah"></span>. Masukkan diantara kode "balontips" dibawah code "tengah".

Contoh penulisan code bisa dilihat disini:
<a class="bt" href="URL SOBAT">
kata-kata terserah deh..
<span class="balontips">
<span class="atas">
</span>
<span class="tengah">
Tempat sobat tulis info tentang link dan akan keluar sebagai bentuk balon
</span>
<span class="bawah">
</span>
</span>
</a>

READ MORE - bubble tootip