اضافه رائعه الاشتراك بالبريد ومواقع التواصل الاجتماعي

 السلام عليكم ورحمة الله
:
اقد لكم اضافه رائعه الاشتراك بالبريد ومواقع التواصل الاجتماعي
صورة توضيحية

للمشاهده الحية هنا
ادخل على لوحه تحكم مدونتك>تخطيط>اضافه اداه>HTML/JavaScript إضافة
ضع الكود التالي

<style>
#sidebar-subscribe-box
{width:300px;
border:1px solid #aaa;
border-radius:3px;
padding:3px 0px;ث
}
.sidebar-subscribe-box-wrapper{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrIQ5oyeiQpn7izEKnEN-3SKJCGwqtJT7BUx5kpAu2zA1S-pQ3VHoeJq4I7D-O8rRS-u6cuv9_Y1BcM8NyvPAbkZU1L63tm2M2UpbtQzGKEs66LjEkDUEdeS3IvOzbqO7aWNuWDbkxOdk/s1600/background.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/AVvXsEgsOPqKBvzK0PhizIbFBte-yBUAHo9W8vOgasR4jgFM12BJ9d0LncYbQ7Pvkm25LHbDBhmU2Lq-hlkEpswbivuO8oIXGvuFhHyZrxabSjDYjPBBsH6H6ykh7TH1BngV-FbdkdLbNAxd2Cs/s1600/icons.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:verdana;
font-weight:700;
padding:10px;
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-family:cambria;
font-size:14px;
height:100px;
margin:10px -30px 5px;padding:0 30px;text-align:center;
width:100%
}
a.social-icons{margin-right: 5px;height:45px;width:45px;}
a.social-icons:hover { opacity: .7; filter:alpha(opacity=70);}
</style>

<div id="sidebar-subscribe-box" style="width: 274px; height: 233px">
<div class="sidebar-subscribe-box-wrapper">
    <br/>
<a class="social-icons" href="https://facebook.com/akramqahtan"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiizE504FFjWZQDzZ_TqPnL8kaQ3MRfEKDZdZD_y0SfINSkZoq8Q62YmzZU9olQzrR_RT-8PsA3ZGV6X-0e-zTRgp3Bie451Q_-Q8pk92BVjYS6qU0TQDs68vrTBFCtogX-ftlfqU2sQj5/s1600/Bloggertrix-facebook.png" /></a>
<a class="social-icons" href="https://twitter.com/akram_qahtan"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbCrNCvFDF_fkZjYvOf8py-cZM6elvD7VkAEw7Jl5AFz_6gTY3a9ZcJfsDK_KS79aWK9uKy19KEAnHTYrRPa0484ofKSDX-L3QCSHxZecCYfUKYxQWwVvQFQmk87FRCdHps7tZEQaf3oKR/s1600/bloggertrix-twitter.png" /></a>
<a class="social-icons" href="https://plus.google.com/u/0/116146049359668391116/about"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPiBYr8POa2iJ8RX0L_hbnYJAEu2QnBGB5rhA9fo1lQ1hsei-WDwEgswi4aPo2yAz8ovYFiTQQAV_7CdytrlSuNQobg_tnw-r5hwazRF-h2GAJVQMuewLe428noDrYc83Q6uIS9iTDhLJ3/s1600/Bloggertrix-Googleplus.png" /></a>
<a class="social-icons" href="http://sh2f.blogspot.com/feed"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjChEUtIEiLiF4-vMrxMiMK9VTyzJ2OqmxG7FoBZ-r_VukiVEx5ABWZp4Z0E7nRv0YNHNr1HuCDSxhDVE61171VbdFaFGCIImm-oWAor4UOTpwOxaJBnvGk5SmClvtJiLTnyilkVeju17HB/s1600/Bloggertrix-Rss.png" /></a>
<p>اشترك معنا وكن على علم بكل جديد:</p>
  <form style="/* border:1px solid #ccc;padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=bloggingcrazedcom', 'popupwindow', 'scrollbars=yes,width=500,height=520');return true"><input type="hidden" value="thechismael" name="uri"/><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>

ثم حفظ