Blogger Teacher

Indose Blogger Template Installations Guide

2012-05-08T00:08:00.003-07:00

Template Name: Indose Blogger Template
By : www.freebloggertemplate.info
Download link: Click here

# SETUP TOP MENU NAVIGATION
Go to "Edit HTML" page
Search the codes like below

<ul id='pagemenu'>
<li><a href='/'>Home</a></li>
<li><a href='http://indose-fbt.blogspot.com/p/test-static-page.html'>Test Static Page</a></li>
<li><a href='#'>EDIT</a></li>
<li><a href='#'>EDIT</a></li>
<li><a href='#'>EDIT</a></li>
</ul>

Change "blue text" with your link anchor/url
Change "red text" with your text anchor

# SETUP TOP RSS & TWITTER
Go to "Edit HTML" page
Search the codes like below

<div class='span-3 feedtwitter'>
<a href='feeds/posts/default'><img src='http://2.bp.blogspot.com/-Kyx6WfpZvsc/T6i7eYrKIUI/AAAAAAAACgM/EuhRDcwJTYg/s1600/rss.png' style='margin:0 4px 0 0;'/></a>  
<a href='#' title='Follow me on Twitter!'><img src='http://3.bp.blogspot.com/-7G6bs9F2baQ/T6i-qYrnwcI/AAAAAAAAChY/kmRDlTrKtqs/s1600/twitter1.png' style='margin:0 4px 0 0; ' title='Follow me on Twitter!'/></a>
</div>

Change "blue text" with your link anchor/url

# SETUP CATEGORY MENU NAVIGATION
Go to "Edit HTML" page
Search the codes like below

<ul id='nav'>
<li class='current-cat'><a href='#'>Home</a></li>
<li><a href='#'>Browsers</a></li>
<li><a href='#'>Computers</a></li>
<li><a href='#'>Featured</a></li>
<li><a href='#'>News</a></li>
<li><a href='#'>Parent Category</a>
<ul class='children'>
<li><a href='#'>Child Category 1</a>
<ul>
<li><a href='#'>Sub Child Category 1</a></li>
<li><a href='#'>Sub Child Category 2</a></li>
<li><a href='#'>Sub Child Category 3</a></li>
</ul>
</li>
<li><a href='#'>Child Category 2</a></li>
<li><a href='#'>Child Category 3</a></li>
<li><a href='#'>Child Category 4</a></li>
</ul>
</li>
<li><a href='#'>Web Design</a></li>
</ul>

Change "blue text" with your link anchor/url
Change "red text" with your text anchor

# SETUP SLIDE FEATURE
It's up to you want to use the slide feature or not. To add the slide feature, just go to "Page Elements", "Add a Gadget"(see picture below), choose "HTML/JavaScript", the copy the code below then paste it.

<div id="slider">
<div id="slider1">
<script style="text/javascript">
var showpostthumbnails_gal  = true;
var showpostsummary_gal   = true;
var random_posts         = false;
var numchars_gal   = 150;
var numposts_gal   = 10;
function showgalleryposts(json) {
var numPosts = json.feed.openSearch$totalResults.$t;
var indexPosts = new Array();
document.write('<ul style="overflow:hidden;">');
for (var i = 0; i < numPosts; ++i) {
indexPosts[i] = i;
}
if (random_posts == true){
indexPosts.sort(function() {return 0.5 - Math.random()});
}
if (numposts_gal > numPosts) {
numposts_gal = numPosts;
}
for (i = 0; i < numposts_gal; ++i) {
var entry_gal = json.feed.entry[indexPosts[i]];
var posttitle_gal =  entry_gal.title.$t;
for (var k = 0; k <  entry_gal.link.length; k++) {
if ( entry_gal.link[k].rel == 'alternate') {
posturl_gal =  entry_gal.link[k].href;
break;
}
}
if ("content" in entry_gal) {
var postcontent_gal = entry_gal.content.$t
}
s = postcontent_gal;
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 != "")) {
var thumburl_gal = d
} else var thumburl_gal = 'http://2.bp.blogspot.com/-6Jvg9AizDHw/TmjvvWpWV8I/AAAAAAAABkY/9KghyuLyG2I/s1600/FBTMaG%2BV1.jpg';
document.write('<li><div id="slide-container"><span class="slide-desc"><h2 style="margin:10px 0px;">');
document.write(posttitle_gal + '</h2>');
var re = /<\S[^>]*>/g;
postcontent_gal = postcontent_gal.replace(re, "");
if (showpostsummary_gal == true) {
if (postcontent_gal.length < numchars_gal) {
document.write(postcontent_gal);
document.write('</span>')
} else {
postcontent_gal = postcontent_gal.substring(0, numchars_gal);
var quoteEnd_gal = postcontent_gal.lastIndexOf(" ");
postcontent_gal = postcontent_gal.substring(0, quoteEnd_gal);
document.write(postcontent_gal + '...');
document.write('</span>')
}
}
document.write('<a href="' + posturl_gal + '"><img src="' + thumburl_gal + '" width="610px" height="320px"/></a></div>');
document.write('</li>');
}
document.write('</ul>');

}
</script>

<script style="text/javascript">
var numposts_gal = 4;
var numchars_gal = 150;
var random_posts = false; // random posts
</script>
<script src="/feeds/posts/default/index_orderby_published_ampampalt_json_in_script_ampampcallback_showgalleryposts_ampampmax_results_999999.html"></script>
</div></div>

var numposts_gal = 4; <-- Number of content/posts to show.
var numchars_gal = 150; <-- Number of characters of summary.
var random_posts = false; <-- set it "true" for random posts

#SETUP SIDEBAR BANNER 125x125
Go to "Edit HTML" page Search the codes like below

<div class='sidebaradbox'>
<a href='#' target='_new'><img class='ad125' src='http://4.bp.blogspot.com/--s73UwHnxAA/T6i7S_NsvTI/AAAAAAAACeo/uz7CSdvG8Y0/s1600/banner125.gif'/ampgtamplt/aampgt_ltbr_/gtamplta_href/index.html'#' target='_new'><img class='ad125' src='http://4.bp.blogspot.com/--s73UwHnxAA/T6i7S_NsvTI/AAAAAAAACeo/uz7CSdvG8Y0/s1600/banner125.gif'/></a> 
</div>

Change "#" with your link anchor/url
Change "red text" with your banner image url

Stylish-O Blogger Template Installations Guide

2012-04-27T21:31:00.004-07:00

Template Name: Stylish-O Blogger Template
By : www.freebloggertemplate.info
Download link: Click here

# SETUP TOP MENU NAVIGATION
Go to "Edit HTML" page
Search the codes like below

<ul class='sf-menu' id='menu-main'>
<li><a href='/index.html'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='http://stylisho-fbt.blogspot.com/p/test-static-page.html'>Test static page</a></li>
</ul>

Change "blue text" with your link anchor/url
Change "red text" with your text anchor

# SETUP CATEGORY MENU NAVIGATION
Go to "Edit HTML" page
Search the codes like below

<ul>
<li><a href='#'>Item 1</a></li>
<li><a href='#'>Folder 0</a>
<ul>
<li><a href='#'>Sub Item 1.1</a></li>
<li><a href='#'>Sub Item 1.2</a></li>
<li><a href='#'>Sub Item 1.3</a></li>
</ul>
</li>
<li><a href='#'>Folder 1</a>
<ul>
<li><a href='#'>Sub Item 1.1</a></li>
<li><a href='#'>Sub Item 1.2</a></li>
<li><a href='#'>Sub Item 1.3</a></li>
<li><a href='#'>Sub Item 1.4</a></li>
</ul>
</li>
<li><a href='#'>Item 3</a></li>
<li><a href='#'>Folder 2</a>
<ul>
<li><a href='#'>Sub Item 2.1</a></li>
<li><a href='#'>Folder 2.1</a>
<ul>
<li><a href='#'>Sub Item 2.1.1</a></li>
<li><a href='#'>Sub Item 2.1.2</a></li>
<li><a href='#'>Folder 3.1.1</a>
<ul>
<li><a href='#'>Sub Item 3.1.1.1</a></li>
<li><a href='#'>Sub Item 3.1.1.2</a></li>
</ul>
</li>
<li><a href='#'>Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>Item 4</a></li>
</ul>

Change "#" with your link anchor/url
Change "red text" with your text anchor

# SETUP SLIDE FEATURE
It's up to you want to use the slide feature or not. To add the slide feature, just go to "Page Elements", "Add a Gadget"(see picture below), choose "HTML/JavaScript", the copy the code below then paste it.

<div id="slider">
<div id="slider1">
<script style="text/javascript">
var showpostthumbnails_gal  = true;
var showpostsummary_gal   = true;
var random_posts         = false;
var numchars_gal   = 150;
var numposts_gal   = 10;
function showgalleryposts(json) {
var numPosts = json.feed.openSearch$totalResults.$t;
var indexPosts = new Array();
document.write('<ul style="overflow:hidden;">');
for (var i = 0; i < numPosts; ++i) {
indexPosts[i] = i;
}
if (random_posts == true){
indexPosts.sort(function() {return 0.5 - Math.random()});
}
if (numposts_gal > numPosts) {
numposts_gal = numPosts;
}
for (i = 0; i < numposts_gal; ++i) {
var entry_gal = json.feed.entry[indexPosts[i]];
var posttitle_gal =  entry_gal.title.$t;
for (var k = 0; k <  entry_gal.link.length; k++) {
if ( entry_gal.link[k].rel == 'alternate') {
posturl_gal =  entry_gal.link[k].href;
break;
}
}
if ("content" in entry_gal) {
var postcontent_gal = entry_gal.content.$t
}
s = postcontent_gal;
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 != "")) {
var thumburl_gal = d
} else var thumburl_gal = 'http://2.bp.blogspot.com/-6Jvg9AizDHw/TmjvvWpWV8I/AAAAAAAABkY/9KghyuLyG2I/s1600/FBTMaG%2BV1.jpg';
document.write('<li><div id="slide-container"><span class="slide-desc"><h2 style="margin:10px 0px;">');
document.write(posttitle_gal + '</h2>');
var re = /<\S[^>]*>/g;
postcontent_gal = postcontent_gal.replace(re, "");
if (showpostsummary_gal == true) {
if (postcontent_gal.length < numchars_gal) {
document.write(postcontent_gal);
document.write('</span>')
} else {
postcontent_gal = postcontent_gal.substring(0, numchars_gal);
var quoteEnd_gal = postcontent_gal.lastIndexOf(" ");
postcontent_gal = postcontent_gal.substring(0, quoteEnd_gal);
document.write(postcontent_gal + '...');
document.write('</span>')
}
}
document.write('<a href="' + posturl_gal + '"><img src="' + thumburl_gal + '" width="480px" height="300px"/></a></div>');
document.write('</li>');
}
document.write('</ul>');

}
</script>

<script style="text/javascript">
var numposts_gal = 4;
var numchars_gal = 150;
var random_posts = false; // random posts
</script>
<script src="/feeds/posts/default/index_orderby_published_ampampalt_json_in_script_ampampcallback_showgalleryposts_ampampmax_results_999999.html"></script>
</div></div>

var numposts_gal = 4; <-- Number of content/posts to show.
var numchars_gal = 150; <-- Number of characters of summary.
var random_posts = false; <-- set it "true" for random posts

# SETUP PAGE PAGINATION
http://www.blogteacher.net/2012/04/how-to-add-blogger-page-pagination.html

How to add Blogger Page Pagination

2012-04-27T21:16:00.001-07:00

#Go to "EDIT HTML"
Copy the css code below and paste this just before the closing </b:skin>

.showpageArea {
padding:10px;
}
.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #ccc;
margin:0 5px;
padding:5px;
background:#fff;
}
.showpageNum a:hover {
border: 1px solid #ccc;
background-color:#f0f0f0;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #ccc;
background: #f0f0f0;
margin:0 5px;
padding:5px;
}
.showpageOf {
text-decoration:none;
padding:5px;
margin: 0 5px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #ccc;
padding:5px;
background:#fff;
}
.showpage a:hover {
text-decoration:none;
background:#f0f0f0;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333;
}

#Copy the code below and paste this just before the closing </body>

<!--Page Navigation Starts-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
var pageCount=3;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://fbt.googlecode.com/files/blogger_pagenavi_min.js' type='text/javascript'/>
</b:if>
</b:if>
<!--Page Navigation Ends -->

var pageCount = 3; the number of posts displayed on each page. The "pageCount" value and "Number of posts on main page" value (Present in the Design > Page Elements > Blog Post) is same.
var displayPageNum = 5; the number of links which are displayed.

#Check "Expand Widget Templates" and search for

'data:label.url'

Replace It with:

'data:label.url + "?&max-results=3"'

Make sure the Number is same as the value of "pageCount" value

#Save

Simply Delicious Blogger Template Installations Guide

2012-04-10T05:42:00.002-07:00

Template Name: Simply Delicious Blogger Template
By : www.freebloggertemplate.info
Download link: Click here

# SETUP TOP MENU NAVIGATION
Go to "Edit HTML" page
Search the codes like below

<ul id='navigation'>
<li><a href='/index.html'>Home</a></li>
<li><a href='#'>Category</a>
<ul>
<li><a href='#'>Label 1</a></li>
<li><a href='#'>Label 2</a></li>
<li><a href='#'>Label 3</a></li>
<li><a href='#'>Label 4</a></li>
<li><a href='#'>Label 5</a></li>
</ul>
</li>
<li><a href='http://simplydelicious-fbt.blogspot.com/p/test-static-page.html'>Test Static Page</a></li>
<li><a href='#'>Subscribe</a>
<ul>
<li><a href='#' target='_blank'>Twitter</a></li>
<li><a href='feeds/posts/default'>RSS Feed</a></li>
</ul>
</li>
</ul><!-- /#navigation -->

Change "blue text" with your link anchor/url
Change "red text" with your text anchor

# SETUP SOCIAL NETWORK ICONS AT BOTTOM
Go to "Edit HTML" page
Search the codes like below

<div id='icons'>
<a href='#' target='_blank'><img alt='Twitter' height='26' src='http://2.bp.blogspot.com/-GL9rD_XrMEc/T4QDN9dkkdI/AAAAAAAACWE/N_2RY33R7IQ/s1600/icon-twitter.png' width='26'/></a>
<a href='#' target='_blank'><img alt='Facebook' height='26' src='http://2.bp.blogspot.com/-aLyGYnl5f48/T4QBcFijpNI/AAAAAAAACUk/Lc38TMXQ2gI/s1600/icon-facebook.png' width='26'/></a>
<a href='#' target='_blank'><img alt='Dribbble' height='26' src='http://2.bp.blogspot.com/-ygnta5OWDzo/T4QBa07AaDI/AAAAAAAACUc/hnsLI4h77gE/s1600/icon-dribbble.png' width='26'/></a>
<a href='#' target='_blank'><img alt='Tumblr' height='26' src='http://1.bp.blogspot.com/-qcerlqbuDuQ/T4QBi-Ob6FI/AAAAAAAACU8/-fdI6qHQRMU/s1600/icon-tumblr.png' width='26'/></a>
<a href='#' target='_blank'><img alt='Last FM' height='26' src='http://1.bp.blogspot.com/-hMAVTq_TIE4/T4QDMOP6gNI/AAAAAAAACV0/ew9K9W9JKa0/s1600/icon-lastfm.png' width='26'/></a>
<a href='#' target='_blank'><img alt='Flickr' height='26' src='http://1.bp.blogspot.com/-yy3QuxNWiAg/T4QBe2M2gFI/AAAAAAAACUs/HARfuHiOAL4/s1600/icon-flickr.png' width='26'/></a>
<a href='#' target='_blank'><img alt='Behance' height='26' src='http://1.bp.blogspot.com/-dslR8Mlcw3o/T4QBZw8DoJI/AAAAAAAACUQ/he3kGn8mJGw/s1600/icon-behance.png' width='26'/></a>

</div><!-- /#icons -->

Change "#" with your social network url

# CHANGE DEFAULT IMAGE FOR POST WITH NO IMAGES
Go to "Edit HTML" page
Search this image url
http://4.bp.blogspot.com/--6gqxSC_1P4/T4QHfT0snFI/AAAAAAAACWo/mA7WKxLMsnY/s1600/017.jpg
just replace that url with your image url.

Blucent Blogger Template Installations Guide

2012-04-08T18:45:00.001-07:00

Template Name: Blucent Blogger Template
By : www.freebloggertemplate.info
Download link: Click here

# SETUP TOP MENU NAVIGATION
Go to "Edit HTML" page
Search the codes like below

<ul class='menu' id='dropmenu'>
<li id='home'><a href='/index.html' title='Home'>Home</a></li>
<li><a href='http://blucent-fbt.blogspot.com/p/test-static-page.html'>Test Static Page</a></li>
<li class='menu-item'><a href='#'>Dropdown Parent</a>
<ul class='sub-menu'>
<li><a href='#'>Child 1</a></li>
<li><a href='#'>Child 2</a>
<ul class='sub-menu'>
<li><a href='#'>Grand Child 1</a></li>
<li><a href='#'>Grand Child 2</a>
<ul class='sub-menu'>
<li><a href='#'>Grand Grand Child</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>

Change "blue text" with your link anchor/url
Change "red text" with your text anchor

# CHANGE RSS FEED URL into FEEDBURNER URL
Go to "Edit HTML" page
Search the codes like below
<a href='/feeds/posts/default' target='_blank'>Subscribe RSS Feed</a>
Change "blue text" with your FEEDBURNER URL

# SETUP CATEGORY MENU NAVIGATION
Go to "Edit HTML" page
Search the codes like below

<ul id='dropmenu2'>
<li><a href='http://blucent-fbt.blogspot.com/search/label/Label%201' title='Label 1'>Label 1</a>
</li>
<li><a href='http://blucent-fbt.blogspot.com/search/label/Label%202' title='Label 2'>Label 2</a>
</li>
<li><a href='http://blucent-fbt.blogspot.com/search/label/Label%203' title='Label 3'>Label 3</a>
</li>
<li class='menu-item'><a href='#'>Dropdown Parent</a>
<ul class='sub-menu'>
<li><a href='#'>Child 1</a></li>
<li><a href='#'>Child 2</a>
<ul class='sub-menu'>
<li><a href='#'>Grand Child 1</a></li>
<li><a href='#'>Grand Child 2</a>
<ul class='sub-menu'>
<li><a href='#'>Grand Grand Child</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>

Change "blue text" with your link anchor/url
Change "red text" with your text anchor

#POST DATE AND TIME SETUP

#CONTENT SLIDESHOW SETUP
Go to "page elements" -> "Add a Gadget" -> "HTML/JavaScript"

Copy and paste the code below

<div id="slider">
<div id="slider1">
<script style="text/javascript">
var showpostthumbnails_gal  = true;
var showpostsummary_gal   = true;
var random_posts         = false;
var numchars_gal   = 150;
var numposts_gal   = 10;
function showgalleryposts(json) {
var numPosts = json.feed.openSearch$totalResults.$t;
var indexPosts = new Array();
document.write('<ul style="overflow:hidden;">');
for (var i = 0; i < numPosts; ++i) {
indexPosts[i] = i;
}
if (random_posts == true){
indexPosts.sort(function() {return 0.5 - Math.random()});
}
if (numposts_gal > numPosts) {
numposts_gal = numPosts;
}
for (i = 0; i < numposts_gal; ++i) {
var entry_gal = json.feed.entry[indexPosts[i]];
var posttitle_gal =  entry_gal.title.$t;
for (var k = 0; k <  entry_gal.link.length; k++) {
if ( entry_gal.link[k].rel == 'alternate') {
posturl_gal =  entry_gal.link[k].href;
break;
}
}
if ("content" in entry_gal) {
var postcontent_gal = entry_gal.content.$t
}
s = postcontent_gal;
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 != "")) {
var thumburl_gal = d
} else var thumburl_gal = 'http://2.bp.blogspot.com/-6Jvg9AizDHw/TmjvvWpWV8I/AAAAAAAABkY/9KghyuLyG2I/s1600/FBTMaG%2BV1.jpg';
document.write('<li><div id="slide-container"><span class="slide-desc"><h2 style="margin:10px 0px;">');
document.write(posttitle_gal + '</h2>');
var re = /<\S[^>]*>/g;
postcontent_gal = postcontent_gal.replace(re, "");
if (showpostsummary_gal == true) {
if (postcontent_gal.length < numchars_gal) {
document.write(postcontent_gal);
document.write('</span>')
} else {
postcontent_gal = postcontent_gal.substring(0, numchars_gal);
var quoteEnd_gal = postcontent_gal.lastIndexOf(" ");
postcontent_gal = postcontent_gal.substring(0, quoteEnd_gal);
document.write(postcontent_gal + '...');
document.write('</span>')
}
}
document.write('<a href="' + posturl_gal + '"><img src="' + thumburl_gal + '" height="300px"/></a></div>');
document.write('</li>');
}
document.write('</ul>');

}
</script>

<script style="text/javascript">
var numposts_gal = 6;
var numchars_gal = 150;
var random_posts = false; // random posts
</script>
<script src="/feeds/posts/default/index_orderby_published_ampampalt_json_in_script_ampampcallback_showgalleryposts_ampampmax_results_999999.html"></script>
</div></div>

var numposts_gal = 6; <-- number of posts to show
var numchars_gal = 150; <-- lenght of summary
var random_posts = false; <-- set it "true" for random articles

MagzNote Blogger Template Installations Guide

2011-12-07T07:32:00.000-08:00

Template Name: MagzNote Blogger Template
By : www.freebloggertemplate.info
Download link: Click here

# SETUP MENU NAVIGATION
Go to "Edit HTML" page
Search the codes like below

<div class='menu-1-container' id='mainmenu'>
<ul class='menu' id='menu-1'>
<li class='current_page_item'><a href='/index.html'>Home</a></li>
<li><a href='#'>About</a>
<ul class='sub-menu'>
<li><a href='#'>test1</a>
<ul class='sub-menu'>
<li><a href='#'>Test4</a></li>
</ul>
</li>
<li><a href='#'>Test3</a></li>
</ul>
</li>
<li><a href='#'>themes</a></li>

<li><a href='#'>Advertise</a></li>
<li><a href='/p/test-static-page.html'>Test Static Page</a></li>
</ul>
</div>

<div id="slider-wrap">
<script type='text/javascript'>
var showpostthumbnails_gal  = true;
var showpostsummary_gal   = true;
var random_posts         = false;
var numchars_gal   = 150;
var numposts_gal   = 10;
function showgalleryposts(json) {

document.write('<div class="slider-wrap">');
document.write('<div id="main-photo-slider" class="csw"><div class="panelContainer">'); 
var numPosts = json.feed.openSearch$totalResults.$t;
var indexPosts = new Array();
document.write('<ul>');
for (var i = 0; i < numPosts; ++i) {
indexPosts[i] = i;
}
if (random_posts == true){
indexPosts.sort(function() {return 0.5 - Math.random()});
}
if (numposts_gal > numPosts) {
numposts_gal = numPosts;
}
for (i = 0; i < numposts_gal; ++i) {
var entry_gal = json.feed.entry[indexPosts[i]];
var posttitle_gal =  entry_gal.title.$t;
for (var k = 0; k <  entry_gal.link.length; k++) {
if ( entry_gal.link[k].rel == 'alternate') {
posturl_gal =  entry_gal.link[k].href;
break;
}
}
if("content"in entry_gal){
var postcontent_gal=entry_gal.content.$t;
}

s = postcontent_gal;
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 != "")) {
var thumburl_gal = d;
}
else var thumburl_gal = 'http://i1133.photobucket.com/albums/m596/abu-farhan/Images_no_image.gif';  
var _no=i+1;
document.write('<div class="panel" title="'+posttitle_gal+'">');
document.write('<div class="wrapper">');   
document.write('<a href="'+ posturl_gal + '"><img src="'+thumburl_gal+'" alt="temp"   width="620px" height="270px"/></a>');
document.write('<div class="photo-meta-data"><span>'+posttitle_gal+'</span><br>');
var re = /<\S[^>]*>/g; 
postcontent_gal = postcontent_gal.replace(re, "");
if (showpostsummary_gal == true) {
if (postcontent_gal.length < numchars_gal) {            
document.write(postcontent_gal);
}
else {
postcontent_gal = postcontent_gal.substring(0, numchars_gal);
var quoteEnd_gal = postcontent_gal.lastIndexOf(" ");
postcontent_gal = postcontent_gal.substring(0,quoteEnd_gal);
document.write(postcontent_gal + '...');
}
}
document.write('</div>');
document.write('</div>');
document.write('</div>');
}
document.write('</div>');
document.write('</div>');
for (var i = 0; i < numposts_gal; i++) {
if (random_posts == true){
var random_int  = Math.floor(Math.random()*json.feed.entry.length);
var entry_gal = json.feed.entry[random_int];
}
else{
var entry_gal = json.feed.entry[i];
}
var posttitle_gal =  entry_gal.title.$t;
for (var k = 0; k <  entry_gal.link.length; k++) {
if ( entry_gal.link[k].rel == 'alternate') {
posturl_gal =  entry_gal.link[k].href;
break;
}
}
if("content"in entry_gal){
var postcontent_gal=entry_gal.content.$t;
}

s = postcontent_gal;
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 != "")) {
var thumburl_gal = d;
}
else var thumburl_gal = 'http://i1133.photobucket.com/albums/m596/abu-farhan/Images_no_image.gif';  
<!-- Note this caption is before the image, all others it is after -->
var _no=i+1;
if (_no==1){
document.write('<a href="#'+_no+'" class="cross-link active-thumb"><img src="'+thumburl_gal+'" class="nav-thumb" alt="temp-thumb" width="30px" height="20px" />'+posttitle_gal+'</a>');
document.write('<div id="movers-row">');
}
else{
document.write('<div><a href="#'+_no+'" class="cross-link"><img src="'+thumburl_gal+'" class="nav-thumb" alt="temp-thumb" width="30px" height="20px"/>'+posttitle_gal+'</a></div>');
}
}
document.write('</div>');
document.write('</div>');

}
</script>
<script style="text/javascript">
var numposts_gal = 7;
var numchars_gal = 300;
var random_posts = false; // random posts
</script>
<script src="/feeds/posts/default/index_orderby_published_ampampalt_json_in_script_ampampcallback_showgalleryposts_ampampmax_results_999999.html"></script>
</div>

var numchars_gal = 300; <-- Number of characters of summary.
var random_posts = false; <-- set it "true" for random posts

Ashen Blogger Template Installations Guide

2011-11-28T22:22:00.000-08:00

Template Name: Ashen Blogger Template
By : www.freebloggertemplate.info
Download link: Click here

# SETUP MENU NAVIGATION
Go to "Edit HTML" page
Search the codes like below

<div class='menu-1-container' id='mainmenu'>
<ul class='menu' id='menu-1'>
<li class='current_page_item'><a href='/index.html'>Home</a></li>
<li><a href='#'>About</a>
<ul class='sub-menu'>
<li><a href='#'>test1</a>
<ul class='sub-menu'>
<li><a href='#'>Test4</a></li>
</ul>
</li>
<li><a href='#'>Test3</a></li>
</ul>
</li>
<li><a href='#'>themes</a></li>

<li><a href='#'>Advertise</a></li>
<li><a href='/p/test-static-page.html'>Test Static Page</a></li>
</ul>
</div>

Change "#" with your link anchor/url
Change "red text" with your text anchor

#Slideshow "Random Articles" integrated

If you want to change the setup, go to "Edit HTML" and search this code and change the value

var numposts_gal = 6;
var numchars_gal = 300;
var random_posts = true;

numposts_gal = 6; <-- Number of posts to show
numchars_gal = 300; <-- Number of summary character to show
random_posts = true; <-- set it "false" to show recent posts

Splendio Blogger Template

2011-11-07T08:35:00.000-08:00

Template Name: Splendio Blogger Template
By : www.freebloggertemplate.info
Download link: Click here

# SETUP TOP MENU NAVIGATION
Go to "Edit HTML" page
Search the codes like below

<div class='menu'>
<ul>
<li><a href='/index.html' title='Home'>Home</a></li>
<li><a href='#' title='About'>About</a>
<ul class='children'>
<li><a href='#' title='About Subpage'>About Subpage</a></li>
</ul>
</li>
<li><a href='#' title='Edit'>Edit</a></li>
<li><a href='http://splendio-fbt.blogspot.com/p/test-static-page.html' title='Test Static Page'>Test Static Page</a></li>
</ul>
</div>

Change "#" with your link anchor/url
Change "red text" with your text anchor

# SETUP SOCIAL MENU
Go to "Edit HTML" page
Search the codes like below

 <div class='syndicate'>
<ul>
<li><a class='s1' href='#' title='RSS'><em>RSS Feed</em></a></li>
<li><a class='s2' href='#' title='Twitter'><em>Twitter</em></a></li>
<li><a class='s3' href='#' title='FaceBook'><em>FaceBook</em></a></li>
<li><a class='s4' href='#' title='Share'><em>Share</em></a></li>
</ul>
</div>

Change "#" with your link anchor/url
Change "red text" with your text anchor

#Slideshow "Random Articles" integrated

If you want to change the setup, go to "Edit HTML" and search this code and change the value

var numposts_gal = 6;
var numchars_gal = 300;
var random_posts = true;

numposts_gal = 6; <-- Number of posts to show
numchars_gal = 300; <-- Number of summary character to show
random_posts = true; <-- set it "false" to show recent posts

#RECENT COMMENTS SCRIPT SAME STYLE WITH DEMO

<script type='text/javascript'>
function showrecentcomments(json){document.write('<ul>');for(var i=0;i<a_rc;i++){var b_rc=json.feed.entry[i];var c_rc;if(i==json.feed.entry.length)break;for(var k=0;k<b_rc.link.length;k++){if(b_rc.link[k].rel=='alternate'){c_rc=b_rc.link[k].href;break;}}c_rc=c_rc.replace("#","#comment-");var d_rc=c_rc.split("#");d_rc=d_rc[0];var e_rc=d_rc.split("/index.html");e_rc=e_rc[5];e_rc=e_rc.split(".html");e_rc=e_rc[0];var f_rc=e_rc.replace(/-/g," ");f_rc=f_rc.link(d_rc);var g_rc=b_rc.published.$t;var h_rc=g_rc.substring(0,4);var i_rc=g_rc.substring(5,7);var j_rc=g_rc.substring(8,10);var k_rc=new Array();k_rc[1]="Jan";k_rc[2]="Feb";k_rc[3]="Mar";k_rc[4]="Apr";k_rc[5]="May";k_rc[6]="Jun";k_rc[7]="Jul";k_rc[8]="Aug";k_rc[9]="Sep";k_rc[10]="Oct";k_rc[11]="Nov";k_rc[12]="Dec";if("content" in b_rc){var l_rc=b_rc.content.$t;}else if("summary" in b_rc){var l_rc=b_rc.summary.$t;}else var l_rc="";var re=/<\S[^>]*>/g;l_rc=l_rc.replace(re,"");if(m_rc==true)document.write('On '+k_rc[parseInt(i_rc,10)]+' '+j_rc+' ');document.write('<li>');document.write('<a href="'+c_rc+'">'+b_rc.author[0].name.$t+'</a> <br/>');if(n_rc==true)document.write(' on '+f_rc);if(l_rc.length<o_rc){document.write(l_rc);}else{l_rc=l_rc.substring(0,o_rc);var p_rc=l_rc.lastIndexOf(" ");l_rc=l_rc.substring(0,p_rc);document.write(l_rc+'&hellip;');document.write('</li>');}}document.write('</ul>');}
</script>

<script style='text/javascript'>var a_rc=5;var m_rc=false;var n_rc=false;var o_rc=80;</script><script src='/feeds/comments/default/index_alt_json_in_script_ampampmax_results_5_ampampcallback_showrecentcomments.html'></script>

a_rc=5; <-- Number of comments to show
o_rc=80; <-- Number of summary character

MagzEvo Blogger Template Installations Guide

2011-10-24T23:23:00.000-07:00

Template Name: MagzEvo Blogger Template
By : www.freebloggertemplate.info
Download link: Click here
Template Name: MagzEvo-Finance Blogger Template
Download link: Click here

# SETUP TOP MENU NAVIGATION
Go to "Edit HTML" page
Search the codes like below

<ul id='dmenu'>
<li><a class='active' href='/index.html'>home</a></li>
<li><a href='#'>EDIT</a></li>
<li><a href='/p/test-static-page.html'>Test Static Page</a></li>
</ul>

Change "#" with your link anchor/url
Change "red text" with your text anchor

# SETUP CATEGORY MENU NAVIGATION
Go to "Edit HTML" page
Search the codes like below

<ul class='sf-menu' id='menu-main'>
<li><a href='/'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Uncategorized</a></li>
<li><a href='#'>Category B</a>
<ul class='sub-menu'>
<li><a href='#'>Category C</a></li>
<li><a href='#'>Category D</a></li>
</ul>

Change "#" with your link anchor/url
Change "red text" with your text anchor

#CHANGE DEFAULT IMAGE FOR NO IMAGES POSTS
Go to "Edit HTML" page
Search the url below
http://3.bp.blogspot.com/-P31NsA4q2JM/TnOBCJdtrUI/AAAAAAAABro/i9nt8wxvfz0/s1600/39130-bigthumbnail.jpg
Replace that image url with your image url.

#PAGINATION SETUP
Default is "5" posts to show.
To change it, go to "Edit HTML", Check "Expand Widget Templates",
Search this code

var pageCount=5;
var displayPageNum=5;

var pageCount=5;
This code determines the number of posts that would be displayed per page.

var displayPageNum=5;
This code determines the number of additional page navigation numbers that will be displayed on the page.

find each occurrence of
data:label.url + "?&max-results=5"
Change "5" with number of "pageCount" as you wish.

#RELATED POSTS SETUP
*How to control the number of related posts to show?
Go to "Edit HTML" then search this code

var relmaxposts = 5;
var numchars = 200;

relmaxposts = 5; <- Number of posts to show
numchars = 200; <- Number of characters for summary

Magazine Basic Blogger Template Installations Guide

2011-10-13T17:58:00.000-07:00

Template Name: Magazine Basic Blogger Template
By : www.freebloggertemplate.info
Download link: Click here

# SETUP MENU NAVIGATION
Go to "Edit HTML" page
Search the codes like below

<div class='main-navigation'>
<ul class='sf-menu' id='menu-main'>
<li><a href='/'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Uncategorized</a></li>
<li><a href='#'>Category B</a>
<ul class='sub-menu'>
<li><a href='#'>Category C</a></li>
<li><a href='#'>Category D</a></li>
</ul>
</li>
</ul></div>

Change "#" with your link anchor/url
Change "red text" with your text anchor

VideoBlog Blogger Template Installations Guide

2011-10-11T17:05:00.000-07:00

Template Name: VideoBlog Blogger Template
By : www.freebloggertemplate.info
Download link: Click here

# SETUP MENU NAVIGATION
Go to "Edit HTML" page
Search the codes like below

<ul id='dmenu'>
<li class='cat-item'><a href='/index.html'>home</a></li>
<li class='cat-item'><a href='#'>EDIT</a>
<ul class='children'>
<li class='cat-item'><a href='#'>EDIT</a></li>
<li class='cat-item'><a href='#'>EDIT</a></li>
<li class='cat-item'><a href='#'>EDIT</a></li>
</ul>
</li>
<li class='cat-item'><a href='/search/label/Blog?&amp;max-results=8'>Blog</a></li>
<li class='cat-item'><a href='/p/test-static-page.html'>Test Static Page</a></li>
</ul>

Pagination "show post number" default is "8". Always add "?&max-results=8" after your category url.

# HOW TO POST
There are no posting rules, up to you want to use this template for blogging, images/videos gallery. Just post as usual, add images, add video, write articles, all you wish to post. To post a video, just copy and paste the embed code to your post editor. This template automatically create thumbnail for Youtube videos, support new and old embed code. Use "video width = 640px" to match with "post width".

*How to floating video if I want to use small video width?
General new Youtube embed code,

<iframe width="400" height="200" src="http://www.youtube.com/embed/xBzoBgfm55w" frameborder="0" allowfullscreen></iframe>

Floating code for left,

<iframe style="float:left;margin:0 10px 10px 0;" width="400" height="200" src="http://www.youtube.com/embed/xBzoBgfm55w" frameborder="0" allowfullscreen></iframe>

Floating code for right,

<iframe style="float:right;margin:0 0 10px 10px;" width="400" height="200" src="http://www.youtube.com/embed/xBzoBgfm55w" frameborder="0" allowfullscreen></iframe>

*Post Videos from another site (besides Youtube)
This template can't create automatic thumbnail for video besides Youtube. So, you need to upload image thumbnail for the video.
Always use use the image html code below to show thumbnail for video besides Youtube,
<img class="thumbvideo" src="YOUR-IMAGE-URL" />
class="thumbvideo" <- this is important

Example,
Video embed code from Metacafe,

<embed flashVars="playerVars=autoPlay=no" src="http://www.metacafe.com/fplayer/7361775/gigantic_rotating_cloud_vortex_meoter_or_ufo.swf" width="640" height="338" wmode="transparent" allowFullScreen="true" allowScriptAccess="always" name="Metacafe_7361775" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed><div style="font-size:12px;">
<a href="http://www.metacafe.com/watch/7361775/gigantic_rotating_cloud_vortex_meoter_or_ufo/">Gigantic Rotating Cloud Vortex! Meoter or UFO</a> - <a href="http://www.metacafe.com/">The top video clips of the week are here</a></div>

then you need to upload the image thumbnail for that video, copy the image url then paste to the image code like below.

<img class="thumbvideo" src="http://3.bp.blogspot.com/-alB1F218bcs/TpGA2xdw0CI/AAAAAAAAB2U/2gAfI_z2X4s/s400/metacafe1.JPG" />

Look like this,

#RECENT VIDEO BY CATEGORY UNDER POST
"Add a Gadget" -> "HTML/JavaScript"

Copy and paste the code below,

<script type='text/javascript'>var numposts = 4;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = false;var numchars = 80;</script>
<script type="text/javascript" src="/feeds/posts/default/_/ltspan_style/index.html"color: red;">YOURCATEGORYHERE?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

Change "YOURCATEGORYHERE" with your own category/label.

#RELATED POSTS/VIDEO BY CATEGORY ON SIDEBAR AUTOMATIC SHOWN
*How to control the number of related posts to show?
Go to "Edit HTML" then search this code

var relmaxposts = 10;
var numchars = 80;

relmaxposts = 10; <- Number of posts to show
numchars = 80; <- Number of characters for summary

#POPULAR POSTS/VIDEO USE BLOGGER DEFAULT WIDGET

Techtive Blogger Template

2011-09-29T07:19:00.000-07:00

Template Name: Techtive Blogger Template
By : www.freebloggertemplate.info
Download link: Click here

# SETUP TOP MENU NAVIGATION
Go to "Edit HTML" page
Search the codes like below

<ul id='pagenavigation'>
<li class='page_item'><a href='/index.html'>Home</a></li>
<li class='page_item'><a href='#'>Categories</a>
<ul>
<li class='page_item'><a href='#'>SUB MENU</a></li>
<li class='page_item'><a href='#'>SUB MENU</a></li>
<li class='page_item'><a href='#'>SUB MENU</a></li>
</ul>
</li>
<li class='page_item'><a href='http://techtive-fbt.blogspot.com/p/about.html'>Test Static Page</a></li>
</ul>

Change "#" with your link anchor/url
Change "red text" with your text anchor

# SETUP CATEGORY MENU NAVIGATION
Go to "Edit HTML" page
Search the codes like below

<ul id='dmenu'>
<li class='cat-item'><a href='http://www.youtube.com'>Video</a>
<ul class='children'>
<li class='cat-item'><a href='http://www.youtube.com'>YouTube</a></li>

<li class='cat-item'><a href='http://www.metacafe.com'>Metacafe</a></li>
<li class='cat-item'><a href='http://www.dailymotion.com'>DailyMotion</a></li>
</ul>
</li>
<li class='cat-item'><a href='http://www.blogger.com'>Blog</a>
<ul class='children'>
<li class='cat-item'><a href='http://www.blogger.com'>Blogger</a></li>
<li class='cat-item'><a href='http://www.wordpress.com'>Wordpress</a></li>
</ul>
</li>
</ul>

Change "blue url" with your link anchor/url
Change "red text" with your text anchor

# SETUP SLIDE FEATURE
It's up to you want to use the slide feature or not. To add the slide feature, just go to "Page Elements", "Add a Gadget"(see picture below), choose "HTML/JavaScript", the copy the code below then paste it.

<div id="slider-wrapper">
<div id="slider">
<script style="text/javascript">
var showpostthumbnails_gal = true;
var showpostsummary_gal = true;
var random_posts = false;
var numchars_gal = 150;
var numposts_gal = 10;
function showgalleryposts(json) {
var numPosts = json.feed.openSearch$totalResults.$t;
var indexPosts = new Array();
document.write('<ul style="overflow:hidden;">');
for (var i = 0; i < numPosts; ++i) {
indexPosts[i] = i;
}
if (random_posts == true){
indexPosts.sort(function() {return 0.5 - Math.random()});
}
if (numposts_gal > numPosts) {
numposts_gal = numPosts;
}
for (i = 0; i < numposts_gal; ++i) {
var entry_gal = json.feed.entry[indexPosts[i]];
var posttitle_gal = entry_gal.title.$t;
for (var k = 0; k < entry_gal.link.length; k++) {
if ( entry_gal.link[k].rel == 'alternate') {
posturl_gal = entry_gal.link[k].href;
break;
}
}
if ("content" in entry_gal) {
var postcontent_gal = entry_gal.content.$t
}
s = postcontent_gal;
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 != "")) {
var thumburl_gal = d
} else var thumburl_gal = 'http://3.bp.blogspot.com/-P31NsA4q2JM/TnOBCJdtrUI/AAAAAAAABro/i9nt8wxvfz0/s1600/39130-bigthumbnail.jpg';
document.write('<li><div id="slide-container"><span class="slide-desc"><a href="' + posturl_gal + '"><h2 style="margin:10px 0px;">');
document.write(posttitle_gal + '</h2></a>');
var re = /<\S[^>]*>/g;
postcontent_gal = postcontent_gal.replace(re, "");
if (showpostsummary_gal == true) {
if (postcontent_gal.length < numchars_gal) {
document.write(postcontent_gal);
document.write('</span>')
} else {
postcontent_gal = postcontent_gal.substring(0, numchars_gal);
var quoteEnd_gal = postcontent_gal.lastIndexOf(" ");
postcontent_gal = postcontent_gal.substring(0, quoteEnd_gal);
document.write(postcontent_gal + '...');
document.write('</span>')
}
}
document.write('<a href="' + posturl_gal + '"><img src="' + thumburl_gal + '" width="640px"/></a></div>');
document.write('</li>');
}
document.write('</ul>');

}
</script>

<script style="text/javascript">
var numposts_gal = 6;
var numchars_gal = 300;
var random_posts = true; // random posts
</script>
<!-- replace with your web address (marked with red color) -->
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script>
</div>
</div>

Change "http://3.bp.blogspot.com/-P31NsA4q2JM/TnOBCJdtrUI/AAAAAAAABro/i9nt8wxvfz0/s1600/39130-bigthumbnail.jpg" with your own image url for default image slide if the post with no image.

"var numposts_gal = 6;" => Number of slide to show.
"var numchars_gal = 300;" => Number of characters of summary.
"var random_posts = true;" => set it "false" for recent post to show.
"/feeds/posts/default/index.html" => Show latest posts.
"/feeds/posts/default/_/ltspan_style/index.html"color: red;">YOURCATEGORY" => Show latest posts by category.

Widget : Recent Posts by Category Thumbnail Only

2011-09-27T00:56:00.000-07:00

Go to "Design" => "Page Elements"
"Add a Gadget" => "HTML/JavaScript"
Copy and paste the codes below

<style>
img.label_thumb{
 width:172px;
 height:104px;
 margin-right:0px;
 margin-bottom:10px;
 }
</style>
<script type='text/javascript'>
//<![CDATA[
function labelthumbs(json){document.write('<div>');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$img.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='';}
document.write('<a href="'+posturl+'" title="'+posttitle+'"><img class="label_thumb" src="'+thumburl+'"/></a>');
if(i!=(numposts-1))
document.write('');}
document.write('</div>');}
//]]>
</script>
<script type='text/javascript'>var numposts = 7;</script>
<script type="text/javascript" src="/feeds/posts/default/_/ltspan_style/index.html"color: red;">YOURCATEGORY?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

numposts = 7; <-- Number of posts to show, change it as you wish
YOURCATEGORY <-- Replace with your category/label name

Play the images css code
This is standard ccs code. The images will appear downward. Change the value of "width" and "height" as you wish.

img.label_thumb{
width:172px;
height:104px;
margin-right:0px; 
margin-bottom:10px;
}

You can add "float:left;". The images will appear leftward. set a value for "margin-right" to make a space between images. Example,

img.label_thumb{
float:left;
width:172px;
height:104px;
margin-right:10px; 
margin-bottom:10px;
}

Make framing images. add "padding" and "border". Example,

img.label_thumb{
float:left;
width:172px;
height:104px;
margin-right:10px; 
margin-bottom:10px;
padding:5px;
border:1px solid #ccc;
}

Images Lightbox Blogger Solutions for Template Problem

2011-09-20T23:57:00.000-07:00

Blogger has introducing Lightbox a few days ago, Lightbox is a whole new way to interact with photos. When clicked, images now expand into a shiny new overlay that displays them at their full size for optimal viewing (more info). But, there are problems for some templates that have "z-index for positioning CSS code" and "zooming images feature".

1. Z-Index for positioning CSS code
If your templates have Z-Index for positioning CSS code, you need to make sure that the value is "0". How to change? Go to "Edit HTML" then search "z-index".
Example:

The text box below use CSS Code "Position:Absolute;" and "z-index:99999;"

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quis risus at nisl blandit feugiat. Ut vel orci quis sem dapibus iaculis.

CLICK THIS IMAGE
2. Zooming Images Feature
If your templates have this feature(like Monte Cristo Template), then you will see 2 images shown when the image clicked. The best solution is by removing you zoom images feature because.

For Monte Cristo Blogger Template, you only need to remove zoom feature on posts page.
Go to "Edit Html" then search this codes

<script src='http://fbtemplate.googlecode.com/files/FancyZoom1.js' type='text/javascript'/>
<script src='http://fbtemplate.googlecode.com/files/FancyZoomHTML.js' type='text/javascript'>
</script>

Replace with this codes

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script src='http://fbtemplate.googlecode.com/files/FancyZoom1.js' type='text/javascript'/>
<script src='http://fbtemplate.googlecode.com/files/FancyZoomHTML.js' type='text/javascript'>
</script>
</b:if>

BeHealth Blogger Template

2011-09-19T23:16:00.000-07:00

Template Name: BeHealth Blogger Template
By : www.freebloggertemplate.info
Download link: Click here

# SETUP MENU NAVIGATION
Go to "Edit HTML" page
Search the codes like below

<ul class='clearfix'>
<li class='first'><a href='/index.html' title='Home'>Home</a></li>
<li><a href='#' title='Edit'>Edit</a>
<ul class='children'>
<li><a href='#' title='Edit'>Edit</a>
<ul class='children'>
<li><a href='#' title='Edit'>Edit</a></li>
<li><a href='#' title='Edit'>Edit</a></li>
</ul>
</li>
<li><a href='#' title='Edit'>Edit</a></li>
<li><a href='#' title='Edit'>Edit</a></li>
</ul>
</li>
<li><a href='#' title='Edit'>Edit</a></li>
<li><a href='#' title='Edit'>Edit</a></li>
<li><a href='#' title='Edit'>Edit</a></li>
<li><a href='http://realmag-fbt.blogspot.com/p/test-static-page.html' title='Test Static Page'>Test Static Page</a></li>
</ul>

# SETUP SLIDE FEATURE
It's up to you want to use the slide feature or not. To add the slide feature, just go to "Page Elements", "Add a Gadget"(see picture below), choose "HTML/JavaScript", the copy the code below then paste it.

<div id="slider">
<script style="text/javascript">
var showpostthumbnails_gal  = true;
var showpostsummary_gal   = true;
var random_posts         = false;
var numchars_gal   = 150;
var numposts_gal   = 10;
function showgalleryposts(json) {
var numPosts = json.feed.openSearch$totalResults.$t;
var indexPosts = new Array();
document.write('<ul style="overflow:hidden;">');
for (var i = 0; i < numPosts; ++i) {
indexPosts[i] = i;
}
if (random_posts == true){
indexPosts.sort(function() {return 0.5 - Math.random()});
}
if (numposts_gal > numPosts) {
numposts_gal = numPosts;
}
for (i = 0; i < numposts_gal; ++i) {
var entry_gal = json.feed.entry[indexPosts[i]];
var posttitle_gal =  entry_gal.title.$t;
for (var k = 0; k <  entry_gal.link.length; k++) {
if ( entry_gal.link[k].rel == 'alternate') {
posturl_gal =  entry_gal.link[k].href;
break;
}
}
if ("content" in entry_gal) {
var postcontent_gal = entry_gal.content.$t
}
s = postcontent_gal;
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 != "")) {
var thumburl_gal = d
} else var thumburl_gal = 'http://3.bp.blogspot.com/-P31NsA4q2JM/TnOBCJdtrUI/AAAAAAAABro/i9nt8wxvfz0/s1600/39130-bigthumbnail.jpg';
document.write('<li><div id="slide-container"><span class="slide-desc"><h2 style="margin:10px 0px;">');
document.write(posttitle_gal + '</h2>');
var re = /<\S[^>]*>/g;
postcontent_gal = postcontent_gal.replace(re, "");
if (showpostsummary_gal == true) {
if (postcontent_gal.length < numchars_gal) {
document.write(postcontent_gal);
document.write('</span>')
} else {
postcontent_gal = postcontent_gal.substring(0, numchars_gal);
var quoteEnd_gal = postcontent_gal.lastIndexOf(" ");
postcontent_gal = postcontent_gal.substring(0, quoteEnd_gal);
document.write(postcontent_gal + '...');
document.write('</span>')
}
}
document.write('<a href="' + posturl_gal + '"><img src="' +  thumburl_gal + '" width="610px"/></a></div>');
document.write('</li>');
}
document.write('</ul>');

}
</script>

<script style="text/javascript">
var numposts_gal = 6;
  var numchars_gal = 400;
var random_posts = false; // random posts
</script>
<!-- replace with your web address (marked with red color) -->
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script>
</div>

Change "http://3.bp.blogspot.com/-P31NsA4q2JM/TnOBCJdtrUI/AAAAAAAABro/i9nt8wxvfz0/s1600/39130-bigthumbnail.jpg" with your own image url for default image slide if the post with no image.

"var numposts_gal = 6;" => Number of slide to show.
"var numchars_gal = 400;" => Number of characters of summary.
"var random_posts = false;" => set it "true" for random post to show.
"/feeds/posts/default/index.html" => Show latest posts.
"/feeds/posts/default/_/ltspan_style/index.html"color: red;">YOURCATEGORY" => Show latest posts by category.

FBTMaG V1 Blogger Template Installations Guide

2011-09-12T18:07:00.000-07:00

Template Name: FBTMaG V1 Blogger Template
By : www.freebloggertemplate.info
Download link: Click here

# SETUP MENU NAVIGATION
Go to "Edit HTML" page
Search the codes like below

<ul class='clearfix'>
<li class='first'><a href='/index.html' title='Home'>Home</a></li>
<li><a href='#' title='Edit'>Edit</a>
<ul class='children'>
<li><a href='#' title='Edit'>Edit</a>
<ul class='children'>
<li><a href='#' title='Edit'>Edit</a></li>
<li><a href='#' title='Edit'>Edit</a></li>
</ul>
</li>
<li><a href='#' title='Edit'>Edit</a></li>
<li><a href='#' title='Edit'>Edit</a></li>
</ul>
</li>
<li><a href='#' title='Edit'>Edit</a></li>
<li><a href='#' title='Edit'>Edit</a></li>
<li><a href='#' title='Edit'>Edit</a></li>
<li><a href='http://realmag-fbt.blogspot.com/p/test-static-page.html' title='Test Static Page'>Test Static Page</a></li>
</ul>

Change "#" with your link anchor/url
Change "red text" with your text anchor

# SETUP COMMENTS REPLY FEATURE
Go to "Edit HTML" page, check "Expand Widget Templates"
Search using this keyword "557685659298030308", Then change that numbers with your blog-ID.

# SETUP SLIDE FEATURE
It's up to you want to use the slide feature or not. To add the slide feature, just go to "Page Elements", "Add a Gadget"(see picture below), choose "HTML/JavaScript", the copy the code below then paste it.

<div id="slider">
<script style="text/javascript">
var showpostthumbnails_gal  = true;
var showpostsummary_gal   = true;
var random_posts         = false;
var numchars_gal   = 150;
var numposts_gal   = 10;
function showgalleryposts(json) {
var numPosts = json.feed.openSearch$totalResults.$t;
var indexPosts = new Array();
document.write('<ul style="overflow:hidden;">');
for (var i = 0; i < numPosts; ++i) {
indexPosts[i] = i;
}
if (random_posts == true){
indexPosts.sort(function() {return 0.5 - Math.random()});
}
if (numposts_gal > numPosts) {
numposts_gal = numPosts;
}
for (i = 0; i < numposts_gal; ++i) {
var entry_gal = json.feed.entry[indexPosts[i]];
var posttitle_gal =  entry_gal.title.$t;
for (var k = 0; k <  entry_gal.link.length; k++) {
if ( entry_gal.link[k].rel == 'alternate') {
posturl_gal =  entry_gal.link[k].href;
break;
}
}
if ("content" in entry_gal) {
var postcontent_gal = entry_gal.content.$t
}
s = postcontent_gal;
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 != "")) {
var thumburl_gal = d
} else var thumburl_gal = 'http://2.bp.blogspot.com/-6Jvg9AizDHw/TmjvvWpWV8I/AAAAAAAABkY/9KghyuLyG2I/s1600/FBTMaG%2BV1.jpg';
document.write('<li><div id="slide-container"><span class="slide-desc"><h2 style="margin:10px 0px;">');
document.write(posttitle_gal + '</h2>');
var re = /<\S[^>]*>/g;
postcontent_gal = postcontent_gal.replace(re, "");
if (showpostsummary_gal == true) {
if (postcontent_gal.length < numchars_gal) {
document.write(postcontent_gal);
document.write('</span>')
} else {
postcontent_gal = postcontent_gal.substring(0, numchars_gal);
var quoteEnd_gal = postcontent_gal.lastIndexOf(" ");
postcontent_gal = postcontent_gal.substring(0, quoteEnd_gal);
document.write(postcontent_gal + '...');
document.write('</span>')
}
}
document.write('<a href="' + posturl_gal + '"><img src="' + thumburl_gal + '" width="610px"/></a></div>');
document.write('</li>');
}
document.write('</ul>');

}
</script>

<script style="text/javascript">
var numposts_gal = 6;
  var numchars_gal = 150;
var random_posts = false; // random posts
</script>
<!-- replace with your web address (marked with red color) -->
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script>
</div>

Change "http://2.bp.blogspot.com/-6Jvg9AizDHw/TmjvvWpWV8I/AAAAAAAABkY/9KghyuLyG2I/s1600/FBTMaG%2BV1.jpg" with your own image url for default image slide if the post with no image.

"var numposts_gal = 6;" => Number of slide to show.
"var numchars_gal = 150;" => Number of characters of summary.
"/feeds/posts/default/index.html" => Show latest posts.
"/feeds/posts/default/_/ltspan_style/index.html"color: red;">YOURCATEGORY" => Show latest posts by category.

iFeature Blogger Template Installations Guide

2011-09-11T00:31:00.000-07:00

Template Name: Cleanside Blogger Template
By : www.freebloggertemplate.info
Download link: Click here

# SETUP SOCIAL ICONS
Go to "Edit HTML" page
Search the codes like below

<div id='social'>
<div class='icons'>
<a href='http://facebook.com/' target='_blank'><img alt='Facebook' height='32' src='http://1.bp.blogspot.com/-3Zx3CQYukSg/TmxAdunwtII/AAAAAAAABl4/Nttkp3rmUiQ/s1600/facebook.png' width='32'/></a>
<a href='http://twitter.com/' target='_blank'><img alt='Twitter' height='32' src='http://2.bp.blogspot.com/-XoN5M1wJ02g/TmxBJIrDm4I/AAAAAAAABnQ/5S8XE-HQejg/s1600/twitter.png' width='32'/></a>
<a href='https://plus.google.com/' target='_blank'><img alt='Gplus' height='32' src='http://2.bp.blogspot.com/-bgt9LJBNZEA/TmxAtYQy53I/AAAAAAAABmQ/Glh616-vTHQ/s1600/gplus.png' width='32'/></a>
<a href='http://linkedin.com/' target='_blank'><img alt='LinkedIn' height='32' src='http://1.bp.blogspot.com/-OVA3J-_JcQs/TmxA9d6hsYI/AAAAAAAABm4/lgqTw7TQPAI/s1600/linkedin.png' width='32'/></a>
<a href='http://youtube.com/' target='_blank'><img alt='YouTube' height='32' src='http://1.bp.blogspot.com/-FhPFu6VvbH4/TmxBPv7kTFI/AAAAAAAABng/mE3kllGydK0/s1600/youtube.png' width='32'/></a>
<a href='http://google.com/maps/'><img alt='Google Maps' height='32' src='http://2.bp.blogspot.com/-EIGOALS9EV8/TmxAmID3wYI/AAAAAAAABmI/9uqKECui4eU/s1600/googlemaps.png' width='32'/></a>
<a href='mailto:no@way.com' target='_blank'><img alt='E-mail' height='32' src='http://4.bp.blogspot.com/-Kl9wjTZoDbo/TmxAbOqZUjI/AAAAAAAABlw/dpfJMgG9_Pk/s1600/email.png' width='32'/></a>
<a href='/feeds/posts/default' target='_blank'><img alt='RSS' height='32' src='http://3.bp.blogspot.com/-CbyLw6ZqYik/TmxBBfrDeHI/AAAAAAAABnA/UpdAnaJ4dh8/s1600/rss.png' width='32'/></a>
</div>
</div><!-- end social -->

Change "blue url" with your own

# SETUP MENU NAVIGATION
Go to "Edit HTML" page
Search the codes like below

<div id='sfwrapper'>
<ul class='sf-menu' id='menu-nav'>
<li><a href='#' title='About'>About</a></li>
<li><a href='#' title='Parent Page'>Parent Page</a>
<ul class='children'>
<li><a href='#' title='Sub-page'>Sub-page</a></li>
</ul>
</li>
</ul>
</div>

Change "#" with your link anchor/url
Change "red text" with your text anchor

# SETUP SLIDE FEATURE
Go to "Edit HTML" page
Search the codes like below

<!--Insert Feature Slider-->
<div class='nivoSlider' id='slider'>

<a href='#'> 
<img height='330' src='http://1.bp.blogspot.com/-1B7hU1YVrVY/TmxA3LPec_I/AAAAAAAABmo/RBg6SfCOafA/s1600/ifeaturefree.jpg' title='#caption0' width='640'/ampgtltbr_/gtampltdiv_class/index.html'nivo-html-caption' id='caption0'>
<font size='4'>Worth A Thousand Words </font> <br/>
</div>
</a>

<a href='#'> 
<img height='330' src='http://1.bp.blogspot.com/-1B7hU1YVrVY/TmxA3LPec_I/AAAAAAAABmo/RBg6SfCOafA/s1600/ifeaturefree.jpg' title='#caption1' width='640'/ampgtltbr_/gtampltdiv_class/index.html'nivo-html-caption' id='caption1'>
<font size='4'>Elements </font> <br/>
</div>
</a>

<a href='#'> 
<img height='330' src='http://1.bp.blogspot.com/-1B7hU1YVrVY/TmxA3LPec_I/AAAAAAAABmo/RBg6SfCOafA/s1600/ifeaturefree.jpg' title='#caption2' width='640'/ampgtltbr_/gtampltdiv_class/index.html'nivo-html-caption' id='caption2'>
<font size='4'>More Tags </font> <br/>
</div>
</a>

<a href='#'> 
<img height='330' src='http://1.bp.blogspot.com/-1B7hU1YVrVY/TmxA3LPec_I/AAAAAAAABmo/RBg6SfCOafA/s1600/ifeaturefree.jpg' title='#caption3' width='640'/ampgtltbr_/gtampltdiv_class/index.html'nivo-html-caption' id='caption3'>
<font size='4'>HTML </font> <br/>
</div>
</a>

<a href='#'> 
<img height='330' src='http://1.bp.blogspot.com/-1B7hU1YVrVY/TmxA3LPec_I/AAAAAAAABmo/RBg6SfCOafA/s1600/ifeaturefree.jpg' title='#caption4' width='640'/ampgtltbr_/gtampltdiv_class/index.html'nivo-html-caption' id='caption4'>
<font size='4'>Links </font> <br/>
</div>
</a>
</div>

Change "#" with your url
Change "green url" with your images url
Change "red text" with your own

Cleanside Blogger Template Installations Guide

2011-08-21T17:26:00.000-07:00

Template Name: Cleanside Blogger Template
By : www.freebloggertemplate.info
Download link: Click here

# SETUP TOP MENU
Go to "Edit HTML" page
Search the codes like below

<div id='top-menu'> 
<div class='clearfix' id='top-menu-inner'>
<div class='jqueryslidemenu transparent_class clearfix' id='myslidemenu'>
<ul>
<li><a href='/index.html'>Home</a></li>
<li><a href='#' title='MENU 1'>MENU 1</a>
<ul class='children'>
<li><a href='#' title='SUB MENU 11'>SUB MENU 11</a></li>
<li><a href='#' title='SUB MENU 12'>SUB MENU 12</a></li>
</ul>
</li>
<li><a href='#' title='MENU 2'>MENU 2</a>
<ul class='children'>
<li><a href='#' title='SUB MENU 21'>SUB MENU 21</a></li>
<li><a href='#' title='SUB MENU 22'>SUB MENU 22</a></li>
</ul>
</li>
<li><a href='#' title='MENU 3'>MENU 3</a></li>
<li><a href='#' title='MENU 4'>MENU 4</a></li>
</ul>
</div> <!-- end div #myslidemenu -->
</div> <!-- end div #top-menu-inner -->
</div> <!-- end div #top-menu -->

Change "#" with your link anchor/url
Change "red text" with your text anchor

# SETUP CATEGORY MENU
Go to "Edit HTML" page
Search the codes like below

<div class='jqueryslidemenu transparent_class clearfix' id='myslidemenu'>
<ul class='menu' id='menu-menu-top'>
<li><a href='/index.html'>Home</a></li>
<li><a href='#'>MENU 1</a>
<ul class='sub-menu'>
<li><a href='#'>SUB MENU 1</a></li>
<li><a href='#'>SUB MENU 2</a></li>
</ul>
</li>
<li><a href='#'>MENU 2</a>
<ul class='sub-menu'>
<li><a href='#'>SUB MENU 1</a></li>
<li><a href='#'>SUB MENU 2</a></li>
<li><a href='#'>SUB MENU 3</a></li>
</ul>
</li>
<li><a href='#'>MENU 3</a></li>
<li><a href='#'>MENU 4</a></li>
</ul> 
</div> <!-- end div #myslidemenu -->

Change "#" with your link anchor/url
Change "red text" with your text anchor

# SETUP SLIDE FEATURE
Go to "Edit HTML" page
Search the codes like below

<!-- BEGIN SLIDER -->
<div class='inner clearfix' id='sliderbox_inner'>
<div class='anythingSlider'>
<div class='wrapper'>
<ul>

<!-- SLIDE 1-->
<li>
<div class='entrysliderimg'>
<div class='postthumb'>
<a href='#'>
<img height='360' src='http://3.bp.blogspot.com/-bnBfu43yDrg/TlGAfSPKSlI/AAAAAAAABhQ/97mLlSG_Se8/s1600/pixars_up-640x360.jpg' title='pixars_up' width='640'/>
</a>
</div>
</div>
<div class='entryslider'>
<h2><a href='#' title='TITLE SLIDER 1'>TITLE SLIDER 1</a></h2>
</div>
</li>

<!-- SLIDE 2-->  
<li>
<div class='entrysliderimg'>
<div class='postthumb'>
<a href='#'>
<img height='360' src='http://1.bp.blogspot.com/-rbrSHmEgkdA/TlGASCV5QYI/AAAAAAAABgY/Aqpb5yKBMss/s1600/alvin-and-the-chipmunks-the-squeakquel-wide-wallpaper-640x360.jpg' title='alvin-and-the-chipmunks-the-squeakquel-wide-wallpaper' width='640'/>
</a>
</div>
</div>
<div class='entryslider'>
<h2><a href='#' title='TITLE SLIDER 2'>TITLE SLIDER 2</a></h2>
</div>
</li>

<!-- SLIDE 3-->
<li>
<div class='entrysliderimg'>
<div class='postthumb'>
<a href='#'>
<img height='360' src='http://3.bp.blogspot.com/-WGv6PD5QhXA/TlGAfR4mCNI/AAAAAAAABhI/1aHGrWEJPFY/s1600/HDRwallpaper-_21_-640x360.jpg' title='HDRwallpaper-_21_' width='640'/></a></div>
</div>
<div class='entryslider'>
<h2><a href='#' title='TITLE SLIDER 3'>TITLE SLIDE 3</a></h2>
</div>
</li>

<!-- SLIDE 4-->
<li>
<div class='entrysliderimg'>
<div class='postthumb'>
<a href='#'>
<img height='360' src='http://3.bp.blogspot.com/-ZGA7_yAePXM/TlGAfsPpr8I/AAAAAAAABhg/t14mx7rYQWw/s1600/the-dock-640x360.jpg' title='The Dock' width='640'/></a></div>
</div>
<div class='entryslider'>
<h2><a href='#' title='TITLE SLIDE 4'>TITLE SLIDE 4</a></h2>
</div>          
</li>

</ul> <!-- end post -->
</div><!-- end div .anythingSlider.wrapper -->
</div><!-- end div .anythingSlider -->
</div> <!-- end div sliderbox_inner -->
<!-- END SLIDER -->

Change "#" with your url
Change "green url" with your images url
Change "red text" with your own

# SETUP COMMENTS REPLY FEATURE
Go to "Edit HTML" page, check "Expand Widget Templates"
Search using this keyword "", then you will see the code like below under that keyword.

<span style='font-size: 11px;font-weight: bold;'><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=557685659298030308&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450&quot;); return false;'>Reply</a></span>

Change "red numbers" with your own blog-ID.

Learning About Blogging

2011-08-15T15:50:00.000-07:00

Why people blogging?
What Blogger do when blogging?
How to turn your blog into make money machine?
How to increase your blog visitors?
How to beat search engine called SEO(search engine optimization)?
and many more about blogging.

I will share all my experience about blogging here.

How to Add 3 Ads Element on Bingo Gallery Blogger Template

2011-07-30T21:38:00.000-07:00

Template Name: Bingo Gallery Blogger Template
By : www.freebloggertemplate.info
Download link: Click here

Go to "Edit HTML" page

# STEP 1
Find this code ]]></b:skin>, copy and paste the following code above ]]></b:skin>

#mainads {
width: 668px;
word-wrap: break-word;
overflow: hidden;
padding:10px 10px 0;
margin:0px 0 0px;
background-color: #505050; border: solid 1px #666;
}
.mainads {
width:210px;
float:left;
margin:0 5px;
}
.mainads ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.mainads li {
margin:0 0 5px;
padding-top:0;
padding-right:0;
padding-bottom:.25em;
line-height:1.5em;
background:#444;
padding:5px;
border: 1px solid #333;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.mainads .widget {
margin:0 0 10px;
padding:10px 5px 20px;
background: url(http://i600.photobucket.com/albums/tt87/graphiczone/post-bg.jpg) no-repeat;
}

# STEP 2
Find this code <div id='main-wrapper'>, copy and paste the following code under <div id='main-wrapper'>

<div id='mainads'>
<b:section class='mainads' id='mainads1' preferred='yes'/ampgtltbr_/gtampltbsection_class/index.html'mainads' id='mainads2' preferred='yes'/ampgtltbr_/gtampltbsection_class/index.html'mainads' id='mainads3' preferred='yes'/ampgtltbr_/gtamplt/divampgtltbr_/gtampltdiv_style/index.html'clear:both'/>

# STEP 3
Preview template, if there are no error then Save.

Now you have 3 new elements on top of posts element.

ElegantRed Blogger Template Installations Guide

2011-07-29T23:20:00.000-07:00

Template Name: ElegantRed Blogger Template
By : www.freebloggertemplate.info
Download link: Click here

# SETUP SUBSCRIBER
Go to "Edit HTML" page
Search the codes like below

<form action='http://feedburner.google.com/fb/a/mailverify?uri=YOUR FEEDBURNER' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=YOUR FEEDBURNER&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input class='itext' name='email' type='text'/><input class='ibtn' height='26' src='http://4.bp.blogspot.com/-pUO7RKhfTyo/TjOWQhQAyyI/AAAAAAAABcM/LTwj48my8wY/s1600/subscribe-btn.png' type='image' value='Subscribe' width='86'/>
<input name='uri' type='hidden' value='ElegantWpThemes'/>
<input name='loc' type='hidden' value='en_US'/>
</form>

Change red text with your Feedburner ID.

# SETUP TOP MENU
Go to "Edit HTML" page
Search the codes like below

<div class='uninside2'>
<a href='/index.html'>Home</a><span>|</span>
<a href='#' title='About'>About</a><span>|</span>
<a href='#' title='EDIT'>EDIT</a>
</div>

Change "#" with your link anchor/url
Change "red text" with your text anchor

# SETUP CATEGORY MENU
Go to "Edit HTML" page
Search the codes like below

<div class='tninside2'>
<a href='#' title='Category1'>Category1</a><span>|</span>
<a href='#' title='Category2'>Category2</a><span>|</span>
<a href='#' title='Category3'>Category3</a><span>|</span>
<a href='#' title='Category4'>Category4</a><span>|</span>
<a href='#' title='EDIT'>EDIT</a>
</div>

Change "#" with your link anchor/url
Change "red text" with your text anchor

# SETUP SLIDE FEATURE

Copy and paste "slide feature code(this code included in downloadable file)" below:

<div class="round_Inside slider_bg">
<div class="round_Inside2 slider_option">
<div id="banner-container">
<ul id="banner">

<li id="img1" style="position: absolute; z-index:zIndex"><img src="http://1.bp.blogspot.com/-7lUukwdAE_o/TiQs5_On1JI/AAAAAAAABYk/oTPT7ETUCQo/s1600/screenshot.JPG" width="644" height="263" /></li>

<li id="img2" style="position: absolute; z-index:zIndex"><img src="http://3.bp.blogspot.com/-SMeoQ2gYri8/Ta-8eLeFVxI/AAAAAAAABHo/fGon-9L7vBc/s400/screenshot.JPG" width="644" height="263" /></li>

<li id="img3" style="position: absolute; z-index:zIndex"><img src="http://2.bp.blogspot.com/-GnsTiPPqvFc/Taf0sZpHMxI/AAAAAAAABB8/YpoweSw_6eA/s400/screenshot.JPG" width="644" height="263" /></li>
</ul>
<div id="tabs">
<a href="#SLIDE-1-URL"><div class="label" id="label-1"></div></a>
<div class="tab png" id="tab-1">
<h2>SLIDE-1-TITLE...</h2>
<p>REPLACE THIS SENTENCES WITH YOUR SLIDE-1 DESCRIPTIONS ...</p>
</div>

<a href="#SLIDE-2-URL"><div class="label" id="label-2"></div></a>
<div class="tab png" id="tab-2">
<h2>SLIDE-2-TITLE...</h2>
<p>REPLACE THIS SENTENCES WITH YOUR SLIDE-2 DESCRIPTIONS ...</p>
</div>
<a href="#SLIDE-3-URL"><div class="label" id="label-3"></div></a>

<div class="tab png" id="tab-3">
<h2>SLIDE-3-TITLE ...</h2>
<p>REPLACE THIS SENTENCES WITH YOUR SLIDE-3 DESCRIPTIONS ...</p>
</div>
</div></div></div></div>

Replace red images url with your images url.
id="img1" => image for slide 1
id="img2" => image for slide 2
id="img3" => image for slide 3

Change "#" with your url
Change "red text" with your own

# SETUP POPULAR POSTS ELEMENT

Remember, number of posts to display = 4 posts

Fausto Blogger Template Installations Guide

2011-07-18T20:40:00.000-07:00

Template Name: Fausto Blogger Template
By : www.freebloggertemplate.info
Download link: Click here

# SETUP TOP SOCIAL
Go to "Edit HTML" page
Search the codes like below

<div class='twitter'>
<a href='#YOUR TWITTER URL HERE' title='Follow Me on Twitter!'>
</a>
</div><!-- end of rss --> 

<div class='facebook'> 
<a href='#YOUR FACEBOOK URL HERE' target='blank' title='Share on Facebook'/> 
</div><!-- end of twitter -->

<div class='rss'>
<a href='/feeds/posts/default' title='Syndicate this site using RSS'><abbr title=''/></a> 
</div>

Change "red text" with your own.

# SETUP TOP MENU
Go to "Edit HTML" page
Search the codes like below

<div class='btn'>
<ul class='thaimenu menuone' id='pagemenu'>
<li class='current_page_item'><a href='/index.html'><span>Home</span></a></li>
<li class='page_item'><a href='#' title='About'>About</a></li>
</ul>
</div><!-- end of btn -->

Change "#" with your link anchor/url
Change "red text" with your text anchor

# SETUP UNDER TITLE MENU
Go to "Edit HTML" page
Search the codes like below

<div class='menu'>
<ul class='jasmine menutwo' id='catsmenu'>

<li class='current_page_item'><a href='/index.html'>Home</a></li>
<li class='cat-item'><a href='#' title='TITLE HERE'>MENU 1</a></li>
<li class='cat-item'><a href='#' title='TITLE HERE'>MENU 2 WITH CHILD MENU</a>
<ul class='children'>
<li class='cat-item'><a href='#' title='TITLE HERE'>CHILD MENU 1</a></li>
<li class='cat-item'><a href='#' title='TITLE HERE'>CHILD MENU 2</a></li>
<li class='cat-item'><a href='#' title='TITLE HERE'>CHILD MENU 3</a></li>
</ul>
</li>
<li class='cat-item'><a href='#' title='TITLE HERE'>MENU 3</a></li>
<li class='cat-item'><a href='#' title='TITLE HERE'>MENU 4</a></li>
</ul>
</div>

Change "#" with your link anchor/url
Change "red text" with your text anchor

# SETUP SLIDER CONTENT

Click "Add A Gadget" on that element than place this code.

<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
<style>
.galouter {
width:634px;height:300px;padding-left:6px;padding-top:0px;background-image:url(http://2.bp.blogspot.com/-hNZFzAt6os0/TiJnm3WWi5I/AAAAAAAABVc/tuUMFhEHTZI/s1600/galbg.png);background-repeat:no-repeat;
}
.galouter .gallery {width:628px;height:261px;background-color: #202834;}
#slider { float:left;width:628px;height:261px;background:url(http://www.wordpressmanual.com/demos/wp141/wp-content/themes/Fausto/images/loading.gif) no-repeat;background-position:50% 50%;
}
#slider img { position:absolute;top:0px;left:0px;display:none;}
#slider a { border:0;outline:none;display: block;}
.nivo-controlNav {
position:absolute;
left:47%;
bottom:-30px;
}
.nivo-controlNav a {
display:block;
width:10px;
height:10px;
background:url(http://3.bp.blogspot.com/-R9m-7zSK3Sc/TiJnTQs9sPI/AAAAAAAABT8/eecUz83CBlc/s1600/bullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin-right:3px;
float:left;
}
.nivo-controlNav a.active {
background-position:-10px 0;
}
.nivo-directionNav a {
display:block;
width:32px;
height:34px;
background:url(http://3.bp.blogspot.com/-LWPcRsnNIgk/TiJnMKG2hcI/AAAAAAAABTM/6f5Ab9ERjXM/s1600/arrows1.png) no-repeat;
text-indent:-9999px;
border:0;
}
a.nivo-nextNav {
background-position:-30px 0;
right:10px;
}
a.nivo-prevNav {
background-position:3px 0;
left:10px;
}

.clear {
clear:both;
}
.nivoSlider {
position:relative;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
}
.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:60;
display:none;
}

.nivo-slice {
display:block;
position:absolute;
z-index:50;
height:100%;
}
.nivo-caption {
position:absolute;
left:15px;
bottom:5px;
padding-left:5px;
padding-right:5px;
padding-top:5px;
font-size:12px;
background:#000;
line-height:16px; 
color:#fff;
font-family:Arial, Helvetica, sans-serif;
opacity:0.8; /* Overridden by captionOpacity setting */
width:93%;
z-index:89;
}
.nivo-caption p {
padding:5px;
margin:0;
}
.nivo-caption a {
display:inline !important;
}
.nivo-html-caption {
display:none;
}

.nivo-directionNav a {
position:absolute;
top:45%;
z-index:99;
cursor:pointer;
}
.nivo-prevNav {
left:0px;
}
.nivo-nextNav {
right:0px;
}
.nivo-controlNav a {
position:relative;
z-index:99;
cursor:pointer;
}
.nivo-controlNav a.active {
font-weight:bold;
}
.nivo-caption{
font-size: 12px;
}
.readmore-wrap{
float: right;
}
.nivo-caption{
height: 40px;
}
.nivo-caption{
font-size: 12px;
}
.readmore-wrap{
float: right;
}
</style>

<div id="slider">
<a href="#" title="Slide 1"><img src="http://4.bp.blogspot.com/-O_HDtDAUauY/TiJnmB8zAXI/AAAAAAAABU8/ECkqXUeJSuQ/s1600/f10.jpg" alt="" title="Replace these every slider 1 sentences with your featured post descriptions." /></a>

<a href="#" title="Slide 2"><img src="http://4.bp.blogspot.com/-SRtWrh8YTgc/TiJndv7BnCI/AAAAAAAABUs/im3PZxpz2Qk/s1600/f4.jpg" alt="" title="Replace these every slider 2 sentences with your featured post descriptions." /></a>

<a href="#" title="Slide 3"><img src="http://1.bp.blogspot.com/-SA372qfi6Rw/TiJneHowQqI/AAAAAAAABU0/RLRqxGugEe4/s1600/f9.jpg" alt="" title="Replace these every slider 3 sentences with your featured post descriptions. Replace these every slider 3 sentences with your featured post descriptions." /></a>

<a href="#" title="Slide 4"><img src="http://1.bp.blogspot.com/-SA372qfi6Rw/TiJneHowQqI/AAAAAAAABU0/RLRqxGugEe4/s1600/f9.jpg" alt="" title="Replace these every slider 4 sentences with your featured post descriptions. Replace these every slider 4 sentences with your featured post descriptions." /></a>
</div>

Change "#" with your link anchor/url.
Change "red text" with your own.
To add more slide, see the "green code".

Epione Blogger Template Installations Guide

2011-07-13T20:22:00.000-07:00

Template Name: Epione Blogger Template
By : www.freebloggertemplate.info
Download link: Click here

# SETUP TOP SOCIAL
Go to "Edit HTML" page
Search the codes like below

<!--Get Social-->
<div id='get_social'>
<div class='get_social_wrap'>
<a class='follow_fb_link' href='http://www.facebook.com/FACEBOOK-ID' title='Follow Us on Facebook'/>
<a class='follow_twitter_link' href='http://twitter.com/TWETTER-ID' title='Follow Us on Twitter'/>
<a class='follow_rss_link' href='/feeds/posts/default' title='Subscribe to Our RSS Feed'/>
</div>
</div>
<!--Get Social END-->

Change "red text" with your own.

# SETUP MENU NAVIGATION
Go to "Edit HTML" page
Search the codes like below

<!--MENU-->
<div id='menu'>
<div class='topmenu'><div class='menu-header'><ul class='menu' id='menu-demo'>
<li class='menu-item'><a href='#'>Blog</a></li>
<li class='menu-item'><a href='#'>About</a></li>
<li class='menu-item'><a href='#'>featured</a></li>
<li class='menu-item'><a href='#'>Uncategorized</a>
<ul class='sub-menu'>
<li class='menu-item'><a href='#'>sub-category1</a></li>
<li class='menu-item'><a href='#'>sub-category2</a></li>
</ul>
</li>
</ul></div></div>
</div>
<!--MENU END-->

Change "#" with your link anchor/url
Change "red text" with your text anchor

# SETUP SLIDER CONTENT
Go to "Edit HTML" page
Search the codes like below

<!--SLIDER-->
<div id='sliderwrap'>
<div class='slidercontent'>
<div id='slider'>
<ul>
<li>
<div class='content'>
<h2><a href='#'>Title for slide 1 here</a></h2>
<p>Replace these every slider 1 sentences with your featured post descriptions.</p>
</div>
<img alt='' class='ep_thumb' src='http://3.bp.blogspot.com/-SMeoQ2gYri8/Ta-8eLeFVxI/AAAAAAAABHo/fGon-9L7vBc/s1600/screenshot.JPG'/ampgtltbr_/gtampltdiv_class/index.html'sframe'/ampgtltbr_/gtamplt/liampgtltbr_/gtampltliampgtltbr_/gtampltdiv_class/index.html'content'>
<h2><a href='#'>Title for slide 2 here</a></h2>
<p>Replace these every slider 2 sentences with your featured post descriptions.</p>
</div>
<img alt='' class='ep_thumb' src='http://3.bp.blogspot.com/-SMeoQ2gYri8/Ta-8eLeFVxI/AAAAAAAABHo/fGon-9L7vBc/s1600/screenshot.JPG'/ampgtltbr_/gtampltdiv_class/index.html'sframe'/ampgtltbr_/gtamplt/liampgtltbr_/gtampltliampgtltbr_/gtampltdiv_class/index.html'content'>
<h2><a href='#'>Title for slide 3 here</a></h2>
<p>Replace these every slider 3 sentences with your featured post descriptions.</p>
</div>
<img alt='' class='ep_thumb' src='http://3.bp.blogspot.com/-SMeoQ2gYri8/Ta-8eLeFVxI/AAAAAAAABHo/fGon-9L7vBc/s1600/screenshot.JPG'/ampgtltbr_/gtampltdiv_class/index.html'sframe'/ampgtltbr_/gtamplt/liampgtltbr_/gtampltliampgtltbr_/gtampltdiv_class/index.html'content'>
<h2><a href='#'>Title for slide 4 here</a></h2>
<p>Replace these every slider 4 sentences with your featured post descriptions.</p>
</div>
<img alt='' class='ep_thumb' src='http://3.bp.blogspot.com/-SMeoQ2gYri8/Ta-8eLeFVxI/AAAAAAAABHo/fGon-9L7vBc/s1600/screenshot.JPG'/ampgtltbr_/gtampltdiv_class/index.html'sframe'/ampgtltbr_/gtamplt/liampgtltbr_/gtamplt/ulampgtltbr_/gtamplt/divampgtltbr_/gtamplt/divampgt___ltbr_/gtamplt/divampgtltbr_/gtampltdiv_class/index.html'sl_control'/>
<!--SLIDER END-->

Change "#" with your link anchor/url.
Change "red text" with your own.

Animes Blogger Template Installations Guide

2011-05-22T23:05:00.000-07:00

Template Name: Animes Blogger Template
By : www.freebloggertemplate.info
Download link: Click here

# SETUP RSS and TWITTER
Go to "Edit HTML" page
Search the codes like below

<div class='topright'>
<a href='/feeds/posts/default'><img src='http://1.bp.blogspot.com/-yaScw00M2Wc/TdloLnH79bI/AAAAAAAABLo/kXvdStU6Ois/s1600/rss.png' style='margin:0 2px 0 0; vertical-align:top;'/> RSS Feed</a> 
&#160; <a href='http://twitter.com/yourtwittername' title='Follow me!'><img src='http://3.bp.blogspot.com/-vNZelG6gIEA/TdloVfd60SI/AAAAAAAABL4/6OeaAXPXiQA/s1600/twitter.png' style='margin:0 2px 0 0; vertical-align:top;' title='Follow me!'/> Twitter</a>
</div>

Change "red text" with your RSS link and Twitter name.

# SETUP TOP MENU NAVIGATION
Go to "Edit HTML" page
Search the codes like below

<ul id='pagemenu'>
<li class='current_page_item'><a href='/index.html'>Home</a></li>
<li class='page_item'><a href='#' title='About'>About</a></li>
<li class='page_item'><a href='#' title='Services'>Services</a></li>
<li class='page_item'><a href='#' title='Parent Page'>Parent Page</a></li>
<li class='page_item'><a href='#' title='Contacts'>Contacts</a></li>
</ul>

Change "#" with your link anchor/url
Change "red text" with your text anchor

# SETUP CATEGORIES MENU NAVIGATION
Go to "Edit HTML" page
Search the codes like below

<ul id='nav'>
<li class='current-cat'><a href='/index.html'>Home</a></li>
<li class='cat-item'><a href='#' title='Browsers'>Browsers</a></li>
<li class='cat-item'><a href='#' title='Computers'>Computers</a></li>
<li class='cat-item'><a href='#' title='Featured'>Featured</a></li>
<li class='cat-item'><a href='#' title='General'>General</a></li>
<li class='cat-item'><a href='#' title='News'>News</a></li>
<li class='cat-item'><a href='#' title='Parent Category'>Parent Category</a></li>
<li class='cat-item'><a href='#' title='Web Design'>Web Design</a></li>
<li class='cat-item'><a href='#' title='Blogger'>Blogger</a>
</li>
</ul>

Change "#" with your link anchor/url
Change "red text" with your text anchor

# SETUP SLIDER CONTENT
Go to "Edit HTML" page
Search the codes like below

<div id='myGallery'>

<div class='imageElement'>
<h3>This is featured post 1 title</h3>
<p>To set your featured posts, please go to your theme options page in wp-admin. You can also disable featured posts slideshow if you don&#39;t wish to display them.</p>
<a class='open' href='#' title='This is featured post 1'/ampgtltbr_/gtampltimg_alt/index.html'' class='full' src='http://3.bp.blogspot.com/-9L6ofhkPoR8/TdlnwutJJBI/AAAAAAAABJ4/lB2yNX63KW4/s1600/1.jpg'/ampgtltbr_/gtampltimg_alt/index.html'' class='thumbnail' src='http://3.bp.blogspot.com/-9L6ofhkPoR8/TdlnwutJJBI/AAAAAAAABJ4/lB2yNX63KW4/s1600/1.jpg'/ampgtltbr_/gtamplt/divampgtltbr_/gtltbr_/gtampltdiv_class/index.html'imageElement'>
<h3>This is featured post 2 title</h3>
<p>To set your featured posts, please go to your theme options page in wp-admin. You can also disable featured posts slideshow if you don&#39;t wish to display them.</p>
<a class='open' href='#' title='This is featured post 2'/ampgtltbr_/gtampltimg_alt/index.html'' class='full' src='http://2.bp.blogspot.com/-R6DqKrM7PKU/TdlnwzMT-1I/AAAAAAAABKA/Hbxt4cojpwM/s1600/2.jpg'/ampgtltbr_/gtampltimg_alt/index.html'' class='thumbnail' src='http://2.bp.blogspot.com/-R6DqKrM7PKU/TdlnwzMT-1I/AAAAAAAABKA/Hbxt4cojpwM/s1600/2.jpg'/ampgtltbr_/gtamplt/divampgtltbr_/gtltbr_/gtampltdiv_class/index.html'imageElement'>
<h3>This is featured post 3 title</h3>
<p>To set your featured posts, please go to your theme options page in wp-admin. You can also disable featured posts slideshow if you don&#39;t wish to display them.</p>
<a class='open' href='#' title='This is featured post 3'/ampgtltbr_/gtampltimg_alt/index.html'' class='full' src='http://4.bp.blogspot.com/-ZjGZtMQLd9c/TdlnxOxk42I/AAAAAAAABKI/jBuL-hhCFJ0/s1600/3.jpg'/ampgtltbr_/gtampltimg_alt/index.html'' class='thumbnail' src='http://4.bp.blogspot.com/-ZjGZtMQLd9c/TdlnxOxk42I/AAAAAAAABKI/jBuL-hhCFJ0/s1600/3.jpg'/ampgtltbr_/gtamplt/divampgtltbr_/gtltbr_/gtampltdiv_class/index.html'imageElement'>
<h3>This is featured post 4 title</h3>
<p>To set your featured posts, please go to your theme options page in wp-admin. You can also disable featured posts slideshow if you don&#39;t wish to display them.</p>
<a class='open' href='#' title='This is featured post 4'/ampgtltbr_/gtampltimg_alt/index.html'' class='full' src='http://1.bp.blogspot.com/-CwE9syb-7oU/TdlnxuyDNQI/AAAAAAAABKQ/eVy0rS0HBRc/s1600/4.jpg'/ampgtltbr_/gtampltimg_alt/index.html'' class='thumbnail' src='http://1.bp.blogspot.com/-CwE9syb-7oU/TdlnxuyDNQI/AAAAAAAABKQ/eVy0rS0HBRc/s1600/4.jpg'/ampgtltbr_/gtamplt/divampgtltbr_/gtltbr_/gtampltdiv_class/index.html'imageElement'>
<h3>This is featured post 5 title</h3>
<p>To set your featured posts, please go to your theme options page in wp-admin. You can also disable featured posts slideshow if you don&#39;t wish to display them.</p>
<a class='open' href='#' title='This is featured post 5'/ampgtltbr_/gtampltimg_alt/index.html'' class='full' src='http://2.bp.blogspot.com/-3pQzqTynj-s/Tdlnx7w_bfI/AAAAAAAABKY/NQXRlEWndRo/s1600/5.jpg'/ampgtltbr_/gtampltimg_alt/index.html'' class='thumbnail' src='http://2.bp.blogspot.com/-3pQzqTynj-s/Tdlnx7w_bfI/AAAAAAAABKY/NQXRlEWndRo/s1600/5.jpg'/>
</div>

</div>

Change "#" with your link anchor/url.
Change "red text" with your own.

FanzyZoom

2011-04-20T22:37:00.000-07:00

FancyZoom is a Javascript to zoom images inline. There are 2 javascript files to run FanzyZoom effect. You can use webhosting or online data storage encryption to host the js files.

All javascript files and background images include in Monte cristo blogger template zip file.

1. FanzyZoom.js
2. FanzyZoomHTML.js

the form of code :
<a href="/image.jpg"><img src="/image.jpg" /></a>

Originally, the form of code when you upload an image in blogspot are like this:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/-che6gkT_FF8/Ta_G-bMFftI/AAAAAAAABHw/XSKJCsKZi60/s1600/fancy.JPG"><img style="cursor:pointer; cursor:hand;width: 320px; height: 214px;" src="http://4.bp.blogspot.com/-che6gkT_FF8/Ta_G-bMFftI/AAAAAAAABHw/XSKJCsKZi60/s320/fancy.JPG" border="0" alt=""id="BLOGGER_PHOTO_ID_5597911637597454034" /></a>

So, you need to change the source image as same as the link image. Like this:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/-che6gkT_FF8/Ta_G-bMFftI/AAAAAAAABHw/XSKJCsKZi60/s1600/fancy.JPG"><img style="cursor:pointer; cursor:hand;width: 320px; height: 214px;" src="http://4.bp.blogspot.com/-che6gkT_FF8/Ta_G-bMFftI/AAAAAAAABHw/XSKJCsKZi60/s1600/fancy.JPG" border="0" alt=""id="BLOGGER_PHOTO_ID_5597911637597454034" /></a>

What a different between this images?

Image 1 without background styles.
Image 2 with background styles.
How to make the FanzyZoom background styles work?
1. Upload the FanzyZoom background images to your images hosting.

Example using photobucket.com:
1. Create FancyZoom images folder.
2. Upload the images.
3. Open FanzyZoom.js files (can use wordpad) then find this code
var zoomImagesURI = '/images-global/zoom/';
You only need to change "/images-global/zoom/" with your "images folder link" like this.
var zoomImagesURI = 'http://s530.photobucket.com/albums/dd341/fbtemplate/fancyzoom/';
4. upload the javascript files to your files hosting.