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

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

                                                                           شكل الاضافة

طريقة التركيب

.1 اذهب للوحة التحكم

2. تخطيط او تصميم

3.عناصر الصفحة

4. اضف اداة

6.اختار  Html/Javascript

 هدا هو الكود 

<style>

        /* Jquery Facebook Likebox Popup Version 2.0 by chamelcool.blogspot.com
        */
        #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/AVvXsEh2wjE-SO9uDZbhrqRaLuhp9LLfwX5RvfVllP8ma7HAkZTUtpPcc2KJJEtUinoF_eYURKAc0SYzgh4dGyaOIci4ZQhxR3m9hRu_mZCgveEHgMENk38taOhZmJ3Ra9Jo9jD6S2JeNJCHvyM/s1600/controls.png) no-repeat 0 0;}
    #cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgadiqi-PrUzDnw8R7B2ltjyY7d1oJbu2TsZHW36c8hmLPZ_hL7ogJo18CrjW5GClLvFqkD66NNVCNNgHxirKDGGQ1E5Px94GGee8MrKYU2-ISD1pn-ogV6tIUdHVj3ZLpQ6omaX_jzAw4/s400/border.png) repeat-x top left;}
        #cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2wjE-SO9uDZbhrqRaLuhp9LLfwX5RvfVllP8ma7HAkZTUtpPcc2KJJEtUinoF_eYURKAc0SYzgh4dGyaOIci4ZQhxR3m9hRu_mZCgveEHgMENk38taOhZmJ3Ra9Jo9jD6S2JeNJCHvyM/s1600/controls.png) no-repeat -36px 0;}
        #cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2wjE-SO9uDZbhrqRaLuhp9LLfwX5RvfVllP8ma7HAkZTUtpPcc2KJJEtUinoF_eYURKAc0SYzgh4dGyaOIci4ZQhxR3m9hRu_mZCgveEHgMENk38taOhZmJ3Ra9Jo9jD6S2JeNJCHvyM/s1600/controls.png) no-repeat 0 -32px;}
        #cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgadiqi-PrUzDnw8R7B2ltjyY7d1oJbu2TsZHW36c8hmLPZ_hL7ogJo18CrjW5GClLvFqkD66NNVCNNgHxirKDGGQ1E5Px94GGee8MrKYU2-ISD1pn-ogV6tIUdHVj3ZLpQ6omaX_jzAw4/s400/border.png) repeat-x bottom left;}
        #cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2wjE-SO9uDZbhrqRaLuhp9LLfwX5RvfVllP8ma7HAkZTUtpPcc2KJJEtUinoF_eYURKAc0SYzgh4dGyaOIci4ZQhxR3m9hRu_mZCgveEHgMENk38taOhZmJ3Ra9Jo9jD6S2JeNJCHvyM/s1600/controls.png) no-repeat -36px -32px;}
        #cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2wjE-SO9uDZbhrqRaLuhp9LLfwX5RvfVllP8ma7HAkZTUtpPcc2KJJEtUinoF_eYURKAc0SYzgh4dGyaOIci4ZQhxR3m9hRu_mZCgveEHgMENk38taOhZmJ3Ra9Jo9jD6S2JeNJCHvyM/s1600/controls.png) repeat-y -175px 0;}
        #cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2wjE-SO9uDZbhrqRaLuhp9LLfwX5RvfVllP8ma7HAkZTUtpPcc2KJJEtUinoF_eYURKAc0SYzgh4dGyaOIci4ZQhxR3m9hRu_mZCgveEHgMENk38taOhZmJ3Ra9Jo9jD6S2JeNJCHvyM/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/AVvXsEiCf4e4xSgqgwpNDuTyxmjegayo3lkyLV2KHtmQ_WjK7RgTwIwbIIlOCcVDto-WB2u7V7xbQqJPvCwAKGCyNDsediHriRlzlZBe9hV7lQeVLZUTY7cdyXEPU8IZKGRHbDhE3SPvTyp8LvU/s400/loadingbackground.png) no-repeat center center;}
            #cboxLoadingGraphic{https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-pZEOMwCXhf7nIAGd5tIfRe0JiGLVZ-qbwwNp5PMyL8yN-Jdo84vPbJY-kGnKTtMnURiRttNYZCElhYfVhprcdT7WXEBbjsJ6BhG_2khua62vtxewbBt7ETZ6M4TkwSYazIRtcLEI8gs/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/AVvXsEh2wjE-SO9uDZbhrqRaLuhp9LLfwX5RvfVllP8ma7HAkZTUtpPcc2KJJEtUinoF_eYURKAc0SYzgh4dGyaOIci4ZQhxR3m9hRu_mZCgveEHgMENk38taOhZmJ3Ra9Jo9jD6S2JeNJCHvyM/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 Version 2.0
        /*-----------------------------------------------------------------------------------*/
        #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: 18px !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;
        }

    

    /* ---------chamelcool Subscribe Form---------- */

        .box-title1 {
        border:1px solid #ddd;
        -moz-border-radius:6px;
        -webkit-border-radius:6px;
        border-radius:6px;
        box-shadow: 5px 5px 5px #CCCCCC;
            padding:10px;
      margin: 10px 0;
        }


        .enteryouremail{
    background: #fff !important;

    border: 1px solid #d2d2d2;
    padding: 0px 8px 0px 8px;
    color: #a19999; font-size: 12px;
    height: 25px; width: 165px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    margin:0px;
    }

        .submitbutton{
    background:#F66303;
    border: 1px solid #F66303;
    text-shadow: 1px 1px 1px #333;
    box-shadow: 3px 3px 3px #666;
    font:bold 12px Arial, sans-serif;
    color: #fff;
    height: 25px;
    padding: 0 12px 0 12px;
    margin: 0 0 0 5px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    cursor:pointer;}

        </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>
    
    
            <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%2Fchamelcool&width=300&colorscheme=light&show_faces=true&border_color=%23ffffff&stream=false&header=false&height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true"></iframe>

    </center>
    <div class="box-title1 ">

    <center>
    <h3 style="color:#F66303;">يمكنك أيضا الحصول على أخر المواضيع مباشرة على بريدك الالكتروني:</h3>
        <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=chamelcool/rInPq', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="enteryouremail" name="email" value="Enter your email here..." onblur="if (this.value == '') {this.value = 'Enter your email here...';}" onfocus="if (this.value == 'Enter your email here...') {this.value = '';}" type="text" /><input value="chamelcool/rInPq" name="uri" type="hidden" /><input value="اشترك" class="submitbutton" type="submit" /></form>

    </center>
    </div>

    <!--Please Do not Remove the Credits -->
        <p style=" float:right;  margin-right:35px;  font-size:9px;" >Powered By <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://chamelcool.blogspot.com">مدونة شامل كول</a></p>
        </div>
        </div>

مدا يمكن أن تغير في الكود

• غير chamelcool  بالسم صفحتك على الفيسبوك
• ادا كان اسم صفحتك طويل جدا و عبارة عن أصفر  قم الدخول هنا  Facebook.com/username  واختر اسم لصفحتك
  

• غير الكتاية التى باللون الأحمر الى أي كتاية تريد أو اتركها على حالها
• 
  
• 30  تعنى أن الاضافة ستضهر لأى زائر سبق أن دخل الى مدونتك  بعد شهر لكيلا تزعجه  يمكنك أن تضع 20 أو 10 أو حتى بعد يوم واحد