اضافة صندوق الإشتراك بالقائمة البريدية بشكل منبثق Subscription Pop Up لمدونات بلوجر

زوار ومتابعي المدونة الكرام

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

اليوم سوف نتحدث عن إضافة جميلة ورائعة وفيها لمس أحترافية جمالية ولكن بعض الزوار يعتبرونها مزعجة ولكن في هذه الإضافة وضعنا زر " X " لأختفاء هذه الإضافة لمن يعتبرها مزعجة ، وأنا برأي هذه الإضافة مهمة تذكرك بإدخال بريدك الإلكتروني والإشتراك في النشرة البريدية .

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

1- ادخل إلى مدونتك واختر لوحة التحكم .

2- من لوحة التحكم اختر قالب ثم اضغط على تحرير قالب : HTML

3-ابحث عن الوسم :

<head>

4- ضع الكود التالي تحته :

<link href='http://fonts.googleapis.com/css?family=Oswald|Open+Sans:300italic,400italic,600italic,400,300,600,700' rel='stylesheet' type='text/css'/>
<link href='https://googledrive.com/host/0BxFbqjck0GDdRlY3RjhpNTFNajQ' rel='stylesheet'/>

<link href='https://googledrive.com/host/0BxFbqjck0GDdMDJleFhXY0k5Slk' rel='stylesheet'/>

5- بعد ذلك ابحث عن الوسم :
</head>

6- ضع الكود التالي فوقه .

<script src='https://googledrive.com/host/0BxFbqjck0GDdUkJGaTlJS2tpSFE' type='text/javascript'></script>
<script src='https://googledrive.com/host/0BxFbqjck0GDdeE1BRFdLdF9XMUU' type='text/javascript'></script>

7- ابحث عن الوسم :
]]></b:skin>

8- ضع الكود التالي فوقه .

 /*----- Email Subscription Popup Box Coded by www.homeblog7.blogspot.com -----*/
#home-blogger-subbox {
  display: none;
  background: rgba(0,0,0,0.5);
  width: 100%;
  height:100%;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index:99999999;
}
#home-blogger-subbox .popup-box {
  padding: 0;
  margin: 0 auto;
  max-width: 600px;
  border-radius: 1px;
  border: 2px solid #F5F500;
  background: #3A3939 url('http://cdn.top4top.co/i_159af0613f1.png');
  background-repeat: no-repeat;
  background-position: 100% 45%;
  position:relative;
  top:25%;
  z-index:0;
}
#home-blogger-subbox .popup-box .exit-button-subbox {
  float: right;
  cursor: pointer;
  position: absolute;
  right: 0px;
  top: 0px;
  margin-top: 2px;
  margin-right: -2px;
}
#home-blogger-subbox .popup-box .exit-button-subbox:before {
  content: "X";
  padding: 5px 8px;
  background: #FFFFFF;
  color: #000000;
  font-weight: normal;
  font-size: 12px;
  text-shadow: 0px -1px #000;
  font-family: sans-serif;
  border: 4px solid #F5F500;
  border-radius: 50px 0px 50px 50px;
}
/*--Main Headline Style - www.homeblog7.blogspot.com--*/
#home-blogger-subbox .popup-box .tagline {
  padding: 0;
  line-height: 2em;
  font-size: 26px;
  height: 50px;
  font-weight: normal;
  font-family: ge_ss_threeregular,Droid Sans;"Oswald",sans-serif;
  text-shadow: 0px -1px 0px #F5F500;
  color: #3A3939;
  text-align: center;
  background: #FFFF00;
  border-right: 7px solid #F5F500;
  border-left: 7px solid #F5F500;
  border-bottom: 15px solid #3A3939;
}
/*--Paragraph Style - www.homeblog7.blogspot.com--*/
#home-blogger-subbox .popup-box p {
  font-family: ge_ss_threeregular,Droid Sans;"Oswald",sans-serif;
  font-size: 15px;
  color: #EFEFEF;
  text-shadow: 1px -1px 0px #000;
  line-height: 35px;
  padding: 10px 110px 0px 20px;
  text-align: left;
  letter-spacing: 0.5px;
  margin: 0;
}
#home-blogger-subbox .popup-box .rssform {
  padding: 15px 20px;
  margin: 15px 0px 0px 0px;
}
/*-- Button Style - www.homeblog7.blogspot.com --*/
#home-blogger-subbox .popup-box .rssform .button {
  cursor: pointer;
  margin: 0px 0px 0px 5px;
  border: none;
  overflow: hidden;
  width: 35%;
  height: 37px;
  background-color: #FF0;
  font-size: 14px;
  font-weight: normal;
  color: #121212;
  letter-spacing: 0.5px;
  text-transform: uppercase!important;
  font-family: ge_ss_threeregular,Droid Sans;"Oswald";
  float: right;
}
#home-blogger-subbox .popup-box .rssform .button:hover {
  background: #FFE800;
  padding: 7px;
  border: 1px solid #fff;
}
#home-blogger-subbox .popup-box .rssform .email-bg {
  background: #FFE url('http://cdn.top4top.co/i_b43fe9cd761.png') no-repeat 5px 8px !important;
  padding-left: 30px;
}
#home-blogger-subbox .popup-box .rssform input {
  padding: 8px;
  font-size: 13px;
  font-family: ge_ss_threeregular,Droid Sans;Oswald;
  font-weight: normal;
  display: inline-block;
  width: 60%;
  height: 37px;
  text-transform: uppercase;
  outline: none !important;
  border: none;
  border-radius: 1px;
  box-sizing: border-box !important;
}

9- بعد ذلك ابحث عن الوسم :
</body>

10- ضع الكود التالي فوقه .

<div id='home-blogger-subbox'>
            <div class='popup-box'>
   <div class='exit-button-subbox'></div>
            <div class='tagline'>
            أشترك معنا بالنشرة البريدية 
            </div>
                 <p>

للحصول على أحدث المشاركات مباشرة إلى علبة الوارد الخاصة بك مجانا

</p>
<p>
!فقط أدخل عنوان البريد الإلكتروني الخاص بك
</p>
            <div class='rssform'>
            <form action='http://feedburner.google.com/fb/a/mailverify' method='post' target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=homeblog7', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
            <input type='text' class='email-bg' name='email' placeholder='...أدخل عنوان بريدك الإلكتروني ' />
            <input type="hidden" value="homeblog7" name="uri"/>
            <input type="hidden" name="loc" value="en_US"/>
            <input value="انقر هنا للإشتراك" class="button" type="submit" />
            </form>
            </div>
   </div>
   </div>
<script type='text/javascript'>
jQuery(document).ready(function($){
if($.cookie('feedburner_popup_box') != 'yes'){
$('#home-blogger-subbox').delay(25000).fadeIn('medium');
$('.exit-button-subbox, .button').click(function(){
$('#home-blogger-subbox').stop().fadeOut('medium');
});
}
$.cookie('feedburner_popup_box', 'yes', { path: '/', expires: 15 });
});
</script>