صندوق الإشتراك بالقائمة البريدية واجتماعية بتقنية CSS بشكل أنيق و إحترافي

أقدم لكم اضافه  الاشتراك عبر القوائم البريدية بالاضافة الى المتابعة في مواقع التواصل الاجتماعي  يوتيوب ، فيدبرنر ، جوجل بلس ، تويتر ، فيس بوك بلغة CSS و بشكل أنيق و إحترافي.

طريقة الإضافة
اذهب للوحة تحكم مدونتك >> التخطيط >> اضافة أداة JAVA/HTML.
ضع بها الكود التالى وقم بالحفظ.

<div id="sidebars" style="text-align: center;"> <ul class="sidebar_list"> <li id="social-profiles"> <ul> <li> <a class="social facebook" href="https://www.facebook.com/رابط فيسبوك" rel="nofollow" target="_blank" title="Facebook Fan Page">Facebook</a></li> <li> <a class="social twitter" href="https://twitter.com/رابط تويتر" rel="nofollow" target="_blank" title="Twitter Profile">Twitter</a> </li> <li> <a class="social googleplus" href="https://plus.google.com/رابط جوجل بلاس" rel="nofollow" target="_blank" title="GooglePlus">GooglePlus</a> </li> <li> <a class="social rss" href="http://feeds.feedburner.com/blogspot/رابط فيد" rel="nofollow" target="_blank" title="RSS">Rss</a> </li> <li> <a class="social youtube" href="https://www.youtube.com/channel/رابط يوتوب" rel="nofollow" target="_blank" title="Youtube Channel">Youtube</a> </li> </ul> </li> <li id="sidebar-social"> <div id="email-notice"> <span style="font-family: tahoma; font-weight: bold;"></span>انضم الى القائمة البريدية واحصل على الجديد لحظة بلحظة </div> <div id="email-form"> <h6> اشترك في القائمة البريدية</h6> <form action="http://feedburner.google.com/fb/a/mailverify" class="nice custom" 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 class="input-text" name="email" onblur="if (this.value == '') {this.value = 'ادخل ايميلك هنا ...';}" onfocus="if (this.value == 'ادخل ايميلك هنا ...') {this.value = '';}" type="text" value="ادخل ايميلك هنا ..." /> <input name="uri" type="hidden" value="jetara00" /> <input name="loc" type="hidden" value="en_US" /> <input class="button" type="submit" value="اشترك" /> <br /> <span style="font-family: tahoma; font-weight: bold;">تابع جديد المدونه عبر الاشتراك في خدمة البريد الالكتروني </span> <span style="float: right; font-size: 10px; font-weight: normal; line-height: 0px; margin-top: 15px;"> <a href="http://problay.blogspot.com/2013/05/css.html" style="color: black;"></a></span> </form> </div> </li> </ul> </div> <div style="text-align: center;"> </div> <div style="text-align: center;"> <style> #sidebars { border: 0 none; float: right; padding: 0 15px; width: 310px;} #email-notice { background: none repeat scroll 0 0 #66CCFF; color: #000000; font-size: 14px; line-height: 1.5; margin: 0 0 20px; padding: 15px 20px; position: relative; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);} #email-notice span { border-left: 14px solid transparent; border-right: 14px solid transparent; border-top: 10px solid #66CCFF; bottom: -10px; height: 0; position: absolute; right: 40px; width: 0;} #email-form { background: none repeat scroll 0 0 padding-box #313131; border-bottom: 5px solid #202020; border-radius: 2px 2px 2px 2px; text-shadow: 0 -1px 0 #000000;} #email-form h6 { color: #FFFFFF; font-family: arial; font-size: 16px; font-weight: bold; letter-spacing: 0; padding: 15px 20px 0; text-transform: none;} #email-form form { color: #FFFFFF; margin: 0; padding: 20px 18px;} #email-form input.input-text { background: none repeat scroll 0 0 #FFFFFF; border: 1px solid #222222; margin: 0 0 10px; padding: 8px; width: 94%;font-family: tahoma;} #email-form .button { background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%); background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#FFCA00),color-stop(1,#FF9B00)); background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%); -pie-background: linear-gradient(270deg,#ffca00,#ff9b00); font-family: "tahoma","Helvetica",sans-serif; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border: 1px solid #cc7c00; color: white; text-shadow: #d08d00 1px 1px 0; font-weight: bold; font-size: 12px; width: 100px; height: 30px; cursor: pointer; float: right; border-image: initial;} #email-form p { color: #CCCCCC; font-size: 12px; font-family: tahoma; line-height: 18px; margin: 0;} #sidebar-social { float: left; font-size: 12px; margin: 0 0 15px;font-family: tahoma; width: 100%;} ul.sidebar_list { list-style: none outside none;} li.widget ul { list-style: none outside none;} #social-profiles { float: left;} #social-profiles ul { float: left; list-style: none outside none; margin: 0 5px 20px;} #social-profiles ul li { float: left;} #social-profiles ul li a { display: block; float: left; height: 32px; margin: 0 15px; text-indent: -999em; width: 32px;} #social-profiles a.social { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc6DBYcWK3WIjsrkStBdNsl-IqI0OGVT3x1QJ5ZLJl4ggI8o1tKRw4vzzubvcvIQZ2bFAeX8AyJ4_Q_bbfWcUsXfegneTRYFXwS-N6LBvrRoR0epQx0GVb2dIFjuPj-Z5_NbpYhGDVvio/s1600/social.png") no-repeat scroll 0 0 transparent;} #social-profiles a.facebook { background-position: -79px 0; height: 32px; margin: 0 15px 0 5px; width: 32px; } #social-profiles a.facebook:hover { background-position: -79px -74px; height: 32px; width: 32px;} #social-profiles a.twitter { background-position: -5px -111px; height: 32px; width: 32px;} #social-profiles a.twitter:hover { background-position: -42px 0; height: 32px; width: 32px;} #social-profiles a.youtube { background-position: -42px -37px; height: 32px; width: 32px;} #social-profiles a.youtube:hover { background-position: -5px -37px; height: 32px; width: 32px;} #social-profiles a.rss { background-position: -42px -74px; height: 32px; width: 32px;} #social-profiles a.rss:hover { background-position: -79px -37px; height: 32px; width: 32px;} #social-profiles a.googleplus { background-position: -5px 0; height: 32px; width: 32px;} #social-profiles a.googleplus:hover { background-position: -5px -74px; height: 32px; width: 32px;} * { margin: 0; padding: 0; }.custom .sidebar ul.sidebar_list { padding: 15px 0; } </style></div>

غير الروابط فى الكود أعلاه بما يناسبك ، إذا وجهتك أي صعوبة فضعها في تعليق.