Adsense Blogger Templates: Tutorial

Showing posts with label Tutorial. Show all posts

How to Displaying Code or Script in Blogger Post

This tutorial only show you how to add code or javascript code to blogger post without being executed. You can change the way you show it by using blockquote or your own style.

Step 1. Go to your blog >> Posting >> New Post and write everything you want to show to your reader except your Code or Script. Please make sure you use Edit Html to post your article.

Step 2. Copy the script you want to show to your reader. Let me give you the example :

<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> 
</div>

Copy that code and convert it using Parse HTML generator tool. you can find it here

1. http://www.blogcrowds.com/resources/parse_html.php

Step 3. Parse the code and copy the result to your edit html editor post. You can use blockquote to make it looks different.

Step 4. Publish your post and done.

Note : You can place any code or script to blogger post by using this tricks.

In Labels: Tutorial on 09 August, 2009.

How To Add Comment Box Form In Blogger

As i see it looks like there are some people unable to show comment form in blogger, so i'm going to show you how can we add that thing. If you can't show your comment form in blogger than you're using older template design for your blog, please follow step below to Show your comment form.

Step 1.
Please Go to Setting --> Comments and change "Comment Form Placement" to "Embedded below post". Then save it. Preview your blog. If your comment box showed then you don't need to follow the next step. If it doesn't show then follow the next step.

Step 2.
Go to Layout >> Edit HTML >> Expand Widget templates and find code below

<p class='comment-footer'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<data:postCommentMsg/></a>
</p>
</b:if>

Step 3.
Change the whole above code with this one.

<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/> <b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<data:postCommentMsg/></a>
</b:if> </b:if> </p> </b:if>

Step 4.
Save it and your comment box must be there. Happy blogging.

In Labels: Tutorial on 26 July, 2009.

Increase Blogger Comment Box Width

How to increase the blogger comment box width?. Now if you want to make your blogger comment box form wider or even smaller just follow the step below.

Step 1
Go to Layout >> Edit HTML >> Expand widget templates and Find Code Below in your template :

<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' scrolling='no' src='' width='100%'/>
<data:post.friendConnectJs/>
<data:post.cmtfpIframe/>

Step 2.
Change the width to your own desired size. ie. 400px

Step 3.
Make sure the width is smaller than your main-wrapper width.

That's all. Have any problem, just leave a reply.

In Labels: Tutorial on 22 July, 2009.

How to Make Drop Down Menu In Blogger

What's it drop down menu? You probably know it a long time ago. Drop down menu is something look like below. What's the advantage using this trick to blogger? This trick maybe useful for blogger who don't have enough space in the template to add more links. So here is the step to add drop down menu to blogger.

Step 1. Go To Dashboard >> Layout >> Add HTML/Javascript Widget
Step 2. Copy the entire code below in HTML/Javascript widget.

<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1 name=menu>

<option>- TITLE_HERE -</option>

<option value="YOUR_LINK_HERE">TITLE_HERE</option>
<option value="YOUR_LINK_HERE">TITLE_HERE</option>
<option value="YOUR_LINK_HERE">TITLE_HERE</option>
<option value="YOUR_LINK_HERE">TITLE_HERE</option>
</select></form>

Step 3. Change the red text to your own.
YOUR_LINK_HERE and TITLE_HERE

Step 4. Save it and preview your blog. It's done.

Tips : you can add as many links as you want. Just repeat this code as many as you want.

<option value="YOUR_LINK_HERE">TITLE_HERE</option>

That's all. Keep blogging.

In Labels: Tutorial on 02 July, 2009.

Alternative Javascript Hosting For Blogspot User

Javascript Hosting is currently in high demands for blogger who use blogspot blog. Why? Nowdays a blogger template has moved to the next generations. Currently day by day blogger template keep coming with amazing style. For that we also need some javascript to make our design walk with no problem. As we know Googlepages has stopped the free hosting and nobody will deny that Googlepages given so much help to free blogspot user. Then what we can do?

The Solution
Every problem has the solution. Yes or No? There are 4 ways we can do to host our javascript file. So let's we start.

Solution 1. Change file extension from .js ke .txt

We can change the .js to .txt
Remember to cange .js file to .txt file and upload it to your free hosting that allowed .txt file. after it change the way you call it.

<script type="text/javascript" src="file-url.js" />

we can change it like this

<script type="text/javascript" src="file-url.txt" />

Solution 2. Adding script directly to our blogger templates.
We can do this by replace code below

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

With this code below

<script type='text/javascript'>
//<![CDATA[
SCRIPT_CONTENT_HERE
//]]>
</script>

How do i know SCRIPT_CONTENT_HERE code?
just copy SCRIPT_URL to your browser and you'll see a bunch of code. now copy and paste that code to SCRIPT_CONTENT_HERE.

Solution 3. Upload the javascript to another free hosting.
Well as you know we can't expect much from free hosting, but if you want to know where, then here is 2 file hosting that allowed javascript with direct linking.

1. http://www.hotlinkfiles.com/
2. http://www.ripway.com/

Solution 4. Buy a new Hosting. +_+

Well I hope this information is useful.

In Labels: Tutorial on 29 June, 2009.

How to add Different Meta Tags For Each Post in Blogger

What's Different Meta Tags For Each Post in Blogger?
By default if you're adding Meta Tags to blogger template, then all of your page including home page will have the same Meta Tags Description. Is it wrong? No. It's just when you submitted your blog to google then you'll have duplicate meta tags description. different Meta Tags Description in each post will be more google friendly.

Step by Step to add Different Meta tags description For Each Post in your blogspot blog.

Step 1. Please do the previous entry here add meta tags to blogger blog

Step 2. Find code below

<meta content='Your home page description' name='description'/>
<meta content='your keywords, keywords1, keyword2' name='keywords'/>

Step 3. Add red code to it. This should be your final code.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='Your home page description' name='description'/>
<meta content='your keywords, keywords1, keyword2' name='keywords'/>
</b:if>

<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.pageTitle' name='Description'/>
<meta expr:content='data:blog.pageName + ", your keywords, keywords1, keyword2 "' name='keywords'/>
</b:if>

Step 4. Don't forget to change description and keyword to your own. save it and done.

The first code is Meta tags description and keywords for your blogspot home page and the second is different Meta tags description and keywords for each post in blogger.

So what you think? leave your feedback or if you have any problem than you can comments below. Credits : Meta Tags For Blogger

In Labels: Tutorial on 28 June, 2009.

Total Posts And Comments widgets For Blogger blog

How to show total posts and total comments on your blog? interested to know? now i'm going to show you how can we add it. Follow the simple way below to add it.

Step 1
Login to your blog >> Layout >> Page Element >> Add Gadget >> HTML / JavaScript

Step 2
Copy and paste code below there.

<script style="text/javascript">
function numberOfPosts(json) {
document.write('Total Posts: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
}
function numberOfComments(json) {
document.write('Total Comments: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
}
</script>
<font color="black"><script src="http://adsense-day.blogspot.com/feeds/posts/default?alt=json-in-script&callback=numberOfPosts"></script>
<script src="http://adsense-day.blogspot.com/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script></font>

Step 4
Replace http://adsense-day.blogspot.com/ with your own blog URL.

Step 5
Don't forget to save it and done.

In Labels: Tutorial on 15 June, 2009.

How to Edit Top Menu Links In Blogger Templates

Have you downloaded new blogger templates? nowdays blogger templates have top menu links that's really make it more awesome. Do you know how to edit top navigation links? Many bloggers, actually a new blogger do not know how to edit the default top menu links in the downloaded file. Okay now i'm going to share what i know how to edit the default Top menu links.

Step 1
Login to your blogger account >> Dashboard >> Layout >> Edit HTML >> Expand widget template.

Step 2
Preview your blog. I assumed you already install new templates. you must see top menu links like this below

Step 3
Copy the text you see in your top menu links. Okay for example we take HOME text

Step 4
Now search the Home text in your blogger templates. You'll find something like code below.

<li class='current_page_item'><a Title='Home' class='home' expr:href='data:blog.homepageUrl' title='Home'>Home</a></li>
<li class='page_item page-item-2'><a href='#' title='About'>About</a></li>
<li class='page_item page-item-2'><a href='http://adsense-day.blogspot.com/' title='Contact'>Contact</a></li>
<li class='page_item page-item-2'><a href='http://adsense-day.blogspot.com/' title='Blogger Templates'>Blogger Templates</a></li>

<li><a href=''>Home</a></li>
<li><a expr:href='data:blog.homepageUrl + "feeds/posts/default"'>Posts RSS</a></li>
<li><a expr:href='data:blog.homepageUrl + "feeds/comments/default"'>Comments RSS</a></li>
<li><a href='http://adsense-day.blogspot.com/'>Blogger Template</a></li>

Step 5
Now change the links. The format should looks like below.

<li><a href='Your Links'>Home</a></li>
<li><a href='Your Links'>The title</a></li>
<li><a href='Your Links'>The title</a></li>
<li><a href='Your Links'>The title</a></li>

Now that's all don't forget to save it.
Note : Every templates have different style but the default format for top menu links just like showed above. Trying may fix your problem. Happy blogging.

In Labels: Tutorial on 12 June, 2009.

All Ways To Add READMORE Hacks In Blogger

Allright it seems much new blogger wants to know How To Add READMORE HACKS like in wordpress to blogger powered blog. It's easy IF we know the way. Now i'm going to explain 2 hacks to add readmore hacks in blogger. Before this, somebody ask me " Is it okay to add readmore on blogger? What about SEO? Is it has no Bad effect for SEO?" Okay, first of all I'm NEWBIE too in blogging. Seconds, so far it's been six months i'm using this hacks and till now it seems no bad of it for SEO. For my experience, if you use META TAG and Auto META TAG Generators for each posts in blogger, then you NO need to worry about it.

Okay let's STEP to the WAY :

1. Readmore Hacks 1

To add readmore, we need to edit our templates. Go to Layout >> Edit HTML >> Expand Widgets Templates :

Now add script below above the </head>

Code :

<b:if cond='data:blog.pageType != "item"'>
<script type="text/javascript">

var fade = false;
function showFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Appear(spans[i]);
} else spans[i].style.display = 'inline';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'none';
if (spans[i].id == "hidelink")
spans[i].style.display = 'inline';
}
}

function hideFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Fade(spans[i]);
} else spans[i].style.display = 'none';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'inline';
if (spans[i].id == "hidelink")
spans[i].style.display = 'none';
}
post.scrollIntoView(true);
}

function checkFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
var found = 0;
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
spans[i].style.display = 'none';
found = 1;
}
if ((spans[i].id == "showlink") && (found == 0))
spans[i].style.display = 'none';
}
}
</script>
</b:if>

# Now Look for the code looks like below

<div class='post-body'>
<p><data:post.body/></p>
<div style='clear: both;'/>


Add the red code below inside above code or the last code will be look like below

<div class='post-body' expr:id='"post-" + data:post.id' >
<b:if cond='data:blog.pageType == "item"'>
<style>#fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost{display:none;}</style>

<p><data:post.body/></p>
<span id='showlink'>
<a expr:href='data:post.url'>Read More......</a>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>

<div style='clear: both;'/> 
</div>

Okay it's done for templates. Now go to Setting >> Formatting >> Post Template
Put code below in your post templates area. code :

Type your summary here

<span id="fullpost">

Type rest of the post here

</span>

# Save it. Now everytime you post something must be like this below.

Type your summary here. This text only appear in your homepage. put one paragraph or whatever you want. you can even put image here.

<span id="fullpost">

Type rest of the post here. This all the rest of your post. you can write everything here.

</span>

2. Add AUTO Redmore Hack in blogger.

This hacks will be useful for those who have much of post and don't have a time to edit each post manually.

# Put code below before the </head> Code

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>

<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)

(C)2008 by Anhvo

visit http://en.vietwebguide.com to get more cool hacks
********************************************/
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Done. Now # Look for the <data:post.body/> code
Replace it with code below.

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

Save it. Remember This.
var thumbnail_mode = "float"; (You decided how your thumbnail goes. float left of float right. you can even put no-float if you don't want it floating.)
summary_noimg = 250; (Your summary if no image)
summary_img = 250; (Your Summary If There is An Image)
img_thumb_height = 120; (Your image height Thumbnail)
img_thumb_width = 120; (Your image width Thumbnail)

Done.

In Labels: Tutorial on 10 June, 2009.

Complete SEO Trick For Blogger Layout

Searching all around just to know the secret behind search engine. You know search engine is the most key for blogger to make money online. I'm trying to learn some Search Engine Optimization from all over the world and implemented it to a dummy blog. Just to know the effect of it. Here i'm not going to teach you how to make your blogger template more SEO. No. I'm not the blogger template coder. Here i can give you a completed list from where i learn it. I still haven't figured it out, though +__+.

Well if you have another list maybe i can add a link below...

1. Complete SEO Guide For Blogger Templates

2. Optimizing the use of H1 for a better SEO

3. Search Engine Optimization tips for Blogger Templates (Part 1)

4. Add a link Here...

So what you think?

In Labels: Tutorial on 02 May, 2009.

How to make your blog search engine friendly?

Who want to make their blog appear on top of search engine? probably everyone. Especially on google search. Having your blog number one on google will drive more traffic to your blog and of course more money will be on the way to you. Now i'll tell you how to make your blog search engine friendly. This is a conclusion after being a blogger at some time.

Follow My Full Articles Here : How to make your blog search engine friendly >>

In Labels: Tutorial on 09 April, 2009.

How to print your blogger post?

Want to add a print before the comment form in the blogger post? Here is tutorial to make it possible to blogspot blog. Follow step below :
1. Login to http://www.blogger.com/home

2. Click Layout >> Edit HTML >> Expand widget templates >> and find </head>

3. Add code below before </head> code

<style media='print' type='text/css'>
#header-wrapper, #header, .header, #sidebar-wrapper, .sidebar, #footer-wrapper, #footer, .date-header, .post-meta-data, .comment-link, .comment-footer, #blog-pager, #backlinks-container, #navbar-section, .subscribe_notice, .noprint {display: none;}
#main-wrapper {width: 95%}
</style>

4. So it will be look like this

<style media='print' type='text/css'>
#header-wrapper, #header, .header, #sidebar-wrapper, .sidebar, #footer-wrapper, #footer, .date-header, .post-meta-data, .comment-link, .comment-footer, #blog-pager, #backlinks-container, #navbar-section, .subscribe_notice, .noprint {display: none;}
#main-wrapper {width: 95%}
</style>
</head>

5. Now find this code

<p><data:post.body/></p>

6. Add this line after that code

<b:if cond='data:blog.pageType == "item"'>
<a href='javascript:window.print()'>Print this post</a>
</b:if>

7. Don't forget to save it.

Done. If you need a help you can comment below.

In Labels: Tutorial on 31 March, 2009.

How to embed google custom search on blogspot blog?

Wondering how to embed google custom search engine in your blogspot blog? it's easy if you have an google adsense account. just setup an adsense for search, copy the code and paste it in your blog. So simple isn't it? but how can i do if i don't have an adsense? Well, blogspot have it, guy's. but it still on the blogger draft. or in a simple way it's still in Beta. am i right? you can use it from directly blogger draft. Now i'll show you to do that.

Step By Step to install google custom search on your blog :

1. Log in to http://draft.blogger.com/

2. Go to Layout >> Page Elements >> Add gadget >> Choose where you want to put it.

3. Add gadget Popup will appear and choose Search Box.

4. Configure it. Give it a title and choose how do it work. Don't forget to save it.

5. View your blog and you'll see it there.

That's all. Happy blogging.

In Labels: Tutorial on 30 March, 2009.

How to install XML blogger templates?

Today, i'll try to show how to install new blogger xml template for your blogspot blog. Remember this tutorial for newbie only. If you're an expert in blogger then you don't need this annoying tutorial. ^^

Okay let's step ahead my friends.

Step By Step blogspot XML template Installation :
1. Download your xml template. Usually most of the download source zipped the file. So you need to unzip it or unrar. It's the same. >>

2. Sign in to your blogger account.

3. Backup your widgets and copy all the widget code, like google adsense code, recent comment, or link list to NotePad or similiar program.

4. Go to Layout >> Edit HTML >> Expand Widget Templates
Before uploading new templates, you must download your old template to your PC to avoid if any error happened. download your old template by clicking Download Full Template

5. Browse your new templates and upload it.

5. After that a message will appear that your widget are about to deleted. Just ignore it since you already backup your old template. See step 3.

6. And all done. you will see your new template.

Tips : sometimes if you upload your new templates and follow the step above, you'll still see any error happened. To fix this just try it again. If still error then try to logout, clear your browser cookies and cache and login and upload it again.

Have any problem then you can leave a comment. Happy blogging.

In Labels: Tutorial on 29 March, 2009.

Add social bookmarking tool below every post

Want to spreads your content across the Web network by making it easier for your visitors to bookmark and share it with other people, again... and again... and again. But don't know how to do that? then There are much service offering bookmarking tool and you can add it to your blogspot blog in a simple way.

Read Full Tutorial Here.

In Labels: Tutorial on 28 March, 2009.

How To Add Emoticon above Comment Form In Blogspot?

If you want to add some interesting style to your blogspot blog and of course for your reader, you may consider to add emoticons above your comment form. Then, how do i do that? Here is i'll show you the way. I find this interesting trick in trick-tips blog.
Step By Step How To Do That :

1. Login to your blogger and click layout then edit HTML and expand widget template.
2. Put the code below before </body>.
For Yahoo Emoticons :
<script src='http://kendhin.890m.com/emoticon/smile1.js' type='text/javascript'/>
For Cats Emoticons :
<script src='http://kendhin.890m.com/emoticon/smile2.js' type='text/javascript'/>

3. Now Find This Code :
<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</p>

4. Now Put the code below after <p class='comment-footer'>

For Yahoo Emoticons :

<b><img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/>
:))
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif'/>
:)]
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif'/>
;))
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif'/>
;;)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/>
:D
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/>
;)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/>
:p
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif'/>
:((
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/>
:)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/>
:(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/>
:X
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif'/>
=((
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif'/>
:-o
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/>
:-/
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/>
:-*
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif'/>
:|
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif'/>
8-}
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif'/>
~x(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif'/>
:-t
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif'/>
b-(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif'/>
:-L
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'/>
x(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/>
=))
</b>

For Cats Emoticons :

<b><img border='0' src='http://kendhin.890m.com/emoticon/capek.gif'/>
:f
<img border='0' src='http://kendhin.890m.com/emoticon/bigsmile.gif'/>
:D
<img border='0' src='http://kendhin.890m.com/emoticon/hi.gif'/>
:)
<img border='0' src='http://kendhin.890m.com/emoticon/kagum.gif'/>
;;)
<img border='0' src='http://kendhin.890m.com/emoticon/love.gif'/>
:x
<img border='0' src='http://kendhin.890m.com/emoticon/malu.gif'/>
:$
<img border='0' src='http://kendhin.890m.com/emoticon/marah.gif'/>
x(
<img border='0' src='http://kendhin.890m.com/emoticon/bingung.gif'/>
:?
</b>
<br/>
<b>
<img border='0' src='http://kendhin.890m.com/emoticon/mumet.gif'/>
:@
<img border='0' src='http://kendhin.890m.com/emoticon/muntah.gif'/>
:~
<img border='0' src='http://kendhin.890m.com/emoticon/mentok.gif'/>
:|
<img border='0' src='http://kendhin.890m.com/emoticon/ngakak.gif'/>
:))
<img border='0' src='http://kendhin.890m.com/emoticon/sedih.gif'/>
:(
<img border='0' src='http://kendhin.890m.com/emoticon/senang.gif'/>
:s
<img border='0' src='http://kendhin.890m.com/emoticon/tolong.gif'/>
:((
<img border='0' src='http://kendhin.890m.com/emoticon/wow.gif'/>
:o </b>

5. Save your template and see your new style. XD

Note : Some time the template has the different code. So you can experience with that. But if you need a help, then you can drop me a line.

In Labels: Tutorial on 25 March, 2009.

Auto Hide Blogger Navbar

The Auto hide tutorials works when visitors mouse over to the top of the original navbar then the navbar will appear and if visitor move the mouse down (not in the navbar area) then automatically navbar will disappear.
On the Edit HTML page, look for the code body {
then put code below above this body { code

body {

#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}

In Labels: Tutorial on 18 March, 2009.

How to Make Post Date In Blogger Disappear

How to make post date in blogspot to disapper or just want to hide it? I'll show you the way. First go to Edit HTML page and search h2.date-header, then add visibility: hidden; inside the code. see example code below:

h2.date-header {
margin:.3em 0 0;
padding:0;
font-size:80%;
color:#777;
height: 0px;
visibility: hidden;
}

In Labels: Tutorial on .

Adsense Ads Inside Blog Posts

Placing your adsense ads inside the post will increase the CTR (the number of times your ads clicked/number of times it is shown). And it means that more CTR you've got = more $$$ cash.

Placing ads inside the post or between post have more change to be clicked rather than ads in footer, left or right sidebar that everybody knows that there is an ads placement.
Here is step by step :

1. Login blogger, then open layout

2. Click on the Edit link on the blog post area.

Then You'll find a pop up window....

3. Then check at the 'Show ads between the posts' to show the adsense ads.

4. You can modified your adsense ads colors and size.

Now your adsense is ready. The ads will shown at the bottom in every posts you have.

And now 'How to put the adsense ads inside the posts?'
This is the question for many blogger and here is the tutorial to put an adsense code inside your post.

1. Now you are login to your blogger account, then click Layout > Edit HTML
Check at the 'Expand Widget Templates' first

2. Find the script below:
<b:if cond='data:post.includeAd'> <data:adEnd/> <data:adCode/> <data:adStart/> </b:if>

3. Then replace that code with this code below:
<b:if cond='data:blog.pageType != "item"'> <b:if cond='data:post.includeAd'> <data:adEnd/> <data:adCode/> <data:adStart/> </b:if> </b:if>
4. scroll again and find data-post body

5. Next is, paste the code below just above that code (To show ads above the post body). But If you want ads to show below the post, just insert the code below that tag.
<b:if cond='data:blog.pageType == "item"'> <b:if cond='data:post.includeAd'> <data:adEnd/> <data:adCode/> <data:adStart/> </b:if>
</b:if>

Okay, it's done baby.
Any problem just point them here.

In Labels: Tutorial on 23 February, 2009.

Categories

How to Displaying Code or Script in Blogger Post

How To Add Comment Box Form In Blogger

Increase Blogger Comment Box Width

How to Make Drop Down Menu In Blogger

Alternative Javascript Hosting For Blogspot User

How to add Different Meta Tags For Each Post in Blogger

Total Posts And Comments widgets For Blogger blog

Recent Post Widget With Thumbnail For Blogger

How to Edit Top Menu Links In Blogger Templates

All Ways To Add READMORE Hacks In Blogger

Complete SEO Trick For Blogger Layout

How to make your blog search engine friendly?

How to print your blogger post?

How to embed google custom search on blogspot blog?

How to install XML blogger templates?

Add social bookmarking tool below every post

How To Add Emoticon above Comment Form In Blogspot?

Auto Hide Blogger Navbar

How to Make Post Date In Blogger Disappear

Adsense Ads Inside Blog Posts

Sponsor

Archive

Links

Search

Subscribe

Recent Posts

Recent Comments

Followers

Directories

Stats