0

[How to] Add bouncing social share icons to blogger post [Tutorial]

Add this funny bouncing social share icons to help your visitors to share your post.
look at the preview

Tutorial to Add Bouncing Social Share iCons to your blogger goes here

Log in to Blogger -> Layout -> Edit HTML and select the tick-box Expand Widget Templates
Then, find (CTRL+F) this code in the template:

</head>

And paste the following code Above/Before head 

<!–BOUNCING-ICONS-START–>
<link href=’http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/screen2.css’ media=’all’ rel=’stylesheet’ type=’text/css’/>
<script src=’http://code.jquery.com/jquery-latest.js’ type=’text/javascript’/>
<script src=’http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/execute.js’ type=’text/javascript’/>
<!–BOUNCING-ICONS-STOP—>

Now find this code in the template:


<data:post.body/> 

And immediately BELOW/AFTER it, paste following code:

<!–SOCIAL-BOOKMARKING-BUTTONS–><br/>
<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<center>
<ul id=’nav-shadow’>
<li class=’button-color-1′><a expr:href=’&quot;http://twitter.com/home/?status=Currently reading-&quot; + data:post.title + &quot; &quot; + data:post.url’ target=’_blank’ title=’Tweet This Post’/></li>
<li class=’button-color-2′><a expr:href=’&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title’ target=’_blank’/></li>
<li class=’button-color-3′><a expr:href=’&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title’ target=’_blank’/></li>
<li class=’button-color-4′><a expr:href=’&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title’ target=’_blank’/></li>
<li class=’button-color-5′><a expr:href=’&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title’ target=’_blank’/></li></ul></center>
<a href=”http://bloggerstop.net/2009/10/bounce-share-social-bookmarking-widget.html” target=”_blank”><span style=”font-size: x-small;”>Get this widget</span></a>
</b:if>
<!–SOCIAL-BOOKMARKING-BUTTONS—>

Now Preview And Save It….thats all… 

Abhishek Balani

A Full Stack Developer, sometimes designer, passionate coder, tireless knowledge seeker, curious learner.

I have a strong passion for new technologies, very autodidact and love to build new things from the ground up. Having 5+ years of dynamic experience accumulated from working in early stage startups to mid-sized organizations in Agile environment.

Skilled in Python and related frameworks, React.js, Databases, Hadoop, Elastic Search and various AWS Services like Boto3, API Gateway, Lamda, EC2, EMR, CloudWatch.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.