adsthemes1

How to Add Favicon On Blogger Blog

noreply@blogger.com (shraqshaq) — Mon, 15 Jun 2009 16:04:00 +0000

Favicon is a small icon (image) displayed at the beginning of the address bar of the browser. It is also called Favourite Icon, Pageicon and urlicon. See the image below :

The main advantage of creating and using favicon is ,it makes it easy to find your blog or site when someone favourited or bookmarked your site/blog among several other sites. It's easy to add a favicon into self-hosted blogs, but it's not so in case of free hosts like Blogspot blogs. Adding a favicon to your Blogspot blog requires a workaround. Here is the step-by-step procedure for that :

Step 1 - Create Your Favicon

The first step of adding the favicon is creating your own unique favicon file. The favicon is a very small icon file with ‘.ico’ extension. Most of the people use 16x16 pixel, 32x32 pixel with ".ico" format. But, other than that you can also use gif, png (image formats) as well.

Now let's create your own "image" first, it can be in any format, but I prefer jpeg, gif or png. If you have Photoshop, or any other programs like that, open it and create a 16x16 image and save it as png or gif format. As for me, I use GIMP (free software).

See the sample image of my favicon below (jpg):

Now your icon is ready, we need to convert it to .ico format. Use these online services to create your favicon: http://www.html-kit.com/favicon/

Upload your image file (in JPG, PNG, or GIF) and click on "Generate FavIcon.ico" button. The next thing, you'll see the preview of your icon. Download the Favicon package if you're already satisfied with it or else Customize it once again.

Unzip the file, and your icon is now ready.

Step 2 - Host Your Icon

Once you have your favicon ready, upload it to a web location, from where it can be accessed by Blogger. Remember, icon file is a small image file with ‘.ico’ extension. Since Googlepages is not available, what I did was create a free account with Photobucket, and upload the file there. See the image below.

Copy the Direct Link to your icon as shown above.

Step 3 - Add Script

Now, go to your blogger Dashboard -> Layout -> Edit HTML. and search for <head> or </head> code.

add the below code between <head> or </head> code

<link href='Your Icon URL' rel='shortcut icon'
type='image/vnd.microsoft.icon'/>

and replace the 'Your Icon URL' with the url of your icon file.(like http://i429.photobucket.com/albums/.............../animated_favicon1.gif).

Once you have this script ready, save the template and check the website, your favicon should be loading fine.

P.s : How To Add Favicon On Wordpress Blog (self hosted blog)

Where To Grab Contact Form For Blogger Blog

noreply@blogger.com (shraqshaq) — Sat, 13 Jun 2009 15:26:00 +0000

If you're running a website or blog, contact form is a must. You may or may not be aware of the benefits of using a contact form as opposed to merely providing an email address for your visitors. A contact form is an element of your website that lets visitors enter details under a number of fields. A typical contact form might have fields for the user to enter their name, email, phone number and query, then they click a button or link that submits this information to you.

Naturally, blogs include a method of getting in contact with the owner or editor/writer of the site – through comments. However, this isn’t the best method for contacting the owner, especially if you need to give personal details or something that can’t be shared with the entire community.

Some blogs don’t even contain a contact form, they rely totally on comments, but this isn’t an ideal situation should a user encounter a problem with your site. Therefore, it is essential to place some type of contact form on your blog.

Here's a list of site that provide the service (contact form) you can choose from:

Kontactr

Kontactr provides a simple, easy way to create contact forms. All you have to do is use their three-step process to create your very own contact form for your website. When you create the account, you will be able to embed links in your website or blog.

Sign up with Kontactr.

Email Me Form

Email Me Form is a free online form generator service that helps you create HTML forms for your blog, with no programming required. Within minutes, by using their easy to use form wizard you can design simple or complex forms that send you an email each time your visitors submit them. After creating the form, you get a HTML code to paste in your website, and the form will be there and working.

Signup with Email Me Form.

Wufoo

You can create contact forms, online surveys, and more with their tool, which doesn’t involve editing or viewing a single line of code. They have several payment options, starting with a free solution (one user, three forms, three reports, and ten fields, up to a hundred entries per month) through an account that allows unlimited forms and reports.

Signup with Wufoo.

Free Contact Form

This form allows you to implement a fully accessible, spam-free form on your website. It is more than just a contact form, as you can use it for other purposes.

Signup with Free Contact Form.

Free Contact Form

A simple, effective solution for creating a brief contact form for your blog.

Signup with Free Contact Form.

Response-O-Matic

Ideal for people who want an effective solution, this site offers the ability to create a contact form without the need to learn HTML. Simply tell the wizard what you want to see in your form, then copy and paste the code into your website – it’s truly that easy.

Signup with Response-O-Matic.

Odio Works

Signup with Odio Works.

Mailjol.net

This site provides a solution that allows you to create various forms. A number of the key features include: No Ads, Unlimited Questions, Easy Form Creator, Spam Protection, and more.

Signup with mailjol.net.

How To Add 125 x 125 Ad Spots To Your Blog Sidebar

noreply@blogger.com (shraqshaq) — Sat, 06 Jun 2009 15:45:00 +0000

125x125 ad-spots are the most famous ad dimensions in the blogosphere. If you're planning to sell some place on your blog with these 125x125 ad spots, then follow these simple instructions below.

I am using simple HTML tables, to keep the process simple and so that it can easily customize it later.

Step One

Log in to Blogger -> Layout -> click on "Add a Gadget"(within your sidebar) -> select "HTML/JavaScript".

Paste this code into the HTML box:

Step Two

Save the widget.

Step Tree

Replace the links in RED in the code above with your new 125x125 ad code.

How To Add "Related Post" Below Every Post

noreply@blogger.com (shraqshaq) — Fri, 05 Jun 2009 08:14:00 +0000

To add Related posts below every post on your blog, just follow these simple steps:

First you'll need this file;

relatedPosts_ForBlogger2.js

Unzip the file, and upload the file (relatedPosts_ForBlogger2.js) to SigMirror.com or HotLinkFiles.com to get a DIRECT LINK to that file.

Step 1:

Go to Blogger.com -> Layout -> Edit HTML -> Expand widget templates and Find this code:

</head>

just BEFORE this code </head> paste this code ;

<style>
#related-posts {
float : left;
width : 540px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 11px Verdana;
margin-bottom:10px;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
color : #940f04;
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
color : #054474;
font-size : 11px;
text-decoration : none;
}
#related-posts a:hover {
color : #054474;
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url("http://www.gigaimage.com/images/brrl1rtaziisu0yj6kj6.gif") no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 16px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}

</style>
<script src='http://sigmirror.com/............/relatedPosts_ForBlogger2.js' type='text/javascript'/>

Step 2 :

Now replace the link in RED with the DIRECT LINK, you got in the previous step (step one).

Step 3 :

Search for this code;

<data:post.body/>

paste these code right AFTER it :

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<font face='Arial' size='3'><b>Related Posts: </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != "true"'>,</b:if><b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script></div></b:if>

To change the number of similar/related posts to be displayed, change the code

max-results=5

Finally save your template, and you will see related posts after all your posts (Remember to add labels after your posts, during publishing them)

How To Add Auto Hiding Social Bookmarking Below Your Blog Post

noreply@blogger.com (shraqshaq) — Fri, 05 Jun 2009 06:39:00 +0000

By adding social networking icons to your blog you will definitely boost your blog's traffic, if it done properly. It should be attractive, correctly placed, aligned and also visible separately from the post.

Here's an attractive bookmarking widget, that by default partially hides the buttons and shows them only when a visitor hovers his mouse cursor over the icons. (designed by Eight7Teen )

To add this widget to your blog, follow these instructions:

Step One

Log in to Blogger, go to Layout -> Edit HTML and mark the "Expand Widget Templates" box.

Step Two

Now find (CTRL+F) this code:

</head>

paste this code BEFORE/ABOVE it


<style type='text/css'>
div.beauty-bookmarks {
height:54px;
background:url('http://i43.tinypic.com/2ueii3t.png') no-repeat left bottom;
position:relative;
width:540px;
}

div.beauty-bookmarks span.beauty-rightside {
width:17px;
height:54px;
background:url('http://i43.tinypic.com/2ueii3t.png') no-repeat right bottom;
position:absolute;
right:-17px;
}

div.beauty-bookmarks ul.socials {
margin:0 !important;
padding:0 !important;
position:absolute;
bottom:0;
left:10px;
}

div.beauty-bookmarks ul.socials li {
display:inline-block !important;
float:left !important;
list-style-type:none !important;
margin:0 !important;
height:29px !important;
width:48px !important;
cursor:pointer !important;
padding:0 !important;
}

div.beauty-bookmarks ul.socials a {
display:block !important;
width:48px !important;
height:29px !important;
font-size:0 !important;
color:transparent !important;
}

.beauty-furl, .beauty-furl:hover, .beauty-digg, .beauty-digg:hover, .beauty-reddit, .beauty-reddit:hover, .beauty-stumble, .beauty-stumble:hover, .beauty-delicious, .beauty-delicious:hover, .beauty-yahoo, .beauty-yahoo:hover, .beauty-blinklist, .beauty-blinklist:hover, .beauty-technorati, .beauty-technorati:hover, .beauty-facebook, .beauty-facebook:hover, .beauty-twitter, .beauty-twitter:hover, .beauty-myspace, .beauty-myspace:hover, .beauty-mixx, .beauty-mixx:hover, .beauty-script-style, .beauty-script-style:hover, .beauty-designfloat, .beauty-designfloat:hover, .beauty-syndicate, .beauty-syndicate:hover, .beauty-email, .beauty-email:hover {
background:url('http://i44.tinypic.com/1znbj83.png') no-repeat !important;
}

.beauty-furl {
background-position:-300px top !important;
}
.beauty-furl:hover {
background-position:-300px bottom !important;
}
.beauty-digg {
background-position:-500px top !important;
}
.beauty-digg:hover {
background-position:-500px bottom !important;
}
.beauty-reddit {
background-position:-100px top !important;
}
.beauty-reddit:hover {
background-position:-100px bottom !important;
}
.beauty-stumble {
background-position:-50px top !important;
}
.beauty-stumble:hover {
background-position:-50px bottom !important;
}
.beauty-delicious {
background-position:left top !important;
}
.beauty-delicious:hover {
background-position:left bottom !important;
}
.beauty-yahoo {
background-position:-650px top !important;
}
.beauty-yahoo:hover {
background-position:-650px bottom !important;
}
.beauty-blinklist {
background-position:-600px top !important;
}
.beauty-blinklist:hover {
background-position:-600px bottom !important;
}
.beauty-technorati {
background-position:-700px top !important;
}
.beauty-technorati:hover {
background-position:-700px bottom !important;
}
.beauty-myspace {
background-position:-200px top !important;
}
.beauty-myspace:hover {
background-position:-200px bottom !important;
}
.beauty-twitter {
background-position:-350px top !important;
}
.beauty-twitter:hover {
background-position:-350px bottom !important;
}
.beauty-facebook {
background-position:-450px top !important;
}
.beauty-facebook:hover {
background-position:-450px bottom !important;
}
.beauty-mixx {
background-position:-250px top !important;
}
.beauty-mixx:hover {
background-position:-250px bottom !important;
}
.beauty-script-style {
background-position:-400px top !important;
}
.beauty-script-style:hover {
background-position:-400px bottom !important;
}
.beauty-designfloat {
background-position:-550px top !important;
}
.beauty-designfloat:hover {
background-position:-550px bottom !important;
}
.beauty-syndicate {
background-position:-150px top !important;
}
.beauty-syndicate:hover {
background-position:-150px bottom !important;
}
.beauty-email {
background-position:-753px top !important;
}
.beauty-email:hover {
background-position:-753px bottom !important;
}

</style>


Step Tree

Find this code;

<data:post.body/>

and then paste this code BELOW/AFTER it

<b:if cond='data:blog.pageType == "item"'>
<div class='beauty-bookmarks'>
<ul class='socials'>
<li class='beauty-delicious'><a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='beauty-digg'><a expr:href='" http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='beauty-technorati'><a expr:href='" http://technorati.com/faves?add=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='beauty-reddit'><a expr:href='" http://www.reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='beauty-stumble'><a expr:href='" http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='beauty-designfloat'><a expr:href='"http://www.designfloat.com/submit.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='beauty-facebook'><a expr:href='" http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='beauty-twitter'><a expr:href='" http://twitthis.com/twit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='beauty-furl'><a expr:href='" http://www.furl.net/storeIt.jsp?u=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='beauty-syndicate'><a href='http://feeds.feedburner.com/your feed name here' title='Subscribe to RSS'/></li>
<li class='beauty-email'><a expr:href='" mailto:?subject=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
</ul>
<span class='beauty-rightside'/></div>
</b:if>

Change the blue code with your blog feed. You may of course remove any button code, if you do not want to show it.

Now save the template.

That's it, and you're done.

How To Add A Comment Form Below Your Post

noreply@blogger.com (shraqshaq) — Thu, 28 May 2009 16:32:00 +0000

Before you start with this hack, it'll be wise to make a backup for your template first.

To start with this tweak, follow the guide below;

To enable inline comments for your Blogger powered blog, you need to log into your Dashboard -> Settings -> Comments -> Comment form placement setting:

Check the setting for "Embedded below post" which will enable the display of the comment form below your blog posts.

Then, go to Layout -> Edit HTML in your blog's dashboard and check the "Expand widget templates" box. Then search for this code:

<b:include data='post' name='comments'/>

after this line, add the following line of code:

<b:include data='post' name='comment-form'/>

it'll look like this;

Then save your template. This method adds the required code for the comment form without having to alter the whole comment area.

You can see this comment form below this post. Using this comment form allows readers to comment using their Google account, OpenID, Name/URL and all of the settings previously available when using a pop-up or full page comment form (depending on the settings you have chosen).

Please let me know what you think of this tweak by leaving your comments below.

Affiliate Signup Form

noreply@blogger.com (shraqshaq) — Tue, 26 May 2009 20:45:00 +0000

How To Configure The Top 468x60 AdSense

noreply@blogger.com (shraqshaq) — Tue, 26 May 2009 07:07:00 +0000

Don't like the top AdSense (468x60) on top of your post? Want to change it with another code or maybe you want to remove it permanently. If you would like to do that, just follow step by step guide below:

Step One

From your Dashboard -> Layout -> Edit HTML

search for this code : <div id='ga-ads'> and there will be AdSense code below it. See the screenshot below.

From there, do whatever you want with it. Just delete the code if you want to remove it or replace it with another code at the same place. Remember, Preview it first and if everything is in order, then Save it.

Good luck.

How To Add "Read more" On Blog Post

noreply@blogger.com (shraqshaq) — Mon, 25 May 2009 13:39:00 +0000

This is pretty good hack just to add "Read more" link to your blog post, when people want to read the rest of the post, they can click a “read more” link. With this hack, you can choose to display a select amount of text from the beginning of each post as a teaser instead of showing the entire post on the front page of your blog.

First of all you need to edit your existing code so I recommend that you create a backup of your template just in case something goes wrong.

Now, let's just follow step by step guide below;

Step One

Go to Layout menu and then select Edit HTML , then click on the “Expand Widget Template” box.

Now, search this code .

<data:post.body/>

(If you're using Firefox just go to Edit --> Find. A new panel will appear and all you have to do is just copy the code () and paste it on the box. If the code is available, it will be highlighted with the green color.)

Step Two

Add the following code below the <div class='post-header-line-1'/>

<b:if cond='data:blog.pageType == "item"'> <style>.fullpost{display:inline;}</style> <p><data:post.body/></p> <b:else/> <style>.fullpost{display:none;}</style>

Now let’s add one more bit of code which will actually create the “read more” link in your post. This code will go below the <data:post.body/> tag so copy the following and paste it in.

<b:if cond='data:blog.pageType != "item"'><br /> <a expr:href='data:post.url'>Read more...</a> </b:if> </b:if>

The result should look like this:

Here’s the updated code block you just worked on all put together:

Try to Preview your theme first, and if everything is ok click to Save Template.

Step Three
(Add a Class Tag in Your Default Post Template)

Navigate in your Blogger account to Settings -> Formatting -> Post Template. You’re going to paste in the following code:

<span class="fullpost">
</span>

Keep the spaces. After you save this, it will look like this:

Step Four
(Create A New Post)

When you click on the “Posting” tab, you’ll notice that the post text area is now pre-populated with the <span class="fullpost"> and </span> tags. If not, then you didn’t save it properly.

When writing your new post, anything you put above the <span class="fullpost"> tag will be the teaser text. The main body of your post needs to go in between the <span class="fullpost"> and </span> tags in order for the “read more…” link to work properly.

Publish or preview your post to see the “read more” link working or not on your blog. If it doesn’t show up for some reason, go back and run through the steps again.

How To Setup Top Tabs On AdsTheme Blogger Template

noreply@blogger.com (shraqshaq) — Wed, 13 May 2009 05:32:00 +0000

Follow the step by step below;

Step One

Log on to your blogger account, go to Layout --> Page Element --> click on "Edit" on your Header ad Banner widget. (see image below)

Step Two

A new window will popup "Configure Link List". You can edit everything in here. (see image below).

Remember to click on "ADD LINK" each time you finish add link and site name and then click on "SAVE" button.

Step Three
Refresh your you blog, and the new link will appear on "Top Tabs" plus "Home" button. (see image below)

Good luck.