Home » , » Membuat Tombol Add Comment Dengan Efek Jquery Slider

Membuat Tombol Add Comment Dengan Efek Jquery Slider

Trik kali ini saya akan Membuat Sebuah Tombol Add Comment dengan Efek Jquery yang sempet di reques oleh temen Blog, Tip ini cocok untuk blog yang komentarnya banyak, maka pembaca membantu untuk menyeret bagian bawah untuk diposting komentar. Berikut efek tambahan Jquery slider, yang efeknya di ambil dari tombol Back To Top atau Kembali ke Atas.


Mari kita simak bersama trik kali ini :

Langkah 1
Masukkan CSS dibawah ini tepat di atas kode </b:skin>


a.add_comment{text-decoration:none;color:#fff}
.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}
.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}
.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}



Langkah Selanjutnya 2
Anda cari kode dibawah
<b:includable id='comments' var='post'>


Langkah 3
Sisipkan kode dibawah ini tepat bawah kode langkah 2:


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<a class='add_comment' href='#comment-form'>Add a comment</a>
<div class='clear' />
<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>
Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Lora Malunk Blog
tutorial blog up to date
Loading...

+ komentar + 9 komentar

28 Oktober 2011 00.35

wah..jadi mudah buat nubi seperti saya nih, langsung dites nih.

Terimakasih Geotroy atas Komentarnya di Membuat Tombol Add Comment Dengan Efek Jquery Slider
28 Oktober 2011 11.32

saya folo sini..:)

Terimakasih Izyan Yan Cinnamon atas Komentarnya di Membuat Tombol Add Comment Dengan Efek Jquery Slider
28 Oktober 2011 11.47

keren yaaCh modelnya ...
tapi ga membuat loadingnya berat kan ???? :)

Terimakasih Error Shinobi atas Komentarnya di Membuat Tombol Add Comment Dengan Efek Jquery Slider
28 Oktober 2011 13.33

waaahh... bagus tutorialnya kawan :D

Terimakasih Nanang Banua atas Komentarnya di Membuat Tombol Add Comment Dengan Efek Jquery Slider
28 Oktober 2011 13.45

waw nice :)

Terimakasih nini Bawel atas Komentarnya di Membuat Tombol Add Comment Dengan Efek Jquery Slider
28 Oktober 2011 18.03

jalna2 sambil nyeruput kopi anget....
salam blogger sob.. terus maju... sukses selalu buat sobat

Terimakasih AbduGreen atas Komentarnya di Membuat Tombol Add Comment Dengan Efek Jquery Slider
28 Oktober 2011 23.07

Bagus tuh sob,jadi lebih dinamis !

Terimakasih Prapatan Kertek atas Komentarnya di Membuat Tombol Add Comment Dengan Efek Jquery Slider
29 Oktober 2011 00.49

Beliu ini salah satu sahabat terbaikku... aku menjulukinya Manusia multi skill... sukses selalu sobatku :D

Terimakasih Antena Bugil atas Komentarnya di Membuat Tombol Add Comment Dengan Efek Jquery Slider
1 November 2011 21.22

Keren masbro :D hehe... menyapa sobat lama :D

Terimakasih Pradisz Wardhana atas Komentarnya di Membuat Tombol Add Comment Dengan Efek Jquery Slider

Poskan Komentar

Kebijakan berkomentar akan dihapus, jika tidak sesuai dengan aturan dibawah ini, Demi kenyamanan kita bersama :

» Menggunakan bahasa yang tidak sopan (Sara, Pornografi, Menyinggung)
» Duplikat komentar
» Komentar menautkan link secara langsung
» Komentar tidak berkaitan dengan artikel
» Judul Komentar Berupa Promosi

Terima Kasih .... Lora Malunk Blog

 

Configurasi

Alexa :
Stats :
Page Rank : Free PageRank Checker
DMCA :
Amung :
Bloggers : Bloggers - Meet Millions of Bloggers
Extreme :
eXTReMe Tracker
Support : Lora Malunk Blog | Songong Template | Tutorial Blog
Copyright © 2011. Lora Malunk Blog - All Rights Reserved
Template Modify by Lora Malunk Blog
Proudly powered by Blogger