اضافة تابعنا بالبريد الالكتروني ومواقع التواصل الاجتماعي

بسم الله الرحمن الرحيم

اليوم مع موضوع جديد فى بلوجر

 وهو اضافة زر تابعنا بالبريد الالكترونى وواقع التواصل الاجتماعى بشكل انيق وجميل

مثل الموجودة بالصورة

لاضافتها توجه الى لوحة التحكم تخطيط اضافة اداة 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://feeds.feedburner.com/blogspot/fDLKr" rel="nofollow" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivDmMTIJJuq4HojmFuPBiF4QJpV23Am-sLRznawNliK5dLz9XI-R2EfaKktsv4qXYCgvHuxusIFt094YUOnqV32MWWkk8UjqoKcOaG8vG0ro_Vgf03aZLHuy38jigBgxuSbe2szDurcWM/s1600/rss.png" border="0" /></a> 
</td>

<td>

<a style="margin-right:5px;"href="http://www.twitter.com/mohamed7465" rel="nofollow" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyGszoJhPKHNFepp1JF6UmvxzOSPG91UtNru-SwYnBhRMjiqFnsABYiV3tD2xySWnJR18TVeJSUPuqZ9mhWgFjO1T_IgItp6l6wxfW6urEi-zTpL2a12XKZ_B1xH0FHB62X2P52AhzklE/s1600/twitter.png" border="0" /></a> 
</td>

<td> 
<a style="margin-right:5px;"href="http://www.facebook.com/professssor" rel="nofollow" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpgqCFP_85kSX0DJe3ifeI1GYJvCOkPjtzLYAKaXvRSHj8lAmCPMFTR-V-yRyFneq0LSEfP4Y3LuRnuJpJWTcAKGUyi3d_Y3nZpS9RYsftlYeiYcxMTuIQ7O4oGm2qt8w-Z6FLA3W8eng/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=blogspot/fDLKr', '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>

وغير  http://www.facebook.com/muh-prof

برابط حسابك فى الفيسبوك



وغير http://www.twitter.com/

برابط حسابك فى تويتر

وغير http://feeds.feedburner.com/blogspot/muh-pro
 برابط اختصار مدونتك فى فيدبرن

وغير blogspot/fDLKr

باسم المستخدم الخاص برابط الفيد بيرن

فمثلآ لو رابط الفيد الخاص بك 

مثل http://feeds.feedburner.com/blogspot/fDLKr

ضع blogspot/fDLKr


اتمنى ان ينال الموضوع والاداة اعجابكم
يمكنك مشاركة الموضوع اذا اعجبك

ما رأيك؟!

ليست هناك تعليقات:

إرسال تعليق

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