في هذا الموضوع سنقوم بتركيب إضافة رائعة جدااا، وهي عبارة عن صندوق معجبي صفحة الفيسبوك عائمة بوسط مدونة البلوجر "Popup Facebook LikeBox".

طريقة تركيب هذه الإضافة على مدونة البلوجر
الخطوة الأولى :
1- توجه إلى لوحة التحكم البلوجر لمدونتك, و إختر تصميم.
2- ثم أدخل إلى تحرير HTML, وضع علامة في خانة توسيع عناصر واجهة القالب "Expand Widget Template".
3- ابحث عن السطر أسفله بالضغط على CTRL+F.
</head>
4- و ألصق فوقه الكود التالي :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
5- ثم قم بحفظ القالب.
الخطوة الثانية :
1- من لوحة تحكم البلوجر الخاصة بك قم بالدخول على تصميم القالب ثم اضغط على إضافة أداة واختر HTML/JavaScript.
2- ثم قم بنسخ الكود التالي وألصقه بالمكان المخصص له.
<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/AVvXsEhx-iZbqa6gfSfCyUcVD3cGIRpkzXl6Vhl3h0Ua-uuCaC-PRA59CcUqV3W1kbkp6xyhKupwEa6-cuYYhB-iTBCW0iDGkWTs2DIu4D4fM_8Bc9Vt7krN3UFa7vX8pMd2-6Z13tpFSvzNuxsf/s1600/%5Bwww.afkarpro.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>
#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/AVvXsEhx-iZbqa6gfSfCyUcVD3cGIRpkzXl6Vhl3h0Ua-uuCaC-PRA59CcUqV3W1kbkp6xyhKupwEa6-cuYYhB-iTBCW0iDGkWTs2DIu4D4fM_8Bc9Vt7krN3UFa7vX8pMd2-6Z13tpFSvzNuxsf/s1600/%5Bwww.afkarpro.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%2Felbasha-net&width=400&colorscheme=light&show_faces=true&border_color=%23fff&stream=false&header=false&height=250" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:400px; height:250px;" allowtransparency="true">
</iframe>
<span>
By <a href="http://www.afkarpro.blogspot.com/" target="_blank">AfkarPro</a> / <a href="http://afkarpro.blogspot.com/2013/02/add-facebook-type-pop-up-for-facebook-in-blogger.html/" target="_blank">+Get This!</a>
</span>
</div>
<div id="mdfooter">
<a href="#" id="mdclose" onclick="return false;">إغلاق</a>
</div></div>
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Felbasha-net&width=400&colorscheme=light&show_faces=true&border_color=%23fff&stream=false&header=false&height=250" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:400px; height:250px;" allowtransparency="true">
</iframe>
<span>
By <a href="http://www.afkarpro.blogspot.com/" target="_blank">AfkarPro</a> / <a href="http://afkarpro.blogspot.com/2013/02/add-facebook-type-pop-up-for-facebook-in-blogger.html/" target="_blank">+Get This!</a>
</span>
</div>
<div id="mdfooter">
<a href="#" id="mdclose" onclick="return false;">إغلاق</a>
</div></div>
3- قم بالتعديلات التالية :
elbasha-net : استبدله باسم صفحتك على الفيسبوك.
4- لا تنسى حفظ الإضافة.
شكرا لك .. الى اللقاء
لاتنسى الاعجاب بصفحتنا عبر الفيس بوك لمتابعتة كل جديد وايضا من اجل التواصل معنا بشكل مباشر ومستمر.
تابعيمكنك الان متابعتنا عبر جوجل بلاس وارسال مقترحاتك وايضا حتى يصلك جميع الموضوعات الحصرية فور نشرها.
تابعتواصل دائما مع اصدقاء يشاركونك نفس الاهتمامات وذلك من خلال متابعة صفحتنا الرسمية عبر تويتر.
تابعيسعدنا أن تكون احد افراد عائلة ومحبى قناة رؤيا للمعلوميات وذلك عن طريق الاشتراك فى قناتنا على اليوتيوب.
تابع