Free Blogger Templates

Add shoutbox-chatbox to blogger/blogspot

2010-08-21T02:08:00.001-07:00

This article will guide you to add a free chat box to your blog.There are many chat boxes, in which Shoutmix is a popular chat box.

Step 1: Register a free ShoutMix account in http://www.shoutmix.com/main/

Click create shoutbox button to begin registering

Fill full information then click Continue to finish register

Dashboard of ShoutMix will appear as shown above, you can customize the color of the chat box in the Style & Colors.

Enter Customize size to get the code to insert into your blog, you can also customize the width and height of the shout box there.

Step 2: Adding shoutmix into blogger

Log in to blogger
On your Dashboard, select Design. This will take you to the Page Elements. Click Add a Gadget. Choose HTML/JavaScript and put the above code into it.

Scroll Bar Widget For Blogger / Blogspot - Add Scrollbar To Blogger Widgets

2010-08-13T20:59:00.001-07:00

In the previous article, I guide you how to add scrollbars to text widgets. In this one I will guide you how to add scrollbars to the any widget which you want.

As you know, every blogger's widgets are affixed an ID, such as the label widget below:

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

Label1 is the ID of the widget. In order to add scrollbar for this widget, you simply add the following code before: ]]></b:skin>

#Label1{
  
 height:200px;

  
 overflow:auto;

  
 }

200px is the height of the widget, you can adjust to suit your blog.

The results are as the picture above. Similarly you can do with the other widgets.

Adding scrollbars to text widgets - Scrollbars in Text Widget - Text Widget with scrollbars

2010-08-10T13:53:00.001-07:00

This article will guide you how to add a scrollbar to text widget.

Please insert the following code before the content of your widget:

<div style="overflow:auto;height:150px;">

After the end of content widgets please insert the following code:

</div>

The number 150 is the height of the widget, you can change to suit with your blog.

For example, I have a text widget contents as follows:

<div style="overflow:auto;height:150px;">
  
<p>First entry</p>

  
<p>Second entry</p>

  
<p>Third entry</p>

  
<p>Fourth entry</p>

  
<p>Fifth entry</p>

  
<p>Sixth entry</p>

  
<p>Seventh entry</p></div>

Oggi Blogger Template

2010-07-26T06:11:00.001-07:00

Demo | Download

Manchete Blogger Template

2010-07-26T06:04:00.001-07:00

Demo | Download

Televisão Blogger Template

2010-07-26T03:21:00.001-07:00

Demo | Download

How to add Retweet Button to Blogger / Blogspot

2010-06-12T01:40:00.000-07:00

Twitter – Twitter is a free social networking site that enables users to send short notices of 140 characters.

Retweet – This one enables to repost some interesting tweets on twitter.The retweet button can act more like a tweet counter

Adding a retweet button will show a neat count of how many times,your post has been tweeted about,and will also allow your readers to retweet it.

There are two versions of retweet buttons:

The Code for the Default Button is :

<script type="text/javascript"><br />tweetmeme_url = '<data:post.url/>';<br
/></script>

<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js">
</script>

The Code for Compact Button is:

<script type="text/javascript"><br />tweetmeme_style = "compact";<br
/></script>

<script type="text/javascript"
src="http://tweetmeme.com/i/scripts/button.js"></script>

Here is how to add them to your blogger post:

If you want it to the left side of blog post:

Find:

<data:post.body>

And Paste this code before that line:

<div style="padding: 3px 5px 5px 0px; float: left;">

<script type="text/javascript"><br />tweetmeme_url = '<data:post.url/>';<br
/></script>

<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js">
</script>

</div>

If you want it to the Right Side of post:

<div style="float:right;padding: 3px 0px 3px 3px;">

<script type="text/javascript">

tweetmeme_url = '<data:post.url/>';

</script>

<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js">
</script>

</div>

High PR Dofollow Blogs List 2010

2010-06-11T23:31:00.000-07:00

PR 6 Dofollow Blogs

http://www.grokdotcom.com/
http://www.currybet.net/
http://www.sirpi.org/
http://www.midasoracle.org/
http://weblogtoolscollection.com/
http://www.eartheasy.com/blog/
http://www.socialtimes.com/
http://www.themallblog.com/
http://www.thevirtualhandshake.com/blog/
http://blog.photography.si.edu/
http://interactiondesign.sva.edu/
http://www.jiscdigitalmedia.ac.uk/blog/

PR 5 Dofollow Blogs

http://andybeard.eu/
http://www.oilman.ca/
http://www.communityspark.com/
http://www.layercake.net/
http://www.hobo-web.co.uk/seo-blog/
http://justaddwater.dk/
http://www.krisbuytaert.be/blog/
http://therenegadewriter.com/
http://www.iayork.com/MysteryRays/
http://www.lifeinthefastlane.ca/
http://elleeseymour.com/
http://newcritics.com/blog1/
http://links.org.au/
http://www.knrn.org/
http://www.seobythesea.com/
http://blog.dmbcllc.com/
http://www.mouthpiecesports.com/blog
http://www.buzzmarketingwithblogs.com/
http://bytesizecss.com/
http://blog.astrumfutura.com/
http://www.uncommonphotographers.net/
http://aimee.mychores.co.uk/
http://pitchinvasion.net/
http://www.thevirtualhandshake.com/blog/
http://www.kthread.com/kthread/
http://blog.ruski.co.za/
http://knightcenter.utexas.edu/blog/?q=en/blog
http://career.ucsb.edu/blog/
http://gaming.psu.edu/
http://blogs.cetis.ac.uk/asimong/
http://blogs.nashuatelegraph.com/
http://www.outofmygord.com/
http://focusorganic.com/

PR 4 Dofollow Blogs

http://www.joebartender.com/
http://www.deardrmoz.com/
http://www.uppergreenside.org/blog/
http://cinnamonthoughts.org/
http://www.memwg.com/
http://www.steverenner.com/
http://www.rebeccawalker.com/blog/
http://www.canadienseneurope.org/
http://alemsys.com/
http://rumahabi.com/
http://kid666.com/
http://www.blueverse.com/
http://www.barrywise.com/
http://www.randomhacks.net/
http://www.stomperblog.com/
http://thesisthemehq.com/
http://middlezonemusings.com/
http://www.wordpressmax.com/
http://lillieammann.com/
http://www.techjaws.com/
http://kikolani.com/
http://wnagele.com/
http://www.bluehatseo.com/
http://www.growsmartmaine.org/blog/
http://www.thisclassicallife.com/weblog/
http://www.costpernews.com/
http://selberg.org/
http://www.drownradio.com/
http://omgpittsburgh.com/
http://www.scrapscene.com/
http://www.phpcafe.net/blog/
http://www.wallpaperstop.com/
http://elearning.lse.ac.uk/blogs/usc/
http://boykin.acis.ufl.edu/
http://dmiracle.com/
http://blog.waxmarketing.com/
http://www.retirement-income.net/blog/
http://nthambazale.com/
http://www.smallbusinessbranding.com/
http://blog.littlerockjams.com/
http://www.affordable-internet-marketing.com/
http://www.articlesnatch.com/blog/
http://blog.winesworld.com/
http://www.javelinmarketing.com/blog/
http://www.stephanmiller.com/
http://abstract2collective.blogspot.com/
http://wpsx.psu.edu/bluerobot/

How to disable right click in Blogger / Blogspot

2010-03-03T20:01:00.000-08:00

If you have quality content on your webpage and want to prevent people stealing your resources, you can add this script to disable the right-mouse click. This does not assure complete safety for your resources (there is always a way to copy them), but it is better than nothing.

Sign in to your Blogger Dashboard -> Click on the Layout -> Add a Page Element -> Html/Javascript -> Paste the code below and Save the changes.

<SCRIPT language=JavaScript>

<!-- http://www.spacegun.co.uk -->

var message = "function disabled";

function rtclickcheck(keyp){ if (navigator.appName == "Netscape" && keyp.which
== 3){ alert(message); return false; }

if (navigator.appVersion.indexOf("MSIE") != -1 && event.button == 2) {
alert(message); return false; } }

document.onmousedown = rtclickcheck;

</SCRIPT>

How to Show Blogger Links, Widgets in HomePage Only or Post Page Only

2010-03-03T18:40:00.000-08:00

Usually, by default when you add a widget item like Link Units, Archives, Adsense, Pictures, etc in Blogger / Blogspot, it will be displayed in every page of the blog including the home page, permalink pages. This post explains how to show the Blogger / Blogspot widgets on your blogspot blog Homepage Only or Post Page Only.

Showing in only Homepage
As usual, if you want to add a new widget to your blog, just Sign into Blogger dashboard -> Layout -> Add a Gadget and select the type of gadget you need and Save the Changes. Go to the Edit HTML and click on the "Expand Widget Templates". Normally, the widgets in the template view starts with this one:

<b:widget id=

For example, the label widget looks something like this:

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

and html widget looks like:

<b:widget id='HTML1' locked='false' title='Title' type='HTML'>

Just below that widget id label, you can see b: includable tab like this

<b:includable id='main'>

Just we have add a small piece of code below that b: includable tag

<b:if cond='data:blog.url == data:blog.homepageUrl'>

and we have to close that b:if tag. Just add this code before the closing tag of b: includable, like this:

</b:if>

</b:includable>

So, the final code looks similar the below screenshot
Now, your desired widget can only be visible in Homepage.

Show in only Post Pages

This will allow you to show a specific widget in only the Post Pages and not in Homepage.
Just follow the same tutorial above but replace this code.

<b:if cond='data:blog.url == data:blog.homepageUrl'>

with this one:

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

Showing widgets on a specific blog post url:

If you want to display a specific widget on a particular blog post, just simply follow the above tutorial, but replace this code:

<b:if cond='data:blog.url == data:blog.homepageUrl'>

with this one:

<b:if cond='data:blog.url == "Blog Post URL"'>

Submit Blogger / Blogspot to Blog Directories and Increase the Traffic

2010-03-02T01:14:00.000-08:00

Technorati: Technorati is the largest blog(weblog) directory currently tracking more than 112.8 million blogs. Join technorati and verify your authorship, then you will be provided with detailed statistics regarding your blog, how many blogs are linking to your blog,(they call it 'authority'). It is one of the best blog directory and will send tons of triffic if your blog is regularly updated.

Topblogarea: This is another big blog directory which rates and rank the blogs interms of Unique visitors your blog gets. They start the counting from Zero every week, so that even newly submitted blog can have the chance to rank higher in the list.

Topblogging.com: This is another source of weblogs which also rank the blogs according to the unique hits they get. Nice blog resource, bring you lots of traffic to your blog.

Blogtoplist: Same here, they rank according to the unique hits you get. But, there is a little change, they will give you to place a voting button in your blog. If any visitor votes for your site from your blog, that is equal to 100 unique hits, but there is only one chance per visitor (one IP address) a day.

Fuelmyblog: This is a cool weblog resource which is different from the ones we discussed so far. You can vote to other blogs and others vote to you. They will keep the top six blogs (voted the most) on the homepage. You can join their forums, read other blogs content, joining in the compitetions and win prizes, etc.
BlogCatalog: It is another good blogging resource,you can promote your blog here for FREE, find other blogs related to yours, etc. They have a special formula to rank the blogs, the more visitors, its, comments, neighbourhood you get the more your rank will be. Another recommended one. You can join their forums, discussion board, groups, etc with other bloggers and share your thoughts.

BloggingFusion: It is a new one and not a very big one (around 950 blogs) at this time. But, it is a good one and doing pretty well. You can increase your blog exposure, worth a link to it.

Blogarama: Cool weblog directory currently having more than 69,000 blogs. It will list the blogs in terms of the score your blog have. The score depends on so many things like incoming traffic, outgoing traffic, user ratings, etc. and if you send more traffic to they, they will list your blog in the top 100 blogs.

Topbloglists: Another blog directory which will rank your blog according to the unique hits your blog will get.

By bloggertricks

How to Add Youtube Videos to Blogger / Blogspot

2010-03-02T01:02:00.000-08:00

1. Go to youtube.com and search for your required video.

2. Copy the embeded code(ctrl+c) and paste(ctrl+v) it in windows notepad.
3. Sign in in to your Blogger acoount and click the New Post button and next, select the option 'Edit html' and paste the html code as shown below.
4. Publish the post. That's it, as you can see now, the youtube video is embeded in your post properly.

Add Paypal Donate Button to Blogger / Blogspot

2010-03-02T00:15:00.000-08:00

1. First, Log in to your Paypal account.

2. Click on the 'Merchant Services' tab (see at the top of the page).

3. Scroll down the window and you will see an option 'Donations' in the right sidebar.Click on it.

4. Now, you will see some options like Donation name/service, donation id, etc etc...
The first field (Donation name/service) is the only thing that is required and all the remaining fields are optional.
Enter that first field, choose a button style, scroll down the window and click on 'Create a button Now'

5. Now, you will see some html code... Copy it and sign in to your Blogger Dashboard -> Click on the Layout -> Add a Page Element -> Html/Javascript -> Paste that html code and Save The Changes.

By bloggertricks

Add Scrolling Text (Marquee) to Blogger / Blogspot

2010-03-01T23:58:00.000-08:00

Adding simple scrolling text:

<marquee>code to simple scrolling text</marquee>

The output will be like:
free-blogger-templates.com

If you want some more attraction, then try these:
Add a background color to the text

<marquee bgcolor="#99CCFF">code to simple scrolling text</marquee>

The output will be like:
free-blogger-templates.com

Here are some mode attributes to learn:

direction="left"



direction="right"



direction="up"



direction="down"

The above attributes tells the text which direction to scroll.
Use the code below:

<marquee direction="right" bgcolor="#99CCFF">code to simple scrolling 
text</marquee>

The output will be like:
free-blogger-templates.com

That's it! Now you can add this to your blogger sidebar,in the blog post,where ever you want.

Adding Meta Tags to Blogger / Blogspot

2010-03-01T23:18:00.000-08:00

1. Log in to blogger

2. On your Dashboard, select Layout. This will take you to the Template tab. Click Edit HTML. Under the Edit Template section you will see you blog's HTML.

3. Add code below after <head>

<meta content='DESCRIPTION
HERE' name='description'/>

<meta content='KEYWORDS HERE'
name='keywords'/>

<meta content='AUTHOR NAME HERE'
name='author'/>

Add "Read more" to Blogger / Blogspot

2010-03-01T09:23:00.000-08:00

1. Back up your existing template code

To do this, go to Layout -> Edit HTML in your Blogger dashboard, and click on the link which says "Download full template". This will allow you to save a copy of your existing template in XML format which you can use to restore your blog if ever your template edits go awry.

2. Choose to create a new post. On this page, click on the "Edit HTML" tab so this becomes highlighted. Then in the content box below, paste this entire section of code, exactly how this is written here:

This is the summary

<span id="fullpost">

This is the rest of the post

</span>

Then save this post.

This will only be a temporary post, to help you understand if the following edits you make are working. Once you have installed this hack into your template, you can delete this post.

3. Next go to Layout -> Edit HTML in your Blogger dashboard, and check the "Expand widget templates" box.

4. We now need to add the required JavaScript code to the head section of your blog template.
This is the easy part of the installation! Simply copy all of the code on this page to your clipboard (you can do this easily using the keyboard shortcuts CTRL+A followed by CTRL+C).

Next, locate this line in your blog template:

</head>

Paste the code from your clipboard directly before this line.

5. Here comes the tricky part...
In your blog template, you will need to locate the DIV section which contains this line:

<p><data:post.body/></p>

In many templates, this section will look something like this:

<div class='post-body>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

However, the class of the containing DIV section may be called something different, such as:

div class='post'
div class='entry'
div class='post-body entry-content

In the case of third party templates, this could well be something else
entirely!

The best way to locate this is to search for <data:post.body/> using the CTRL+F
function in your browser, then take a look at the surrounding code to work out
where you need to edit.

6. Once you have found this section of code, take a look at
the code below. I've added some code in red, which is what you will need to add
in your own template. As I have explained, the <div class='post-body'> section
may be named differently in your own blog template, so do bear this in mind!

<div class='post-body' expr:id='"post-" + data:post.id' >

<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/></p>

<span id='showlink'>

<a expr:href='data:post.url'>Read More......</a>

</span>

<script type='text/javascript'>

checkFull("post-" + "<data:post.id/>");

</script>

</b:if>

<div style='clear: both;'/> <!-- clear for photos floats -->

</div>