Saturday, 27 July 2013

How to add Twitter follow box to blogger

Hello Readers, in this article we will learn how to put a twitter follow box similar to the facebook like box in your blogger blog. You can put this widget in any JavaScript enabled webpage. Social networking websites have become a vital part of blogging these days. One such micro blogging-cum-social networking website is twitter. Today I was searching for this kind of twitter widget and came across Moopz. They have developed this widget which looks identical to the facebook like box. It allows your visitors to follow you quickly on twitter and see some familiar faces of your followers. Later in this post you will find the live demo and tutorial to add this widget in your blog.
Twitter Follow Box

How to add twitter follow box in blogger:

  • Login in to your blogger account.
  • Navigate to the layout section of your dashboard.
  • Click on “Add a gadget” where you want this widget to appear on your blog.
  • Select a text/JavaScript widget from the pop-up window.
  • Copy and Paste the following code in that window.
<script type="text/javascript"
src="http://s.moopz.com/fanbox_init.js"></script><div
id="twitterfanbox"></div><script
type="text/javascript">fanbox_init("unziptech");</script>
  • Now before saving you need to make a little change in the code. Just replace my twitter username (highlighted in red) with yours.
  • Now save the widget code.
  • Click on view blog from the layout window and see this widget in action.

Customizations:


As you can see there is not much of JavaScript code present here to make customizations. It is because the whole code is stored in an external JavaScript file hosted on the url highlighted with green color. The code above just invokes a function to make this widget appear on your blog. In order to make customizations you need to host that script on your own server or blog but I do not recommend this, because they might have copyrights for this code. This is a 300px x 300px widget and could be easily placed in your sidebar without any customizations.



This is not an official twitter widget as I mentioned above in this article, but it is surely a handy widget which can help you increasing your twitter follower’s count. We all know these counts and stats are important these days in blogging and show the popularity of your blog. I hope you get the whole procedure but still if anyone needs more help, don’t hesitate to comment here. I love to hear from my readers and would be glad to help you.



You can check out the blogger tips and tricks section of our blog for more cool blogger widgets. You might also like a cool sticky sliding notification bar similar to the one added in this blog.



If you like my work; you can show your regards by hitting the facebook like button, following us on Google+ or twitter, subscribing us or at least sharing this article with your social networks via the buttons below.

Add Auto Read More With Thumbnail To Blogger With CSS Buttons

So now I am going to share one new gadget for blogger which is auto read more thumbnail for blogger with some CSS buttons. You know that adding some read more button to the blog post brings some professionalism in the blog because people want to read the post so in the homepage of your site or blog only some selected length of content of article displayed and after that the read more button appear and visitor easily navigate from homepage to required post.


 With this way reader can easily see the other posts on homepage of the blog because it display as many post as they are. If we not add any read more point then it’s little difficult to read another post.

Blogger allows you to add read more in the post if you want to add while writing post on blogger but it’s not automatically added if the content or post text increases so we have to add some type of automatically code to blogger template to looks professional and auto adding the read-more point.

Well this is very easy and better to add the code you just have to do little work on your blogger template editing box and it will be displayed auto, here are some steps that you have to do on your site or blog.
  • Now just open your blogger dashboard
  • Click on Template section of your blogger blog
  • Click on Edit HTML like shown in the picture
  • And finally you have to add some code in it.


  • Now search for </head> code in html section of template
  • And add this code above or before the head tag

                       
                                                   
  • Now find this code <data:post.body/>
  • And replace it with this code

                       

(So when you replace the code please preview the template then go for next otherwise there are total of three codes in the whole template once you did this with once of them, try to replace with 2nd one and then preview, in every template its place is different.)

So at this time after adding the above code we have to add some css buttons to look professional, here are some css buttons you can also create your own if you want.

Now find this code ></b:skin> Aand place the this code above or before the tag.

                                                                                   Add This Code
                                              

            OR       


 

                                              
              OR        

  
      


So finally you have installed the read more for your blogger blog, you know the importance and some merits of this type of looks in blog; here I am going to show you.

You know templates are the most important part of any website blog, or personal page it attract the visitors or any other website consumers to stay on your site, while if you know and go deep then if someone stay more on your website then it has much powerful positive vote for search ranking in any search engine, with this you can easily increase your website traffic.

At coming of self-hosted websites like wordpress the blogger went little down but if you see deeper than it is more convenient then WP because it’s not hack-able (so someone not steal your website or go into it to destroy your site because its controlled by Google).

Blogger is good source of new articles and blogging platform.  You know that it’s not easy to get into hack the blogger blog, so it’s total tension free to make your own domain on it if you want to become more professional blogger.

Structure of the website or blog which stayed on blogger.com platform is more powerful security than any other website (so personally I ask you to use this one not any other).