اضافة ازرار المواقع الاجتماعية بشكل احترافى ورائع

السلام عليكم ورحمة الله وبركاته

اليوم احبابى متابعى مدونة " محمود ذيهان " اقدم لكم اضافة رائعة ولا غنى عنها فى مدوناتنا ومواقعنا ، وهى ازرار جانبية للمتبعة المواقع الاجتماعية بشكل احترافى ورائع ومتحرك .

طريقة الاضافة 

• اولا اذهب الى التخطيط واختار Html/Javascript
• وضع الكود التالى فى الاداة الجديدة

<style>
img,a {
    border: 0;
}

#on {
    visibility: visible;
}

#off {
    visibility: hidden;
}

#facebook_div {
    width: 196px;
    height: 340px;
    overflow: hidden;
}

#twitter_div {
    width: 246px;
    height: 250px;
    overflow: hidden;
}

#google_plus_div {
    width: 152px;
    height: 97px;
    overflow: hidden;
    margin-left: 50px;
    margin-top: 10px;
}

#knfeedburner_div {
    width: 300px;
    height: 97px;
    overflow: hidden;
    margin-top: 5px;
    margin-left: -4px;
}

#kakinetwork_div {
    width: 300px;
    height: 97px;
    overflow: hidden;
}/* right side style */#facebook_right {
    z-index: 10005;
    border: 2px solid #3c95d9;
    background-color: #fff;
    width: 196px;
    height: 353px;
    position: fixed;
    right: -200px;
}

#facebook_right img {
    position: absolute;
    top: -2px;
    left: -35px;
}

#facebook_right iframe {
    border: 0px solid #3c95d9;
    overflow: hidden;
    position: static;
    height: 360px;
    left: -2px;
    top: -3px;
}

#twitter_right {
    z-index: 10004;
    border: 2px solid #6CC5FF;
    background-color: #6CC5FF;
    width: 246px;
    height: 250px;
    position: fixed;
    right: -250px;
}

#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: hidden;
    width: 152px;
    height: 97px;
    position: fixed;
    right: -154px;
}

#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: -303px;
}

#feedburner_right_img {
    position: absolute;
    top: -2px;
    left: -33px;
    border: 0;
}

#kakinetwork_right {
    z-index: 10003;
    border: 2px solid #303030;
    background-color: #fff;
    width: 300px;
    height: 97px;
    position: fixed;
}

#kakinetwork_right img {
    position: absolute;
    top: -2px;
    left: -101px;
}/* left side style */#facebook_left {
    z-index: 10005;
    border: 2px solid #3c95d9;
    background-color: #fff;
    width: 196px;
    height: 353px;
    position: fixed;
    left: -200px;
}

#facebook_left img {
    position: absolute;
    top: -2px;
    right: -35px;
}

#facebook_left iframe {
    border: 0px solid #3c95d9;
    overflow: hidden;
    position: static;
    height: 360px;
    right: -2px;
    top: -3px;
}

#twitter_left {
    z-index: 10004;
    border: 2px solid #6CC5FF;
    background-color: #6CC5FF;
    width: 246px;
    height: 353px;
    position: fixed;
    left: -250px;
}

#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: hidden;
    width: 152px;
    height: 97px;
    position: fixed;
    left: -154px;
}

#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: -303px;
}

#feedburner_left_img {
    position: absolute;
    top: -2px;
    right: -33px;
    border: 0;
}

#kakinetwork_left {
    z-index: 10003;
    border: 2px solid #303030;
    background-color: #fff;
    width: 300px;
    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;
    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: #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;
    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>
<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({right:  0}, 500); },function(){ jQuery("#facebook_right").stop(true,false).animate({right: -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/AVvXsEgi8BjVhmZR9ZmGC_JsFaELlZt_wFw2cRJG644yzePkDRrThpIzNEHjbn9ZIrulTjXri6EpMqhV0oWgNH3Fm7mfouVrrN-jrT3aZp4lXdnqDEXIW59thvGCXaexpPSxvmCehtxuntCWXHM/s1600/DrRo2.com-facebook-icon.png" alt=""/>
   <iframe src="//www.facebook.com/plugins/likebox.php?href=رابط صفحتك في الفيس بوك هنا&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">
 <div id="twitter_right" style="top: 35%;">
  <div id="twitter_div">
   <img id="twitter_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_b8GayPctW-txuYDwSvOd-FrnVPm9x3EpTobx3hrN6BceJM-_88V47UuNKzOlbuj8jDK_Y2J_GVooJpK1vQPOVS11Ntw7_NraWC1EpdWpJQ8n7uA4QYrg7ZioJTFiTGcGNYfEIXZ9uTQ/s1600/aladdensima.com-twitter-icon.png"/>
      <script type="text/javascript">
document.write(unescape("%3Cscript src='http://twitterforweb.com/twitterbox.js?username=اسم المستخدم في تويتر&settings=1,1,3,236,550,f4f4f4,0,c4c4c4,101010,1,1,336699' type='text/javascript'%3E%3C/script%3E"));</script>Created by: <a href="http://twitterforweb.com" target="_blank">twitter website widget</a></div>
   <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('اسم المستخدم في تويتر').start();</script>
  </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/AVvXsEikPoPyMJPJcvTce4RHbY2XS0cgcWHdBLDF2LopUj_OonXB8xHPj6b_qHDkCWj34VQ898wUD16xfivFaleJlg7HsVZs1yh6iBR4vuZoMV8-fdHluX7mQ3dvmr_mN1y13NzCUD4OzRk-O9k/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>
    <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=معرف فيد برنر', '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="معرف فيد برنر" name="uri" type="hidden"/><input value="Submit" class="submitbutton" type="submit"/>
    </form>
    </center><img id="feedburner_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRtWLg2pWfITcOVedD2EuphipojpvGSnOGAH5LIObjn1XHgjd9T_0hV91qmSTgAZh9iNx7I97F1Nzzf0DOCLmgHepvTDpS3tt1wZqv7OwPqG8We7RucX_n-a8XywjQNgehTLhp6VLcUgY/s1600/DrRo2.com-subscribe-icon.png"/>
   </div>
  </div>
 </div>
</div>
<center/>
<a href="http://star-egy.com/"><img alt="Blogger widget" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuVQScqd-7jO7u67NnT59p0LfWD7I-ffnn6s9i-R2AAgw2PJu9HzQ_bwDCfMYQs5H9DjHdF65u7eDAKPb_91nzLUNmVSeHOPkEHr8maXUVS_jjT6J8-CAsOKl5A4FiAHWQiG4GT9NsA7f8/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="free software" /></a>
<center/></center></center>

والان قم بإضافة روابط صفحتك واحفظ القالب

ومبرك لك على الاضافة

ma

تعريف & الكاتب

محمود ذيهان شاعر وكاتب مصرى مسلم اعشق كل ما يخص التقنية والانترنت دائما احب ان اتعلم شيئا جديد كل يوم