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

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





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

                                                                شكل الاضافة 



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

.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/AVvXsEhoSgx6cgzsP1w4ugDXhXdVQJWIslgehEijOuvaaEFnNw4g9J8JhUHzWvnLF8hFRwAiUAzcIWo5nypHxVBR4AEhXeBf8LfUa9IIlugHx0kIaBMpVixHB_LVWSPKgV5Fjb5FDjWlB8GKUC0/s1600/controls.png) no-repeat 0 0;}
    #cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRjpFIWnqnPqxY6OdUIUTeLudyQ94J1r-c9LWiI5BwHV5_07S_Ike7wMNZqwtk4rzB3K2DG2luQWITD_moRKMwFJwuGdH6PZy4UEJm7uFbMw7HVdDvpBWrKl3nXFu6UjqP2vnUq3atHc4/s400/border.png) repeat-x top left;}
        #cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoSgx6cgzsP1w4ugDXhXdVQJWIslgehEijOuvaaEFnNw4g9J8JhUHzWvnLF8hFRwAiUAzcIWo5nypHxVBR4AEhXeBf8LfUa9IIlugHx0kIaBMpVixHB_LVWSPKgV5Fjb5FDjWlB8GKUC0/s1600/controls.png) no-repeat -36px 0;}
        #cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoSgx6cgzsP1w4ugDXhXdVQJWIslgehEijOuvaaEFnNw4g9J8JhUHzWvnLF8hFRwAiUAzcIWo5nypHxVBR4AEhXeBf8LfUa9IIlugHx0kIaBMpVixHB_LVWSPKgV5Fjb5FDjWlB8GKUC0/s1600/controls.png) no-repeat 0 -32px;}
        #cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRjpFIWnqnPqxY6OdUIUTeLudyQ94J1r-c9LWiI5BwHV5_07S_Ike7wMNZqwtk4rzB3K2DG2luQWITD_moRKMwFJwuGdH6PZy4UEJm7uFbMw7HVdDvpBWrKl3nXFu6UjqP2vnUq3atHc4/s400/border.png) repeat-x bottom left;}
        #cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoSgx6cgzsP1w4ugDXhXdVQJWIslgehEijOuvaaEFnNw4g9J8JhUHzWvnLF8hFRwAiUAzcIWo5nypHxVBR4AEhXeBf8LfUa9IIlugHx0kIaBMpVixHB_LVWSPKgV5Fjb5FDjWlB8GKUC0/s1600/controls.png) no-repeat -36px -32px;}
        #cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoSgx6cgzsP1w4ugDXhXdVQJWIslgehEijOuvaaEFnNw4g9J8JhUHzWvnLF8hFRwAiUAzcIWo5nypHxVBR4AEhXeBf8LfUa9IIlugHx0kIaBMpVixHB_LVWSPKgV5Fjb5FDjWlB8GKUC0/s1600/controls.png) repeat-y -175px 0;}
        #cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoSgx6cgzsP1w4ugDXhXdVQJWIslgehEijOuvaaEFnNw4g9J8JhUHzWvnLF8hFRwAiUAzcIWo5nypHxVBR4AEhXeBf8LfUa9IIlugHx0kIaBMpVixHB_LVWSPKgV5Fjb5FDjWlB8GKUC0/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/AVvXsEjOUc5lKx2KDg2DGQEppev72Nz6JPxJ8da9wLBUcNXwb7DBVEIyACROuIOpdvSf1M4SCYm9XEfiPVsNBuAG1PqTZSN_XuQ9aa5iS4JK4m650oSZ2P-gPAXXD6bYTo9wxzU435K_XKiJ8QI/s400/loadingbackground.png) no-repeat center center;}
            #cboxLoadingGraphic{https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaSjpGFFc8sKqqd3kWu3Q7xOWzJmO_trVz3YRL5v0wWCFCbEtG28cNajrSDSS_Mr6etFs7MzswCCEidmadPWZXapm7F76NveD6zU05FSnJJEPjQrTYy_V8qB_sfWxI3gmUWTlhY-0cC1c/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/AVvXsEhoSgx6cgzsP1w4ugDXhXdVQJWIslgehEijOuvaaEFnNw4g9J8JhUHzWvnLF8hFRwAiUAzcIWo5nypHxVBR4AEhXeBf8LfUa9IIlugHx0kIaBMpVixHB_LVWSPKgV5Fjb5FDjWlB8GKUC0/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%2Fprotecshield&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="protecshield/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>


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


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

الأن احفط الاضافة وادخل على مدونتك الدى لم تضهر لك الاضافة  قم  الدخول على المتصفح ثم وقم المسح historique أو الكوكيز
أعد تحميل الصفحة وستضهر لك انشاء الله ,,,,لأن الاضافة تعمل على أساس تخزين اليبي الخاص بك لكي ك  لا تضهر لا ضهر لك كل مرة,,,,
4:22 ص
 
Blogger Templateمدونة درع الحماية اضافات بلوجر- قوالب بلوجر معربة - قالب بلوجر احترافي- برامج كمبيوتر , برامج حماية, © 2013. All Rights Reserved. Powered by Blogger
Top