Adding free stat counter for blogger

1Share

Report Error

8,858 views

1Share

knowing your blog visitor stats is very important, today we’ll see how to add free visitor counter step by step.

- Before We Start: - You need to be careful while changing your template. - Before you make any changes, Back up your template and save it at safe place.

we’ll use a stat counter that provided by statcounter.com that works perfectly with blogger blogspot blogs.
you will need to join a free acount from here
(it’ll open in a new window)
it won’t take more than 2 minutes,
after registering, and activating your account through your email. please login to your account.
after logging in, click new project.
see image below:

then you’ll be taken to another page,
fill the form as the next.
website title :type here you blog title.
website URL :type here your blog url, it must be like ——.blogspot.com if you using blogger.
and press NEXT.
see image below:

then click : Configure and install code >>
see image below:
after clicking Configure and install code >> you will go to page ask you to choose the kind of stat counter,
there is more 1 kind,
1: visible counter.
2: invisible counter.
3: visible counter on home page only.
4: button only.
choose your favorite one and hit NEXT.
see image below:

at the next page you’ll be at stat counter code setup wizard.
find : do you use a web page editor?
and choose yes, i use.
and then choose blogger.
see image below:

then click NEXT and you will generate your counter code.
Now go to blogger.com
log in to your blogger blogspot account, go to layout section.and click add new element at your template sidebar where you want to add the Stat counter. choose html / jave.
past the statcounter code. and click save.
and now you are done.
this stat counter contain alot of great free features,
and here is some of them. you can find this features when you log in to your account at statcounter.com
1. summary
2. popular pages
3. entry pages
4. exit pages
5. came from
6. keyword analysis
7. recent keyword activities
8. recent came from
9. search engine wars
10. visitor paths
11. visitor length
12. returning visits
13. recent pageload activities
14. recent visitor activity
15. recent visitor map
16. country/state/city/ISP
17. browser
18. system statistics
19. lookup IP address
20. download logs
Enjoy.
and don’t forget that i’m here to help.
if you need any help please leave comment here,
max

Read more »

Add Mp3 player ( Music BackGround ) for blogger, + 20 Different Styles.

First Of All

You need to register a free account at mixpod it won”t take you 2 minutes, then log in to your account and lets go.

Step 1. Choosing your mp3 style

Go to mixpod by clicking here
And choose your favorite style from over 20 different styles. then click on Create A Playlist

Once you find your favorite style click Create A Play list

Step 2. Creating your play list

There are two ways to add you favorite music and songs

• Search the site database, it’s easy and I think you’ll find what you are looking for.


• Add new music file by adding it’s URL.

First Type a keyword to search the database, and once you find your song just click on add ( + ) icon next to it, Or just add your file if you have got it’s url.

Step 3. Saving your playlist and Getting the code

Just give your Playlist a name and hit the button “ Save ( Get Code ) ”

Step 4. Adding it to your blog.

Now you’ve got the code, go to your blogger account dashboard, and navigate to Layout, and on your sidebar click add a gadget. and choose HTML/JavaScript Add
then paste your player code and click Save

Read more »

Make An IFrame To Contain Another Blog On Your Blog Page

When you want to merge two websites (either or both being a blog), yet keep the content of each separate, the most obvious solution is to use the same template on each, and link between the two in a consistent fashion. The reader of either blog never has to know when he's viewing the other, unless he habitually observes the content of the browser Address window.

But how about if you would like to display one blog, in its entirety, in the middle of the other blog page? That's a feature called an IFrame. It's a deceptively simple solution too.

<iframe width="100%" frameborder="0" src="http://bloggerstatusforreal.blogspot.com/2007/11/make-iframe-to-contain-another-blog-on.html" height="400"></iframe>

You can put an IFrame in either a blog post, or in a special page element. It's a dynamic window; when you change something in the blog contained in the window, the contents of the window changes too. Just refresh, and you can see the change.

An IFrame is a nice substitute for a newsfeed, when you are including a private blog in another web site. Since a newsfeed isn't available for a private blog, it's useless in this case. An IFrame works as well for a private blog as it does for a public blog. Remember, of course, that access to any IFrame requires access to both the IFrame host web site, and to the source web site.

One caveat here, which may be an asset or a liability, is that the content of an IFrame won't be picked up by the search engines. If the text inside the iframe is important content that needs to be indexed with the host blog, you won't want to put it inside an iframe. On the other hand, if you have text that you explicitly do not want indexed, an iframe can be a perfect solution.

It's got a number of settings that can make it more useful to you. You can set the height and width of the IFrame, to determine how much screen space, inside your blog, that you wish to use to display the IFrame contents. If the IFrame contents are larger than the allocated space, by default you'll get scroll bars; these can, at your own risk, be deactivated.

Remember that, as the text size is varied by the reader, the overall size of the contents inside the IFrame will vary, just as the contents of the blog outside the IFrame. Instead of specifying an absolute height or width in pixels, you can specify either in %, and have the IFrame size decrease or increase as the reader necessitates.

Depending upon what effect you desire, you'll want either the IFrame host web site, or the source web site, to be as plain as possible. If you have a normal blog with a page header, post column, and one or two sidebars, you will want the IFrame source web site to have a very plain template. For instance, if you're creating a second blog to contain posts that will be accessible only to a select few of your readers, you'll want to display an IFrame that only contains a posts column - any page header, sidebar, and / or footer section will just take up valuable screen space on the host web site, or force excessive horizontal or vertical scrolling inside the iframe window.

Read more »

How to Create Favicon in Blogger

step how to create favicon in blogger

1. 
   
   Create your own icon image using image editor such as photoshop or other editor. Save image to 32x32 pixel
2. 
   
   Upload to your imagehosting, such as imageshack, photobucket. You'll need its direct link url
3. 
   
   Open your blogger dashboard. Go to Layout>Edit HTML
4. 
   
   Copy this code<link href='http://1.bp.blogspot.com/-EzBQO-L4jAo/TV6lwjnMuDI/AAAAAAAAAH0/5cBxjeUOCRM/s1600/Beginner+Hacking.png' rel='shortcut icon' type='image/jpg/'/>
5. 
   
   Change red text to your uploaded image URL
6. 
   
   Put that code before </head>
7. 
   
   Save Template

Read more »

How to make Vertical Menu bar in blogger

1. Sign in to blogger with your ID.
2. Click layout tab.
3. Click Edit HTML tab.(Don’t forget to back up your template.)
4. Copy and paste the code below at above of  ]]></b:skin>

#vertical-1{
border-bottom-width: 0;
}

#vertical-1 ul{
margin: 0;
padding: 0;
font: normal 90% ‘Trebuchet MS’, ‘Lucida Grande’, Arial, sans-serif; /*pemilihan bentuk huruf */
}

#vertical-1 a{
display: block;
padding: 3px 0;
padding-left: 9px;
width: 200px; /* width of mrnu */
text-decoration: none;
color: #333222; /* this is the color of alphabet */
border-right:1px solid #000000;
background-color: #FBEC04;
border-bottom: 1px solid #6A6731;
border-left: 7px solid #918C3B;
}

#vertical-1 a:hover {
background-color: #FAF6B9;
border-left: 12px solid #918C3B;
width: 195px; /*lebar */
}

#vertical-1 div.menutitle{
color: white;
border-bottom: 1px solid #053E66;
padding: 5px 3px 5px 13px;
background-color: black;
width: 201px;
font: bold 90% ‘Trebuchet MS’, ‘Lucida Grande’, Arial, sans-serif;
}

5. Save template
Now first part is complete.
6. Click Layout
7. Then, Click Page Element
8. Click Add gadget and click HTML/JavaScript.
9. Copy and paste the code below in to the element.

<div id=”vertical-1″>
<div class=”menutitle”>CSS Library</div> <!– this is the 1st title –>
<ul>
<!– Please alter with your links –>
<a href=”http://indianmonsters.blogspot.com”>Home</a>
<a href=”http://indianmonsters.blogspot.com/”>Verticle menu</a>
<a href=”#”>example</a>
<a href=”#”>example1</a>
<a href=”#”></a>
<!– add any links here –>
</ul>

<div class=”menutitle”>Blogger</div> <!– this is the 2nd title –>
<ul>
<a href=”#”>Example2</a>
<a href=”#”>Example3</a>
<a href=”#”>Example4</a>
<a href=”#”>Example5</a>
<a href=”#”>Example6</a>
<a href=”#”>Example7</a>
<!– add any links here –>
</ul>
</div> <!– end off vertical-1 menu –>

10. Save.

Read more »

Approve adsense account in few days

Adsense has become very careful in the approval of account specially in middle east countries like Pakistan ,India etc . Anyways we have found a trick for the adsense approval ...... herez the trick .




For Pakistanis :
============
If u are feeling problem in aproving your account then do the following steps during registration on adsense but remember before apply ur blog must have atleast 10 topics,just copy paste material from net .....

1- Put your city : quetta

2- Country name : pakistan

3- adress : write any adress

4- phone no : write any mob no

5- postal adress : 87300

Now submit it ... it will be approved just after one or two days . After that sign in and go in personal settings and change all of ur settings i.e adress,phone no etc to originals.


For Indians :
==========

No Need to own a web site of six month old.


Rule to get Adsense approval:::

1-Register your self at indyarocks.
http://www.indyarocks.com/

2-Upload a profile image.

3-Complete your profile.

4-Upload 10 photos in photo album.

5-Write 2 blogs of 100 words

Now apply adsense using your gmail.You will get adsense approved with in 2 days.


Best of luck guys .....

Read more »

Add FaceBook Like Button For Blogger ( BlogSpot ) And Customize It

Few days ago, face book surprised us by launching a lot of social plugins, one of them, actually the most popular one yet is the famous like button,
In this tutorial you’ll learn how to add it to your blogger blog.
and you’ll learn how to customize

• change the verb, like or recommend.
• change it’s color.
• change it’s font.

Step 1. adding it to your template.

The button code,

<b:if cond='data:blog.pageType == &

quot;item"'>
<iframe allowTransparency='

true' expr:src='"

http://www.facebook.com/plugins/like.php?href=&

quot; + data:post.url + "&

layout=standard&show_faces=false&

width=100&action=like&

font=arial&

colorscheme=light"' 

frameborder='0' scrolling='no' 

style='border:none; overflow:hidden; 

width:450px; height:40px;'/>
</b:if&gt

where to add it ?

Log into your blogger account, then go to Layout >> Edit Html.
Before doing any thing you must check Expand Widget Templates box.
And find the next Code

<div class='post-header-line-1'/>

And after it, paste your button code
What, If you didn’t find the code above in your template, The try to find the following,

<data:post.body/>

And paste the button code Before it.
click Save Template and you are done.

Step 2. Customize your button & Demo.

In the above code you can customize 3 parts. and i’ve colored them to make it easy for you to recognize,
in the above code change the following parts,

• like this part controls the verb that appear on your button, keep it as you see or change it to recommend if you want.
• arial this part controls the font type, keep it or change it to one of the following, lucida+grande
  segoe+ui
  tahoma
  trebuchet+ms
  verdana
• light this part controls your button color theme, and you have three options,light, evil, or dark
• Update, How to make it appear on your home page.

in the button code there are two parts you’ll need to remove to make this button appear on your home page, the first line and the last line, if you still don’t under stand, please see the following parts and delete it before pasting the code to your template,

<b:if cond='data:blog.pageType == &

quot;item"'>

</b:if>

I wish you all like it and please leave your comments if you need any help, can ask .

Read more »

Click Exchange Program for Adsense

Hello friends , this tutorial is for those guys who has already created an account on adsense. If you haven't created the account on adsense yet then check this topic EARN ONLINE WITH ADSENSE

Moreover herez a trick for creating adsense account in few days ....Approve adsense account in few days ...... Try it too for adsense approval.

Anyways now come to the main tutorial. In this tutorial i m showing u that how can u increase your earning on google thru click exchange program.


What is Click Exchange Program ?
==========================

Its simple ,google doesnt allow u to click on ur own ads ..... so herez the solution u click on someone else blog and in return he will click on ur blog ..... but remember take much much care while doing so ..... if u do click exchange with just one person then google will disable u ....



Now read it carefully :
=================

Now This Is The Most Important Part Of The Work Becoz If You Dont Work Properly Then Members Wont WOrk With YOu Again So Understand It Completely

MAke A Yahoo ID And Sign In Yahoo Messanger . Now post ur yahoo account here and add the other yahoo accounts posted here.

After YOu Add The Members You See Different Messages Coming "free For Clicks". This Means Members Want To Work .



How To Work??
=============

Before Start Working You Have To Understand Few Things
1. Ads
2. Impressions ( imp )
3. Bps

Members Will Work With Request Or Ask You To Req To Start Work

Request Will Be Like This Most Of The Time
3 Ads 30 imp 3 bps

That Means You Have To Open Three Ads On The Blog Of That Member, refresh The Blog 30 times And Open 3 subpages On Each of The Add You Just Opened.

So In The Meanwhile The Member Will Do The Same For You.

How To Know That Others Are Not Cheating And Doing Your Work While You Are Doing His WOrk???

Counter Is For That Purpose Becoz IMP Are Counted By The Counter , When The Member Refreshes Your Page Your Counter Ticks So YOu Will KNow That The Member Is Working.

About Add And Bps

For This There Is Another Solution

When You Open An Add Eg: http//:www.forex.com/productsID66uhrguds55
Copy And Paste The Add Link To The Other Member So That He Can Know What You Have Clicked On.

But Remember Donot Copy http And www Part Simply Copy From forex.com/productsID66uhrguds55 And Paste It.

Same Work With The Bps When YOu Open Bps In New Window Copy And Paste The Link And Send It To The Member.

This Way Cheating Is Avoided.


But remember :
============
Remember Never Click On YOur Own Add Becoz Your Account Will Be Closed Imediatly.

1st All Of The Users Here In This Community Start Working With Each Other To Practise The Method Of THe Work So That YOu DOnt Loose The Members.

If Anybody Form Gets Rejected Dont Worry Register Again With The Same Process.

On Forex Ads You Earn Almost 10 dollars On 25 Clicks On Ads

That Means If 1 Members Click On Your 3 Ads 10 Members click On 30 Ads= 10+ Dollars

If You Work With 10 Members In 1 Day It Means $10+ And 30 Days Means $300+

And The More YOu WOrk The More YOu Earn

Read more »

How to make money online with adbrite

If you are a regular reader of this blog,you would be shocked to see this post,but i get this question asked daily,"How to make money online",or "How do you make money with adbrite",if you are a regular reader of my site you must know that i got banned from adsense and as an alternative i became a publisher on adbrite,so far adbrite is earning me alot.I thought to make a review about adbrite and tell you How to make money online with adbrite"

Adbrite has been around for a while now, developed by Pud who is a serial entrepreneur. It came about as an alternative to Google Adsense, but very different in that a price is given for a set period of time and for a set price. There’s no ppc (pay per click), which is favoured by Adsense and it’s copycats. The point of Adbrite is to get as many clicks possible to your advert in the alotted time.



There are a few options to promote your product:

* Text Links – Standard Text link adverts, with a title and description and link to your site
* Banners – These can be graphic banners of any size, although you may be restricted by kb size
* Inline Ads – Adverts on special text keywords.
* Full Page Ads – It would link to your custom landing page
* Britepic – Used in Videos and Images


Adbrite Publisher Tips

As a publisher (which may be the best option), you can display potential advertiser’s adverts on your site. The pricing structure is allocated by the number of uniques, pagerank and impressions your site has! I’d also suggest the following:

* Manage your Ad Zones, experiment with Text Ads, Full Page and Inline – although Text Ads are best
* Keep initial startup prices low and DO NOT use the recommended price adjuster
* When increasing ad prices, they need to be justified..if you’ve got a backlog of advertisers, then that’s the time to do it!
* Make sure the ads are on all pages, even 404′d ones..there’s no restriction compared to Adsense
* Limit the number of adverts. I use a vertical section of 4 ads only

Adbrite vs Adsense:

1. Adsense does not accept Casino, adult and Viagra sites. Adbrite does.

2. If you have a site which is high traffic like Humour where adsense your earnings is low, with adbrite your earnings will be great. Good examples: Big-Boys.com with Over 490,000 Unique visitors and FriendSter.com with Over 620,000, Unique visitors. Those two sites are a low earning with Adsense (proved) but with adbrite their earnings are thousands of dollars per month (may be per day!)

3. Customer care, I will not say that Google Adsense does not have a good customer care, but adbrite is Great! Pud, I will congratulate you about this great support team.

4. With Google adsense you can not sell Ad space in your site, but with Adbrite you can create your own Price and Packages. Also adbrite provide you with Network ads (as Google adsense).

5. Google adsense pay monthly, Adbrite pay 60-days.

6. With Google adsense you can not play with your code, with adbrite, you can add any style that you want. Play with it!

7. You can put Adsense and Adbrite code both, Without any problem.

8. A Small note: Adbrite works great in forums ;)

9. With adbrite the seller has a great advantage showing what the site provides. As unique visitors, Page views, Origin of traffic, Avg cost per click (eCPC), Site Category, Alexa rank, Repurchase rate, Conversion Score, AdBrite since, What CPC can I expect?, Ad zone description, and much more.
Sign up now for adbrite

Read more »

Add Apture ToolBar For Your Blogger blog, With Some Great Features.

Today no one can deny that the social bookmarking and sharing is one of the most important factors for making your blog more popular and more visible for all your targeted visitors.
And i’m sure that you want to make it easier for your visitors to share your posts on their favorite social networking sites.
today we’ll talk about the new Apture ToolBar and it’s features and how to add it to your blogger ( blogspot ) blog.

About Apture ToolBar and it’s features. 

The Apture Site Bar is a new way to give readers more information without leaving the page. this is what Apture authors says about the toolbar, but i’ll try to describe what is this toolbar can do for you,
once your visitor scroll down on your blog, this bar will appear loaded with some great features.

• Share on facebook button with a counter.
• Tweet this for twitter button with a counter.
• Share on email
• Search box with jquery, and this mean that your visitor don’t have to leave the page when he search for another content.
• When your visitor can select any part of your posts text small button will appear that says Search
• You can customize it with your own logo.

How To Add It To Your Blog.

You can add it in a very easy way, please visit www.apture.com,
and click Design a bar now
and on the next page, please fill the following info.

• Your website address:
• Your email:
• Upload a Logo or Set Title
you can upload your blog logo from your computer ( don’t forget to click upload ) , or just type your blog title.
• Pick your bar color

and now click Get my bar. please wait till the site finish loading and i’ll give you a code titled, Apture Magic Javascript
Copy the code and now go to your blogger account,
navigate to Layout >> Edit html and now find the following code.

</body>

and paste your toolbar code before it.
Now Click Save Template 
That’s it, and you are now done and your blog ready to show the bar to see a demo for the toolbar please click here.

Read more »

Automatic Category With Thumbnail

Automatic Category with thumbnail actually is advanced trick from previous one about Displaying category based on the label name. This feature can be used to display the categories based the names of the categories with the thumbnail and summary.

The example of automatic category with thumbnail can be seen at the demo of Fresh Revolution Template:

Live Demo

The category or label you want to display will automatically be displayed without having to edit at anytime.

What to prepare? You have to prepare is the category name only you want to display. But need to know that the label name is case sensitive. It means that the label name should be exactly as that of in your blog, e.g.Health is different from health. Therefore, make sure the label name you will use is exactly as it is.

The easiest way to know the label name exactly is to display the label widget on your blog. Point the label name you want and see the status bar of your internet browser.

You will find that the label Featured, the exact label name is featured (all lower case). It happens because the blog display is affected by the CSS setting. In this case, we need the original label name.

Create Automatic Category With Thumbnail.

The following is how to create automatic category with thumbnail.

Step I

1. Login to blogger with your ID.
2. Click Design. 
    
   
3. Click Edit HTML. 
    
   
4. Please backup your full template first by clicking Download Full Template.  
5. Find the code ]]></b:skin>, copy and then paste the code below exactly above the code]]></b:skin>
   
   

   /*** Featured Categories ***/
        img.label_thumb{
           float:left;
    padding:5px;
    border:1px solid #8f8f8f;
    background:#D2D0D0;
    margin-right:10px;
    height:55px;
    width:55px;
    }
        img.label_thumb:hover{
    background:#f7f6f6;
    }
        .label_with_thumbs {
    float: left;
    width: 100%;
    min-height: 70px;
    margin: 0px 10px 2px 0px;
    adding: 0;
    }
        ul.label_with_thumbs li {
    padding:8px 0;
    min-height:65px;
    margin-bottom:10px;
    }
       .label_with_thumbs a {}
       .label_with_thumbs strong {}

6. Find the code </head>, copy and then paste the code below exactly above the code </head>

   <script type='text/javascript'>
   //<![CDATA[
   function labelthumbs(json){document.write('<ul class="label_with_thumbs">');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
   if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)
   {s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}else thumburl='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIVXgKbeflWVeL8VLW9zO-XiH-UiqKx6oAfzYdWFh6E7piINNQOJu7YwoWAah2dDbIqDh_21AhJLd4X7eNLTY9OnaNJ8ZsV9lrGdPPNwtyqOjbAZfwfgFc27Gs72P8EFJ05O4eEaPv_7jd/';}
   var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Jan";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="May";monthnames[6]="Jun";monthnames[7]="Jul";monthnames[8]="Aug";monthnames[9]="Sep";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true)
   document.write('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<strong><a href="'+posturl+'" target ="_top">'+posttitle+'</a></strong><br>');if("content"in entry){var postcontent=entry.content.$t;}
   else
   if("summary"in entry){var postcontent=entry.summary.$t;}
   else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('');}
   else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}}
   var towrite='';var flag=0;document.write('<br>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}
   if(showcommentnum==true)
   {if(flag==1){towrite=towrite+' | ';}
   if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}
   if(displaymore==true)
   {if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">More »</a>';flag=1;;}
   document.write(towrite);document.write('</li>');if(displayseparator==true)
   if(i!=(numposts-1))
   document.write('');}document.write('</ul>');}
   //]]>
   
   </script>

7. Click SAVE TEMPLATE.
8. Step 1 done.

Step 2

1. Click Page Element, if you are not yet in the position. 
   
2. Click Add a Gadget to add new gadget. 
   
3. A new window will pop up. Click the sign plus (+) for HTML/JavaScript 
   
4. Copy the following script and then paste in the field available. Give the title as you want, but previously, you have to replace the word in red with the category name you want. 
   
   <script type='text/javascript'>var numposts = 3;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 80;</script> 
   <script type="text/javascript" src="/feeds/posts/default/-/Gadget?orderby=updated&alt=json-in-script&callback=labelthumbs"></script> 
   
   
5. Click SAVE
6. Step 2 done.

If you want to add another gadget for the other category, repeat the above steps.

Is above script customizable? Yes, in the above script, you can customize some parts, such as the character, thumbnail, number of posts, post date, comment, and more link.

In the script, you will find the texts as below:

var numposts = 3; 
var showpostthumbnails = true; 
var displaymore = false; 
var showcommentnum = false; 
var showcommentnum = false; 
var showpostdate = false; 
var showpostsummary = true; 
var numchars = 80; 

The red-printed code is editable. True means display, false means don’t display, 80 is number of character. Just try to edit them.

Happy trying!

Read more »

How to Add Two or Three Page Elements Below Header

This is the new Tutorial blogger blog.
Let's review a topic about how to create Go to Top and Go to Bottom Button for Blogger. How to  to create Go to Top and Go to Bottom Button for Blogger ? ...

1. Go to Dashboard, click Design, click Edit HTML

2. Find code of HTML below:

]]></b:skin>

     you can use (Ctrl+F) to find easily

3. Right Before ]]></b:skin> - place code of HTML below:

.gototop{
background:url(http://sites.google.com/site/blogfuelblogfuel/widgets-js/orange_arrow_up.png)no-repeat;
display:block;_display:none;
position:fixed;
z-index:9999;
text-indent:-9999px;
overflow:hidden;
outline:none;
width:128px;
height:256px;
right:88px;
bottom:8px;}
.gotobottom {
background: url(http://sites.google.com/site/blogfuelblogfuel/widgets-js/orange_arrow_down.png)no-repeat;
width:128px;
height:256px;
display:block;
_display:none;
position:fixed; z-index:9999;
text-indent:-9999px;
overflow:hidden;
outline:none;
right:8px;
bottom:8px;
}

Notes:
You can change:
# http://sites.google.com/site/blogfuelblogfuel/widgets-js/orange_arrow_up.png
# http://sites.google.com/site/blogfuelblogfuel/widgets-js/orange_arrow_down.png
# width:128px;
# height:256px;
# bottom:8px;
# right:8px;
# right:88px;

4. Find code of HTML below:

</body>

     you can use (Ctrl+F) to find easily

5. Right Before </body>- place code of HTML below:

<a class='gototop' href='javascript:scroll(0,0)' title='Top Page'>Top</a><a class='gotobottom' href='#footer' title='Bottom Page'>Bottom</a>

6. Click Save Template.

Done. Now, you've already created Go to Top and Go to Bottom Button for Blogger.

Read more »

Create a Page Peel Effect With Jquery

This is the new Tutorial Blogger blog.
Let's review a topic about How to Create a Page Peel Effect With Jquery. How to Create a Page Peel Effect With Jquery ? ...

1. Go to Dashboard, click Design, click Edit HTML

2. Find code of HTML below:

</head>

     you can use (Ctrl+F) to find easily

3. Right Before </head> - place code of HTML below:

<style type='text/css'>
img { behavior: url(iepngfix.htc) }
#pageflip {
position: relative;
right: 0; top: 0;
float: right;
}
#pageflip img {
width: 50px; height: 52px;
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px; height: 50px;
overflow: hidden;
position: absolute;
right: 0; top: 0;
background: url(http://www.wallheaven.com/subscribe.png) no-repeat right top;
}
</style>

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){

//Page Flip on hover

$(&quot;#pageflip&quot;).hover(function() {
$(&quot;#pageflip img , .msg_block&quot;).stop()
.animate({
width: &#39;307px&#39;,
height: &#39;319px&#39;
}, 500);
} , function() {
$(&quot;#pageflip img&quot;).stop()
.animate({
width: &#39;50px&#39;,
height: &#39;52px&#39;
}, 220);
$(&quot;.msg_block&quot;).stop()
.animate({
width: &#39;50px&#39;,
height: &#39;50px&#39;
}, 200);
});


});
</script>

4. Find code of HTML below:

<body>

     you can use (Ctrl+F) to find easily

5. Right After <body> - place code of HTML below:

<div id='pageflip'>
<a href='http://feeds.feedburner.com/tutorialwebforblogger'><img alt='' src='http://www.wallheaven.com/page_flip.png'/></a>
<div class='msg_block'></div>
</div>

Notes:
You can change:
#  http://feeds.feedburner.com/tutorialwebforblogger

6. Click Save Template and Done.

Now, you've already Created a Page Peel Effect With Jquery.

Read more »

Go to Top and Go to Bottom Button for Blogger

This is the new Tutorial blogger blog.
Let's review a topic about how to create Go to Top and Go to Bottom Button for Blogger. How to  to create Go to Top and Go to Bottom Button for Blogger ? ...

1. Go to Dashboard, click Design, click Edit HTML

2. Find code of HTML below:

]]></b:skin>

     you can use (Ctrl+F) to find easily

3. Right Before ]]></b:skin> - place code of HTML below:

.gototop{
background:url(http://sites.google.com/site/blogfuelblogfuel/widgets-js/orange_arrow_up.png)no-repeat;
display:block;_display:none;
position:fixed;
z-index:9999;
text-indent:-9999px;
overflow:hidden;
outline:none;
width:128px;
height:256px;
right:88px;
bottom:8px;}
.gotobottom {
background: url(http://sites.google.com/site/blogfuelblogfuel/widgets-js/orange_arrow_down.png)no-repeat;
width:128px;
height:256px;
display:block;
_display:none;
position:fixed; z-index:9999;
text-indent:-9999px;
overflow:hidden;
outline:none;
right:8px;
bottom:8px;
}

Notes:
You can change:
# http://sites.google.com/site/blogfuelblogfuel/widgets-js/orange_arrow_up.png
# http://sites.google.com/site/blogfuelblogfuel/widgets-js/orange_arrow_down.png
# width:128px;
# height:256px;
# bottom:8px;
# right:8px;
# right:88px;

4. Find code of HTML below:

</body>

     you can use (Ctrl+F) to find easily

5. Right Before </body>- place code of HTML below:

<a class='gototop' href='javascript:scroll(0,0)' title='Top Page'>Top</a><a class='gotobottom' href='#footer' title='Bottom Page'>Bottom</a>

6. Click Save Template.

Done. Now, you've already created Go to Top and Go to Bottom Button for Blogger.

Read more »

Best SEO TOOLS To Optimize Your Blog – All in One!

After having shared all tips, tricks and tweaks to let you better optimize your Blogger based blogs, its time now to share my favorite SEO Tools without which Search Engine Optimization is all boring. These are my ultimate tools for understanding my competitors strategies.  There are a lot of tools found online but you need just a single source that may provide you with everything you need. Rapid Searchmetrics is a website that has all what a webmaster needs. From free to premium services, they make your job simply fun. I enjoy using them a lot and always keep track of my CSS, Java, Image Size limits using these tools. It has always helped me keep track of my load time and internal and external link building. I just hope you find it worth trying and using.

 

The Complete List of SEO Tools Being Offered are:

• Alexa Challenge
• Cloaking Detection
• Meta Tag Analyzer 
• Multi PageRank 
• PageRank Analysis 
• SEO Challenge 
• Social Bookmarks 
• Spiderview 
• Visual PageRank 
• Website Speed Test 
• Keyword Density 
• Keyword Position 
• Domain Age 
• Domain Popularity 
• Reverse IP 
• Link Popularity, Backlinks 
• Link Value 
• Outbound Links 
• Meta Tag Generator 
• Sitemap Generator 
• Text2Image 
• Unix Time Convertor 
• URL Rewrite

How did you find these SEO series?

Its always my aim to cover topics series wise so that related tutorials could be shared one after another for better understanding of our loyal readers. I have completed all SEO related queries regarding GOOGLE Blogger if you still have some questions in mind then feel free so to leave your precious comments. I would love to know whether I could live up to your expectation or not. I wish you best of luck with your beautiful Blogging goals in life. Take care! :)

 

Read more »