صندوق الاعجاب بالصفحة على الفيسبوك منبثق جميل

كيفية اضافة صندوق الاعجاب بالصفحة على الفيسبوك منبثق جميل لمدونات البلوجر

اهلا ومرحبا بكم اعزائي زوار ومتابعي المدونة 

في درس جديد من دروس البلوجر سنتطرق في هذا الدرس الى موضوع جديد 

الا وهو اضافة صندوق الاعجاب بالصفحة على الفيسبوك منبثق ومميز لمدونة البلوجر 

مميزات هذا الكود والتي لن تجدها في غيره من الاكواد

- خفيف جدا
- يظهر لكل شخص مرة واحدة
- ليس مزعج كباقى الاكواد
- علامة اكس كبيرة للاغلاق
- متوافق مع جميع المتصفحات

طريقة التركيب على بلوجر:
من لوحة تحكم بلوجر => تخطيط => أداة جديدة => JavaScript HTML
نضع في الأداة الجديدة الكود التالي:

<!-- كود الاعجاب بالصفحة منبثق -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<style>
#fanback {
display:none;
background:rgba(0,0,0,0.8);
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
z-index:99999;
}
#fan-exit {
width:100%;
height:100%;
}
#fanbox {
background:white;
width:420px;
height:270px;
position:absolute;
top:58%;
left:63%;
margin:-220px 0 0 -375px;
-webkit-box-shadow: inset 0 0 50px 0 #939393;
-moz-box-shadow: inset 0 0 50px 0 #939393;
box-shadow: inset 0 0 50px 0 #939393;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin: -220px 0 0 -375px;
}
#fanclose {
float:right;
cursor:pointer;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCkbTw-wd7rYwv_oi0XUXeJ8f8Fha3aaUenotS4VZO54penMrvFcNz8VJpGaa5DiU2JtW0WiOfT1c_Z5tOvqqZzzEU6XF5-Qbqiqb2E2XwEzcDn9LM2L61LFoGB0yBdWMwC-w5cb3T2Da7/s1600/fanclose.png) repeat;
height:15px;
padding:20px;
position:relative;
padding-right:40px;
margin-top:-20px;
margin-right:-22px;
}
.remove-borda {
height:1px;
width:366px;
margin:0 auto;
background:#F3F3F3;
margin-top:16px;
position:relative;
margin-left:20px;
}
#linkit,#linkit a.visited,#linkit a,#linkit a:hover {
color:#80808B;
font-size:10px;
margin: 0 auto 5px auto;
float:center;
}
</style>


<script type='text/javascript'>
//<![CDATA[
jQuery.cookie = function (key, value, options) {

// key and at least value given, set cookie...
if (arguments.length > 1 && String(value) !== "[object Object]") {
options = jQuery.extend({}, options);

if (value === null || value === undefined) {
options.expires = -1;
}

if (typeof options.expires === 'number') {
var days = options.expires, t = options.expires = new Date();
t.setDate(t.getDate() + days);
}

value = String(value);

return (document.cookie = [
encodeURIComponent(key), '=',
options.raw ? value : encodeURIComponent(value),
options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
options.path ? '; path=' + options.path : '',
options.domain ? '; domain=' + options.domain : '',
options.secure ? '; secure' : ''
].join(''));
}

// key and possibly options given, get cookie...
options = value || {};
var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
};
//]]>
</script>
<script type='text/javascript'>
jQuery(document).ready(function($){
if($.cookie('popup_user_login') != 'yes'){
$('#fanback').delay(5000).fadeIn('medium');
$('#fanclose, #fan-exit').click(function(){
$('#fanback').stop().fadeOut('medium');
});
}
$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });
});
</script>

<div id='fanback'>
<div id='fan-exit'>
</div>
<div id='fanbox'>
<div id='fanclose'>
</div>
<div class='remove-borda'>
</div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?

href=https://www.facebook.com/technomisc&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'

style='border: none; overflow: hidden; margin-top: -19px; width: 402px; height: 230px;'></iframe><center>
<span id="linkit"> <a href="http://dzbit.blogspot.com">مدونة ديزاد بيت</a></span></center>
</div>
</div>
<!-- كود الاعجاب بالصفحة منبثق -->

  
قوم بالبحث داخل الكود على رابط صفحة الفيس بوك https://www.facebook.com/technomisc
وغيرها برابط صفحتك
ومبروك عليك الكود

شارك الموضوع ..