Wordpress-like scrolling social network widgets for bloggers.

Home » Blogger Sidebar Widgets » Wordpress-like scrolling social network widgets for bloggers.

Wordpress-like scrolling social network widgets for bloggers.

Welcome back blogger's readers & viewers,

These time tutorial will show you how to set up( currently) these 4 scrolling social widget (in Facebook,Twitters,Google Plus & Rss). Either you can have it in your blogger sidebar or on footer blogger post.

If you've had noticed on my blog footer area, I've had them for quite sometime .
All of these 8 rounded (colored & gray) social widgets pngs buttons had been put up altogether by css image sprites,to ease the load for loading time.Unless you wanted to add more social buttons,you'll need to wait for my another post tutorial (my apology for putting it on my post waiting list).
Or if you are familiar with css sprites ,you can go here to upload your images.

And on top of all these creative ideas, started from a very humble blogger personality ,
Mohammad Mustafa Ahmedza from My Bloggers Tricks.
I've only did minor changes by tweaking here & there on the css ...... &

You can also view it

to see the demo

For Starter :

Always back up your template just in case something goes wrong.
Open up your blog HTML template ,select Edit HTML button &click to expand template .

Press control find button,copy & paste these ]]></b:skin> into the pop-up search bar
Add these following css code below,and paste right above ]]></b:skin>

/* -------ScrollWidget----- */
.scrollwidget a { border-top: 1px solid #e6e6e6;border-left: 1px solid #e6e6e6;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;margin: 10px 0 10px 0;display:block; height:50px; width:50px; padding: 0px 10px 0px 10px;
float:left; background:transparent
url(http://customizedfprofilecovers.googlecode.com/files/Share%20widget.png) no-repeat; -webkit-transition: ease-in 0.2s all;    -moz-transition: ease-in 0.2s all;    -o-transition: ease-in 0.2s all;    -ms-transition: ease-in 0.2s all;    
transition: ease-in 0.2s all; cursor:pointer;}
.scrollwidget a.googleplus { background-position: 10px -58px;} 
.scrollwidget a.googleplus:hover { background-position: 10px 0px; }
.scrollwidget a.twitter { background-position: 10px -290px;} 
.scrollwidget a.twitter:hover { background-position: 10px -232px;} 
.scrollwidget a.facebook { background-position: 10px -406px;} 
.scrollwidget a.facebook:hover { background-position: 10px -348px;}
.scrollwidget a.rss { background-position: 10px -174px;} 
.scrollwidget a.rss:hover { background-position: 10px -116px;}

Preview your template first if the css given has been are correctly placed.
Save your template .

For the Finale' :

Go to your blog layout ,add gadget & select HTML widget either in your sidebar or footer

Copy & paste these <div> code below into your html widget

<div class='scrollwidget'>
<!--RSS--> 
<a class='rss' href="http://feeds.feedburner.com/blogspot/<span style="color: red;">Your Rss URL</span>" rel='external nofollow' target='_blank'></a>
<!--Google Plus--> 
<a class='googleplus' href="http://plus.google.com/<span style="color: red;">Your GooglePLus ID</span>/about" rel='external nofollow' target='_blank'></a>
<!--Facebook--> 
<a class='facebook' href="http://www.facebook.com/pages/<span style="color: red;">Your Facebook URL</span>" rel='external nofollow' target='_blank'></a>
<!-- Twitter --> 
<a class='twitter' href="https://twitter.com/<span style="color: red;">Your Twitter URL</span>" rel='external nofollow' target='_blank' ></a>
</div>

Replace all GooglePlus ID,Facebook ,Twitter & Rss URLS to your own googleplus Id & the rest of your social network urls
Preview your template first to view your widget & finally save your blog template.

I will be posting as usual on 10th Dec 2012 at Singapore time 11 a.m.