Recommended slide out widget is a very popular widget and it helps visitors to find more stuff on your blog. This is version 2 of this widget and we posted the last version in our last post but due to some reasons we have to delete that post but after that we are here with version 2, this version includes the social sharing buttons of Facebook, Twitter, Google + with a close button and side in-out button. This Widget is simply made by CSS and JavaScript.
Step- 1 Install Slide Out Widget in Blogger
- Login to Blogger > Dashborad
- Click on Drop Down Menu and select Template
- Backup your Template before making any changes to your blog
- Now Click on Edit HTML > Proceed > Expand Widget Templates
- Press Ctrl + F and search the code shown below.
<data:post.body/>
- Paste below code after <data:post.body/>
<b:if cond='data:blog.pageType == "item"'>
<div style='display:none' id='bpslidein_place_holder'></div>
</b:if>
- Save your template.
Step2 of Installation
- Click on Drop Down Menu and select Layout
- Add a HTML/JavaScript Gadget
- Paste below code in it.
<style>
#bpslidein{z index:5;
width:400px;
height:100px;
padding:10px;
background-color:#fff;
border-top:5px solid #434343;
position:fixed;
right:-430px;
bottom:0;-moz-box-shadow:-5px 0 10px #aaa;
-webkit-box-shadow:-5px 0 10px #aaa;
box-shadow:-5px 0 10px #aaa;
font-family:Arial, Helvetica, sans-serif;
}
#bpslidein p{
font-size:11px;
text-transform:uppercase;
font-family:Arial,Helvetica,sans-serif;
letter-spacing:1px;color:#555;
}
#bpslidein_title{
color:#555;
font-weight:700;
font-size:16px;
margin:10px 20px 10px 0;
}
#bpslidein a,#bpslidein a:hover,#bpslidein_title{
text-decoration:none;color:#434343;
}
#bpslidein .close,#bpslidein .expand,#bpslidein .help{
border:2px solid #EEE;
cursor:pointer;
color:#9A9AA1;
width:13px;
height:15px;
padding:2px 0 0 5px;
position:absolute;
right:10px;font-size:17px;
font-weight:700;font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
#bpslidein .help{right:35px;
}
#bpslidein_title,#bpslidein_image{
float:left;width:80px;
}
#bpslidein_title{
width:290px;
}
</style>
<script language="javascript">
document.write( unescape( '%3C%64%69%76%20%69%64%3D%22%62%70%73%6C%69%64%65%69%6E%22%20%73%74%79%6C%65%3D%22%64%69%73%70%6C%61%79%3A%6E%6F%6E%65%3B%22%3E%20%0A%3C%64%69%76%20%63%6C%61%73%73%3D%22%68%65%6C%70%22%3E%3F%3C%2F%64%69%76%3E%0A%3C%64%69%76%20%63%6C%61%73%73%3D%22%65%78%70%61%6E%64%22%3E%2B%3C%2F%64%69%76%3E%0A%3C%64%69%76%20%63%6C%61%73%73%3D%22%63%6C%6F%73%65%22%3E%58%3C%2F%64%69%76%3E%0A%20%3C%70%3E%52%65%63%6F%6D%6D%65%6E%64%65%64%20%66%6F%72%20%79%6F%75%3C%2F%70%3E%0A%20%3C%64%69%76%20%69%64%3D%22%62%70%73%6C%69%64%65%69%6E%5F%69%6D%61%67%65%22%3E%3C%2F%64%69%76%3E%0A%20%3C%64%69%76%20%20%69%64%3D%22%62%70%73%6C%69%64%65%69%6E%5F%74%69%74%6C%65%22%3E%3C%69%6D%67%20%62%6F%72%64%65%72%3D%22%30%22%20%73%72%63%3D%22%68%74%74%70%3A%2F%2F%34%2E%62%70%2E%62%6C%6F%67%73%70%6F%74%2E%63%6F%6D%2F%2D%6A%43%46%6A%6D%66%59%68%34%54%6F%2F%55%4E%67%59%61%44%66%64%75%66%49%2F%41%41%41%41%41%41%41%41%47%46%59%2F%52%72%4F%64%79%2D%4A%63%6F%69%77%2F%73%31%36%30%30%2F%4D%44%2D%6C%6F%61%64%69%6E%67%2E%67%69%66%22%20%2F%3E%3C%2F%64%69%76%3E%0A%3C%64%69%76%20%63%6C%61%73%73%3D%27%61%64%64%74%68%69%73%5F%74%6F%6F%6C%62%6F%78%20%61%64%64%74%68%69%73%5F%64%65%66%61%75%6C%74%5F%73%74%79%6C%65%20%27%3E%0A%3C%61%20%63%6C%61%73%73%3D%27%61%64%64%74%68%69%73%5F%62%75%74%74%6F%6E%5F%66%61%63%65%62%6F%6F%6B%5F%6C%69%6B%65%27%20%66%62%3A%6C%69%6B%65%3A%6C%61%79%6F%75%74%3D%27%62%75%74%74%6F%6E%5F%63%6F%75%6E%74%27%2F%3E%0A%3C%61%20%63%6C%61%73%73%3D%27%61%64%64%74%68%69%73%5F%62%75%74%74%6F%6E%5F%74%77%65%65%74%27%2F%3E%0A%3C%61%20%63%6C%61%73%73%3D%27%61%64%64%74%68%69%73%5F%62%75%74%74%6F%6E%5F%67%6F%6F%67%6C%65%5F%70%6C%75%73%6F%6E%65%27%20%67%3A%70%6C%75%73%6F%6E%65%3A%73%69%7A%65%3D%27%6D%65%64%69%75%6D%27%2F%3E%0A%3C%2F%61%3E%3C%2F%61%3E%3C%2F%61%3E%3C%2F%64%69%76%3E%0A%3C%73%63%72%69%70%74%20%73%72%63%3D%27%68%74%74%70%3A%2F%2F%73%37%2E%61%64%64%74%68%69%73%2E%63%6F%6D%2F%6A%73%2F%32%35%30%2F%61%64%64%74%68%69%73%5F%77%69%64%67%65%74%2E%6A%73%23%70%75%62%69%64%3D%78%61%2D%34%66%30%38%36%62%63%61%30%35%62%66%36%38%36%31%27%20%74%79%70%65%3D%27%74%65%78%74%2F%6A%61%76%61%73%63%72%69%70%74%27%2F%3E%0A%3C%73%63%72%69%70%74%3E%0A%21%66%75%6E%63%74%69%6F%6E%28%64%2C%73%2C%69%64%29%7B%76%61%72%20%6A%73%2C%66%6A%73%3D%64%2E%67%65%74%45%6C%65%6D%65%6E%74%73%42%79%54%61%67%4E%61%6D%65%28%73%29%5B%30%5D%3B%69%66%28%21%64%2E%67%65%74%45%6C%65%6D%65%6E%74%42%79%49%64%28%69%64%29%29%7B%6A%73%3D%64%2E%63%72%65%61%74%65%45%6C%65%6D%65%6E%74%28%73%29%3B%6A%73%2E%69%64%3D%69%64%3B%6A%73%2E%73%72%63%3D%22%2F%2F%70%6C%61%74%66%6F%72%6D%2E%74%77%69%74%74%65%72%2E%63%6F%6D%2F%77%69%64%67%65%74%73%2E%6A%73%22%3B%66%6A%73%2E%70%61%72%65%6E%74%4E%6F%64%65%2E%69%6E%73%65%72%74%42%65%66%6F%72%65%28%6A%73%2C%66%6A%73%29%3B%7D%7D%28%64%6F%63%75%6D%65%6E%74%2C%22%73%63%72%69%70%74%22%2C%22%74%77%69%74%74%65%72%2D%77%6A%73%22%29%3B%3C%2F%73%63%72%69%70%74%3E%0A%3C%2F%64%69%76%3E%20%0A%3C%73%63%72%69%70%74%3E%20%69%66%28%64%6F%63%75%6D%65%6E%74%2E%6C%6F%63%61%74%69%6F%6E%2E%68%72%65%66%2E%73%70%6C%69%74%28%22%2F%22%29%2E%6C%65%6E%67%74%68%3D%3D%36%26%26%64%6F%63%75%6D%65%6E%74%2E%6C%6F%63%61%74%69%6F%6E%2E%68%72%65%66%2E%69%6E%64%65%78%4F%66%28%22%2E%68%74%6D%6C%22%29%21%3D%2D%31%29%7B%69%66%28%74%79%70%65%6F%66%20%62%70%5F%6F%6E%6C%6F%61%64%5F%71%75%65%75%65%3D%3D%27%75%6E%64%65%66%69%6E%65%64%27%29%76%61%72%20%62%70%5F%6F%6E%6C%6F%61%64%5F%71%75%65%75%65%3D%5B%5D%3B%69%66%28%74%79%70%65%6F%66%20%62%70%5F%64%6F%6D%5F%6C%6F%61%64%65%64%3D%3D%27%62%6F%6F%6C%65%61%6E%27%29%62%70%5F%64%6F%6D%5F%6C%6F%61%64%65%64%3D%66%61%6C%73%65%3B%65%6C%73%65%20%76%61%72%20%62%70%5F%64%6F%6D%5F%6C%6F%61%64%65%64%3D%66%61%6C%73%65%3B%69%66%28%74%79%70%65%6F%66%20%62%70%5F%61%73%79%6E%63%5F%6C%6F%61%64%65%72%21%3D%27%66%75%6E%63%74%69%6F%6E%27%29%7B%66%75%6E%63%74%69%6F%6E%20%62%70%5F%61%73%79%6E%63%5F%6C%6F%61%64%65%72%28%73%72%63%2C%63%61%6C%6C%62%61%63%6B%2C%69%64%29%7B%76%61%72%20%73%63%72%69%70%74%3D%64%6F%63%75%6D%65%6E%74%2E%63%72%65%61%74%65%45%6C%65%6D%65%6E%74%28%27%73%63%72%69%70%74%27%29%3B%73%63%72%69%70%74%2E%74%79%70%65%3D%22%74%65%78%74%2F%6A%61%76%61%73%63%72%69%70%74%22%3B%73%63%72%69%70%74%2E%61%73%79%6E%63%3D%74%72%75%65%3B%73%63%72%69%70%74%2E%73%72%63%3D%73%72%63%3B%73%63%72%69%70%74%2E%69%64%3D%69%64%3B%76%61%72%20%70%72%65%76%69%6F%75%73%5F%73%63%72%69%70%74%3D%64%6F%63%75%6D%65%6E%74%2E%67%65%74%45%6C%65%6D%65%6E%74%42%79%49%64%28%69%64%29%3B%69%66%28%70%72%65%76%69%6F%75%73%5F%73%63%72%69%70%74%29%69%66%28%70%72%65%76%69%6F%75%73%5F%73%63%72%69%70%74%2E%72%65%61%64%79%53%74%61%74%65%3D%3D%22%6C%6F%61%64%65%64%22%7C%7C%70%72%65%76%69%6F%75%73%5F%73%63%72%69%70%74%2E%72%65%61%64%79%53%74%61%74%65%3D%3D%22%63%6F%6D%70%6C%65%74%65%22%29%7B%63%61%6C%6C%62%61%63%6B%28%29%3B%72%65%74%75%72%6E%7D%65%6C%73%65%7B%73%63%72%69%70%74%3D%70%72%65%76%69%6F%75%73%5F%73%63%72%69%70%74%7D%69%66%28%73%63%72%69%70%74%2E%6F%6E%6C%6F%61%64%21%3D%6E%75%6C%6C%29%70%72%65%76%69%6F%75%73%5F%63%61%6C%6C%62%61%63%6B%3D%73%63%72%69%70%74%2E%6F%6E%6C%6F%61%64%3B%73%63%72%69%70%74%2E%6F%6E%6C%6F%61%64%3D%73%63%72%69%70%74%2E%6F%6E%72%65%61%64%79%73%74%61%74%65%63%68%61%6E%67%65%3D%66%75%6E%63%74%69%6F%6E%28%29%7B%76%61%72%20%6E%65%77%63%61%6C%6C%62%61%63%6B%3B%69%66%28%70%72%65%76%69%6F%75%73%5F%73%63%72%69%70%74%26%26%70%72%65%76%69%6F%75%73%5F%63%61%6C%6C%62%61%63%6B%29%6E%65%77%63%61%6C%6C%62%61%63%6B%3D%66%75%6E%63%74%69%6F%6E%28%29%7B%70%72%65%76%69%6F%75%73%5F%63%61%6C%6C%62%61%63%6B%28%29%3B%63%61%6C%6C%62%61%63%6B%28%29%7D%3B%65%6C%73%65%20%6E%65%77%63%61%6C%6C%62%61%63%6B%3D%63%61%6C%6C%62%61%63%6B%3B%69%66%28%62%70%5F%64%6F%6D%5F%6C%6F%61%64%65%64%29%7B%6E%65%77%63%61%6C%6C%62%61%63%6B%28%29%7D%65%6C%73%65%20%62%70%5F%6F%6E%6C%6F%61%64%5F%71%75%65%75%65%2E%70%75%73%68%28%6E%65%77%63%61%6C%6C%62%61%63%6B%29%3B%73%63%72%69%70%74%2E%6F%6E%6C%6F%61%64%3D%6E%75%6C%6C%3B%73%63%72%69%70%74%2E%6F%6E%72%65%61%64%79%73%74%61%74%65%63%68%61%6E%67%65%3D%6E%75%6C%6C%7D%3B%76%61%72%20%68%65%61%64%3D%64%6F%63%75%6D%65%6E%74%2E%67%65%74%45%6C%65%6D%65%6E%74%73%42%79%54%61%67%4E%61%6D%65%28%27%68%65%61%64%27%29%5B%30%5D%3B%69%66%28%21%70%72%65%76%69%6F%75%73%5F%73%63%72%69%70%74%29%68%65%61%64%2E%61%70%70%65%6E%64%43%68%69%6C%64%28%73%63%72%69%70%74%29%7D%7D%69%66%28%74%79%70%65%6F%66%20%62%70%5F%64%6F%6D%4C%6F%61%64%65%64%21%3D%27%66%75%6E%63%74%69%6F%6E%27%29%66%75%6E%63%74%69%6F%6E%20%62%70%5F%64%6F%6D%4C%6F%61%64%65%64%28%63%61%6C%6C%62%61%63%6B%29%7B%62%70%5F%64%6F%6D%5F%6C%6F%61%64%65%64%3D%74%72%75%65%3B%76%61%72%20%6C%65%6E%3D%62%70%5F%6F%6E%6C%6F%61%64%5F%71%75%65%75%65%2E%6C%65%6E%67%74%68%3B%66%6F%72%28%76%61%72%20%69%3D%30%3B%69%3C%6C%65%6E%3B%69%2B%2B%29%7B%62%70%5F%6F%6E%6C%6F%61%64%5F%71%75%65%75%65%5B%69%5D%28%29%7D%7D%62%70%5F%64%6F%6D%4C%6F%61%64%65%64%28%29%3B%62%70%5F%61%73%79%6E%63%5F%6C%6F%61%64%65%72%28%22%68%74%74%70%3A%2F%2F%61%6A%61%78%2E%67%6F%6F%67%6C%65%61%70%69%73%2E%63%6F%6D%2F%61%6A%61%78%2F%6C%69%62%73%2F%6A%71%75%65%72%79%2F%31%2E%37%2E%31%2F%6A%71%75%65%72%79%2E%6D%69%6E%2E%6A%73%22%2C%66%75%6E%63%74%69%6F%6E%28%29%7B%62%70%5F%61%73%79%6E%63%5F%6C%6F%61%64%65%72%28%22%68%74%74%70%73%3A%2F%2F%64%6C%2E%64%72%6F%70%62%6F%78%2E%63%6F%6D%2F%75%2F%36%33%39%36%38%38%34%32%2F%72%65%63%6F%6D%6D%61%6E%64%65%64%77%69%64%67%65%74%76%32%2E%6A%73%22%2C%66%75%6E%63%74%69%6F%6E%28%29%7B%7D%2C%22%62%70%2D%6F%75%74%2D%73%6C%69%64%65%22%29%7D%2C%22%6A%51%75%65%72%79%6A%73%22%29%7D%20%3C%2F%73%63%72%69%70%74%3E%0A%20%3C%61%20%68%72%65%66%3D%22%68%74%74%70%3A%2F%2F%77%69%64%67%65%74%67%65%6E%65%72%61%74%6F%72%73%2E%62%6C%6F%67%73%70%6F%74%2E%63%6F%6D%2F%32%30%31%32%2F%31%32%2F%72%65%63%6F%6D%6D%65%6E%64%65%64%2D%70%6F%73%74%2D%73%6C%69%64%65%2D%6F%75%74%2D%77%69%64%67%65%74%2D%76%32%2E%68%74%6D%6C%22%20%74%61%72%67%65%74%3D%22%5F%62%6C%61%6E%6B%22%3E%0A%3C%2F%61%3E' ) );
</script>
- Now Finally Save your Widget
- Enjoy a High Quality Widget in Free.
Make Changes (Optional)
- Replace #434343 with your own color code to change the color of top border color.
0 comments:
Post a Comment