Adding Google+ Page Badge To Your Blog

I had previously posted about importance of creating a Google plus fan page and show you to make one for your blog. In this tutorial i will teach you to add Google+ fan page Badge to your blogger blog. This badge is similar to twitter follow button or facebook like box as it allows your blog visitors to easily +1 your fan page. just creating a fan page is not enough you need to connect your blog with your page in order to get more +1 which will eventually results in more traffic. Just follow this simple tutorial and your will be good to go.

Making Google+ Fan Page

If you already have or created a google+ fan page then you skip directly to the next part on adding google+ badge to your blog. But if you don't have google+ page then check out tutorial given below and come back here.

• Making A Google+ Fan Page

Adding Google+ Fan Page Badge To Blogger Blog.

1. Go to blogger Dashboard > Template and click on Edit Html.

2. Then search for </head> and paste the code give below just above it and save it.

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

3. After adding the plusone.js script, we will be adding google+ badge on your blog.
4. Then go back to blogger dashboard > Layout and click on Add Gadget.
5. Now select Html/Javascript and paste below code into it.

<!-- Google +1 script -->
<script type="text/javascript">
  (function() {
    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>
<!-- Link blog to Google+ page -->
<a style='display: block; height: 0;' href="https://plus.google.com/105355418052087265851" rel="publisher">&nbsp;</a>
<!-- Google +1 Page badge -->
<g:plus href="https://plus.google.com/105355418052087265851" height="131" width="300" theme="light"></g:plus>

• Replace the url of my Google+ Page with yours  
• Change light to dark if you want widget to be black.
• You may also change it height and width to change the style of badge as show in below image. Change height and width according to the badge you want.

Above image show just few badge style. There are even more height and width settings to change the badge look. In order to know more about this settings then check out article on google devloper page by clicking on link given below.

• Google Devloper - Google+ Badge

Any problem?

If you got any problem or have any question or suggestion related to this tutorial or our blog in general then leave a comment below i will be glad to help you out. Keed Blogging!

Set Up A Google+ Page For Your Blog Or Website

As you all know how good a facebook fan page or twitter follow button prove to your blog in driving more traffic, same way google+ page can help you to achieve greater traffic. If you don't know google also offers its service to create Google plus fan page same as facebook for your blog or brand. The great thing that makes google plus better then other social media site is that it helps you to get better ranking in google search results. for example: More +1 you get better is your blog search results on google. So lets create one for your blog or website.

How To Make Google+ Fan Page

1. First Sign In to your gmail account and got to this Page.
2. Then click on Product or Brand from the options and select website and click on next as shown below.

3. Enter name of Your blog and url of your blog as shown below and click on continue.

4. Now Enter Description of your blog, upload a image for your page and a email address if you like and click on Finish.

5. Done, In my next post i will teach you to add google+ badge to your blog.

    You may also like to read:

• Top 3 Effective Way To Increase Traffic To Your Blog From Facebook
• 10 Awesome Tips To Make Your Blog Popular!
• Top 5 Ways To Earn Money Online

Simple Way To Remove Navbar From Your Blogger Blog

Blogger has a default navigation bar in its template which makes your template look unprofessonal. In most of the third pary template it is probably removed or hidden, but if you are using bloggers default template then you need to remove it. Few month back you had to manually edit your blog template and add some CSS to remove navbar from your blog. But in 2012 blogger introduce new feature which allows you to remove navbar from within the layout section without editing your template. This tutorial is comletely dedicated to begineer bloggers who are new to bloggers features.

How To Remove Blogger Navigation Bar ?

1. Go to your Blogger Dashboard and click on Layout

2.  Now you will find Navbar widget on Top right corner, click on edit as show below.

3. A popup window will appear from that select off and save it as shown in below picture.

4. Done, now you will have no navigation bar on your blog.

Removing Extra Space Caused By Removing Navbar

This part of tutorial is optional if you like you can skip it. After removing navigation bar there will be some extra space on top of you template In order to remove it we need to edit the template and add some css code. If you would like to do this then follow instruction given below.

1. Go to your blogger Dashboard and click on Template.

2. Now click on Edit template.

3. Then search for code given below.

]]></b:skin>

4. Now paste the below code just above ]]></b:skin> 

#navbar
{
height: 0px;
visibility: hidden;
display: none;
}

4. Now save the changes and done.

Other Awesome Tweaks And Tips 

• What Is Jump Break And How To Add Jump Break In A Blog Post ?
• Showing Post Title Before Blog Title In Search Results
• Add "Back To Top" Button To Your Blog

Top 3 Effective way To Increase Traffic To Your Blog From Facebook

Facebook is the top social media website, morever it is ranked second after Google according to alexa. It has around 1 billion active users and recieve more then 3 billion likes and comments everyday. So you can imagine the amount of traffic you can generate to your blog from facebook by taking some effective steps. In this article i will share with you few tips to increase traffic to your blog. If you are following this methods then its really good, but if you are not then you must start following as it will really help you to reach more audience and eventually result in greater traffic.

1. Making Facebook Fan Page

You can increase traffic to your blog by making a fan page or brand page of your blog. Now a days majority of bloggers have a fan page. If a person likes your page he recieves daily update of your blog directly on his profile or news feed. The more facebook likes you have, greater is the traffic from facebook. If you don't have a fan page then go to facebook page and create one. Just creating facebook page is not enough, you will need a Facebook Like Box widget for your blog which will allow your blog visitors to like you facebook page from within your blog. In order to get this widget for your blog check tutorial given below.

• Adding Facebook Likebox To Your Blogger Blog

2. Interacting Or Commenting

Interacting with people, helping them with their problems, appreciating fellow bloggers work can help you to stand out among other users and get you respect of other bloggers and even their followers. Commenting on their fan page, liking their post will make you visible or active in social media and help you to achieve more fans and the result you know, more traffic. But some bloggers try to spam by commenting on their profile or on every status they update with link to their page. Try to write few good thing about his post and sometime add link to your blog at the end of comment. Spamming will decrease your reputation among other fellow bloggers So Beware!

• Like Our Facebook Page Here

3. Adding Good Friends

Add some good facebook friends that are from your niche, who's blog posts you enjoy reading. By liking and commenting on their post, their followers will see your action on their page and might check your blog. If you blog content is good and impressive you might turn this visitors to your follower. This seem to look long process but it really effective and works very well.

All You Want To Know About Search Engine Optimization Or SEO

Today i am going to talk about SEO and its important. SEO stands for search engine optimization. It is method or bunch of techniques performed by web devlopers or bloggers to achieve better ranking for thier websites or blog. Its method to increase visibility of your website amongs search engines such as google, bing, yahoo etc. For example: A better search engine optimized site are mostly one which get displayed on first few pages of google or bing search results when you search for particular keywords. SEO also helps to increase traffic to your blog. So lets learn more about search engine optimization.

What is SEO ?

As in introduction paragraph i have told you alot about it, SEO stands for search engine optimization. This is practice performed by web devlopers to increase their website rank. By optimizing site it makes easier for search engines like google and bing to index their site and inrcease flow of traffic to their blog. Their are lots of things that come under SEO such as site linking, using rich keywords, post title, post length and more. Below i have included importance of SEO.

Let me try to explain with simple example on image optimization. Suppose you added an image of tree to your blog, search engine will crawl that image but it will not describe what is that image. In order to let search engine know more about that picture we need to add an attribute with appropriate keyword or description of that image. This is just one technique of seo, there are many more such techniques. To know more about image optimization check out article given below.

• Optimizing Images To Increase Traffic To Your Blog

Importance of SEO

• It helps you in better ranking of your page on search engine.
• It increases flow of traffic to your blog.
• It helps in better indexing by search engines, hence increase in traffic and result in more revenue.

List Of Tutorial On SEO

This is the list of tutorial on SEO published by MBW. This list will be updated on regular basis as we published some more tutorial on search engine optimization.

• Optimizing Images To Increase Traffic To Your Blog

Take A Break And Watch Video On SEO

16+ Awesome Back To Top Button For Blogger

I had previously posted on Adding Back Top Button  for bloggers blog. In this post i will share with you guys 16+ Cool and Awesome back to top button code for your blog or website. Back to button is simple and very small widget but is kind of very usefull for your blog readers. If users are browsing through number of post on your blog this widget will let them easily go back to top of the page with a click rather then scrolling to the top, which take some time. Choose any button from the code given below.

  How To Add Back To Top Button

Before selecting back to top button you need to know how to add this widget or plugin to your blog. In order to know more about this check out detailed tutorial given below.

• Adding Back To Top Button On Your Blog

So after checking above tutorial you can move further on to this tutorial. Instead of code given in above tutorial you can use any of the codes given below. I have added image above every code so you can know how this button will look on your blog.

  Back To Top Button #1 

<!--BACK TO TOP STARTS-->
<a rel="nofollow" style="display:scroll;position:fixed;bottom:10px;right:5px;" href="#" title="Back to Top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzZwLWbWQiWhQdngawsRoarcgTNBSvdEvqP3VESc20rR9Fl2DJnUhO3V28qeyjTzK_DGYSK2ijo2QdnPIXZEvAiUZhppXJCbVAAxhgohQz_h3l5x6IvVNpkgibiAdfTAO2F6oI-Du7axU/s1600/back+to+top.png "/></a>
<!--BACK TO ENDS-->

  Back To Top Button #2

<!--BACK TO TOP STARTS-->
<a rel="nofollow" style="display:scroll;position:fixed;bottom:10px;right:5px;" href="#" title="Back to Top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmbTInnwPGKIw67iiOoGw5AE4mdfBFl9WlUXey6kd31QD4rt8nWerbKVQuiChhn46xbYwH0xHQ78UppmJ8d3zcLwv5U3AbVx1MEMG3g9s16ZgWWGAb9s-PiHQ-Vlm_eD9mP4A5uORG5GA/s1600/back+to+top+button.png "/></a>
<!--BACK TO ENDS-->

  Back To Top Button #3

<!--BACK TO TOP STARTS-->
<a rel="nofollow" style="display:scroll;position:fixed;bottom:10px;right:5px;" href="#" title="Back to Top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidWctZBspRvIBxHm4fcBoaePVWfbxw5AptBcgtXjOyZRgseLNIAJNzuX5R2gg9SCsAThpYeWaI79DZfoxdRD7VoHRl8MtutvQp-NWDEKvvpbEYngT50-l1hamhOUs5vclXXGP-lUwL-H4/s1600/back-to-top-button.png "/></a>
<!--BACK TO ENDS-->

  Back To Top Button #4

<!--BACK TO TOP STARTS-->
<a rel="nofollow" style="display:scroll;position:fixed;bottom:10px;right:5px;" href="#" title="Back to Top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu24EVa1fvkpEVs5azP-nSC7zfkOU_4VRNB1dlyBi7UniChJjWdcTcpkznpc67yonebL9032VZuKQ9zI1eV52DEkxbMv6wjKQWL9zypZPw5KH1kwPlOmDwS_tKlqp165eM9yM0HXzbRqc/s1600/back+to+top.png "/></a>
<!--BACK TO ENDS-->

  Back To Top Button #5

<!--BACK TO TOP STARTS-->
<a rel="nofollow" style="display:scroll;position:fixed;bottom:10px;right:5px;" href="#" title="Back to Top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9kvFiqGWqQVoiO9BjiOKwx9vUGZpEw5U75csHKVRvRNjnO2rxvQL-P-CEzWWPtcyALqHDawPVNkcUqHcAMbfmvXZOiP59DP0EnYMSxyhWPj5d315WYS2buPTlxXmAaC7gH6EWx8YJHcU/s1600/back_to_top_button.png "/></a>
<!--BACK TO ENDS-->

  Back To Top Button #6

<!--BACK TO TOP STARTS-->
<a rel="nofollow" style="display:scroll;position:fixed;bottom:10px;right:5px;" href="#" title="Back to Top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLFAIClQtMRScBoGZZMqJmowahojFtSFsz2i19LLyjWj-trW8FY-9EBzRvm_nHOmbQQdogfdm8AcQ6JRsrQDWLTNrKgrc5wvNrw2L_ugimPn0szNmY7bjQL6IF9978ZVuiRp5bCq4_ZbI/s1600/back-to-top-button.png "/></a>
<!--BACK TO ENDS-->

  Back To Top Button #7

<!--BACK TO TOP STARTS-->
<a rel="nofollow" style="display:scroll;position:fixed;bottom:10px;right:5px;" href="#" title="Back to Top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYOyKa0i0AMaXjg53_TlesI6OBG-lhH_eCUi7CYJpw6OjqEiSNFfB7l9SRK1jyAE3H6BPuB5_Ahw7PpeIVajRdKxh7mBxgwx-vOkdtpDJcrWe1hnX8QKkoNbafkfnwXpjdT3AiWHZ5eBk/s1600/back+to+top.png "/></a>
<!--BACK TO ENDS-->

  Back To Top Button #8

<!--BACK TO TOP STARTS-->
<a rel="nofollow" style="display:scroll;position:fixed;bottom:10px;right:5px;" href="#" title="Back to Top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhOXK0f9sU2xCsYFD7cp5A9lFNVspSsNKQ14iWmYH8eneYb8-KdsmS3-xJRKI4wQYtsJigUF6g08CGRihbBHp-hMNKG9B3zfFSVe-x1Zu7cyoq5fdnJz-fdoU1lln24tnWgnhZrBAhXi8/s1600/back-to-top-button.png "/></a>
<!--BACK TO ENDS-->

  Back To Top Button #9

<!--BACK TO TOP STARTS-->
<a rel="nofollow" style="display:scroll;position:fixed;bottom:10px;right:5px;" href="#" title="Back to Top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDam00vqBp1sq4IUGLNgEe4pu3hjc3TffCdWXSo28Umz9SXkz12e0MliOFmtiJsAFFSfoUyeggNDVsOhkLRKY73zVdrxRV0yf838n3Ic8Mx-qzYjEIIa06iFYmxsByZ37dW5yZ-8rkIhU/s1600/Back-To-Top.png "/></a>
<!--BACK TO ENDS-->

  Back To Top Button #10

<!--BACK TO TOP STARTS-->
<a rel="nofollow" style="display:scroll;position:fixed;bottom:10px;right:5px;" href="#" title="Back to Top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQFf7rVDV0dKb-p2GE9VcCQ8tcRcikeuy3D_ftQIO-SeZUipwye6EuVyRuqX5rVA_6OrQ6IRSRx4bA6P8Df4eKcHLbSzgadndGwliqSbGeJZa20VNIXOe5etqvi6GAU5o519vrpaFIsZU/s1600/back+to+top.png "/></a>
<!--BACK TO ENDS-->

  Back To Top Button #11

<!--BACK TO TOP STARTS-->
<a rel="nofollow" style="display:scroll;position:fixed;bottom:10px;right:5px;" href="#" title="Back to Top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7DDonsMIEfkU5zsC7RABl6yJ3zs1UKPNkDqKNLRaY-7X25o1JMr0lyfonTrTurje2d6YdnkdP8SL_duiC4A-O4Dpp0H5dqkgz7sYIMecJs9CNZHfCSy3RL2-rwjOyBmh94Lbt6G2NxVM/s1600/back+to+top+button.png "/></a>
<!--BACK TO ENDS-->

  Back To Top Button #12

<!--BACK TO TOP STARTS-->
<a rel="nofollow" style="display:scroll;position:fixed;bottom:10px;right:5px;" href="#" title="Back to Top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJNPStWFd2BIVe04gQG5r9AywzkpBJN4B8uJCq7KwoGqbFME8zVhC458cfgVB1Woap7tam02smgolzv7Ul2AWk0R6GL6Et3EyuB4xFysU7HkZlTtg3Bq7pnlfICW6WyLlR6T2oAKIQeYc/s1600/Back-to-top.png "/></a>
<!--BACK TO ENDS-->

  Back To Top Button #13

<!--BACK TO TOP STARTS-->
<a rel="nofollow" style="display:scroll;position:fixed;bottom:10px;right:5px;" href="#" title="Back to Top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjixNFasohgxbQ4G9Y9QX_ItUcl1ZGH75_dogwLr-7RPq3B07xzAGizeqlLWKR-kebHKO23fIY5CdQNxP-8uZrTm-IKuUo2dhGoJnwcFGZq6eVnBoUnisOoBrPax4j0qCONYbn_M9QvHd0/s1600/back+to+top+button.gif "/></a>
<!--BACK TO ENDS-->

  Back To Top Button #14

<!--BACK TO TOP STARTS-->
<a rel="nofollow" style="display:scroll;position:fixed;bottom:10px;right:5px;" href="#" title="Back to Top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyAHHuyCdd2Nx7WPAlbBahg3Q1DTYiMhpqc52zZxttQQVEtP8IvTQtLQXxYRUw62cbice9Cs2syr1zurDmzBNIxV-aUYPiobFQbPtZuP2q8MvvSoBl_hUpZ-hXS8Ar8b29ZsiN9N7FSQ8/s1600/back+to+top.png "/></a>
<!--BACK TO ENDS-->

  Back To Top Button #15

<!--BACK TO TOP STARTS-->
<a rel="nofollow" style="display:scroll;position:fixed;bottom:10px;right:5px;" href="#" title="Back to Top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaRrXLQqqO-qSdVdDT2rwhVQlEDc6iA5YJBVIOXhz1lvwIrGZi6k14fqMe9vojNCOWr783Shwv6iTASrz9LJ-Jeo-RJ9EIpemsYtfuPkD-eD96GSWuzN_rD2t_reJDfLkIqrq42Uhu7po/s1600/Back-To-Top.png "/></a>
<!--BACK TO ENDS-->

  Back To Top Button #16

<!--BACK TO TOP STARTS-->
<a rel="nofollow" style="display:scroll;position:fixed;bottom:10px;right:5px;" href="#" title="Back to Top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHkHv-o_Ko_HoTF4Vb6Tv6e2HmbxFuxMLAzCSpxX4onLDXDkgNCMBZiiiy_P7cV1rBz6ZH1ObzZnDwUdx7d8WnjAsjPIcWCi0fGfER900KtemmujnhrcxxUeubUSt_atBnP0SM9g6AGKs/s1600/back+to+top+button.gif "/></a>
<!--BACK TO ENDS-->

Your Feedback

Hope you like this post. If you have any question or suggestion then leave a comment below. You may also like to add some must have widget on your blog given below.

• Simple Drop Down Menu For Blogger Blog
• 3 Must Have Blogger Widgets
• Adding Email Subscription Form To Your Blog

Showing Post Title Before Blog Title In Search Results

By default your Blog Title appears before the Blog Post Title in the search results.  This slow down traffic to your blog. In order to optimize your blog post title and make blog post title appear before the blog title we need to change blogger default settings. This simple blogger trick  helps in better SEO and make your blog search engine friendly. In this simple tutorial i will teach you to make blog title appear after the blog post title. So lets get started.

If you are using blogger default template or some old template then you must need to do this, but if you are using some third party template then blog post title may be already optimized. You may double check it, Its good to be sure. After completing this tutorial your blog search results should look as demonstrated below.

How To Optimize Blog Post Title

1. Go to Blogger Dashboard > Template and click on Edit Html

2. Backup Your Template to be safe if you mess something up.

• Backup Your Template In 3 Simple Steps

3. Now search for code  given below.

<title><data:blog.pageTitle/></title>

4. Replace the above searched code in your blog with the code given below.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>

5. Now save the template. You are done!
6. It will some time before search engine crawls your page. But you can check it right away from your browser as show below. As you can see post title i.e 4 Awesome Faceb... is visible before blog title.

Search Results Before And After Blog Title Optimization

You may check change in search result title in search result after changing the code in your blogger template.

Any Problem ?

If you got any problem optimizing your blog post title or have any suggestion then leave a comment below i will be glad to help you out. Don't forget to subscribe to our daily tutorial update, like us on facebook, +1 on Google plus. Thank you!

What Is Jump Break And How To Add Jump Break In A Blog Post ?

When i first started blogging i really didn't know what a jump break is and how to use it in my blog post. There are some small things that are not noticed by begineer blogger but are really important, jump break is one of them. Even pro blogger don't take time to write about this. If you know this then its cool but if you don't then you must learn to add jump break to your blog post. Adding jump break is like giving small summary or introduction of your post on the homepage. So in todays tutorial i will talk about jump break, its important and how to add jump break in a blog post. Its really important that you add jump break in each and every post or article you publish on your blog.

What Is Jump Break ?

Jump break is a simple feature in blogger. When ever you add Jump break in your blog post the paragraph or text before the jump break is shown on home page of your blog or website. Its like showing introduction of your tutorial or article on the homepage of your website. So in order to view the complete post users have to click on read more link. This keep your home page clean and helps to generate more page views.

Importance Of Jump Break

• Keeps the Homepage more cleaner  and gives user friendly look.
• Helps to generate more page views
• Allow you to fit more post on the homepage of your blog.
• Gives the users snak peak of your blog post.

How To Add Jump Break In Blog Post ?

Before learning to add jump break in your blog post always keep few things in mind. Add Jump break after writing a small introduction paragraph on what your post is about and add relevant image to it as you can see on my homepage. Adding jump break is really easy just follow simple steps listed below.

1. Write your blog post and keep your cursor where you want to add jump break. Then click on Insert Jump Break as shown below.

2. After adding the jump break a dotted line will appear (shown in below picture). The text and images above this dotted line will be displayed on your homepage.

3. Done! So wasn't that so simple ?

More Such Tutorials

• Auto Posting - How To Schedule Posts In Blogger ?
• 3 Step To Backup Your Blogger Template
• Blogger Interface - How To Write Your First Blog Post ?
• What Is Blog And How To Make One ?
• The Basic Structure Of Blogger Template

Optimizing Images To Increase Traffic To Your Blog

Images serves as a great part in an individuals blog traffic. It does not matter if the blog is on bloggers or wordpress platform. People most often search for images on google for their Profile picture, wallpapers and even for their blogs article or tutorials. So optimizing images properly can be really helpful to increase traffic to your blog. Here at MBW we add relevant and attractive image in each and every article or tutorial we publish to attract more visitors to our blog. Adding images to your blog is not enough, you also have to TAG them for better indexing by Google image. So lets discuss more about Image optimization.

What Is Alt Attribute In Image Tag ?

Image Tag is like a description about what the image is all about. You should always add appropriate tage or description to your image. This helps better indexing of the image by Google crawler. Below is Image tag before adding any description

<img src="IMAGE URL" />

In order to add appropriate keywords or description to your image, you need to use alt attribute follow by its value in quotes. Below is how Image tag will look after adding attribute.

<img src="IMAGE URL" alt="Keywords" />

Always make habbit of adding attribute to your image tag. Its simple you add alt=" " and your description between quotes. Make sure not to add more then 4 words in your attribute.

How To Add Alt Tag In Blogger ?

If you are on bloggers platform then its very simple to add description to your image. In 2012 blogger introduced new feature which let you add alt tage to your images from within the post. I will demostrate it here with a image from downloading to optimizing.

1. Whenever You download an image from a website most certainly from google, the name of the image is mixture of letters and numbers. So your first step should be to change the name appropriate to the image as shown below.

2. To add image to your post click on image icon as shown below and locate the image file from your computer.

3. Now in order to add description or alt attribute to your image click on the image and choose properties as demnstrated below.

4. After clicking on properties a pop up window will appear. Enter Title Text and Alt Text appropriate to your image. I usually enter title and alt text same as you can see in below image.

5. This simple steps will help in better indexing and  increase you chance of showing your images in Google search results

Few Tips

• Keep the description of image no more then 4 words. For example Blogging Tricks is better description then Top 5 blogging tricks for bloggers.
• Avoid using special characters such as ( ^%$@#*?/).
• Always add atleast one relevant image to your blog post.
• Give description that describes the image rather then giving useless keywords.

Need Help ?

If you got confused or face any difficulties understanding Image optimization then leave a comment below i will be glad to help you out. I hope you like this tutorial and may help you in your blogging carrier.

Creating Simple Drop Down Menu For Blogger

A drop down is really essential tool or widget for any blog or websites. It gives real feel or look of the template or blog. Drop down menu lets users easily navigate through different parts of the blog. In this tutorial i will teach you to add simple navigation menu or Drop down menu to your blog. The good thing about this widget is that it requires no jquery and is coded completely in Html and CSS. So it loads really fast. Lets get started!.

How To Add Drop Down Menu ?

1. Go to blogger Dashboard and click on Layout.
2. Then Click on Add Gadget (Below Header not on sidebar) and Choose Html/Javascript Widget.
3. Now Paste below code into it.

<div id='mbwnavbar'>
      <ul id='mbwnav'>
        <li>
          <a href='#'>Home</a>
        </li>
        <li>
          <a href='#'>About</a>
       </li>
        <li>
          <a href='#'>Contact</a>
        </li>
         <li>
           <a href='#'>Sitemap</a>
            <ul>
                <li><a href='#'>Sub Category #1</a></li>
                <li><a href='#'>Sub Category#2</a></li>
            </ul>
        </li>
      </ul>
    </div>

4. Now Change the text in Bold with appropriate label and also replace the url highlighted in red color (#).
5. To add another tab to the drop down menu then add below code before </ul>. or delete that code from above code to remove any menu.

 <li>
       <a href='#'>Contact</a>
 </li> 

6. Now we will add CSS, Go to Blogger Dashboard and click on Template and click on Edit Html. Backup your template before doing this.

• Backup Your Template In 3 Simple Steps

7. Then Search for below code.

]]></b:skin>

8. Paste the below code above the code you searched in Step 7.

/**MBW Navgation bar**/
#mbwnavbar {
    background: #464849;
    width: 960px;
    color: #FFF;
    margin: 0px;
    padding: 0;
    position: relative;
    border-top:0px solid #960100;
    height:35px;
}
#mbwnav {
    margin: 0;
    padding: 0;
}
#mbwnav ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}
#mbwnav li {
    list-style: none;
    margin: 0;
    padding: 0;
    border-left:1px solid #333;
    border-right:1px solid #333;
    height:35px;
}
#mbwnav li a, #mbwnav li a:link, #mbwnav li a:visited {
   color: #FFF;
   display: block;
   font:normal 12px Helvetica, sans-serif;    margin: 0;
    padding: 9px 12px 10px 12px;
    text-decoration: none;
     
}
#mbwnav li a:hover, #mbwnav li a:active {
    background: #028490;
    color: #FFF;
    display: block;
    text-decoration: none;
    margin: 0;
    padding: 9px 12px 10px 12px;
             
}
#mbwnav li {
    float: left;
    padding: 0;
}
#mbwnav li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 160px;
    margin: 0;
    padding: 0;
}
#mbwnav li ul a {
    width: 140px;
}
#mbwnav li ul ul {
    margin: -25px 0 0 161px;
}
#mbwnav li:hover ul ul, #mbwnav li:hover ul ul ul, #mbwnav li.sfhover ul ul, #mbwnav li.sfhover ul ul ul {
    left: -999em;
}
#mbwnav li:hover ul, #mbwnav li li:hover ul, #mbwnav li li li:hover ul, #mbwnav li.sfhover ul, #mbwnav li li.sfhover ul, #mbwnav li li li.sfhover ul {
    left: auto;
}
#mbwnav li:hover, #mbwnav li.sfhover {
    position: static;
}
#mbwnav li li a, #mbwnav li li a:link, #mbwnav li li a:visited {
    background: #028490;
    width: 120px;
    color: #FFF;
    display: block;
    font:normal 12px Helvetica, sans-serif;
    margin: 0;
    padding: 9px 12px 10px 12px;
    text-decoration: none;
    z-index:9999;
    border-bottom:1px dotted #333;
 
}
#mbwnav li li a:hover, #mbwnavli li a:active {
    background: #70b6bd;
    color: #FFF;
    display: block;     margin: 0;
    padding: 9px 12px 10px 12px;
    text-decoration: none;
}

 9. Save the template and you will have drop down menu added to your blog.

Customizing Above Widget

This part is completely optional. If the above provided plugin does not match the theme of your blog and want to customize to match template of your blog then change some Hex code listed below.

• Change #464849 to change background color of navigation bar which is currently dark grey.
• Change #028490 to change the color of tab on mouse hover.
• Change #028490 to change the color of Drop down menu
• Change #70b6bd to change the color of Drop down on mouse hover.

Any Question ?

If you find this plugin usefull or got into problem while adding this plugin to your blog then leave a comment below i will be glad to help you out. Dont forget to subscribe and follow us on google+,twitter and facebook.

How To Add Twitter Follow Button To Your Blog ?

After Facebook the biggest name in social media is twitter with 500+ million users and 350+ million tweets generated daily. Twitter Follow button is one of  the 3 Must have blogger widget on your blog along with Facebook like Box and Popular post widget. By adding Twitter follow button on your blog you can increase your twitter followers which will result in greater traffic from the twitter. This will allow visitors to easily follow you on twitter directly from your blog You can check my twitter follow button on the right sidebar of my blog.

How to add ?

1. Go to Twitter Button Website.
2. Choose Follow from the four options as shown below.

3. Now in the Button options Enter your twitter username in user field as i have enter my username @mybloggersworld. as shown in below picture. You may check  Large button to increase the size of twitter follow button, but for the best result leave the settings as shown below.

4. Copy the button code which is on the right side under the title Preview and Code in small box below your twitter button as highlighted in red in the picture below.

5. Now your twitter button is ready to be install on your blog, In order to do go to your blogger dashboard then layout.

6. Click on Add gadget and choose Html/Javascript from pop up window and paste the code copied in Step 4 in the box.

7. Now save the widget and you have Twitter follow button on your blog.

Auto Tweeting On Twitter

If you don't use twitter often, but like to share each and every blog post on your twitter account to increase traffic to your blog then check out below tutorial to Auto tweet your latest blog post on twitter.

• Automatically Tweet Your Blog Post On Twitter