
Chances are your blog will never reach that traffic level, and so your blog will not earn you a livable income from advertising alone. How can you make your blog profitable then? By following an age-old formula.
Read more �
After an interesting Hangout with AdSense Folks on 18th June at Google+, Susan Wojcicki announced about an interesting new feature called Publisher Scorecard that has been added to all AdSense accounts and the scorecard summary chart can be seen under the Home Tab. Scorecard is a tool that gives greater insights to Publishers to compare how well their Ad settings, Website load time and content is performing compared to other Publishers using AdSense as the contextual Ad network. It displays a summary of three important categories which includes Revenue Optimization, Site Health and Google+ button Integration. Each category is scored on a scale of 1-5 blue dots that indicate your performance rank or level. In today's tutorial we will learn every basic detail of this great scoring tool and will learn how to optimize our websites and blogs to increase the overall AdSense earning. Lets jump straight to this fun ride and make better money with AdSense!
Do this for all your AdSense for content Ad zones.
(c) Reduce Crawler Errors
User-agent: Mediapartners-Google
Disallow:
See our robots.txt file as an example.
Note: Blogger users have this added by default. Wordpress users may manually add this.
Following are some interesting details about the various symbols used in your scorecard chart. You can find more help and details on scorecard at Google Groups
1. Following are the three important Scores symbols and their description
Score | Description |
---|---|
Excellent! No need to make any changes to this category. | |
Improvements suggested. You are advised to make some further improvements to this item. | |
Needs improvement! You must or may take quick action to optimize this item |
2. Following are some symbols that would appear after you make the suggested changes.
Symbol | Meaning |
---|---|
This category�s score has increased by one or more blue dots up to four blue dots. | |
This category�s score has drop down by one or more blue dots down to three blue dots. | |
This item�s score has gone up from �Needs improvement� to �Improvements suggested�. | |
This item�s score has gone down from �Improvements suggested� to �Needs improvement�. |
Blogging is popular business in Nigeria, especially now that a lot of people have come to realize the great potential it holds for them. Bloggers now take the business of blogging as a fulltime business, and they are making a lot of money just like their counterparts in the rest parts of the world. With an estimated population size of 160 Million people and over 60 million internet users, you can rest assured that bloggers in Nigeria enjoy good traffic to their sites.
Don Caprio is one of the top 10 popular bloggers in Nigeria � 2013. He is the owner of DonCaprio which has become a trade name in the Nigerian blogging industry. Don Caprio is a leading blogger as well a web designer who has helped to reposition so many poorly designed blogs in Nigeria. Don Caprio�s blog currently has a Google PR3, Alexa 18,183; Domain authority of 47, Subscriber base of over 10,000 and several thousands of daily pageviews. This blog is so loved by the youths in Nigeria because of the useful information it provides in blogging, coding, tech and blogging tips. Don is worth his onions and surely deserves his rating.
The task of Designing a responsive blogger template starts with the Header and the most important part of Header is the top navigation menu that provides useful links to your inner pages. Responsive drop down menus are viral now and can be seen widely implemented on all wordpress blogs and even mashable.com. Today we are releasing the first ever tutorial on designing a flexible Drop down navigation menu for BlogSpot blogs without using a single script or image! The best part is that it is not just a flat menu but with a drop down list. This makes our tutorial distinguished from those several codes and plugins proposed by some Geeky friends at Github. Using simply HTML5 <nav> tags and CSS3 :checked selectors, we managed to design a menu that we hope would be useful to the blogger community because it is really an efficient menu that is compatible with all major browsers and uses no Jquery at all!
The screenshots below are taken using my personal iPhone to give you an idea of how your blog menu would look like in different screen sizes and in landscape and portrait screen mode. The menu auto adjusts itself using CSS3 media queries which we already discussed in first part of this series.
Tip: If you are using Desktop computer then simply increase and decrease your browser window manually using your mouse and observe how menu toggles between two different styles and expands/collapses when clicked.
HTML5 and CSS3 is no less than a blessing that has completely eliminated the need of several JavaScript functions. We will thus Design a beautiful Responsive menu in blogger using some extremely easy steps. Lets start coding!
For this tutorial to work for most of those who are not well versed in web designing, I suggest you remove all your existing menus and use this responsive one instead which will remain fixed at the top of the screen like a sticky menu. It is really easy to add a menu this way. You can then add all your links inside this new menu.
Note If you have activated mobile view for your blog then you must first disable it by going to:
<b:if cond='data:blog.isMobile'>
<meta content='width=device-width, initial-scale=1.0, user-scalable=0' name='viewport'/>
<b:else/>
<meta content='width=1100' name='viewport'/>
</b:if>
Replace all the above code with our custom Meta ViewPort code:
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
I have also included a UTF-8 character set for using some Special characters instead of images.
5. Now Search for </b:skin>. Click the black arrow to expand the code.
6. Paste the following Styles just above </b:skin>
/*-----Responsive Drop Down Menu by MBT ----*/
body {
margin: 0px;
}
#menu{
background: #50B7DC;
color: #FFF;
height: 40px;
border-bottom: 2px solid #DDD;
box-shadow: 1px 2px 9px #B1B1B1;
border-top: 2px solid #DDD;
}
#menu ul,#menu li{margin:0 auto;padding:0 0;list-style:none}
#menu ul{height:45px;width:1024px}
#menu li{float:left;display:inline;position:relative;font:bold 0.9em Arial;text-shadow: 1px 2px 4px #838383;}
#menu a{display: block;
line-height: 40px;
padding: 0 14px;
text-decoration: none;
color: #FFF;}
#menu li a:hover{
color: #E4E4E4;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
background: #5FC6EB;
}
#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:30px;opacity:0;cursor:pointer}
#menu label{font:bold 30px Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center}
#menu label span{font-size:16px;position:absolute;left:35px}
#menu ul.menus{
height: auto;
overflow: hidden;
width: 170px;
background: #50B7DC;
position: absolute;
z-index: 99;
display: none;
}
#menu ul.menus li{display: block;
width: 100%;
font:normal 0.8em Arial;
text-transform: none;
text-shadow: none;
border-bottom: 1px dashed #31AFDB;}
#menu ul.menus a{
color: #FFF;
line-height: 35px;
}
#menu li:hover ul.menus{display:block}#menu ul.menus a:hover{
background: #5FC6EB;
color: #FFF;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}@media screen and (max-width: 800px){
#menu{position:relative}
#menu ul{background:#111;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none}
#menu ul.menus{width:100%;position:static;padding-left:20px}
#menu li{display:block;float:none;width:auto; font:normal 0.8em Arial;}
#menu input,#menu label{position:absolute;top:0;left:0;display:block}
#menu input{z-index:4}
#menu input:checked + label{color:white}
#menu input:checked ~ ul{display:block}}
Customization:
7. Now search for <body> Just below it paste the follow code which will create the menu structure:
<nav id='menu'>
<input type='checkbox'/>
<label>≡<span>My Blogger Tricks</span></label>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Drop Down <font size='1'>▼</font></a>
<ul class='menus'>
<li><a href='#'>Tab 1</a></li>
<li><a href='#'>Tab 2</a></li>
<li><a href='#'>Tab 3</a></li>
<li><a href='#'>Tab 4</a></li>
<li><a href='#'>Tab 5</a></li>
<li><a href='#'>Tab 6</a></li></ul>
</li>
<li><a href='#'>Contact</a></li>
<li><a href='#'>Drop Down <font size='1'>▼</font></a>
<ul class='menus'>
<li><a href='#'>Tab 1</a></li>
<li><a href='#'>Tab 2</a></li>
<li><a href='#'>Tab 3</a></li>
</ul>
</li>
<li><a href='#'>Advertise</a></li>
</ul>
</nav>
Customization:
Paste the following code below <ul> or above </ul> to create a drop down list:
<li><a href='#'>Drop Down <font size='1'>▼</font></a>
<ul class='menus'>
<li><a href='#'>Tab 1</a></li>
<li><a href='#'>Tab 2</a></li></ul>
</li>
The above menu will create only one drop down list and not multi-level drop down lists because it makes no sense to complicate the design layout for mobile devices. Keeping it simple is best.
8. finally save your template and you are all done!
Now play with your browser window and adjust its size manually to see it working just perfectly! :)
In the above example, the Main Menu is automatically set to display:none when the screen size width is below or equal to 800px . I used checkboxes to introduces the toggle effect. So as soon as the screen size reaches 800px or further decreases, the CSS media queries detects it and automatically set the mode of the box to checked and apply the styles. This is an interesting technique that we utilized here which eliminated the need for JQuery toggle function.
I have used only two major break points and that is width:1024px for Desktop computer Screens and 800px for devices which include Tablets, ipads and smart phones. So the entire concept is made extremely easy. I am sure those who understood the above tutorial will find it really interesting to customize it further and add further elements to the menu like a responsive search box at right corner or a RSS Icon etc.
Please let me know if you want any help here. I hope this technique would further help developers to create more interesting blogger templates and contribute further to the blogosphere community. I would love to hear your feedback on this. Please let us know of your precious views so that we could improve it further if needed. Peace and blessings buddies :)
# Contacted owner of spamdomain1.com on 7/1/2012 to
# ask for link removal but got no response
domain:spamdomain1.com
# Owner of spamdomain2.com removed most links, but missed these
http://www.spamdomain2.com/contentA.html
http://www.spamdomain2.com/contentB.html
http://www.spamdomain2.com/contentC.html