- Back to Home »
- Blogger »
- Recent Comment Dengan Animasi
Hay para bozzer admin mau minta maaf ni kalo selama ini ada salah dan admin sekalian mau ngepost sesuatu kan udah lama admin gk ngepost,oke tanpa panjang lebar lagi langsung aja,jadi kali ini admin akan share trick blog baru ajaa dehh,ok masih berhubungan dengan widget recent comment,kali inii dengan effeck animasi,yang pasti nya berbeda dari sebelum nya,inii dia demo nya
1.login ke blog kamu
2.lalu pilih edit html
3.cari kode ]]><b:skin
4.letakkan kode di bawah ini di atas kode tadi,tinggal pilih yang dark atau yang white
CSS WHITE:
.loadingxrcm {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDVVHn_xfXsu7gPWW0i8kJr4heA9A_icP28jnKMpoYQpvOvyPSlMSuvrPh6vTReJx_DMGhMGoWpAggfQGiVUIXfGdqPSOGB9kt0pXRg5htUe9PR_mlZMqzQKFL5Qk3MKtVzw_XsAtoCAg/s1600/progress_ani.gif) no-repeat 50% 50%;width:32px;height:32px;display:block;margin:0 auto;text-indent:-9999px;} ul#kmtranimasi{text-align:left;font:normal normal 11px Verdana,Geneva,sans-serif} ul#kmtranimasi,ul#kmtranimasi li{margin:0;padding:0;list-style:none;overflow:hidden;position:relative} ul#kmtranimasi li{text-indent:0;height:90px;background:whiteSmoke;padding:0 8px;border:1px solid #DFDFDF;border-top:1px solid white} ul#kmtranimasi img{border-radius:9999px;overflow:hidden;background:#383838;border:0;float:left;margin:5px 5px 0 0} ul#kmtranimasi .ketkomt{overflow:hidden} ul#kmtranimasi .ketkomt a{display:block;color:white;font-weight:bold;overflow:hidden;background:#363636;border-radius:2px;float:left;padding:0 5px;margin: 5px 0 0 0;} ul#kmtranimasi .ketkomt span{font-size:8px;position:absolute;z-index:2;top:21px;border-radius:2px;display:block;line-height:14px;padding:0 5px;left:68px;background:white} ul#kmtranimasi p{margin:15px 0 0}
CSS DARK:
.loadingxrcm {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDVVHn_xfXsu7gPWW0i8kJr4heA9A_icP28jnKMpoYQpvOvyPSlMSuvrPh6vTReJx_DMGhMGoWpAggfQGiVUIXfGdqPSOGB9kt0pXRg5htUe9PR_mlZMqzQKFL5Qk3MKtVzw_XsAtoCAg/s1600/progress_ani.gif) no-repeat 50% 50%;width:32px;height:32px;display:block;margin:0 auto;text-indent:-9999px;} ul#kmtranimasi{text-align:left;font:normal normal 11px Verdana,Geneva,sans-serif} ul#kmtranimasi,ul#kmtranimasi li{margin:0;padding:0;list-style:none;overflow:hidden;position:relative} ul#kmtranimasi li{text-indent:0;height:90px;padding:0 8px;background:#252525;color:white;border:1px solid black;border-top:1px solid #353535} ul#kmtranimasi img{border-radius:9999px;overflow:hidden;background:#020202;border:0;float:left;margin:5px 5px 0 0} ul#kmtranimasi .ketkomt{overflow:hidden} ul#kmtranimasi .ketkomt a{display:block;color:black;font-weight:bold;overflow:hidden;background:#ECECEC;border-radius:2px;float:left;padding:0 5px;margin: 5px 0 0 0;} ul#kmtranimasi .ketkomt span{font-size:8px;position:absolute;z-index:2;top:21px;border-radius:2px;display:block;line-height:14px;padding:0 5px;left:68px;background:black} ul#kmtranimasi p{margin:15px 0 0}5.setelah kamu pilih salah satu,save template kamu
6.masuk ke tata letak
7.lalu pilih widget html/javascrip
8.masukkan kode di bawah inii di dalam widget tadi
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script> <script src="http://ivyth.googlecode.com/svn/js/rckmtr-dgn-animasi.js" type="text/javascript"></script> <div id="rcentcomnets"><span class="loadingxrcm">Loading...</span></div> <script type="text/javascript"> //<![CDATA[ $(document).ready(function () { rccommnetsx({ id_containrc:"#rcentcomnets", animatedRecentcomments:true, numComments:10, url_blog:"URL_blogmu", adminBlog:"nama_akun blogger/google+" }); }); //]]> </script>
BACA!!
jika di dalam template kamu udah ada jquery,maka kode ini
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
tidak usah di copy
yang kode warna merah,silahkan di edit sendiri,url blog kamu,jumblah komentar yang di tampilkan,url google+ kamu
9.save template kamu
gimana?? simple banget kann??
ok dehh segini dulu
see you
Sumber
MKR & Zynation
{ 6 komentar... read them below or Comment }
[-]Berkomentarlah Dengan Bijak
[-]Jangan Spam
[-]Dilarang Menshare Link Porno
[-]Dilarang Berkomentar Yang Mengandung SARA
Terima Kasih Karena Telah Berkunjung
Nice Artikel Sob !!
ReplyDeletecomment back : http://evolution-madara.blogspot.com/
Izin pake! comment back!
ReplyDeletehttp://dovinize.blogspot.com/2013/08/limited-fb-name.html
Silahkan Sob
Deletehttp://akisada-ryo.blogspot.com/2013/08/award-best-design-template.html
ReplyDeleteikut y sob
hahah keren coba dulu akh xD
ReplyDeletecommentback bal http://reza31.blogspot.com/
silahkan :D
Delete