اليوم سوف أشرح طريقة إضافة أداة الإشتراك في البريد الإلكتروني ( القائمة البريدية ) وهذا الصندوق يتميز بخصائص رائعة جداً ومن أفضل المميزات أنها حصرية وخفيفة جداً ومنظرها أنيق لكل المدونات ولكل الأذواق بإذن الله .
طريقة التركيب :
- أدخل مدونتك .
- ثم التخطيط .
- أضف أداة عبارة عن HTML.
- إنسخ والصق هذا الكود بها :
<!--- Thesis Email Subscribe Widget by 7loll.blogspot.com --->
<style type="text/css">#sidebar-subscribe-box {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiREx8MMPlJcBjoT77d8ozPNtyUDPCw9R3DzrRjDWtT_YtpkwFygZDdprwFpm3Mm-L7RwX69LKcmvIKpYqOsEIzmaHHecbzG-GkXIWMHeNNg6a2WhAARWV3v85vmbvYrS8Dmkbp9MfHPaAJ/s1600/colored-strip.png) repeat scroll 0 0 transparent;
border: 1px solid #aaa;
border-radius: 3px;
padding: 3px 0;
}
.sidebar-subscribe-box-wrapper {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQqXljjP0epAr053W6wN6ZQjFW-LAa3SGgN8Idigy_Pqycy_yU4kZoIk0aPUTbSLEEOas7mvi3_soQazCEsPMJVaHCoN_WomkHf32_U44sjmryIAx1uUXHUWqWXNWmYn-nY_-TY0mkk-D6/s1600/bg-pattern.png) repeat scroll 0 0 #f7f7f7;
color: #111;
font-size: 14px;
line-height: 20px;
padding: 1px 20px 10px;
text-align: center;
text-transform: uppercase;
}
.sidebar-subscribe-box-form {
clear: both;
display: block;
margin: 10px 0;
}
form.sidebar-subscribe-box-form {
clear: both;
display: block;
margin: 10px 0 0;
width: auto;
}
.sidebar-subscribe-box-email-field {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHXzHDCXsNUABZm9zQb7LVvXW_W1NdVAjed35wOwq4zIetrGMJyjPjJrec_Bx7H6WFrB9BzSvamM7-S9PHo-92npPhk604UM9nZRbar8Dhr72KDA12u5So_9GKjMGMTjgGlYZW5wGFgi5t/s1600/sprites.png) no-repeat 0 -27px;
border: 1px solid #ccc;
border-radius: 4px;
color: #444;
margin: 0 0 15px;
padding: 10px 40px;
width: 68%;
}
.sidebar-subscribe-box-email-button {
background: #09f;
border: 1px solid #007fff;
box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0 transparent;
color: #fff;
cursor: pointer;
font-family: Helvetica;
font-weight: 700;
font-size: 20px;
padding: 5px;
text-shadow: 1px 1px 0 rgba(0,0,0,.4);
text-transform: uppercase;
width: 100%;
}
.sidebar-subscribe-box-email-button:hover,.sidebar-subscribe-box-email-button:focus {
background: #1ca4ff;
}
.sidebar-subscribe-box-email-button:active {
-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.5) inset;
-webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.5) inset;
box-shadow: 0 1px 4px rgba(0,0,0,0.5) inset;
outline: 0;
}
iframe,object,embed,.yt-border iframe,.yt-border object,.yt-border embed,table {
width: 100%;
}
embed {
border-radius: 3px;
-moz-box-shadow: 0 2px 4px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.2);
background: #FFF;
border: 1px solid #ddd;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
margin: 0;
padding: 4px 4px 4px;
}
#footer-section {
background: #f5f5f5 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6tAtGGbuMoCV1CXuBE82krwGGFsoHXCR1Id5WwkEoQ-O6ZUEPi1PHa7Zr5HsiEhY_94LETjcrISOqO7aUmA1qTmK7QqPOZ-Qso-q8eaSBAkBlH2t2MadJQrIzIAQdFDl9hymTpUtMo8iv/s0/bg-pattern.png) repeat top left;
border-top: 1px solid #aaa;
box-shadow: inset 0 4px 6px -3px #aaa;
font-size: 14px;
height: 100px;
margin: 10px -30px 5px;
padding: 0 30px;
text-align: center;
width: 100%;
}</style>
<div id="sidebar-subscribe-box">
<div class="sidebar-subscribe-box-wrapper">
<div class="sidebar-subscribe-box-form">
<form action="http://feedburner.google.com/fb/a/mailverify?uri=jetara" class="sidebar-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=jetara',
'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="uri" type="hidden" value="http://3alamalcomputer.blogspot.com/" /><input name="loc" type="hidden" value="en_US" />
<input autocomplete="off" class="sidebar-subscribe-box-email-field" name="email" placeholder="أدخل بريدك الإلكتروني..." />
<input class="sidebar-subscribe-box-email-button" title="" type="submit" value="اشترك الآن" /></form>
</div>
المرجو تأكيد البريد الإلكتروني بعد الإشتراك</div>
</div>
<!--- Thesis Email Subscribe Widget by 7loll.blogspot.com --->
لا تنسى تغيير هذا الرابط http://3alamalcomputer.blogspot.com/ بإسم حسابك في الفيدبنر
هل اعجبك الموضوع ؟
ليست هناك تعليقات :
إرسال تعليق