إضافة أداة احترافية للإشتراك عبر البريد الإلكتروني

email subscription widget
إخواني الكرام زوار و متتبعي مدونة المحترف محمد, اليوم جئتكم بأداة جميلة و احترافية للاشتراك عبر البريد الإلكتروني. تتميز هاته الأداة بالجمالية و الخفة و كذلك تجاوبها مع جميع القوالب يعني أنها تتخد مقاس السايدبار تلقائيا بدون التعديل على حجمها.
separator 1 
إذا أعجبتك الأداة و تريد إضافتها إلى مدونتك كل ما عليك فعله هو تتبع المراحل التالية :
  • توجه إلى لوحة التحكم الخاصة بمدونتك ثم اضغط على تخطيط من القائمة الجانبية بعد ذلك اختر إضافة أداة HTML/Javascript.
  • انسخ الكود أسفله و ضعه داخل الأداة و اضغط حفظ.
<style type='text/css'>#sidebar-subscribe-box { 
    border: 1px solid #aaa; 
    border-radius: 3px; 
    padding: 3px 0; 
} 
.sidebar-subscribe-box-wrapper { 
    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; 
    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 { 
    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"><p> 
</p><div class="sidebar-subscribe-box-form"><form action="http://feedburner.google.com/fb/a/mailverify?uri=hamedblog" 
class="sidebar-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=hamedblog', 
'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"> 
<input name="uri" type="hidden" value="hamedblog" /><input name="loc" type="hidden" value="en_US" /> 
<input class="sidebar-subscribe-box-email-field" name="email" autocomplete="off" placeholder="أدخل بريدك الإلكتروني..."/> 
<input class="sidebar-subscribe-box-email-button" title="" type="submit" value="اشترك الآن" /></form></div>المرجو تأكيد البريد الإلكتروني بعد الإشتراك</div></div>
التعديل على الكود :
muh-pro: غيره باسم المستخدم الخاص بخلاصات مدونتك.
و بهذا تكون قد ركبت هاته الأداة في مدونتك, إذا واجهتك أي مشكلة في تركيبها المرجو طرحها في تعليق و السلام عليكم.
____________________________________________
يمكنك مشاركة الموضوع اذا اعجبك

الموضوع من طرف :: محمد عليان

أنا محمد عليان 15 سنة مدوّن سوري مهووس بجديد تكنولوجيا المعلوميات ،أحب كل جديد في عالم الإنترنت من مواقع وبرامج وأحب التدوين ودائماً أبحث عن الجديد لتطوير مهاراتي في مختلف الميادين التي تعجبني ،أنشأت هذه المدونة المهتمّة بكل ما يتعلق عالم الإنترنت من تقنيات وشروحات وتطوير للمواقع والمدونات

ما رأيك؟!





جميع الحقوق محفوظة مدونة الخالد ©2013 | ، نقل بدون تصريح ممنوع .