i like to have that code side bar

i like to have that code side bar when you hover the icon the side page apper
this an image

when hover on icon


or the way to get that code
Edit:
i forget to add this code looks like that one but the one i have got no youtube

Code:

<script type="text/javascript" src="http://micsoft.xp3.biz/code.js"></script> <style type="text/css">
        img, a { border: 0; }
        #likebox_1 {
            z-index: 10005;
            border:2px solid #3c95d9;
            background-color: #fff;
            width:196px;
            height: 320px;
            position: fixed;
            top: 10%;
            right: -200px;
        }

        #likebox_1_1 {
            width:196px;
            height: 320px;
            overflow: hidden;
        }

        #likebox_1 img {
            position: absolute;
            top: -2px;
            left: -47px;
        }

        #likebox_1 iframe {
            border:0px solid #3c95d9;
            overflow: hidden;
            position: static;
            height: 360px;
            left:-2px;
            top:-3px;
        }
        #polecam_1 {
            z-index: 10004;
            border:2px solid #6CC5FF;
            background-color: #6CC5FF;
            width:246px;
            height: 375px;
            position: fixed;
            top: 18%;
            right: -250px;
        }

        #polecam_1_1 {
            width:246px;
            height: 375px;
            overflow: hidden;
        }

        #polecamy_img {
            position: absolute;
            top: -2px;
            left: -47px;
            border: 0;
        }
        #google_1 {
            z-index: 10003;
            border-top:2px solid #0056a0;
            border-bottom: 2px solid #0056a0;
            border-right:2px solid #0056a0;
            border-left: hidden;
            background-color: #006ec9;
            width:152px;
            height: 97px;
            position: fixed;
            top: 26%;
            right: -154px;
        }

        #google_1_1 {
            width:152px;
            height: 97px;
            overflow: hidden;
        }

        #google_img {
            position: absolute;
            top: -2px;
            left: -46px;
            border: 0;
        }
        #youtube_1 {
            z-index: 10003;
            border:2px solid #cb1c0e;
            background-color: #fff;
            width:196px;
            height: 353px;
            position: fixed;
            right: -200px;
        }

        #youtube_1_1 {
            width:196px;
            height: 353px;
            overflow: hidden;
        }

        #youtube_1 img {
            position: absolute;
            top: -2px;
            left: -35px;
        }
        </style>
<!--
                                                                        
         facebook                                                        
                         -->
<div id="likebox_1">
 
<div id="likebox_1_1">
 <img
 
src="https://cdn1.iconfinder.com/data/icons/isometric-social-media-icons/48/facebook.png"
 alt="" /> <a href="http://micsoft.logu2.com">مايكل سوفت
للتطوير</a>
<div dir="rtl" style="padding: 0pt; font-weight: bold; font-size: 10pt;
background: none repeat scroll 0% 0% rgb(255, 255, 255); margin: 0pt;
overflow: scroll; width: 190px; color: rgb(51, 51, 51); font-family:
tahoma; height: 302px; text-align:
center;">
 
<div id="fb-root">
 
</div><script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=265543160288028";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-comments" data-href="http://micsoft.logu2.com" data-width="180" data-numposts="5" data-colorscheme="light">
 
</div>
 
</div>
 
</div>
 
</div>
 
<!--
                                                                        
         facebook                                                        
                         -->
<!--                              
                                                   twitter              
                                                                  
-->
<div id="polecam_1">
 
<div id="polecam_1_1">
 <img
 id="polecamy_img"
src="https://cdn1.iconfinder.com/data/icons/isometric-social-media-icons/48/twitter.png"
 /><a href="http://micsoft.logu2.com">مايكل سوفت
للتطوير</a><a class="twitter-timeline"
href="https://twitter.com/Michael_vx"
data-widget-id="435029586120679425">Tweets by @Michael_vx</a>
<script>!function(d,s,id){var
js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
 
</div>
</div>
 
<!--                        
                                                         twitter        
                                                                        
 -->
<!--                                                      
                           google_1                                      
                                           -->
<div id="google_1">
 
<div id="google_1_1">
 <img
 id="google_img"
src="https://cdn1.iconfinder.com/data/icons/isometric-social-media-icons/48/google_plus.png"
 /> <a href="http://micsoft.logu2.com">مايكل سوفت
للتطوير</a>
<div style="color:#999;font-size:11px; padding-top: 15px;
     padding-right:30px; margin:5px; width:98px; height:97px;">
 <script
 type="text/javascript"
src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall"></g:plusone> <a http:=""
micsoft.logu2.com="" <="" div=""> </a>
</div><a http:="" micsoft.logu2.com="" <="" div=""></a>
<!--
                                                                        
         google_1                                                        
                         -->
</div>
</div>
 

Hello,

Where have you added this code in your forum?

Looks like a widget.

Illest wrote:Hello,

Where have you added this code in your forum?

its widget

Kite Trojan wrote:Looks like a widget.

you right its widget
the problem is the code i have with out the youtube icon
have no youtube
and i sow that code looks like it but with youtube
i want the code with the youtube system that is al thanks
Edit:
i tried to add something on the code i have and i manged to add the 4rd icon of youtube but the icon wont move like others when i hover on it

here the code

Code:



<script type="text/javascript" src="http://adminstar20.3rab.pro/10969.js"></script> <style type="text/css">
            img, a { border: 0; }
            #likebox_1 {
                z-index: 10005;
                border:2px solid #3c95d9;
                background-color: #fff;
                width:196px;
                height: 353px;
                position: fixed;
                top: 20%;
                right: -200px;
            }

            #likebox_1_1 {
                width:196px;
                height: 353px;
                overflow: hidden;
            }

            #likebox_1 img {
                position: absolute;
                top: -2px;
                left: -47px;
            }

            #likebox_1 iframe {
                border:0px solid #3c95d9;
                overflow: hidden;
                position: static;
                height: 360px;
                left:-2px;
                top:-3px;
            }
            #polecam_1 {
                z-index: 10004;
                border:2px solid #6CC5FF;
                background-color: #6CC5FF;
                width:246px;
                height: 353px;
                position: fixed;
                top: 27%;
                right: -250px;
            }

            #polecam_1_1 {
                width:246px;
                height: 353px;
                overflow: hidden;
            }

            #polecamy_img {
                position: absolute;
                top: -2px;
                left: -47px;
                border: 0;
            }
            #google_1 {
                z-index: 10003;
                border-top:2px solid #0056a0;
                border-bottom: 2px solid #0056a0;
                border-right:2px solid #0056a0;
                border-left: hidden;
                background-color: #006ec9;
                width:152px;
                height: 97px;
                position: fixed;
                top: 34%;
                right: -154px;
            }

            #google_1_1 {
                width:152px;
                height: 97px;
                overflow: hidden;
            }

            #google_img {
                position: absolute;
                top: -2px;
                left: -47px;
                border: 0;
            }
    #youtube_1 {
        z-index: 10001;
        border:2px solid #cb1c0e;
        background-color: #fff;
        width:196px;
        height: 353px;
        position: fixed;
        top: 13%;
        right: -200px;
    }

    #youtube_1_1 {
        width:196px;
        height: 353px;
        overflow: hidden;
    }

    #youtube_1 img {
        position: absolute;
        top: -2px;
        left: -47px;
    }

            </style>
    <!--                youtube                -->
    <div id="youtube_1"><div id="youtube_1_1">
     <img src="https://cdn1.iconfinder.com/data/icons/isometric-social-media-icons/48/youtube.png" alt="" />
    <a href="http://micsoft.logu2.com">Michael_vx</a>
    you tube box
    </div>
    </div>
    </div>
    <!--                youtube                -->
    <!--                facebook                -->
    <div id="likebox_1"><div id="likebox_1_1">
     <img src="https://cdn1.iconfinder.com/data/icons/isometric-social-media-icons/48/facebook.png" alt="" />
    <a href="http://micsoft.logu2.com">Michael_vx</a>
    <div id="fb-root">
    </div><script>(function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=265543160288028";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>
    <P>your facebook code to active this box</P>
    </div>
    </div>
    <div id="polecam_1"><div id="polecam_1_1">
 
                   <img id="polecamy_img"
src="https://cdn1.iconfinder.com/data/icons/isometric-social-media-icons/48/twitter.png"
 />
    <a href="http://micsoft.logu2.com">Michael_vx</a>
    <P>your twiter widget code here to active this</P>
     </div>
    </div>
     
    <!--                twitter                -->
    <!--                google_1                -->
    <div id="google_1"><div id="google_1_1">
     <img id="google_img" src="https://cdn1.iconfinder.com/data/icons/isometric-social-media-icons/48/google_plus.png" />
    <a href="http://micsoft.logu2.com">Michael_vx</a>
    <div style="color:#999;font-size:11px; padding-top: 15px;
         padding-right:30px; margin:5px; width:98px; height:97px;">
 
    <script type="text/javascript"
src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall"></g:plusone>
    </div>
    </div>
    </div>
     
    <!--                google_1                -->


i hope to find out why it wont work

Change your code to :

Code:

<script type="text/javascript" src="http://adminstar20.3rab.pro/10969.js"></script> <style type="text/css">
            img, a { border: 0; }
            #likebox_1 {
                z-index: 10005;
                border:2px solid #3c95d9;
                background-color: #fff;
                width:196px;
                height: 353px;
                position: fixed;
                top: 20%;
                right: -200px;
            }

            #likebox_1_1 {
                width:196px;
                height: 353px;
                overflow: hidden;
            }

            #likebox_1 img {
                position: absolute;
                top: -2px;
                left: -47px;
            }

            #likebox_1 iframe {
                border:0px solid #3c95d9;
                overflow: hidden;
                position: static;
                height: 360px;
                left:-2px;
                top:-3px;
            }
            #polecam_1 {
                z-index: 10004;
                border:2px solid #6CC5FF;
                background-color: #6CC5FF;
                width:246px;
                height: 353px;
                position: fixed;
                top: 27%;
                right: -250px;
            }

            #polecam_1_1 {
                width:246px;
                height: 353px;
                overflow: hidden;
            }

            #polecamy_img {
                position: absolute;
                top: -2px;
                left: -47px;
                border: 0;
            }
            #google_1 {
                z-index: 10003;
                border-top:2px solid #0056a0;
                border-bottom: 2px solid #0056a0;
                border-right:2px solid #0056a0;
                border-left: hidden;
                background-color: #006ec9;
                width:152px;
                height: 97px;
                position: fixed;
                top: 34%;
                right: -154px;
            }

            #google_1_1 {
                width:152px;
                height: 97px;
                overflow: hidden;
            }

            #google_img {
                position: absolute;
                top: -2px;
                left: -47px;
                border: 0;
            }
    #youtube_1 {
        z-index: 10006;
        border:2px solid #cb1c0e;
        background-color: #fff;
        width:196px;
        height: 353px;
        position: fixed;
        top: 13%;
        right: -200px;
        -webkit-transition:600ms;
           -moz-transition:600ms;
             -o-transition:600ms;
                transition:600ms;
    }
    
    #youtube_1:hover { right:0; }

    #youtube_1_1 {
        width:196px;
        height: 353px;
        overflow: hidden;
    }

    #youtube_1 img {
        position: absolute;
        top: -2px;
        left: -47px;
    }

            </style>
    <!--                youtube                -->
    <div id="youtube_1"><div id="youtube_1_1">
    <img src="https://cdn1.iconfinder.com/data/icons/isometric-social-media-icons/48/youtube.png" alt="" />
    <p><a href="http://micsoft.logu2.com">Michael_vx</a>
    you tube box</p>
    </div>
    </div>

    <!--                facebook                -->
    <div id="likebox_1"><div id="likebox_1_1">
     <img src="https://cdn1.iconfinder.com/data/icons/isometric-social-media-icons/48/facebook.png" alt="" />
    <a href="http://micsoft.logu2.com">Michael_vx</a>
    <div id="fb-root">
    </div><script>(function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=265543160288028";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>
    <P>your facebook code to active this box</P>
    </div>
    </div>
    <div id="polecam_1"><div id="polecam_1_1">
 
                  <img id="polecamy_img"
src="https://cdn1.iconfinder.com/data/icons/isometric-social-media-icons/48/twitter.png"
 />
    <a href="http://micsoft.logu2.com">Michael_vx</a>
    <P>your twiter widget code here to active this</P>
     </div>
    </div>
    
   <!--                twitter                -->
    <!--                google_1                -->
    <div id="google_1"><div id="google_1_1">
     <img id="google_img" src="https://cdn1.iconfinder.com/data/icons/isometric-social-media-icons/48/google_plus.png" />
    <a href="http://micsoft.logu2.com">Michael_vx</a>
    <div style="color:#999;font-size:11px; padding-top: 15px;
         padding-right:30px; margin:5px; width:98px; height:97px;">
 
   <script type="text/javascript"
src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall"></g:plusone>
    </div>
    </div>
    </div>
    
   <!--                google_1                -->

You needed to set the pixels on the right to 0 on hover so it would show.

really i dont know how to thank you for this great help its solved
last thing if i would add more icons reply with the steps and lock the topic because i may try to add more icons by my self
thanks for the great help

Add more HTML and change the IDs :

Code:

   <!--                myfield                -->
    <div id="myfield_1"><div id="myfield_1_1">
    <img src="/myicon.png" alt="" />
    <p><a href="/mylink">My link</a>
    Extra text</p>
    </div>
    </div>

Then add onto your CSS and adjust it as needed :

Code:

   #myfield_1 {
        z-index: 10006;
        border:2px solid #cb1c0e;
        background-color: #fff;
        width:196px;
        height: 353px;
        position: fixed;
        top: 13%;
        right: -200px;
        -webkit-transition:600ms;
           -moz-transition:600ms;
             -o-transition:600ms;
                transition:600ms;
    }
    
    #myfield_1:hover { right:0; }

    #myfield_1_1 {
        width:196px;
        height: 353px;
        overflow: hidden;
    }

    #myfield_1 img {
        position: absolute;
        top: -2px;
        left: -47px;
    }


If the icon is above the others, increase the z-index by one, if it is below the others lower the z-index until it is perfect.

Code:

z-index: 10006;

got it
thank you so much
now i understand how the code works
Archive the topic
its solved allready along with the other one
https://help.forumotion.com/t131836-side-box-code-force-the-color-box-to-stop-somthing-like-conflicting-scripts
it also solved

You're welcome

Topic solved and archived