4 نوافذ متحركة صندوق معجبين الفيس بوك مع صندوق محادثة تويتر وزر جوجل +1 والإشتراك بالخلاصات لمدونات بلوجر

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

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

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

4 نوافذ منبثقة صندوق معجبين الفيس بوك مع صندوق محادثة تويتر وزر جوجل +1 والإشتراك بالخلاصات لمدونات بلوجر 

إضافة رائعة لمدونتك خصوصاً إذا كان لا يوجد مكان بمدونتك لإضافات المواقع الإجتماعية الهامة التى تزيد عدد الزوار للموقع
يمكنك إخفاؤهم وإظهارهم بمرور الماوس عليهم بتقنية jQuery slide out hover effect
وقد تطرقت من قبل لطريقة وضع صندوق الإعجاب الثابت للفيس بوك وزر الإعجاب




تتكون الإضافة من 4 نوافذ منبثقة للمواقع الإجتماعية  4×1 وهى
  1. صندوق الفيس بوك العائم  Popup facebook like box
  2. آخر التويتات على موقع تويتر recent tweets
  3. زر جوجل بلس +Google +1 button
  4. الإشتراك بالقائمة البريدية لمتابعة خلاصات الموقع feedburner email subscription

خطوات تركيب السكريبت بمدونات بلوجر:

    1. الذهاب إلى لوحة التحكم
    2. تخطيط أو تصميم
    3. عناصر الصفحة
    4. أضف أداة
    5. اختار Html/Javascript
       ثم إنسخ الكود التالى كاملاً وألصقه 
      <style>
      img,a {
      er: 0; } #on
      bor d{
      visibility: visible; }
      #off {
      ility: hidden; } #face
      visi bbook_div { width: 196px;
      w: hidden; } #twi
      height: 340px; overfl otter_div { width: 246px; height: 353px;
      idth: 152px; heig
      overflow: hidden; } #google_plus_div { wht: 97px; overflow: hidden; margin-left: 50px;
      300px; height: 97
      margin-top: 10px; } #knfeedburner_div { width: px; overflow: hidden; margin-top: 5px; margin-left: -4px; }
      n; }/* right side
      #kakinetwork_div { width: 300px; height: 97px; overflow: hidd estyle */#facebook_right { z-index: 10005; border: 2px solid #3c95d9;
      fixed; right: -200px;
      background-color: #fff; width: 196px; height: 353px; position :} #facebook_right img { position: absolute; top: -2px; left: -35px; }
      ition: static; heigh
      #facebook_right iframe { border: 0px solid #3c95d9; overflow: hidden; po st: 360px; left: -2px; top: -3px; } #twitter_right { z-index: 10004;
      height: 353px; position:
      border: 2px solid #6CC5FF; background-color: #6CC5FF; width: 246px; fixed; right: -250px; } #twitter_right_img { position: absolute; top: -2px; left: -35px;
      lid #006ec9;
      border: 0; } #google_plus_right { z-index: 10003; background-color: #F2F2F2; border: 2px s o border-top: 2px solid #0056a0; border-bottom: 2px solid #0056a0; border-right: 2px solid #0056a0;
      e_plus_right_img { p
      border-left: hidden; width: 152px; height: 97px; position: fixed; right: -154px; } #goog losition: absolute; top: -2px; left: -33px; border: 0; } #feedburner_right { z-index: 10003;
      ttom: 2px solid #5b5b5b; b
      background-color: #fefefe; border: 2px solid #5b5b5b; border-top: 2px solid #5b5b5b; border-b oorder-right: 2px solid #5b5b5b; border-left: hidden; width: 300px; height: 97px; position: fixed; right: -303px; }
      ; border: 2px solid
      #feedburner_right_img { position: absolute; top: -2px; left: -33px; border: 0; } #kakinetwork_right { z-index: 1000 3 #303030; background-color: #fff; width: 300px; height: 97px; position: fixed; } #kakinetwork_right img { position: absolute;
      f; width:
      top: -2px; left: -101px; }/* left side style */#facebook_left { z-index: 10005; border: 2px solid #3c95d9; background-color: #f f196px; height: 353px; position: fixed; left: -200px; } #facebook_left img { position: absolute; top: -2px; right: -35px; }
      } #twitter_left {
      #facebook_left iframe { border: 0px solid #3c95d9; overflow: hidden; position: static; height: 360px; right: -2px; top: -3px; z-index: 10004;
      osition: absolute; top: -2
      border: 2px solid #6CC5FF; background-color: #6CC5FF; width: 246px; height: 353px; position: fixed; left: -250px; } #twitter_left_img { ppx; right: -35px; border: 0; } #google_plus_left { z-index: 10003; background-color: #006ec9; border: 2px solid #006ec9; border-top: 2px solid #0056a0;
      #google_plus_left_img { position:
      border-bottom: 2px solid #0056a0; border-left: 2px solid #0056a0; border-right: hidden; width: 152px; height: 97px; position: fixed; left: -154px; } absolute; top: -2px;
      5b5b; border-
      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 #5 bleft: 2px solid #5b5b5b; border-right: hidden; width: 300px; height: 97px; position: fixed; left: -303px; } #feedburner_left_img { position: absolute; top: -2px; right: -33px;
      ion: absolute;
      border: 0; } #kakinetwork_left { z-index: 10003; border: 2px solid #303030; background-color: #fff; width: 300px; height: 97px; position: fixed; } #kakinetwork_left img { posi t 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*/
      #fff !important; border: 1px solid #d2d
      -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 :2d2; 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; }
      px; padding
      .submitbutton { background: #F2F2F2; 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: 2 5: 0 12px 0 12px; margin: 0 0 0 5px; /*border-radius*/ -webkit-border-radius: 5px; border-radius: 5px; cursor: pointer; } </style><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
      ight: 0}, 500); },function(){ jQuery("#facebook_right").stop(true,false).animate({
      <script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script> <script type="text/javascript">jQuery(document).ready(function(){ jQuery("#facebook_right").hover(function(){ jQuery(this).stop(true,false).animate({
      rright: -200}, 500); }); jQuery("#twitter_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#twitter_right").stop(true,false).animate({right: -250}, 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: -154}, 500); }); jQuery("#feedburner_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#feedburner_right").stop(true,false).animate({right: -303}, 500); }); });</script>
      <div id="on"> <div id="facebook_right" style="top: 18%;"> <div id="facebook_div"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgccOPO9Sj9T08-4_5AjW7JtLfKtedHH0CNYafVfqPUw9ybpJJgT5cEUg8GyO0OkWiPba75SujIDmjqTupwMcCHro5CwVFdNKWkkitb5XXkEk35QjZMCGZIo4Z9vY8XG4dKIiPWr02kNyw/s1600/DrRo2.com-facebook-icon.png" alt=""/> <iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fdesignsblog&amp;width=200&amp;height=346&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:346px;" allowtransparency="true"> </iframe> </div> </div> </div> <div id="on">
      ' }}).render().setUser('DrRo2').start();</s
      <div id="twitter_right" style="top: 35%;"> <div id="twitter_div"> <img id="twitter_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0Lkgp8QsqQuMXyCRaqREH8AGyCQpXAC640xKBpIsCP1m0940JnIGO97NfKBv6NHFSCBdYB-LST56o5FwVeNuMAyvldYlaDs_yL_ZJOMhuxi0FByh8JUxRMr8GVNxSkQOrKqDMLtMqhbg/s1600/DrRo2.com-twitter-icon.png"/> <script src="http://widgets.twimg.com/j/2/widget.js"></script> <script>new TWTR.Widget({version: 2,type: 'profile',rpp: 4,interval: 1000,width: 246,height: 265,theme: {shell: {background: '#63BEFD',color: '#FFFFFF'},tweets: {background: '#FFFFFF',color: '#000000',links: '#47a61e'}},features: { loop: false,live: true,scrollbar: false,hashtags: false,timestamp: true,avatars: true,behavior: 'al lcript> </div> </div> </div> <div id="on"> <div id="google_plus_right" style="top: 52%;"> <div id="google_plus_div"> <img id="google_plus_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjheMJNhRkpGI0l5NqA2X0b83bH_KHXKPfq9WHEg2IJk86nNr6jBcwyVc38JwliaarQcFBvrAVP3UP6Y2FXjdhQzsdSa6xXlnH5l7hQV_7Z8aFpbo9kqhDuQhLGJzjUCm_-Hf0VKbmxrGc/s1600/DrRo2.com-google-plus-icon.png"/> <div style="float:left;margin:10px 10px 10px 0;"> <g:plusone size="tall" expr:href="data:post.url"></g:plusone> </div> </div> </div> <div id="on"> <div id="feedburner_right" style=" top: 69%;"> <div id="knfeedburner_div"> <center> <h4 style="color:#F66303;">You can also receive Free Email Updates:</h4>
      t value="Submit" class="submitbutton" type="submit"/> </form> </center><img id="feedburner_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLTr-LBk0ku3UjtNqTQqtkcAAWJQ-L5mrNDzXnqPqfHlPljPOKi2k51EB5HCzAwUQaPV54smFN2m8Ohug_-isfTlVVkcSH1y1cfmpszfRnRMOggLsUadt83XjnW3d-YRhz0y9pJadvijU/s1600/DrRo2.com-subscribe-icon.png"/> </div> </div> </div> <
      <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogspot/avwdc', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"> <input gtbfieldid="10" class="enteryouremail" name="email" value="Enter your email here..." onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter your email here...&#39;;}" onfocus="if (this.value == &#39;Enter your email here...&#39;) {this.value = &#39;&#39;;}" type="text"/><input value="blogspot/avWDc" name="uri" type="hidden"/><inp u/div> <center/> <a href="http://conda3ianllkhir.blogspot.com/"><img alt="Blogger widget" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNwj6BVhHfQ4D2ANEVlrQytcwArIjpv5Cvd_VuUpHEyvp10BKoWw1N6imdW3Kxynjlq4osjTBlrzTOVHgL4B_cK4gG6xrrMJNeedkXnly2DZdCbf_0KQKqhnf88usvSymf9RTiIvVSPAfV/s89/%25D8%25A8%25D8%25A7%25D8%25AF%25D8%25AC%2520%25D8%25A7%25D9%2584%25D9%2585%25D8%25AF%25D9%2588%25D9%2586%25D8%25A9%2520%25D9%2584%25D8%25A8%25D9%2584%25D9%2588%25D8%25AC%25D8%25B1.png" title="Blogger widget" /></a>
      <center/></center></center>

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

      إستبدل designsblog   بإسم المستخدم الخاص بصفحتك على الفيس بوك facebook fanpage username
      إستبدل  DrRo2  بإسم المستخدم الخاص بحسابك على تويتر مع العلم بأنه مكرر أكثر من مرة  twitter username
      إستبدل blogspot/avWDc   بإسم المستخدم الخاص بخلاصات مدونتك مع العلم بأنه مكرر أكثر من مرة feedburner username

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

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


      أيقونات قلوب 





      <style>
      img,a {
      er: 0; } #on
      bor d{
      visibility: visible; }
      #off {
      ility: hidden; } #face
      visi bbook_div { width: 196px;
      w: hidden; } #twi
      height: 340px; overfl otter_div { width: 246px; height: 353px;
      idth: 152px; heig
      overflow: hidden; } #google_plus_div { wht: 97px; overflow: hidden; margin-left: 50px;
      300px; height: 97
      margin-top: 10px; } #knfeedburner_div { width: px; overflow: hidden; margin-top: 5px; margin-left: -4px; }
      n; }/* right side
      #kakinetwork_div { width: 300px; height: 97px; overflow: hidd estyle */#facebook_right { z-index: 10005; border: 2px solid #3c95d9;
      fixed; right: -200px;
      background-color: #fff; width: 196px; height: 353px; position :} #facebook_right img { position: absolute; top: -2px; left: -35px; }
      ition: static; heigh
      #facebook_right iframe { border: 0px solid #3c95d9; overflow: hidden; po st: 360px; left: -2px; top: -3px; } #twitter_right { z-index: 10004;
      height: 353px; position:
      border: 2px solid #6CC5FF; background-color: #6CC5FF; width: 246px; fixed; right: -250px; } #twitter_right_img { position: absolute; top: -2px; left: -35px;
      lid #006ec9;
      border: 0; } #google_plus_right { z-index: 10003; background-color: #F2F2F2; border: 2px s o border-top: 2px solid #0056a0; border-bottom: 2px solid #0056a0; border-right: 2px solid #0056a0;
      ; } #google_plus_right_img { p
      border-left: 2px solid #0056a0; width: 152px; height: 97px; position: fixed; right: -154p xosition: absolute; top: -2px; left: -33px; border: 0; } #feedburner_right { z-index: 10003; background-color: #fefefe;
      border-left: 2px solid #5b
      border: 2px solid #5b5b5b; border-top: 2px solid #5b5b5b; border-bottom: 2px solid #5b5b5b; border-right: 2px solid #5b5b5b; 5b5b; width: 300px;
      etwork_right {
      height: 97px; position: fixed; right: -303px; } #feedburner_right_img { position: absolute; top: -2px; left: -33px; border: 0; } #kaki n z-index: 10003; border: 2px solid #303030; background-color: #fff; width: 300px; height: 97px; position: fixed; } #kakinetwork_right img {
      olor: #fff; width:
      position: absolute; top: -2px; left: -101px; }/* left side style */#facebook_left { z-index: 10005; border: 2px solid #3c95d9; background- c196px; height: 353px; position: fixed; left: -200px; } #facebook_left img { position: absolute; top: -2px; right: -35px; } #facebook_left iframe {
      r: 2px solid #6CC5FF; back
      border: 0px solid #3c95d9; overflow: hidden; position: static; height: 360px; right: -2px; top: -3px; } #twitter_left { z-index: 10004; bord eground-color: #6CC5FF; width: 246px; height: 353px; position: fixed; left: -250px; } #twitter_left_img { position: absolute; top: -2px; right: -35px; border: 0; }
      lid #0056a0; bo
      #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 s order-right: hidden; width: 152px; height: 97px; position: fixed; left: -154px; } #google_plus_left_img { position: absolute; top: -2px; right: -33px; border: 0; } #feedburner_left {
      width: 300px;
      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; height: 97px;
      fff; width: 300p
      position: fixed; left: -303px; } #feedburner_left_img { position: absolute; top: -2px; right: -33px; border: 0; } #kakinetwork_left { z-index: 10003; border: 2px solid #303030; background-color: #x; height: 97px; position: fixed; } #kakinetwork_left img { position: absolute; top: -2px; right: -101px; } .box-title1 { border: 1px solid #ddd; /*border-radius*/ -webkit-border-radius: 6px; -moz-border-radius: 6px;
      nt; border: 1px sol
      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 !import aid #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 {
      gin: 0 0 0 5px; /*border
      background: #F2F2F2; 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; ma r-radius*/ -webkit-border-radius: 5px; border-radius: 5px; cursor: pointer; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>
      itter_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#twitter_right").stop(true,false).animate({right: -250}, 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: -154}, 500); }); jQuery("#feedburner_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#feedburner_right").stop(true,false).animate({right: -303}, 500); }); });</script> <div id="on"> <div id="facebook_right" style="top: 18%;"> <div id="facebook_div"> <img style="top: -13px; left: -67px;" src="http://download.mrkzy.com/e/1012_md_13366738281.png" alt="" /> <iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fw
      <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: -200}, 500); }); jQuery("#t www.facebook.com%2Fdesignsblog&amp;width=200&amp;height=346&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false" style="border:none; overflow:hidden; width:200px; height:346px;" allowtransparency="true" frameborder="0" scrolling="no"> </iframe> </div> </div> </div> <div id="on"> <div id="twitter_right" style="top: 35%;"> <div id="twitter_div"> <img style="top: -8px; left: -67px;" id="twitter_right_img" src="http://download.mrkzy.com/e/1012_md_13366738293.png" /> <script src="http://widgets.twimg.com/j/2/widget.js"></script> <script>new TWTR.Widget({version: 2,type: 'profile',rpp: 4,interval: 1000,width: 246,height: 265,theme: {shell: {background: '#63BEFD',color: '#FFFFFF'},tweets: {background: '#FFFFFF',color: '#000000',links: '#47a61e'}},features: { loop: false,live: true,scrollbar: false,hashtags: false,timestamp: true,avatars: true,behavior: 'all' }}).render().setUser('DrRo2').start();</script> </div> </div> </div> <div id="on"> <div id="google_plus_right" style="top: 52%;"> <div id="google_plus_div">
      </form> </center><img style="top: 5px; left: -66px;" id="feedburner_right_img" src="http://download.mrkzy.com/e/1012_md
      <img style="top: -5px; left: -67px;" id="google_plus_right_img" src="http://download.mrkzy.com/e/1012_md_13366738282.png" /> <div style="float:left;margin:10px 10px 10px 0;"> <g:plusone size="tall" expr:href="data:post.url"></g:plusone> </div> </div> </div> <div id="on"> <div id="feedburner_right" style=" top: 69%;"> <div id="knfeedburner_div"> <center> <h4 style="color:#F66303;">أدخل البريد الإلكترونى ليصلك الجديد</h4> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogspot/avwdc', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"> <input gtbfieldid="10" class="enteryouremail" name="email" value="Enter your email here..." onblur="if (this.value == '') {this.value = 'enter your email here...';}" onfocus="if (this.value == 'enter your email here...') {this.value = '';}" type="text" /><input value="blogspot/avWDc" name="uri" type="hidden" /><input value="Submit" class="submitbutton" type="submit" /> _13366739821.png" /> </div> </div> </div> </div> <center/>
      <a href="http://conda3ianllkhir.blogspot.com/"><img alt="Blogger widget" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNwj6BVhHfQ4D2ANEVlrQytcwArIjpv5Cvd_VuUpHEyvp10BKoWw1N6imdW3Kxynjlq4osjTBlrzTOVHgL4B_cK4gG6xrrMJNeedkXnly2DZdCbf_0KQKqhnf88usvSymf9RTiIvVSPAfV/s89/%25D8%25A8%25D8%25A7%25D8%25AF%25D8%25AC%2520%25D8%25A7%25D9%2584%25D9%2585%25D8%25AF%25D9%2588%25D9%2586%25D8%25A9%2520%25D9%2584%25D8%25A8%25D9%2584%25D9%2588%25D8%25AC%25D8%25B1.png" title="Blogger widget" /></a>
      <center/></center></center>



      <style>
      img,a {
      er: 0; } #on
      bor d{
      visibility: visible; }
      #off {
      ility: hidden; } #face
      visi bbook_div { width: 196px;
      w: hidden; } #twi
      height: 340px; overfl otter_div { width: 246px; height: 353px;
      idth: 152px; heig
      overflow: hidden; } #google_plus_div { wht: 97px; overflow: hidden; margin-left: 50px;
      300px; height: 97
      margin-top: 10px; } #knfeedburner_div { width: px; overflow: hidden; margin-top: 5px; margin-left: -4px; }
      n; }/* right side
      #kakinetwork_div { width: 300px; height: 97px; overflow: hidd estyle */#facebook_right { z-index: 10005; border: 2px solid #3c95d9;
      fixed; right: -200px;
      background-color: #fff; width: 196px; height: 353px; position :} #facebook_right img { position: absolute; top: -2px; left: -35px; }
      ition: static; heigh
      #facebook_right iframe { border: 0px solid #3c95d9; overflow: hidden; po st: 360px; left: -2px; top: -3px; } #twitter_right { z-index: 10004;
      height: 353px; position:
      border: 2px solid #6CC5FF; background-color: #6CC5FF; width: 246px; fixed; right: -250px; } #twitter_right_img { position: absolute; top: -2px; left: -35px;
      lid #006ec9;
      border: 0; } #google_plus_right { z-index: 10003; background-color: #F2F2F2; border: 2px s o border-top: 2px solid #0056a0; border-bottom: 2px solid #0056a0; border-right: 2px solid #0056a0;
      ; } #google_plus_right_img { p
      border-left: 2px solid #0056a0; width: 152px; height: 97px; position: fixed; right: -154p xosition: absolute; top: -2px; left: -33px; border: 0; } #feedburner_right { z-index: 10003; background-color: #fefefe;
      border-left: 2px solid #5b
      border: 2px solid #5b5b5b; border-top: 2px solid #5b5b5b; border-bottom: 2px solid #5b5b5b; border-right: 2px solid #5b5b5b; 5b5b; width: 300px;
      etwork_right {
      height: 97px; position: fixed; right: -303px; } #feedburner_right_img { position: absolute; top: -2px; left: -33px; border: 0; } #kaki n z-index: 10003; border: 2px solid #303030; background-color: #fff; width: 300px; height: 97px; position: fixed; } #kakinetwork_right img {
      olor: #fff; width:
      position: absolute; top: -2px; left: -101px; }/* left side style */#facebook_left { z-index: 10005; border: 2px solid #3c95d9; background- c196px; height: 353px; position: fixed; left: -200px; } #facebook_left img { position: absolute; top: -2px; right: -35px; } #facebook_left iframe {
      r: 2px solid #6CC5FF; back
      border: 0px solid #3c95d9; overflow: hidden; position: static; height: 360px; right: -2px; top: -3px; } #twitter_left { z-index: 10004; bord eground-color: #6CC5FF; width: 246px; height: 353px; position: fixed; left: -250px; } #twitter_left_img { position: absolute; top: -2px; right: -35px; border: 0; }
      lid #0056a0; bo
      #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 s order-right: hidden; width: 152px; height: 97px; position: fixed; left: -154px; } #google_plus_left_img { position: absolute; top: -2px; right: -33px; border: 0; } #feedburner_left {
      width: 300px;
      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; height: 97px;
      fff; width: 300p
      position: fixed; left: -303px; } #feedburner_left_img { position: absolute; top: -2px; right: -33px; border: 0; } #kakinetwork_left { z-index: 10003; border: 2px solid #303030; background-color: #x; height: 97px; position: fixed; } #kakinetwork_left img { position: absolute; top: -2px; right: -101px; } .box-title1 { border: 1px solid #ddd; /*border-radius*/ -webkit-border-radius: 6px; -moz-border-radius: 6px;
      nt; border: 1px sol
      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 !import aid #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 {
      gin: 0 0 0 5px; /*border
      background: #F2F2F2; 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; ma r-radius*/ -webkit-border-radius: 5px; border-radius: 5px; cursor: pointer; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>
      itter_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#twitter_right").stop(true,false).animate({right: -250}, 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: -154}, 500); }); jQuery("#feedburner_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#feedburner_right").stop(true,false).animate({right: -303}, 500); }); });</script> <div id="on"> <div id="facebook_right" style="top: 18%;"> <div id="facebook_div"> <img style="top: 10px; left: -44px; width: 42px; height: 61px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeLk45WAUYAdtye7Cl1Vkx275y6PAOm8qA4AEFhdiv6NuQUORAm73N0ZfZYVOf6XAmbehY0O1YjdkDhLeJ-XKasSMoppjxWB5gfwJpzE_r2jgZenq-tAOxzMZQP456cSgyDI0s5C6DH9_k/s66/facebook-47x66.png" alt=
      <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: -200}, 500); }); jQuery("#t w"" /> <iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fdesignsblog&amp;width=200&amp;height=346&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false" style="border:none; overflow:hidden; width:200px; height:346px;" allowtransparency="true" frameborder="0" scrolling="no"> </iframe> </div> </div> </div> <div id="on"> <div id="twitter_right" style="top: 35%;"> <div id="twitter_div"> <img style="top: 14px; left: -44px; width: 42px; height: 62px;" id="twitter_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcF0A7gmsWNj0vMizuUrglSsNTLrOpoCE5utt5P7mxWZ_WTeXX2yH_eG2SMPhB-pykN-XP0C_vKZ67l3kd9wDrDlVHyn8Nx549Vp5-__pWEhYbyAdyjqUksntm_vdZltLGyxyHEQqYRjAY/s66/tumblr-47x66.png" /> <script src="http://widgets.twimg.com/j/2/widget.js"></script> <script>new TWTR.Widget({version: 2,type: 'profile',rpp: 4,interval: 1000,width: 246,height: 265,theme: {shell: {background: '#63BEFD',color: '#FFFFFF'},tweets: {background: '#FFFFFF',color: '#000000',links: '#47a61e'}},features: { loop: false,live: true,scrollbar: false,hashtags: false,timestamp: true,avatars: true,behavior: 'all' }}).render().setUser('DrRo2').start();</script>
      e...') {
      </div> </div> </div> <div id="on"> <div id="google_plus_right" style="top: 52%;"> <div id="google_plus_div"> <img style="top: 11px; left: -41px; width: 42px; height: 61px;" id="google_plus_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiblMIDIBhNPM8VczBeE2Gz1-NrLWTITsY8h91xFdnSPCECrDq-BatHm9HzOGxdvH_qXx79LztPewHucPc_hIl33MA95Hm012wThDB78pIRAZBh-hsFM8pnfkKoCN5kOzYOeFb2yRchrFWn/s66/googleplus-47x66.png" /> <div style="float:left;margin:10px 10px 10px 0;"> <g:plusone size="tall" expr:href="data:post.url"></g:plusone> </div> </div> </div> <div id="on"> <div id="feedburner_right" style=" top: 69%;"> <div id="knfeedburner_div"> <center> <h4 style="color:#F66303;">أدخل البريد الإلكترونى ليصلك الجديد</h4> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogspot/avwdc', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"> <input gtbfieldid="10" class="enteryouremail" name="email" value="Enter your email here..." onblur="if (this.value == '') {this.value = 'enter your email here...';}" onfocus="if (this.value == 'enter your email he rthis.value = '';}" type="text" /><input value="blogspot/avWDc" name="uri" type="hidden" /><input value="Submit" class="submitbutton" type="submit" /> </form> </center><img style="top: 17px; left: -42px; width: 42px; height: 61px;" id="feedburner_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC-y0LTWkoscHPYoFJ4Fonr7-ZSk7_UjUdd7Fe3M2SBlRzRZjsNg-bf3PlTtEi6WvJYmmBaSF-za1GN1DoVb8-AviskDPVaEsCgTwkXTZrbqVVetoSai96ysVy5f23rQ6OOGPN0_K8SjxJ/s66/rss-47x66.png" /> </div> </div> </div> </div> <center/> <a href="http://conda3ianllkhir.blogspot.com/"><img alt="Blogger widget" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNwj6BVhHfQ4D2ANEVlrQytcwArIjpv5Cvd_VuUpHEyvp10BKoWw1N6imdW3Kxynjlq4osjTBlrzTOVHgL4B_cK4gG6xrrMJNeedkXnly2DZdCbf_0KQKqhnf88usvSymf9RTiIvVSPAfV/s89/%25D8%25A8%25D8%25A7%25D8%25AF%25D8%25AC%2520%25D8%25A7%25D9%2584%25D9%2585%25D8%25AF%25D9%2588%25D9%2586%25D8%25A9%2520%25D9%2584%25D8%25A8%25D9%2584%25D9%2588%25D8%25AC%25D8%25B1.png" title="Blogger widget" /></a>
      <center/></center></center>

      أيقونات سحاب



      <style>
      img,a {
      er: 0; } #on
      bor d{
      visibility: visible; }
      #off {
      ility: hidden; } #face
      visi bbook_div { width: 196px;
      w: hidden; } #twi
      height: 340px; overfl otter_div { width: 246px; height: 353px;
      idth: 152px; heig
      overflow: hidden; } #google_plus_div { wht: 97px; overflow: hidden; margin-left: 50px;
      300px; height: 97
      margin-top: 10px; } #knfeedburner_div { width: px; overflow: hidden; margin-top: 5px; margin-left: -4px; }
      n; }/* right side
      #kakinetwork_div { width: 300px; height: 97px; overflow: hidd estyle */#facebook_right { z-index: 10005; border: 2px solid #3c95d9;
      fixed; right: -200px;
      background-color: #fff; width: 196px; height: 353px; position :} #facebook_right img { position: absolute; top: -2px; left: -35px; }
      ition: static; heigh
      #facebook_right iframe { border: 0px solid #3c95d9; overflow: hidden; po st: 360px; left: -2px; top: -3px; } #twitter_right { z-index: 10004;
      height: 353px; position:
      border: 2px solid #6CC5FF; background-color: #6CC5FF; width: 246px; fixed; right: -250px; } #twitter_right_img { position: absolute; top: -2px; left: -35px;
      lid #006ec9;
      border: 0; } #google_plus_right { z-index: 10003; background-color: #F2F2F2; border: 2px s o border-top: 2px solid #0056a0; border-bottom: 2px solid #0056a0; border-right: 2px solid #0056a0;
      ; } #google_plus_right_img { p
      border-left: 2px solid #0056a0; width: 152px; height: 97px; position: fixed; right: -154p xosition: absolute; top: -2px; left: -33px; border: 0; } #feedburner_right { z-index: 10003; background-color: #fefefe;
      border-left: 2px solid #5b
      border: 2px solid #5b5b5b; border-top: 2px solid #5b5b5b; border-bottom: 2px solid #5b5b5b; border-right: 2px solid #5b5b5b; 5b5b; width: 300px;
      etwork_right {
      height: 97px; position: fixed; right: -303px; } #feedburner_right_img { position: absolute; top: -2px; left: -33px; border: 0; } #kaki n z-index: 10003; border: 2px solid #303030; background-color: #fff; width: 300px; height: 97px; position: fixed; } #kakinetwork_right img {
      olor: #fff; width:
      position: absolute; top: -2px; left: -101px; }/* left side style */#facebook_left { z-index: 10005; border: 2px solid #3c95d9; background- c196px; height: 353px; position: fixed; left: -200px; } #facebook_left img { position: absolute; top: -2px; right: -35px; } #facebook_left iframe {
      r: 2px solid #6CC5FF; back
      border: 0px solid #3c95d9; overflow: hidden; position: static; height: 360px; right: -2px; top: -3px; } #twitter_left { z-index: 10004; bord eground-color: #6CC5FF; width: 246px; height: 353px; position: fixed; left: -250px; } #twitter_left_img { position: absolute; top: -2px; right: -35px; border: 0; }
      lid #0056a0; bo
      #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 s order-right: hidden; width: 152px; height: 97px; position: fixed; left: -154px; } #google_plus_left_img { position: absolute; top: -2px; right: -33px; border: 0; } #feedburner_left {
      width: 300px;
      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; height: 97px;
      fff; width: 300p
      position: fixed; left: -303px; } #feedburner_left_img { position: absolute; top: -2px; right: -33px; border: 0; } #kakinetwork_left { z-index: 10003; border: 2px solid #303030; background-color: #x; height: 97px; position: fixed; } #kakinetwork_left img { position: absolute; top: -2px; right: -101px; } .box-title1 { border: 1px solid #ddd; /*border-radius*/ -webkit-border-radius: 6px; -moz-border-radius: 6px;
      nt; border: 1px sol
      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 !import aid #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 {
      gin: 0 0 0 5px; /*border
      background: #F2F2F2; 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; ma r-radius*/ -webkit-border-radius: 5px; border-radius: 5px; cursor: pointer; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>
      itter_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#twitter_right").stop(true,false).animate({right: -250}, 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: -154}, 500); }); jQuery("#feedburner_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#feedburner_right").stop(true,false).animate({right: -303}, 500); }); });</script> <div id="on"> <div id="facebook_right" style="top: 18%;"> <div id="facebook_div"> <img style="top: -13px; left: -67px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzEu5Mm3ijFa6fo5wPIbKCE0zZa2f0P_nHkaeX0BYniF_C7T0mHuFEnemqvBVzQE8nfgfyyfUkJ-5OanVbh2-tuXkyOQ8zlnn2LLcLLVVJ6pflgQvjNbm7OQYLqaQjYCTBE7tXdQve9lcs/s60/facebook_cloud.png" alt="" /> <iframe src="//ww
      <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: -200}, 500); }); jQuery("#t ww.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fdesignsblog&amp;width=200&amp;height=346&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false" style="border:none; overflow:hidden; width:200px; height:346px;" allowtransparency="true" frameborder="0" scrolling="no"> </iframe> </div> </div> </div> <div id="on"> <div id="twitter_right" style="top: 35%;"> <div id="twitter_div"> <img style="top: -8px; left: -67px;" id="twitter_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixeoDOJC8zQ4dvkwbJBNvXfQFn6chOrbPhp1wv0siBcj42Fl_XZdKnjn4UiVaV7Cc8YuqFsYjBSiLfDgJlZbzl4duHbi6B381c8YK3R5o1H1dG_0sGx8jrWZNmQgMOGqbZXtpHOh3RLVhL/s60/twitter_cloud.png" /> <script src="http://widgets.twimg.com/j/2/widget.js"></script> <script>new TWTR.Widget({version: 2,type: 'profile',rpp: 4,interval: 1000,width: 246,height: 265,theme: {shell: {background: '#63BEFD',color: '#FFFFFF'},tweets: {background: '#FFFFFF',color: '#000000',links: '#47a61e'}},features: { loop: false,live: true,scrollbar: false,hashtags: false,timestamp: true,avatars: true,behavior: 'all' }}).render().setUser('DrRo2').start();</script> </div> </div> </div> <div id="on">
      vWDc" name="uri" type="hidden" /><input value=
      <div id="google_plus_right" style="top: 52%;"> <div id="google_plus_div"> <img style="top: -5px; left: -67px;" id="google_plus_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1o6rImjFYYwLcR97kOCuBxvTQBKxIrDlITQG1Sy6MRrr3z_0BP8jl4Ht8q8gq2rDYys-MvYWMXH1FOe6pGokG47xjNZNERE6PvFtSoEJgNrfnsnBTrC0UZ72KENqTlhlU8t0Tm9-dMEyF/s60/google.png" /> <div style="float:left;margin:10px 10px 10px 0;"> <g:plusone size="tall" expr:href="data:post.url"></g:plusone> </div> </div> </div> <div id="on"> <div id="feedburner_right" style=" top: 69%;"> <div id="knfeedburner_div"> <center> <h4 style="color:#F66303;">أدخل البريد الإلكترونى ليصلك الجديد</h4> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogspot/avwdc', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"> <input gtbfieldid="10" class="enteryouremail" name="email" value="Enter your email here..." onblur="if (this.value == '') {this.value = 'enter your email here...';}" onfocus="if (this.value == 'enter your email here...') {this.value = '';}" type="text" /><input value="blogspot/ a"Submit" class="submitbutton" type="submit" /> </form> </center><img style="top: 5px; left: -66px;" id="feedburner_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZXSk4iK-DHMb6B-C7i1vKoMm0YR7DuEtNYk6KL43UDHsh2_W3tI-OmH_i5Jka3aGDkQU-lYNHhmFx9QD447TBnii44XgqvuommGnwgpa0w42geEfb9CrHKiVtQpXqNzw1KufmSnEdwVWA/s60/feed_cloud.png" /> </div> </div> </div> </div> <center/> <a href="http://conda3ianllkhir.blogspot.com/"><img alt="Blogger widget" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNwj6BVhHfQ4D2ANEVlrQytcwArIjpv5Cvd_VuUpHEyvp10BKoWw1N6imdW3Kxynjlq4osjTBlrzTOVHgL4B_cK4gG6xrrMJNeedkXnly2DZdCbf_0KQKqhnf88usvSymf9RTiIvVSPAfV/s89/%25D8%25A8%25D8%25A7%25D8%25AF%25D8%25AC%2520%25D8%25A7%25D9%2584%25D9%2585%25D8%25AF%25D9%2588%25D9%2586%25D8%25A9%2520%25D9%2584%25D8%25A8%25D9%2584%25D9%2588%25D8%25AC%25D8%25B1.png" title="Blogger widget" /></a>
      <center/></center></center>

      ملحوظة: لإضافة هذه الإضافة جهة اليسار إضغط على الزر الذى بالأسفل لإدراج الكود لموقعك مع مراعاة تغيير الروابط بما يناسب مدونتك 





      kol-gdeeed