الاشتراك بالقائمة البريدية بشكل جميل واحترافي بتقنية css


السلام عليكم اخواني اخواتي الكرام، ومرحبا بكم من جديد في مدونة جلال البعداني , اليوم بعون الله تعالى اقدم لكم اضافه  بلغة CSS3  و شكل جديد من اشكال الاشتراك عبر القوائم البريدية بالاضافة الى المتابعة في مواقع التواصل الاجتماعي  يوتيوب , فيدبرنر , جوجل بلس , تويتر , فيس بوك ,,,, كل هذا واكثر في اضافة واحدة .... مستوحات من قوالب Thesis للوورد بريس ....

صورة توضيحيه للاضافه

اضافة الاشتراك بالبريد الالكتروني

كيفية اضافة هذه الاداه الى مدوناتكم

 انتقل إلى لوحة تحكم مدونتك


     HTML/Javascript   إختر "تخطيط" ثم إضافة أداة ثم اختر

   والآن الصق داخل المستطيل الكود التالي

<!- Thesis Email Subscribe Widget by  alb33dani.blogspot.com ->
<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/alb33dani" rel="nofollow" target="_blank" title="Facebook Fan Page">Facebook</a></li>
<li>
<a class="social twitter" href="https://twitter.com/albaadani1" rel="nofollow" target="_blank" title="Twitter Profile">Twitter</a>
</li>
<li>
<a class="social googleplus" href="https://plus.google.com/103499777490414306950" rel="nofollow" target="_blank" title="GooglePlus">GooglePlus</a>
</li>
<li>
<a class="social rss" href="http://feeds.feedburner.com/albaadani" rel="nofollow" target="_blank" title="RSS">Rss</a>
</li>
<li>
<a class="social youtube" href="http://www.youtube.com/user/alb33dani" 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.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=The-Area51', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input class="input-text" name="email" onblur="if undefinedthis.value == '') {this.value = 'ادخل ايميلك هنا ...';}" onfocus="if undefinedthis.value == 'ادخل ايميلك هنا ...') {this.value = '';}" type="text" value="ادخل ايميلك هنا ..." />
<input name="uri" type="hidden" value="albaadani" />
<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://alb33dani.blogspot.com/" style="color: black;">احصل على الاضافه</a></span>
</form>
</div>
</li>
</ul>
</div>
<div style="text-align: center;">
<br /></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/AVvXsEhkG3QQ8ktU_FL3v8KG4QgQLHsH9eqMkh7BWocqcy_W5f2_G0_Z-fQhfQpeGD0ocZndrM2yv5ED1TO43cyXTfHaj7ZVOAovvgJI2F5iC5nL2fLjYatsIoCtsNOjGh6y2ZKc390fm9Su-8U/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>
<!- Thesis Email Subscribe Widget by  alb33dani.blogspot.com -> 

تخصيص الاضافه

* استبدل      alb33dani          باسم حسابك في فيس بوك
* استبدل      albaadani          باسم حسابك في فيد برنر
* استبدل      albaadani1        باسم حسابك في تويتر
* استبدل      103499777490414306950  رقم الاي دي الخاص بحسابك في جوجل
* استبدل      alb33dani                باسم قناتك في يوتيوب
* استبدل      albaadani               باسم حسابك في فيدبرنر (القائمه البريديه)         

 

وبالاخير قم بحفظ الاداه ومبروك عليك الاضافه 

اذا كان عندكم اي استفسار او واجهتكم مشكله عند اضافة الاداه يمكنكم وضع تعليق وسيتم الرد عليكم ان شاء الله


هناك 12 تعليقًا:

  1. غير معرف24/3/13 02:32

    =(( =)) :-* :x b-(:-t8-} :)) ;)) ;;) :D ;) :p :(( :) :(

    ردحذف
  2. اخي كيف اجيب رقم الاي دي الخاص بحسابي في جوجل اريد الرد في اسرع وقت ممكن

    ردحذف
    الردود
    1. اخي لمعرفة رقم الاي دي الخاص بحسابك في جوجل+
      قم بالدخول لصفحتك في جوجل بلس
      وستجده في اعلى المتصفح داخل مستطيل ادخال الروابط
      كما في الصوره التالي
      http://im34.gulfup.com/W7BRn.png
      رقم الاي دي هو باللون الازرق في الصوره السابقه

      حذف
  3. ممكن طريقة جلب اسم حساب في فيدبرنر (القائمه البريديه)

    ردحذف
  4. ممكن طريقة جلب اسم حساب في فيدبرنر (القائمه البريديه)

    ردحذف
    الردود
    1. راجع الموضوع التالي ففيه شرح وافي للخلاصات
      http://www.alb33dani.com/2012/06/rss.html

      حذف
  5. مش بتظهر كاملة أخي :(

    ردحذف
  6. أخي جلال ما عرفت كيف أجيب القائمة البريدية
    ممكن تساعدني

    ردحذف
  7. bboyma.blogspot.com MUSIC, breakdance;jeux

    ردحذف
  8. لا تضهر لي كلمة albaadani باسم حسابك في فيدبرنر فما هو المعمول اخي

    ردحذف
  9. كيفية تصغير الحجم

    ردحذف
  10. السلام عليك مشكوور اخي على هذا الجهد المقدم
    اريد ان اسالك . كيف يمكننى ان انشا فيدورا خاصة بي . مثلا
    http://feeds.feedburner.com/albaadani
    لا اعرف كيفة انشاء فيدورا . المرجو المساعدة

    ردحذف