إضافة صندوق الفيس بوك على نافذة منبثقة عند الدخول الى موقعك




السلام عليكم في تدوينة سابقة والمتعلقة اضافة صندوق الاشتراك فى خدمة الرسائل الى مدونة بلوكر درس اليوم سيكون عن:إضافة صندوق الفيس بوك على نافذة منبثقة عند الدخول الى موقعك أو مدونتك.هذه الإضافة جميلة و فعالة في مجال تحصيل إعجابات لصفحتك على الفايس بوك . من أجل زيادة متابعيك.



عند الدخول إلى المدونة سينبتق للزائر صندوق عائم في وسط المدونة ، هذا الصندوق يحتوي على  صفحتكم على الفيبسوك ويتم أغلاق الصندق اتوماتيكيا بعد مرور 10 ثوان أوأكتر حسب ما تريد.

1.لتركيب الاضافة اذهب اولا  الى لوحة التحكم ثم  قالب ثم تحرير HTML
ثم ابحث عن:
 </HEAD>

2.ثم ضع الكود التالي قبله مباشرة

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script> 


3.اضغط على حفظ ثم توجه الى التخطيط ثم اضافة اداة HTML/Javascript
ثم ضع الكود التالي:

<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; /* for Safari */
background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
-webkit-border-radius:8px 8px 8px 8px;
-moz-border-radius:8px 8px 8px 8px;
border-radius:8px 8px 8px 8px;
width:400px;
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/AVvXsEh9Y64alM_xxW5HiB-sgbu_1Q9CvzegWg81AmwdtDN5B8c7G35XpCzYJUnyOsuog5gVW864TS30CLCvKm_S7uKU7s6mqqT0P-WCH0Rhe6wiZ12UCY3o8MISNbK3Yk7ZBkWwjphumLLKJmez/s1600/%255Bwww.gj37765.blogspot.com%255Dh1.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>إنظم إلينا على الفايس بوك</h1>
<div class="htmlarea">
<iframe src="//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/AB.Electromecanique&amp;width=400&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23fff&amp;stream=false&amp;header=false&amp;height=250" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:400px; height:250px;" allowtransparency="true"></iframe>
<div class="grabthis">
By <a href="http://www.electrobrahim.blogspot.com/" target="_blank">Hukmat</a> / <a href="http://www.electrobrahim.blogspot.com" target="_blank">+Get This!</a>
</div>
</div>
<div id="mdfooter">Please wait..<span>10</span> Seconds<a href="#" id="mdclose" onclick="return false;">إلغاء</a>
</div>
</div>
<!-- End popup -->



بعد وضع الكود لاتنسى  تغيبر اسم الصفحة AB.Electromecanique  باسم صفحتك.
ومبروك الاضافة .

يمكنكالاستفادة من هده المواضيع أيضا:



تعليقات
ليست هناك تعليقات
إرسال تعليق