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 Earn Money From Sponsored Content In Blogger

You must be friendly with "sponsored content" if you are an internet earner. Sponsored content marketing is a new way to earn money though blogs and websites similar to ads monetizing. In sponsored content marketing you have to show content from other websites and blogs. It is a very easy and efficient way to increase blog revenue. Especially when you target a special category of content, I mean if you show similar content on your blog from other websites and blogs because it would grab visitors interest and you will earn more!

How It works?

It is very similar to ads monetizing. As in ads monetizing advertisers pay money to ad networks and bid for each click similar to it in content marketing they pay to advertise their content on other blogs. When you sign-up to content monetizing site as a publisher it gives you a widget or code which shows content on your pages and you get paid when someone read anything from "sponsored content".

How To Earn Money From "Sponsored Content" In Blogger?

Its very easy to earn money with sponsored content all you need is a blog with someone minimum 100 visitors per day. And if you own a blog with more visitors you can earn more! Moreover if you wish to advertise your content on other blogs and websites and boost your traffic then you can get benefit of "sponsored content marketing". All you have to do is to become an advertiser. So in this post I will show teach you how to earn money from "sponsored content" in blogger. Apart from it I will mention some highly paying and most reliable "sponsored content marketing networks" where you can register to earn money or boost traffic!

Follow below steps to start earning money from sponsored content:

Step 1: Choose anyone of the below mentioned "sponsored content" networks and register a free account.

AyBboll:

It is a widely used content marketing network. It has 2000+ advertisers and 600+ visitors. Average ECPM rate is $6 for US visitors. All types of widgets are available for publishers e.g vertical and horizontal. Easily installable widgets which can be integrated within 3 minutes and doesn't affect blog speed. Minimum payable amount is $100.

Join As Publisher/Advertiser

Limk:

Limk is one of the best "sponsored content marketing network" its smart widgets make it best. Link has desktop as well as mobile compatible widgets. This network doesn't affect your seo too. Number of Publishers and Advertisers are unknown though its smart statics analysis and widgets make it great. Advertisers has a great opportunity to get $250 credit for free advertising.

Join As Publisher Or Advertiser

Gravity:

Gravity is partner with all big publishers like Forbes, CNN, Visa, Aol, Engadget etc so it pays high rates. Its a good choice for publishers but its not easy to get your site approved. You must have a good daily traffic to get approval. It has responsive design widgets and easy to install.

Become A Publisher / Advertiser

Content.ad:

Content.ad is also one of the best content marketing network. It has all types of widgets like horizontal, vertical, text only and pop-up. All the widgets are 100% responsive and smart e.g pop-up widget pops-up after 30 seconds of page load. So it increase your readers sponsored content readers and boosts your revenue.

Join As Publisher / Advertiser

Infolinks:

Infolinks is actually an ad network but now it has started "sponsored content marketing" too. Very few people know this. If you are an infolinks user then you can enable this features in the In-tag window of your account, just turn on "Revenue Booster" and sponsored content will start showing up on your blog below each post. It will boost your earnings.

If you haven't registered any account yet you can join now.

You might also like: Infolinks - The Best Ad-Network For Bloggers

Taboola:

It is a widely used content marketing network. It pays very high rates because it is partner with big companies. It is very famous and has millions of publishers and advertisers. Its not easy to get approval with taboola if you don't have traffic. Taboola is best for high traffic sites and blogs.

Publisher Or Advertiser

You can also use other networks like Outbrain, Engageya and shareholic.

Step 2: Sign-up to any of the above network and wait for approval.

Step 3: Once approved add widget to your blog below posts.

Step 4: Cashout once you reach your minimum payout threshold.

Don't miss related posts below. These are recommended for you!

I hope you like this post. You might be thinking that this post is not useful because I have't taught how to sign-up, how to integrate widget etc but its useful because this post teaches you several other things like new way to earn money though blogging and its a guide about trusted and best "sponsored content networks". So get benefit of this post and don't forget to share with others.

If you have any question or suggestion you can leave a comment below!

Search Tags: Sponsored content publisher,earn money from blogger,earn money from home online, blogging money tutorials,best ad networks for blogger,sponsored content marketing networks for blogger.

Read More

How To Choose Right Keywords To Boost Your Traffic - Blogger Seo

What are keywords and how do they help you to get visitors to your site? if this question is in your mind then you have reached to right place. Here you will learn everything about keywords and there importance. Keywords are the words used by visitors to search something in search engines and if you have that keyword in your blog then search engines will show your site and hence you will get maximum visitors to your blog. Keywords is an important part of on-page seo. Mainly keywords are of two types:

(1). Short Keywords:

Short keywords are those which contains only one or two words. For example for my blog Blogger Widgets, Blogger Seo, Blogger Menus are the short keywords. These keywords should be most relevant to your content otherwise they are useless. Also these keywords should be used in the main template in the <head> section. It has become so common that it is almost in every blog in the meta tag form. Like this:

<meta content="Most Relevant Keywords" name="keywords"/>

Short keywords should be searched very accurately because they play a vital role in seo so best tools should be used to find them or else you will loss all of your traffic. You can use Google Keywords Planner to search most relevant keywords for your blog. It is the best tool to find keywords.

You can also find best short keywords for your blog using Google search if you know the category of your blog for example if you have a blog about fashion then you can use to search the "latest fashion" to get more related words and you can use them as your short keywords. Now when someone will search fashion or any other related word your blog will appear in search results. You can see an example in below image:

You can see related keywords in the above image. Now all you have to do is to add these keywords in your blog.

Moreover if you get other keywords from search engines using which people reach your blog collect them and use them as your keywords too. To find keywords used by visitors go to Stats > Traffic Sources and choose month or week or all time to see keywords used by visitors to reach your blog.

(2). Long tail keywords:

These are the keywords which are most important for seo. A long tail keyword is actually a sentence used to search something and it is used more than short keywords. Short keywords are used to search the most popular sites like Facebook, Google, blogger, reddit etc so they are not important than long tail keywords for bloggers and other articles publishing sites like Moz or Wikihow. So a blogger should focus on long tail keywords more than short keywords.

If you are a seo researcher then you must know what are long tail keywords and how do they help visitors to reach to what they are looking for.

Long tail keyword is of 3-4 words or sometimes a full sentence. For example if you want to search for optimizing your blog for seo, then what would you Google? I guess "how to optimize blogger blog for seo Or How to get your site to the top of search results Or how to boost blog traffic" etc. These are the long tail keywords and similar to you everyone would search something similar to it or search for what Google show in the list. So you can use these long tail keywords to boost your traffic.

Where should be long tail keywords used? as short keywords have taken the space in the template
in the meta tag. Don't worry you can use long tail keywords in the search description of your post. Separate them by comma. And don't type the description just add long tail keywords as your description.

You can see a live demo to make sure if long tail keywords really work or no by googling "featured posts widget blogger" you will see 101Helper in the search results.

You can collect long tail keywords from Google Keyword Planner but I recommend you to collect them manually or use online long tail keywords generator to search keywords for every post you write. It will boost your traffic in a very short time.

I hope you found this post helpful if you have an problem ask me in comments below. Follow and subscribe to get latest updates about blogger seo.

Please share this post with others and keep visiting 101Helper.

Search Tags: High desity keywords,Keywords search, On-page seo blogger,Keywords planner,How to get deep keywords to boost blog traffic,Get organic traffic from search engines.

Read More

Jquery Slide Down Mobile Menu For blogger

A successful blogger is that who knows the importance of a mobile site. As blogger has no gadgets for mobile site therefore you have to add them manually. Basic things which are important for a mobile site are a search box, a related posts widget and a menu. If your mobile site has these gadget then your site is ready for mobiles.

In blogger page list is commonly used as a menu as it becomes a selector in mobile site. But it doesn't look professional and most of the visitors don't like it. So today I have a stylish jquery slide down menu for your blog's mobile site. It works on jquery so it works properly in all mobiles either it is iphone or Microsoft mobile or something else. But if you are using a phone which doesn't support javascript or jquery then this menu won't work on it.

In this post I will share my first mobile menu for blogger and show you how to add it in your blog's mobile site. So follow below mentioned steps to add this menu in your blog you can see a live demo of this menu above.

How To Add Stylish Jquery Menu In Blogger Mobile Site?

Step 1: Go to blogger dashboard > layout and click on "add a gadget" below header.

Step 2: Give a title to your gadget e.g mobile menu. Because it will help you in finding this gadget in your template in coming up steps.

Step 3: Find Html/Javascript and click on it.

Step 4: Copy below code and paste it into Html/Javascript window.

Tip: Click inside the code container and use Ctrl+A to select code and Ctrl+C to copy it!

Step 5: Click on save, go to template and click on Edit Html.

Step 6: Click inside the code and search for the name which you have given to your menu in step 2. I am searching for Mobile Menu as I've given it to my gadget.

You can also use jump this gadget to jump to your widget but its possible only if you have ID of your widget.

You Might Also Like Reading: How To Find ID Of A Gadget In Blogger

Step 7: Type mobile='only' beside locked='false' and click on save template.

Thats it! you are done. Now open your blog in your phone and try your menu.

You Might Also Like:

• Why A Website And Mobile Site Is Important?
• Link/Text Only Related Posts Widget For Blogger Mobile Site.
• How To Earn Money With Chitika In Blogger.
• Tips To Get More Clicks On Ads
• How To Add Scrolling Recent Posts Gadget In Blogger

How To Edit This Menu?

You can't edit this gadget as you do others because after adding mobile='only' you have commanded blogger to show this gadget in your blog's mobile view only so if you check your layout now you will not see any gadget below header as it is shifted to mobile site. So to edit this menu and add your custom tabs in it follow below steps.

Step 1: Login to your blogger account first and then go to your blog's mobile site using below link:

http://yourblog.blogspot.com/?m=1

Step 2: Now find the edit image(wrench and screw driver) below your menu as shown in below image:

Step 3: Click on it and Html/Javascript window will be opened, now you can make changes in your gadget. Click on save after making changes and you are done.

Customization:

You can change its color font, font-size and every thing if you know CSS but I recommend you to use it as it is. Do only slight changes like font color or font family.

The important thing which needs customization is adding new tabs and links or removing existing tabs. So read below to add or remove any tab.

To Add A New Tab:

You can add a new tab using below piece of code:

<li><a href="Your tab's link">Your Tab's Text Or Name</a></li>

Replace Your tab's link with your link and Your Tab's Text Or Name with your tab name. For example:

<li><a href="http://101helper.blogspot.com/">Home</a></li>

To Remove A Tab:

Remove its code from <li> to </li> for example to remove Home button I will remove:

<li><a href="http://101helper.blogspot.com/">Home</a></li>

Important Note: Add or remove a tab between <ul> id="nav" style="display: none;"> and </ul> in the given code.

Menu Not Appearing?

You might face a common problem of gadget not appearing in mobile view so for that you have to use custom mobile template. If you haven't switched to custom mobile template yet then go to blogger dashboard template and below the mobile template click on the edit icon. Now switch to custom template as shown in below image;

I hope you like this post and this menu is working properly in your blog if not please ask me by leaving a comment below. Share this post with others. Follow and subscribe for more blogger gadgets, menus, tutorials etc. Thanks for visiting 101Helper.

Search Tags: Mobile Menu For Blogger,Jquery menu for mobile site,Blogger mobile view gadgets,Blogger slide down menu for mobile site,101helper menus for blogger blogs,iphone mobile menu.

Read More

How To Submit Blogger Sitemap To Bing Webmaster Tools

I am sure Bing doesn't need to be introduced. Everybody knows Bing. It is the second most used search engine after Google which makes it important for bloggers and webmasters who are trying to promote their newly created site. One of the most important step to promote a blog or site is to submit its sitemap to every search engine so that it can be indexed and people can reach it though search engines. And that's why I created this post to help newbies how to submit blogger blog's sitemap to Bing Webmaster Tools. It will help Bing to crawl your blog and index every post you create. So follow below steps to submit your blog's sitemap to Bing. If you have any questions you can ask me in comments below.

You Might Also Like Reading:

1. How To Add Your Blog To Google Webmaster Tools
2. How To Submit Blogger Sitemap To Yandex
3. Submitting Sitemap To Google Webmaster Tools
4. How To Setup Google Custom Search Box In Two Pages In Blogger
5. How To Fix Blogid,Postid,Image_url,Updated Errors In Blogger

Requirements:

1. Microsoft account.

How To Submit Sitemap To Bing In Blogger?

Step 1: Go to Bing Webmaster Tools and sign-in using your Microsoft account.

Step 2: Click on Add a Site in the menu above Dashboard.

Step 3: Enter your blog's Homepage link and below it enter your blog's sitemap link. Leave the third option as it is.

I recommend you to use http://www.yourblog.blogspot.com/sitemap.xml as your sitemap url.

Congratulations! you are done successfully now its time to verify your ownership so follow below steps.

How To Verify Ownership In Bing Webmaster Tools?

Step 1: Click on Configure My Site below Dashboard in the menu and click on Verify Ownership.

Step 2: On the verification page there are three ways to verify your bing webmaster tools but we will choose the second option which is meta tag verification. So copy the meta tag of your webmaster tools as shown in below image.

Step 3: Now go to Blogger Dashboard > Template and click on Edit Html.

Step 4: Click inside the code and search for <head> by using Ctrl+F on your keyboard.

Step 5: Paste the Bing meta tag below <head> as shown in above image.

Step 6: Click on save template and go back to Bing verification page.

Step 7: Click on Verify button in the bottom and you are done.

Congartulations! Now your blog is verified in Bing Webmaster Tools. Bing will process your sitemap as soon as possible and index all your pages.

Important Note: Never remove Bing meta tag from your blog template even after verification because if you do so Bing will not index any of your page and start removing the already indexed pages.

After submitting your site to Bing Webmaster Tools wait for bing to index your pages meanwhile you may make some changes in your Robots text to indicate Bing which pages are to be indexed and which not.

Check Out: How To Use Robots Text For Better Seo

I hope you liked this post. If yes please share your views by leaving a comment below and share this post with others. Follow and subscribe to newsletter for latest updates about webmaster tools tutorials or blogging.

Search Tags: How to submit sitemap to webmaster tools, bing webmaster tools, blogger sitemap, blogger tutorials webmaster tools, 101Helper webmaster tools tutorials for blogger, How To Submit Blogger Sitemap To Bing Webmaster Tools,boost traffic,seo.

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