Add Floating Social Media Sharing Buttons To Blogger

The Floating Social Media Sharing is a very popular widget on all the top blogs and this is one of the ways to increase the number of times your posts get shared on Twitter, Facebook and other social networks.

This floating social bar has the following options: Facebook Like, StumbleUpon, Twitter Share, Digg This, Google+ and each of them comes with a live counter. You can add more sharing buttons or social bookmarking icons later if you want.

How to add the scrolling social bookmarking bar

Step 1. Log in to your Blogger Dashboard, select your blog and go to Layout 

Step 2. Click on Add A Gadget link

Step 3. From the pop-up window, scroll down and select HTML/Javascript 

Step 4. Copy the code below and paste it inside the empty box.

Step 5. Save the gadget.

The code to copy-paste (updated!):

<style type="text/css">
#social-buttons {
position:fixed;
bottom:15%; 
margin-left:-721px;
float:left;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
background-color:#fff;
padding:0 0 2px 0;
z-index:10;
}
#social-buttons .button-share {
float:left;
clear:both;
margin:5px 5px 0 2px;
}
</style>
<div id='social-buttons' title="Get this from helplogger.blogspot.com">
<div class='button-share' id='like' style='margin-left:7px;'>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-send="false" data-layout="box_count" data-width="40" data-show-faces="false"></div>
</div>
<br /><div class='sbutton' style="margin-left: 2px;" ><a class='twitter-share-button' data-count='vertical' data-via='Helplogger' expr:data-counturl='data:blog.url' href='http://twitter.com/share' rel='nofollow'>Tweet</a><script src='http://platform.twitter.com/widgets.js'; type='text/javascript'></script>
<br />
<div class='button-share' style="margin-left: 3px;" id='su'>
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</div>
<div class='button-share' id='digg' style='margin-left:3px;width:48px'>
<script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script>
<a class="DiggThisButton DiggMedium"></a>
</div>
<div class='button-share' style='margin-left:3px;' id='gplusone'>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall"></g:plusone>
</div>
<div style="clear: both;font-size: 9px;text-align:center;">Get <a style="color: #3399BB;" href="http://helplogger.blogspot.com/">widget</a></div></div></div>

Customization:

• Vertical alignment - Change the 15% value of bottom. The code positions the social bar relative to the bottom of your browser window. To fix the distance even when window is resized, specify the value in px (pixels) instead of %.

• Horizontal alignment - Change the -721px value from margin-left. Negative value pushes the button to the left of the main blog column, positive value pushes it to the right. Increase or decrease the value based on your needs.

• Twitter setting - Replace Helplogger with your Twitter username

• Replacing and removing buttons - You can replace existing buttons with your own. Each button is represented by this code:

<div class='sbutton'> BUTTON CODE HERE </div>

Enjoy!!! :)

Read More

Create A Rollover Image Effect (change image on mouseover)

The Rollover effect is one in which an image web object changes (swaps itself) on mouse over to another web object (called rollovers) and reverts back to the original image on mouse out. Rollover images are preloaded into the page when it is loading, this ensures that the rollovers are displayed quickly. The onMouseOver and onMouseOut attributes of the link tag are used to make this functional.

Demo:  Place your mouse over the image below to see its rollover effect

Making Rollover Effect Image

You have the following code:

<a href="URL ADDRESS"><img src="URL OF THE FIRST IMAGE GOES HERE" onmouseover="this.src='URL OF THE SECOND IMAGE GOES HERE'" onmouseout="this.src='URL OF THE FIRST IMAGE GOES HERE'" /></a>

Change the colored texts as it follows:

1. URL ADDRESS

This is the address where somebody will be sent when clicks on the image.
Example, my blog address: http://www.helplogger.blogspot.com

2. URL OF THE FIRST IMAGE GOES HERE

Replace the orange text (two times) with the URL address of the image which will appear before you hover over it.

3. URL OF THE SECOND IMAGE GOES HERE
Replace the text in blue with the url of  the image that will appear when the cursor hovers over it.

Now you can paste your image inside a blog gadget, going to Layout > click on Add a Gadget link (right side) > Select HTML/JavaScript from the pop-up window, then add it to your sidebar.

You can also add it inside your post by going to New Post > Switch to HTML tab and then paste the code in the empty box.

That's it. Enjoy ;)

Read More

How to Change Default Anonymous Avatar in Blogger Comments

Earlier, you've seen how you can change the size of the avatars in blogger comments and now I will show you how to change or customize the default avatar of anonymous commenters or Blogger users with no picture on their profiles. While Blogger announced the new threaded commenting system, we can still customize it by adding a jQuery plugin to our template and then replace the default anonymous avatar that can be found on this address: http://img1.blogblog.com/img/anon36.png and the one for blogger users: http://img2.blogblog.com/img/b36-rounded.png ...with our own.

Replace the Default Anonymous Avatar on Blogger Comments

Step 1. Go to Dashboard - Template - click on the Edit HTML button

...click anywhere inside the code area and open the template search box by pressing the CTRL + F keys

Step 2. Type or paste this code in the search box, then hit Enter to find it:

</body>

Step 3. Just above the </body> tag, add the following code:

<script src='http://code.jquery.com/jquery-latest.js'/>
<script>
$(&quot;img[src=&#39;http://img1.blogblog.com/img/anon36.png&#39;]&quot;)
.attr(&#39;src&#39;, &#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1lROBqTAcnQy89OOeXT6fM7nmhnWm-G0lDCzrnxdX5bFOnEqLdlhsbs2twSXnijrfMHvjhKopGFqzAqssKeGgVdSfy3AhsScP73YFIzmgjgS2jo6T8znp3xw6l8TtN2cCX_teofJ1Iwk/s1600/default_avatar.gif&#39;)
.ssyby(&#39;blank&#39;)
</script>
<script src='http://code.jquery.com/jquery-latest.js'/>
<script>
$(&quot;img[src=&#39;http://img2.blogblog.com/img/b36-rounded.png&#39;]&quot;)
.attr(&#39;src&#39;, &#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsDVg2t9aLfK-n-wS32NsmQNMafbcqNV3dRh3wKs_9hws2I5UZGI4zFGHmOiAJE4a5M5AIYFYH5J-Phnxijjpyci4F3FJz22oPKXt2-M4HoXN20hWiObQZX891Cu9KW_vzg44FzkbRYXg/s1600/blogger-user.png&#39;)
.ssyby(&#39;blank&#39;)
</script>

Step 4. Save the changes by clicking on the Save Template button

Changing the default avatar

For Anonymous users: Replace the code in red with your image address
For Blogger users: Replace the URL in blue with your own.

You can choose an avatar from here and then copy the url of it:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1lROBqTAcnQy89OOeXT6fM7nmhnWm-G0lDCzrnxdX5bFOnEqLdlhsbs2twSXnijrfMHvjhKopGFqzAqssKeGgVdSfy3AhsScP73YFIzmgjgS2jo6T8znp3xw6l8TtN2cCX_teofJ1Iwk/s200/default_avatar.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyO7TYypnPTyWbt7iMNyqUzjx8LzNB_3z124ndMJ4qQKG0-qKrfiDMEW_TEsaWscgykCxwUhOSVgwd6XB7b1UF-lT6eJZSkrY1tQIfQAGHEkqvvjTf9iZV6dVWRlyrVG8gIm990whNzWE/s1600/facebook.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqztpF378kUpdNnxmVw7GDh7hSComVj7Edf0Y4ub3tl8deKFrjhnm0jZC_qdhz7rmNA8PleKYUjZ9QDVlS5cH60-xwp6MK7cFYDdUkCz3dKWfxtVwjqjY9fZ2BaKcNntL5gjWqtVexLAE/s1600/anonymous3.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2fS3sjKj6_F3REEhkR0dksuIbmIellNyMROf0oiENR1xihdQ-Yd9JwEMyjnk3QA2B3pj3SckKLfduqzV6sMQRqZoNewMvlAMhOZ9CWZoV5u1Xhv-d6BBtS1EM8uBASo6JUMPUURvs0HxZ/s1600/blogger-user.png

That's it! If you found this trick useful, please consider sharing it.

Read More

How To Change Avatar Size In Blogger Comments

This simple trick will help you modify the avatars size in Blogger comments whose default size is of 36px... pretty small considering that a lot of sites these days are using much larger avatars. To change the style and size of avatars is very easy - you just need to add the CSS code in your Blogger template that will make size of avatars to have width and height of 64px.

Step 1. Go to Dashboard - Template - click on the Edit HTML button

...click anywhere inside the code area and press CTRL + F to open the blogger' search box

Step 2. Type or paste this tag inside the search box and hit Enter to find it:

]]></b:skin>

Note: you may need to click on the arrow next to it and then search this tag again

Step 3. Depending on which comment system you use (with reply/no reply), copy and paste one of the following codes just above it:

[Works in Blogger threaded comment system]

.comments .avatar-image-container{
background-color: rgb(34, 34, 34);
border:1px solid #ccc;
margin: 0px 10px 0px 0px;
padding: 0px 0px 0px 0px;
width: 64px;
max-height: 64px;
}
.comments .avatar-image-container img{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
max-width: 64px;
height: 64px;
}

[for old blogger commenting system]

.avatar-image-container{
border:1px solid #d6d6d6;
margin-left: -30px;
-moz-border-radius: 4px;
background:#fff;
height:70px;
min-height: 70px;
width:70px;
min-width:70px;
}
.avatar-image-container img {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio4I2deroWJzh0eWTy3vsaO_LJM992L9eZaAZX6-xhfONdzdbD_2QgZz2iLcbXZ4lcqlhu52Knja18YoC9flSjw8sZi0SuTWPas9J1BFJ54qmXtUA2dH4cPWe96KTm421AStwsLYInuBU/s200/anonymous.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
width:70px;
min-width:70px;
height:70px;
min-height:70px;
}

Note: For bigger/smaller avatars, change the values in red. To change the anonymous avatar, replace the URLs in blue with your own. (works only for the old commenting system i.e. that has no reply option)

Step 4. Cick on the Save template button to apply the changes.

That's it. Now the Blogger comments avatars should look bigger.

Read More