How To Add Map In Blogger Contact Or About Page

Bloggers are advancing day after day and making their blogs professional by adding pages like privacy policy, contact page, about page, terms and conditions page etc which are seen in professional websites so they are trying to make their blogs look more professional to impress visitors because such things improve blogs reputation. One more thing which can improve a blogs reputation and make it look more professional is a map which shows the location of the blog. So if you have a business website converted to dot com then you can add a map in your website or blog's about or contact page and your location to your visitors as well as make your website or blog more professional. So this post is all about adding Google map in contact or about page of your blog. Follow below steps to add a map in your blog's page.

How To Add A Map To Contact Or About Page In Blogger?

Step 1: Go to Google Maps and search your location.

Step 2: Click on Share below directions:

Step 3: Click on Embed Map.

Step 4: Set your location by clicking inside map and moving it, change the size of your map by clicking on selector beside code. Available sizes are small, large, medium and custom. Choose custom if you want to create a custom size map.

Step 5: Copy code of your map and go to blogger dashboard.

Step 6: Click on pages and edit your about or contact page in which you want to add map.

Step 7: Switch to the Html editor of your page:

Step 8: Paste the code copied from map page.

Step 9: Click on Publish and you are done!

You can add the map in a gadget too at the bottom of your blog. All you have to do for this is to add the map code in the layout. So if you want to add a map at the bottom of your blog then go to blogger > layout > Add a gadget > Html/Javascript, Paste code of map and click on save!

I hope you like this post and you found it helpful. Share it with others. Thanks for visiting 101Helper.

Search Tags: Map for blogger,add a map in blogger,add a map to website,Google maps gadget for blogger,embed map in blogger blog,Add map in contact page,101Helper blogger tutorials.

Read More

How To Customize Scrollbar In Blogger

One of the most wanted thing in a template is responsiveness to impress visitors. It play a very important role in reputation of a blog. As basic things of a responsive template are bold use of colors, smooth scrolling, impressive menu therefore people usually focus on them but it is not just about that because several other things are also responsible for a responsive design like a stylish scrollbar. I don't thing scrollbar needs introduction everyone knows what a scrollbar is. So this post is about customizing scrollbar in blogger by CSS. I will share some stylish and impressive scroll bars below, choose yours and add it in your blog.

How To Customize Scroll bar In Blogger?

Step 1: Go to blogger dashboard, navigate to template and edit html.

Step 2: Click inside the code and search for below piece of code:

]]></b:skin>

Step 3: Choose a customized scrollbar and copy its code.

Style 1: 

body::-webkit-scrollbar-track {
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 background-color: #F5F5F5;
}
body::-webkit-scrollbar {
 width: 12px;
 background-color: #F5F5F5;
}
body::-webkit-scrollbar-thumb{
 border-radius: 5px;
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
 background-color: #ccc;
}

Style 2:

body::-webkit-scrollbar-track {
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 background-color: #F5F5F5;
}
body::-webkit-scrollbar {
 width: 12px;
 background-color: #F5F5F5;
}
body::-webkit-scrollbar-thumb {
 border-radius: 0px;
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
 background-color: #35BB6E;

}

Style 3:

body::-webkit-scrollbar-track {
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 background-color: #F5F5F5;
}
body::-webkit-scrollbar {
 width: 14px;
 background-color: #ffffff;
}
body::-webkit-scrollbar-thumb {
 border-radius: 5px;
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
 background-color: #3993E2;
}

Custom Style:

You can make a custom scrollbar too by making changes according to your needs in highlighted fields above. Read explanation of each code function below:

Color of scroll bar:

To change color of your scrollbar replace #3993E2 with your chosen color code in  background-color: #3993E2; in the third style.

Edges of Scroll bar:

To change radius of edges of your scroll bar make changes in border-radius: 5px; in the third style.

Background color of scrollbar:

To change background color of your scroll bar make changes in background-color: #ffffff; in the third style

How to get code of a color? Click here to use color code generator!

I hope you liked this post. If you have any problem or suggestions please leave a comment below. I will get back to you. Follow and subscribe to get news  about new posts. Don't forget to share this post. Thanks for visiting 101Helper.

Search tags: Blogger tips and tricks,Responsive blogger template design,CSS tricks blogger,Stylish scrollbar codes for website or blog,Impressive blogger template design,How To Customize Scrollbar In Blogger

Read More

How To Make Gadget Sticky/Float In Blogger

Making a gadget sticky or floating means to make it fixed in a position when page is scrolled down and it is possible with javascript. Gadgets are made sticky to provide visitors a good user experience such as a menu which floats with user so now he doesn't need to scroll up again and again to navigate through your blog. Similarly more gadgets are also made sticky such as ads or email subscription widget to get more clicks on ads and to get more subscribers respectively. You can see a live demo of making a gadget sticky on right side of this page(Recommended Articles). I have made it sticky to help visitors reach all of my content. Similarly you can also do it by following this post. So if you want to make any of your widget sticky then follow below steps.

 Don't Miss: 

• Floating Vertical Menu For Blogger
• How To Make Sidebar Float/Scroll In Blogger
• How To Add Scrolling Text Or Images In Blogger
• Floating Social Sharing Bar For Blogger
• Twitter Flying Bird Gadget For Blogger

How To Make A Gadget Sticky Or Float In Blogger:

Step 1: Go to blogger dashboard and navigate to layout.

Step 2: Add a gadget or edit an existing gadget which you want to make sticky.

Step 3: Copy its ID as shown in below image:

You Might Also Like: How To Find ID Of A Widget In Blogger.

Step 4: Go to template and search for </body> by using Ctrl+F.

Step 5: Copy below code and paste it just above </body>.

<style>.sticker {background:#F5F5F5;position:fixed; top:0px; z-index:99;}</style>

<script>

//<![CDATA[

bs_makeSticky("HTML6"); 

function bs_makeSticky(elem) {

    var sticky = document.getElementById(elem);

    var scrollee = document.createElement("div");

    sticky.parentNode.insertBefore(scrollee, sticky);

    var width = sticky.offsetWidth;

    var iniClass = sticky.className + ' sticky';

    window.addEventListener('scroll', sticker, false);

    function sticker() {

        var rect = scrollee.getBoundingClientRect();

        if (rect.top < 0) {

            sticky.className = iniClass + ' sticker';

            sticky.style.width = width + "px";

        } else {

            sticky.className = iniClass;

        }

    }

}

//]]>

</script>

Step 6: Replace HTML6 with your gadget's ID which you found in step 3.

Step 7: Click on save template and you are done. 

Customization:

(1). To change background color or your floating widget replace #F5F5F5 with desired color code.

You Might Also Like: How To Get Code Of A Color, Color Code Generator.

(2). To Change the height of your floating widget(height from top) make changes in top:0px;

I hope you like this post and it was helpful to you. Follow and subscribe to our newsletter or stay in touch with us via social networks to get latest updates about blogger tricks. Thanks for visiting 101helper.blogspot.com. Share this post with others and help me spread my blog.

Search Tags: Sticky gadget blogger, jquery tricks blogger, make a div float, javascript tricks blogger, 101helper blogging tricks, make a widget floating or sticky in blogger.

Read More

How To Earn Money With Chitika In Blogger

Chitika is one of the highest paying ad network and very suitable for blogger blogs. It has good ppc rates and tracks traffic very accurately. It is very easy to use chitika for blogger because of its easier integrating service. It has all types of ad units e.g text ads, slide out ad, hover ads(appear when text is selected) and banners of every size. Chitika has started referral program also so now you can double your earnings by referring others to Chitika. Chitika payout method is paypal. In this tutorial I will show you how to earn money with chitika in blogger.
Requirements:

1. A blog - Create a blog if you don't have one.
2. Chitika account.
3. Paypal account - To payout.

How To Sign-Up For Chitika?

Step 1: Go to Chitika.

Step 2: Enter your Email address and click on GO!

Step 3: Open your Email and open the recent mail by Chitika.

Step 4: Click on Complete My Application.

Step 5: Fill out the form. Enter your name, username, website url, password and select your country.

Step 6: Click on submit and wait for approval.

After approval you have to add ads in your blog to start earning money. So after approval follow below steps to add ads in your blog.

How To Add Chitika Ads In blogger?

Step 1: Go to Chitika and log in to your account using your email and password.

Step 2: Click on Ads and press Get code.

Step 3: Scroll down to "Ad Code Generator" and select your ad using selector, you can see a preview of your ad below selector.

You can customize your ad by clicking on Customize button

Step 4: Click on Get Code and copy the code.

Step 5: Go to blogger dashboard and click on layout.

Step 6: Click on Add a gadget and scroll down to Html/Javascript.

Step 7: Click on Html/Javascript and paste the code of ad.

Step 8: Click on Save and you are done.

How To Boost Your Chitika Earnings?

To boost your earnings you have to:

1. Boost your traffic using seo .
2. Attract visitors to your blog.
3. Implement ads in right places to get maximum clicks on your ads.
4. Refer other to chitika using refer banners provided by chitika.

I hope you like this post and it was helpful to you. Follow and subscribe for more blogger tutorials. Share this post with others and help me spread my blog. Thanks for visiting 101Helper.

Search Tags: Chitika Review, How to earn money with chitika, How to boost earnings, How to get more clicks on ads,Earn money blogging,Refer and earn,earn money online,101helper blogger tutorials.

Read More

Why A Website And Mobile Site Is Important?

                                                                              It sounds so interesting when you think of having your own website. And If you think and wish to have a website then you can create your own just in a few minutes. Creating a website has become so easy now a days that everyone can create a website because these days are gone when websites were owned by only those who had programming skills. Now the time has come that everyone is capable of creating his own site using online site builders. Websites are mainly of two types e.g personal and business websites. Most of the sites are created for businesses or to earn money online.

Why Do I Need A Personal Website?

Personal websites are those websites which a individual creates so you can use your website for any purpose. Most of the personal websites are created for following purposes.

• To educate people.
• To teach people some personal skills e.g cooking, magic, martial arts etc.
• To earn money from home.
• To promote personal skills like music albums.

There are several other reasons for creating a personal website. A personal website could be used for any purpose but most of the personal websites are created either to earn money online or to promote personal skills like music albums, newly formed band, paintings etc.

Why Do I Need A Business Website?

You might be surprised when you come to know that there are many small businesses which don't have websites which is not good for a business because creating a business website is like opening your door and inviting your customers. So if you own a business you can create a website to increase your sales as well as promote it through internet. Major benefits of a business website are mentioned
below:

• It is the best way to promote your business through internet all over the world.
• If you own a shopping business you can allow your customers to buy and pay online.
• Business website is good for reputation of your business also.
• People can know and reach your business though your website.

After creation of website another things come which also needs attention. Like promoting your site, making it ready for all devices e.g mobiles phones, tablets, PC etc. 

A website can be promoted thought advertising or by seo(search engine optimization).

Read more about importance of having a website for business at dogulindigital(A well known business analyst site).

Mobile Ready Websites:

If you are a webmaster or you have a little concern with internet then you must know the importance of a mobile ready sites. Especially now a days its very important to have a website ready for mobiles because mobile phones are used more the computers for all purposes e.g shopping, gamming, office work, social interaction etc. So if you own a website whether it is business or personal you need a mobile site too and these days it's very easy to create a mobile site.

Its not easy to create a mobile site for blogger but if you are using an online website builder then its very easy because you don't have to do any thing. You just have to grab and drop items and your mobile site is ready.

Some benefits of having a mobile ready website are mentioned below:

• The most important reason for having a mobile ready site is search engines like websites which are mobile friendly.
• If you own a website for business then it will increase your customers because mobile phone is rarely used.
• Mobile ready websites look professional also, so you have a good impression if you have a mobile friendly site.

It doesn't ends with the above benefits. These are the major benefits of having a mobile friendly site, there are many other small benefits which you can read at MOZ.

Final words:

This article ends here with mobile friendly site's benefits, it is an ultimate guide about having a website, its benefits and why so you build a site. In the end of the post I would like to tell you about some best website builder so click here to read about them. I would be glad to know your views about this post. Hope you like this post, share it with others are help me spread my blog. 

Read More

Fixing "headline and datepublished missing and required" in blogger

Since Google is updating posting schema and search results so frequently, bloggers and webmasters are having trouble to cope with it. Previously Structured Data Testing Tool was detecting following errors:

(1). image_url: 
(2). postId: 
(3). blogId:

To fix above problems read How To Fix Google Webmaster Tools Errors In Blogger

But now two new errors are encountered which are:

(1). headline: missing and required

(2). datepublished: missing and required

In this post I will show you how to fix these errors in blogger. So follow below steps to fix your errors. I am starting from "headline: missing and required" first.

Method 1: How To Fix "headline: missing and required" In Blogger:

Step 1: Go to blogger dashboard and navigate to template.

Step 2: Click on Edit Html to Edit your template.

Step 3: Click inside the code and search for below piece of code:

<h1 class='post-title entry-title' itemprop='name'>

Or if you don't find it search for below one:

<h2 class='post-title entry-title' itemprop='name'>

Step 4: Change 'name' to 'headline' in the code  as shown in below image:

You will find the above code two times or more then two times, make sure to change 'name' to 'headline' in all of these codes.

Step 5: Save your template and test your blog again using Structured Data Testing Tool.

How To Fix "datepublished: missing and required" In Blogger:

If you do it manually it will need hard work and it would be difficult for you so I found an alternative method to fix this error which is much easier then other methods. So follow below steps to fix 'datepublished: missing and required' in your blog.

Step 1: Go to blogger dashboard > settings and select sub-option(Language and formatting):

Step 2: Find Formatting and Timestamp Format.

Step 3: Change time format from default to 8/15/2015 04:33:50 AM(Month/Date/Year Time AM) format as show in below image:

Step 4: Click on save settings and go to layout.

Step 5: On the layout page edit blog posts.

Step 6: Check/Mark both date and time options in post page options as shown in below picture:

Step 7: Change time format to 8/15/2015 04:33:50 AM(Month/Date/Year Time AM) as you did in the settings above(step 3).

It should be like above image.

Step 8: Click on save and you are done.

Once again check your blog with Structured Data Testing Tool, I am sure this time you will see All good!

If you still have errors in your webmaster testing tools then you have to do all this manually so follow below steps to add codes manually.

Method 2: Fixing "headline and datepublished missing and required" in blogger Manually!

Step 1: Go to your template and edit it.

Step 2: Search for below code:

<div class='date-posts'><div class='post-outer'><div class='post hentry uncustomized-post-template' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>

Step 3: Copy below code and paste it below the above code:

<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><span class='updated'><data:post.dateHeader/>T<data:post.timestamp/></span></abbr></a>

Step 4: Now search for this code:

<div class='post hentry' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>

Step 5: After finding above code just below it paste this one:

<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><span class='updated'><data:post.dateHeader/>T<data:post.timestamp/></span></abbr></a>

Step 6: Now search again for the below code:

<meta expr:content='data:post.canonicalUrl' itemprop='url'/>

You may find this code 2 or 3 times

Step 7: Add the below code below each of the above codes(step 6):

<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><span class='updated'><data:post.timestamp/></span></abbr></a>

Step 8: Click on save and you done!

Important Note: Make sure to follow step 5,6 and 7 in the first method of fixing these errors!

If your blog have other errors like img_url, postid, blogid then read How To Fix Google Webmaster Tools Errors In Blogger 

If you still see any problem you can discuss it with me in comments or by contacting me.

If this post helped you then please take a second to share it with others. Follow ans subscribe for latest posts updates. Keep visiting 101Helper :)

Search Tags: How to fix Structured data tools errors in blogger,blogid,postid,headline,image_url,datepublished error fixing tutorial for blogger,Google webmaster tools tutorials for blogger 101helper.blogspot.com

Read More

How To Use Google Adwords To Increase Blogger Blog Traffic

As far as I am concerned with blogging, Google Adwords is the only ad network which I prefer best to advertise a blogger blog. Although I get my whole traffic from search engines but in the beginning I used Google Adwords to promote my blog. You can also use Google Adwords to promote your blog and help it to start running. 

Why Google Adwords?

Only few of us know how to use Google adwords and its good for blogger because of its policy which is to pay only when you get clicks. It means you don't have to pay a fixed amount to advertise your blog but you choose your own budget and also pay per click amount. Moreover if you don't get clicks and your site is against Google Adword's policy you will get your money back. It has tremendous features which makes it better than other advertising networks.

Payment Methods:

- Credit Or Debit card.
- Bank Account.

Mobile App:

Stay up to date about your ad campaign clicks and impressions via smart phone app(Andoid/iphone). Just go to your phone's app store and download Google adwords app. Login by using your blogger account and stay updated about your campaign as well as keep full control over your account from your phone.

How To Use Google Adwords For Blogger Blog?

Well it seems that using Google Adwords is very difficult to understand but it isn't so. Even a beginner can start promoting his blog with it, all you need is a way to pay and follow this tutorial. So lets begin, follow below steps to start promoting your blog through Google Adwords.

Step 1: Go to blogger dashboard and navigate to Campaigns.

Step 2: Click on Start Now.

Step 3: Wait for the page to load and refresh it if its not showing anything.

Step 4: Type your Email, Select your country, Select your time zone and your currency(in which you will pay for advertising).

After selecting desired options click on save and continue to proceed away. Congratulations! your adwords account has been created.

You Might Also Like Reading:

• Get Your Blog To The Top Of Google Search Results.
• Promote Your Blog Using Seo Tools
• Use Engageya Related Posts Widget To Boost Page-views
• +5 Stylish Menus For Blogger
• +50 Widgets And Gadgets For Blogger.
• Promote Your Content Here.

How To Create My First Ad Campaign In Google Adwords?

Read and follow below steps to create your first campaign and start promoting your blog/website.

Step 1: Click on Create Your First Campaign.

Step 2: Give a title to your campaign, Select the type of ads either Standard or All features, Choose networks and devices(on which ads will show up e.g computer, tablets, mobile etc).

Step 3: Scroll down the page and move to Locations, here you have to choose the countries in which you would like to show your ads. Choose All the countries or your own country or if you want to target specific country then choose Let me select. If you choose Let me select then type the name of the country in the search box below and select it.

After location you have another option below "Languages" so check the languages in which you would like to show your ads. Be sure that the languages you select aren't only languages but these languages will decide that on which Google domain your ads will appear. 

Say that you choose English, now your ads will be shown on the Google domains which have English language e.g Google.co.uk, Google.com, Google.pk. 

It doesn't mean that your ads will not be shown in the countries you choose. 

Step 4: In step 4 there are three things that you have to deal with, one is to choose a bid strategy, budget for your ads and other is to ad extension to your ads.

Choose Basic options in bid strategy because Advanced options are difficult to understand.

- In bid strategy area you have two options:

1. Adwords will set my bids to help maximize clicks within my target budget.
2. I'll manually set my bids for clicks.

Choose I'll manually set my bids for clicks because if you let Google to choose bids for you then you will get more and more traffic but have to pay high rates.

How to set bids in Google Adwords?

After choosing I'll manually set my bids for clicks you will have two options:

1. Default bid.
2. Budget.

In the default bid type the rate which you will pay for each click(PPC).

Tip: For a quick boost in traffic while spending lowest amount set $0.05 as default bid.

In budget area type $1 or $2 no matter what you type but it is just a limit in which you will pay Google Adwords. For example if you set a budget of $1 and default bid $0.05 then you will get 20 clicks for 1 dollar and after that your ad will stop running because your daily budget is consumed. If you don't get 20 clicks in a day then your remaining budget will be used next.

What Is Ad Extension And How To Use It?

Ad extension is an optional feature to include relevant business info with your ads e.g location, sitelinks, call info.

So if you want to use this feature just check any of the given option and follow instructions to proceed away. 

Step 5: Click on Save and continue and you have successfully created your first campaign now its time to create an ad group which will include you ads so follow next step.

Step 6: Give a name to your ad group and below it design your ad look. You can see a preview of your ad on the page.

Step 7: Scroll down and write your keywords in the given text area as shown in below photo. Write 10-20 keywords on after other.

Step 8: After writing keywords click on Save and continue to billing as shown in below image:

Setting Up Billing Settings In Google Adwords:

Step 9: Select your country and click on Continue.

Step 10: Select account type as individual and fill up your info. E.g your name, address, phone number etc and scroll down the page.

Step 11: Select Automatic payments in How you pay option and the payment method is chosen in step 9(you can pay with either credit or debit card or by bank account depending on your country).

Fill up all your info carefully and choose your billing language also.

Step 12: Check the Yes, I agree the above terms and conditions and click on complete sign up.

Congratulations! you are done successfully. You can read more about Google adwords below e.g how to create more campaigns or edit the existing one, how to change billing info and account info and also how to cancel your account any time.

How To Make Changes In Settings?

Although payment settings and other settings are configured and saved at the time of setting up account but later you can change your payment as well as account settings. To change your account settings just click on the settings button on the top-right-corner of the page.

To create more ads and ad-groups just navigate to campaigns and click on  +CAMPAIGN 

I hope you like this post if you have any question ask me in comments or contact me. Follow through social networks and subscribe to Newsletter for E-mail notifications about new posts. Share this post with others and help me spread my blog. 

Search Tags: How to Use Google Adwords, Google adwords help, Google adwords for blogger, Step by step tutorial Google adwords, Increase traffic Google adwords,Get Google Adword's tips,Advertise blog low rates,101Helper blogging tutorials

Read More