How To Add jQuery Scroll Background To Blogger

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Scroll down to where you see </head> tag .

3.Copy below code and paste it just before the </head> tag .

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
$(function(){

// ***
// Scrolling background
// ***

// height of background image in pixels
var backgroundheight = 4000;

// get the current minute/hour of the day
var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();

// work out how far through the day we are as a percentage - e.g. 6pm = 75%
var hourpercent = hour / 24 * 100;
var minutepercent = minute / 30 / 24 * 100;
var percentofday = Math.round(hourpercent + minutepercent);

// calculate which pixel row to start graphic from based on how far through the day we are
var offset = backgroundheight / 100 * percentofday;

// graphic starts at approx 6am, so adjust offset by 1/4
var offset = offset - (backgroundheight / 1);

function scrollbackground() {
// decrease the offset by 1, or if its less than 1 increase it by the background height minus 1
offset = (offset < 1) ? offset + (backgroundheight - 1) : offset - 1;
// apply the background position
$('body').css("background-position", "50% " + offset + "px");
// call self to continue animation
setTimeout(function() {
scrollbackground();
}, 70
);
}

// Start the animation
scrollbackground();
});
//]]>
</script>

4.Now scroll down to where you see like this code:

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Note:above code can be different in your template.But important part is body { .

5.Replace above code with below code:

body {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyhM-g2soRqeWsVYQiXxOtnRXHY8zD52h9_OOCdfIm1DdqfCO13I__SKV62DR4iJtRJzzw3Y_20ZRHMto9Y-515kFx2p75Yk_tx7xJMhG869N81qalWF5seFzebYzXGytL90nfftJhWP57/);
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Note: You can use any suitable image instead of above image.

6.Click on save template and you are done.

Demo

http://bit.ly/4w36zA

How To Add Style to Mouse Cursor in Blogger

1.Login to your blogger dashboard-->Layout > Page Elements

2.Click on 'Add a Gadget' on the sidebar.

3.Select 'HTML/Javascript' and add the one of code given below and click save.

<script language="javascript">


// ENTER TEXT BELOW. CAN *NOT* INCLUDE NORMAL HTML CODE.
var text='ENTER YOUR TEXT HERE....';

var delay=40; // SPEED OF TRAIL
var Xoff=0; // PIXEL COUNT FROM THE LEFT OF THE CURSOR (- VALUES GO TO LEFT)
var Yoff=-30; // PIXEL COUNT FROM THE TOP OF THE CURSOR (- VALUES GO UP)
var txtw=14; // AMOUNT OF PIXEL SPACE EACH CHARACTER OCCUPIES
var beghtml='<font color="#00436e"><b>'; // OPTIONAL HTML CODE THAT EFFECTS WHOLE TEXT STRING SUCH AS FONT COLOR, SIZE, ETC.
var endhtml='</b></font>'; // END HTML CODE. MOSTLY USED IF ABOVE SETTING IS USED.

//********** NO NEED TO EDIT BELOW HERE **********\\

ns4 = (navigator.appName.indexOf("Netscape")>=0 && document.layers)? true : false;
ie4 = (document.all && !document.getElementById)? true : false;
ie5 = (document.all && document.getElementById)? true : false;
ns6 = (document.getElementById && navigator.appName.indexOf("Netscape")>=0 )? true: false;
var txtA=new Array();
text=text.split('');
var x1=0;
var y1=-1000;
var t='';

for(i=1;i<=text.length;i++){
t+=(ns4)? '<layer left="0" top="-100" width="'+txtw+'" name="txt'+i+'" height="1">' : '<div id="txt'+i+'" style="position:absolute; top:-100px; left:0px; height:1px; width:'+txtw+'; visibility:visible;">';
t+=beghtml+text[i-1]+endhtml;
t+=(ns4)? '</layer>' : '</div>';
}
document.write(t);

function moveid(id,x,y){
if(ns4)id.moveTo(x,y);
else{
id.style.left=x+'px';
id.style.top=y+'px';
}}

function animate(evt){
x1=Xoff+((ie4||ie5)?event.clientX+document.body.scrollLeft:evt.pageX);
y1=Yoff+((ie4||ie5)?event.clientY+document.body.scrollTop:evt.pageY);
}

function getidleft(id){
if(ns4)return id.left;
else return parseInt(id.style.left);
}

function getidtop(id){
if(ns4)return id.top;
else return parseInt(id.style.top);
}

function getwindowwidth(){
if(ie4||ie5)return document.body.clientWidth+document.body.scrollLeft;
else return window.innerWidth+pageXOffset;
}

function movetxts(){
for(i=text.length;i>1;i=i-1){
if(getidleft(txtA[i-1])+txtw*2>=getwindowwidth()){
moveid(txtA[i-1],0,-1000);
moveid(txtA[i],0,-1000);
}else moveid(txtA[i], getidleft(txtA[i-1])+txtw, getidtop(txtA[i-1]));
}
moveid(txtA[1],x1,y1);
}

window.onload=function(){
for(i=1;i<=text.length;i++)txtA[i]=(ns4)?document.layers['txt'+i]:(ie4)?document.all['txt'+i]:document.getElementById('txt'+i);
if(ns4)document.captureEvents(Event.MOUSEMOVE);
document.onmousemove=animate;
setInterval('movetxts()',delay);
}
</script>

You are done.Refresh your site to see effect.

http://bit.ly/4w36zA

Numbered Page Navigation Hack For Bloggers

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Scroll down to where you see ]]></b:skin> tag .

3.Copy below code and paste it just before the ]]></b:skin> tag.

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
border:1px solid #CCCCCC;
margin:0 3px;
padding:3px 7px;
text-decoration:none;
}
.showpageNum a:hover {
background-color:#CCCCCC;
border:1px solid #CCCCCC;
}
.showpagePoint {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#CCCCCC none repeat scroll 0 0;
border:1px solid #CCCCCC;
color:#333333;
margin:0 3px;
padding:3px 7px;
text-decoration:none;
}
.showpageOf {
margin:0 3px 0 0;
padding:3px 7px;
text-decoration:none;
}
.showpage a {
border:1px solid #CCCCCC;
padding:3px 7px;
text-decoration:none;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link, .showpage a:link {
color:#333333;
text-decoration:none;
}

4.Now save your template.

5.Go to Layout-->Page Elements and click on "Add a gadget".

6.Select "html/java script" and add the code given below and click save.Now drag your new gadget under "Blog Posts" Section.

<script type='text/javascript'>

var home_page_url = location.href;


var pageCount=1;
var displayPageNum=3;
var upPageWord ='Previous';
var downPageWord ='Next';


function showpageCount(json) {
var thisUrl = home_page_url;
var htmlMap = new Array();
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';





for(var i=0, post; post = json.feed.entry[i]; i++) {

var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);


var title = post.title.$t;

if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
 if(thisUrl.indexOf(timestamp)!=-1 ){
   thisNum = postNum;
 }

 if(title!='') postNum++;
 htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'&max-results='+pageCount;
}
}
itemCount++;

}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
 if(thisNum==2){
  upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
 }else{
  upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
 }

 fFlag++;
}

if(p==(thisNum-1)){
 html += '<span class="showpagePoint">'+thisNum+'</span>';
}else{
 if(p==0){
   html += '<span class="showpageNum"><a href="/">1</a></span>';

 }else{
  html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';
 }
}

if(eFlag ==0 && p == thisNum){
 downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
 eFlag++;
}
}
}

if(thisNum>1){
html = ''+upPageHtml+' '+html +' ';
}

html = '<div class="showpageArea"><span  class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
}

if(postNum==1) postNum++;
html += '</div>';


var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}


}


function showpageCount2(json) {

var thisUrl = home_page_url;
var htmlMap = new Array();
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';



var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';
var thisUrl = home_page_url;


for(var i=0, post; post = json.feed.entry[i]; i++) {

var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);



var title = post.title.$t;

if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
 if(thisUrl.indexOf(timestamp)!=-1 ){
  thisNum = postNum;
 }

 if(title!='') postNum++;
 htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'&max-results='+pageCount;

}
}
itemCount++;
}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
 if(thisNum==2){
  upPageHtml = labelHtml + upPageWord +'</a></span>';
 }else{
  upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
 }

 fFlag++;
}

if(p==(thisNum-1)){
 html += '<span class="showpagePoint">'+thisNum+'</span>';
}else{
 if(p==0){
  html = labelHtml+'1</a></span>';
 }else{
  html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';
 }
}

if(eFlag ==0 && p == thisNum){
 downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
 eFlag++;
}
}
}

if(thisNum>1){
if(!isLablePage){
html = ''+upPageHtml+' '+html +' ';
}else{
html = ''+upPageHtml+' '+html +' ';
}
}

html = '<div class="showpageArea"><span  class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
}

if(postNum==1) postNum++;
html += '</div>';

var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}


}


</script>
<script type='text/javascript'>

var thisUrl = home_page_url;
if (thisUrl.indexOf("/search/label/")!=-1){
if (thisUrl.indexOf("?updated-max")!=-1){
 var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"));
}else{
 var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"));
}
}

var home_page = "/";
if (thisUrl.indexOf("?q=")==-1){
if (thisUrl.indexOf("/search/label/")==-1){
 document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>')
}else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')
}
}
</script>

Note:
Change values of pageCount,displayPageNum,upPageWord,downPageWord if you like.

You are done.

http://bit.ly/4w36zA

How To Add Random,Rotating Images for Blogger Header

In this tutorial I am going to explain how to add random,rotating images for your blogger header background.When after you adding this feature to your blogger blog,header image of your blog will rotate/change in each page refresh.Before doing this trick you must create header images for your blog.In this tutorial I am going to show how to rotate 5 header images.

1.Log in to your dashboard--> Design- -> Edit HTML

2.Scroll down to where you see <body> tag.

3.Now copy below code and paste it just after the <body> tag.

<script type='text/javascript'>

var HeaderImage= new Array()

HeaderImage[0]=&quot;URL-OF-HEADER-IMAGE-1&quot;
HeaderImage[1]=&quot;URL-OF-HEADER-IMAGE-2&quot;
HeaderImage[2]=&quot;URL-OF-HEADER-IMAGE-3&quot;
HeaderImage[3]=&quot;URL-OF-HEADER-IMAGE-4&quot;
HeaderImage[4]=&quot;URL-OF-HEADER-IMAGE-5&quot;
var random=Math.round(4*Math.random());

document.write(&quot;<style>&quot;);
document.write(&quot;#header-wrapper {&quot;);
document.write(&#39; background:url(&quot;&#39; + HeaderImage[random] + &#39;&quot;) no-repeat left TOP;&#39;);
document.write(&quot; }&quot;);
document.write(&quot;</style>&quot;);

</script>

NOTE :

Replace "URL-OF-HEADER-IMAGE-X" with your image URLs.

If above code doesn't work for your blog,then replace "#header-wrapper" with "#header".(ID or Class of your header section).

You can add different number of images than 5.But remember to change "4*Math.random()"
 according to the number of images you add.For example,when you want to 
add 8 different images for your blog header background, then code should
 be change as "7*Math.random()".Look at the example below:

<script type='text/javascript'>

var HeaderImage= new Array()

HeaderImage[0]=&quot;URL-OF-HEADER-IMAGE-1&quot;
HeaderImage[1]=&quot;URL-OF-HEADER-IMAGE-2&quot;
HeaderImage[2]=&quot;URL-OF-HEADER-IMAGE-3&quot;
HeaderImage[3]=&quot;URL-OF-HEADER-IMAGE-4&quot;
HeaderImage[4]=&quot;URL-OF-HEADER-IMAGE-5&quot;
HeaderImage[4]=&quot;URL-OF-HEADER-IMAGE-6&quot;
HeaderImage[4]=&quot;URL-OF-HEADER-IMAGE-7&quot;
HeaderImage[4]=&quot;URL-OF-HEADER-IMAGE-8&quot;
var random=Math.round(7*Math.random());

document.write(&quot;<style>&quot;);
document.write(&quot;#header-wrapper {&quot;);
document.write(&#39; background:url(&quot;&#39; + HeaderImage[random] + &#39;&quot;) no-repeat left TOP;&#39;);
document.write(&quot; }&quot;);
document.write(&quot;</style>&quot;);

</script>

4.Now save your template and your done.Refresh your site few times to see the result.Your header image will be rotate.

http://bit.ly/4w36zA 

 

How To Add 728x90 leaderboard Adsense ads between Header and Post Section in blogger

1.Log in to your dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this:
<b:section class='crosscol' id='crosscol' showaddelement='no'/>

 

 4.Now replace above code with below code.
<b:section class='crosscol' id='crosscol' showaddelement='yes'/>  5.Now save your template.

6.Go to Layout > Page Elements

7.Now Click on new 'Add a Gadget' option that will now have appeared between Blog Posts and the Header.

 8.Select 'HTML/Javascript' and add your 728x90 leaderboard Adsesne code and click save.

Now you are done.

http://bit.ly/4w36zA

How To Use Adsense Section Targeting on Blogger

What is Google Adsense Section targeting? Here is the official information on Adsense Help Center:

• Section targeting allows you to suggest sections of your text and HTML content that you'd like us to emphasize or downplay when matching ads to your site's content. By providing us with your suggestions, you can assist us in improving your ad targeting. We recommend that only those familiar with HTML attempt to implement section targeting.
• To implement section targeting, you'll need to add a set of special HTML comment tags to your code. These tags will mark the beginning and end of whichever section(s) you'd like to emphasize or de-emphasize for ad targeting.
• The HTML tags to emphasize a page section take the following format:
• <!-- google_ad_section_start -->
  
  YOUR PAGE CONTENT
  
  <!-- google_ad_section_end -->
• Now, how can you implement Adsense Section Targeting on New Blogger? If you want to get relevant ads, applying Adsense Section Targeting to your blog use above the code before and after post titles and post content.
  
  Follow these steps to do it.
  
  1.Log in to your dashboard--> layout- -> Edit HTML
  
  2.Click on "Expand Widget Templates"
  
  3.Scroll down to where you see this:
• <b:includable id='post' var='post'>
  <div class='post uncustomized-post-template'>
  <a expr:name='data:post.id'/>
  <b:if cond='data:post.title'>
  <h3 class='post-title'>
  <b:if cond='data:post.link'>
  <a expr:href='data:post.link'><data:post.title/></a>
  <b:else/>
  <b:if cond='data:post.url'>
  <a expr:href='data:post.url'><data:post.title/></a>
  <b:else/>
  <data:post.title/>
  </b:if>
  </b:if>
  </h3>
  </b:if>
• 4.Now replace above code with below code.
• <b:includable id='post' var='post'>
  <div class='post uncustomized-post-template'>
  <a expr:name='data:post.id'/>
  <b:if cond='data:post.title'>
  <h3 class='post-title'>
  <b:if cond='data:post.link'>
  <a expr:href='data:post.link'><!-- google_ad_section_start --><data:post.title/><!-- google_ad_section_end --></a>
  <b:else/>
  <b:if cond='data:post.url'>
  <a expr:href='data:post.url'><!-- google_ad_section_start --><data:post.title/><!-- google_ad_section_end --></a>
  <b:else/>
  <!-- google_ad_section_start --><data:post.title/><!-- google_ad_section_end -->
  </b:if>
  </b:if>
  </h3>
  </b:if>
• 5.Now again scroll down to where you see this:
• <data:post.body/>
   
  6.Now replace above code with below code.
•  

  
  <!-- google_ad_section_start --><data:post.body/><!-- google_ad_section_end -->

   
   
  7.Now save your template and you are done.

  http://bit.ly/4w36zA

How To Remove Low paying Adsense Ads

To increase your Adsense Earnings by removing the lowpaying adsense ads from your account,follow the steps below.

1.First go to www.adsblacklist.com .

2.Now Signup for a account.it's free and very simple.

3.Now login to your account.

4.Now Click on My Account.

5.Now click on 'Add New Domain'

4.Submit your URL,TITLE and Keywords.Look at the example below.

5.Now go to Generate Filter List.

6.Drag and drop your domain name into 'Keywords from selected domains:' box.Then you can see keywords,you give in step 4.

7.Now select 'MFA' and 'LCPC'.

8.Now click on Submit.

9.They will give you lowpaying ads urls.copy these urls.

10.Now login to your Google Adsense Account.

11.Click AdSense Setup

 12.Go to Competitive Ad Filter category.

13.Paste lowpaying ads urls into the box and click save changes.

14.Now google will not display low paying ads in your site.

http://bit.ly/4w36zA

How To Remove AdSense Ads from the Homepage

This post explains how to hide Google Adsense Ads In Home Page And display them only Inside Post pages Alone.
If you want to hide Google Adsense Ads In Home Page ,follow the steps below.
1.Generate Parsed code for your adsense code because we cannot put adsense code directly in the xml.So parse it using AdParser.

After parsing,your ad code Should look like this.

2.Log in to your dashboard--> layout- -> Edit HTML
3.Click on "Expand Widget Templates"

4.Scroll down to where you see this:
<data:post.body/>

5.Now Copy below code and paste it before the above line.

<b:if cond ='data:blog.pageType == "item"'>

<!-- Your AdSense code here -->

</b:if>

Note : You must you must replace <!-- Your AdSense code here --> with Your Adsense Parsed code.
6.Now save your template and you are done.

http://bit.ly/4w36zA

How to put AdSense in the Middle or Anywhere of Blogger posts

If you want to put Adsense ads in the middle of Blogger posts follow the steps below.
1.Generate Parsed code for your adsense code because we cannot put adsense code directly in the xml.So parse it using AdParser.
After parsing,your ad code Should look like this.

2.Log in to your dashboard--> layout- -> Edit HTML
3.Click on "Expand Widget Templates"
4.Scroll down to where you see this:
<data:post.body/>
5.Now replace above code with below code.

<div expr:id='"aim1" + data:post.id'></div>

<div style="clear:both; margin:10px 0">
<!-- Your AdSense code here -->
</div>

<div expr:id='"aim2" + data:post.id'>
<data:post.body/>
</div>

<script type="text/javascript">
var obj0=document.getElementById("aim1<data:post.id/>");
var obj1=document.getElementById("aim2<data:post.id/>");
var s=obj1.innerHTML;
var r=s.search(/\x3C!-- adsense --\x3E/igm);
if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+16);}
</script>

Note : You must you must replace <!-- Your AdSense code here --> with Your Adsense Parsed code.
6.Now save your template.
7.In every blog post ,Put this special code :
<!-- adsense -->

in the exact point you want to appear AdSense advertising.Now you are done.

http://bit.ly/4w36zA