Web Hosting

الاثنين، 6 فبراير 2012

أضف صندوق المعجبين على الفيسبوك على شكل نافدة منبثقة+ صندوق الاشتراك عبر البريد لمدونة بلوجر

4:49 م  admin  [1 التعليقات]

شاركه على +Googleأضفه الى Deliciousشاركه على Twetter شاركه على Facebookأضفه الى StumbleUpon أضفه الى Digg






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

                                                                شكل الاضافة



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

.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/AVvXsEiIcfsxJw_Wxwaz9VJ-vnKLaP_ziL-ot59cq60FfFl8elwfjnaANb47Ckhait8D5ksmXZQlUar-tjImJbLmse9fSHwHJMsqhw7-GeFUnrloFLWlxjcHfoCwpx6ncCO40Vh1BbDqLCAI7W0/s1600/controls.png) no-repeat 0 0;}
    #cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs_ZQQiN3PczRZgOMgbMg-Kn6boRWnooaE4uWChc43gSqqnrRcFnwvYdZrvnhUuBouZtzuSyUsGeNIpzTRAuLcgdU552bJZQlKyMYKLiO-1_G1-Q7pzfd6CkoYvFj2g0-k608zsUx1nUM/s400/border.png) repeat-x top left;}
        #cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIcfsxJw_Wxwaz9VJ-vnKLaP_ziL-ot59cq60FfFl8elwfjnaANb47Ckhait8D5ksmXZQlUar-tjImJbLmse9fSHwHJMsqhw7-GeFUnrloFLWlxjcHfoCwpx6ncCO40Vh1BbDqLCAI7W0/s1600/controls.png) no-repeat -36px 0;}
        #cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIcfsxJw_Wxwaz9VJ-vnKLaP_ziL-ot59cq60FfFl8elwfjnaANb47Ckhait8D5ksmXZQlUar-tjImJbLmse9fSHwHJMsqhw7-GeFUnrloFLWlxjcHfoCwpx6ncCO40Vh1BbDqLCAI7W0/s1600/controls.png) no-repeat 0 -32px;}
        #cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs_ZQQiN3PczRZgOMgbMg-Kn6boRWnooaE4uWChc43gSqqnrRcFnwvYdZrvnhUuBouZtzuSyUsGeNIpzTRAuLcgdU552bJZQlKyMYKLiO-1_G1-Q7pzfd6CkoYvFj2g0-k608zsUx1nUM/s400/border.png) repeat-x bottom left;}
        #cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIcfsxJw_Wxwaz9VJ-vnKLaP_ziL-ot59cq60FfFl8elwfjnaANb47Ckhait8D5ksmXZQlUar-tjImJbLmse9fSHwHJMsqhw7-GeFUnrloFLWlxjcHfoCwpx6ncCO40Vh1BbDqLCAI7W0/s1600/controls.png) no-repeat -36px -32px;}
        #cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIcfsxJw_Wxwaz9VJ-vnKLaP_ziL-ot59cq60FfFl8elwfjnaANb47Ckhait8D5ksmXZQlUar-tjImJbLmse9fSHwHJMsqhw7-GeFUnrloFLWlxjcHfoCwpx6ncCO40Vh1BbDqLCAI7W0/s1600/controls.png) repeat-y -175px 0;}
        #cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIcfsxJw_Wxwaz9VJ-vnKLaP_ziL-ot59cq60FfFl8elwfjnaANb47Ckhait8D5ksmXZQlUar-tjImJbLmse9fSHwHJMsqhw7-GeFUnrloFLWlxjcHfoCwpx6ncCO40Vh1BbDqLCAI7W0/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/AVvXsEgyotfJ-3uYO6qpYRmrKBLYjdNT20BlCSV9WqUUJzcDQk5oKZ5OwPDcCX-rQJ5NjjsRLSxPbvxHnOKSC2z4D8Wpv9bZ7c2Zw6bfmwlUTExy0BDFLYF5k4rboRNKmX7heGJy-7N4G2xoD1s/s400/loadingbackground.png) no-repeat center center;}
            #cboxLoadingGraphic{https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVzDHZSR0iSTt7G_3DDGIlqUj5lg_pO5UDzGNeQGrjBLovyCCdumz8_PHl7DLQCI7tSl32zQk_lvOpPiA_Oi8xa2Ex1XMtMRBWpB_niCdUJSxAazC19sHSJCMBAZeHHcWwNMUmhzoLBtk/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/AVvXsEiIcfsxJw_Wxwaz9VJ-vnKLaP_ziL-ot59cq60FfFl8elwfjnaANb47Ckhait8D5ksmXZQlUar-tjImJbLmse9fSHwHJMsqhw7-GeFUnrloFLWlxjcHfoCwpx6ncCO40Vh1BbDqLCAI7W0/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&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>
    <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 == &#39;&#39;) {this.value = &#39;Enter your email here...&#39;;}" onfocus="if (this.value == &#39;Enter your email here...&#39;) {this.value = &#39;&#39;;}" 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/">Blogger Widgets</a></p>
        </div>
        </div>


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


  •  غير chamelcool  بااسم صفحتك على الفيسبوك
  •  ادا كان اسم صفحتك طويل جدا و عبارة عن أصفر  قم الدخول هنا  Facebook.com/username  واختر اسم لصفحتك
  • غير الكتاية التى باللون الأحمر الى أي كتاية تريد أو اتركها على حالها
  •  30*  تعنى أن الاضافة ستضهر لأى زائر سبق أن دخل الى مدونتك  بعد شهر لكيلا تزعجه  يمكنك أن تضع 20 أو 10 أو حتى بعد يوم واحد
    • قم بتبديل chamelcool/rInPq بعنوان التغدية الخاص بموقعك و التي ستجدها في اخر رابط التغدية الخاص بمدونتك
                ويكون كالتي  بالنسبة للتسجيل عبر الايمايل
    •  http://feedburner.google.com/fb/a/mailverify?uri=chamelcool/rInPq
ملاحضة مهمة !!!

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

Social Sharing Widget bychamelcool


التصنيف :

1 التعليقات:

الاضافه مش شغاله للاسف ارجو تصليح الخطا فى اسرع وقت

إرسال تعليق

ملحوظة: يمكن لأعضاء المدونة فقط إرسال تعليق.

Web Hosting
Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Gadgets By chamelcool Blog