Add floating media buttons to website

Apart from working on traffic and search engine optimization (SEO), there’s a need to intergrate your blog with popular social networking platforms. A floating share buttons (social bookmarking) widget by the right of every page is just one of the gadgets you must add to your blog if you intend to get free traffic from Facebook and twitter.

                                     

1. Log in to your blogger account and click on Design

2. You’re now looking at your blog’s layout, right? Click on Add A Gadget on the sidebar.

3. Select HTML/Java Script

4. Paste the code below into the box and save. There’s no need for a title.


for the right side floating bar
<style type="text/css"> * html #ss-box{ position: absolute; } #ss-box{ width: 70px; background:#ffffff;border:1px solid #dedede;border-radius:8px;-moz-border- radius:8px; -webkit-border-radius:8px;position:fixed;right:4%; top: 20%; height:200px; height:auto; } #ss-box div{ padding:6px 6px 4px 5px; } #icon_twitter,#icon_digg{ margin-left:-2px; } #icon_linkedin{ margin-left:-5px; } #sfs{ margin-left:-5px; } #ss-get{ bottom: -20px; clear: both; color: #666666; font-size: 9px; left: 18px; position: absolute; text-align: center; text-decoration: none; } </style><br /> <br /> <div id="ss-box"> <div id="ssl-box"> <br /> <div id="icon_facebook"> <iframe src="http://www.facebook.com/plugins/like.php? app_id=235665053131744&href&send=false&layout=box_count&width=50&show_faces=false &action=like&colorscheme=light&font&" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:60px; margin-left: 2px;" allowtransparency="true"></iframe> <br /> </div> <br /> <br /> <div id="icon_googleplus"> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><br /> <g:plusone size="tall"></g:plusone> <br /> </div> <br /> <br /> <div id="icon_twitter"> <a href="http://twitter.com/share" class="twitter-share-button" data- count="vertical">Tweet</a><br /> <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script><br /> </div> <br /> <br /> <div id="icon_digg"> <script type="text/javascript"> (function() { var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0]; s.type = 'text/javascript'; s.async = true; s.src = 'http://widgets.digg.com/buttons.js'; s1.parentNode.insertBefore(s, s1); })(); </script><br /> <a class="DiggThisButton DiggMedium"></a><br /> </div> <br /> <div id="icon_linkedin"> <script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-counter="top"></script> <br /> </div> <br /> <br /> </div> <br /> <a id="ss-get" href="http://futurextech.blogspot.in/search/label/blogging">Get <br /> <br /> this</a> <br /> <div style="clear:both;"> </div> </div>

for the left side floating bar

<style type="text/css"> * html #ss-box{ position: absolute; } #ss-box{ width: 70px; background:#f7f7f7;border:1px solid #dedede;border-radius:8px;-moz-border- radius:8px; -webkit-border-radius:8px;position:fixed;left:4%; top: 20%; height:200px; height:auto; } #ss-box div{ padding:6px 6px 4px 5px; } #icon_twitter,#icon_digg{ margin-left:-2px; } #icon_linkedin{ margin-left:-5px; } #sfs{ margin-left:-5px; } #ss-get{ bottom: -20px; clear: both; color: #666666; font-size: 9px; left: 18px; position: absolute; text-align: center; text-decoration: none; } </style><br /> <br /> <div id="ss-box"> <div id="ssl-box"> <br /> <div id="icon_facebook"> <iframe src="http://www.facebook.com/plugins/like.php? app_id=235665053131744&href&send=false&layout=box_count&width=50&show_faces=false &action=like&colorscheme=light&font&" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:60px; margin-left: 2px;" allowtransparency="true"></iframe> <br /> </div> <br /> <br /> <div id="icon_googleplus"> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><br /> <g:plusone size="tall"></g:plusone> <br /> </div> <br /> <br /> <div id="icon_twitter"> <a href="http://twitter.com/share" class="twitter-share-button" data- count="vertical">Tweet</a><br /> <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script><br /> </div> <br /> <br /> <div id="icon_digg"> <script type="text/javascript"> (function() { var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0]; s.type = 'text/javascript'; s.async = true; s.src = 'http://widgets.digg.com/buttons.js'; s1.parentNode.insertBefore(s, s1); })(); </script><br /> <a class="DiggThisButton DiggMedium"></a><br /> </div> <br /> <div id="icon_linkedin"> <script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-counter="top"></script> <br /> </div> <br /> <br /> </div> <br /> <a id="ss-get" href="http://futurextech.blogspot.in/search/label/blogging">Get <br /> <br /> this</a> <br /> <div style="clear:both;"> </div> </div>

prevent your content from copying

let's put this code into your website and prevent your content to be copied....

disable right click in Blogger

Have you noticed, that some web sites do not allow their visitors using right mouse click while pointer is on the blog area. This option is useful for the site and blog owners, who want to minimize the possibilities of the content direct copying to other posts.