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

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

* قم بتسجيل الدخول الى لوحة تحكم مدونتك.

* قم بالذهاب الى تصميم ثم تحرير HTML.

* قم بالضغط على علامة توسيع قوالب واجهة المستخدم.

* ابحث عن الكود التالي
]]</b:skin> وذلك بالضغط علىCTRL+F .

* انسخ الكود الموجود بالاسفل وضعه مباشرة قبل هذا الكود
]]</b:skin>




.sociallinks ul{
font-family:Oswald;
}
.sociallinks ul li{
float:left;
width:90px;
padding-left:55px;
margin:0 0 0 5px !important;
line-height:48px !important;
}
.sociallinks ul li a{
font-size:20px !important;
}
.sociallinks ul li.w2brss{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXLXvb9tfAX3uvLqXYebiMDQv_wCSlHTgx3JG775WjU2nnMLRqthGftIVxGOAd2etyqZmJ7_YPFdmslDS7d4zgYnu3GujE8d3mxjp8TxzGw1pwOMdbzozjXVqYIo8TlhrIAG6LFGSe5iLN/s48/RSS.png) no-repeat scroll left center transparent;
}
.sociallinks ul li.w2bmail{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj30o2ULpQywb5xme6PIB-KfB_-eV5WZ20grjDjpxZFsylOHmiaCuNlqmKsFHUduj_qC469MNLalBkL8Jv2dZX_AocjUuP0FHgZnZDzhQuwUSzj4aygnX0iCYbfTnSQnfzxo4Zac86rh09e/s48/Mail.png) no-repeat scroll left center transparent;
}
.sociallinks ul li.w2btwitter{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKWqEwuhnmbyYN3eBmp5lJ6i4URS8bjIzBJyALi5woP05C31eHGjnTsg5nKOLo2cOVHAFPPOjBzwOs2hEx_kgLYsoKYzcySURemx2qVapE6PqavdbK9mFirOVMUmQPuPdm4oN5NXDzj9kp/s48/Twitter2.png) no-repeat scroll left center transparent;
}
.sociallinks ul li.w2bfacebook{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW_riw6E1xHb6jNTiyzPrGeAc8glzLRjxols9Ssr5Ew8rYC6Ttu0Q44E-i06KbXDQEq_U7lXTpPXpcs28aq5aY5pnMaZ2JFG6bHD23KYkWO76GiSrUPA_RI3DEps0XKoCHqQlCmhP8DQvM/s48/Facebook.png) no-repeat scroll left center transparent;
}
form.emailform{
margin:20px 0 0;
display:block;
clear:both;
}
.emailtext{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeZ5xuUAomBIeDyBDYW5_FdxMBl8EY06VREgPkmV1xcEKE54ULo0PkA-sbPF_XfMFA_oCxIKE8eNAJ-29Iu3L0SoSuoR_pbLQCy-ncMFywmT_h19R51ovwRb9sd0BRj7bp3bzTh5CUTBDI/s28/w2b-mail.png) no-repeat scroll 4px center transparent;
padding:7px 15px 7px 35px;
color:#444;
font-weight:bold;
text-decoration:none;
border:1px solid #D3D3D3;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
}
.ebutton{
color:#444;
font-weight:bold;
text-decoration:none;
padding:6px 15px;
border:1px solid #D3D3D3;
cursor: pointer;
background: #fbfbfb;
background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#F4F4F4',GradientType=0 );
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}

* قم الان بحفظ قالب مدونتك.

* قم بالذهاب الى تصميم.

* تذكر انك الان في --->>> عناصر تصميم الصفحه.

* قم بانشاء اداه جديده.

* لا تنسى ان تكون الاداه من هذا النوع HTML/javascript.

*انسخ الكود الموجود بالاسفل وضعه فيها وقم بالحفظ.

<div class='sociallinks'>
<ul>
<li class='w2brss'><a target='_blank' href='YOUR FEEDBURNER EMAIL URL HERE'>RSS</a></li>
<li class='w2bmail'><a target='_blank' href='http://feedburner.google.com/fb/a/mailverify?uri=YOUR FEEDBURNER URL LAST NAME'>Em@il</a></li>
<li class='w2btwitter'><a target='_blank' href='YOUR TWITTER URL HERE'>Twitter</a></li>
<li class='w2bfacebook'><a target='_blank' href='YOUR FACEBOOK URL HERE'>Facebook</a></li>

</ul>
</div>
<br />
<div style="text-align: left; display: inline-block;">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('YOUR FEEDBURNER EMAIL URL HERE', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" class="emailform">

<input type="hidden" value="Anilhindustani" name="uri" />
<input type="hidden" name="loc" value="en_US" />
<input type="text" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}" onfocus="if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}" value="Enter your email..." name="email" class="emailtext" />
<input type="submit" class="ebutton" value="SignUp" title='' al='' />
</form>
</div>
</div>
<div class='clear'></div>
ملحوظه:- لا تنسى تغيير الروابط ذات اللون الاحمر وذات اللون الاخضر باسماء حسابك على تلك المواقع.
* بعد الانتهاء من تغيير الروابط وبعد حفظ الاداه قم بسحبها الى العامود الجانبي فهذا انسب مكان للاضافه تلك ثم قم بالحفظ.
* تم الانتهاء من موضوع اليوم بحمد الله وتوفيقه
الموضوع بالكامل منقول من احد المواقع الاجنبيه وتمت ترجمته للافاده
أصدقاء(تطوير ويب)
تعليقات Facebook
0تعليقات Blogger

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

إرسال تعليق

التعليقات متاحه لمستخدمي حساب جوجل فقط.ولاضافة كود: أستعن بهذه الأداة السريعة Encode/HTML .