Tuesday, June 12, 2012

Create a share button with a vertical bar for blogger


In various website, share button like facebook, twitter, google plus, and other social networking site are mostly common in every websites that appears anywhere in the content of their blog. The main advantage having these social networking sites in your blog, if the readers like your post and it’s very helpful, they can automatically share it. Moreover, it increases the visibility and exposure of your blog, expected tons of visitors will come on your site because of its relevant information they get from your blog. If you newbie in blogging, you don’t have enough idea what are those necessary stuffs could be apply in order to get more traffic comes on your websites. The aim why you put those buttons on your blog is to increases the reputation of your website and Google treats that your site has a good quality content in providing resourceful stuffs and updated information.

Here is how are we going to configure share button with vertical bar on your blogger.

Download first the share vertical button for blogger here. Extract the downloaded files on your computer where you want to put it. The extract file is in Microsoft Office word format, open the file and notice is composed of embedded source code. This source code we are going to put on your HTML in blogger template in order to come up share button with a vertical bar. Here the sample screenshot I provided.
Social network vertical bar share button for blogger
This screenshot looks like on your blog after following these steps.

In your blogger, go to Template and Edit HTML. Check the checkbox to Expand the widgets and used this shortcut command Ctrl + F, put <b:includable id='post' var='post'> on the textbox.

Back to your downloaded files and open to MS Word, before to copy and paste the source code, noticed some important highlighted code. Change only green highlighted code with your twitter username if you had already twitter account. If not, let jocodester as a default name.

Just below of this code <b:includable id='post' var='post'>, paste the following code. Finally, save your template to view the changes.

Note: It only appears every single page of your websites, it doesn’t appear on your homepage because share button only allows specific page to share in any social networking sites.


  1. hi! i would love to use this tutorial but the twitter button is not showing properly. could you fix it?
    it's the only tutorial that is working for me! thanks!

  2. hello, thanks for visiting my blog. make sure you put the right username on your twitter. e.g twitter/username. I also used this code in my blog, There are other browser not showing twitter button.