AdSense Direct: A new way to sell direct advertising on your blog

This article introduces AdSense Direct, a new way to use AdSense to manage advertising that you directly sell ads on your blog or website - and to fill those spaces with AdSense ads when there are no Direct ads running.

AdSense have announced a new feature called AdSense Direct, which will let AdSense publishers (ie people showing ads on their blogs or websites) manage directly-sold ads using their AdSense account.

"Management" means that after an advertisement and campaign details are set up and approved, the ads will show on your site without any changes to your site (apart from having AdSense ads in on it), and having all contracts, invoicing and payments handled through your AdSense account.

How to use AdSense Direct

• Arrange a direct deal with an advertiser -- this can be any advertiser, even one that doesn't currently use AdWords.

• Enter the details into your AdSense account; more details about this here.

• You will be given a link which you email (etc) to the advertiser.

• The advertiser logs in (possibly after creating a Google account), upload their ad "creative" (ie text and pictures), approve the terms you entered, and pays for the deal with Google Wallet.

• You - and Google - approve the ad creative (ie words and pictures).

After this, the ad runs during the time period that you set up for it.   And after it has finished, regular AdSense ads are shown instead.

Limitations

Bad news for now:

AdSense Direct is currently available to publishers and advertisers located in the U.S., and we hope to expand further in the coming months.

But my fingers are crossed that this will change soon.

There's no statement about how this works with AdSense's limits on the number of AdSense ad units shown: does an "AdSense Direct" ad count towards the three-per-type-per-page that non-premium AdSense advertisers are limited to? My guess is "yes" - because regular AdSense ads are shown if AdSenseDirect ones aren't available.

Possibly you can only have one direct advertising campaign at a time?  Google's announcement  also says "If you've already expanded to running multiple direct ad deals and ad networks on your pages alongside AdSense, try our ad serving solution DoubleClick for Publishers (DFP)." - and yes, AdSense Direct does seem to be a vastly simplified version of this, which will benefit Google by signing up more advertisers.

And AdSense-Direct will only work in places where you can put an AdSense ad unit.  For example it is possible to put ads right inside blog-posts.  But regular AdSense ads need Javascript to work, so people who read your blog by email subscription or RSS don't see them. It's likely that AdSense Direct ads will be the same.

I haven't checked, but I'm pretty sure that the standard AdSense rules will apply.   And this will mean that if your advertiser ticks any of Google's categroy boxes, their AdSense-served ad will not appear on your blog if you have blocked that category.

AdSense Direct is probably not available for Blogspot domains, or at least not for ones whose owner signed up for AdSense using the easier AdSense setups for hosted publishers.

Read more »

How to put Facebook like box in your blog/website with Video Help

What is Facebook Like Box?

Facebook like box is a social plugin which allows you to put your Facebook page link to your blog/website. So that if people click like button then he/she will get updates from your page,if you write something on your page. Also the good thing is that the post and the link will also be shown in their Facebook Home page who have Liked your page.

How to do:

Step 1: First go to this Link. <= Click here

Step 2: Copy your Facebook page link inside the "Facebook Page URL" and click "Get Code".

Step 3: After clicking "Get Code", you will get a code, click on the "IFRAME" and copy the code.

Step 4: Now go to your blogger DashBoard and click on Layouts. Then click "Add Gadget".

Step 5: A pop up window will open, click 'Java/HTML'.

Step 6: Paste the code inside the box and click Save.

Now you are Done. Refresh your browser to see the result.


Video Help:

     

Read more »

Fade In/Out Page Loading Effect On Blogger Posts

A very common effect in jQuery is the fade effect that hide or shows an element by fading it, we can use it in many ways







How to use The Fade in Loading Effect:

Step 1: To put this fading effect on your blog, go to your Template > Edit HTML

 

Step 2: Click anywhere inside the code area and search for the </head> tag using CTRL + F keys:

Step 3: Then just above </head> add the following code:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/><script type='text/javascript'>//<![CDATA[$(document).ready(function() {$("body").css("z-index", "-10");$("body").fadeIn(0);
$("a").click(function(event){event.preventDefault();linkLocation = this.href;$("body").fadeOut(500, redirectPage); });function redirectPage() {window.location = linkLocation;}});//]]></script><style>html {background-color: #F2F2F2; /* Color fading */}</style>

Step 4: Save the changes and here you go. In RED you can see where to change the color that fades on a loading page. 

The original script hides the body of the page while loading, I prefer to change that property with a  negative, z-index to avoid problems with the search engine robots that may effect the positioning.

Read more »

Simple Recent Posts Widget for Blogger/Blogspot

The main advantage on this Recent Posts widget is that it will show not only post title but also post excerpts or snippets and it's easy to customize/apply different style on it. To style it into your own design, you just have to modify the CSS style.


What are the facilities:

     

         1.display post title only

         2.change the number of posts
         3.change the number of characters of the post snippet/excerpt.
         4.show the post dates

How to do it:

Step 1: Log in to your Blogger account and go to Dashboard, click on Layout and then click on Add a Gadget .

Step 2: A pop-up window will open, scroll down and choose HTML/JavaScript from there.

Step 3: Select & Copy the code from one of the options below and paste it into new HTML/JavaScript.

option 1: Recent posts widget with snippets

<div id="hlrpsa">
<script src="http://helplogger.googlecode.com/svn/trunk/recent-posts-with-snippets.js">
</script>
<script>
var numposts = 5;var showpostdate = false;var showpostsummary = true;var numchars = 100;var standardstyling = true;
</script>
<script src="http://your-blog.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts">
</script></div>
<div id="rpdr" style="font-family: arial, sans-serif; font-size: 9px;">
<a href="http://helplogger.blogspot.com/2012/04/recent-posts-widget-for-bloggerblogspot.html" target="_blank" title="Grab this Recent Posts Widget">Recent Posts Widget</a> by <a href="http://helplogger.blogspot.com" title="Recent Posts Widget">Helplogger</a></div>
<noscript>Your browser does not support JavaScript!</noscript>
<style type="text/css">
#hlrpsa a {color: #0B3861; font-size: 13px;} #rpdr {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnS8dtbmf4i5tjJRxHP_d1P9uyCRNcnFjmhRDUE5t6fDX6mmQSBMTjap3vr7gqaHadquvdA18UtFVVokbWGNgzSSOFfdoMhebtVfUzOoazsEgBpHJizvQ2AEuqRTRzHwEwyrRHWjdA0eQz/s1600/blogger.png) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;}
#rpdr, #rpdr a {color:#808080;}
#hlrpsa { color: #999999; font-size: 11px; border-bottom:1px #cccccc dotted; margin-top:-10px; padding-bottom:10px;}
.hlrps a {font-weight:bold; }
.hlrpssumm {}
</style>

  


Option 2: Recent Posts Widget Showing Post Titles Only 

 <div id="hlrpsb">
<script style="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/recent-posts-with-titles-only.js"></script>
<script style="text/javascript">var numposts = 10;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script>
<script src="http://your-blog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script></div>
<div style="font-family: arial, sans-serif; font-size: 9px;" id="rpdr"><a href="http://helplogger.blogspot.com/2012/04/recent-posts-widget-for-bloggerblogspot.html" title="Grab this Recent Posts Widget" target="_blank">Recent Posts Widget</a> by <a href="http://helplogger.blogspot.com" title="Recent Posts Widget">Helplogger</a></div><noscript>Oops! Make sure JavaScript is enabled in your browser.</noscript>
<style type=text/css>
#hlrpsb a {color: #0B3861; font-size: 13px;} #rpdr {background: url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnS8dtbmf4i5tjJRxHP_d1P9uyCRNcnFjmhRDUE5t6fDX6mmQSBMTjap3vr7gqaHadquvdA18UtFVVokbWGNgzSSOFfdoMhebtVfUzOoazsEgBpHJizvQ2AEuqRTRzHwEwyrRHWjdA0eQz/s1600/blogger.png ) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;}
#rpdr, #rpdr a {color:#808080;}
.bbrecpost2 {
padding-top:6px;
padding-bottom:6px;
border-bottom: 1px #cccccc dotted; }
</style> 

Step 4: 

        1.Change 5 (option 1) and 10 (option 2) with the number of posts you want to display. 
        2.Change false to true if you want the posts dates to appear. 
        3.Change 100 (option 1) if you want more characters to be displayed.
        4.To change the color and front size of the links, modify the values in blue (links) and violet (front size)
        5.To change the style of the posts summary, modify the values in green (color) and orange (front size) 
        6.Replace the your-blog text with the name of your blog or if you have a custom domain change all the bolded line with address link in this example: 

http://www.your-site.com/feeds/posts/default....

Step 5: Save your widget and you are ready now.

Read more »

Making A Gadget Visible Only To The Blog Administator

Now the post title says it all. There are gadgets that sometimes we want to be visible only to us and not to other people.

The procedure is simple, we just have to add two lines to our gadget that we want to hide.


How to do:

Step 1: Go to Template > Edit HTML and then search for the gadget's code we want to hide by clicking  Ctrl + F.

As an example in a HTML/JavaScript gadget,we will see a code like this:

<b:widget id='HTML1' locked='false' title='' type='HTML'>
<b:includable id='main'>
<span class='item-control blog-admin'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</span>
</b:includable>
</b:widget>

 Now all you have to do is add the parts in RED and ready to go. If you close the session go to your blog you'll not be able to view the gadget that you have hidden, but as soon as you sign in you will see that it is visible to you.

Not all gadgets have the same structure like in this example, but it will be easier to guide you, just place the first code in the red just after <b:includable id='main'>

And the second red code just before  </b:includable>

Note: To look inside the widget's code, click on the sideways arrow next to the widget's id.

And with that the gadget will be hidden for readers except you. 

Read more »

Awsome Multi-Colored Popular Posts Widget for Blogger powered CSS3

Popular Posts Widget is a Widget providing by Blogger and we can add it to our Blog. This Widget displays the Most Viewed posts of your blog that maybe of month or in week or All the time. You can select how Popular posts are to be displayed. By default it shows an image(if the post has any) and Title of Post followed by the content of post wrapped by 20-25 words. This article is a tutorial to Style that Popular posts Widget to an Awesome Multi-Colored Popular posts Widget.





Click on the Link to see the Preview of this Post => See


How to do :

Step 1: Sign in to your Blogger Account and Add Popular Post Widget to Blogger.

            Go to  Layout ->  Select  "Add a Gadget" and take  Popular Posts Widget from the Widget List.

Step 2: Go to Template ->  Edit HTML, Find ]]></b:skin> by pressing Ctrl+F

Step 3: Copy the following code and Paste it Just above it

<!-- Popular posts multi colored UI theme -->
#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
#PopularPosts1 ul li:first-child{background:#ff4c54;width:97%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{background:#ff764c;width:87%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:84%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:81%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:78%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:75%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:72%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#c7f25f;width:66%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:70px;}
#PopularPosts1 ul li a{font-size:13px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
#PopularPosts1 img{
-moz-border-radius: 130px;
-webkit-border-radius: 130px;
border-radius: 130px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
padding:4px;
border:1px solid #fff !important;
}
#PopularPosts1 img:hover {
border-radius: 0 0 0 0;
-moz-transform: scale(1.2) rotate(-711deg) ;
-webkit-transform: scale(1.2) rotate(-711deg) ;
-o-transform: scale(1.2) rotate(-711deg) ;
-ms-transform: scale(1.2) rotate(-711deg) ;
transform: scale(1.2) rotate(-711deg) ;
}
<!-- popular posts multicolored UI theme -->

Step 4: Click on Preview Template.

Step 5: Save The Template and you are Done.

Read more »

Add Google Official Contact Form Widget to Blogger?

Contact Form Widget is used to send mails to the Blog owner from the visitors/users. Do your blog looks anything missing?. I think a Contact Form is an important widget that was missed for long time. Are you using Contact From in your blog? If so, it will not Google's Official contact Form. That may be from other hosted providers. Here Google released its brand new Contact Form Widget for Blogger Users. It helps to send e-mails to blog owner without Sign In to Google or any other account. Anyone can send mails by providing a valid e-mail address and Message. This Contact Form can add to any blogger blogs that hosted in Google's Server.


 It have three Fields- Name,e-mail and Message and a Send Button. E-mail and Message field are mandatory. It also have e-mail validation, checks whether the e-mail address provided is valid or not. And a notice or message will appear to show the status of sending e-mail, Shows success message it it delivered to user,otherwise shows error message.  There is no CAPTCHA (Used to prevent Spam) in the Contact Form, but Google implemented its effective Spam detection mechanisms. The problem exist with the Contact Form is it can only use as Widget (in Sidebar or  Footer or Under Posts). In many popular websites/blogs they use a page for Contact Form. By default this Contact Form can used as widget, we introduce a technique to use Google Official contact Form on Blogger Static Pages

Advantages

•     Send e-mails to Blog owner without Sign In to any Accounts.
•     E-mail validation is provided.
•     Spam detection Mechanism.
•     Show status message of sending.

Disadvantages

• Use only as Widget (in Sidebar/ in Footer)
• No CAPTCHA

How to Add:


   Step 1:  Sign In to Blogger Dashboard

   Step 2:  Select Layout -> Click on Add a Gadget

   Step 3:  Select More Gadgets in Left Side and Select Contact Form          

   Step 4:Give the Title and Click Save

 

 You have done please check your blog.

When visitor drop a message it goes straight to your inbox. One copy of the message will send to each Admin.

Read more »