Latest Blogger|Blogspot Tips And Tricks

Zinmag Monezine Template

2009-06-05T04:43:00.000-07:00

I found this nice blogger template in www.bloggerblogtemplates.com . It has nice structure and easily setup. This is very suitable to any blogger .

The Monezine templates starts off with a thin strip before the blog title that hols the post and comments RSS icon and a search bar on the far right. Below that is space for the blog title as well as a big leaderboard advertisement on its right. Then we have two drop down menus that enable you to categorize your blog very well.

The speciality of monezine is that it enables you to monetize your blog, the featured content slider in this blog allows you to insert a leaderboard advertisement on each of these slides.

After that starts the main column, the best part about this template is that you do not need to put code for the readmore as its automatically done by the template. Under the headline we have the posted by author stamp and the date with complimenting icons.

Where the mini post on the home page ends there is a thin seperator line with the read more link with an icon on the right and a comment count on the left with a speech bubble icon. The sidebar is multicolumn, a single column that branches off into two, with a three column tab widget built into it along with ad boxes.

DOWNLOAD HERE !

How To Create Recent Articles Widget using Feed2JS

2009-05-20T23:49:00.000-07:00

1.First Go to Feed2JS Website.Look at the picture below.

2.Now fill in the form above.

URL Enter the web address of the RSS Feed :

http://yourblogname.blogspot.com/feeds/posts/default

Fill Other informations as your choice.Look at the example below.

3.Now Click on 'Generate JavaScript'.Now you can get your JavaScript code.

4.Log in to your dashboard--> layout- ->Page Elements

5.Click on 'Add a Gadget' on the sidebar.

6.Select 'HTML/Javascript' and add your JavaScript code and click save.

Now You are done.

How To Add Zoom Effect for images

2009-05-20T23:46:00.001-07:00

1.Log in to your dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see </head> tag.

4.Now add below code before </head> tag.

5.Now replace the <body> tag with <body onload='setupZoom()'>

NOTE : If in your template already has <body onload="setupZoom()"> code instead <body> tag ,skip this step.

6.Now save your template.

You have already add zoom effect for images.But,to zoom image you have to use this new form :

You must replace 'Image link' with your real url of image.You can change Height,Weight,.....

Look at the example below.

<a href="http://img2.pict.com/aa/ae/97/16680dfb7c10435cbefea4aa04/4OXiK/geneliadsouzawallpaperspicturesd.jpg"><img border="0" width="200" src="http://img2.pict.com/aa/ae/97/16680dfb7c10435cbefea4aa04/4OXiK/geneliadsouzawallpaperspicturesd.jpg" height="200"/></a>

It will look like this.click on the picture to see effect.

Read this : When you add this effect inside post if come html errors , check the box 'Stop showing HTML errors for the body of this post' and publish your post.Good Luck.

How To Create SnapShots for blogger blog

2009-05-20T23:44:00.000-07:00

This allows web users to preview a website before visiting it. When hover your mouse over the link you can see a preview of website without visiting it.

1.Log in to your dashboard--> layout- -> Edit HTML

2.Scroll down to where you see this:

</body>

3.Now copy below code and paste it before above code.

Note : red code is a HEX color code.You can change it if you like.

4.Now save your template and you are done.

How To Add FeedFlare below your Blog Post

2009-05-12T04:52:00.000-07:00

1. Login to your Feedburner account.

2. Click on the Feed Title.

3. Click on Optimize Tab.

4. Click on FeedFlare.

5. Check on the services you want to display in your Feed or on your Site.

6.There is a FeedFlare Preview/Ordering below the list of services. This lets you see how FeedFlare will appear in your feed and/or on your site. Just Click and Drag the links on the location that you want.

7.Click on "Activate".Now You will get this message.

8.Now in this window Before the Save button, there is a "Get the HTML code to put FeedFlare on your site". Choose the Blogging Platform as "Blogger"

9. A pop-up window will appear and it contains the instructions on how you embed the Feed burner FeedFlare on your blog.Just follow the instructions.Now wait about 20 minutes and refresh your site.Look at the example below.

Another Good Post Rating Widget for bloggers

2009-05-10T19:35:00.001-07:00

1.Log in to your dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this:

<data:post.body/>

4.After the above code , copy and paste the code below:

5.Click on "Save Templates" and refresh your site.

How To Give New look to Your Links

2009-05-10T19:33:00.000-07:00

1.Log in to your dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this:

a:hover {
text-decoration:underline;
}

4.Now Replace the above code with the code given below:

a:hover {
position: relative;
bottom: 5px;
left: 1px;
color:#000000;
}

5.Click on "Save Templates" and refresh your site.

Note : You can change the color of your link to your desired color when it tweaks.

Add Related Post Widget to Blogger-For Original Templates

2009-05-02T19:38:00.000-07:00

I found this tip in this site.

1.Log in to your dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this:

4.Copy below code and paste it immediately after the line <data:post.body/>

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

<div class='widget-content'>
<h3>Related Posts :</h3>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>

var homeUrl3 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;

maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;

function listEntries10(json) {
var ul = document.createElement('ul');
var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i < maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;

for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement('li');
var a = document.createElement('a');
a.href = alturl;

if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l < json.feed.link.length; l++) {
if (json.feed.link[l].rel == 'alternate') {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k<20; k++) label = label.replace("%20", " ");
var txt = document.createTextNode(label);
var h = document.createElement('b');
h.appendChild(txt);
var div1 = document.createElement('div');
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById('data2007').appendChild(div1);
}
}
}
function search10(query, label) {

var script = document.createElement('script');
script.setAttribute('src', query + 'feeds/posts/default/-/'
+ label +
'?alt=json-in-script&callback=listEntries10');
script.setAttribute('type', 'text/javascript');
document.documentElement.firstChild.appendChild(script);
}

var labelArray = new Array();
var numLabel = 0;

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

var test = 0;
for (var i = 0; i < labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length <= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel < maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>

</div>
</b:if>

5.Click on "Save Templates" and refresh your site.

Add Related Post Widget to Blogger-For Modified Templates

2009-05-02T20:02:00.000-07:00

1.Log in to your dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this:

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

<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/>
<a expr:href='data:post.url'><strong>Read more...</strong></a></p>
</b:if>

4.Copy Below code.

5.Now Paste it like the example below.

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

Paste Your Code here

<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/>
<a expr:href='data:post.url'><strong>Read more...</strong></a></p>
</b:if>

6.Click on "Save Templates" and refresh your site.

How To Make a Table Of Content

2009-05-02T22:13:00.000-07:00

1.Log in to your dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this:

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

4.Replace above code with the below code :

<b:if cond='data:blog.homepageUrl !=
data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<div style="padding:6px 0 6px 5px;border-right:1px solid #ccc;border-bottom:1px solid #ccc;margin-bottom:2px;background:#EAE9E9;color:#406A0E;">
<data:post.title/></div></a>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

5.Click on "Save Templates".

6.Click on Layout tab.Now Click on Add a Gadjet.Now Select "HTML/Java Script".

7.Copy below code and Paste it into the "HTML/Java Script" pop up window.

Note : You must replace YourBlogName with your real blog name and you can change the value of max-results=200 .

8.Now click Save and you are done.

How To Add "Read More" Feature To Blogger Post

2009-05-03T01:32:00.000-07:00

1.Log in to your dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this:

4.Replace above code with below code.

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/>
<a expr:href='data:post.url'><strong>Read more...</strong></a></p>
</b:if>

5.Click on "Save Templates"

6.Now go to Setting-->formatting-->Post Template.

7.Fill that "Post Template" blank text area with below code :

Look at the picture below.

8.Click on "Save settings"

9.When you post your article, choose "Edit Html" tab. and you will see the code below :

Look at this image.

10.Place the paragraps you want show with read more, above of below line.

11.Place the rest of the post (you want to hide) between below 2 lines.

Look at the image below.

12.Then Publish your post.You are done.

Note :If you want to add this feature to your old posts ,do the 9-12 steps to each posts.

How To Split Header Column to 2 Columns

2009-05-03T08:52:00.000-07:00

1.Log in to your dashboard--> layout- -> Edit HTML

2.Scroll down to where you see code like this:

/* Header
===================================
*/
#header-wrapper {
width:900px;
margin:0 auto 0px;
height:190px;
}

#header-inner {
width:900px;
background-position: center;
margin-$startSide: auto;
margin-$endSide: auto;
}

#header {
margin: 0px;
text-align: left;
color:$pagetitlecolor;
}

3.Replace above code with below code.

/* Header
===================================
*/

#header-wrapper {
width:900px;
margin:0 auto 0px;
height:190px;
}

#head-inner {
width:600px;
background-position: left;
margin-left: auto;
margin-right: auto;
float:left;
}

#header {
margin: 0px;
text-align: left;
color:#ffcc66;
}

#r_head{
width:300px;
float:left;
padding-top:10px;
}

4.Now again Scroll down to where you see code like this :

5.Replace above code with below code.

6.Click on "save Template" and you are done.

How To Add Blogger Login Form Widget For Blogger

2009-05-04T01:06:00.000-07:00

1.Log in to your dashboard--> layout

2.Click on "Add a Gadget".Pop-up window will open.Now select "HTML/Java Script"

3.Copy below code and Paste it into it.

Enter your username and password to enter your Blogger Dasboard <br/><br/><form action="https://www.google.com/accounts/ServiceLoginBoxAuth" method="post" onsubmit="onlogin()"><input value="http://www.blogger.com/loginz?d=%2Fhome&p=http%3A%2F%2Fwww.blogger.com%2F" name="continue" type="hidden"/><input value="blogger" name="service" type="hidden"/><input value="8" name="nui" type="hidden"/><input value="8" name="naui" type="hidden"/><input value="2" name="fpui" type="hidden"/><input value="3" name="uilel" type="hidden"/><input value="true" name="skipvpage" type="hidden"/><input value="false" name="rm" type="hidden"/><input value="true" name="alwf" type="hidden"/><input value="http://www.blogger.com/login.g" name="roeu" type="hidden"/><input value="0" name="alinsu" type="hidden"/><input value="WbQ8QiJfUvA" name="GA3T" type="hidden"/><div><label for="Email"> Username: <br/><input id="Email" tabindex="1" value="" name="Email" size="20" type="text"/></label></div><div><label for="Passwd"> Password: (<a href="https://www.blogger.com/forgot.g" target="_top" title="Forgot your password?">?</a>) <br/></label><input id="Passwd" tabindex="2" autocomplete="off" name="Passwd" size="20" type="password"/></div><br/><input id="signin-btn-ns" tabindex="0" value="Sign in" class="ubtn ubtn-block" name="submit" type="submit"/></form>

4.Now Click Save and Refresh your site.Look the example below.

Enter your username and password to enter your Blogger Dasboard

How To Add Icons on Every Blogger Widget of Blogger

2009-05-08T20:05:00.000-07:00

Adding Icons on your Every Blogger Widget , you can give a good look to your blog.Follow these simple steps to do it.

1.Log in to your dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this:

.main .Blog {
border-bottom-width: 0;
}

4.After the above code , copy and paste the code below:

.sidebar .widget h2 {
background: yellow url('URL OF YOUR IMAGE') no-repeat left top;
margin-top:5px;
text-indent: 20px;
padding:7px;
}

5.Click on "Save Templates" and you are done.

Note : You must replace URL OF YOUR IMAGE with your image(Icon) URL.

You can change background colour and other values of above codes if you like.

How To Add StumbleUpon Button in Every Bogger Post

2009-05-08T20:39:00.000-07:00

1.Log in to your dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this:

<data:post.body/>

4.After the above code , copy and paste the code below:

5.Click on "Save Templates" and refresh your site.

It will look like this.

How To Backup Your Blogger Template

2009-02-20T02:09:00.000-08:00

If you were the person who liked to play with HTML/Javascirpt,You Must Backup your template first.Sometimes mistake happened when you are playing with your template then you could do restore your template easily.So don't forget todo that.

1.Log in to your dashboard.

2.Now Click layout- -> Edit HTML.

3.Now Click Download Full Template and you are done.

Privacy Policy

2009-01-10T07:45:00.000-08:00

Privacy Policy for www.bloggertipandtrick.com

If you require any more information or have any questions about our privacy policy, please feel free to contact us by email at lasanthax3@gmail.com.

At www.bloggertipandtrick.com, the privacy of our visitors is of extreme importance to us. This privacy policy document outlines the types of personal information is received and collected by www.bloggertipandtrick.com and how it is used.

Log Files

Like many other Web sites, www.bloggertipandtrick.com makes use of log files. The information inside the log files includes internet protocol ( IP ) addresses, type of browser, Internet Service Provider ( ISP ), date/time stamp, referring/exit pages, and number of clicks to analyze trends, administer the site, track user’s movement around the site, and gather demographic information. IP addresses, and other such information are not linked to any information that is personally identifiable.

Cookies and Web Beacons

www.bloggertipandtrick.com does use cookies to store information about visitors preferences, record user-specific information on which pages the user access or visit, customize Web page content based on visitors browser type or other information that the visitor sends via their browser.

DoubleClick DART Cookie

.:: Google, as a third party vendor, uses cookies to serve ads on www.bloggertipandtrick.com.

.:: Google's use of the DART cookie enables it to serve ads to users based on their visit to www.bloggertipandtrick.com and other sites on the Internet.

.:: Users may opt out of the use of the DART cookie by visiting the Google ad and content network privacy policy at the following URL - http://www.google.com/privacy_ads.html

Some of our advertising partners may use cookies and web beacons on our site. Our advertising partners include ....

Google Adsense

These third-party ad servers or ad networks use technology to the advertisements and links that appear on www.bloggertipandtrick.com send directly to your browsers. They automatically receive your IP address when this occurs. Other technologies ( such as cookies, JavaScript, or Web Beacons ) may also be used by the third-party ad networks to measure the effectiveness of their advertisements and / or to personalize the advertising content that you see.

www.bloggertipandtrick.com has no access to or control over these cookies that are used by third-party advertisers.

You should consult the respective privacy policies of these third-party ad servers for more detailed information on their practices as well as for instructions about how to opt-out of certain practices. www.bloggertipandtrick.com's privacy policy does not apply to, and we cannot control the activities of, such other advertisers or web sites.

If you wish to disable cookies, you may do so through your individual browser options. More detailed information about cookie management with specific web browsers can be found at the browsers' respective websites.

Contact Me

2009-01-02T21:16:00.000-08:00

Denim Blogger Template

2009-01-19T18:40:00.000-08:00

Template name: Denim

Type: New Blogger Template (XML),3 Column

How To Add this template to your blog.

1.After download the Zip File, you must extract it with software extractor such as Winzip software or other software.

2.Now Log in to your dashboard--> layout- -> Edit HTML

3. Click on "choose" and upload your xml file.That's it.

Note : Before Upload your new template,Don't forget to backup your old template and your widgets.

Download Here !!! Denim Template

http://www.ziddu.com/downloadlink/4598907/denim.zip

Denim-Light Blogger Template

2009-01-19T18:28:00.000-08:00

Template name: Denim Light

Type: New Blogger Template (XML),3 Column

Denim-Washed Blogger Template

2009-01-19T18:24:00.000-08:00

Template name: Denim Washed

Type: New Blogger Template (XML),3 Column

Dots Blogger Template

2009-01-19T18:15:00.000-08:00

Template name: Dots

Type: New Blogger Template (XML),3 Column

How To Add this template to your blog.

1.After download the Zip File, you must extract it with software extractor such as Winzip software or other software.

2.Now Log in to your dashboard--> layout- -> Edit HTML

3. Click on "choose" and upload your xml file.That's it.

Note : Before Upload your new template,Don't forget to backup your old template and your widgets.

Download Here !!! Dots Template

Rounder-03 Blogger Template

2009-01-20T09:08:00.000-08:00

Template name: Rounder03

Type: New Blogger Template (XML),3 Column

Rounder-02 Blogger Template

2009-01-20T09:02:00.000-08:00

Template name: Rounder02

Type: New Blogger Template (XML),3 Column

SandDollar Blogger Template

2009-01-20T08:53:00.000-08:00

Template name: SandDollar

Type: New Blogger Template (XML),3 Column

How To Add this template to your blog.

1.After download the Zip File, you must extract it with software extractor such as Winzip software or other software.

2.Now Log in to your dashboard--> layout- -> Edit HTML

3. Click on "choose" and upload your xml file.That's it.

Note : Before Upload your new template,Don't forget to backup your old template and your widgets.

Download Here !!! SandDollar Template

Your Name
Your Email Address
Website / Blog
Subject
Message	form script