Hello sahabat Irsan Al Ihsan, salam untuk para blogger dari saya blogger pemula yang ingin terus belajar, :) kali ini saya akan membagikan tentang Cara Membuat Widget / Gadget Like Box Fanspage Facebook ( FP FB ) dan Twitter Responsive Melayang di Blog Menggunakan Tombol Close ( Tutup ), sebelumnya saya juga sudah pernah membagikan ini pada postingan saya yang sebelumnya tentang "Tips dan Trik Cara Memperbesar / Memperbanyak Penghasilan Dollar di RevenueHits dan PopCash Tanpa Boot , Hack , atau Auto Clicker" namun kode JavaScript nya masih ada yang belum cocok dibeberapa blog sobat, jadi saya telah memperbaharuinya dengan sedikit perubahan, namun disini saya tetap membagikan kode JavaScript yang sebelumnya juga, karena siapa tau yang telah saya perbaharui tidak cocok dengan blog sobat dengan template jenis lainnya, atau nanti terdapat erorr maka coba salah satunya.


apa sih keuntungan menggunakan "Cara Membuat Like Box Fanspage Facebook dan Twitter Responsive Melayang di Blog Menggunakan Tombol Close ( Tutup )"??? salah satu cara agar Fanspage FB kita banyak yang klik tombol like maka caranya menggunakan Widget / Gadget Like Box melayang di blog, selain Fanspage FB saya juga menyertakan tombol ikuti Twitter agar pengikut twitter anda juga betambah. jika anda tidak menyukai jenis Widget / Gadget Like Box yang menggunakan tombol close saya juga telah menyediakan Widget / Gadget Like Box tanpa menggunakan tombol close alias menggunakan waktu "Tips & Trik Cara Membuat Widget / Gadget ( Like Box ) Facebook Fanspage Popup Dengan Waktu, dan Tanpa Tombol Close (Tutup), Terbaik, Terbagus & Terkeren!!!" namun jika anda ingin yang menggunakan tombol close dan tetap Responsive walaupun dibuka melalui Handphone (mobile) maka silahkan melanjutkan membaca artikel ini..


Langsung saja ini dia Cara Membuat Widget / Gadget Like Box Fanspage Facebook ( FP FB ) dan Twitter Responsive Melayang di Blog Menggunakan Tombol Close ( Tutup )

Versi 1
<style type='text/css'>
/* Message Box Facebook by Irsan Al Ihsan */
#box-message {
position:fixed !important;
position:absolute;
top:-1000px;
left:50%;
margin:0px 0px 0px -182px;
width:292px;
height:auto;
padding:16px;
background:#fff;
font:normal Dosis, Georgia, Serif;
color:#111;
border:3px solid #333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
#box-message a.close {
position:absolute;
top:-10px;
right:-10px;
background:#fff;
font:bold 16px Arial, Sans-Serif;
text-decoration:none;
line-height:22px;
width:22px;
text-align:center;
color:#111;
border:2px solid #333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:22px;
-moz-border-radius:22px;
border-radius:22px;
cursor:pointer;
}
#twitterx {
background: #EEF9FD;
padding: 10px;
text-align:center;
border: 1px solid #C7DBE2;
border-top: 0;
}
</style>
<script type='text/javascript'>
$(window).bind("load", function() {
// Animate Top Value When Page Loaded Completed
$('#box-message').animate({top:"50px"}, 1000);
// Remove Mailbox When Close Button On Click
$('a.close').click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<div id='box-message'>
<!-- HTML Start -->
<center><a class="murub">KATA KATA ANDA<br/> Kata kata yang akan anda sampaikan</a> <br/> <br/> </center>
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/alihsan.irsan&amp;width=292&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false&amp;appId=371524026202784" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:215px;" allowtransparency="true"></iframe>
</center>
<!-- HTML End -->
<div class="twitter">
<!-- Twitter -->
<center><iframe allowtransparency='true' class='twitter-follow-button twitter-follow-button-rendered' data-screen-name='Irsan Al Ihsan' frameborder='0' id='twitter-widget-0' scrolling='no' src='http://platform.twitter.com/widgets/follow_button.3476cd70032ff6b94ecc9ea63ab78a8b.id.html#_=1442564562969&amp;dnt=false&amp;id=twitter-widget-0&amp;lang=id&amp;screen_name=irsan_alihsan&amp;show_count=true&amp;show_screen_name=false&amp;size=l' style='position: static; visibility: visible; width: 165px; height: 30px;' title='Twitter Follow Button'/> </iframe></center>
</div>
<a class='close' href='#'>&times;</a>
</div>

Jika tidak bisa menggunakan Script diatas coba Script yang telah saya perbaiki dibawah ini:

Versi 2
<style type='text/css'>
/* Message Box Facebook Melayang By Irsan */
#box-message {
position:fixed !important;
position:absolute;
top:-1000px;
left:50%;
margin:0px 0px 0px -182px;
width:340px;
height:auto;
padding:16px;
background:#fff;
font:normal Dosis, Georgia, Serif;
color:#111;
border:3px solid #333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
#box-message a.close {
position:absolute;
top:-10px;
right:-10px;
background:#fff;
font:bold 16px Arial, Sans-Serif;
text-decoration:none;
line-height:22px;
width:22px;
text-align:center;
color:#111;
border:2px solid #333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:22px;
-moz-border-radius:22px;
border-radius:22px;
cursor:pointer;
}
/* Twitter */
#twitterx {
background: #EEF9FD;
padding: 10px;
text-align:center;
border: 1px solid #C7DBE2;
border-top: 0;
}
</style>
/* The SansHeros */
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type='text/javascript'>
$(window).bind("load", function() {
// Animate Top Value When Page Loaded Completed
$('#box-message').animate({top:"50px"}, 1000);
// Remove Mailbox When Close Button On Click
$('a.close').click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<div id='box-message'>
<!-- HTML Start -->
<center><a class="murub">...Kata-Kata1... <br/> <br/>Kata-Kata2 <br/>...Kata-Kata3...</a></center>
<center><iframe src="//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/alihsan.irsan&amp;width=292&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false&amp;appId=371524026202784" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:215px;" allowtransparency="true"></iframe>
</center>
<!-- HTML FB End -->
<!-- Twitter -->
<div class="twitter">
<center><iframe allowtransparency='true' class='twitter-follow-button twitter-follow-button-rendered' data-screen-name='Irsan Al Ihsan' frameborder='0' id='twitter-widget-0' scrolling='no' src='http://platform.twitter.com/widgets/follow_button.3476cd70032ff6b94ecc9ea63ab78a8b.id.html#_=1442564562969&amp;dnt=false&amp;id=twitter-widget-0&amp;lang=id&amp;screen_name=irsan_alihsan&amp;show_count=true&amp;show_screen_name=false&amp;size=l' style='position: static; visibility: visible; width: 165px; height: 30px;' title='Twitter Follow Button'/> </iframe></center>
<!-- HTML TW End -->
</div>
<a class='close' href='#'>&times;</a>
</div>
Jika anda menggunakan versi 1 dan tidak bisa muncul maka anda saya sarankan menggunakan versi 2.
Untuk versi 2 jika template anda tidak suport biasanya akan terjadi sedikit erorr atau crash pada bagian submenu, hal ini dikarenakan ada bagian pada Script yang double maka anda saya sarankan menggunakan versi 1.

Oke itu saja mungkin tentang Cara Membuat Widget / Gadget Like Box Fanspage Facebook ( FP FB ) dan Twitter Responsive Melayang di Blog Menggunakan Tombol Close ( Tutup ) semogga dapat membantu anda dan terimakasih telah berkunjung.

Post a Comment

Jika ada kesalahah dalam menulis mohon untuk di maklumi dan di maafkan, karena tiada manusia yang sempurna, begitu juga admin yang sedang belajar dalam menulis, keritik dan saran yang membangun selalu di nanti....
Terima Kasih....

 
Top