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

السلام عليكم ورحمه الله وبركاته .

اليوم اقدم لكم اضاقه جميله لمدونات بلوكر وهي ادافه ادوات التواصل الاجتماعي مع القائمة البريدية ومعها لمحة بسيطة عن فائدة القائمة البريدية ان صح التعبير والاضافة ستعطي لمدونتك وقالبك شكل احترافي وجميل والاداة على هذا الشكل .

 طؤيقة التركيب : توجه الى لوحة التحكم بلوكر ثم الى تخطيط اضافة اداة HTML/Javascript وضع الكود الاتي بها الكود طويل نوعا ما 

<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/al-etqan12/" rel="nofollow" rel="nofollow" target="_blank" title="Facebook Fan Page">Facebook</a></li>
<li>
<a class="social twitter" href="https://twitter.com/alialyaseri5" rel="nofollow" rel="nofollow" target="_blank" title="Twitter Profile">Twitter</a>
</li>
<li>
<a class="social googleplus" href="https://plus.google.com/google+" rel="nofollow" rel="nofollow" target="_blank" title="GooglePlus">GooglePlus</a>
</li>
<li>
<a class="social rss" href="http://feeds.feedburner.com/rss" rel="nofollow" rel="nofollow" target="_blank" title="RSS">Rss</a>
</li>
<li>
<a class="social youtube" href="http://www.youtube.com/user/alialyaseri" rel="nofollow" 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" rel="nofollow" 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="القائمة البريدية" />
<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://al-etqan.blogspot.com/2014/07/blog-post16.html" style="color: yellow;">احصل على الاضافه</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/AVvXsEihKrN4qVB0NYuZuFSxDwGD60fyxhC-ozMsj8eThmCdZR0R6ZqWx73JBhNlS8Rvi8eJpB_6O05XLz2bRhWvnchxh2Gj_i8iGscsnkkGFv43vHmWnOOeMEnn9HT5DDuSFXH_inR8eoZDmnA/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>

وبلاخير قم بالحفظ ومبروك عليك الاضافة اراكم في تدوينة جديدة انشاء الله اذا واجهتكم اي صعوبة او مشكلة لا تتردد في طرحها وسيتم حلها انشاء الله .