romaissa
11-01-2013, بتوقيت غرينيتش 08:14 AM
http://2.bp.blogspot.com/-A-rkuc_S9iw/UOYOKNQND4I/AAAAAAAACA8/WF3wXiI4yjc/s320/besmilah-salamo%2B3alaykom%2B-%2BAfkarPro.blogspot.png
كيفية إضافة صندوق إعجاب صفحة الفيسبوك عائم بوسط مدونة blog البلوجر - على طريقة PopUp
أهلا و سهلا بكم زوار ومتتبعي مدونة blog أفكار Pro.
في هذا الموضوع سنقوم بتركيب install إضافة رائعة جدااا، وهي عبارة عن صندوق معجبي صفحة الفيسبوك عائمة بوسط مدونة blog البلوجر "Popup Facebook LikeBox".
http://4.bp.blogspot.com/-MF2DqImDGFk/URPB9-skRZI/AAAAAAAACmI/48ozpw3u0Vk/s1600/POP+UP+Facebook+Like+Box+-+afkarpro.blogspot.png
* الخطوة الأولى :
*1- توجه إلى لوحة التحكم البلوجر لمدونتك, و إختر تصميم.
*2- ثم أدخل إلى تحرير HTML, وضع علامة في خانة توسيع عناصر واجهة interface القالب template "Expand Widget Template".
*3- ابحث عن السطر أسفله بالضغط على CTRL+F.
رمز Code:
</head>
*4- وألصق فوقه الكود code التالي :
رمز Code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
*5- ثم قم بحفظ القالب template.
* الخطوة الثانية :
*1- من لوحة تحكم البلوجر الخاصة بك قم بالدخول على تصميم القالب template ثم اضغط على إضافة أداة واختر HTML/JavaScript.
*2- ثم قم بنسخ الكود code التالي وألصقه بالمكان المخصص له.
رمز Code:
<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(http://1.bp.blogspot.com/-hfFF_iqgPoc/URO-pUhRY9I/AAAAAAAAClE/oquSyaOMmX0/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":mdfromT op}); }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%2F star.bloger&width=400&colorscheme=light&show_faces =true&border_color=%23fff&stream=false&header=fals e&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/2014/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- قم بالتعديلات التالية :
انضموا إلى صفحتي على الفيس بوك : غير هذه العبارة بما يناسبك.
star.bloger : استبدله باسم صفحتك على الفيسبوك.
*4- لا تنسى حفظ الإضافة.
*! أتمنى أن أكون قد وفقت في إيصال المعلومة لكم بدون تعقيدات ;)
و إذا واجهت أي مشكل أو لديك أي استفسار لا تتردد في طرح سؤالك وذلك بالرد بتعليق، سأجيب بالتأكيد! إن شاء الله ...
http://4.bp.blogspot.com/-uoNZLsSvc_A/UL6mH28s99I/AAAAAAAAARE/UHSNk4HYBG0/s320/img_1315720267_147.png
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
كيفية إضافة صندوق إعجاب صفحة الفيسبوك عائم بوسط مدونة blog البلوجر - على طريقة PopUp
أهلا و سهلا بكم زوار ومتتبعي مدونة blog أفكار Pro.
في هذا الموضوع سنقوم بتركيب install إضافة رائعة جدااا، وهي عبارة عن صندوق معجبي صفحة الفيسبوك عائمة بوسط مدونة blog البلوجر "Popup Facebook LikeBox".
http://4.bp.blogspot.com/-MF2DqImDGFk/URPB9-skRZI/AAAAAAAACmI/48ozpw3u0Vk/s1600/POP+UP+Facebook+Like+Box+-+afkarpro.blogspot.png
* الخطوة الأولى :
*1- توجه إلى لوحة التحكم البلوجر لمدونتك, و إختر تصميم.
*2- ثم أدخل إلى تحرير HTML, وضع علامة في خانة توسيع عناصر واجهة interface القالب template "Expand Widget Template".
*3- ابحث عن السطر أسفله بالضغط على CTRL+F.
رمز Code:
</head>
*4- وألصق فوقه الكود code التالي :
رمز Code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
*5- ثم قم بحفظ القالب template.
* الخطوة الثانية :
*1- من لوحة تحكم البلوجر الخاصة بك قم بالدخول على تصميم القالب template ثم اضغط على إضافة أداة واختر HTML/JavaScript.
*2- ثم قم بنسخ الكود code التالي وألصقه بالمكان المخصص له.
رمز Code:
<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(http://1.bp.blogspot.com/-hfFF_iqgPoc/URO-pUhRY9I/AAAAAAAAClE/oquSyaOMmX0/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":mdfromT op}); }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%2F star.bloger&width=400&colorscheme=light&show_faces =true&border_color=%23fff&stream=false&header=fals e&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/2014/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- قم بالتعديلات التالية :
انضموا إلى صفحتي على الفيس بوك : غير هذه العبارة بما يناسبك.
star.bloger : استبدله باسم صفحتك على الفيسبوك.
*4- لا تنسى حفظ الإضافة.
*! أتمنى أن أكون قد وفقت في إيصال المعلومة لكم بدون تعقيدات ;)
و إذا واجهت أي مشكل أو لديك أي استفسار لا تتردد في طرح سؤالك وذلك بالرد بتعليق، سأجيب بالتأكيد! إن شاء الله ...
http://4.bp.blogspot.com/-uoNZLsSvc_A/UL6mH28s99I/AAAAAAAAARE/UHSNk4HYBG0/s320/img_1315720267_147.png
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
