Free Blogger Templates

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.

Read More

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.

Read More

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>

Read More

Demo | Download

Read More

Demo | Download

Read More

Demo | Download

Read More

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>

Read More

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/

Read More

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>

Read More

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"'>

Read More