How to add 'Facebook-Twitter-Google+' follower box

Today in this post I would like to take you through the process of “Adding a useful followers widget”. As you guys already know about a ‘follow box’. In this widget we have three in one follow box facility for Facebook , Twitter and Google+. This is a cool widget which shows all your followers at one place. Adding this widget to your blog is very easy.

Follow these steps to add this widget to your blog:

1. Login into your blog and go to Layout.
2. Click on ‘Add a Gadget’.
3. Copy and paste the below given code and click on ‘save’.
4.  Now open your blog and you can view the widget working.

Before adding the code to your blog, please paste it in notepad and make these changes:

1. Change ‘Techpro365’ to your blog’s fan page.

2. Change ‘techpro4u’ to your twitter.

3. Change the google+ id ‘106197391344352891445’ with yours.

CODE:

<script src="http://code.jquery.com/jquery-latest.js"></script> <script src="http://apis.google.com/js/plusone.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="https://dl.dropboxusercontent.com/s/m4krejz6tw6sxlf/3%20in%201%20StyleSheet.css" /> <script src="https://dl.dropboxusercontent.com/s/e5p8j4qnfvgda8p/3%20in%201%20Widget.js"></script> <div id="on"> <div id="facebook_right" style="top: 12%;"> <div id="facebook_div"> <img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAp5CyUT4QxB3-OkqrzhTwj77AlxC1M_X-Z7ag57cJY6SAY07dm4xLrFzcxek-_DTU1k0hXhEDZV-xVU38tJsFiEUAnI7MhICGvGBsVl7wZuj_Coxq3KxK10kkDzQXo7o67YPThE0lcBfQ/s1600/NBTfacebook_right.png" /> <iframe allowtransparency="true" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FTechpro365&width=200&height=346&colorscheme=light&show_faces=true&border_color&stream=false&header=false" style="border: none; height: 346px; overflow: hidden; width: 200px;"></iframe> </div> </div> </div> <div id="on"> <div id="twitter_right" style="top: 28%;"> <div id="twitter_div"> <img id="twitter_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVgHYxAw5zxZw8YslqT1gIqCeXvAEHYWKUkRa0LZ-euBMUFb4Qa2Zcv7l2IjnN3op1a8PZiGQmhAiw9Tgdrlss2MKnHbKr3g-DWHI3tTLWTBp6b-gUKTRshCi4Upsq_B4FK08MjTN58Hmg/s1600/NBTtwitter_right.png" /> <script type='text/javascript'> function fanbox_init(screen_name) { document.getElementById('twitterfanbox').innerHTML = '<iframe name="fbfanIFrame_0" frameborder="0" allowtransparency="true" src="http://s.moopz.com/connect.html?user=' + screen_name + '" class="FB_SERVER_IFRAME" scrolling="no" style="width: 300px; height: 250px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; "></iframe>'; } </script> <div id="twitterfanbox"> <script type="text/javascript"> fanbox_init("techpro4u"); </script> </div> </div> </div> <div id="on"> <div id="google_plus_right" style="top: 45%;"> <div id="google_plus_div"> <img id="google_plus_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8rDo9zHHjE4cKIfDAI0Zh9lHNR6ZV0ZkAW8bVk_C8Xv4mNyiZYy7Sw0nZTMA_1jWc_qAuHXJdsdNFcFdDHriwWE0CCNHll27XjOUP2IxAetgjY50f9IyYGr3OC1EoacnGCFJGpVsAg4E/s1600/NBTgoogle_plus_right.png" /> <div style="float: left; margin: 10px 10px 10px 0;"> <a href='http://techpro365.com'> <img alt='Tips Tricks And Tutorials' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqEll4WVNQYy2WJpGuwqW6-cnlVjQ2rQbBwFTP6ZkF6TGYxCDi58hrQNWu0o6kS5B8Ckq1iW9sqCki-lvnlvrZ-MlUTVvOY3wiv0hRgI-FaPgznMY3DxWOJ3Fg2wxHRX-FHDbPs929no2R/s1600/best+blogger+tips.png' /> </a> <div class="g-plus" data-action="followers" data-height="250" data-href="https://plus.google.com/106197391344352891445" data-source="blogger:blog:followers" data-width="270"> </div> <script type="text/javascript"> (function () { window.___gcfg = { 'lang': 'en' }; var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); </script> </div> </div> </div>

If you have any genuine queries about this post or facing any problem feel free to ask by posting in the comment box.

Print Page

How to add 'Facebook like and send buttons' for blogger.

Hello! You are here because you searched for ‘How to add 'Facebook like and send box' for blogger.’ Facebook has come up with a new set of social plugins which enable you to provide engaging social experiences to your users with just a line of HTML. The Facebook Like Button is One of them. Facebook like button will allow your readers to quickly share your posts with their Facebook Friends. You can also get to know how many people liked your Blog Post .This process includes adding a small code to your blogger template. So, before going any further please backup your template.

  

Now Login to your Blogger Account and go to Design > Edit HTML and click on the check box which says “Expand Widget Templates”.

Your template should have the specification for the fb tag that you have used. The following namespace declaration will take care of that. To declare the namespace, find “<html” and change it to <html xmlns:fb="https://www.facebook.com/2008/fbml". This is necessary for all FBML widgets using the fb tag.  So if you have already added the namespace while adding some other FB plugin, then you can skip this.

Search for “<data:post.body/>”. You may find this by pressing “Ctrl+F” buttons and type it in the search box.

Now copy the code and place it just before <data:post.body/>

 CODE:

<!-- Amazing Facebook Like and Send Buttons For Blogger by techpro365.blogspot.in--> <b:if cond='data:blog.pageType == "item"'> <div> <b:if cond='data:post.isFirstPost'> <script>(function(d){ var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;} js = d.createElement('script'); js.id = id; js.async = true; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; d.getElementsByTagName('head')[0].appendChild(js); }(document));</script> </b:if> <fb:like expr:href="data:post.canonicalUrl" layout='standard' send='true' show_faces='false' font="arial" action="like" colorscheme="light"></fb:like> </div> </b:if> <!-- Amazing Facebook Like and Send Buttons For Blogger by techpro365.blogspot.in-->

Now save your template and you will find these buttons in every post of your blog.

Print Page

How to remove 'comments box' from static page on blogger

Many bloggers face the problem of removing the ‘comments box’ from static pages on blogger. This can be done by using the page settings at the right side of the editor.

Click on ‘page settings’--> ‘options’ and select the ‘Don’t allow,hide existing’ radio button and click on ‘Done’ and update it and you are done.

Print Page

How to create an excellent 'About me' page for blogger

When it comes to putting together a powerful website or blog, every page is important. Yet many people seem to overlook the most important pages like “About me” page, and thereby commit a big mistake.

If you are here means you are so lucky that you are not committing that mistake that many others are doing. It is so true that many people want to know about you and your ability to solve their problem. If you are not sure of how to make “About me” page don’t get tensed as I will explain about some important elements of this page.

What is an “About me” page?

An about page of a website or a blog contains some important information about your Website/Service or organization. This single page speaks about Who you are, what you can do and why this website. This is a place where you talk about you and show your achievement and strong points. Of all the elements of a website, “About us” or “About me” page is one of the most important elements.

Some of the elements you should keep in mind before making an “About me” page are:

Maintain Human Touch:

Always remember it’s a point of connection between your readers and you. So, you might like to maintain the human touch, add some funny comments and also maintain the professionalism at the same time. You can start with your blog foundation, vision, what do you do, and what action they can take next.

Keep it Focused:

The main reason people will visit your “About Me” page is to find out more about who you are, and why you are the right person to solve their problem. You don’t need to write an autobiography to achieve this.

Make this page short and sweet by giving the people a little background about yourself, your qualifications and your expertise in an engaging manner.

Never ever lie to your readers:

Many people make the biggest mistake of bragging about them to make their page or biography look good. But, remember a bad reputation spreads like light! So, never lie to your readers and tell them frankly about yourself and your skills and achievements.

Keep your personal stuff aside:

This page should be more professional rather than personal. Keep your personal stuff like your hobbies, things you like etc.., away from this page. They should be presented in your social networking profile. Add a picture of yourself; tell them about your educational background and the reason behind to start this blog or website.

Think from a reader perspective:

You should think from a reader perspective view more than an author’s. You should think about what they are expecting from you. Sometimes they might be interested in connecting to you through social networking. So, give them the links of your personal profile and fan pages if any.

I think you are now ready to make your own “About me” page. Please feel free to let me know if I had missed any important aspect through the comment box below.