1111

Ad beeBaz

Home » Posts filed under Blogger
Showing posts with label Blogger. Show all posts
Showing posts with label Blogger. Show all posts

BuySellAds Review: Best Advertisement Platform For Bloggers

Posted by Mizanur Rahman Tuesday, August 5, 2014 0 comments
BuySellAds
It has always been a big problem for newbie bloggers to monetize their blogs. While the best way to make money from blogging is to do things by planning. Make a proper plan and do according to get success. Yeah! We need to a lot of patience to kick off earnings but most of newbies also don’t have patience and give up. Well, they also depend on Google AdSense only and just get stuck on it as AdSense also need quality publishers and keep disapproving the low quality publishers. However, there are many more alternatives of AdSense and even there are many effective ways that can make even more money than AdSense and newbies should come to know them. Other than AdSense, blog can be monetized by paid posts, direct banner ads, CPM ads, CPA ads, services and many more. But what about BuySellAds? BuySellAds is also the best advertising network for bloggers and you might have heard about it but today, we’re going to review this network deeply.

BuySellAds – Introduction

BuySellAds is the web advertising network where ads are being sold and bought for promotion and earning purposes. Basically, it is a place where both advertisers and publishers meet with each other and make a deal about advertisement easily. For bloggers, they can join the publisher account and start selling ads of their blogs.

How It Works For Bloggers?

BuySellAds can be the main source of income for bloggers if they work with it with huge interest. First of all, Bloggers need to apply for this and before applying they must checkout the criteria so that they may not get denied. If their criteria is not much matching for your blog than you may work on your to get such result. After you applied for it, it will take some time to get your application reviewed. Once you’ve got approved, you’re ready to go.

After getting your blog approved there, now you need to make some ad slots on your blog. Check which space is available in your blog and make ad slots for those places. Try to choose such places where visitors are having high impressions like above and below content, header, etc. So, after creating ad slots, you’ve to put codes there. They are automated codes and will show ad banners automatically if some purchased. These codes also collect data such as impressions and blog traffic that helps you to make sales.

Once you’ve done the setup, within some days, your blog will appear in BuySellAds directory for selling ads on your blog. BuySellAds have large number of advertisers and slowly slowly your blog will sell more and more ads. When someone will purchase ad slot on your blog, you’ll see message in your account about that and you’ve to decide, either you approve or deny it. After that the banner ad is displayed next 30 days on your blog and it will vanish away automatically after 30 days. Within these 30 days, you’ve to do nothing with these ads, you just need to work on your blog, update it, and promote it or whatever. But don’t be inactive because it may lose your blog traffic and it can effect on your BuySellAds.

Payment System

You also don’t need to worry about payment system because it is also automated and secured. Your each ad slot will get specific price and the advertiser will pay exactly that fixed price. After the ad slot is sold, you will receive the money in your BuySellAds account and all the money is first stored there until you decide to withdraw it. Another thing, BuySellAds also takes commission from your each sale and its reasonable because they manage everything for you. Now you can withdraw your earned money with two methods.

The first method is PayPal. The most loved way to send and receive money online. I think you know about this, right? Every blogger is known with PayPal. So, the minimum threshold for PayPal is $20 dollars which means you must have atleast $20 to withdraw with PayPal. Secondly, there is wire transfer method that is common and easy. Its minimum threshold is $500.

Some Approval Tips

So, This is your first time for applying to BuySellAds Publisher account and almost 70% of publishers have got rejected in their first application. So if you got disapproved than don't feel that you can't do it but you can do it by knowing what kind of publishers they want and be the one of them. Okay, here are some approval tips for you.
  1. Domain Name : The first and important thing that you must have is domain name. BuySellAds don't accept sub-domains like .BlogSpot.com but try to get .com, .net, .org or any other good domain for your blog and than go for BuySellAds.
  2. Blog Content : Your blog should have high quality content and not copied from other blogs. Your blog niche should also be available in the category of BuySellAds.
  3. Blog Design : BuySellAds also consider design as important thing as it helps them to make more sales. Try getting a professional and responsive theme for your blog.
  4. Blog Age : You blog must be at least 6 months old before applying for BuySellAds.
  5. Blog Loading Speed : Try to make your blog fast to load and keep your blog clean by removing unwanted things.
  6. Privacy Policy and About Us Pages : These pages are important to be made before publishing the first blog post. And they also help to get approved from several popular companies like BuySellAds.
  7. Blog Traffic : You must be getting 50,000+ impressions per month on your blog.
  8. Other Ads: Remove all the ads from your blog before applying for BSA.
  9. Page Rank & Alexa : You must have good page rank and alexa rank should also be less than 20,000.
  10. Social Followers : This one is also important so make sure you've good number of social followers on every network.

How To Apply For BuySellAds?

Okay, so once you've got all these things than you're ready to apply for BuySellAds. Follow the steps below to apply for your blog.
  • Go To BuySellAds >> Signup and Make Your Account First.
  • Now Login To Your Account.
  • Go To Publisher Dashboard and Click "Submit a Property"
  • Now, the form will come up which you've to fill.
  • In that form, you've to give your blog URL (without http://), blog name, blog description, language, blog type/category and average monthly impressions. 
  • Simply, fill it all and click "Submit" button at the bottom.
  • That's it.

Best Of Luck

BuySellAds is really one of the best advertisement platform for bloggers, once you got approved there than you might forget all other networks. So, best of luck in get approved there and hope you liked the review. Don't forget to share your views in comments and also share this with your friends.

Make a Blogger Template SEO Friendly

Posted by Mizanur Rahman 0 comments


In order to SEO optimize any template we need to do little changes in different part of our template. Below I'm going to discuss that all. You just need to read it carefully along with following the simple steps.

Display Post Title First In Search Results

Have you ever noticed that your post title appears after the blog title in search results ? If yes then continue following this section. First of all look the at the example below.
After seeing the above image, I think you have got my point. The reason why post title should appear first in search results is that when someone is going to search any content he will read the only few beginning words of title now if that words are matched with the content which he/she need then you will enter to that page otherwise he will leave it. In order to display post title first in search results simply follow the below steps.
  • Go To Blogger >> Template >> Backup Your Template
  • Click Edit HTML and Find For Below Code.
<title><data:blog.pageTitle/></title>
  • Replace The Above Code With The Following Code 
<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>
  • Save Your Template & You Have Done! 
  • Let's Jump To Next Step.

Adding Meta Description & Keyword Tags

So, This is another section our post and in this section we're going to add meta description and keywords tags in your blog which will tell the search engine's crawler that in which category your blog is based. It will also help the search engines to show your blog's posts on proper keywords. In order to add meta description and keyword tags, Simple follow the below steps.
  • Go To Blogger >> Template >> Edit HTML
  • Find For <head> and Paste The Following Code Below <head>
<meta content='YOUR BLOG's DESCRIPTION GOES HERE' name='description'/> 
<meta content='KEYWORDS GOES HERE' name='keywords'/>
  • Replace YOUR BLOG's DESCRIPTION GOES HERE With Your Description and KEYWORDS GOES HERE With Your Keywords
  • The maximum characters for description is 150 characters and also 150 characters for keywords.
  • Finally Save It !

Optimize Post Title Using H2 Tag

This is said by many professional bloggers that we should use H2 tag in our post titles for better search engine optimization. By default in Blogger, H3 tag is used for post title but using H2 tag will be better. To use H2 tag in post title just follow the below simple steps.
  • Go To Blogger >> Template >> Edit HTML
  • Find For Below Code
    <b:if cond='data:post.title'>
  • You Will See Something or Similar Code Like The Image Below 
  • In the above image you can see in starting that post title starts with H3 tag now you just need to replace H3 with H2 and also replace the ending tag </h3> with </h2>. After replacing you code will look like below image.
  • After optimizing post title, Just save your template and you have done!
  • CONGRATULATIONS! Your Template is successfully search engine optimized!

From The Editors Desk

I'm happy to know that you've successfully search engine optimized your template. I hope this little long tutorial will bring huge benefit to you and your blog. Facing any problem ? Always feel free to ask in comment because your comments are always appreciated. Be in touch with us for more and also subscribe us. Take a lot of care of you and your family. Peace!

Add Custom Robots.txt File In Blogger

Posted by Mizanur Rahman 0 comments
In our previous, we had discussed about creating professional 404 error page and here we're back with another great and most important tutorial for all of you. Today we're going to enable a custom Robots.Txt file in Blogger which can really help you to index your blog in Google faster and it will also make your blog more search engine friendly. Robots.Txt file is used in every website but in the past with old Blogger interface we're unable to add that file in our blogs but now in the new interface which is really amazing with a lot of great features we can enable that file in Blogger. Those who don't know about Robots.Txt file can read the below passage to understand that file.

What is Robots.Txt File ?

That is a simple text file in which the website owner use to write the commands for the search engine's crawler. It means that we can instruct the search engine's crawler with that file that we part of our site can be indexed or not. That commands are written in different coding which is only for search engine's crawler. You can see your robots.txt file just by following the below URL.
http://www.yourdomain.com/robots.txt

 What Areas You Should Disallow For Crawling In Your Blog?

So, This question maybe coming in your mind that which areas of your blog you should disallow for crawling. In fact, You can disallow any area of your blog but there are some important areas for disallowing. If you disallow those areas then you blog will be more search engine friendly and that areas are Search Result pages, Archive pages and labels pages. However, Below I'm giving you an search engine friendly robots.txt file which will help you a lot.

Enable Custom Robots.txt File In Blogger

So, This process is so easy just follow the simple steps below.
  • Go To Blogger >> Settings >> Search Preferences
  • Look For Custom Robots.Txt Section In The Bottom and Edit It.
  • Now a check box will appear tick mark "Yes" and a box will appear where you have to write the robots.txt file. So if you want to use our file then copy the code below and paste it in that box.
User-agent: Mediapartners-Google
User-agent: *
Disallow: /search?q=*
Disallow: /*?updated-max=*
Allow: /
Sitemap: http://www.yourdmomain.com/feeds/posts/default?orderby=updated
  • Note : The first line "User-agent: Mediapartners-Google" is for Google AdSense. So if you are using Google AdSense in your blog then remain it same otherwise remove it. 
  • Click "Save Changes".
After adding the file now you must be wanted to understand your file that what we have allowed and disallowed. So, I've listed every command with detail below.

Explanations

  • User-agent: Mediapartners-Google : So, This is a first command which is for those blogs which are using Google AdSense if you are not using Google AdSense then remove it. In this command, we're telling the AdSense's separate robot that crawl all pages which are having AdSense Ads.
  • User-agent: * : Here the User-agent is calling the robot and * is for all the search engine's robots like Google, Yahoo etc.
  • Disallow: /search?q=* : This line tells the search engine's crawler not to crawl the search pages.
  • Disallow: /*?updated-max=* : This one disallows the search engine's crawler to do not index or crawl label or navigation pages.
  • Allow: / : This one allows to index the homepage or your blog.
  • Sitemap : So this last command tells the search engine's crawler to index the every new or updated post.
Got It ?

How Can I Add a Command For Disallowing Any Page?

So if you are interested in adding your own command then you can also do it. Here is an example for disallowing the contact page Disallow: /p/contact-us.html . So, first you will need to replace /p/contact-us.html which is other part of the domain with another. It mean you just need to exclude the main domain and just type remain part of the page. Two things you should remember that add your custom command below User-agent: * and per line = per command. If you still have not got it then ask in comments please.

What's More ?

So friends, It was our robots txt file which is going to help you definitely. We will be back with other great tutorials of search engine optimization. So be in touch with and also leave your feed backs in the comments section because your comments are always appreciated. Take a lot of care of you and your family. Cheers!

Custom Robots Header Tags Setting In Blogger

Posted by Mizanur Rahman 0 comments
If you are using Blogger to manage your blog then you may probably know that few months ago Blogger engineers had introduced new interface which is having fantastic features. The main thing of that new interface is that there is 'Search Preferences' section added in the settings area. That section helps us a lot to make your blog search engine friendly and to gain handsome traffic from search engines. In our previous posts we discussed about some things of search preferences which were meta description tags, robot.txt file and custom 404 error page but here we're going to discuss about custom robots header tags setting which is also a part of search preferences settings.

Basically, custom robots header tags setting is similar to robots.txt file because these both things are about to tell the search engine's crawler for which area they should index or not. But there is on difference. In robots.txt file we used to write the command and in custom robots header tags we'll need to tick mark some check box. If you tick mark correct fields then there is a chance of getting traffic even more from search engines. This will also help you to increase the visibility of your blog in search results. You can use custom robots header tags correctly with the help of below tutorial. So go and get it now.

Custom Robots Header Tags Setting

  • Go To Blogger >> Settings >> Search Preferences
  • In The Crawlers and Indexing Section, Edit Custom Robots Header Tags and Tick "Yes" To Enable It.
  • Now A Long Box Will Appear Where You Have To Tick Mark The Fields. Tick Mark Some Important Fields With The Help Of The Image Below.
  • After Ticking The Fields Properly, Click "Save Changes" and You Have Done!

What's More?

So these were our custom robots header tags and it seems that we've completed the search preferences section and also on page SEO of Blogger. So in our next posts we're going to discuss about some Off Page SEO topics. Be in touch with us for more and also subscribe us to get hot updates straight in your inbox. Cheers!

How To Add Beautiful Flat UI Buttons in Blogger

Posted by Mizanur Rahman 3 comments
Beautiful Flat UI Buttons
As we all know that having a professional design of a blog is necessary these days as it gives several benefits. Bloggers and webmasters are trying to make their blog design better applying free or paid themes on their blogs and websites. The theme or design of a blog should be beautiful to look and have several features like easy interface for user, SEO friendly, Ad space ready, the colors should not affect on user's eye and many more. Previously, we've shared colorful Flat UI label cloud widget for blogger which was liked by many of our readers and they also applied that on their blogs but today, we're back with another Flat UI element or item for our blogs. Today, I'm going to share beautiful Flat UI buttons for blogger which I coded recently.
Recommended : How To Add Push Buttons in Blogger

Beautiful Flat UI Buttons - Review

These are Flat UI design beautiful buttons which will help you to bring awesomeness to your blog design. These buttons have different colors and sizes which will help you to use them for most appropriate situations and places. There are three sizes for these buttons which are big, medium and small. We've chosen total five Flat UI colors for these buttons which are Blue, Green, Red, Purple and Sea Green. Actually, These are not exact those colors mentioned above but we can call them above colors in common because mostly they match with each other. We've coded these buttons in such way that they will not affect on the loading speed of your blog because we've written short coding, compressed it and only used CSS3 without images. Another thing about these buttons is that they will work perfectly on all browsers because we've tweaked them for every browser. Click the below button to see it's live demo.
Flat UI Buttons Demo

How To Add Beautiful Flat UI Buttons in Blogger?

Implementing these buttons in our blog is not any difficult job but anyone can easily add them in his blog by following the simple steps given below. So, let's start the first step by installing these buttons in our blogs.

Step 1. Installation

  • Go To Blogger >> Template >> Backup Your Template
  • Click Edit HTML and Search For </head>
  • Paste The Following Code Above </head>
<!-- Flat UI Buttons By Www.BloggerYard.Com Start -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css"></link>
<style type="text/css">
.button {color:white!important; font-family:open sans; margin:10px 10px 10px 0;text-decoration:none!important; font-weight:700;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-oborder-radius:5px; transition:all .4s;-webkit-transition:all .4s;-moz-transition:all .4s;-ms-transition:all .4s;-o-transition:all .4s;}
.blue {background: #3498db;border-bottom: 3px solid #226693;}
.blue:hover {background:#2980b9;}
.green {background: #2ecc71;border-bottom: 3px solid #1F8C4C;}
.green:hover {background: #27ae60;}
.red {background: #e74c3c;border-bottom: 3px solid #922C20;}
.red:hover {background:#c0392b;}
.purple {background: #9b59b6; border-bottom: 3px solid #74398E;}
.purple:hover {background:#8e44ad;}
.seagreen {background: #1abc9c;border-bottom: 3px solid #127F69;}
.seagreen:hover {background: #16a085;}
.big {font-size:18px; padding:15px 20px;}
.medium {font-size:15px; padding: 10px 15px;}
.small {font-size:12px; padding:8px 10px;}
</style>
<!-- Flat UI Buttons By Www.BloggerYard.Com End -->
  • Click "Save Template".
  • Installation Completed!

Step 2. Adding Flat UI Buttons in Blogger 

You can use these Flat UI buttons anywhere in your blog. For that, you just need to copy the any button code and paste it anywhere you want to use it. Below, I'm going to give you button codes and also going to show you that how can we use them in a post.
  • Go To Blogger >> Create New Post
  • Click "HTML" Tab
  • Copy and Paste Any Button Code There.
Big Size Buttons

<a class="button blue big" href="#">Blue Button</a>
<a class="button green big" href="#">Green Button</a>
<a class="button red big" href="#">Red Button</a>
<a class="button purple big" href="#">Purple Button</a>
<a class="button seagreen big" href="#">SeaGreen </a>

Medium Size Buttons

<a class="button blue medium" href="#">Blue Button</a>
<a class="button green medium" href="#">Green Button</a>
<a class="button red medium" href="#">Red Button</a>
<a class="button purple medium" href="#">Purple Button</a>
<a class="button seagreen medium" href="#">SeaGreen</a>

Small Size Buttons

<a class="button blue small" href="#">Blue Button</a>
<a class="button green small" href="#">Green Button</a>
<a class="button red small" href="#">Red Button</a>
<a class="button purple small" href="#">Purple Button</a>
<a class="button seagreen small" href="#">SeaGreen </a>
  • Replace #  With The Link of Button.
  • Replace Highlighted Text With The Text You Want to Show On That Button.
  • Prepare Post Content and Publish.
  • That's All. 

Final Words

These were beautiful Flat UI Buttons for Blogger which I liked to share today with you all and I hope this little effort in preparing these buttons will help everyone to stylify their blogs. Facing any problem in implementing these buttons? Feel free to ask below. Keep in touch with us for the upcoming hot dish which is being prepared in our kitchen and also share these buttons with your friends. Take Care!

How To Add Reddit Button in Blogger

Posted by Mizanur Rahman 0 comments
Reddit Button For Blogger
For choosing the perfect theme of our blog it's important to check several things like Layout Design, Responsiveness, SEO Friendly, Ad Spaces and many more but social media buttons are also now required while choosing theme. The reason is simple, Social buttons and plugins gives more benefit to our blog traffic and I think the reason everybody knows, when we've social buttons in blogs, everyone can easily share the post on his social profiles which means our blog post is spreading on the social networks and it also helps to obtain some extra traffic. Well, we can use these social buttons of any network and mostly you might have implemented Facebook, Twitter, Google+ buttons in your blog but ever thought about adding Reddit button in your blog? So, here in this post, I'm going to show you that how you can add Reddit button in your blog and also something about Reddit.

Why To Add Reddit Button in Blogger?

Reddit is a social bookmarking network where people can submit the special content's link there and those links are stored in the categories of Reddit. Now people come there to Reddit to enjoy the special content without wasting too much time in searching about that and those who've submitted links get high traffic to their websites. You can also submit your links in Reddit but doing it manually will be difficult as compared to submission through Reddit button. It's almost easiest to submit links with Reddit button that's why you may want to add reddit button in blogger. Other than this everyone can submit your links which is even better for you to drive more and more traffic.

How To Add Reddit Button in Blogger?

There are different type of Reddit buttons like submit link button, upvote and downvote button, button with points which we can add in our Blogger blog. So first you've to choose which button you want to add in your blog. Go To Reddit Buttons page and there will be all type buttons listed there. Just select any button, copy it's code and save it in notepad. There will be "View Code" option in the right side of every button to get it's code. Once you've choosed the button and saved it's code then follow the below steps.
  • Go To Blogger >> Template >> Backup Your Template
  • Click Edit HTML >> Find For <div class='post-footer'>
  • Just Below <div class='post-footer'> Paste The Button Code Which You've saved in notepad.
  • Click "Save Template".
Congratulations! You've successfully added the reddit button in your blog. Now it will appear below every post in your blog. 

Final Words - "Happy New Year 2014"

That's how we can easily add reddit button in our blogger blog and I don't think it's difficult. It seems like the pleasing year of 2013 has gone away and we've entered into the another year 2014. Happy New Year 2014 to you all lovely friends from my side. Consider this little tutorial as a gift of new year and also share this gift with your friends. Happy Driving Traffic With Reddit!

How To Setup Feedburner Email Subscription in Blogger

Posted by Mizanur Rahman 0 comments
Setup Feedburner Email Subscription
When someone creates a new blog, it requires some hard in initial days like building content, choosing proper blog theme, doing SEO, creating social accounts, promoting blog, setting email subscription and many more. When the time comes for email subscription, most of newbies get confused that which email service they should use for their blog as there are many free and paid feed email services and Feedburner is most popular among them. For a complete newbie, It can be little difficult to setup feedburner email subscription in his blog so here we're going to show you that how can we setup feedburner email subscription in blogger blogs.

What is Feedburner Email Subscription and Why To Do it?

Basically, Feedburner is feed email service which helps to send our blog's feed content automatically to our subscribed readers. When we've setup email subscription in our blog, when someone will subscribe to our blog through using his email then he'll receive all the blog updates straight in his inbox. Feedburner is a powerful tool which will help us to manage email subscription automatically and also sending them blog updates. There are several reasons that we should setup feedburner email subscription in our blog such as it serve the blog readers better, living in touch with our blog readers and also helps to make money through email list.
Recommended : How To Build Email Subscribers List

How To Setup Feedburner Email Subscription in Blogger?

As I already said that newbies may face problem in setting up feedburner email subscription in their blogs but this tutorial will finish your problems. We've divided the tutorial into three parts which will just help you to understand the process with ease. 

1. Create Your Blog Feed

  • Go To Feedburner
  • Login With Google Account
  • There Will Be Box Like The Image Below, Paste Your Blog URL and Click Next.
  • Tick Mark "Atom" Feed and Click Next.
  • Now Pick Up Your Feed Title, Address or Username and Click Next.
  • Now You'll See The Message That Feedburner Feed is Now Live and You've Done The First Part.
  • Let's Jump To The Second Part.

2. Enable Email Subscription 


  • Go To Feedburner
  • Open Your Feed Dashboard
  • Click on "Publicize".
  • In The Sidebar, There Will Be "Email Subscription" Option, Click it.
  • Now In The Bottom Of The Page, Click "Activate" Button.
  • So, Your Feed's Email Subscription is Now Enabled!

3. Put Subscription Form in Your Blog

  • Go To Feedburner >> Dashboard >> Publicize >> Email Subscription
  • There Will Be Box Filled With Coding.
  • Copy That All Coding in That Box.
  • Go To Blogger >> Layout >> Add a Gaget
  • Choose HTML/JavaScript
  • Paste The Copied Code in Content Box.
  • Click "Save".
  • Congratulations! You've successfully setup feedburner email subscription in your blog.
Now a subscription form will appear in your blog by which your readers can subscribe to your blog and can receive latest posts directly in their inbox. However, If you don't like that subscription form that we've made some custom feedburner email subscription forms which you can use and these are newsletter subscription widget, header subscription box and blueprint subscription widget.

Final Words

So friends thats how you can setup feedburner email subscription in your blog and I don't think you'll face any problem in understanding this process as I've put screenshots for every step and also explained that in easy words. However, if you've any issue then feel free to ask in comments and also share your views about it. Share this article to your friends, keep visiting us and take a lot of care.

How To Use Font Awesome Icons in Blogger

Posted by Mizanur Rahman 0 comments
Font Awesome Icons For Blogger
In the Graphic and Web Design icons are such elements which gives beauty to the design. The use of icons in designs is increasing day by day as they're more profitable. About blog themes and templates, icons are also being used in them but mostly those icons are images. Some themes have low quality icons with dull icon design and colors and other themes also have high quality flat and metro design icons. Well, Have you ever thought about using icons in blogger blogs? If yes then you might get this idea to use icon images? Now, just say "No" to icon images and get started with font awesome icons.

What is Font Awesome?

Font Awesome is a brand which gives iconic font for designers to make better designs by the use of icons. That iconic font name is same "FontAwesome". In WordPress and other platform, it is common now and everyone is using this in their blogs and sites. The brilliant thing of this special font is that it doesn't use images which helps to make blog more fast while image icons take more time to load. This font contains 369 icons including Web Application Icons, Form Control Icons, Currency Icons, Text Editor Icons, Directional Icons, Brand Icons, Video Player Icons, Medical Icons and many more which are being updated in version. It's current version is 4.0.3 that is absolutely free for everyone.  

Is It Easy To Use Such Icons in Blogger?

It's extremely easy to use font awesome icons in blogger if you know basic CSS. Even I think it is more easy to use than using image icons. I recommend everyone who has blogger blog to use these icons in their blog if they want to bring awesomeness to their blog design. If you're designing templates and widgets then you can also use them to improve design. These icons are also not made with JavaScript but just font and CSS is used in them. The steps are easy, just install external CSS plugin and call icons anywhere in HTML where you want to use.

How To Use Font Awesome Icons in Blogger

1. Installation

  • Go To Blogger >> Template >> Edit HTML
  • Search For <head>
  • Below It Paste The Following Code.
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
  • Save It.
  • Successfully Installed!

2. Using Icons

  • Now the main problem is here in using icons. Let's fight with second step.
  • First of all, Open this icons list URL in browser tab. Font Awesome Icons List
  • Get any HTML element such as <a> or <div> or <li> in which you want to use icon.
  • Now put <i class='fa fa-home'></li> between the HTML element tag.
  • Didn't get it? See the example below.
<a href="URL"><i class="fa fa-home"></i>Home</a>
  • We just put <i> HTML tag in between along with calling icon class. 
  • To change the icon, Open the list and there each icon contains class name which you can replace in class"" attribute. Just remain the first fa as it is and replace another class after space.

3. Customizing Icon

  • In some cases, you may need to customize the icon.
  • Here is nothing difficult you can do it with simple CSS.
  • Just call <i> tag in CSS and customize it as you want.
  • Example, i { color:#444; font-size:25px; }
  • In the above example, You can see I've given icon color and you can handle icon size easily with font-size.
  • That's it!
That's all about using font awesome icons in blogger and I don't think it is any difficult for those who know CSS but in starting, you might face issues. Well, customization is also easy by using CSS only. I hope that icons will help you to make better designs and these icons are gorgeous. Got a problem? Ask us in comments below. Share your thoughts and also share this. Have a nice day and Happy Icons For Blogger!

How To Add Pure CSS3 Content Tabs in Blogger

Posted by Mizanur Rahman 0 comments
CSS3 Content Tabs For Blogger
It has been always important to use pretty theme for our blog because it affects on readers. Just an example, if you've professional design some readers can love it and will visit your blog again and again or they will easily become your big fan as it shows professionalism. Well, design is not everything but the most important thing is content that you provide and yes! There should also be great way to produce content to your readers, subscribers and everyone. Hence, There are many tools in the post editor that can help you to prepare content that will be in proper way but ever thought about implementing content tabs between your posts? This is also useful idea and can do well management in setting up content on your blog. So, Today we've brought a pure CSS3 content tabs for blogger that we're going to share.

Pure CSS3 Content Tabs For Blogger

Putting content in tabs between posts is very useful as it helps to add different categories content in a single box and it also saves the space. The content tabs widget that we're sharing today looks neat clean and has a bit of Flat UI combination. It contains only sky blue color and have 4 tabs. You can put this widget in your post to serve content of different 4 categories as tabs will help you to differentiate the content. This is made with pure HTML5 and CSS3 that are most latest version of web development languages. This content tabs widget gets fixed in any post and it doesn't how long you put the content in every tabs, It will just grow more and more. It also has an effect while changing the tab that brings more beauty.

How To Add Pure CSS3 Content Tabs in Blogger?

  • Go To Blogger >> Create New Post >> HTML Tab
  • Copy The Following Code 
  • Paste It in The HTML Tab
<link href="https://googledrive.com/host/0ByNodV_m9cVLVDV1eEkyNVBITTg/" rel="stylesheet" type="text/css"/>
<div class="tabbed-view">
  <form>
    <div class="tab-container orange">
      <label class="tab-label">
        <input checked="checked" class="tab-radio" name="page" type="radio" value="page5" />
      </label>
      <br />
      <h2 class="tab">
        Tab 1 Heading
      </h2>
      <article class="tab-page" id="page5">
        Tab 1 Content Goes Here
      </article>
   
   
      <label class="tab-label">
        <input class="tab-radio" name="page" type="radio" value="page6" />
        <h2 class="tab">
          Tab 2 Heading
        </h2>
        <article class="tab-page" id="page6">
          Tab 2 Content Goes Here
        </article>
     
      </label>
   
   
      <label class="tab-label">
        <input class="tab-radio" name="page" type="radio" value="page7" />
        <h2 class="tab">
          Tab 3 Heading
        </h2>
        <article class="tab-page" id="page7">
          Tab 3 Content Goes Here
        </article>
     
      </label>
   
      <label class="tab-label">
        <input class="tab-radio" name="page" type="radio" value="page8" />
        <h2 class="tab">
         Tab 4 Heading
        </h2>
        <article class="tab-page" id="page8">
          Tab 4 Content Goes Here
        </article>
     
      </label>
   
    </div>
  </form>
</div>
  • Find The Highlighted Lines In The Above Code
  • Replace Them As Instructed
  • You'll Need To Change Tab Heading and Tab Content Of Every Tab
  • Prepare The Post
  • Publish!

Final Touches

These were the content tabs that we were about to share today and I hope they'll help you to improve the way of producing content. In some cases, it's important to use such tabs so this tutorial will surely help. Have an issue? Comment below man! Don't waste time. Take Care!

How To Add Google Custom Search Engine in Blogger

Posted by Mizanur Rahman 0 comments
Google Custom Search Engine For Blogger
Few days ago, We had discussed that how can we add next and previous pagination buttons in blogger that actually helps to improve the user interface and user navigation of blog and today again we're going to share a widget that will also improve the navigation a bit more. Today, we're going to show you that how can we add Google custom search engine in Blogger blog. Most of the blogger templates these days comes with built-in default blogger search boxes that are not much powerful to give exact result because their factor of finding the result is not good as it should be but adding Google custom search engine will be better because it gives accurate result and also has some more useful functions.

Google Custom Search Engine? Tell me a bit more.

Just like YouTube, Blogger and Gmail Google products, custom search engine is also a product developed by Google to let sites display the search box for inner site search only. If you run a website that has tons of pages with huge data and its really difficult to set the perfect navigation than you could use search engine that will help your visitors to navigate easily just by searching the thing that they in search box and search box will automatically give them the path of the content that they want. It's totally easy. 
Do you know how Google custom search engine works? You'll be amazed by knowing it. You know how much powerful Google is and it's whole search engine. Google uses various natural factors to bring up the exact and correct search results and in custom search engine, Google uses same formula. That's why we're recommending to implement this in your blog and enjoy its facilities. 
Google custom search engine also allows you to monetize the search result pages but for that you'll need to have normally approved Google AdSense account. You can easily sign in to custom search engine with your AdSense account and enable monetization in monetize page. It might take time to activate but later it will start working. Google displays ads in the search result pages and ads are also relevant to the every keyword that user may search and you're easily paid for clicks on ads and also impressions.
Other than this, Google custom search engine has functions to customize the theme of search box, enable voice search, image search and many more options. Even you can change the layout style of search box and search results or use your own search box and display custom search engine's result somewhere else. There is a lot you can do with this. It's simply amazing.

How To Add Google Custom Search Engine in Blogger?

  • Go To Custom Search Engine 
  • Click on "Create a search engine"
  • Insert your blog URL in "Sites to search"
  • Choose Language, Pick up engine name and click "Create"
  • You'll see the message like above which means you've successfully created custom search engine.
  • Now click on "Get code"
  • Copy the code 
  • Go To Blogger >> Layout >> Add a Gadget
  • Choose "HTML/JavaScript"
  • Paste the copied code in "Content Box"
  • Save It
  • Congratulations! You've successfully added custom search engine in your blog.
There is a lot you can do now with your custom search engine like customizing the theme that may suite with your blog design, enabling monetization, disable or enable voice search and image search, changing layout and much more. Just navigation through left vertical menu bar and you can easily do all from there.

Final Words

So, That was Google custom search engine and we hope you've enjoyed today's article and if you like than don't forget adding this search box in your blog because its full of profit. Even I also removed the previous default Blogger search box and implemented this custom search now. Also share this article with your friends and Have a nice day!

How To Make Your Blogger Template Responsive

Posted by Mizanur Rahman 0 comments
Responsive Blogger Template
About some months ago, We had published the basic guide to create blogger template which helped many of our readers to become blogger developer and it also went viral, but still its rolling there. It was basic guide and we left many things than can make you pro blogger developer and today we're back with one of the most important thing that every blogger template should have. We're gonna discuss that how can we make our blogger templates responsive. Don't know about responsiveness? Don't worry, we're here to tell you all.

What Is Responsive Web Design?

Either it is blogger template or any other web template, we can generally call it "Responsive Web Design". Let me describe in simple and common words, Responsiveness is a feature of the web theme that allows the design to fit in any screen size. In the today's technology world, people use different devices like laptop, tablet, mobile to surf the internet which have different screen sizes and our web themes must be optimized for all screen sizes to fit automatically in any device so that users may not face any issue while surfing our blog or site.
These days, almost everyone have updated their web themes to fit in every screen but some old websites and lazy designers like me don't have updated yet. Yeah! Blogger Yard is not yet responsive because we're busy right here but soon we'll introduce the totally new version of Blogger Yard which will also be responsive.
There are several reasons for making our blog themes responsive, the first and simple, it improves the user interface, it can increase tablet and mobile users and we can also generate more money with it if we display responsive ads that can appear in every screen size. 

Things To Know Before

Before we start the tutorial, let me know either you will be able to turn responsiveness in your blogger template or not. 
  1. CSS Skill : Do you have cascading style sheet skill? Yes? Great! Bringing responsiveness to blogger template is all CSS work and if you've skill in it than you might not face any issue in it.
  2. Template Structure : Do you know the structure of your blogger template? If the template is designed by you than you must know how you've wrapped the header, content and other sections. While making responsive blogger template, we play with each HTML element and for that we must know how the template is structured. If the the template is not designed by you than you can take a look on its structure and study it than you may continue making it responsive.
  3. Useful Chrome Extension : This is not the thing to be known before but we're recommending a useful chrome extension here that will help you a lot to work on responsiveness. Its Resize Window chrome extension that will help you to resize browser window with the size of different device screens. I recommend to work on every screen size that is listed in this extension.

How To Make Responsive Blogger Template?

So, Its time to learn responsiveness and we'll take a lot of time of you because we're gonna make this guide as long as we can. Let's start it.
As you know that responsive web design can be made by using CSS only and there is an special tag in CSS that we can use for responsiveness. You can use Media Queries (@media) and its just simple like drinking water if you know CSS very well. These media queries acts like If Else Statements in JavaScript and also Conditional Tags in Blogger. We make many media query tags for each and every device screen size and put CSS content in it. The CSS content that will be added in these media query tags will only work in the specified screen size. 
Its not end here friend! There is one more thing that we forget to mention. Before working with media queries, we should add a meta tag below head that helps the browser to detect the screen size and work properly with media queries.

Adding Meta Tag For Responsiveness

  1. Go To Blogger >> Template >> Backup Your Template
  2. Click Edit HTML >> Search For <head>
  3. Paste The Following Code Below It.
  4. Save!
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
There is nothing much difficult with this viewport meta tag. You have to just add it below your <head> and it will start working.

Working With Media Queries 

Okay! So, I've prepared the simple media queries code with different screen sizes on which you must work.
@media screen and (max-width : 1280px) {
/* CSS FOR NETBOOK AND DESKTOP ------------*/
}

@media screen and (max-width : 1024px) {
/* CSS FOR TABLETS ------------*/
}

@media screen and (max-width : 768px) {
/* CSS FOR SMALL TABLETS ------------*/
}

@media screen and (max-width : 640px) {
/* CSS FOR IPHONE ------------*/
}

@media screen and (max-width : 480px) {
/* CSS FOR MOBILES ------------*/
}

@media screen and (max-width : 320px) {
/* CSS FOR SMALL OLD MOBILES ------------*/
}
Look, how the code is written. Its simple. Starting with (@media screen and), adding screen size (max-width:1280px) and brackets where the CSS will be stored. It simply tells the browser that if the screen size is less than max-width than apply the code in brackets. Yes! If the screen size will be exact max-width or less than it will work until it reaches to another media query. You can also change the max-width size according to your own.

Some Advanced Tips 

Tip #1 : While you're writing the code for media queries, try to specify web elements in the way we're showing you. You should use "em" instead of "px" for font-size, padding, margin etc, use percentage for defining with of columns and use box-sizing, max-width and min-width properties.
Tip #2 : Try to cover the whole design in wrapper by making div and give it different widths in every screen size or you can also do this body tag. By this, things might mess up in initial in different screen sizes but the ending corners will re-size and become responsive in other screens.
Tip #3 : Put some margin in the left and right sides of the whole body. For example if we put margin of 100px in the media screen of 768px than the design will be responsive till the 668px of screen size.
Tip #4 : While making the navigation menu, try to put label 3 lined clickable button with it for small screen sizes like mobile that shows the navigation menu after clicking on the button. If you can't do this than try to add class tags in every list item but not drop downs and hide the list items in different screen sizes where there are not suiting by calling with class.
Tip #5 : Keep doing practice with it and if you stuck than try to get help from seniors. You can also get some responsive web designs and study them to learn making blogger template responsive.

Final Keystrokes

That's how we can make responsive blogger template and we hope this complete guide won't let you face any issues but you get them, comment below and lets discuss. We're active now!

How To Change and Use Fonts in Blogger

Posted by Mizanur Rahman 0 comments
Google Fonts For Blogger
Undoubtedly, Blogger is an amazing platform to create and manage blogs even if you're a newbie as we can see the number of blogs raising rapidly. Okay, everybody know this, but the most common problem with mostly every blogger user is using perfect template for blog as it matters a lot. Template should be user friendly, its font should be eye-friendly and easy to read, it should also be responsive and some more features we want the template.

Everybody have got any blogger template to use in their blogs either they're beautiful or ugly but we're using them. But the main thing is content and there font matters a lot. If you're feeling that your blog doesn't have beautiful font than you should change the font immediately. Because in the blog, the main thing is content or articles and if you've used any bad font that makes the article difficult than definitely it will affect on your blog visitors and you might loose your visitors.

Changing font is blogger is not a big deal. We've great collection of web fonts available on Google Fonts for free from where you can pick up any font and start using it on your blog or web. Google Fonts is one of the most popular place for fonts and almost every website is using fonts from there because there fonts are great and are hosted on Google servers which are really fast. Implementing fonts in our blog is really easy, we just need to add a html link tag below <head> which calls the font to load in our blog and use font-family CSS property to call the font in any web element.

Don't worry, if you're a newbie and don't know how to change and use Google Fonts in your blog because below I'm going to show you step by step that how can we easily do that.

How To Change & Use Google Fonts in Blogger?

Okay, So here I'm going to divide the tutorial in two pieces just to let you understand it easily. In this part, we'll remove the existing font in your blog and in second part, we'll install and use new font. Let's get started.

1. Removing The Existing Font

  • Go To Blogger >>  Template >> Backup Your Template
  • Click Edit HTML and Search For The Following Code
fonts.googleapis.com
  • Mostly, This will be available below <head> of the templates.
  • After finding the above code, you'll see it in the html <link> tag like the image below. 
  • Just remove that html link tagline.
  • Save Template.

2. Installing New Font in Your Blog

  • Go to Google Fonts and find the best font that you want to use.
  • After choosing font, click on "Quick use" button, shown in the image below.
  • Tick mark all the styles
  • Scroll down and copy the html link tag code.
  • Go To Blogger >> Template >> Edit HTML
  • Search For <head>
  • Paste The Code Below It and Save Template.
  • If it gives error, try adding / before > at the end, after that ending will be like />.
  • Okay, now font is installed and lets call it in our template.
  • Come back to Google font page and scroll down more.
  • There, you'll see the block like below.
  • Copy that code and Go To Blogger >> Edit HTML
  • Search for body { or body{
  • There you'll see font-famiy:bla-bla-bla;
  • Remove that font-family property till semicolon and paste the new one there.
  • Save Template.
  • If the font is not working properly now than add the following code above ]]></b:skin>
body, h1,h2,h3,h4,h5,h6 .post, .post-body, .content-wrapper, .main-wrapper, .outer-wrapper, .footer-wrapper, #content-wrapper, #main-wrapper, #footer-wrapper, #rsidebar-wrapper, .sidebar-wrapper {FONT FAMILY PROPERTY HERE!important}
  •  Paste the font family property in the highlighted and remove semicolon because we've added !important tag that will call the font importantly in the given areas.
  • Save Template 
  • You're Done!

Final Keystrokes

Seems like your blog is looking awesome after installing fresh font. Hope you successfully did this through this guide as we've tried to make it step-by-step. Even if you got stuck anywhere than feel free to ask below in comments. Please leave your views in comments, share this article with your friends and keep visiting us for more easy tutorials. Have a nice day!

Copyright © BeeBaz. All rights reserved.

Super SEO created by BeeBaz From Mizanur Rahman