نافذة منبثقة تحتوي علي صندوق المعجبين

بسم الله الرحمن الرحيم

ـــــــــــــــــــــــــــــــــــــــــــ

اليوم أصدقائي سوف أقدم لكم درسا جميلا  إضافة نافذة منبثقة تحتوي علي صندوق المعجبين بصفحة الفيس بوك الخاصه بمدونتك وهذة الخاصية سوف تظهر عند دخول المتابع لمدوتك ألي اي ثفحة في المدونة  وهو كالتالي:
1- أدخل الي مدونتك وأتجه إلي  قالب مدونتك وأبحث عن هذا الكود( المصدر  أفكار برو)

</head>

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>

3- صم قم بحفظ القالب وتوجه ألي تخطيط إضافة أداة JAV/HTML وأنسخ الكود التالي بداخلها

<style type='text/css'>

#makingdifferentpopup{

position:absolute;

top:100px;

z-index:999;

display:none;

padding:0px;

right:600px;

border:10px solid #3B5998;

-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 h1{

background:#6d84b4 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbpBKpKvIEQIlSQk3WiIXt587cuuA0DKGaldOm0RuZI8mg13pLpk17Og9a3FDgBNp5VR3o9Ce5dphZJUmbtc3hjVYK9qLefRILLU1o7h7JmPCmydMxrPhNzDyoE-3GQEE6GcFVtsf5ReDO/s1600/%5Bwww.aflaam1.blogspot.com%5Dh1.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{

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:14px !important;

margin:1px !important;

}

#mdclose:active{

top:1px;

left:1px;

}

.htmlarea span{

bottom:80px;

font:8px "lucida grande",tahoma,verdana,arial,sans-serif;

position:absolute;

right:6px;

text-align:right;

z-index: 99999;

}

.htmlarea span a{

color: #000;

text-decoration:none;

}

.htmlarea span a:hover{

text-decoration:underline;

}

</style>

<script type='text/javascript'>

jQuery(document).ready(function() {

function makingdifferent_ppopup()  {

var mdwh = jQuery(window).height();

var mdpph = jQuery("#makingdifferentpopup").height();

var mdfromTop = jQuery(window).scrollTop()+50;

 jQuery("#makingdifferentpopup").css({"top":mdfromTop});

}jQuery(window)

.scroll(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%3A%2F%2Fwww.facebook.com%2Faflaam1&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>

<span>

By <a href="http://www.aflaam1.blogspot.com/" target="_blank">Elghamrawy</a> / <a href="http://www.aflaam1.blogspot.com/" target="_blank">+Get This!</a>

</span>

</div>

<div id="mdfooter">

<a href="#" id="mdclose" onclick="return false;">إنهاء</a>

</div></div>

4 - ولا تنسي بتغير ما لون  بالأحمر الي اسم صفحتك علي الفيس

5- ولمن حدثت معه مشكلة أثناء النسخ فليفضل بتحميل الكود والشرح من هنا