Cara Membuat Kotak Komentar Trersembunyi

| |

Cara Membuat Kotak Komentar Trersembunyi

Langsung saja ke topik pembahasan. sebelum itu, silahkan geser ke bawah dan berhenti pada kotak komentar untuk melihat hasilnya 
kalau tertarik, silahkan baca sampai habis. tapi apabila tidak tertarik, silahkan keliling blog ini untuk mencari artikel menarik yang lain.
1. Seperti biasa, Login ke Blogger
2. Masukkan Email dan Password
3. Gerakkan Mouse ke arah Rancangan ( dalam bahasa kampung saya Design)
4. Pilih Edit HTML
5. Centang Expand Template Widget
6. Cari kode ]]></b:skin>
7. Paste kode berikut persis diatasnya

#comments {
display : none;
}
.tombol-komentar a{
text-align: center;
}
.stylewadah {padding: 5px;}

.tombol {width:100%;display: inline-block;zoom: 1; *display: inline;vertical-align: baseline;margin: 0;outline: none;cursor: pointer;text-align: center;text-decoration: none;padding: .3em 2em .35em;text-shadow: 0 1px 1px rgba(0,0,0,.3);font-weight:bold;font: 13px/20px 'Open Sans',Arial,Helvetica,Verdana,sans-serif;}
.tombol:hover {text-decoration: none;}
.tombol:active {position: relative;top: 1px;}
.black {color: #d7d7d7;border: solid 1px #282828;box-shadow:0 0 2px #000 inset;-webkit-box-shadow: 0 0 2px #000 inset;-moz-box-shadow: 0 0 2px #000 inset;background: #282828;background: -webkit-gradient(linear, left top, left bottom, from(#282828), to(#000));background: -moz-linear-gradient(top, #282828, #000);filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#282828', endColorstr='#000000');}
.black:hover {background: #000;background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#000));background: -moz-linear-gradient(top,  #444,  #000);filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#000000');}
.black:active {color: #666;background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444));background: -moz-linear-gradient(top,  #000,  #444);filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#666666');}
8. Cari kode </head> dan paste kode berikut diatas kode tadi
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
    $(&quot;.tombol-komentar&quot;).click(function(){
        $(&quot;#comments&quot;).slideToggle(&quot;slow&quot;);
        $(this).toggleClass(&quot;active&quot;);
        return false;
    });
});
</script>
<script src='http://yandex.st/jquery/1.5.2/jquery.min.js' type='text/javascript'/>
<script src='http://yandex.st/jquery/cookie/1.0/jquery.cookie.min.js' type='text/javascript'/>
<script type='text/javascript'>//<![CDATA[
jQuery(document).ready(function () {
 jQuery('#bukakeun').click(function () {
  jQuery('#comments').slideToggle('slow');
  jQuery(this).css({
   display: 'none'
  });
  jQuery('#tutupkeun').show();
  jQuery.cookie('komen', 1);
  return false
 });
 jQuery('#tutupkeun').click(function () {
  jQuery('#comments').slideToggle('slow');
  jQuery(this).css({
   display: 'none'
  });
  jQuery('#bukakeun').show();
  jQuery.cookie('komen', null);
  return false
 });
 if (jQuery.cookie('komen') == 1) {
  jQuery('#comments').show();
  jQuery('#bukakeun').hide()
 } else {
  jQuery('#comments').hide();
  jQuery('#tutupkeun').hide()
 }
});
//]]></script>

9. Paste kode berikut dibawah kode
</b:includable>
<b:includable id='comments' var='post'>
<center>
<div class='stylewadah'>
<a class='tombol-komentar' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<b:if cond='data:post.numComments == 0'>Tambahkan Komentar<b:else/><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></b:if>
</a>
</div>
</center>

10. Sisipkan kode <button class='tombol black' id='bukakeun'><b:if cond='data:post.numComments == 1'>1 Komentar</b:if><b:if cond='data:post.numComments &gt;= 2'><data:post.numComments/> Komentar</b:if></button> diantara kode
<div id='backlinks-container'>
    <div expr:id='data:widget.instanceId + &quot;_backlinks-container&quot;'>
       <b:if cond='data:post.showBacklinks'>
         <b:include data='post' name='backlinks'/>
       </b:if>
    </div>
    </div>
  </div>
</b:includable>
hingga menjadi seperti ini.
<div id='backlinks-container'>
    <div expr:id='data:widget.instanceId + &quot;_backlinks-container&quot;'>
       <b:if cond='data:post.showBacklinks'>
         <b:include data='post' name='backlinks'/>
       </b:if>
    </div>
    </div>
  </div>
<button class='tombol black' id='bukakeun'><b:if cond='data:post.numComments == 1'>1 Komentar</b:if><b:if cond='data:post.numComments &gt;= 2'><data:post.numComments/> Komentar</b:if></button>
</b:includable>

Save Template.
Terima kasih telah membaca artikel: Cara Membuat Kotak Komentar Trersembunyi

1 komentar:

Author

makasih

Posting Komentar

Diberdayakan oleh Blogger.