☻ HOW TO ADD SOCIAL SHARING TRUCK WIDGET FOR BLOGGER

This tutorial will show you How To Add A Floating/Sliding Vertical Side Menu bar For Blogger .The menu is made up using Css3 with just one image and is quick and easy to install .This Vertical Side menu is created by tutorialzine.com.

☻ HOW TO ADD SOCIAL SHARING TRUCK WIDGET FOR BLOGGER 

1) Go to Blogger Dashboard → Layout → Page Elements.
2) Add a HTML/JavaScript Gadget.
3) Paste below code in it.

<style>

#navigationMenu li{
    list-style:none;
    height:39px;
    padding:2px;
    width:40px;
}

#navigationMenu span{
    /* Container properties */
    width:0;
    left:38px;
    padding:0;
    position:absolute;
    overflow:hidden;

    /* Text properties */
    font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
    font-size:18px;
    font-weight:bold;
    letter-spacing:0.6px;
    white-space:nowrap;
    line-height:39px;

    /* CSS3 Transition: */
    -webkit-transition: 0.25s;
    /*-o-transition: 0.25s;*/

    /* Future proofing (these do not work yet): */
    -moz-transition: 0.25s;
    transition: 0.25s;
}

#navigationMenu a{
    background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHlx9kEkV1-Jhfz8UmbWzDdHQELN02KlWl6AotmsP5JbmIxPLaokpDc-7ENeTie2pVMI-QLZiA_D8f6JGDUz9Dgj5iIveBFoYLNwMowh7_nUq1NiKOHyiOl9UERHng8x84BhgD34HinVo/h120/Pc+Tools+Tips.png') no-repeat;

    height:39px;
    width:38px;
    display:block;
    position:relative;
}

/* General hover styles */

#navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; }
#navigationMenu a:hover{
    text-decoration:none;

    /* CSS outer glow with the box-shadow property */
    -moz-box-shadow:0 0 5px #9ddff5;
    -webkit-box-shadow:0 0 5px #9ddff5;
    box-shadow:0 0 5px #9ddff5;
}

/* Green Button */

#navigationMenu .home {    background-position:0 0;}
#navigationMenu .home:hover {    background-position:0 -39px;}
#navigationMenu .home span{
    background-color:#7da315;
    color:#3d4f0c;
    text-shadow:1px 1px 0 #99bf31;
}

/* Blue Button */

#navigationMenu .about { background-position:-38px 0;}
#navigationMenu .about:hover { background-position:-38px -39px;}
#navigationMenu .about span{
    background-color:#1e8bb4;
    color:#223a44;
    text-shadow:1px 1px 0 #44a8d0;
}

/* Orange Button */

#navigationMenu .services { background-position:-76px 0;}
#navigationMenu .services:hover { background-position:-76px -39px;}
#navigationMenu .services span{
    background-color:#c86c1f;
    color:#5a3517;
    text-shadow:1px 1px 0 #d28344;
}

/* Yellow Button */

#navigationMenu .portfolio { background-position:-114px 0;}
#navigationMenu .portfolio:hover{ background-position:-114px -39px;}
#navigationMenu .portfolio span{
    background-color:#d0a525;
    color:#604e18;
    text-shadow:1px 1px 0 #d8b54b;
}

/* Purple Button */

#navigationMenu .contact { background-position:-152px 0;}
#navigationMenu .contact:hover { background-position:-152px -39px;}
#navigationMenu .contact span{
    background-color:#af1e83;
    color:#460f35;
    text-shadow:1px 1px 0 #d244a6;
}

</style>


<div style='position: fixed; top: 90%; left: 0%;'/>
<ul id="navigationMenu">
<li>
<a class="home" href="URL HERE">
<span>Home</span>
</a>

</li>
<li>

<a class="about" href="URL HERE">
<span>About Us</span>
</a>
</li>

<li>
<a class="services" href="URL HERE">
<span>Categories</span>
</a>

</li>

<li>
<a class="portfolio" href="URL HERE">
<span>Disclaimer</span>
</a>
</li>

<li>

<a class="contact" href="URL HERE">
<span>Contact</span>
</a>
</li>
</ul>
</div>

4) Customize your setting.Find any word click F3 or Ctrl+F.

♥ Replace it URL HERE with your Page URL links.
♥ BLUE LINES is your Page name.

5) Save your Widget.