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

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

السلام عليكم ورحمة الله تعالى وبركاته

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

الان نبحث عن الكود

</body>

ومن ثم ننسخ الكود التالي قبله مباشرة

<!-- Stupcomp.blogspot.com Likebox Pro FBFan Code Start -->
<style>#fblikepop {
    background-color: #fff;
    display: none;
    position: fixed;
    top: 200px;
    _position: absolute;
 /* hack for IE 6*/
    width: 450px;
    border: 10px solid #6F6F6F;
    z-index: 200;
    -moz-border-radius: 9px;
    -webkit-border-radius: 9px;
    margin: 0pt;
    padding: 0pt;
    color: #333333;
    text-align: left;
    font-family: arial,sans-serif;
    font-size: 13px;
}

#fblikepop body {
    background: #fff none repeat scroll 0%;
    line-height: 1;
    margin: 0pt;
    height: 100%;
}

.fbflush {
    cursor: pointer;
    font-size: 11px !important;
    color: #FFF !important;
    text-decoration: none !important;
    border: 0 !important;
}

#fblikebg {
    display: none;
    position: fixed;
    _position: absolute;
 /* hack for IE 6*/
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: #000000;
    z-index: 100;
}

#fblikepop #closeable {
    float: right;
    margin: 7px 15px 0 0;
}

#fblikepop h1 {
    background: #6D84B4 none repeat scroll 0 0;
    border-top: 1px solid #3B5998;
    border-left: 1px solid #3B5998;
    border-right: 1px solid #3B5998;
    color: #FFFFFF !important;
    font-size: 14px !important;
    font-weight: normal !important;
    padding: 5px !important;
    margin: 0 !important;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif !important;
}

#fblikepop #actionHolder {
    height: 30px;
    overflow: hidden;
}

#fblikepop #buttonArea {
    background: #F2F2F2;
    border-top: 1px solid #CCCCCC;
    padding: 10px;
    min-height: 50px;
}

#fblikepop #buttonArea a {
    color: #999999 !important;
    text-decoration: none !important;
    border: 0 !important;
    font-size: 10px !important;
}

#fblikepop #buttonArea a:hover {
    color: #333 !important;
    text-decoration: none !important;
    border: 0 !important;
}

#fblikepop #popupMessage {
    font-size: 12px !important;
    font-weight: normal !important;
    line-height: 22px;
    padding: 8px;
    background: #fff !important;
}

#fblikepop #counter-display {
    float: right;
    font-size: 11px !important;
    font-weight: normal !important;
    margin: 5px 0 0 0;
    text-align: right;
    line-height: 16px;
}</style>
<script src="http://www.google.com/jsapi"></script><script>google.load("jquery", "1");</script> 
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<script type="text/javascript">
//<![CDATA[
 kakinetworkdotcom01username="geniuesdz",
 kakinetworkdotcom01title="انضموا لصفحة بيت ربح المال على الفايسبوك",
 kakinetworkdotcom01skin="02",
 kakinetworkdotcom01time="7",
 kakinetworkdotcom01wait="0",
 kakinetworkdotcom01lang="en"
//]]>
</script>
<script type="text/javascript" src="https://sites.google.com/site/wikilazy/codewikilazy/likebox-with-timer.js"></script>
<script type="text/javascript">
//<![CDATA[
 $(document).ready(function(){$().kakinetworkdotcom({ closeable: true });});
//]]>
</script>
<!-- StupComp.Blogspot.com Likebox Pro FBFan Code End -->

الان استبدل الكلمات التالية : انضموا الى صفحة بيت ربح المال بما يناسبك

للتحكم بزمن الظهور من هنا

 kakinetworkdotcom01time="7"

غير الرقم 7 بما يناسبك

بعض الستايلات الموجودة:

                                                                                                           

 

 

 

 

 

نقوم بتغيير الرقم الموافق للصورة 01او02او03او04

ب02من السطر التالي الموجود بالكود

 kakinetworkdotcom01skin="02"

في الاخير نأتي الى زمن ظهور الصندوق نتحكم به من السطر التالي

الموجود بالكود نغير الرقم 0 بما يناسبك

kakinetworkdotcom01wait="0"

في الاخير اتمنى اعجابكم بالموضوع

(من احد المنتديات الاجنبية)

اي مشكل انا موجود

الى اللقاء في تدوينات قادمة

Posted in: اضافات بلوجر