Friday, 14 September 2012

How to make a cool floating social media button on blogger

Dear all bloggers, today CoolTips2u want to share one more cool floating widget on blogger. The widget called a cool floating social media button. You can see the demo on this blog. Yes! a cool floating social media button on the right-side of this blog! :D Okay, now let me show you how to make the widget.

1. Log-in to your blogger and click on Design tab.

2. Click on Page Elements tab.

3. Click on Add a Gadget.

4. Select on HTML/Java Script section.

5. Place the following codes ON it.

<br />
<br />
<style type="text/css">
.barrightblogger{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj23yUC-EKY7npaXCR8PUD2_L85OuiT826MUm_cQKTvV9zL25hy3HV6D-8plrrQQYo1BkEV3eI0GbpjU8_DRfsJI3psMEHus1a0XBy-lGCKqt8gkoFanRK2xtF-seY_y-4fcQGgkoNnGZCg/s1600/FB.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:160px; z-index:1000;}
.barrightbloggerc{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8q0YIb2RTguNv1fKki72iVF6rojCSUwkvMJRj6TxfVwdFiZItPcqjjoiMtotHM3CdNooG467d_oyb9ar6H9TW7m5X6dge3832vlV3odV6rFnR9oJhFHEmD86SVTOpwdS9L_1W_8gfEmvC/s1600/FB-open.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:160px; z-index:1100;}
.barconteblogger{margin:0px 0 0 43px}
.barrighttwitter{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuADldy7YYWSKkbo5BBKzXxm6ZMuE0l_7bmbXmFHjofvI9ZeRSZgzxAEj1IGhaQHE4GmLSEK35-ehHnUpikVz46-nwcw-GEeYwb5gfGpaWoZevy8eyLKOxmOFyvja3L-SBm1i4BWk1mDgj/s1600/TW.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:205px;z-index:1000;}
.barrighttwitterc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwYiaAVxibJG8vkDQejkeeINcp8c9xL4ZeI1gwghW4jJR-9o2YJon05RFNkOF87aATf9rq6JiP9rK1C9CBYmJYRXXMzH9CNGIoDBQdONxmxGiw6u83f_RNvB6yZATqEMf1Ybu_TUkHAm1r/s1600/TW-open.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:205px; z-index:1100;}
.barcontetwitter{margin:0px 0 0 43px}
.barrightfacebook{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0y1j-PHDqDnDPIBwejYFlvgfbEOtestFWJO_EJc6bDLoMbcKxnxJWew81SDI1pL2rbETAsGKwQoqMxnPzHhbszBtwj8GOAHt7sJGJxuUtH5kQR74biqZA9IfBZ5lNTdR-Uy-V00S7P0XE/s1600/G+.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:250px; z-index:1000;}
.barrightfacebookc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjymhOGlrjjjaPR05WBw-qdnx7A8H3qfexshhoZe2OiWDkU8TeVb59XZx48Jxp1MPzrMdnmulkVHfOBEUBoxKrNEyXn1GWtuPTBkDd0NtLYUSxcuDm2ZDkEGdw2GLKtaOAoJKvOwhaaX9cY/s1600/G+-open.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:250px; z-index:1100;}
.barcontefacebook{margin:0px 0 0 43px}
.barquestionmark{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfDUYHS7IlFCsIqSXsJHSn892pJ7r_7WIHrmMsh-CmvNTpnT5wM0sSbpsVrjv44OqAPHIdbFEYKtUfWX7olosk_sNe8nYowmAd0gc4ZNdTEPGHUjCLh65M7oDEg0Q4t1gxJTsqD-AGfZCD/s1600/question+mark+2.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:295px; z-index:1000;}
</style><br />
<div class="barrightblogger" onmouseover="this.className='barrightbloggerc'" onmouseout="this.className='barrightblogger'"><div class="barconteblogger"><a href="https://www.facebook.com/CoolTips2u" target="_blank"><img alt="Like CoolTips2u on Facebook" title="Like CoolTips2u on Facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij4ZWLq2dgGfFZ2iM_nWf5Vg6Y7oG10D77u9HMLYcenL3hMGvNHJH3E7l0GnBp08-9Zgs_zESWL1m0mUKdQpK6UkUnfJYQr2vzXue9v_OrGwJf7fRiggqOV8NtIac6RLUI-JlsMdR9XV_b/s1600/FB-open-new.png"/></a><br />
</div></div><div class="barrighttwitter" onmouseover="this.className='barrighttwitterc'" onmouseout="this.className='barrighttwitter'"><div class="barcontetwitter"><a href="https://twitter.com/CoolTips2u" target="_blank"><img alt="Follow CoolTips2u on Twitter" title="Follow CoolTips2u on Twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRRzKvNMMIXkrwAEI3u27UJi53BJXglQ5yYPIWRbV6Jb4kQ1ebuWoH2x0SAsHHB50NCKorDBySyOJGyceGzKUi0xn_E8RhadCTrNYD4_aICK5PkpobVvlJt3YHR7lyNV21THQWCV0jaBIK/s1600/TW-open-new.png"/></a><br />
</div></div><div class="barrightfacebook" onmouseover="this.className='barrightfacebookc'" onmouseout="this.className='barrightfacebook'"><div class="barcontefacebook"><a href="https://plus.google.com/104738107757885877986/posts" target="_blank"><img alt="Recommend CoolTips2u on Google Plus" title="Recommend CoolTips2u on Google Plus" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz_MH9Zu7Rv9G7IQYmdRAozg4qjoqXOIMGkHsrtaBY88p66jH171WMqs8JUp3Dl8ved36mavea2RD3M6DN8Tz9JR5Dm-wHeXcrj624g1h0MQh2LwyETW7O3NOsVNeNd8yqCzWOhKUZSEjU/s1600/G+-open-new.png"/></a><br />
</div></div><div class="barquestionmark"><a href="http://www.cooltips2u.com/2012/09/how-to-make-cool-floating-social-media.html" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9NYaAyycJ3qb4Z8qO5czHzEesGTKQtP1d6kPivXOvRBLxpOtwkMbMRJyRRXhQtx2iyorAMZQtwzK7vlxE2sgYQe-j1D4WV9sNCtsoGKQ5cGmhiDzsKuzgs_dE_NygZ7cmLdx7Ny3zSrcq/s1600/blank.png" alt="Add this widget on your blog!" title="Add this widget on your blog!"/></a><br />
</div><br />

6. Click Save. That's all! :D

7. Customization:

1. Replace the https://www.facebook.com/CoolTips2u URL with your Facebook Page URL.

2. Replace the https://twitter.com/CoolTips2u URL with your Twitter Page URL.

3. Replace the https://plus.google.com/104738107757885877986/posts URL with your Google Plus Page URL.

8. If you have some questions, please comments on the comment box below. Thanks for coming! :D

46 Responses on 'How to make a cool floating social media button on blogger'

Anonymous said...: This comment has been removed by a blog administrator.; 5 January 2013 at 07:21
Anonymous said...: This comment has been removed by a blog administrator.; 14 January 2013 at 21:29
Unknown said...: This comment has been removed by the author.; 15 January 2013 at 08:35
Anonymous said...: This comment has been removed by a blog administrator.; 18 January 2013 at 11:11
Unknown said...: This comment has been removed by the author.; 19 January 2013 at 15:13
Unknown said...: You are welcome.. ;); 23 January 2013 at 08:38
Anonymous said...: This comment has been removed by a blog administrator.; 24 January 2013 at 22:02
Unknown said...: This comment has been removed by the author.; 27 January 2013 at 14:35
Anonymous said...: This comment has been removed by a blog administrator.; 7 February 2013 at 07:51
Unknown said...: This comment has been removed by the author.; 9 February 2013 at 15:49
Anonymous said...: This comment has been removed by a blog administrator.; 11 February 2013 at 02:53
Anonymous said...: This comment has been removed by a blog administrator.; 11 February 2013 at 16:59
Delhi Day Tour said...: This comment has been removed by a blog administrator.; 11 February 2013 at 20:42
Unknown said...: This comment has been removed by the author.; 11 February 2013 at 21:06
Unknown said...: Thanks Sunil for visiting my blog..

For now, I don't have anything for wordpress..

Next time I will share some nice widgets for wordpress.. ;); 27 February 2013 at 08:45
Anonymous said...: This comment has been removed by a blog administrator.; 27 February 2013 at 19:01
Anonymous said...: Need Linked In button with this code; 5 March 2013 at 06:31
Unknown said...: Hi Guest!

I tried to reply your comment with Linked In button, but blogger was block some code..

Can you send me your email?

I will send a new code with Linked In button on it..

Thank You..; 5 March 2013 at 10:29
Anonymous said...: Please add Linked In button with this facebook , twitter, google + buttons.

my email id : crazy.samin@gmail.com; 5 March 2013 at 19:35
Unknown said...: Hi Guest..

Okay, I will prepare it first..

Once ready, I will send it to you.. ;); 6 March 2013 at 11:19
Anonymous said...: This comment has been removed by a blog administrator.; 9 March 2013 at 19:33
agen judi bola said...: thank you so much, my bro, i've knew how to make an interesting posting at the social media; 20 March 2013 at 16:51
Unknown said...: Hi Bro..

You are welcome..

Thanks for visiting my blog too.. ;); 21 March 2013 at 09:44
merapi golf said...: It's really cool tips like your website name. I has put it to my blog. My blog become cool ^_^; 26 March 2013 at 23:43
Unknown said...: Hi Merapi!

Thanks for coming by..

Wow, thanks for your feedback! ;); 27 March 2013 at 08:45
Anonymous said...: This comment has been removed by a blog administrator.; 31 March 2013 at 14:10
Anonymous said...: This comment has been removed by a blog administrator.; 6 April 2013 at 19:34
Anonymous said...: This comment has been removed by a blog administrator.; 20 April 2013 at 01:42
Anonymous said...: This comment has been removed by a blog administrator.; 24 April 2013 at 12:50
Anonymous said...: This comment has been removed by a blog administrator.; 27 April 2013 at 07:25
Kuliner Balikpapan said...: thanks to tips floating social; 11 May 2013 at 15:40
Unknown said...: Hi Bro!

You are welcome..

Thanks for visiting my blog.. ;); 12 May 2013 at 11:59
Absolute Vitality Spa said...: I am very thankful to all your team for sharing such amazing information. It really helpful for us. Thanks a lot!

regards
Arizona Massage; 13 May 2013 at 19:52
Unknown said...: Hi Guest!

You are welcome..

Thank a lot for your feedback.. ;); 14 May 2013 at 08:42
Anonymous said...: This comment has been removed by a blog administrator.; 24 May 2013 at 19:01
Amir said...: Thanks a lot effectively position interpersonal symbols are usually the most crucial items for the web page in addition to each and every doodlekit need to put this kind of system on the internet site suggestions yet another scrolling discuss icons with blogger their furthermore very good but is not far better you then,: ); 29 June 2013 at 20:20
Unknown said...: Hi Amir..

Thanks for your feedback..

Nice to meet you! ;); 30 June 2013 at 13:29
Click this Website said...: This comment has been removed by a blog administrator.; 15 July 2013 at 21:54
Anonymous said...: after headache search... finally i found this post of social media plugin... i need rss and feed back too button please send me on friendwasim@hotmail.com.... i realy need that.... thank alot to make this button; 25 July 2013 at 05:47
Unknown said...: Hi Wasim..

Thanks for coming by..

Unfortunately, I can't make that one because I am very busy at the moment.. ;); 25 July 2013 at 08:45
Anonymous said...: oh no... thats bad news for me; 25 July 2013 at 23:06
Unknown said...: I'm sorry..

If you can learn the code, I am sure you can create it by yourself..

It's not too difficult.. ;); 26 July 2013 at 09:15
Sarah Parker said...: I have two blog 1 on blogger & 1 on wordpress....this tutorial is awesome for blogger and i will made it ..you have anything similar for wordpress..??; 19 December 2013 at 19:18
Unknown said...: Hi Sarah..

I am sorry, I don't have it.. ;)

But, you can search it on Google..

There are a lots of it..

Thanks..; 20 December 2013 at 08:35
Kuliner Balikpapan said...: Maknyoss; 27 February 2014 at 17:07
Unknown said...: Hi Guest..

Thanks.. ;); 5 March 2014 at 08:33