How to add social media sharing buttons in blog to grow visitors?

We have posted a tutorial on how to add Social Media share buttons powered by Addthis manually in your blog via secondary gadget. That was quite a basic and doesn't guarantee availability of room for changes in future. Moreover, adding third party gadget in your blog reduces loading speed.

Therefore, today I would like to extend that tutorial to little advance level, but to better level, and take you through in adding Social Media sharing buttons of Addthis by getting inside Addthis dashboard. We have done same in Getsitecontrol. This means by creating an account with Addthis, subscribing to all its tools and keeping them enabled and active.

Let us get started. Please follow the given steps:

Step-1

Open Addthis.

            

Step-2

Create your Account.

      

Step-3

Click on 'Get Share Buttons'

           

Step-4

Choose a side. Left or Right

            

Step-5

Choose theme. Consider the background of your blog.

               

Step-6

Give title of the gadget

              

Step-7

Select the number of buttons you want.

           

Step-8 

You can click on 'Show More Options'

          

Step-9

Make customization as you wants

            

Step-10 

Click on Activate. You're done! 

                 

Addthis not only provides social media sharing buttons for bloggers. It also provides email list building facilities, content recommendation gadget, social media follow buttons, analytical tools and also conversion tools. And all those tools are for free. Wonderful, right?

How to customize WordPress Theme Twenty-Ten for Blogger - I

We already know one of the most positive competencies of WordPress as a CMS is the elegance and number of their themes. But since now many third party web designers in the process of linking pros of WordPress with cons of Blogger, there are many WordPress themes that are converted into Blogger version. People in blogger can use them.

One of such WordPress themes is Twenty-Ten. I am also big fan of its later developed versions. It's simple to use yet elegantly professional. If you also want to use it in your blog (blogger), you can download from HERE.

Read: 5 disadvantages of opening a blog at WordPress

  

But I don't you to simply download and use it immediately in your blog. I want you to make some customizations so that it's better in appearances and suits your requirements. I will guide you through customizing it in 5 areas. They will be in:

1. blog description statement
2. navigation tabs
3. header banner/blog banner
4. blog post title
5. footer/copyright statement

Let us first start with customization of a blog description font. If you have observed, by default, the blog description statement is in italic font. If you love in italic, it's fine. If not, let us change into normal font. Find the given CSS:

#site-description {
clear: right;
float: right;
font-style: italic;
margin: 14px 0 18px 0;
padding: 0;
width: 220px;
}

In above, change blue font italic into NORMAL. If you want to stretch equal to right-hand side border of blog banner, you can reduce width by few points. Don't forget to Save Template.

Read: How to download a Blogger Template and save in a Computer

          

We'll then customize the navigation tabs. It's actually page-lists of a blog. This template has inbuilt navigation tab. We just have to link them to our already-created pages. It has got given tabs:

1. Home
2. About
3. Contact
4. Menu

We are fine with other three. We don't like the fourth one that has got sliding/drop-down navigation tab. We want to remove it and make all the tabs click-able in one level. Let us change one by one. Find the given CSS:

<li class='page_item'><a href='http://litethemes-twentyten.blogspot.com/p/about.html' title='About'>About</a></li>

The above CSS is for 'About' tab. The RED font is a default link to the About page of this template. Replace it with your own 'About' page URL link.

   

<li class='page_item'><a href='http://litethemes-twentyten.blogspot.com/p/contact.html' title='Contact'>Contact</a></li>

You also have to replace RED font with your own Contact page URL link. It's a default link of the template. Now let us break navigation tabs into fixed and drop-down. Home, About and Contact are fixed. Now in Menu, there are drop-down features.

<!-- begin example drop down menu -->
<li class='page_item'><a href='#' title='Menu'>Menu</a>
<ul class='children'>
<li class='page_item'><a href='#' title='Sub Menu #1'>Sub Menu #1</a></li>
<li class='page_item'><a href='#' title='Sub Menu #2'>Sub Menu #2</a></li>
</ul>
</li>
<!-- end example drop down menu -->

If you want to remove just the sub-menu, delete the BLUE font in above CSS. If you don't want it either in fixed tab either, delete the whole of above CSS. In above please note that # are respective default navigation tab links. 

How to add 'About Me' using HTML/JavaScript Gadget in Blogger?

In our previous post, we have shared 5 simple methods to add 'About Me' or legal owner details in Blogger. One of them, and which is also highly recommended is HTML/JavaScript Gadget generated one. We have promised to bring a tutorial on this. So here it is. 
      

When we want to add this using HTML/Javascript gadget box, first your blog must have this gadget being added. And only then details are being added in its content. If you don't know how to add it, follow the given steps:

1. Login to your blog
2. Select the blog (if you have more)
3. Click on drop-down menu
4. Click on Layout
5. Click on Add a Gadget
6. Scroll down
7. Select HTML/JavaScript
8. Keep the title as About Me
9. Click on Save

This will add HTML/JavaScript Gadget in your blog. Now you have to give text information about you in its content space.

1. Locate your About Me Gadget
2. Click on Edit
3. Keep the title as it is
4. In content, add the given codes:

<p align="justify">I am Sherab Tenzin, the main person behind this blog <b><a href='YOUR BLOG URL' rel='about me'>YOUR BLOG NAME</a></b>. He is from Thrisa, Shingkhar, Zhemgang. He has created this blog to share his passion of writing and sharing with his readers. He lives in Thimphu with his legally wedded wife.  

</p>

Now let us go through how to customize this to suit your needs and wants. The RED font in above is alignment of text. I have kept it as justified. You can change into left, right or centre base on your desire. 
          
Read: How to make post title text in bold, italic or underlined in blogger?
       
You must replace YOUR BLOG URL with your blog's URL link and then YOUR BLOG NAME with your blog's name. And BLUE font texts are my details which you have to replace with your own.
       
Read: How to replace newer post and older post links with post titles?
         
Once you have customized everything and then having clicked SAVE button, your About Me will appear like in given image. 

If you don't want to show the title, instead of giving About Me as a title, give <HTML/>. This it. This is the most simplest version of HTML embedded About Me in blogger. In our next post, we'll bring more advanced version where you can also add your profile image and also add social network profile links. 

5 simple methods to show legal owner details of a blog in blogger

When we read a blog-no matter whether it has good contents or excellent design, we love to know who is the person behind that blog. This means we are trying to know the legal owner of the blog. 

  

This means providing ownership details of a blog is very important. When I mean ownership details, I mean what we usually called as 'About Me' details of a blog. The 'About Me' gadget or page can be synonymous to legal ownership notice of a blog.

Read: How to add simple dotted border to post titles in blogger?

   

This legal ownership notice and for convenience, I will call it as an 'About Me', can be added to a blog in following methods:

1. In page/Static posts
2. Profile Gadget (Google+)
3. Profile Gadget (Blogger)
4. Text Gadget
5. HTML/JavaScript Gadget

We have added this notice as an 'About Us' page. If you add your blog's legal owner details using this method, you can provide as much more information as you want. You can also add third party links and also upload owner's/owners' profile photos. 

Read: How to add simple individual post views counter in blogger?

If you add it using Profile Gadget, your blog's legal owner details will be an information given in either Google+ profile or blogger profile whichever you have activated to access your blog. In this case, you don't have to add profile photo and add text. It's pre-designed and you just have to select from a list of free Gadgets. These are the most easiest and popular methods. 

Read: How to make blog archive as another page in blogger?

        

If you add legal owner details using text gadget, you can add only the text information. You cannot upload image and link to third parties. This is not being recommended.  

Read: How to remove attribution link from a footer of blogger template?

   

And the third one, the most sexiest methods of all. This is a highly recommended method. If we use this method, we give details in text, upload profile photo, link social networking site profiles and also add stylish marquee text below. 

Read: How to remove brown blogger logo from blogger profile gadget?

  

I can assume that almost every blogger knows how to use all methods except the last one. I will go in detail and help you add one using the last method i.e HTML/JavaScript Gadget in my coming post. Remain in the loop and check my updates if you don't want to miss that tutorial.  

How to remove Quick Edit button from a blogger post in Blogger?

You must have seen a little brown pencil at the bottom of your blogger post. If you hover your cursor, it will show as Edit Post. This is the quick edit button. If you have opened your blog and you are in home page of the blog, and if you click this button then you are actually making an attempt to edit that post.

If you have this button enabled, the navigation across your blog while trying to edit a post will be shortened. You don't have to go all the way to posts list and then click on edit post page to edit the post. 

If your blog doesn't show this button and you want to have it, follow the given steps to activate this button:

1. Login to your blog
2. Select a blog (if you've more)
3. Click on Layout
4. Click on Edit button of Blog Posts Gadget
5. Scroll down
6. Click on Show Quick Editing (give a tick)
7. Click on Save

Once you have activated the quick editing option, the quick edit pencil will appear below every post. But this pencil will be visible only to admin and other co-bloggers who have actually written the post. 

However, some bloggers opt disabling the quick edit pencil button. They say that it doesn't make their blogs appear good. 

Read: Two methods to add copyright notice in free blogger templates

    

If you are also one of such bloggers, you can also deactivate it and hide this quick edit pencil image from showing below every post of your blog. But first you must ensure that this button is activated in your blog. By default it will be activated. 

Read: How to make privacy policy of a blog easily accessible for readers?

   

To ensure it's enabled and you want to deactivate it, open your blog and see if the brown pencil image is appear below your blog post. If it doesn't appear so, you can say it's being disable. You don't have to do anything. 

If it is appearing in the post footer and you want to remove it, please follow the given steps:

1. Select a blog (if you've more)
2. Click on Layout
3. Click on Edit button of Blog Posts Gadget
4. Scroll down
5. Click on Show Quick Editing (remove tick)
6. Click on Save

If you activate it, only you can see its display. Even if you deactivate, you cannot see. Readers cannot see it in either of the option. They don't have access to right of editing of your posts. 

How to add both vertical & horizontal social media share buttons?

We have given a tutorial on how to add share buttons using Addthis. Though the buttons provided by addthis are on varied designs, adding of their buttons is quite lengthy-procedures. In every possibility, newbies may commit some errors.
         

And for this reason, here is yet another tutorial on how to add both vertical as well as horizontal social media share buttons in blogger. 

But if you love share buttons of Addthis, you may add from it. This tutorial is for newbies who don't know much about adding third party gadgets.

Step 1

Login to your blogger account

Step 2

Select a blog (if you have more)

Step 3

Click on drop down menu

Step 4

Click on Layout button

Step 5

Click on Add a Gadget

Step 6

Select HTML/JavaScript

Step 7

Keep title blank

Step 8

In content, add the share button codes of your choice & click Save.

Horizontal Social media share button code:

<script>
document.write('<script src="//sharebutton.net/plugin/sharebutton.php?type=horizontal&u=' + encodeURIComponent(document.location.href) + '"></scr' + 'ipt>');
</script>

Vertical Social media share button code:

<script>

document.write('<script src="//sharebutton.net/plugin/sharebutton.php?type=vertical&u=' + encodeURIComponent(document.location.href) + '"></scr' + 'ipt>');

</script>

And if you want the share buttons both in vertical as well as in horizontal design, adding them in one gadget won't work. You have to add in two separate gadgets. 

2 different ways to add copyright notice in free blogger templates

If you are using free blogger templates, there isn't copyright notice given in the footer of the blog body unlike in some blogger supported third party templates. 

However, we can add it manually with some customization in the footer frame. The copyright notice is important to protect your online works. Therefore, today let us learn to add it in our blogs.
      

We can add copyright notice with attribution link of a template or by removing it and adding it with third party gadget. Let me give how it can be added in these two methods.

Method 1

In this method, we will add copyright notice in front of an attribution link given in the footer of the blog body. 

What is an attribution link?
When you open your blog and scroll down till its footer, there will a short text with template name you are using and the link to blogger. Its format will be like given below:

'Template Name. Powered by Blogger. ' I use simple template and my attribution link will be 'Simple Template. Powered by Blogger' 

In this method, we have to add the copyright notice before this text. To add this, follow the given steps:

Step 1
Login to your blogger account

Step 2
Click on View Blog (on right side)

Step 3
Scroll down to locate attribution link

Step 4
Click on spammer symbol/edit of this link. 

Step 5
In Copyright (optional), type your copyright notice. The format of the copyright notice should be 'Copyright © Year Your Blog Name' My copyright notice will be something like: Copyright © 2015 To Learn Blogging' without single inverted coma. 

Method 2

In this method, we have to first remove the attribution link. Read here to remove it. And then add copyright notice as an additional HTML gadget. The steps are given below:

Step 1

Select the blog (if you have more)

Step 2

Select layout

Step 3

Click on Add a Gadget

Step 4

Select HTML/JavaScript

Step 5

Keep the title blank. In its content space, paste the given HTML code:

Copyright &#169; 2015 To Learn Blogging.

Step 6

Change blue font into your blog's publishing year and red into your blog's name. And then click on Save when all is done. 

Step 7
Since this notice should be in footer, drag and drop it in footer. Click on Save arrangements once it's done. 

Step 8
Click on View Blog. Your Copyright notice should appear in footer. 

Bonus
If you want to link your blog's name with its URL address in step#5 of method 2, replace HTML code I have given in that step with given HTML:
  

Copyright &#169; 2015 <a href='http://stcbmtl.blogspot.com/' rel='To Learn Blogging'>To Learn Blogging</a>.

Change blue, orange and red font with applicable details and then click on Save. The copyright notice should appear just like this: 'Copyright © 2015 To Learn Blogging.' without single inverted coma. 

How to make privacy policy display easily accessible in blogger?

We have learned two methods of preparing a privacy policy of a blog in blogger. You can read it once more HERE. I have mentioned reasons as to why a privacy policy is important for a blog and especially if your aim is to apply for various advertising networks like Google Adsense.
              

I assume you have prepared a privacy policy in one of the methods I have suggested in previous post. In today's tutorial, let us learn various methods in which this privacy policy can be displayed and make accessibly clickable to your readers and ads networks.

Read: How to add stylish and responsive table of contents in blogger?

  

When it comes to display of a privacy policy, we can do it in three ways. They are:

1. In Footer as an Attribution Link
2. In navigation tab as a page

It's often recommended that links like privacy policy, disclosure policy, terms of services and copyright policy should be placed in the footer. 

But this recommendation is for dynamic websites having easily customizable templates. In our case, by default, we cannot place all of those links in footer as attribution links. We can place only any one of them. A limitation. 

Therefore, I recommend to place privacy policy in navigation tab as a page only. However, I have placed mine in footer. Just because I have only one such link. If you have more, you have to place in navigation tab only. 

Read: How to improve blog's traffic from Google plus communities? 

However, some bloggers want a privacy policy in footer and others in navigation tab. So tutorial to place privacy policy in footer as an attribution link is also important. 

How to place privacy policy as an Attribution Link in Footer?

Step 1

Login to your blogger account 

Step 2

Select a blog (if you have more)

Step 3

Click on drop-down button

Step 4

Click on Layout

Step 5

Click on Edit button of an Attribution gadget in Footer Area

Step 6

In Copyright (optional), copy and paste the given HTML Code:

<a href="http://stcbmtl.blogspot.com/p/privacy-policy.html">Privacy Policy</a>

Step 7

Replace the red colored font in above with your privacy policy URL. Click Save. You're done.

If you have prepared privacy policy as a page, you have to provide URL of that page and if you have prepared as a post, URL of that post must be provided. I have already recommended to prepare as a page in previous post. 

How to display privacy policy as page in navigation tab?

            
This is quite easy if you know how to make your new page visibly read-able and click-able in navigation tab. 

Step 1

Click layout (I assume you're already logged in)

Step 2

Click on Edit button of a page gadget

Step 3

Select (give a tick) to privacy policy

Step 4

Do some re-arrangement. Click Save. You're done

If you want to show similar links in attribution, you can do just by making changes in above step#6. If this didn't work out well for you, please leave as comment. I will see what must have not gone right. Thanks. Cheers. Keep blogging! 

How to align blog post date in center or right-hand side in blogger?

In blogger, by default, post published date will be above post title and on the left-hand side. But this is just by default. If you want this date to be in center or on right-hand side, you can have by adding a stanza of customized secondary CSS.

Let me guide you step by step in re-positioning a post published date either in center or right-hand side of the post body. 

Step 1

Login to your blogger account

Step 2

Select the blog (if you have more)

Step 3

Select the drop-down menu of the blog

Step 4

Select template button

Step 5

Click on customise button

Step 6

Click on Advanced

Step 7

Scroll down

Step 8

Click on Add CSS

Step 9

In add custom CSS, copy and paste the given CSS code:

.date-header {
text-align:right;
}

Step 10

Click on Apply to blog. View blog. Post published date be re-positioned. And if you want that date to be in center, you can just change red font in step# 9 into center.   

How to remove an unwanted space above blog header in blogger?

We have learned how to remove Navbar from blogger. But when the Navbar is being removed, an unwanted space comes up just above the header of a blog. 
   
This appears bit unprofessional. And who would love unprofessional blog? Therefore, today let us learn how to remove or reduce this space from the blog and try making it appear more professional.
        

But don't worry. There is nothing much to be done. It's simple and easy. I will guide you step by step. 

Step 1

Login to your blogger account

Step 2

Select a blog (if you have more)

Step 3

Click on drop-down menu

Step 4

Click on the button Template

Step 5

Click on the button Edit HTML

Step 6

Find (ctrl+f) the code: </head> 

Step 7

Just above the code in step#6, copy and paste the given code:

<style type='text/css'>
.content-inner
{
margin-top: -22px !important;
}
</style>

You can change blue colored font in step#7 to have desirable space above your blog header. By rule of integers, higher (-)ve value will reduce the space.

2 simple & Effective methods to prepare Privacy Policy in Blogger

It was few days back I have submitted my application to Google Adsense to see if I too can make some money. But no sooner it was submitted than I received a warning from Adsense team saying that my blog lacks privacy policy. I then realized how important is privacy policy for a blog. 

It's added now. But I don't want you to receive this similar warning at the time of applying for Google Adsense. So I thought to share procedures to add privacy policy in blogger. 

             

Read: How to write a blog post to increase the loading speed of a blog?

    

There are two methods through which we can add the privacy. They are in the form of yet another:

1. Post
2. Page

I will guide you through adding it using both the methods. I will also share their pros and cons so that you can choose suitable method for your blog.

Privacy Policy as a Post

If you choose this method, you have to write your privacy policy just like how you usually write a new blog post. The only difference between a post for privacy and a real blog post is they should have different published date. 

Read: How to change blogger post publish date to time and vice-versa?

When you write a real blog post, you don't change the published date on the right-hand side a post compose frame. Blogger will assign current date as your publishing date of that post. 

But when a new post is drafted for your privacy policy, you have to change the published date of the post in past. Setting a date before the published date of your blog's first post. This is just to avoid display of your privacy policy in front page a new post. 

Read: How to add blog archive as another navigation tab in blogger?

You can set the date in past by clicking on Schedule button on the right-hand side and then on Set Date and Time button.

Pros

1. Privacy policy appears in search result.
2. Privacy policy can be treated as past post or future post by changing publishing date & time.

Cons

1. Privacy policy will be less read by visitors unless searched.
2. Related posts will also appear below the contents. 

Privacy Policy as a Page

You can also add privacy policy as yet another page of your blog. You just have to write the policy in page's content. The privacy policy will be shown with other tabs in pages gadget. 

Pros

1. Quick & Noticeable for readers.
2. Possibility of being read more.

Cons

1. One more navigation tab.
2. Doesn't appear in search result.

It's up to you whether to add a privacy policy in your blog in the form of yet another post or as another one more page. 

We can also display the privacy policy of a blog in two methods. They are in the areas of:

1. Navigation Tab
2. Footer Link

I have added my privacy as a footer link. But you can also add as link in navigation tab. Please remain in my loop. I will update on how to add your privacy policy in Navigation Tab as well as in Footer just like mine. Cheers. Keep Blogging!  

How to insert tables in blogger post using MS-excel?

Blogger doesn't have a feature to insert tables in post body. But as bloggers, sometimes there come a time we need to insert tables.  

      

Read: How to disable magazine style design from a blogger template?

   

We can insert table manually using other third party tools. There can be many. But I have been using Tableizer, a tool that can be used to create tables in HTML form from MS-excel. 

Step 1

Prepare a table in MS-excel with contents

Step 2

Select and copy the table

Step 3

Open Tableizer

Step 4

Paste the table in tableizer

Step 5

Change font size, color and font types

Step 6

Click on Tableize it

Step 7

Cut the HTML code

Step 8

Create a new post

Step 9

Select the post in HTML

Step 10

Paste the code cut from Tableizer.

You have added a table in your post. Click on Tableize again to create more tables and insert in your blog post. 

How to add bullet points for popular posts Gadget in Blogger?

Blogger doesn't have bullet point for any sidebar gadgets. But we can add it by doing some HTML customization. This can be done to gadgets like popular posts, recent posts, blog lists etc. 

The steps are same. But in this tutorial, I will be inserting bullets in the popular posts gadget. You can try for others.

Step 1

Login to your blogger account

Step 2

Select the blog. Make sure it has popular posts gadget

Step 3

Click on Template

Step 4

Click on Edit HTML

Step 5

Find the code: 

.widget .popular-posts ul {
  list-style: none;
}

Step 6

Replace red font with 'square' or 'heart' without inverted comma.

If you want this to other gadgets that are in nature of listing, you can try the above steps. But you should locate them in HTML body.   

How to activate page displays in Dynamic Blogger Templates?

In Dynamic Blogger Templates, by default, instead of horizontal navigation menu of what we call as pages, comes various view options of the template. If we try to re-position the pages to be shown, it doesn't support normally. 

  

But I have found a way around. This means we can keep our pages in click-able horizontal button and then keep those view options as drop-down menu in the first. If you like it that way, you can keep them. If you don't like that and want to keep only your pages hiding those view options, we can do so.

            

Read: Common pros and cons of using a dynamic blogger template in blogger

   

But to do that, first you have to change your current blogger template into any of the simple blogger templates. Follow the given steps:

1. Login to your blog
2. Select a blog in which you have used dynamic template
3. Click on Template
4. Click on Customize
5. Select Simple
6. Click Apply to Blog

You have changed the template to simple. Now you have to re-position your navigation menu or page links and place below blog title and description statement. Follow the given steps:

1. Just after step#6 in above, click on Back to Blogger
2. On left side, click on Layout
3. Click on Add a Gadget
4. Scroll down & select Pages
5. Click on Save
6. Re-position it just above Blog Posts frame
7. Click on Save Arrangement

You have added the pages. You have also re-position it just above post body or below blog title banner. To check it, click on view blog. But this process is only if you have pages already created. If you don't have, you have to create few pages before carrying out above 7 steps. 

                   

Read: How to change or upload free third party templates in blogger? 

   

If the menu is just below header as you wanted when you view the blog, then now it's time you have to change the template into Dynamic Blogger Template. To do this, repeat first 6 steps and select any dynamic blogger templates. 

Read: How to remove post published date ribbons from Dynamic Templates?

   

Once the dynamic blogger template is being added and when your blog is viewed, both your pages and various view options will be displayed below your blog header. Your pages will be in horizontal and the view options will be in drop down menu. 

You can follow the steps I have given in my previous tutorial to activate only one view option and then deactivate others. You can also hide the activated option and keep only your pages on display.  

How to change default post thumbnail of the Iconic Blogger Template?

In one of my previous posts, I have shared you steps on how to remove featured posts with thumbnails slider from a third party blogger template Iconic Blogger Template.

So today I want to share you another tutorial to customize this template-how to remove default post image or post thumbnail. I consider this template appears professionally better only when it's customized. 

Read: How to share Instagram photos as a badge in your blogger gadget?

   

The default thumbnail appears when you are in the front page of the blog and your post article doesn't have an image embedded in it. In this case, I mean the Iconic Blogger Template, a default thumbnail is coming some sort of album kind of image with No Image Yet caption.

This is its default thumbnail. Its screenshot is as given below:

You can locate the URL of this default image embedded in the HTML of the template. To get its URL, right click on the image>Copy Image Address>Go to Dashboard>Template>Edit HTML>Find (Ctrl+F) that URL. 
   
Read: How to add country-wise Feedjit Free live traffic feed gadget in blogger?
   
One its URL is being located, you can replace it with your own image. And the image you want to add should be also in the similar format (URL form) like their default thumbnail URL.  
   
Read: How to change default font style of a blog description statement?
     

The image to be added should be hosted image. You cannot upload from your computer. So it's better you select one from already uploaded in your blog or you can use one from Google.