futureX:: techblog: 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

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

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;"

count="vertical">Tweet</a><br />
 <script type="text/javascript"

Pages

Add floating media buttons to website

No comments:

Post a Comment