How To Add Breadcrumb Navigation

Breadcrumb navigation is a form of navigation to our blog content, so breadcrumb navigation can help visitors more easily to browse the blog content. Usually breadcrumb navigation looks like this:

Browse >> Home >> Tricks >> How To Add Breadcrumb Navigation

Many webmasters said, you should add breadcrumb navigation into your blog, beside can help your visitors, Google likes blog that added breadcrumb navigation. So, why don't you start thinking to add bredcrumb navigation into your blog now??? If you want to add breadcrumb navigation, you can follow the steps below.

1. Log in to your blogger account
2. Go to Design --> Edit HTML
3. Check in the Expand Widget Templates box
4. Copy the code below, and paste above ]]></b:skin>

.breadcrumbs{padding:5px 5px 5px 0;margin:0;font-size:95%;line-height:1.4em;border-bottom:4px double #cadaef;}

=> You can change the color code here
5. Then, find <div class='post hentry uncustomized-post-template'> . Copy the code below.

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>
Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187;
<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != &quot;true&quot;'> , </b:if>
</b:loop>
</b:if> &#187; <data:post.title/>
</div>
</b:if>
</b:if>

=> You can change the words
after that, paste above <div class='post hentry uncustomized-post-template'> .
7. Done? Save it now!

How To Add Text Resizer In Blog

In this post, I will share to you about how to add text resizer in blog. The function of text resizer is to change the font size of the posts to be larger or smaller by click on the text resizer icon. If you want to add text resizer for your blog, you can follow the steps below.

1. Log in to your blogger account
2. Go to Design --> Edit HTML
3. Check in the Expand Widget Templates box
4. Copy the code below, and paste above ]]></b:skin>

.textsizernorm, .textsizerbig, .textsizerbigger, .textsizersmall {
padding-top: 20px;
-o-transition: font 2s ease-in;
-moz-transition: font 2s ease-in;
-webkit-transition: font 2s ease-in;
}
.textsizersmall{font-size:12px}
.textsizernorm{font-size:13px}
.textsizerbig{font-size:14px}
.textsizerbigger{font-size:15px; font-weight:bold}
span.sizer {
float: right;
text-align: center;
height: 20px;
width: 250px;
margin: 0 10px 10px 0;
background: #333366;
display: block;
font-size: 18px;
padding: 2px 10px;
color: #00CCFF;
text-shadow: 1px 1px 1px blue;
cursor: pointer;
border: 1px solid #eee;
font-family: Times New Roman;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: 1px 1px 6px #000;
-moz-box-shadow: 1px 1px 6px #000;
-webkit-box-shadow: 1px 1px 6px #000;display: block;
}
span.sizer:active {
border: 1px solid #555;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
background: #003399;
box-shadow:0px 0px 12px #000;
-moz-box-shadow:0px 0px 12px #000;
-webkit-box-shadow:0px 0px 12px #000;
margin-top: -1px;
}
.clr20 {clear: both; height: 20px;}

=> You can change the font size and font style
5. Then, find <data:post.body/> , after that add the code below, so the result will like this (the blue code are the code that you have to add)

<div class='textsizersmall' onclick='if (this.className==&quot;textsizersmall&quot;) { this.className=&quot;textsizernorm&quot; } else if (this.className==&quot;textsizernorm&quot;) { this.className=&quot;textsizerbig&quot; } else if (this.className==&quot;textsizerbig&quot;) { this.className=&quot;textsizerbigger&quot; } else if (this.className==&quot;textsizerbigger&quot;) { this.className=&quot;textsizersmall&quot; } else { this.className=&quot;textsizersnall&quot; }'><span class='sizer'>Text Resizer: Click for Resizer</span>
<div class="clr20"/>

<data:post.body/>

</div>

6. Now, you can save your work.

Kinds Of Text Area

Text area is a multi-line text input control. Text area formed by <textarea> tag. The function of text area is to give a frame for special words. But, there are many blogger/webmaster using text area for script box. There are many text area, so now I will give you example the kinds of text area.

Standard Text Area
Full Blog Tricks
<textarea>Full Blog Tricks</textarea>

Text Area that can set the widht and height
Full Blog Tricks
<textarea cols="20" rows="5">Full Blog Tricks</textarea>

Text Area with password style



<input type="password" value="Full Blog Tricks" />

Text Area with dashed line
Full Blog Tricks
<textarea cols="20" rows="5" style="border: 2px dashed ;">Full Blog Tricks</textarea>

Text Area with one click select all
Full Blog Tricks
<textarea cols="20" onclick="this.focus(); this.select();" rows="5">Full Blog Tricks</textarea>

Text Area with select all by mouse over (no click)

Full Blog Tricks

<div>
<form name="catatancuss">
<div align="left" style="margin-bottom: 0pt; margin-top: 0pt;">
<textarea ;="" cols="55" name="txt" onmouseover="this.form.txt.select()" readonly="readonly" rows="100" style="height: 85px; width: 185px;">Full Blog Tricks</textarea></div>
</form>
</div>

Text Area with Select All button

Full Blog Tricks

<div>
<form name="copy">
<div align="center">
<input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Select All" /> </div>
<div align="center">
</div>
<div align="center">
<textarea cols="55" name="txt" rows="100" style="height: 85px; width: 185px;" wrap="VIRTUAL">Full Blog Tricks</textarea></div>
</form>
</div>

Colorful Text Area
Full Blog Tricks
<textarea cols="20" name="code" rows="3" style="-moz-border-radius: 10px; background: #BFFAFF; border-bottom: 4px solid #40FF1F; border-left: 4px solid #FFE900; border-right: 4px solid #40FF1F; border-top: 4px solid #FFE900; color: red; line-height: 1.5em; padding: 5px;">Full Blog Tricks</textarea>

Full Blog Tricks
<textarea name="code" rows="3" cols="20" style="background: #FFDAAF; color: #7F4500; border: 2px ridge #7F4500; line-height: 1.5em; padding: 5px; -moz-border-radius-topleft: 15px; -moz-border-radius-bottomright: 15px;">Full Blog Tricks</textarea>


Full Blog Tricks
<textarea name="code" rows="3" cols="20" style="background:#FF000A; color:#fff; border:3px double #ffaf; line-height:1.5em; padding:5px;">Full Blog Tricks</textarea>

Full Blog Tricks
<textarea name="code" rows="3" cols="20" style="background: #EF0090; color: #FFEFF9; border: 3px dotted #FFEFF9; line-height: 1.5em; padding: 5px;">Full Blog Tricks</textarea>

Full Blog Tricks
<textarea name="code" rows="3" cols="20" style="background: #FBEFFF; color: #CA3DD9; border: 1px solid #CA3DD9; border-left: 20px solid #CA3DD9; line-height: 1.5em; padding: 5px; -moz-border-radius: 7px;">Full Blog Tricks</textarea>

You can use text area for your post or your widgets Hopefully useful... ^_^

Submit To 1000+ Search Engines

Submit to many search engines can increase our blog traffic. Because our blog will be known by many search engines. And, do you know? About 60% our blog traffic, usually came from search engines. So, why we don't use search engine to get more traffic easily? Special for Full Blog Tricks readers, I will give you list of websites for search engine submission.

1. www.searchengineoptimising.com (submit to 40 search engines)
2. www.submitexpress.com (submit to 40 search engines)
3. www.official.my (submit to 300 search engines)
4. www.submit-away.com (submit to 600 search engines)
5. www.submitshop.com ( submit to 100 search engines)

Hopefully useful...

How To Add Meta Tags

Meta tags are method to give some informations about a page, website, or blog. There are many meta tags that appropriate with standard of HTML 4.0 from W3C (World Wide Web Consortion), but actually that really used by search engine only 3 meta tags, that are description, keyword, dan robots. For the details, you can read the explanations of meta tags below.

Meta Description Tag
Meta Description Tag is used to gives a general overview about the contents of your webpages. The standard is about 150 characters. And try to this description can be sentences which were located at the beginning of your web page or blog. The example of meta description tag :

<meta name="description" content="Full Blog Tricks provides many blogger tricks, blogger hacks, blogger widgtets, and SEO tips."/>

If you don't use Meta Description Tag, some search engine like Google and Nothern Light usually use sentences which were located at the beginning of your web page or blog as a Meta Description Tag. And, if the earliest part of your blog is a menu, so the Meta Description Tag that will be display is like this:

Home | Article Request | About Me | Contact ... Full Blog Tricks provides many blogger tricks, blogger hacks, blogger widgtets, and SEO tips.

Meta Keywords Tag
Meta Keywords Tag is very important, because that's determining what keywords that can find a web page on search engines. Usually, the form of meta keywords tag is like this

<meta name="keywords" content="keyword1, keyword2, keyword3, ... " />

But there is wrote without comma like this

<meta name="keywords" content="keyword1 keyword2 keyword3 ..." />

Actually, the function is same. The purpose of comma just so the keywords are more readable. The important thing is don't repeat your keywods more than 3 times, because search engines will assume as spamming. And, you must not insert some keywords that unrelated with your blog. For example, your blog is about "blogger tricks" , so don't use "music" for your blog keywords.

Meta Robots Tag
The purpose of use meta robots tag is determining which pages can be index by spider and which page are not. The basic format of meta robots tag is

<meta name="robots" content="(index/noindex), (follow/nofollow)" />

If you want to spider index your home page and browse your links in your blog, you can use this command

<meta name="robots" content="index,  follow"/>

If you don't want spider browse your blog, you can use the command below

<meta name="robots" content="noindex,  nofollow"/>

So, how to add meta tags in blogger templates?

1. Log in to your blogger account
2. Go to Design --> Edit HTML
3. Find <title><data:blog.pageTitle/></title> or <head>
4. Paste the meta tags under <title><data:blog.pageTitle/></title>

<meta content='your description' name='description'/>
<meta content='keyword1, keyword2, keyword3, ...' name='keywords'/>
<meta content='index, follow' name='robots'/>

For example

<meta content='Full Blog Tricks provides many blogger tricks, blogger hacks, blogger widgtets, and SEO tips. ' name='description'/>
<meta content='blogger tricks, blogger hacks, SEO tips' name='keywords'/>
<meta content='noindex, nofollow' name='robots'/>

5. Save it, good luck!

Hidden Keyword Phrase Method

Hidden keyword are injecting keyword phrase into a template that unbeknown by the visitors or readers, but Search Engine will still can detected it. By using hidden keyword phrase method, your blog will has strong keyword, and maybe your blog will be the first in search engine. Just follow the steps below.

1. Log in to your blogger account
2. Go to Design --> Edit HTML , don't forget to backup your template first!
3. Copy the code below, and paste above ]]></b:skin>

#hidden-keyword {
float: left;
margin: -4500px;
padding: -3000px;
}

<div id="hidden-keyword">
<h1>
<a href="BLOG URL" title="BLOG KEYWORD">BLOG KEYWORD</a>
</h1>
</div>

=> Adjust the margin and padding with your blog template. You must see the preview, Are the keyword phrase still visible or not. If still visible, try to change the margin and padding without delete the sign (-)
For example :

#hidden-keyword {
float: left;
margin: -3000px;
padding: -2500px;
}

<div id="hidden-keyword">
<h1>
<a href="http://full-tricks.blogspot.com/" title="blogger tricks, blogger hacks, SEO tips">blogger tricks, blogger hacks, SEO tips</a>
</h1>
</div>

4. If the setting have finished, save your template now!

Off-Page Hidden Keyword Method

In this method, we will try to steal chance from habit of banner exchange which usually becomes habit of bloggers. As we know, banner / link exchange can increase our blog PageRank. So, if we want to increase our blog PageRank, this trick can be a good SEO weapon for our blog. Google

For banner design, I think that's same. Regardless the size of banner, animation or only a image, all the same in the eyes of Google. Google doesn't care about good or not our banner design, Google just read the HTML Script from our banner. Here the SEO strategy is running. Look at the script below!

<!-- Banner -->
<a href=BLOG URL><img border="0" alt ="BLOG KEYWORD" src="IMAGE URL"/></a>
<noscript><a href="BLOG URL" title="BLOG KEYWORD"><b>BLOG KEYWORD</b></a></noscript>
<!-- End Banner -->

For example :

<!-- Banner -->
<a href="http://full-tricks.blogspot.com"><img border="0" alt ="blogger tricks, blogger hacks, SEO tips" src="http://robots1996.fileave.com/besar.jpg"/></a>
<noscript><a href="http://full-tricks.blogspot.com" title="blogger tricks, blogger hacks, SEO tips"><b>blogger tricks, blogger hacks, SEO tips</b></a></noscript>
<!-- End Banner -->

In that script, we are using <noscript> tag, so that script can't see by internet users. From here, we can add some keywords from our blog. Spread the banner to your friend's blog, so your friends can put it on their blog. Hopefully Useful! ^_^

How To Make Headline News In Blog

As we know, headline news is a feature in TV stations wich usually located at the bottom. Usually, that's display some latest news. But in this case, because it's about blog, so the headline news display the recent posts of your blog. So, the visitors can watch the newest post of your blog. Now, if you want to add it into your blog, just follow the steps below.

1. Log in to your blogger account
2. Go to Design --> Page Elements --> Add Gadget
3. Choose HTML/Java Script
4. Copy the code below, and paste into the place

<script type="text/javascript">
var hn_url_blog = "http://full-tricks.blogspot.com";
var hn_jumlah_post = 5;
var hn_warna_latar = "#EEEEEE";
var hn_warna_garis = "#000000";
var hn_posisi = "top";
var hn_tampilkan_judul = true;
var hn_backlink = true;
</script>
<script src=" https://sites.google.com/site/fullblogtricks/javascript-sama-edit-html/headlinenews.js?attredirects=0&d=1 ">
</script>

=>Change with your blog address
=>Number of posts that you want to display
5. Save now

How To Make Blog Archive Widget With New Updates

If  previously I've posted about Make Scroll Blog Archive, now I will post the updates. Blog archive in our blog is very important, because when visitors are exploring our blog, then this blog archive must be present to our blog visitors to facilitate the visitors explore our blog. Well, in this time I will share you how to make blog archive widget with new updates. Just follow the steps below.

1. Log in to your blogger account
2. Go to Design --> Page Elements --> Add Gadget
3. Choose HTML/Java Script
4. Copy the code below and paste into the box

<script style="text/javascript" src="http://robots1996.fileave.com/blog%20archive.js"></script>
<script src="http://full-tricks.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>

=>Change full-tricks.blogspot.com with your blog address.
5. Done? Save it now!

How To Make Related Article In Blog

One way to increase AlexaRank is to make related article in our blog. So, our blog visitors can read another article in our blog and increase our blog's pageviews. This trick also has proven can increase traffic and maybe PageRank. Besides that, the visitors will stay longer in our blog, because they want to read another article. Now, to make related article in blog, you have to follow the steps below.

1. Log in to your blogger account
2. Go to Design --> Edit HTML
3. Then, check in the Expand Widget Templates box
4. Find this code : ]]></b:skin>  and add the code below, above ]]></b:skin>

.rbbox{border: 1px solid rgb(192, 192, 192);padding: 5px;
background-color: #f0f0f0;-moz-border-radius:5px; margin:5px;}
.rbbox:hover{background-color: rgb(255, 255, 255);}

5. After that, find this code : <data:post.body/>

    => If you are using "Read More", there are 2 <data:post.body/>, choose the first.

6. Then, add the code below , and put under <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<br/>
<br/>
<H2>Related Articles:</H2>
<div class='rbbox'>
<div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
<div id='albri'/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 10;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
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 &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;albri&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
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 = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
<script type="text/javascript">RelPost();</script>
</div>
</b:if>

7. Save it now!