Tech Zone: Blogger Tips

Showing posts with label Blogger Tips. Show all posts

August 30, 2009

Cool NAVIGATION BAR for blogger

August 30, 2009

anand

Navigation bar is a set of links to other Web pages in a Web site. For example, navigation bars are usually located across the top or down the side of a page and contain direct links to the major sections within the Web site. Navigation bars can be automatically maintained and generated by using Web Site Designer.

Navigation bars really help the visitor to access different pages of the website while remaining on the same page. It makes the accessibility easier to the visitors. It often happens that some good Blogger templates don’t have navigation bar. It generates a reason to discard the template. Well, don’t worry I have a great way to design a Blogger Navigation Bar for your Blog. Just follow the steps and enjoy a COOL Navigation Bar.

steps:

Login to your blogger Account
Navigate: layout>Edit HTML
Mark Check Box “expand widget”
Find the code ]]></b:skin>
Just before this code place the following CSS code

#top_bar {height:32px; background:transparent ; width:auto;}
#top_bar p{border:0; margin:0; padding:0; margin:0 auto; width:960px;}
#top_bar a:link, #top_bar a:visited{display:block; float:left; border-right:solid 1px #7FABC4; padding:0 10px; color:#FFFFFF; font-size:11px; height:20px; line-height:20px; margin-top:6px;}

6. Now you are required to place the following code snippet where ever you want to place the Navigation bar ( generally it’s placed below the header section")

<div id='top_bar'><p>
<a class='tabbed-bar' href=’#’>NAME</a>
<a class='tabbed-bar' href=’#’>NAME</a>
<a class='tabbed-bar' href=’#’>NAME</a>
<a class='tabbed-bar' href=’#’>NAME</a>
<a class='tabbed-bar' href='#’>NAME</a>
</p></div>

Replace '”#” with the link you want and replace “NAME’ with the Web page name

NOTE: Before doing this make sure to take a backup of the template you are previously using.

Technorati Tags: blogger,CSS,Navigation bar,HTML

July 11, 2009

Start Blogging on blogger

July 11, 2009

anand

I have uploaded a Video to illustrate the process of starting the journey of blogging . In the Following video the illustration is quite easy to understand and execute it thereafter. I, feel the pain a person thinks to start blogging and surfs here and there to know the process, so I have uploaded a video that illustrates the process in very lucid way. So start blogging with new ideas, share and gain knowledge..

Hopefully this post helped the persons thinking to blog on blogger.

Technorati Tags: blgger,start blogging,blog

June 27, 2009

Blogger Tips & Tricks

June 27, 2009

anand

Adding widgets to blogger plays a Great role in optimizing Blogger Blogs. These are done by hacking the blogger template code snippets. Perhaps, not the experts, but the beginners in blogging must be wondering about "moving any bar", adding "recent comment" widget, adding "recent posts" etc. These modifications can also done by any beginner in blogging world.

I am happy to share a great site I found which have all this hacks/techniques to bring about significant changes assembled together. Now, you don't have to surf crazily to get those widgets installed on your blogger blogs.

Some of the Tips and Tricks are as follows

1. Expandable Posts or Read More Hack

2. Recent Posts Widget

3. Recent Comment Widget

4. Top Commentators Widget

5. Remove Label Post Count

6. Add Page Element to Header and Blog Posts

7. Sticky Posts in Blogger

8. Add Images or Icons to Sidebar Links

9. Remove NavBar in Blogger

10. Add Scrollbars to Blog Widgets

11. Add Favicon to Blogger URL

12. Simple Search Widget

13. Wrap Adsense Ads in Post Body

14. Special Effects for Peekaboo Posts

15. Page Navigation Hack for Blogger.......

More are there with detailed explanations in the site below:

50 Amazing Blogger Tricks & Hacks

Technorati Tags: blogger tips,blogger,widgets,expandable post,recent comment widget,recent post widget,label,sidebar,Adsense,Sticky post

Add “Email Me” link html/javascript for your webpage/blog

anand

Adding email me link to blog/site helps the visitors to contact the author. In this way author gets to know the need and query of the visitor better. This can help the webmaster to generate traffic. The more a author of blog/site become convergent to his visitors more is the probability of traffic to his webpage.

However, just putting the email address on the site like xyz@gmail.com invites the spammers to get your email id. No sooner do they get your ID than your inbox is flooded with unwanted mails.

So, why not think of a way which lets the good readers contact you and not the Spammers. Don't worry I have a way to keep the spammers away as a cow who keeps the flies away from her body using her tail....Sorry, I was just joking.

So here is the way..

Text Link:

Suppose,your email id is xyz@gmail.com ,here is the code you have to add

<a href="mailto:xyz@gmail.com">Email me </a>

Image link:

Suppose,if you want the visitors to email you by clicking on an image like the below one

First you have to upload your picture to some image hosting services.They will give a direct link for the uploaded image.Take a note of it.

<a href="mailto:abc@gmail.com"><img src="http://i592.photobucket.com/albums/tt10/anand_chauhan/email.gif" alt="Email me" width="120" height="57" border="0" /></a>

I have used this link :

http://i592.photobucket.com/albums/tt10/anand_chauhan/email.gif

you may use this link or get another by uploading your picture to image hosting sites like "Photobucket" etc.

Technorati Tags: Email me Link,Email,Javascript,html,photobucket,mail,albums,webpage

June 26, 2009

Add Tweet Button In Your Post

June 26, 2009

anand

Twitter is one the most famous social networking site where people meet and share their thoughts. People get to know each other and interact online. It is nowadays one of the most efficient media where one can use its networking power to pull traffic to their respective sites, blogs or splash pages. In twitter.com one is just required to follow people who bear like mindedness and get followed by similar people. Personally I prefer twitter.com more than any social networking sites.

To pull traffic from twitter I have utility to explore. Its called "tweet button". It facilitates the visitors to share a certain post or article on your blog by just a single click. The button comes in two format: compact and full.

visit the site Tweetme for detailed specification.

To add the tweet me button in blogger blogs I have illustrated the process in best way I could have.

Before following the illustration download the full template as precautionary major

Process:

Layout>> edit HTML

Mark the "expand widget" box.

Find for the snippet <data:post.body>

paste the below code just above this code

For FULL MODE

<div style='float:right; margin-left:10px;'>
<script type='text/javascript'>
tweetmeme_url = '<data:post.url/>';
</script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>
</div>

For COMPACT MODE

<div style='float:right; margin-left:10px;'>
<script type="text/javascript">
tweetmeme_style = 'compact';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
</div>

Preview the template, if there is no error then save the template and Tweet crazily....

If you are really helped by this post then tweet me please.

Technorati Tags: Blogger code,Blogger tips,Twitter,widget,javascript,retweet button,tweet button

June 23, 2009

Add Tag Cloud In Blogger Blog

June 23, 2009

anand

TAG CLOUDI wondered a lot about having a tag cloud widget in my blogger blog. I ultimately, after a huge Google organic search got my self a tag cloud in my blog. I would like to share the same with you all.

First of all login to your Blogger account and then follow this path layout>> add widget

Then select the "label" option from the window. click save and view the blog.

Now again follow the path layout>> Edit HTML
Check the "expand widget" box

Search for the line

<b:widget id='Label1' locked='false' title='Tags' type='Label'>

in the template code or find for the word "label" in the template code as the code may vary.

*Replace the code with the following code snippet

<b:widget id='Label1' locked='false' title='Tags' type='Label'> <b:includable id='main'> <b:if cond='data:title'> <h2><data:title/></h2> </b:if> <div class='widget-content' style='text-align: justify;'> <script type='text/javascript'> /* Simple Blogger Tag Cloud Widget by Raymond May Jr. http://www.compender.com Released to the Public Domain */ //Settings / Variables var max = 150; //max css size (in percent) var min = 70; //min css size (in percent) var showCount = false; // show counts? true for yes, false for no var minCount = 1; // what is the minimum count for a tag to be shown? 1 for all //Begin code: var range = max - min; //Build label Array var labels = new Array(); <b:loop values='data:labels' var='label'> labels.push("<data:label.name/>"); </b:loop> //URLs var urls = new Array(); <b:loop values='data:labels' var='label'> urls.push("<data:label.url/>"); </b:loop> //Counts var counts = new Array(); <b:loop values='data:labels' var='label'> counts.push("<data:label.count/>"); </b:loop> //Number sort funtion (high to low) function sortNumber(a, b) { return b - a; } //Make an independant copy of counts for sorting var sorted = counts.slice(); //Find the largest tag count var most = sorted.sort(sortNumber)[0]; //Begin HTML output for (x in labels) { if(x != "peek" && x != "forEach" && counts[x] >= minCount) { //Calculate textSize var textSize = min + Math.floor((counts[x]/most) * range); //Show counts? if(showCount) { var count = "(" + counts[x] + ")"; }else{ var count = ""; } //Output document.write("<span style='font-size:" + textSize + "%'><a href='" + urls[x] + "' style='text-decoration:none;'>" + labels[x] + count + "</a></span> " ); } } </script> </div> </b:includable>

</b:widget>

Save the template and you will be having your tag cloud

Technorati Tags: java script,blogger,blogger code,widget,tag

June 20, 2009

Create "Related Post" Section At End Of POST

June 20, 2009

anand

Another great hack for blogger.com is to dynamically generate at the end of every post a "Related Posts" section . The goal is to have your visitors stick around longer and take more of an interest in your blog.

It's very easy to do, but as with every modification to the template be very careful.

For Template code modification process visit How To Modify your Template Code?

Look for the code

               
<data:post.body/>

After that place this code:

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

<div class='similiar'>





<div class='widget-content'>

<h3>Related Posts by Categories</h3>

<div id='data2007'/><br/><br/>

<div id='hoctro'>

Widget by <u><a href='http://hoctro.blogspot.com'>Hoctro</a></u> | <u><a href='http://www.jackbook.com/' title='Related Posts on Blogger Modified by JackBook.Com. Read More?'>Jack Book</a>. Brought to you by <a href="http://bloggerblackhatseo.blogspot.com">Blogger SEO</a>.</u>

</div>

<script type='text/javascript'>

var homeUrl3 = "<data:blog.homepageUrl/>";

var maxNumberOfPostsPerLabel = 4;

var maxNumberOfLabels = 10;

maxNumberOfPostsPerLabel = 100;

maxNumberOfLabels = 3;

function listEntries10(json) {

var ul = document.createElement('ul');

var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ?

json.feed.entry.length : maxNumberOfPostsPerLabel;

for (var i = 0; i <>

var entry = json.feed.entry[i];

var alturl;

for (var k = 0; k <>

if (entry.link[k].rel == 'alternate') {

alturl = entry.link[k].href;

break;

}

}

var li = document.createElement('li');

var a = document.createElement('a');

a.href = alturl;

if(a.href!=location.href) {

var txt = document.createTextNode(entry.title.$t);

a.appendChild(txt);

li.appendChild(a);

ul.appendChild(li);

}

}

for (var l = 0; l <>

if (json.feed.link[l].rel == 'alternate') {

var raw = json.feed.link[l].href;

var label = raw.substr(homeUrl3.length+13);

var k;

for (k=0; k<20; label =" label.replace(">

var txt = document.createTextNode(label);

var h = document.createElement('b');

h.appendChild(txt);

var div1 = document.createElement('div');

div1.appendChild(h);

div1.appendChild(ul);

document.getElementById('data2007').appendChild(div1);

}

}

}

function search10(query, label) {

var script = document.createElement('script');

script.setAttribute('src', query + 'feeds/posts/default/-/'

+ label +

'?alt=json-in-script&callback=listEntries10');

script.setAttribute('type', 'text/javascript');

document.documentElement.firstChild.appendChild(script);

}

var labelArray = new Array();

var numLabel = 0;

<b:loop values='data:posts' var='post'>

<b:loop values='data:post.labels' var='label'>
textLabel = "<data:label.name/>";

var test = 0;

for (var i = 0; i <>

if (labelArray[i] == textLabel) test = 1;

if (test == 0) {

labelArray.push(textLabel);

var maxLabels = (labelArray.length <= maxNumberOfLabels) ?

labelArray.length : maxNumberOfLabels;

if (numLabel <>

search10(homeUrl3, textLabel);

numLabel++;

}

}

</b:loop>

</b:loop>

</script>

</div>

</div>

</b:if>

SAVE THE TEMPLATE AND SEE THE "RELATED POST" SECTION AT THE END OF YOUR POST....

Technorati Tags: Java script,blogger code,blogger,widget,posts,templates

June 19, 2009

How To Modify your Template Code?

June 19, 2009

anand

Many newbies to blogging world find difficult to tweak with their blogger template code. I, once faced the same music. I thought how people can modify their Blogger's template Code. Ha Ha!! Wisdom comes by sufferance. I tried a lot and discovered the process and felt to share with the new Bloggers, Hope my endeavor will benefit my visitors

Here is step by step description of Template's Code Modification

Steps

Login to your Blogger Account
click "layout"
Click "Edit Html"
check the box "Expand widget"
press Ctrl+f, if using Mozilaa to modify a certain code snippet, otherwise copy the whole code in notepad and then find the particular snippet by using the "find" option from "Edit menu"
Thus, all is done ..save the template after Modication or replacement

A SEO Optimization Blogspot Meta Tag

anand

Here I have a Meta Tag for Google SEO. Its really very easy to change the Blogspot meta tag so that your blog becomes Google Optimized. All you are required to replace a small code snippet within your "Template Code". To know how to modify or tweak template code follow the link "How To Tweak your template Code For Optimization". Here is the small trick to catch the attention of Google.

Replace the code

By The Snippet

***Besure to change my description, keywords and author name with yours.

Technorati Tags: blogger code,javascript,blogger,Meta,keywords,SEO

June 16, 2009

Tweak blogger title tags for SEO

June 16, 2009

anand

Few days ago I was wondering that how can I improve the rank of my blog in a easy step. I then thought that only way must be that we get optimized in search engines. Well, I have a bit idea about SEO technique. Now, I should unveil a chunk of a SEO technique.

There are two parts of SEO. "off page " and "on page" optimization.

"Off page" optimization stands on link building procedure. It is a sort of democratic way of popularizing your blog. It allows other site/blog include your site's link. It encourages traffic.

"On page" optimization deals with technique by which we understand how well we can optimize our blog for search engines. This includes keywords in your post titles, title tags, using header tags (h1, h2) and other tactics.

I have a small chunk of technique which can make your blog ranking improve.

It is well known fact that the topic which is searched appears on the first half of the web page title bar. This should be the real way or the optimized way. Unfortunately blogger don't have optimization technique already implemented. Below lies a perfect example of what I am trying to illustrate:

To do this I have a illustration( For Blogger) :

Steps:

Step 1: Login to blogger

Step 2: Click "layout"

Step 3: click "Edit Html"

Step 4: Find The code

Step 5: Replace the above Code by the Following code

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

<title><data:blog.title/></title>

<b:else/>

<title><data:blog.pageName/> | <data:blog.title/></title>

</b:if>

Step5: Save the template and view the blog, you will have a optimized blog

N.B: Do all the changings after taking backup of the previously uploaded template

Tech Zone

August 30, 2009

Cool NAVIGATION BAR for blogger

July 11, 2009

Start Blogging on blogger

June 27, 2009

Blogger Tips & Tricks

Some of the Tips and Tricks are as follows

50 Amazing Blogger Tricks & Hacks

Add “Email Me” link html/javascript for your webpage/blog

June 26, 2009

Add Tweet Button In Your Post

June 23, 2009

Add Tag Cloud In Blogger Blog

June 20, 2009

Create "Related Post" Section At End Of POST

June 19, 2009

How To Modify your Template Code?

A SEO Optimization Blogspot Meta Tag

June 16, 2009

Tweak blogger title tags for SEO

Subscribe

Get Updates Via e-Mail

Popular Posts

Recent Comments

Recent posts

Labels

Blog links

August 30, 2009

July 11, 2009

June 27, 2009

Some of the Tips and Tricks are as follows

June 26, 2009

June 23, 2009

June 20, 2009

June 19, 2009

June 16, 2009

Subscribe

Subscribe Here

Get Updates Via e-Mail

Popular Posts

Recent Comments

Recent posts

Labels

Blog links