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

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

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

 <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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsGY0syQNdday7Uls-_pprmtutLtFwNe_czIpd9FMbpsLJ4hyqeMMshUvbQnZTHXaP1nZICNtC_0TU3n7fPcUY7EzqFYAH7siU-OuCzLHQbSYcwHpRobpBfhH75Xs_eoMrdR6VyoI5YMCV/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy85y7fU68gx-qqxDPkgx-GqoHtQzG_MMhEYZEEs8q6WOGjh5jR1nI0b9h2FL130itUPo9VMjo6_dNusV_5DFCAQoAi-SWaDmOEhxsQMH_ReefxLZKfa4oT9dHkOEoo2tb-RJdAnzo4kQf/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinaqXHftc_lC7hI5JK0WPhLuUx5xF40Sz3LV_tK2ST4X0zPas8IWCjpsQ4_gLemZmLh2r9fo_IZEO3HYhkFGal1YamFgXyh8ECNSHEp-SQCTdsGoFaggC6AIc2Ad12J1dnuOwVXVa1TFo/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEoQkcjWIu9b6hpu5sqg8hqZ2SWYaomD-Ex3B1Z25S-BTeaws6oj6GUW2dQEg8zAPpl-l88Wy5c6iFP0sPgyp_ytHB4Hw05b8-BMq39ACYK9S1NLk0X2MEs9blnVp96vP3Jpr66jq6udRe/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6k0JEq2Jc8NAiDqaAUG9p15Sq1UOqj14auVEh_xLvGbAOW1nKT8Czv8pwuN2ASESwBdyLgPRTCuQL1qxwm8A8qNDs_ch-ahtU2ogdRfYpylw2QDKtS6S0Zy1s59qFAYSHcabCZXNSnWHh/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg69oIlhnra5-KRNF2GTYUD7pz0rlBtBIqBFh5OAz-uwfkYaNV4NSldCgfOGIGJYHMRQb2oXuMt4vVwBhrL1TKO-u-cOeHAQ9r-ZqyaV7lvCVBRwlmod2tsSMEOnVQ5zRDf48wfgwo81HM/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 به العديد من الإعدادات التى يمكنك تغييرها.

ثالثا : الملون بالبنفسجي الخاص بأداة جوجل بلس:

• قم بتغيير 113815301648155126439 الى رقم معرفك عى جوجل بلس, ولمعرفة الطريقة يمكنك قراءة هذه التدوينة أولا بعنوان طريقة الحصول على رقم معرف ملفك على جوجل بلس لاستخدامه فى إضافات بلوجر[حصريا].

رابعا : الملون بالأحمر الخاص بأداة الاشتراك فى الخلاصات:

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

اضغط على الصورة لتكبيرها

خامسا : الملون بالأخضر الخاص بأداة يوتيوب:

• قم بتغيير engmosha الى اسم معرف قناتك على يوتيوب.

بعد الانتهاء من تعديلك على الكود نأتي لخطوة الإضافة.

1- سجل دخولك الى لوحة تحكم بلوجر

2- الدخول الى تخطيط Layout 

3- إضافة أداة Add a Gadget

4- اختر HTML/JavaScript

5- انسخ الكود والصقه داخلها ثم احفظ Save

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

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