29 November 2013

cara membuat like box ber gerak dengan jquery


Kali ini moonroemoort akan share cara membuat like box jquery

Tentunya ini sangat membantu ,,selain membuat blog brader lebih cantik ..tapi juga mempromosikan fans page brader..
dengan begitu otomatis blog brader cepet terkenal donkkss ..
chek it out

  • Masuk ke blogger
  • Klik template  > edit HTML
  • Cari kode </head> tekan CTRL + F agar lebih mudah
  • Paste kan kode di bawah ini sebelum/di atas kode </head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
Kode di atas adalah kode JQUERY jika brader udah punya kode jquery abaikan langkah di atas dan langsung ikuti langkah di bawah
  • Masuk ke menu TATA LETAK
  • Klik tambahkan gadget
  • pilih HTML/JavaScript
  • pastekan kode di bawah ini

<style type="text/css">
#subscribe-button { float: right; position: fixed; bottom: 5%; right: 0; z-index: 999; }
#subscribe-widget { display:none; }
/* Overlay */
#btnt-overlay { background-color:#000; }
/* Container */
#btnt-container { min-height:500px; min-width:500px; color:#222; background-color:#fff; border:4px solid #ddd; }
#btnt-container .btnt-data { padding:8px; }
#btnt-container a.btntCloseImg { background:url(http://3.bp.blogspot.com/-1lucxKhy3Zs/T3vIg4k-5wI/AAAAAAAAArM/EiH85Hp-ZW8/s1600/x.png) no-repeat; width:25px; height:29px; display:inline; z-index:3200; position:absolute; top:-15px; right:-16px; cursor:pointer; }
#description { color: #AAAAAA; font-family: times New Roman; font-size: 25px; font-style: italic; }
#description img { float: left; height: 80px; padding: 0 25px 0 10px; width: 80px; }
#btntfollowForm { padding: 15px; }
#btntfollowForm p { margin: 0 0 10px; }
#btntfollowForm input:not([type="checkbox"]){ width: 93%; margin-top: 4px; margin-bottom: 20px; padding: 10px 5px 10px 25px; border: 1px solid rgb(178, 178, 178); -webkit-appearance: textfield; -webkit-box-sizing: content-box; -moz-box-sizing : content-box; box-sizing : content-box; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset; -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset; box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear; }
#btntfollowForm input:not([type="checkbox"]):active,
#btntfollowForm input:not([type="checkbox"]):focus{ border: 1px solid rgba(91, 90, 90, 0.7); background: rgba(238, 236, 240, 0.2); -webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset; -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset; box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset; }
#btntfollowForm .button input{ background: none repeat scroll 0 0 #3D9DB3; border: 1px solid #1C6C7A; border-radius: 3px 3px 3px 3px; box-shadow: 0 1px 6px 4px rgba(0, 0, 0, 0.07) inset, 0 0 0 3px #FEFEFE, 0 5px 3px 3px #D2D2D2; color: #FFFFFF; cursor: pointer; font-family: 'Arial Narrow',Arial,sans-serif;   font-size: 24px; margin-bottom: 10px; padding: 8px 5px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); width: 30%; float: right; }
#btntfollowForm .button input:hover{ background: #4ab3c6; text-decoration: none; }
#btntfollowForm .button input:active,
#btntfollowForm .button input:focus{ background: rgb(40, 137, 154); position: relative; top: 1px; border: 1px solid rgb(12, 76, 87); -webkit-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset; -moz-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset; box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset; }
.btntFollowFooter { text-align: center; font: 10px Tahoma, Helvetica, Arial, Sans-Serif; padding: 7px 0; margin-top: 80px; text-shadow: 0px 2px 3px #555; position: absolute; width: 500px; }
.btntFollowFooter a { color: #222; text-decoration: none; }
.btntFollowFooter a:hover { color: #fff; }
<!--[if lt IE 7]>
#btnt-container a.btntCloseImg { background:none; right:-14px; width:22px; height:26px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://3.bp.blogspot.com/-1lucxKhy3Zs/T3vIg4k-5wI/AAAAAAAAArM/EiH85Hp-ZW8/s1600/x.png',sizingMethod='scale'); }
#btntfollowForm  input{ padding: 10px 5px 10px 32px; width: 93%; }
#btntfollowForm  input[type=checkbox]{ width: 10px; padding: 0; }
<![endif]-->
</style>
<div id="subscribe-button">
<a class="subscribe" href="#"><img src="http://2.bp.blogspot.com/-RzunQQz9p6s/T42hC5q8OsI/AAAAAAAACL0/E9u-ugghHTs/s1600/facebook-icon+(1).png" alt="subscribe" /></a></div>
<div id="subscribe-widget">
<div id="btntfollowForm">
<center><img alt="Subscribe" border="0" float="center" src="http://3.bp.blogspot.com/-L_HuZJEw6no/T3hnoGLHZgI/AAAAAAAAAdU/RUxTnUHbBUk/s1600/subscribe.gif" /></center>
<div id='description'>
<img alt="email" border="0" src="http://4.bp.blogspot.com/-lMdY_r04EPM/T42hDkU-5cI/AAAAAAAACL4/j6vyyP7bL70/s1600/facebook-icon.png" />Ελάτε στην παρέα μας! Κάντε μας ένα Like και δεν θα χάσετε...Ό,τι νεότερο θα το βλέπετε πρώτοι!</div>
<center><iframe src="//www.facebook.com/plugins/likebox.php?href=LINK FANS PAGE BRADER DI SINI&amp;width=292&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false&amp;height=255" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:255px;" allowtransparency="true"></iframe></center>
</div>

<script src="https://blogtipsntricks.googlecode.com/files/jquery.btnt.popup.js" type="text/javascript">
</script>
<script type="text/javascript">
jQuery(function ($) {
// Load dialog on page load
//$('#subscribe-widget').modal();

// Load dialog on click
$('#subscribe-button .subscribe').click(function (e) {
$('#subscribe-widget').modal();

return false;
});
});
</script>
<p style=" float:right;  margin-right:10px;" > <a style=" font-size:5px; color:#999; text-decoration:none;" href="http://www.bloggertipsandtricks.net/2012/04/click-popup-jquery-facebook-like-box.html" target='_blank'>Blogger Tips & Tricks</a></p>
</div>


Ganti LINK FANS PAGE BRADER DI SINI dengan link fanspage anda

17 comments

mantep gan ...di tunggu yah kunjungan back nya

Bermanfaat sekali postnya, tapi kalau untuk MWB bagaimana cara nya, mohon pencerahan.http://atmosfir.heck.in

wah sepertinya boleh dicoba nich mas tutorialnya, soalnya keren banget like box bisa bergerak getu :)

thank gan
pertama pasang kode jquery dulu lalu pasang kode like box nya gan ...

ohh silahkan di coba sis ..
makasih atas kunjungannya .
sering2 mampir ya sis ..

mantap nie tutorialnya

Keren infonya, sangat menarik :)

thanks gan sering sering mampir ya gan ...

hehehe thanks gan
sering 22 mampir gan ..

berkomentarlah sesuka anda
===>no link aktiv<===
NB:Sebelum menyisipkan kode silahkan gunakan tool konversi kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar