In this post, im gonna explain how to add nice social sharing widget for your blog.It has a nice
hover effect. For this post im using pure CSS and HTML languages.You can link your Rss,
Facebook,Twitter nad Google plus.You can add it with easy steps. get my other social media
widgets by clicking here
Demo
1. Log in to blogger account and Click drop down.
2. Now select "Layout" Like Below.
3. Click Add Gadget and select 'HTML/Javascript
4. Paste below one of below code.
7. Now save your HTML/Javascript'.
You are done...
hover effect. For this post im using pure CSS and HTML languages.You can link your Rss,
Facebook,Twitter nad Google plus.You can add it with easy steps. get my other social media
widgets by clicking here
2. Now select "Layout" Like Below.
4. Paste below one of below code.
<style> /*--------Social Sharing Widget ------*/ .socialsharing a { display:block; height:50px;width:50px;padding:0 4px;float:left; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgtq1JrUiAdsOzxeENCPTh6yER3ZtjMtgqmJMkY5evD89s8Nabh2SR7nFSXU95L9JRwu5pZBkKYKyIf8u72Yr8hRPyOgVOu6Qmt7vXkywkRleUbA5N4NRycaWSVPQoTDme5WcsfDtwwk0/s1600/Sharing+buttons.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; } .socialsharing a.googleplus { background-position: 0px -58px; } .socialsharing a.googleplus:hover { background-position: 0px 0px; } .socialsharing a.twitter { background-position: 0px -290px; } .socialsharing a.twitter:hover { background-position: 0px -232px; } .socialsharing a.facebook { background-position: 0px -406px; } .socialsharing a.facebook:hover { background-position: 0px -348px; } .socialsharing a.rss { background-position: 0px -174px; } .socialsharing a.rss:hover { background-position: 0px -116px; } </style> <br /> <div class="socialsharing"> <a class="rss" href="RSS Link" rel="external nofollow" target="_blank"></a> <a class="googleplus" href="Google profile link" rel="external nofollow" target="_blank"></a> <a class="facebook" href="Facebook page Link" rel="external nofollow" target="_blank"></a> <a class="twitter" href="Twitter Link" rel="external nofollow" target="_blank"></a> </div>Replace with your URLs where i highligh with red color text.
7. Now save your HTML/Javascript'.
You are done...
This one is good for slide sharing, thank you for the step by step guide.
ReplyDeleteBrilliant widget dude,,can i have a favor,,can you give me a tutorials on how to make animated in ADVERTISE HERE..Same yours..
ReplyDeleteThanks
BLOGGER HEROE,Tips and Tricks For Blogger,widgets,Templates
bro i want know how to use sliding above for html code
ReplyDeletein up down
cn you give us atleast a demo how does this widget looks????
ReplyDeletealready added demo page.
Deleteniccccc.thnxxxxxxx
ReplyDeleteThank you! The result is cool!http://search-for-earning-ralex999.blogspot.ru/
ReplyDeletealready added this cool widget on my blog but then I would like to add a few more buttons like YouTube, Pintest...can you pls assist me to do so?
ReplyDeletehttp://immtherandom-ista.blogspot.com
Just message via contact us page.
Delete