إضافة نوافذ المواقع الإجتماعية عائمة على جانب مدونات بلوجر - تحديث

عدد مشاهدات الموضوع:


ايماءا منا لنشر المعلومة بشكل بسيط والإجابة قدر المستطاع على الأسئلة والرسائل الواردة لحل مشكلاتكم. وردتنا احد الرسائل المعجبة بإضافة مدونة أبو إياد لبعض المواقع الإجتماعية كأزرار عائمة على جانب المدونة وهناك تدوينة بالفعل لنفس الأداة الموجودة بالمدونة من شرح الرائع أبو إياد يمكنك الحصول عليها من هنا. ولكن هنا سنقدم كود أداة أكثر تطورا من أداة مدونة أبو إياد لأنها أداة تحتوي على خمسة أدوات فى كود واحد وهاهي بين أيديكم مع بعض التعديلات التى سأدونها أسفل الكود. لمعاينة الأداة من هنا (مدونة تجريبية)

 <style>  img, a {    border: 0;  }  #on {    visibility: visible;  }  #off {    visibility: hidden;  }  #facebook_div {    width: 235px;    height: 236px;    overflow: hidden;  }  #twitter_div {    width: 246px;    height: 240px;    overflow: hidden;  }  #google_plus_div {    width: 290px;    height: 250px;    overflow: hidden;    margin-left: 5px;    margin-top: 1px;  }  #NBTfeedburner_div {    width: 300px;    height: 120px;    overflow: hidden;    margin-top: 5px;    margin-left: -4px;  }  #NBT_div {    width: 300px;    height: 97px;    overflow: hidden;  }  /* right side style */   #facebook_right {    z-index: 10005;    border: 2px solid #3c95d9;    background-color: #fff;    width: 235px;    height: 236px;    position: fixed;    right: -239px;  }  #facebook_right img {    position: absolute;    top: -2px;    left: -35px;  }  #facebook_right iframe {    border: 0px solid #3c95d9;    overflow: hidden;    position: static;    height: 236px;    left: -2px;    top: -3px;  }  #twitter_right {    z-index: 10004;    border: 2px solid #6CC5FF;    background-color: #6CC5FF;    width: 250px;    height: 240px;    position: fixed;    right: -254px;  }  #twitter_right_img {    position: absolute;    top: -2px;    left: -35px;    border: 0;  }  #google_plus_right {    z-index: 10003;    background-color: #F2F2F2;    border: 2px solid #006ec9;    border-top: 2px solid #0056a0;    border-bottom: 2px solid #0056a0;    border-right: 2px solid #0056a0;    border-left: 2px solid #0056a0;    width: 290px;    height: 250px;    position: fixed;    right: -294px;  }  #google_plus_right_img {    position: absolute;    top: -2px;    left: -33px;    border: 0;  }  #feedburner_right {    z-index: 10003;    background-color: #fefefe;    border: 2px solid #5b5b5b;    border-top: 2px solid #5b5b5b;    border-bottom: 2px solid #5b5b5b;    border-right: 2px solid #5b5b5b;    border-left: hidden;    width: 300px;    height: 97px;    position: fixed;    right: -304px;  }  #feedburner_right_img {    position: absolute;    top: -2px;    left: -33px;    border: 0;  }  #NBT_right {    z-index: 10003;    border: 2px solid #303030;    background-color: #fff;    width: 300px;    height: 97px;    position: fixed;  }  #NBT_right img {    position: absolute;    top: -2px;    left: -101px;  }  /* left side style */   #facebook_left {    z-index: 10005;    border: 2px solid #3c95d9;    background-color: #fff;    width: 235px;    height: 236px;    position: fixed;    left: -239px;  }  #facebook_left img {    position: absolute;    top: -2px;    right: -35px;  }  #facebook_left iframe {    border: 0px solid #3c95d9;    overflow: hidden;    position: static;    height: 236px;    right: -2px;    top: -3px;  }  #twitter_left {    z-index: 10004;    border: 2px solid #6CC5FF;    background-color: #6CC5FF;    width: 246px;    height: 240px;    position: fixed;    left: -254px;  }  #twitter_left_img {    position: absolute;    top: -2px;    right: -35px;    border: 0;  }  #google_plus_left {    z-index: 10003;    background-color: #006ec9;    border: 2px solid #006ec9;    border-top: 2px solid #0056a0;    border-bottom: 2px solid #0056a0;    border-left: 2px solid #0056a0;    border-right: 2px solid #0056a0;    width: 290px;    height: 120px;    position: fixed;    left: -294px;  }  #google_plus_left_img {    position: absolute;    top: -2px;    right: -33px;    border: 0;  }  #feedburner_left {    z-index: 10003;    background-color: #fefefe;    border: 2px solid #5b5b5b;    border-top: 2px solid #5b5b5b;    border-bottom: 2px solid #5b5b5b;    border-left: 2px solid #5b5b5b;    border-right: hidden;    width: 300px;    height: 97px;    position: fixed;    left: -304px;  }  #feedburner_left_img {    position: absolute;    top: -2px;    right: -33px;    border: 0;  }  #NBT_left {    z-index: 10003;    border: 2px solid #303030;    background-color: #fff;    width: 300px;    height: 97px;    position: fixed;  }  #NBT_left img {    position: absolute;    top: -2px;    right: -101px;  }  .box-title1 {    border: 1px solid #ddd;    /*border-radius*/    -webkit-border-radius: 6px;    -moz-border-radius: 6px;    border-radius: 6px;    /*box-shadow*/    -webkit-box-shadow: 5px 5px 5px #CCCCCC;    -moz-box-shadow: 5px 5px 5px #CCCCCC;    box-shadow: 5px 5px 5px #CCCCCC;    padding: 10px;    margin: 10px 0;  }  .enteryouremail {    background: #fff !important;    border: 1px solid #d2d2d2;    padding: 0px 8px 0px 8px;    color: #a19999;    font-size: 12px;    height: 25px;    width: 165px;    /*border-radius*/    -webkit-border-radius: 5px;    -moz-border-radius: 5px;    border-radius: 5px;    margin: 0px;  }  .submitbutton {    background: #FF8000;    border: 1px solid #F66303;    /*box-shadow*/    -webkit-box-shadow: 3px 3px 3px #666;    box-shadow: 3px 3px 3px #666;    font: bold 12px Arial, sans-serif;    color: #000000;    height: 25px;    padding: 0 12px 0 12px;    margin: 0 0 0 5px;    /*border-radius*/    -webkit-border-radius: 5px;    border-radius: 5px;    cursor: pointer;  }  #youtube_right {    z-index: 10001;    background-color: #fefefe;    border:2px solid #ff0000;    border-top:2px solid #5b5b5b;    border-bottom: 2px solid #5b5b5b;    border-right:2px solid #5b5b5b;    border-left: hidden;    width:301px;    height: 106px;    position: fixed;    right: -304px;  }  #youtube_right_img {    position: absolute;    top: -2px;    left: -33px;    border:  </style>  <script src="http://code.jquery.com/jquery-latest.js"></script>  <script src="http://apis.google.com/js/plusone.js"  type="text/javascript"></script>  <script type="text/javascript">  jQuery(document).ready(function ()  {    jQuery("#facebook_right").hover(      function ()      {        jQuery(this).stop(true,          false).animate(          {            right: 0          },          500);      },      function ()      {        jQuery("#facebook_right").stop(          true,          false).animate(          {            right: -239          },          500);      });    jQuery("#twitter_right").hover(      function ()      {        jQuery(this).stop(true,          false).animate(          {            right: 0          },          500);      },      function ()      {        jQuery("#twitter_right").stop(          true,          false).animate(          {            right: -254          },          500);      });    jQuery("#google_plus_right").hover(      function ()      {        jQuery(this).stop(true,          false).animate(          {            right: 0          },          500);      },      function ()      {        jQuery("#google_plus_right").stop(          true,          false).animate(          {            right: -294          },          500);      });    jQuery("#feedburner_right").hover(      function ()      {        jQuery(this).stop(true,          false).animate(          {            right: 0          },          500);      },      function ()      {        jQuery("#feedburner_right").stop(          true,          false).animate(          {            right: -304          },          500);      });    jQuery("#youtube_right").hover(      function ()      {        jQuery(this).stop(true,          false).animate(          {            right: 0          },          500);      },      function ()      {        jQuery("#youtube_right").stop(          true,          false).animate(          {            right: -304          },          500);      });  });  </script>  </span>  </b>  <br />  <div id="on">    <div id="facebook_right" style="top: 8%;">      <div id="facebook_div">        <img alt="" src="http://3.bp.blogspot.com/-wQUpmiGwynE/UNHJaesfqeI/AAAAAAAAItg/JQlnTuoFRnQ/s1600/NBTfacebook_right.png"        />        <iframe allowtransparency="true" frameborder="0"        scrolling="no" src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fabuiyad007&amp;width=250&amp;height=250&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false"        style="border: none; height: 250px; overflow: hidden; width: 250px;"></iframe>      </div>    </div>  </div> <!-- BEGIN: Twitter website widget (http://abu-iyad.com) -->
 <div id="on">    <div id="twitter_right" style="top: 24%;">      <div id="twitter_div">        <img id="twitter_right_img" src="http://3.bp.blogspot.com/-UrPbwWyd88E/UNHJhIlDSRI/AAAAAAAAIt4/fmis0qzbcfI/s1600/NBTtwitter_right.png"        />        <div style="width:248px;font-size:8px;text-align:right;">          <script type="text/javascript">          document.write(unescape(            "%3Cscript  
src='http://twitterforweb.com/twitterbox.js?username=abuiyadblog&settings=1,1,2,236,474,f4f4f4,0,c4c4c4,101010,1,1,336699'   type='text/javascript'%3E%3C/script%3E"          ));          </script>          <a href="http://abu-iyad.com"          target="_blank"></a>        </div>      </div>    </div>  </div>
<!-- END: Twitter website widget (http://abu-iyad.com) -->
  <div id="on">    <div id="google_plus_right" style="top: 41%;">      <div id="google_plus_div">        <img id="google_plus_right_img" src="http://2.bp.blogspot.com/-e2uAzeEjWU4/UTHxwZv6O_I/AAAAAAAAACo/IIkUjVUrtus/s1600/NBTgoogle_plus_right.png"        />        <div style="float: left; margin: 10px 10px 10px 0;">          <a href='http://abu-iyad.com'>            <img alt='Tips Tricks And Tutorials'            src='http://3.bp.blogspot.com/_rKG-ziTSNUQ/TQ5eV0U0EiI/AAAAAAAACik/xo2eFaDbfrE/s1600/best+blogger+tips.png'            />          </a>          <div class="g-plus" data-action="followers"          data-height="250" data-href="https://plus.google.com/
113815301648155126439"          data-source="blogger:blog:followers"          data-width="270"></div>          <script type="text/javascript">          (function ()          {            window.___gcfg = {              'lang': 'en'            };            var            po =              document.createElement(                'script');            po.type =              'text/javascript';            po.async =              true;            po.src =              'https://apis.google.com/js/plusone.js';            var            s =              document.getElementsByTagName(                'script')[0];            s.parentNode.insertBefore(              po,              s);          })();          </script>        </div>      </div>    </div>    <div id="on">      <div id="feedburner_right" style="top: 75%;">        <div id="abu-iyad/rCev">          <center>            <h4 style="color: #f66303;">اشترك فى قائمة الرسائل ليصلك كل جديد</h4>            <form action="http://feedburner.google.com/fb/a/mailverify"            method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=abu-iyad/rCev', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"            target="popupwindow">              <input class="enteryouremail" gtbfieldid="10"              name="email" onblur="if (this.value == '') {this.value = 'Enter your email here...';}"              onfocus="if (this.value == 'Enter your email here...') {this.value = '';}"              type="text" value="ادخل بريدك هنا للاشتراك"              />              <input name="uri" type="hidden"              value="abu-iyad/rCev" />              <input class="submitbutton" type="submit"              value="اشتراك" />            </form>          </center>          <img id="feedburner_right_img" src="http://1.bp.blogspot.com/-k_w8nyZNI0I/UNHJcHym1SI/AAAAAAAAIto/UuFo46fEKaA/s1600/NBTfeedburner_right.png"          />          <div style="float: right; padding: 20px; margin: 0px;"> <span style="font-size:10px;">تعريب الإضافة بواسطة <a href="http://abu-iyad.com/">مدونة أبو إياد</a>   </span>            <span style="font-size:8px;"></span>          </div>        </div>      </div>      <div id="on">        <div id="youtube_right" style="top:58%;">          <div id="youtube_div">            <img id="youtube_right_img" src="http://2.bp.blogspot.com/-jRtgtewf7DA/UR_Gu5gijpI/AAAAAAAALX8/G_nLKDQxb-w/s1600/NBTyoutube_right.png "            />            <div style="float:left;margin:1px 0px 0px 2px;">              <iframe src=http://www.youtube.com/subscribe_widget?p=engmosha              style="height:105px;width:300px;border:0;"              scrolling="no" frameBorder="0"></iframe>            </div>          </div>        </div>      </div> 


أولا : الملون بالأزرق الخاص بأداة الفيسبوك:
  • قم بتغيير abuiyad007 الى اسم معرف صفحتك على الفيسبوك
ثانيا : الملون بالبرتقالي الخاص بأداة تويتر:
  • قم بتغيير abuiyadblog  الى اسم معرفك عى تويتر 
  • قم بتغيير 1,1,2,236,474,f4f4f4,0,c4c4c4,101010,1,1,336699 مالى الكود الخاص بك عن طريق هذا الموقع twitterforweb . بدخولك الموقع وكتابة اسم معرفك على تويتر سيقوم الموقع تلقائيا بانشاء كود يمكنك استخراج منه الكود البديل الخاص بحسابك. كما بالصورة التالية. لاحظ موقع twitterforweb به العديد من الإعدادات التى يمكنك تغييرها.

ثالثا : الملون بالبنفسجي الخاص بأداة جوجل بلس:
رابعا : الملون بالأحمر الخاص بأداة الاشتراك فى الخلاصات:
  • قم بتغيير abu-iyad/rCev الى اسم معرف خلاصات مدونتك من موقع feedburner.google.com ويمكنك الحصول عليه بالدخول الى الموقع السابق ثم اتبع الشرح بالصورة التالية :)
اضغط على الصورة لتكبيرها


خامسا : الملون بالأخضر الخاص بأداة يوتيوب:
  • قم بتغيير engmosha الى اسم معرف قناتك على يوتيوب.

بعد الانتهاء من تعديلك على الكود نأتي لخطوة الإضافة.
1- سجل دخولك الى لوحة تحكم بلوجر
2- الدخول الى تخطيط Layout 
3- إضافة أداة Add a Gadget
4- اختر HTML/JavaScript
5- انسخ الكود والصقه داخلها ثم احفظ Save

ماهى النتيجة التي ظهرت بمدونتك! فى انتظار ردودكم :)

© جميع حقوق تصميم الكود لمدونة NBT وحقوق التعريب والتعديل لمدونة أبو إياد

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

  1. ما شاء الله شرح رائع.شكرا ومزيدا من التميز.انت مبدع والله يامهندس

    ردحذف
  2. @ahmed amentag

    أهلا وسهلا أحمد وشكرا على ثنائك للشرح .. نأمل فى مزيد من العطاء ان شاء الله

    ردحذف
  3. http://www.th4world.com
    سوف اقوم باضافتهم لمدونتي

    ردحذف
  4. @mahmod alasheq

    اهلا وسهلا محمود .. بالتوفيق :)

    ردحذف
  5. شكرا على المجهود يا اخي

    ردحذف
  6. في البداية شكرا على مجهودكم العظيم
    ولكن يااخي العزيز لماذا لايظهر في الادوات المنبثقة للفيس بوك او الجوجل بلس سوى فراغ بدون اي من اسم الحساب فيهن اوحتى رابط للاعجاب او المتابعة

    ردحذف
  7. غير معرف1:52 ص

    يا أخي هدا الكود فاشل جربت على أكتر من مدونة وهو لا يطلع متل هد الدي يضهر عندك فقط حين أضعه يلخبط الدنيا اتمنى أن تضع الكود بطريقة الصحيحة

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

    ردحذف
  9. @اكرم عباد
    الشكر لله عزيزى أكرم
    تأكد يا عزيزى من الارقام التعريفية للفيسبوك وجوجل بلس ويمكنك استخراجهم بالاستعانه بتلك الموضوعات

    http://www.abu-iyad.com/2014/03/find-my-facebook-id.html

    http://www.abu-iyad.com/2014/01/how-do-i-find-your-google-plus-id.html

    بانتظارك وان لم تفلح
    راسلنا عبر صفحة الفيسبوك للتعديل على الكود خاصتك .. كل الحب

    ردحذف
  10. @غير معرف

    الكود يعمل بكفاءة عزيزي .. ان كانت هناك مشاكل به راسلنا عبر صفحة الفيسبوك وستقوم بالتعديل على الكود خاصتك ان شاء الله

    ردحذف
  11. @ahmad bassam

    الطريقة سهلة جدا.. فقط قم بازالة أداة HTML التى قمت باضافة الكود داخلها!

    ردحذف
  12. اخ محمد ...انا نسيت اين وضعتها ...سامحني اذا بثقل عليك ... بس انا شطبت تقريبا كل الادوات من تخطيط ولم تحذف
    ويوجد اداوت لم استطع ان احذفها وكلما افتحها بيطلعلي تهيئه التغذيه

    ردحذف
  13. الكود يحتوي على مشاكل لم اتمكن من معرفتها " التويتر لا يعمل و هنالك تعارض مابين المتصفحات جوجل كروم و فاير فوكس عندما يتم اضافتها
    اتمنى شرح اكثر تفصيلاً للموضوع لانه من اكثر الاكواد طلباً ولكم جزيل الشكر

    ردحذف
  14. @ahmad bassam
    اخي أحمد يمكنك البحث داخل القالب عن تحرير html والبحث عن الكود بالظغط على ctrl +F لا تنسى اخذ نسخة من القالب قبل حذف اي شي + تبع الكود واحذف الكود الموجود في الاعلى فقط

    ردحذف
  15. @Rezan Ali
    الكود يعمل جيدا يمكنك المعاينة من هنا
    http://jsfiddle.net/sweup/Nx8Mx/show/
    اذا لم يعمل معك ارجو توضيح المشكلة التي تواجهك بشكل مفصل اكثر

    ردحذف
  16. غير معرف1:26 م

    شباب الله يعزكم الاضافه وربي كنت ابحث عنها من زماااان تسلمووووا والله
    بس انا واجهت مشكلتان
    الاولى في تويتر اسوي كل شيئ يطلع لي في الموقع بدلا من صندوق تويتر هذه العباره
    Make your own twitter website widget
    المشكلة الثانيه
    في الخلاصات ابيكم تحلوها بسببها تعطل عندي كل شيئ حتى ارتباط المدونه بفيس بوك وتويتر اتمنى تساعدوني اكن شاكر ليكم مررررره
    بالنسبه للمشكله على هالرابط الصوره
    http://2.bp.blogspot.com/-XoUO-Lv1t3g/U8kEEMGQqMI/AAAAAAAABBM/NxmBvCckBHI/s1600/%D8%A8%D8%AF%D9%88%D9%86+%D8%B9%D9%86%D9%88%D8%A7%D9%86.png

    انتظر ردكم على احر من الجمر
    تحياتي

    ردحذف
    الردود
    1. هذه نفس المشاكل التي ظهرت معي ولم اجد جواباً عنها مع انها من افضل الاضافات
      لكنهال لم تعمل بشكل الصحيح

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

      حذف
    3. لدي اقتراح في هذا الموضوع :
      ان يتم حدف هذا البوست و وضع بوست جديد يحتوي على الاكواد الصحيحة متضمناً للشرح و جزاكم الله خيراً صديقكم المخلص ريزان علي .

      حذف

مدونة أبو إياد تصميم بلوجرام جميع الحقوق محفوظة 2016

اعلان مخفى فى الرئيسية