Hey Guys, Checkout this cool Way2Blogging style social widget to blogger blogs. This is a professional looking social widget with social followers count.
If you want to add this widget to your blog just follow this simple steps.
1.Go to Blogger > Layout
2.Click on 'Add a Gadget'
3.Choose HTML/Javascript
4.Copy Paste the code given below inside it.
<br />
<ul class="social" style="background-color: white; border: 0px; color: #454545; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; font: inherit; line-height: 22px; list-style: none; margin: 10px; overflow: hidden; padding: 0px; vertical-align: baseline;">
<li class="rssicon" style="background-attachment: scroll; background-color: transparent; background-image: url(); background-position: 0% 6px; background-repeat: no-repeat no-repeat; border: 0px; display: block; font-size: 16px; font-weight: bold; font: inherit; line-height: 32px; list-style: none; margin: 8px 0px 4px; overflow: hidden; padding-bottom: 0px !important; padding-left: 14px; padding-right: 0px !important; padding-top: 0px !important; text-transform: capitalize; vertical-align: baseline;"><a href="http://feeds.feedburner.com/zgamerx" style="-webkit-transition: all 0.15s ease-in; border: 0px; color: #3395bf; display: block; font-size: 16px; font: inherit; margin: 0px; padding: 0px; text-decoration: initial; text-shadow: rgb(254, 254, 254) 0px 1px 0px; vertical-align: baseline;"><span class="icon" style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoVfFg_1dMCs4IWVSW33YnI3ZrRnmQrhPZXDCVJToHA7jhrT6p1xgGko2S07tP3BZhopwHjLwUiw_-K5ulaz3MjUMMBEw64qi1caN4lVQpiJXDvJ9kWrs4UF-sA1ugFff9vASonm_sqco/s1600/w2bsocials.png); background-position: -33px 0px; background-repeat: no-repeat no-repeat; border: 0px; display: inline-block; float: left; font-size: 16px; font: inherit; height: 32px; margin: 0px 10px 0px 0px; padding: 0px; vertical-align: baseline; width: 33px;"> </span>RSS Feed <span class="count" style="border: 0px; color: #aaaaaa; font-size: 11px; font-weight: normal; font: inherit; margin: 0px; padding: 0px; text-transform: uppercase; vertical-align: baseline;">240 READERS</span></a></li>
<li class="twicon" style="background-attachment: scroll; background-color: transparent; background-image: url(); background-position: 0% 6px; background-repeat: no-repeat no-repeat; border: 0px; display: block; font-size: 16px; font-weight: bold; font: inherit; line-height: 32px; list-style: none; margin: 8px 0px 4px; overflow: hidden; padding-bottom: 0px !important; padding-left: 14px; padding-right: 0px !important; padding-top: 0px !important; text-transform: capitalize; vertical-align: baseline;"><a href="http://twitter.com/vishalassassin" style="-webkit-transition: all 0.15s ease-in; border: 0px; color: #3395bf; display: block; font-size: 16px; font: inherit; margin: 0px; padding: 0px; text-decoration: initial; text-shadow: rgb(254, 254, 254) 0px 1px 0px; vertical-align: baseline;"><span class="icon" style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoVfFg_1dMCs4IWVSW33YnI3ZrRnmQrhPZXDCVJToHA7jhrT6p1xgGko2S07tP3BZhopwHjLwUiw_-K5ulaz3MjUMMBEw64qi1caN4lVQpiJXDvJ9kWrs4UF-sA1ugFff9vASonm_sqco/s1600/w2bsocials.png); background-position: 0px 0px; background-repeat: no-repeat no-repeat; border: 0px; display: inline-block; float: left; font-size: 16px; font: inherit; height: 32px; margin: 0px 10px 0px 0px; padding: 0px; vertical-align: baseline; width: 33px;"> </span>Twitter <span class="count" style="border: 0px; color: #aaaaaa; font-size: 11px; font-weight: normal; font: inherit; margin: 0px; padding: 0px; text-transform: uppercase; vertical-align: baseline;">160+ FOLLOWERS</span></a></li>
<li class="fbicon" style="background-attachment: scroll; background-color: transparent; background-image: url(); background-position: 0% 6px; background-repeat: no-repeat no-repeat; border: 0px; display: block; font-size: 16px; font-weight: bold; font: inherit; line-height: 32px; list-style: none; margin: 8px 0px 4px; overflow: hidden; padding-bottom: 0px !important; padding-left: 14px; padding-right: 0px !important; padding-top: 0px !important; text-transform: capitalize; vertical-align: baseline;"><a href="http://facebook.com/zgamerxs" style="-webkit-transition: all 0.15s ease-in; border: 0px; color: #3395bf; display: block; font-size: 16px; font: inherit; margin: 0px; padding: 0px; text-decoration: initial; text-shadow: rgb(254, 254, 254) 0px 1px 0px; vertical-align: baseline;"><span class="icon" style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoVfFg_1dMCs4IWVSW33YnI3ZrRnmQrhPZXDCVJToHA7jhrT6p1xgGko2S07tP3BZhopwHjLwUiw_-K5ulaz3MjUMMBEw64qi1caN4lVQpiJXDvJ9kWrs4UF-sA1ugFff9vASonm_sqco/s1600/w2bsocials.png); background-position: -99px 0px; background-repeat: no-repeat no-repeat; border: 0px; display: inline-block; float: left; font-size: 16px; font: inherit; height: 32px; margin: 0px 10px 0px 0px; padding: 0px; vertical-align: baseline; width: 33px;"> </span>Facebook <span class="count" style="border: 0px; color: #aaaaaa; font-size: 11px; font-weight: normal; font: inherit; margin: 0px; padding: 0px; text-transform: uppercase; vertical-align: baseline;">400+ LIKES</span></a></li>
<li class="gicon" style="background-attachment: scroll; background-color: transparent; background-image: url(); background-position: 0% 6px; background-repeat: no-repeat no-repeat; border: 0px; display: block; font-size: 16px; font-weight: bold; font: inherit; line-height: 32px; list-style: none; margin: 8px 0px 4px; overflow: hidden; padding-bottom: 0px !important; padding-left: 14px; padding-right: 0px !important; padding-top: 0px !important; text-transform: capitalize; vertical-align: baseline;"><a href="https://plus.google.com/u/0/117521503834739609237" style="-webkit-transition: all 0.15s ease-in; border: 0px; color: #3395bf; display: block; font-size: 16px; font: inherit; margin: 0px; padding: 0px; text-decoration: initial; text-shadow: rgb(254, 254, 254) 0px 1px 0px; vertical-align: baseline;"><span class="icon" style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoVfFg_1dMCs4IWVSW33YnI3ZrRnmQrhPZXDCVJToHA7jhrT6p1xgGko2S07tP3BZhopwHjLwUiw_-K5ulaz3MjUMMBEw64qi1caN4lVQpiJXDvJ9kWrs4UF-sA1ugFff9vASonm_sqco/s1600/w2bsocials.png); background-position: -66px 0px; background-repeat: no-repeat no-repeat; border: 0px; display: inline-block; float: left; font-size: 16px; font: inherit; height: 32px; margin: 0px 10px 0px 0px; padding: 0px; vertical-align: baseline; width: 33px;"> </span>Google + <span class="count" style="border: 0px; color: #aaaaaa; font-size: 11px; font-weight: normal; font: inherit; margin: 0px; padding: 0px; text-transform: uppercase; vertical-align: baseline;">60+ FOLLOWERS</span></a></li>
</ul>
Customizations
If you want to add this widget to your blog just follow this simple steps.
1.Go to Blogger > Layout
2.Click on 'Add a Gadget'
3.Choose HTML/Javascript
4.Copy Paste the code given below inside it.
<br />
<ul class="social" style="background-color: white; border: 0px; color: #454545; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; font: inherit; line-height: 22px; list-style: none; margin: 10px; overflow: hidden; padding: 0px; vertical-align: baseline;">
<li class="rssicon" style="background-attachment: scroll; background-color: transparent; background-image: url(); background-position: 0% 6px; background-repeat: no-repeat no-repeat; border: 0px; display: block; font-size: 16px; font-weight: bold; font: inherit; line-height: 32px; list-style: none; margin: 8px 0px 4px; overflow: hidden; padding-bottom: 0px !important; padding-left: 14px; padding-right: 0px !important; padding-top: 0px !important; text-transform: capitalize; vertical-align: baseline;"><a href="http://feeds.feedburner.com/zgamerx" style="-webkit-transition: all 0.15s ease-in; border: 0px; color: #3395bf; display: block; font-size: 16px; font: inherit; margin: 0px; padding: 0px; text-decoration: initial; text-shadow: rgb(254, 254, 254) 0px 1px 0px; vertical-align: baseline;"><span class="icon" style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoVfFg_1dMCs4IWVSW33YnI3ZrRnmQrhPZXDCVJToHA7jhrT6p1xgGko2S07tP3BZhopwHjLwUiw_-K5ulaz3MjUMMBEw64qi1caN4lVQpiJXDvJ9kWrs4UF-sA1ugFff9vASonm_sqco/s1600/w2bsocials.png); background-position: -33px 0px; background-repeat: no-repeat no-repeat; border: 0px; display: inline-block; float: left; font-size: 16px; font: inherit; height: 32px; margin: 0px 10px 0px 0px; padding: 0px; vertical-align: baseline; width: 33px;"> </span>RSS Feed <span class="count" style="border: 0px; color: #aaaaaa; font-size: 11px; font-weight: normal; font: inherit; margin: 0px; padding: 0px; text-transform: uppercase; vertical-align: baseline;">240 READERS</span></a></li>
<li class="twicon" style="background-attachment: scroll; background-color: transparent; background-image: url(); background-position: 0% 6px; background-repeat: no-repeat no-repeat; border: 0px; display: block; font-size: 16px; font-weight: bold; font: inherit; line-height: 32px; list-style: none; margin: 8px 0px 4px; overflow: hidden; padding-bottom: 0px !important; padding-left: 14px; padding-right: 0px !important; padding-top: 0px !important; text-transform: capitalize; vertical-align: baseline;"><a href="http://twitter.com/vishalassassin" style="-webkit-transition: all 0.15s ease-in; border: 0px; color: #3395bf; display: block; font-size: 16px; font: inherit; margin: 0px; padding: 0px; text-decoration: initial; text-shadow: rgb(254, 254, 254) 0px 1px 0px; vertical-align: baseline;"><span class="icon" style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoVfFg_1dMCs4IWVSW33YnI3ZrRnmQrhPZXDCVJToHA7jhrT6p1xgGko2S07tP3BZhopwHjLwUiw_-K5ulaz3MjUMMBEw64qi1caN4lVQpiJXDvJ9kWrs4UF-sA1ugFff9vASonm_sqco/s1600/w2bsocials.png); background-position: 0px 0px; background-repeat: no-repeat no-repeat; border: 0px; display: inline-block; float: left; font-size: 16px; font: inherit; height: 32px; margin: 0px 10px 0px 0px; padding: 0px; vertical-align: baseline; width: 33px;"> </span>Twitter <span class="count" style="border: 0px; color: #aaaaaa; font-size: 11px; font-weight: normal; font: inherit; margin: 0px; padding: 0px; text-transform: uppercase; vertical-align: baseline;">160+ FOLLOWERS</span></a></li>
<li class="fbicon" style="background-attachment: scroll; background-color: transparent; background-image: url(); background-position: 0% 6px; background-repeat: no-repeat no-repeat; border: 0px; display: block; font-size: 16px; font-weight: bold; font: inherit; line-height: 32px; list-style: none; margin: 8px 0px 4px; overflow: hidden; padding-bottom: 0px !important; padding-left: 14px; padding-right: 0px !important; padding-top: 0px !important; text-transform: capitalize; vertical-align: baseline;"><a href="http://facebook.com/zgamerxs" style="-webkit-transition: all 0.15s ease-in; border: 0px; color: #3395bf; display: block; font-size: 16px; font: inherit; margin: 0px; padding: 0px; text-decoration: initial; text-shadow: rgb(254, 254, 254) 0px 1px 0px; vertical-align: baseline;"><span class="icon" style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoVfFg_1dMCs4IWVSW33YnI3ZrRnmQrhPZXDCVJToHA7jhrT6p1xgGko2S07tP3BZhopwHjLwUiw_-K5ulaz3MjUMMBEw64qi1caN4lVQpiJXDvJ9kWrs4UF-sA1ugFff9vASonm_sqco/s1600/w2bsocials.png); background-position: -99px 0px; background-repeat: no-repeat no-repeat; border: 0px; display: inline-block; float: left; font-size: 16px; font: inherit; height: 32px; margin: 0px 10px 0px 0px; padding: 0px; vertical-align: baseline; width: 33px;"> </span>Facebook <span class="count" style="border: 0px; color: #aaaaaa; font-size: 11px; font-weight: normal; font: inherit; margin: 0px; padding: 0px; text-transform: uppercase; vertical-align: baseline;">400+ LIKES</span></a></li>
<li class="gicon" style="background-attachment: scroll; background-color: transparent; background-image: url(); background-position: 0% 6px; background-repeat: no-repeat no-repeat; border: 0px; display: block; font-size: 16px; font-weight: bold; font: inherit; line-height: 32px; list-style: none; margin: 8px 0px 4px; overflow: hidden; padding-bottom: 0px !important; padding-left: 14px; padding-right: 0px !important; padding-top: 0px !important; text-transform: capitalize; vertical-align: baseline;"><a href="https://plus.google.com/u/0/117521503834739609237" style="-webkit-transition: all 0.15s ease-in; border: 0px; color: #3395bf; display: block; font-size: 16px; font: inherit; margin: 0px; padding: 0px; text-decoration: initial; text-shadow: rgb(254, 254, 254) 0px 1px 0px; vertical-align: baseline;"><span class="icon" style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoVfFg_1dMCs4IWVSW33YnI3ZrRnmQrhPZXDCVJToHA7jhrT6p1xgGko2S07tP3BZhopwHjLwUiw_-K5ulaz3MjUMMBEw64qi1caN4lVQpiJXDvJ9kWrs4UF-sA1ugFff9vASonm_sqco/s1600/w2bsocials.png); background-position: -66px 0px; background-repeat: no-repeat no-repeat; border: 0px; display: inline-block; float: left; font-size: 16px; font: inherit; height: 32px; margin: 0px 10px 0px 0px; padding: 0px; vertical-align: baseline; width: 33px;"> </span>Google + <span class="count" style="border: 0px; color: #aaaaaa; font-size: 11px; font-weight: normal; font: inherit; margin: 0px; padding: 0px; text-transform: uppercase; vertical-align: baseline;">60+ FOLLOWERS</span></a></li>
</ul>
Customizations
Replace zgamerx with your Feedburner Username.
Replace vishalassassin with your Twitter Username
Replace zgamerxs with your Facebook fan page Username
Replace 117521503834739609237 with your Google+ Profile ID
Change 240 Readers to your Feedburner Subscriber count
Change 160+ Followers to your Twitter Follower count
Change 400+ Likes to your Facebook fan page likes count
Change 60+ Followers to your Google+ Followers count
5. Save Widget
That's all
Have any problem, Please comment.
No comments:
Post a Comment