أفضل إستضافة مجانية غير محدودة

Web Hosting

السلام عليكم و رحمة الله تعالى و بركاته, إخواني الأعزاء , موضوعنا لهذا اليوم يتضمن طريقة إضافة أداة للإشتراك عبر البريد الإلكتروني و كذلك الشبكات الإجتماعية, تتميز هذه الأداة بالجمالية و البساطة في آن واحد و كذلك التباث.
[subscription%2520box12%255B5%255D.jpg]
إذا أعجبتك الأداة و تريد إضافتها إلى مدونتك المرجو تتبع المراحل التالية :
  • توجه إلى لوحة التحكم في مدونتك و اختر منها » تصميم ثم » إضافة أداة و من النافذة المنبثقة اختر أداة HTML/Javascript.
  • انسخ الكود التالي و الصقه داخل الأداة.

<style type='text/css'>
.a51 a{
    color: #6e6e6e;
    font: bold 13px Helvetica, Arial, sans-serif;
    text-decoration: none;
    padding: 7px 12px;
    position: relative;
    display: inline-block;
    text-shadow: 0 1px 0 #fff;
    -webkit-transition: border-color .218s;
    -moz-transition: border .218s;
    -o-transition: border-color .218s;
    transition: border-color .218s;
    background: #f3f3f3;
    background: -webkit-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
    background: -moz-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
    border: solid 1px #dcdcdc;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
}
.a51 a:hover {
    color: #333;
    border-color: #999;
    -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2)
    -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.a51 a:active {
    color: #000;
    border-color: #444;
}
.a51bar{ width:280px; float: right; margin-right:3px; margin-top:5px; padding:0;}
.a51bar .emailsub{border-bottom: 0px solid #e6e6e6; padding:0px 0 15px 0; float: right; width: 100%; font-family: Helvetica, Arial;}
.a51bar .emailsub .emailupdatesform{width: 100%; float: left; padding:0px;}
.a51bar .emailsub .emailupdatesform input.emailupdatesinput{background: #F3F3F3;  float: right; border: 1px solid #dcdcdc; padding: 0px 8px; color: #989898; font-size: 15px;  width: 130px; height:30px;   border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;}
.a51bar .emailsub .emailupdatesform input.emailupdatesinput:hover{
border-color: #999;
    -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2)
    -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.a51bar .emailsub .emailupdatesform input.joinemailupdates:hover{ border-color: #666;
    -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2)
    -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); cursor:pointer;
}
.a51bar .emailsub .emailupdatesform input.joinemailupdates{
border: solid 1px #dcdcdc;
    background: #F3F3F3;
   font-family:Helvetica, Arial;
text-transform: none; color: #989898; height: 25px; padding: 0 10px; margin:0 5px 0 0; font-weight:bold; font-size:15px; height:30px;
  border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
}
.a51bar .emailsub .emailupdatesform input.emailupdatesinput{background: #F3F3F3;  float: right; border: 1px solid #dcdcdc; padding: 0px 8px; color: #989898; font-size: 15px;  width: 145px; height:28px;   border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;}
.a51bar .emailsub .emailupdatesform input.joinemailupdates{
border: solid 1px #dcdcdc;
    background: #F3F3F3;
   font-family:Helvetica, Arial;
text-transform: none; color: #989898; height: 25px; padding: 0 0px; margin:0 5px 0 0; font-weight:bold; font-size:15px; height:30px;
  border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
}
</style>
<!--[if IE 8]> <style>
.a51bar .emailsub .emailupdatesform input.emailupdatesinput{background: #F3F3F3;  float: right; border: 1px solid #dcdcdc; padding: 5px 10px; color: #0A0101; font-size: 13px;  width: 130px; height:18px;   border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;}
.a51bar .emailsub .emailupdatesform input.joinemailupdates{
border: solid 1px #dcdcdc;
    background: #F3F3F3;
   font-family:Helvetica, Arial;
text-transform: none; color: #0A0101; height: 25px; padding: 0 5px; margin:0 5px 0 0; font-weight:bold; font-size:15px; height:30px;
  border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
}
</style> <![endif]-->
<div class="a51" style="padding:0pt 5px 0pt 0pt;">
<table><tbody><tr>
<td>
<a   href="http://www.feeds.feedburner.com/hamedblog" rel="nofollow" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT96pBHYBPQIFk8qBHf0SLSismJ9qTW5ufayht1qMQMv0rtSwvtetG788OTpFxTkCw2EVBVa7aiCFJVENogaOTw-M0tQOq7TXM-0hrBz73xy9UV4DmnHbcwEZ25woHuREl8PtVLw4_BEY/s1600/rss.png" border="0" /></a>
</td>
<td>
<a style="margin-right:5px;"href="http://www.twitter.com/prof_blogger" rel="nofollow" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilvZXAnEvWUWjp7xhASa-OALrTlUJ03_YboDXRc_0HuunVGPkym1Ki21yCywBmxZoAv9KpTC492Y17yyoyYbgtQbEGx9xVuELfS7t2m8nbI4NOmVorvqmDNLuwz212Lri0tYICSdl6gUI/s1600/twitter.png" border="0" /></a>
</td>
<td>
<a style="margin-right:5px;"href="http://www.facebook.com/modawanatmohamed" rel="nofollow" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdOSkh-HSpMd7MYwGuo-VdvabDv_fcCcLxaz5zUfCY2XHkfH9XndRkM3ZQ8_KqkJI13X1xv-xlUGuZA6kCc-ppJx5R32xXqHmsdghzOPLHcYSeZmEI68r1umhuh_OAGKXjSLnDa7bxiFI/s1600/facebook.png" border="0" /></a>
</td>
</tr></tbody></table>
<div class="a51bar">
<div class="emailsub">
<div class="emailupdatesform">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=hamedblog', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="emailupdatesinput" name="email" value="بريدك الإلكتروني..." onblur="if (this.value == &#39;&#39;) {this.value = &#39; بريدك الإلكتروني...&#39;;}" onfocus="if (this.value == &#39;بريدك الإلكتروني...&#39;) {this.value = &#39;&#39;;}" type="text" /><input value="hamedblog" name="uri" type="hidden" /><input value="اشترك معنا لآن" class="joinemailupdates" type="submit" /></form></div></div></div></div>
التعديل على الكود :
  • hamedblog : غيره برابط التغذية (الخلاصات) الخاص بك.
  • prof_blogger : غيره باسم المستخدم الخاص بك على تويتر.
  • modawanatmohamed : غيره باسم الصفحة الخاصة بك على الفايسبوك.

0 التعليقات:

إرسال تعليق