دليل المدون

2014-01-03

أضف 5 صناديق منزلقة لمتابعة الشبكات الإجتماعية لموقعك

بسم الله الرحمن الرحيم

والصلاة والسلام على أشرف المرسلين

سيدنا محمد وعلى آله وصحبه أجمعين

أقدم لكم إضافة من إضافات بلوجر تهم معظم أصحاب المدونات وهى النوافذ المنزلقة للمواقع الإجتماعية تظهر بجانب الموقع وقد قدمت من قبل هذه الإضافة بتقنية jQuery لأربع شبكات إجتماعية فقط وهى (متابعين الفيس بوك , صندوق تغريدات تويتر, زر +1 لجوجل بلس , الإشتراك عبر البريد الإلكترونى) ولكن اليوم أقدمها بشكل مختلف حيث تحتوى على 5 صناديق منزلقة لمتابعين المواقع الإجتماعية (الفيس بوك,تويتر,يوتيوب,جوجل بلس,خدمة البريد الإلكترونى) تظهر بمرور الماوس على الأيقونة الجانبية بالموقع.


مميزات الإضافة

  1. هذه الإضافة مفيدة فى زيادة عدد متابعين المدونة على المواقع الإجتماعية.
  2. تقلل من إزدحام الإضافات بالأعمدة الجانبية.
  3. تظهر دون مشاكل على أنظمة الأندرويد
  4. الإضافة تظهر بمظهر رائع للزائر.
  5. سهلة التركيب إلى موقعك
social slider boxes

معاينة الإضافة

كيفية تركيب الإضافة لمدونات بلوجر

  1. الذهاب إلى لوحة التحكم
  2. تخطيط
  3. أضف أداة
  4. اختار Html/Javascript
 ثم إنسخ الكود التالى كاملاً وألصقه



<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-right: 5px;    margin-top: 1px;  }  #CONfeedburner_div {    width: 300px;    height: 120px;    overflow: hidden;    margin-top: 5px;    margin-right: -4px;  }  #CON_div {    width: 300px;    height: 97px;    overflow: hidden;  }  /* left side style */   #facebook_right {    z-index: 10005;    border: 2px solid #3c95d9;    background-color: #fff;    width: 235px;    height: 236px;    position: fixed;    left: -239px;  }  #facebook_right img {    position: absolute;    top: -1px;    right: -65px;  }  #facebook_right iframe {    border: 0px solid #3c95d9;    overflow: hidden;    position: static;    height: 236px;    right: -2px;    top: -3px;  }  #twitter_right {    z-index: 10004;    border: 2px solid #6CC5FF;    background-color: #6CC5FF;    width: 250px;    height: 240px;    position: fixed;    left: -254px;  }  #twitter_right_img {    position: absolute;    top: -1px;    right: -65px;    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-left: 2px solid #0056a0;    border-right: 2px solid #0056a0;    width: 290px;    height: 250px;    position: fixed;    left: -294px;  }  #google_plus_right_img {    position: absolute;    top: -1px;    right: -65px;    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;    left: -304px;  }  #feedburner_right_img {    position: absolute;    top: -1px;    right: -65px;    border: 0;  }  #CON_right {    z-index: 10003;    border: 2px solid #303030;    background-color: #fff;    width: 300px;    height: 97px;    position: fixed;  }  #CON_right img {    position: absolute;    top: -1px;    right: -65px;  }  /* right side style */   #facebook_left {    z-index: 10005;    border: 2px solid #3c95d9;    background-color: #fff;    width: 235px;    height: 236px;    position: fixed;    right: -239px;  }  #facebook_left img {    position: absolute;    top: -2px;    left: -35px;  }  #facebook_left iframe {    border: 0px solid #3c95d9;    overflow: hidden;    position: static;    height: 236px;    left: -2px;    top: -3px;  }  #twitter_left {    z-index: 10004;    border: 2px solid #6CC5FF;    background-color: #6CC5FF;    width: 246px;    height: 240px;    position: fixed;    right: -254px;  }  #twitter_left_img {    position: absolute;    top: -2px;    left: -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-right: 2px solid #0056a0;    border-left: 2px solid #0056a0;    width: 290px;    height: 120px;    position: fixed;    right: -294px;  }  #google_plus_left_img {    position: absolute;    top: -2px;    left: -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-right: 2px solid #5b5b5b;    border-left: hidden;    width: 300px;    height: 97px;    position: fixed;    right: -304px;  }  #feedburner_left_img {    position: absolute;    top: -2px;    left: -33px;    border: 0;  }  #CON_left {    z-index: 10003;    border: 2px solid #303030;    background-color: #fff;    width: 300px;    height: 97px;    position: fixed;  }  #CON_left img {    position: absolute;    top: -2px;    left: -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;    left: -304px;  }  #youtube_right_img {    position: absolute;    top: -1px;    right: -65px;    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(          {            left: 0          },          500);      },      function ()      {        jQuery("#facebook_right").stop(          true,          false).animate(          {            left: -239          },          500);      });    jQuery("#twitter_right").hover(      function ()      {        jQuery(this).stop(true,          false).animate(          {            left: 0          },          500);      },      function ()      {        jQuery("#twitter_right").stop(          true,          false).animate(          {            left: -254          },          500);      });    jQuery("#google_plus_right").hover(      function ()      {        jQuery(this).stop(true,          false).animate(          {            left: 0          },          500);      },      function ()      {        jQuery("#google_plus_right").stop(          true,          false).animate(          {            left: -294          },          500);      });    jQuery("#feedburner_right").hover(      function ()      {        jQuery(this).stop(true,          false).animate(          {            left: 0          },          500);      },      function ()      {        jQuery("#feedburner_right").stop(          true,          false).animate(          {            left: -304          },          500);      });    jQuery("#youtube_right").hover(      function ()      {        jQuery(this).stop(true,          false).animate(          {            left: 0          },          500);      },      function ()      {        jQuery("#youtube_right").stop(          true,          false).animate(          {            left: -304          },          500);      });  });  </script>      <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/AVvXsEgVe0R2Mg6KSyYnYm90EupVPa1POePPxdcLsS5FjqJKJhaChcWszxUaRH5oFQ_e5TXWhVc1ClKzZ9PUYlMAYj2So6Z68OBMazOfK-jd-rg07XYElu_AuXZNjZ_O5j8XffQejK5rdVeT_-8q/w80-h102-no/fb.png"        />        <iframe allowtransparency="true" frameborder="0"        scrolling="no" src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fdesignsblog&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>  <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/AVvXsEhl6Bqk9StLAzG5UoGdcK0TYeurnu3hXAnjqCzmH0ooN7ZvzDD4fbrLegdqPg0oED6u5Tr-pm9g5E4N8WetoaFnSBSbT-yHUsakmv_CNLkHcylUSxXmFfK4jKJPTnUKaFLb94Gewu0zO8rh/w80-h103-no/twitter.png"        />        <div style="width:248px;font-size:8px;text-align:left;">          <div id="twitter-box"></div> <script> var tw_user = 'DrRo2'; var tw_width = 301; var tw_height = 325; var no_face = 9; (function() { var tw_box = document.createElement('script'); tw_box.type = 'text/javascript'; tw_box.async = true; tw_box.src = '//www.twitter-fanbox.com/tw.js'; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(tw_box); })(); </script>      <a href="http://NewBloggerTips.com"          target="_blank"></a>        </div>      </div>    </div>  </div>  <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/AVvXsEiNtXtZmmr2wojPiQptghE8bewe1LSSLw4a1vSIsjoH-6o0xj-9VXZzGafewSZIP-_AsSl0eaZxl3q359-SpJ_i9gxD1j0XiUY_JFanunpaN1VfxCzXCaH0mZaKZk9T1RebLG5pDxRPdv_4/w80-h103-no/google%252B1.png"        />        <div style="float: right; margin: 10px 10px 10px 0;">          <a href='http://newbloggertips.com'>            <img alt='Tips Tricks And Tutorials'            src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuee-EzrFwe0qjmZ6rca_t9M3gC9II_AquoaLItXHZfyjaEpS8xpuIKgc418SkaynQ6YOEiOnRGYWWcNEQP63jyI7fYkL214QGdVupLQLqz9UcfYunUGHoeJSyeAjB2Fs2iBNKM_IUkdxe/s1600/best+blogger+tips.png'            />          </a>          <div class="g-plus" data-action="followers"          data-height="250" data-href="https://plus.google.com/+Condaianllkhir"          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="CONfeedburner_div">          <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=condaianllkhir/DrRO', '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="Enter your email here..."              />              <input name="uri" type="hidden"              value="condaianllkhir/DrRO" />              <input class="submitbutton" type="submit"              value="Submit" />            </form>          </center>          <img id="feedburner_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw1FdJhS2ogjd1QjD4GiKgh7Dhg8gH_B9QtqUERc47jfwWyHqsSN_X7bk2PRbTqIH0ciId6H9q4GExemfNQNUZEmln3n6ecOXinf5o5L_klPvDdeZ1vJFrIZ-ttQhyphenhyphenszDpxd1lRDCSkVlF/w80-h103-no/rss.png"          />          <div style="float: left; padding: 20px; margin: 0px;"> <span style="font-size:10px;">Widget by <a href="http://www.condaianllkhir.com/"rel="nofollow" target="_blank">condaianllkhir</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/AVvXsEi6Wgnba2eI2L01Of92O-ZxQl2-BIs1iCrTfWPXylshqtf1aQNkJa4ZCKchhHDaAchVsjt7485bkj5L3HmuG8S6IJxWJGeilkQJx7_irsa_NnReaA0QOEE67RdK2bKzyHk8jpjnPwrJ1HsF/w80-h103-no/youtube.png "            />            <div style="float:right;margin:1px 0px 0px 2px;">              <iframe src=http://www.youtube.com/subscribe_widget?p=designs9              style="height:105px;width:300px;border:0;"              scrolling="no" frameborder="0"></iframe>            </div>          </div>        </div>      </div></div></div>

للتعديل على الكود إستخدم البحث بالكيبورد Ctrl+F

إستبدل designsblog   بإسم المستخدم الخاص بصفحتك على الفيس بوك facebook fanpage username
إستبدل  DrRo2  بإسم المستخدم الخاص بحسابك على تويتر   twitter username
إستبدل  +Condaianllkhir  بإسم المستخدم الخاص بحسابك على جوجل بلس 
إستبدل condaianllkhir/DrRO   بإسم المستخدم الخاص بخلاصات مدونتك مع العلم بأنه مكرر أكثر من مرة feedburner username
إستبدل  designs9 بإسم المستخدم الخاص بقاتك على اليوتيوب

تحديث: بالنسبة لحل مشكلة عدم ظهور صندوق متابعى تويتر

تم تحديث الكود بإنشاء الأداة من خلال هذا الموقع مع العلم بأنه ليس الموقع الرسمى لأدوات تويتر فهو تطبيق من إنشاءMusicPaax 
لذلك يستلزم ربط موقعك بالتطبيق وذلك بتسجيل الدخول لحسابك على تويتر عبر التطبيق كما بالصورة
  ثم التعديل على الكود السابق ونسخه الى موقعك كما يلى:
إستبدل  DrRo2  بإسم المستخدم الخاص بحسابك على تويتر   twitter username

تنبيه : المرجو عدم نسخ الموضوع بدون ذكر مصدره المرفق بالرابط المباشر للموضوع الأصلي وإسم المدونة وشكرا 
تصميم مواقع إلكترونية و تطبيقات بأقل الأسعار

هناك 27 تعليقًا

  1. مدونه رائعه

    ردحذف
  2. لو سمحتي يا أختي
    عندي استفسار بسيط خارج هذا الموضوع
    بالنسبة لزر add to blogger
    اريد كيفية انشاؤه ؟
    وشكراً جزيلاً مقدماً

    ردحذف
  3. @ عبدالرحمن الأمير أبوحنين
    سأعد موضوع بهذا الشأن فى القريب بإذن الله
    شكرا لمتابعتك

    ردحذف
  4. الشكرلله يا أختي
    وشكرك أنتي واجب علي مجهودك الرائع
    بالإنتظار

    ردحذف
  5. في كود التويتر و اليوتيوب ما بيظهر شئ ؟ ارجو المساعده

    ردحذف
  6. mahmoud elhanafi
    تأكد من نسخ الكود بالكامل
    شكرا لمتابعتك

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

    ردحذف
  8. @ Mohammed El-Etrebi
    لجعل الاضافة تظهر من اليمين استبدل left بالكود الى right والعكس استبدل كل right بـ left
    ، فى هذا الموضوع يوجد كود لاخفاء الادوات من الصفحة الرئيسية
    http://www.condaianllkhir.com/2013/05/related-posts.html

    ردحذف
  9. لقد ظهرت كلها ماعدى التويتر لم يظهر شي فيها ظهرت العباره التاليه
    Make your own twitter website widget

    ارجوا المساعده وشكرا لك اختي و شكرا على كل شي

    ردحذف
  10. @ H. BERMUDA
    أعد نسخ الكود وتـأكد من تغيير اسم المستخدم وشكرا

    ردحذف
  11. شكرا لك لكن كما قال الاخ H. BERMUDA كود تويتر لايعمل وجربت على عدة حسابات نفس المشكلة التي ذكرها الاخ وهي رسالة Make your own twitter website widget
    حتى دخلت على موقع twitterforweb حاولت اعمل الكود من الموقع لم ينفع
    ارجو منك التاكد من الكود وتجربة حساب تويتر ثاني
    ننتظر الحل
    وشكرا لك اختي

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

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

    ردحذف
  14. مجهود رائع جزاكم الله خيرا
    أتشرف بزيارتكم♥
    http://abeersabeel.blogspot.com/

    ردحذف
  15. الاضافات ظاهرة بس كلهم فاضين لو سمحت انا عايز الاضافة علي هذا الشكل مكان روابطي تكتب با لعربي
    Please Please Please
    مثال
    src='http://twitterforweb.c= رابط تويتر هنا &settings=0,1,2,248,279
    src='http://twitterforweb.c= رابط الفيس هنا &settings=0,1,2,248,279

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

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

    ردحذف
  18. لقد تم تحديث الكود لحل مشكلة عدم ظهور صندوق متابعين تويتر وتم شرح كيفية التغلب على هذه المشكلة بالموضوع

    @ishak younes
    الإضافة تعمل بتقنية jQuery فقد يوجد تعارض أكواد إذا وجدت إضافة أخرى بقالب موقعك تعمل بهذه التقنية
    @ محمد ماهر
    لعمل الإضافة بشكل سليم يجب إستبدال إسم المستخدم لكل من : الفيس بوك ، تويتر،جوجل بلس، يوتيوب، فيدبرنر بإسم المستخدم الخاص بك

    ردحذف
  19. شكرا لكي اختيDr R.O علي مجهودك الاكثر من رائع لقد تم الاضافة بنجاح لاكن اليوتيوب لا يظهر فيه شييء ما الحل

    ردحذف
  20. @ mohamed maher
    يمكن إنشاء كود اليوتيوب الخاص بك من هذا الموقع إضافات اليوتيوب ثم إستبدل الكود النتاتج بكود اليوتيوب فى الإضافة

    ردحذف
  21. شكرا لكي Dr R.O بس ياريت لو تعملي شرح مفصل لاداة اليوتيوب لانها ملغبطة شويه وجزاك الله كل خير

    ردحذف
  22. شكراا على الموضوع الرائع الاضافة شغالة هذا رابط المدونة لمن لم يثق www.topanimehd.com

    ردحذف
  23. من فضلك هل تنفع هذه الإضافة للوردبرس؟

    ردحذف
  24. @ mohamed maher
    سأحاول الفترة القادمة بإذن الله تقديم شرح لإضافة أدوات اليوتيوب
    @ abderrahim achtouk
    شكرا لمتابعتك
    @alzekr alhakeem
    أعتقد أنها مناسبة لأى أداة Html ولكن ليس لدى خبرة بالوورد بريس

    ردحذف
  25. اريد اخفاء هذا الجزء المظلل ب الاصفر في الصورة كيف ؟؟
    http://im84.gulfup.com/xC2ckp.png

    ردحذف
  26. @ mouhammad omar
    يمكن ذلك من خلال إنشاء صندوق المتابعين على تويتر من خلال هذا الموقع http://www.twitter-fanbox.com/ وربطه بحسابك

    ردحذف

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

Privacy-Policy | إعلن لدينا
جميع الحقوق محفوظة لــ كن داعيا للخير 2011-2022 ©

تصميم كن مدون