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!!! :)

Numbered comments on threaded comments for Blogger/Blogspot

In a previous tutorial you've seen how you can add numbered comments to your blogger blog, unfortunately, this trick worked only for those who don't have the reply option and are still using the old blogger commenting system. But we won't have any problem this time because this tutorial will show you how to add numbered comments with comment bubbles on the threaded comments, as well ;)

What the following CSS trick will do for you:

1. When the general block of comments is initiating (.comments-content) a counter called countcomments activates and starts with an initial value of 1. 
2. Then, each time the code flow goes through a review of any level, either the original comment or a reply (.comment-thread li), it will bring us in front (:before) of the comment's body the number that is the counter.
   
3. Finally, this is incremented in the counter (counter-increment).

See the screenshot:

Isn't that great? I'm pretty sure many of you have been waiting for this cool trick. So, let's begin applying it for our threaded commenting system.

Steps to add bubble comments count

Step 1: From your Blogger Dashboard, go to Template and 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 the following tag inside the search box and hit Enter to find it:

]]></b:skin>

Note. you have to click on the arrow next to it, then search the ]]></b:skin> one more time 

Step 3: Add the following code just above ]]></b:skin>:

.comment-thread ol {
counter-reset: countcomments;
}
.comment-thread li:before {
content: counter(countcomments,decimal);
counter-increment: countcomments;
float: right;
z-index: 2;
position:relative;
font-size: 22px;
color: #555555;
padding-left:10px; 
padding-top:3px; 
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrLdY4frC0v2PaIhl3vBbCKpAQb1r-tebb7jSR_sFFaiezSDKxrWRnSROn9yQmlmhJhxC1mn1J3PnKG_e-eqvUlnygLjeQ3a9E0SZS-2ew2e-BR5yZ0aCqS6j8gIjwb6DQxhfEqiC8OODX/s1600/comment+bubble2.png) no-repeat;
margin-top:7px; 
margin-left:10px; 
width: 50px; /*image-width size*/
height: 48px; /*image-height size*/ 
}
.comment-thread ol ol {
counter-reset: contrebasse;
}
.comment-thread li li:before {
content: counter(countcomments,decimal) "." counter(contrebasse,lower-latin);
counter-increment: contrebasse;
float: right;
font-size: 18px;
color: #666666;
}

Note:

• if you want to have no bubble icon, remove the code in red (including the address in blue)
• to change the comment bubble, replace the code in blue with the URL address of your own icon. If you're not sure what icon you should use, you can find some cool icons in my previous posts (see these tutorials here and here)
• to change the position of comments count, increase/decrease the values (3 & 10) from padding-top and padding-left
• to change the position of comments bubble/icon, change the values (10 & 7) from margin-left and margin-top

Step 4: Now Save the Template and you're done!

If you enjoy reading this blog, please share and subscribe. For any questions you may have, leave a comment below.

How to Create Drop Caps (Big First Letters) in Blogger/Blogspot

Here's another way to customize your Blog. In this case, your Posts and Comment's first letter. The effect is a large first letter stretching down three or four lines with the text wrapped around. The drop cap letter can also use a different font and have a different color from the rest of the text. This style can be often seen in newspapers, literature, magazines. So, in this tutorial I will show you how to apply automatically a Magazine text style on Blogger Posts and Comments. Let's start adding it...

-> Add Drop Caps For Blogger Posts

-> Add Drop Caps For Blogger Comments

Big First Letter for your Blogger / Blogspot Posts

Step 1. From your Blogger Dashboard, go to Template and click on the Edit HTML button:

Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the Blogger' search box. Type this piece of code inside the search box then hit Enter to find it:

]]></b:skin>

Note: you might need to click on the arrow next to it to expand the code within and then you need to search ]]></b:skin> one more time.

Step 3. Just above ]]></b:skin>, add the following CSS code:

.capital:first-letter {
float: left;
display: block;
font-family: Times, serif, Georgia;
font-size: 40px;
color: #000000;
margin:0px 5px 0 0;
padding:0 0 0 10px;
}

Color - change the value in blue with the hex of your color
Size - to change the letter size, increase/decrease the value highlighted in pink.

Step 4. Now search for this code:

<data:post.body/>

Step 5. Then immediately before and after add the red fragments you see in the example below:

 <div class='capital'><data:post.body/></div>

Step 6. Save the changes by clicking on the Save template button.

Important! If the above code is not working, add one of following codes from this example:

<p class="capital"><data:post.body/></p>

Or try this instead:

<span class="capital"><data:post.body/></span>

Step 1. Log in to your Blogger account > go to Template > Edit HTML > click anywhere inside the code area and press CTRL + F keys to open the search box

Step 2. Type the following piece of code inside the search box and hit Enter to find it (if you have already added this code, skip step 2 & 3):

]]></b:skin>

Step 3. Add the following code just above ]]></b:skin>:

.capital:first-letter {
float: left;
display: block;
font-family: Times, serif, Georgia;
font-size: 40px;
color: #000000;
margin:0px 5px 0 0;
padding:0 0 0 10px;
}

Color - to change the letter color, replace the value in blue with the value of your color. Here's a tool that might help you to find the hex of the color that you need: Color Code Generator
Size - to change the letter size, change the value in pink.

Step 4. Then Search for this piece of code:

<data:comment.body/>

Step 5. Add the red codes before and after <data:comment.body/> as you can see in my example below:

<p class="capital"><data:comment.body/></p>

Step 6. Save your Template.

That's it! Now you have a cool drop cap first letter on your blog. If you have any question, leave a comment below!

How to Customize Blogger Comments By Adding a Background Color and Border

The comments are an essential part of any blog as in them readers express their opinions about a post or a blog, thus it is important to spend a little of our time to make this part looking more stylish, accessible and neat.

To put our comments in order, we should make each comment easy to identify, so that we'll know from where it begins and to where it ends, otherwise it becomes a jumble of letters and our visitors could run away. Here are some methods to make some order by separating each comment.

- Add a Separator To Blogger Comments
- Add a Divider Below Comments in Blogger
- Fully Customize Your Blogger Comments By Changing The Background Color and Border

The first method is the easiest: we'll separate our comments by adding a border below each of them.

How to Add a Separator/Border To Blogger Comments

Step 1. To add a simple separator go to Template > Edit HTML and click on the small arrow on the left of <b:skin>...</b:skin>

Step 2. Click anywhere inside the code area and search using CTRL + F keys, for the following piece of code:

]]></b:skin>

Step 3. Paste the following style just above it:

- If we are using threaded comments (with the reply option):

.comment-block {
border-bottom: 1px solid #000000;
}
.comments .continue {
  border-top: 0px solid #000;
}

- If we are using previous commenting system (with no reply option)

#comments-block .comment-footer {
border-bottom:1px solid #000000;
}

Note: To change the border's color, replace the bolded color value and to change its thickness, increase/decrease the 1 value.

Step 4. Save the Template.

Instead of a simple border, we can also add a divider/image between our comments.

How to Add a Divider (Image) Between Each Comment in Blogger

Step 1. Go to Template > Edit HTML and search (CTRL + F) for the following piece of code:

]]></b:skin>

Screenshot:

Step 2. Paste the following just above it:

- If we are using threaded comments (with the reply option):

.comment-block {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1SaIvJAFRSTICafinmEunt0fEZqzxO5-0MADihVaVFgdrjYKmZH6SoJbYprasSMQSYVaZt07ZJAY4AB__b6YOWegJ7I2opcAWlVeSNYqKKenBCC6upntWbffaWU7qoinp52uH7O_8a88v/s1600/74.gif);
background-repeat:no-repeat;
background-position:center bottom;
padding-bottom:30px;
margin-top: -10px;
}
.comments .continue {
border-top: 0px solid #000;
}

- If we are using previous commenting system (with no reply function)

#comments-block .comment-footer {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1SaIvJAFRSTICafinmEunt0fEZqzxO5-0MADihVaVFgdrjYKmZH6SoJbYprasSMQSYVaZt07ZJAY4AB__b6YOWegJ7I2opcAWlVeSNYqKKenBCC6upntWbffaWU7qoinp52uH7O_8a88v/s1600/74.gif);
background-repeat:no-repeat;
background-position:center bottom;
height: 50px;
}

Note: The URL that is in blue represents the image that you can change as you like, just remember that at the height must set the height of an image with 30px more, for instance, if the image's height is 50px then the value will be 80px. This is for making sure that the image won't overlap the date of comments. (for threaded comments, increase/decrease the padding 30 value)

Step 3. Save the Template.

But you can still have more styles for each comment, for example adding a background color and a border.

How to Add A Border and A Background Color To Blogger Comments

Step 1. Go to Template > Edit HTML and search for the following piece of code:

]]></b:skin>

Step 2. Paste the following just above it:

- If we are using threaded comments (with the reply option):

.comment-block {
background:#F9F9F9; /* Background Color */
border: 1px solid #f1f1f1; /* Border style */
margin-bottom:20px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.comments .comment-thread.inline-thread {
background-color: #FAFAFA; /* Background color behind the replies */
border-left: 4px dotted #E6E6E6; /* Border on the left side of replies */
}
.comment-content {
padding:2px 10px 10px 10px;
color:#444444; /* Font Color in Comments */
}
.datetime a {
font-style:italic;
font-size:9px;
margin-left: 2px;
}
.comments .comments-content .user a{
color:#1982D1; /* Author's name color */
font-size: 12px; /* Author's name size */
padding-left: 10px;
font-weight:bold;
text-decoration:none;
}
.comments .comment .comment-actions a,.comments .comment .continue a{
display:inline-block;
margin:0 0 10px 10px;
padding:0 15px;
color:#B4B4B7;
text-align:center;
text-decoration:none;
background:#F8F8FB;
border:1px solid #C2C2C5;
border-radius:4px;
height:20px;
line-height:20px;
font-weight:normal;
cursor:pointer;
}
.comments .continue {
border-top: 0px solid #000;
}
.comments .comments-content .icon.blog-author {
background-image: none;
margin-left: -10px;
}
.comments .avatar-image-container{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width: 40px;
max-height: 40px;
border: 1px solid #F2F2F2;
padding: 1px;
}
.comments .avatar-image-container img{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
max-width: 40px;
height: 40px;
}

Step 3. Save the Template.

- If we are using previous commenting system (with no reply function):

Step 1. Search for this line in your template:

<b:loop values='data:post.comments' var='comment'>

Step 2. Then, add the following code just below of it:

<div class='comments-new'>

Step 3. Look a little further down and you'll see the </b:loop> code and just above it, add this:

</div>

Step 4. Now find this:

]]></b:skin>

Step 5. And just above of it, add this CSS code:

.comments-new{
background:#F9F9F9; /* Background Color */
border: 1px solid #f1f1f1; /* Bprder Style */
margin-bottom:20px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.comment-body {
color:#444444; /* Font Color in Comments */
padding:10px;
}
.comments-new a {
padding-left: 5px; /* Link color */
color: #4A9BD8;
}
.comment-timestamp a {
font-style:italic;
font-size:9px;
padding-right:10px;
padding-left:10px;
}
.comments .avatar-image-container {
overflow: visible;
}

(The rounded edges will not work in Internet Explorer with CSS)

In either case, you can change the background color, border, etc.. in parts with annotations in green.

Step 6. Save the Template.

If you need more help, leave a comment below.