اضافة نوافذ منبثة وعائمة لمواقع التواصل الاجتماعى

مرحبا بزوار موستا تك

اليوم اقدم لكم اضافة رائعة ويبحث عنها الكثير ولكنها فى اغلب الاحيان فيها مشاكل وخاصة فى تويتر

لكن الكود تم تعديله من قبلى وتشغيله والاضافة تعمل 100% والدليل فى الموقع الذى تتصفحه الان

تتكون الاضافة من صندوق معجبين فيس بوك و تايم لاين تويتر وزر المشاركة فى جوجل بلس

لتركيب الاضافة فى بلوجر اتبع الاتى

الدخول الى لوحة تحكم بلوجر الخاصة بك
ثم الى تخطيط
بعد ذلك أدخل إلى عناصر الصفحة. واضغط على أضف أداة
قم باختيار اداة HTML / Javascript
ثم قم بنسخ الكود التالى ولصقه فى المكان المخصص فى ادارة 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: 353px;
    overflow: scroll;
}#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: 353px;
    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/AVvXsEgp7y4ZjnyVNOQOnDU0yMcRvy1qJr9as-RadqgWmiOQi2FvLwXtMWAmjHt_sbUUhLFh-QqzEtOgg1JuphHhguGGH2EXGKqTxcIK6ZS6i0Xpw7vumtDoJeHqhktupc6vXOKsDKCmWU-udw0/s1600/MustaTech.ga-facebook-icon.png" alt=""/>
   <iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FMustaTech&width=200&height=346&colorscheme=light&show_faces=true&border_color&stream=false&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/AVvXsEiIda3epTMxT6X5wYmK_RFJUyrnvIrF0n96pWTJpE9Kr_c15gjqeT911ToZk2qIKxX4nKHqtL-CiLtCbU0VOIv16Es8Z6z9LNt-gYaktAYE-VJP8BrsEwaPCqP-3USEBtY4KJE8rAEUvbI/s1600/MustaTech.ga-twitter-icon.pngg"/>
<a class="twitter-timeline" href="https://twitter.com/Musta_Tech">Tweets by Musta_Tech</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</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/AVvXsEhqDsTZIiqjCanPorvFG_4hcOfkQRcYiH6tf10NmOQtriRG5SHxiou63wcdsX2l3cQWyCNOe11Bo1y0mj2Y6S2xybX1YPAXGec-l7bv26H14oKfTleRqkDQZsR4i-faa1bPZfnc1cvR1eI/s1600/MustaTech.ga-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>
<center/>
<a href="http://www.mustatech.ga"><img alt="Blogger Widget MustaTech" src="" title="Blogger widget MustaTech" /></a>
<center/></center></center>