Sabtu, 01 Juni 2013

Cara Membuat Fans page popup di blog

00.20 – by 2
fanspageSemua blogger pasti ingin blognya terkenal termasuk gue sendiri hha salah satu caranya yaitu dengan cara membuat fanspage facebook di blognya, mungkin belum ada yang tau apa itu fans page facebook sedikit gue jelasin fanspage facebook itu sebuah halaman halaman facebook yang khusus menyebarkan informasi kepada para fans yang ngelike fanspage tersebut, fanspage ini di pasang dengan banyak cara ada yang model kotak, widget slide, dan popup tapi disini gue cuma mau ngejelasin yang model popup aj yaitu yang pertama  muncul ketika kita memasuki sebuah website ya kira-kira seperti itu lah gua sendiri juga bingung ngejelasinya mending di coba aja dah hha...



  1. Silahkan Masuk Ke Akun Blogger Anda.
  2. Setelah itu, Klik Menu Template, --> Klik Tombol Edit HTML.
  3. Cari kode berikutdengan menekan CTRL+F.
  4. Masukan Plugins Jquery Berikut diatas kode:
  5. Kemudian, Klik Tombol Simpan Template
  6. Setelah itu, Klik Menu Tata Letak, --> Klik Add Gadget, --> Tambahkan Widget HTML.
  7. Masukan kode berikut ini :

<!-- Start Jquery Pop Up Fans Page Facebook -->
<style type='text/css'>
#makingdifferentpopup{
position: fixed;
top:100px;
z-index:9999;
display:none;
padding:0px;
right:600px;
border:10px solid rgba(82, 82, 82, 0.7);
-webkit-background-clip: padding-box;
background-clip: padding-box;
-webkit-border-radius:8px 8px 8px 8px;
-moz-border-radius:8px 8px 8px 8px;
border-radius:8px 8px 8px 8px;
width:320px;
height:360px;
overflow:hidden;
}
#makingdifferentpopup span{
font-size:20px !important;
font-weight:bold !important;
}
#makingdifferentpopup h1{
background:#6d84b4 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL_c21wOXZr8JDbqOEzeAI3y62m4C5ptvuFR4vd6NODWV6LltytVqmRKq72cgsbmwWLef5GAnPz85IWr5KM3ZZCf_bBFqIOxgZEPtpElOMjiGEVV4OKkV1R7dsdSPIAN0pqgRcEoWqRwM/s1600/kunci+(h1).png) 98% no-repeat;
border:1px solid #3b5998 !important;
color:#FFFFFF !important;
font-size:20px !important;
font-weight:700 !important;
padding:5px !important;
margin:0 !important;
font-family:'"lucida grande",tahoma,verdana,arial,sans-serif !important;
overflow:hidden !important;
}
.htmlarea{
font-size:12px !important;
font-weight:normal !important;
height:265px !important;
padding:1px !important;
background:#fff !important;
border-bottom:2px solid #ddd;
overflow:hidden !important;
}
#mdfooter{
text-align:left;
background:#F2F2F2 !important;
height:56px !important;
padding:10px 10px 10px 10px !important;
overflow:hidden !important;
}
#mdclose{
float:right;
background-color:#eee !important;
border:1px solid #ccc !important;
color:#111 !important;
font-weight:bold !important;
padding:5px 8px 5px 8px !important;
text-decoration:none !important;
display:inline-block !important;
font-family:'"lucida grande",tahoma,verdana,arial,sans-serif !important;
outline:none !important;
position:relative !important;
font-size:18px !important;
margin:1px !important;
}
#mdclose:active{
top:1px;
left:1px;
}
.grabthis{
bottom:80px;
font:8px "lucida grande",tahoma,verdana,arial,sans-serif;
position:absolute;
right:6px;
text-align:right;
z-index: 99999;
}
.grabthis a{
color: #000;
text-decoration:none;
}
.grabthis a:hover{
text-decoration:underline;
}
</style>
<script type='text/javascript'>
jQuery(document).ready(function() {
function makingdifferent_ppopup()  {
var sec = 10
var timer = setInterval(function() {
   $("#mdfooter span").text(sec--);
   if (sec == 0) {
      $("#makingdifferentpopup").fadeOut("slow");
      clearInterval(timer);
   }
},1000);
  var mdwh = jQuery(window).height();
  var mdpph = jQuery("#makingdifferentpopup").height();
  var mdfromTop = jQuery(window).scrollTop()+50;
 jQuery("#makingdifferentpopup").css({"top":mdfromTop});}
jQuery(window).fadeIn(makingdifferent_ppopup).resize(makingdifferent_ppopup)
 //alert(jQuery.cookie('sreqshown'));
 //var mdww = jQuery(window).width();
 //var mdppw = jQuery("#makingdifferentpopup").width();
 //var mdleftm = (mdww-mdppw)/2;
   var mdleftm = 500;
 //var mdwh = jQuery(window).height();
 //var mdpph = jQuery("#makingdifferentpopup").height();
 //var mdfromTop = (jQuery(window).scrollTop()+mdwh-mdpph) / 2;
 jQuery("#makingdifferentpopup").animate({opacity: "1", left: "0" , left:  mdleftm}, 0).show();
     jQuery("#mdclose").click(function() {
jQuery("#makingdifferentpopup").animate({opacity: "0", left: "-5000000"}, 1000).show();});});
</script>
<div id="makingdifferentpopup">
<h1>Join us on Facebook</h1>
<div class="htmlarea">
<iframe src="//www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/pages/Your-Belajar-Blog/395122827241045&amp;width=320&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23fff&amp;stream=false&amp;header=false&amp;height=300" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:320px; height:300px;" allowtransparency="true"></iframe>
<div class="grabthis">
By <a href="http://your-belajarblog.blogspot.com" target="_blank">Your-BelajarBLOG</a> | <a href="http://your-belajarblog.blogspot.com/2013/05/cara-membuat-jquery-pop-up-fans-page.html" target="_blank">Get Widget !</a>
</div>
</div>
<div id="mdfooter">
Please wait..<span>10</span> Seconds
<a href="#" id="mdclose" onclick="return false;">Cancel</a>
</div>
</div>
<!-- End Jquery Pop Up Fans Page Facebook -->



notice:

1. Kode yang berwarna merah adalah waktu (timer) dari pop up.
2. Kode yang berwarna kuning adalah judul tombol dari tombol pembatal (cancel)
3. Kode yang berwarna hijau adalah judul dari pop up.
4. Ganti kode yang berwarna orange dengan url fans page anda.
5. Kode yang berwarna abu-abu adalah lebar dan tinggi dari widget.

Setelah itu, Klik Tombol Simpan.

selesai.......

2 komentar:

Langganan: Posting Komentar (Atom)