0

Add Stylish Side Bar Widget To Your Blogger Blog

Hi friends .. Today I'm going to teach your , how to add stylish side bar widget to your blogger blog .. This side bar can be use as a social media option also ... Not only that ... ;)



SEE DEMO .

You van add any of your fields to this and you can link toes to any page ..

Okey .. Let's do this ..

Step 01 : 


Go to Blogger.com and sing in to your blogger account .. 

Step 02 :


Then select Layout option of your blog from the Blogger Dashboard ...

Step 03 :


Now click on " Add a widget " button in anywhere of the layout ..Then select " Add Java Script / Html " option ...

Step 04 :

Now copy the following code and paste it .. ( Don't add any titles )

<script src="http://dl.dropboxusercontent.com/s/dxv8pj5mvc74vyw/prototype.js" type="text/javascript"></script>
<script src="http://dl.dropboxusercontent.com/s/wvyae56sr0hic2n/effects.js" type="text/javascript"></script>

 <script src="http://dl.dropboxusercontent.com/s/8t6uvuz6r1xzpnz/side-bar.js" type="text/javascript"></script>
<a href="#" target="_blank" title="wadiyalk"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="#" target="_blank" title="Latest Tips And Tricks"><img src="https://bitly.com/24workpng1" alt="Latest Tips And Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="#" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>
<style>
body{
font-size:75%;
}
a{
outline: none;
}
a:active{
outline: none;
}
#sideBar{
text-align:left;
}
#sideBar h2{
color:#F0FFFF;
font-size:110%;
font-family:arial;
margin:10px 10px 10px 10px;
font-weight:bold !important;
}
#sideBar h2 span{
font-size:125%;
font-weight:normal !important;
}
#sideBar ul{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
#sideBar li{
margin:0px 5px 5px 10px;
padding: 0 0 0 10px;
list-style-type:none;
display:block;
background-color:#DA1074;
width:177px;
color:#FFFFFF;
}
#sideBar li a{
width:100%;
}
#sideBar li a:link,
#sideBar li a:visited{
color:#FFFFFF;
font-family:verdana;
font-size:100%;
text-decoration:none;
display:block;
margin:0px 0px 0px 0px;
padding:0 0 0 20px;
width:100%;
}
#sideBar li a:hover{
color:#FFFF00;
text-decoration:underline;
}
#sideBar{
position: fixed;
width: auto;
height: auto;
top: 140px;
left:0px;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQk1yltIfmOemrmhn1g_pVV0ozsLMzYL89Dm6hawGQtHsg_ewR4aLLHJAZjacvPul_ioPOkxDZ9iuIGxX19gJKH-FyEXzpqxL9YgH3Zg0DAiuO5fus77ykN_oU47Lssbg7aVWzxWOqY20i/s320/left.collapse.border.png);
background-position:top right;
background-repeat:repeat-y;
}
#sideBarTab{
float:left;
height:137px;
width:28px;
}
#sideBarTab img{
border:0px solid #FFFFFF;
}
#sideBarContents{
float:left;
overflow:hidden !important;
width:200px;
height:125px;
}
#sideBarContentsInner{
width:200px;
}</style>
<div id="sideBar">
<div id="sideBarContents" style="display:none;">
<div id="sideBarContentsInner">
<h2>Left<span>Menu</span></h2>
<ul>
<li><a href="#">Add your field</a></li>
<li><a href="#">Add your field</a></li>
<li><a href="#">Add your field</a></li>
<li><a href="#">Add your field</a></li>
</ul>
</div> </div>
<a id="sideBarTab" href="#"><img alt="sideBar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXGVos2KA7mDEVpPQeGHlBaW2wc4s_gSE9R1xkFFcREuD_VzPdEcgd0q7Uz8ITYn8DVrzYwAV-fc1XYjdyPljI2d_yfPOJt1pB9ENhYHKI5eJJ3f5aoX6CUqbkdMy5GjkgqbEgoE13AHzO/s320/sidebarcollapse.png" title="sideBar" /></a>
</div>

Step 05 :


This is the most important Step  ... 

Find the following sentences in the code and replace those with your fields ... ( You can make links to your FB fan page , Twitter Account , RSS feed , etc )

Find : " Add your field "

You can link those fields by replacing the " # " just near your field .. 

After all editing s click on Save button ...

That's all ... 

-----------------------------------------------------------------------------------------------------------------

Hope you Enjoyed this article .. If you have any question regarding this , Please ask them by comment or click on contact me button and just put a massage ... 

For our help we hope returns from you .. Please Share this article with your friends and Comment your success also .. 

Unknown

Phasellus facilisis convallis metus, ut imperdiet augue auctor nec. Duis at velit id augue lobortis porta. Sed varius, enim accumsan aliquam tincidunt, tortor urna vulputate quam, eget finibus urna est in augue.

No comments:

Post a Comment