Make Chatbox Vertically Slide in blog page

11:50 | Filed under: | Posted by: Durgesh

hello friend you find facebook slide ,twitter slide lets we add chat box that slide in page not understand how look in this image



are you able too see chat box with cross button this slide with your page and when you will clik on cross button chat box will close lets add this



1.Log in to Blogger with your account.
2.Then select Design >> Edit HTML
3.As always click Download Full Template to be safe
4.Do not forget to check Expand Widget Templates
5.Further search for the code ]]> , if you have found this place the CSS code below just before or above the code ]]> is:
    solid 30px 30px 100px}
    . panel p {color: # ccc; margin: 0 0 15px; padding: 0}
    . panel a,. panel a: visited {color: # 9FC54E; text-decoration: none; border-bottom: 1px solid # 9FC54E; margin: 0; padding: 0}
    . panel a: hover,. panel a: visited: hover {color: # fff; text-decoration: none; border-bottom: 1px solid
    helvetica, arial, sans-serif; color: # fff; font-weight: 700; background: # 333 url (http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85 % 55% no-repeat; border: 1px solid 40px 15px
    helvetica, arial, sans-serif; color: # fff; font-weight: 700; background: # 222 url (http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85 % 55% no-repeat; border: 1px solid 40px 15px 15px}
    a.active.trigger {background: # 222 url (http://lh3.ggpht.com/_xcD4JK_dIjU/S4QDvxbreOI/AAAAAAAAD2M/Cz3Q2r5pdTM/d/minus.png) 85% 55% no-repeat}
    . columns {clear: both; width: 330px; line-height: 22px; padding: 0 0 img {background-color: # 262 626; border: 1px solid # 333; float: right; margin: 3px 3px 6px 8px; padding: 5px} . panel h3 {border-bottom: 1px solid ul,. columns ul li {list-style-type: none; margin: 0; padding: 0}




    6.After that look for the code then copy and paste the code below and put it on top

    <Script src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js'   type = 'text / javascript' />

    If you have installed this Jquery script before you can leave the above steps
    7.Put the following Javascript code below jQuery script above:


    <script  type="text/javascript">
    $(document).ready(function(){
    $(".trigger").click(function(){
    $(".panel").toggle("fast");
    $(this).toggleClass("active");
    return false;
    });
    });
    </script>


    8Then search again following code <body>
    9.Then enter the following code and place on top

    <div class="panel">

    ChatBox your script code can be replaced with a code or widget or whatever it is up to .....

    </ Div> 
    <a class="trigger" href=""> ChatBox </ a>

    10.And the last Save Template you.

      If You like this posts then don't forget to leave comment here 

      Posted by Durgesh on 11:50. Filed under . You can follow any responses to this entry through the RSS 2.0. You can leave a response or trackback to this entry

      1 comments for "Make Chatbox Vertically Slide in blog page"

      1. Anonymous 6 March 2012 at 11:52

        thanks for sharing this amazing widgets thank you very much

         

      Leave a reply