Amazing Blogger Tricks

Saturday, 20 April 2013

How to Add - Fixed sticky slide/scroll bar with social media icons?

Posted by Arun Kumar Choppara On 14:14 | 13 comments

When we scroll down the post, the visitor will not find the social media icons displayed on the screen.
Because of this, we may loose some people who are willing to share but some how miss out as the social media share icons are not visible when they are scrolling down the blog.

To solve this issue, we can have a simple jQuery code added to blog template HTML code.

1. Go to: Dashboard -> Template -> Edit HTML

2. Search for the below code.

<b:includable id='post' var='post'>

3. Copy and paste the code directly After/Below <b:includable id='post' var='post'>.

<b:if cond='data:blog.pageType == "item"'>
<div id='share-buttons'>
<div class='twitter scount'>
 <a class='twitter-share-button' data-count='vertical' data-via='YOUR-TWITTER-USERNAME' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></div>
<div class='facebook scount'>
<iframe allowTransparency='true' expr:src='"//www.facebook.com/plugins/like.php?href=" + data:blog.url + "&send=false&layout=box_count&width=80&show_faces=false&action=like&colorscheme=light&font=arial&height=90"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:80px; height:90px;'/></div>
<div class='stumble scount'>
<script src='http://www.stumbleupon.com/hostedbadge.php?s=5'/></div>
<div class='gplus scount'>
 <script src='https://apis.google.com/js/plusone.js' type='text/javascript'/><g:plusone size='tall'/> </div>
<center>
<a class='pin-it-button' count-layout='vertical' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url'>Pin It</a>
<a href='javascript:void(run_pinmarklet())' style='margin-left:-46px; width:43px; height:20px; display:inline-block;'/>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
<script type='text/javascript'>
function run_pinmarklet() {
var e=document.createElement('script');
e.setAttribute('type','text/javascript');
e.setAttribute('charset','UTF-8');
e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r=' + Math.random()*99999999);
document.body.appendChild(e);
}
</script> </center>
<br/><a href='http://feeds.feedburner.com/spiceupyourblog' rel='nofollow' target='_blank' title='Subscribe To Our Rss Feed'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin3TQFacEDThrxVwoe55rh-D88ApbxyjptVfiAWoreL421dvvglD0mrpvUw6EWDLoO1viUGMKQIQfsIUo9DVAWflo68YTduxis3AWrdtkrAT683fPjBE-T4kT6mSOJ9JQgx0Gea8_ie2w/s1600/rss-seat.png'/></a>
<br/><a href='http://www.spiceupyourblog.com/2012/05/jquery-scroll-bar-social-bookmark.html' target='_blank' title='Get This Scrolling Bookmark Gadget For Blogger'><small>Get Gadget</small></a></div>
</b:if>

Replace: User name by Twitter username and URL by RSS feed URL.

4. Find the below code.

]]></b:skin>

5. Copy and paste the below code directly Above/Before ]]></b:skin>.

6. Find the below code

</head>

7. Copy and paste the below code directly Above/Before </head>

NOTE: We do not need the below code in the code mentioned above is jQuery is already added to the template.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>

8. Find the below code from HTML code.

</head>

9. Copy and paste the below code directly Below/After </head>

10. Save the Template and View blog to see the changes.

Now the blog should have the sticky slide/scroll bar added to blogger.

If you like the post, take a couple of minutes to comment and share.
Your comments are most valuable and would help me come up with better posts.