زوار ومتابعي المدونة الكرام
السلام عليكم ورحمة الله وبركاته
اليوم سوف نتحدث عن إضافة جميلة ورائعة وفيها لمس أحترافية جمالية ولكن بعض الزوار يعتبرونها مزعجة ولكن في هذه الإضافة وضعنا زر " 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>
- استبدل " homeblog7 " بخاصيتك على feedburner .
0 Comments:
إرسال تعليق