Tuesday, May 8, 2012

Indose Blogger Template Installations Guide

| 24 comments
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

Friday, April 27, 2012

Stylish-O Blogger Template Installations Guide

| 4 comments
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='/'>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

How to add Blogger Page Pagination

| 15 comments
#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;
}


Tuesday, April 10, 2012

Simply Delicious Blogger Template Installations Guide

| 14 comments
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='/'>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.

Sunday, April 8, 2012

Blucent Blogger Template Installations Guide

| 9 comments
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='/' 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

Wednesday, December 7, 2011

MagzNote Blogger Template Installations Guide

| 16 comments
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='/'>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

# 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-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?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script>
</div>

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

Monday, November 28, 2011

Ashen Blogger Template Installations Guide

| 3 comments
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='/'>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