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

بواسطة نبيل يوم السبت، 11 فبراير 2012 القسم : | 3 التعليقات
السلام عليكم و رحمة أعزاء الزوار 


اليوم أحببت اشارككم هده الاضافة المبرمجة ب jQuery 
مهمته انه عند دخولك للموقع يضهر لك صندوق اعجاب فيس بوك ينبتق ويمكن اقفاله 
لاكن هده الاداة تضهر مرة واحدة لنفس الزائر فهي تقوم بتخزين عنوان الايب الخاص به في الكوكيز و تمنع اعادة فتحها و الا فانها ستزعج زوارك وبعد مرور 30 يعمل رفرش لكوكيز تم تضهر مرة أخرى لنفس الزائر 
لاكن بالطبع بامكانك تعديل الوقت كما تريد ساشرح لكم بعد الكود ادناه .

يمكنكم تجربته من هنا

لاضافة هده الاداة في بلوجر 
ندهب للوحة التحكم / تم / تصميم / تم / اضافة أداة جديدة / تم
HTML/javascript widget 

ونضع الكود الأتي

    <style>
    /*
       ColorBox Core Style:
       The following CSS is consistent between example themes and should not be altered.
    */
    #colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
    #cboxOverlay{position:fixed; width:100%; height:100%;}
    #cboxMiddleLeft, #cboxBottomLeft{clear:left;}
    #cboxContent{position:relative;}
    #cboxLoadedContent{overflow:auto;}
    #cboxTitle{margin:0;}
    #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
    #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
    .cboxPhoto{float:left; margin:auto; border:0; display:block;}
    .cboxIframe{width:100%; height:100%; display:block; border:0;}
    /*

       User Style:
       Change the following styles to modify the appearance of ColorBox.  They are
       ordered & tabbed in a way that represents the nesting of the generated HTML.
    */
    #cboxOverlay{background:#000;opacity:0.5 !important;}
    #colorbox{
            box-shadow:0 0 15px rgba(0,0,0,0.4);
           -moz-box-shadow:0 0 15px rgba(0,0,0,0.4);
            -webkit-box-shadow:0 0 15px rgba(0,0,0,0.4);
           }

    #cboxTopLeft{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaPIStDU1HStoOG6vEOjOdLfKr5oR-S8e6KuZs4NB51v2JknOm_F6jJ680Z8ojjba1jp5FVYEEpppq3Knm3vSnSQ6K_tRmLhyRJXnkZkPlSHYo4_bOlKw5nlT6TN5q7RFfZ1HgKtskX7k/s1600/controls.png) no-repeat 0 0;}
    #cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrmUbN67_XgTIpThmSq6XgbI7jjwjtr3JbsJHOKc2CCDIiTntXdjMxrRp6V23Xk8yyw-nJktMKwzh9aVCgQHqCrEIDHISg90O0zmU-TTdZ4nDkY29RjKHRBEI-AjIWpNrYGYmVfseQyb0/s400/border.png) repeat-x top left;}
         #cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaPIStDU1HStoOG6vEOjOdLfKr5oR-S8e6KuZs4NB51v2JknOm_F6jJ680Z8ojjba1jp5FVYEEpppq3Knm3vSnSQ6K_tRmLhyRJXnkZkPlSHYo4_bOlKw5nlT6TN5q7RFfZ1HgKtskX7k/s1600/controls.png) no-repeat -36px 0;}
         #cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaPIStDU1HStoOG6vEOjOdLfKr5oR-S8e6KuZs4NB51v2JknOm_F6jJ680Z8ojjba1jp5FVYEEpppq3Knm3vSnSQ6K_tRmLhyRJXnkZkPlSHYo4_bOlKw5nlT6TN5q7RFfZ1HgKtskX7k/s1600/controls.png) no-repeat 0 -32px;}
         #cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrmUbN67_XgTIpThmSq6XgbI7jjwjtr3JbsJHOKc2CCDIiTntXdjMxrRp6V23Xk8yyw-nJktMKwzh9aVCgQHqCrEIDHISg90O0zmU-TTdZ4nDkY29RjKHRBEI-AjIWpNrYGYmVfseQyb0/s400/border.png) repeat-x bottom left;}
         #cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaPIStDU1HStoOG6vEOjOdLfKr5oR-S8e6KuZs4NB51v2JknOm_F6jJ680Z8ojjba1jp5FVYEEpppq3Knm3vSnSQ6K_tRmLhyRJXnkZkPlSHYo4_bOlKw5nlT6TN5q7RFfZ1HgKtskX7k/s1600/controls.png) no-repeat -36px -32px;}
         #cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaPIStDU1HStoOG6vEOjOdLfKr5oR-S8e6KuZs4NB51v2JknOm_F6jJ680Z8ojjba1jp5FVYEEpppq3Knm3vSnSQ6K_tRmLhyRJXnkZkPlSHYo4_bOlKw5nlT6TN5q7RFfZ1HgKtskX7k/s1600/controls.png) repeat-y -175px 0;}
         #cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaPIStDU1HStoOG6vEOjOdLfKr5oR-S8e6KuZs4NB51v2JknOm_F6jJ680Z8ojjba1jp5FVYEEpppq3Knm3vSnSQ6K_tRmLhyRJXnkZkPlSHYo4_bOlKw5nlT6TN5q7RFfZ1HgKtskX7k/s1600/controls.png) repeat-y -211px 0;}
         #cboxContent{background:#fff; overflow:visible;}
             #cboxLoadedContent{margin-bottom:5px;}
             #cboxLoadingOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib8CLGLF4LsqrnZhjI53SRHJTxxU6kkouDz6iwgm7Nh-AteTHYHOyEcgRL4OP-FFFLEaYzCH63KQrlaHAtOXQlzR9Fz2xJ1jAYTrs6ljftfGW9SxUh6Ln04YmF7tTVygKfgzco-d1Hq2E/s400/loadingbackground.png) no-repeat center center;}
             #cboxLoadingGraphic{https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTiydtfH9TQUBgMzok1f2Ljdt3t-Y-1T7gppoXk0UkA5hNoBbrTR0mXaq1i4u7WhjhAsG9yz7P8nNHliUm46G-aQpjcx-QhRyWOMwOYaWtlLPA6VkYHSbldgWUj4NQ3vT-sHOEF8SsDfs/s400/loading.gif) no-repeat center center;}
             #cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;}
             #cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;}
             #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaPIStDU1HStoOG6vEOjOdLfKr5oR-S8e6KuZs4NB51v2JknOm_F6jJ680Z8ojjba1jp5FVYEEpppq3Knm3vSnSQ6K_tRmLhyRJXnkZkPlSHYo4_bOlKw5nlT6TN5q7RFfZ1HgKtskX7k/s1600/controls.png) no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;}
             #cboxPrevious{left:0px; background-position: -51px -25px;}
             #cboxPrevious.hover{background-position:-51px 0px;}
             #cboxNext{left:27px; background-position:-75px -25px;}
             #cboxNext.hover{background-position:-75px 0px;}
             #cboxClose{right:0; background-position:-100px -25px;}
             #cboxClose.hover{background-position:-100px 0px;}
             .cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;}
             .cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;}
             .cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;}
             .cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;}

    /*-----------------------------------------------------------------------------------*/
    /*   Facebook Likebox popup For Blogger
    /*-----------------------------------------------------------------------------------*/
    #subscribe {
        font: 12px/1.2 Arial,Helvetica,san-serif; color:#666;
    }
    #subscribe a,
    #subscribe a:hover,
    #subscribe a:visited {
        text-decoration:none;
    }
    .box-title {
       color: #F66303;
       font-size: 20px !important;
       font-weight: bold;
       margin: 10px 0;
    border:1px solid #ddd;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    box-shadow: 5px 5px 5px #CCCCCC;
    padding:10px;
    line-height:25px; font-family:arial !important;
    }
    .box-tagline {
       color: #999;
       margin: 0;
       text-align: center;
    }
    #subs-container {
        padding: 35px 0 30px 0;
        position: relative;
    }
    a:link, a:visited {
    border:none;
    }
    .demo {
    display:none;
    }
    </style>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>

    <script src="http://mybloggertricks.googlecode.com/files/jquery.colorbox-min.js"></script>
    <script type="text/javascript">
    jQuery(document).ready(function(){
       if (document.cookie.indexOf('visited=true') == -1) {
           var fifteenDays = 1000*60*60*24*30;
           var expires = new Date((new Date()).valueOf() + fifteenDays);
           document.cookie = "visited=true;expires=" + expires.toUTCString();
       $.colorbox({width:"400px", inline:true, href:"#subscribe"});
           }
    });
    </script>
        <!-- This contains the hidden content for inline calls -->
            <div style='display:none'>
       <div id='subscribe' style='padding:10px; background:#fff;'>
            <h3 class="box-title">توصل بكل جديدنا على فيس بوك . فقط اضغك على زر الاعجاب أسفله<center><p style="line-height:3px;" >▼</p></center></h3>
          <center>
    <iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages/Phone4Ar/266669786737996&amp;width=300&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false&amp;height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true"></iframe>
    </center>
    <p style=" float:right;  margin-right:35px;  font-size:9px;" >Powered By <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://www.9odwa.blogspot.com">9odwa</a></p>
    </div>
    </div>

* لوضع صفحة الفيس بوك الخاصة بك 
عدل الكلمة المكتوبة بالاحمر في الكود.

* لجعل الصندوق يضهر عند كل دخول احدف *30
أو عدلها بما تراه مناسب من الايام


رجائا في حال وجدتم افادتكم بالموضوع 
اتركوا تعليقا. ورجائا عدم حدق الحقوق من الكود

هناك 3 تعليقات:

  1. مش شغاله اتمني لو لقيت حل تتصل بيا عن طريق الحساب دا

    http://www.facebook.com/m.elna9ar
    وشكرا جدا ليك أخوك محمود النجار مالك
    لــ مدونه الطبقه الراقيه
    http://altbkaalrakia.blogspot.com/

    ردحذف
  2. العفوا أخي زيارة طيبة

    ردحذف
  3. شكرا لك اخوي

    ردحذف