Monday, June 27, 2011

Menambahkan Add Comment dengan J-query

Membuat Tombol  Add Comment dengan Jquery .Tombol ini sangat lah berpengruh penting bagi kita yang sering di kunjungi oleh banyak pengunjung dari mana pun, tombol ini pun lebih berkesan modern, karena bukan bawaan dari blogger, tetapi tombol ini kita tambah dengan script/kode jquery. menambah script ini tidak lah susah. ingin tahu caranya,?. saya langsung saja memberi tahu langkah - langkahnya, berikut langkah langkahnya, :





  • Login akun blogger anda,
  • Masuk ke Rancangan / Design,
  • Klik tab Edit HTML ,
  • Jangan lupa centang Expand Template Widget,
  • Lalu cari kode ]]></b:skin>,
  •  Masukkan kode CSS dibawah ini diatas kode tadi,
a.add_comment{text-decoration:none;color:#fff}<br /> .add_comment{float:right;padding:6px 10px;margin:20px;text-decoration:none;font-family:Arial,Helvetica,sans-serif;font-size:12px;font-weight:bold;text-align:center;display:inline-block;background:#d43131;background:-moz-linear-gradient(top,#ffaa9a,#f8674b 5%,#d54746);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ffa493),color-stop(.03,#f8674b),to(#d54746));filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#f8674b',EndColorStr='#d54746'); -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#f8674b',EndColorStr='#d54746')";-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;border:1px solid #d1371c;border-bottom:1px solid #9f220d;color:#FFF;text-shadow:0 1px 1px #6f3a02}<br /> .add_comment:hover{background:#c92929;background:-moz-linear-gradient(top,#ff9986,#ee5f43 5%,#d04443);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#fa8772),color-stop(.03,#ee5f43),to(#d04443));filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#ee5f43',EndColorStr='#d04443'); -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#ee5f43',EndColorStr='#d04443')";border-bottom:1px solid #9f220d}<br /> .add_comment:focus{padding:7px 11px;color:#FFF;text-shadow:0 -1px 1px #894906;border:none;background:#bc2323;background:-moz-linear-gradient(top,#d04443,#ee5f43 95%,#d04443);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#d04443),color-stop(.9,#ee5f43),to(#d04443));filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#d04443',EndColorStr='#ee5f43'); -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#d04443',EndColorStr='#ee5f43')";box-shadow:inset 0 2px 5px #9b1313,0 1px 0 #e0c7c7;-webkit-box-shadow:inset 0 2px 5px #9b1313,0 1px 0 #e0c7c7;-moz-box-shadow:inset 0 2px 5px #9b1313,0 1px 0 #e0c7c7}

  • Cari pula kode <b:includable id='comments' var='post'>
  • Masukkan pula kode di bawah ini tepat di bawah kode <b:includable id='comments' var='post'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<a class='add_comment' href='#comment-form'>Add a comment</a>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>$('.add_comment').click(function(){$('html,body').animate({scrollTop:$(".comment-form").offset().top},1000);});</script></b:if>

  • Terakhir, save template anda ! 
  • selamat mencoba,
sumber referensi : http://totto-apa-adanya.blogspot.com/2011/05/menambah-tombol-add-comment-jquery.html

      No comments:

      Post a Comment