Tricks « Blogger Templates

Posts filed under ‘Tricks’

Immediately Go to Your First Post-New Blogger Hack

Here is a simple blogger hack to immediately forward a user to the first post in your blog.

Put the following code between the <head> and </head> tags in your blogger template:

Enjoy!

January 14, 2008 at 7:35 am Leave a comment

Change the Title for blogger posts-Blogger Hack

Yes, Now you can change the Title of the blogposts on individual post-view. You might have seen that I’ve changed the Title of my homepage to “Tech blog for Blogger tricks, widgets, templates, adsense tips and much more.” This trick can help in boosting your search engine rankings.

By default, your Blogger’s title on the top left displays your blog title, and if it’s in the items page, it’ll include your post title as well.eg, Blogger TTT:Change the blog title for blogposts. By copying the coding from below, you can change the default behavior of the title tag.

Step 1-Goto Blogger Dashboard>>Layout>>Edit Html
Step 2-Backup your template
Step 3-Follow the instructions below

Find this code in your XML template{in header}

Now replace it with

<!– Start Widget-based: Changing the Blogger Title Tag –>
<b:if cond=’data:blog.pageType == “item”‘>
<b:section id=’titleTag’>
<b:widget id=’Blog2′ locked=’false’ title=’Blog Posts’ type=’Blog’>
<b:includable id=’comments’ var=’post’/>
<b:includable id=’postQuickEdit’ var=’post’/>
<b:includable id=’main’ var=’top’><title><b:loop values=’data:posts’ var=’post’><b:include data=’post’ name=’post’/></b:loop> ~ <data:blog.title/></title></b:includable>
<b:includable id=’backlinkDeleteIcon’ var=’backlink’/>
<b:includable id=’feedLinksBody’ var=’links’/>
<b:includable id=’backlinks’ var=’post’/>
<b:includable id=’status-message’/>
<b:includable id=’feedLinks’/>
<b:includable id=’nextprev’/>
<b:includable id=’commentDeleteIcon’ var=’comment’/>
<b:includable id=’post’ var=’post’><data:post.title/></b:includable>
</b:widget>
</b:section>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>
<!– End Widget-based: Changing the Blogger Title Tag –>

Further more you can add a very good keyword in homepage’s title by just adding Keyword + Blog Title by finding this line in the above code{3rd last}-

<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>

and adding keyword here

<b:else/>
<title> <data:blog.pageTitle/>Keyword</title>
</b:if>

Be creative in writing Keyword, it will surely help your blog grow and also for search engine optimization.
I would like to thank Webtalks for sharing such a great trick with us.

January 5, 2008 at 11:56 am Leave a comment

13 more built in online bookmarks for blogger

Here is 13 more built in bookmarkers you can use on your blogger / blogspot blog. There are Furl.net, ma.gnolia.com, blinkbits.com, meneame.net, simpy.com, myweb2.search.yahoo.com, digg.com, del.icio.us, ocio.fresqui.com, reddit.com, blinklist.com, netvouz.com, and of course technorati.com

here is the demo:

I have created 2 different version of this trick for you. that is the one for bookmarkers inside your post, and the another one is bookmarkers for outside of your post.on the download zip below, you will find 2 separated files, there are

blogger-bookmark-inside-post.txt
blogger-bookmark-outside-post.txt

What is the different?

1. blogger-bookmark-inside-post.txt is only applicable inside of a post widgets. while the blogger-bookmark-outside-post.txt is applicable anywhere.

so the outside-post is better then the inside post? well it depends. the outside codes will grabs the current link, and the current title of the browser. What does that means? It means, on default configuration, the title would be something like this: Your Blog Title Here : Then Your Post Title Here.

While on the inside code, it will just Your Post Title Here.

Are you confuse now? Good. then just download this codes below, and try it your self, so you’ll understand. Don’t forget to backup your template first. thanks!

DOWNLOAD HERE

[via Jack Book]

December 30, 2007 at 1:17 pm Leave a comment

A Comment Form Below the Posts-Widget For Blogger?

(Click image for Clean Priview)

Sorry for Not Updating my Blog Yesterday.I have Some Problems While Posting in Blogger and There Was Problem in Our House Electricity.So, Today I Find a Very Simple and Very Easy Way To have A comment Form Below Every Post!I Dont Think That it is a Widget or Trick..You Suggest!

Did you Notice The Picture Above?

Now you Blogger / blogspot users can have a comment form under your post. this mean your readers can leave and write a comment exactly under your post. without clicking and open a new page / window.

How to Do That?Sooo Easy:-
1. This is a free service from haloscan.com, so what you need to do is just register for a new account on haloscan.com, and about seconds, you’re registered.
2. Login to haloscan
3. Click the SubMenu “Install”
4. Choose your blog type, and because we’re talking about blogger, so blogger it is.
5. Click Next and follow the instructions.
6. Done, and congratulation

With this haloscan free services, we can have a better great comment system on our blogger / blogspot blog.

there are many great points about this services.
1. We can easily integrate it with cocoment.com service, so you can track your comments
2. You can customize the header of your comment from
3. it’s free. that’s the most important
so what are you waiting for?

I think You Have Noticed This Comment Form in My Blog!

Have an easy way to leave a comment Quickly!

December 28, 2007 at 6:12 am Leave a comment

How to Add 3 Columns to Footer Section-Blogger Hack

Adding extra columns to your footer section will provide more valuable space for blog widgets, and also contribute a modern “Web 2.0″ appeal for your blog design.

There are only four main steps to this tutorial, and I’m sure you’ll agree that the overall process is quite simple. I have taken into account that different blogs have different widths and styles, and so have designed a fluid solution which should work in any Blogger layouts template.

Creating the new columns

Here are the four steps needed to transform the footer section of your blog template:

Back up your existing blog template!

Before making any modifications to your blog template, it is essential that you make a back up of your existing template. Then if you make any mistakes, or decide you don’t like the new look, you can easily revert back to this design.

To back up your existing template, go to Template>Edit HTML in your Blogger dashboard, and click on the “Download Full Template” link near the top of the page. You can then save your existing XML template file to your computer.
Move all existing widgets from the existing footer section
In the Layouts section of your Blogger dashboard, move all widgets which are present in your footer section into your sidebar (or other section) instead. This is only temporary, as you can move them back later once we have finished adding your new footer section. Most importantly, this ensures that you don’t lose these widgets during the modification, and makes it much easier to complete.
Add extra code to your footer section.
Go to Template>Edit HTML in your Blogger dashboard, and do not check the “expand widget templates” box (this simplifies the process).

Now you need to find this section in your template:

Please note that this particular section may be called something slightly different in your template, eg: “footer-wrap” or “footer”. In the case of Rounders templates, you may notice that there are in fact two DIV sections around the footer section. In any case, all we need to change is the line highlighted in GREEN.

Replace the entire line highlighted in GREEN with the code below:

<b:section class=’footer-column’ id=’col1′ preferred=’yes’ style=’float:left;’/>
</div>

<b:section class=’footer-column’ id=’col3′ preferred=’yes’ style=’float:right;’/>
</div>

<b:section class=’footer’ id=’col-bottom’ preferred=’yes’>
<b:widget id=’Text2′ locked=’false’ title=” type=’Text’/>
</b:section>

</div>
<div style=’clear:both;’/>

</div>

is a good idea to save your template at this stage, before we add just one small section of code to style the new footer section and ensure that the widgets don’t get pushed beneath each other when you add them later.

Adding style for the new footer section

Once again, open the Edit HTML section in your Blogger dashboard. This time, you need to find the closing “</b:skin>” tag, which is where the style section of your template ends.

Immediately before this line, add the following lines of code:

#footer-column-container {
clear:both;
}

.footer-column {
padding: 10px;
}

And save your template again. The style in these lines of code ensure that the footer column don’t get too bunched up, or slide beneath each other in the layout of your template.

Now you have finished adding these new sections to your footer, go to the Layout section of your Blogger dashboard (Template>Layout), and you will see the three new column, plus a lower section which spans the width of all three column, to which you can now add new widgets!

I added a horizontal line to the footer section to ensure that there is a clear distinction between content in the footer columns and content in the wider section beneath. If you would like to change the color of this line, you can do so by replacing the hex color values in the line below (highlighted in red) with a different color:

If you are unsure of the hex value for the color you prefer, you can refer to the Color Calculator in the tools section of this site.

If you would prefer to remove the line altogether, simply delete the whole line.

I hope this tutorial enables you to customize your footer section with ease, so you can add more widgets and content to this area of your blog template.

For Future Updates,Please Subscribe!

December 25, 2007 at 7:16 am Leave a comment

How to Create Thumbnail images-Blogger Hack

In a nutshell, the hack takes advantage of the Page Element’s Link List and turns it into a Thumbnail Picture List element. As you might know, the link list allows the page owner to quickly add a bunch of urls for quick links to other interesting sites. My hack takes advantage of the GUI interface to quickly add/erase/arrange these links but pushes it further to upload image addresses instead.

Here are the steps to setup this hack. You are also required to know some HTML & CSS to further enhance this hack to make it your own unique version of it.

First, go to Template->Add Elements, then select sidebar’s Add Page Elements. Select Link List option at top right corner:

Next, add some sample pictures:

Then, drag-n-drop the newly created link-list from sidebar to post body area. (You can always move it back later.)

Go to Template->Edit HTML. Make sure to check the Expand Widget Template check box. Then look for the LinkList1 widget. It should be in front of all the other widgets, and right after the CSS portion of the code.

Then replace that widget with this one, make sure they have the same name (LinkList1):

<b:widget id=’LinkList1′ locked=’false’ title=’Random Pics’ type=’LinkList’>
<b:includable id=’main’>
<b:if cond=’data:title’><h2><data:title/></h2></b:if>
<div class=’widget-content’>
<div class=’hoctro_spacer’>
<b:loop values=’data:links’ var=’link’>
<a expr:href=’data:link.target’ onblur=’try {parent.deselectBloggerImageGracefully();} catch(e) {}’><img alt=” border=’0′
expr:src=’data:link.target’ height=’100′ style=’display:inline; margin:0px auto 10px; ;cursor:pointer;’ width=’100′/></a>
</b:loop>
</div>
<b:include name=’quickedit’/>
</div>
</b:includable>
</b:widget>

As you can see, I use the same code that Blogger provides when it successfully upload an image as a mean to show the image itself. You can use whatever it best fits your purpose.

Feel free to change this portion of code to anything you like. Just make sure the src and href parameters must be written as expr:src and expr:href respectively. This is an undocumented coding element, but I think that’s the way the Beta’s interpreter knows that it is an expression (to evaluate.)

Hope you will enjoy this new hack. Please give me your feedback.
[Thanks Hoctro.]

December 23, 2007 at 4:37 am Leave a comment

How to Add a Signature to Your Blogger Posts-Blogger Hack

If u Want to Pretty Up Your Post,There Are many Things,But to Add Signiture to your Blogger Post is Much Fun.Well,Below i am Showing a Tutorial How to Add a Signature to Your Blogger Post!

You must first have a signature that you want to have at the bottom of your post. This signature will be in the form of an image. To get that image, you can look online for sites that help create signagtures, or you can make your own using GIMP as I did. If you need help making a signature, read some of my posts on design and graphics. After you have your signature, upload it to your web host…I use Ripway.

Open your Dashboard/ Settings/ Formatting/ Post Template. Put this code in the Post Template box:

Replace SIGNATURE URL With The Image URL!
Enjoy!!

December 22, 2007 at 5:56 am Leave a comment

Super Peek-A-Boo Posts-Blogger Hack

In This Hack you can expand Posts from summary to full post, collapse them, and if you don’t have a post summary in a particular post, the “Read More…” and “Collapse” links will not show up in your post.

This is how to implement it.

Step 0:
Back-up your template before modifying it.

Step 1:
Add the following javascript code to the head of your template. You can place it just above the </head>-tag.

Step 2:

Find the includable named ‘post’ in your template, and change it so that it is exactly as shown below (the code in red has to be added):

<b:includable id=’post’ var=’post’>
<div class=’post’>
<a expr:name=’data:post.id’/>
<b:if cond=’data:post.title’>
<h3 class=’post-title’>
<b:if cond=’data:post.url’>
<a expr:href=’data:post.url’><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>
<div class=’post-header-line-1′/>

<div class=’post-body’ expr:id=’"post-" + data:post.id’>
<b:if cond=’data:blog.pageType == "item"’>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id=’showlink’>
<p><a expr:onclick=’"javascript:showFull(\"post-" + data:post.id + "\");"’ href=’javascript:void(0);’>Read More…</a></p>
</span>
<span id=’hidelink’ style=’display:none’>
<p><a expr:onclick=’"javascript:hideFull(\"post-" + data:post.id + "\");"’ href=’javascript:void(0);’>Summary only…</a></p>
</span>
<script type=’text/javascript’>checkFull("post-" + "<data:post.id/>")</script>
</b:if>
<div style=’clear: both;’/> <!– clear for photos floats –>
</div>
</div>
…. rest of template code ….

Save your template.

Step 3:
In the Settings – Formatting tab go to the bottom and enter the following post-template:

Type your summary here.
<span id="fullpost">
Type the rest of your post here.
</span>

Now every new post you start will have a fullpost-span by default. If your post is short, you can delete the <span>-tags from the post. The post will be displayed in full, and no links with "Read more…" or "Summary only" will be displayed for that post.

How it works (skip this if you don’t like tech stuff).
The changes you made to the code make that every post-body consists of at least 3 span’s: the fullpost-span that you entered in the post-template, a span for the ‘Read more’-link, and a span for the ‘Summary only’-link. Because there might be other spans in your post, each of these 3 spans have a unique id (‘fullpost’, ‘showlink’ and ‘hidelink’ respectively).
When you open your blog on the main page, the post is displayed as follows:

* Summary is displayed (always)

* Full text is hidden (first div, set to display:none)

* Read more is shown (second div)

* Summary only is hidden (third div, set to display:none)

The post is given a unique id, and this id is passed to the javascript-functions showFull and hideFull respectively. These functions use the getElementsByTagName-methods to obtain handles to the spans, and then toggle the way they are displayed.
A third function, checkFull, checks if the Fullpost-span exists. If not, both links are hidden.

December 19, 2007 at 10:37 am Leave a comment

How to Write HTML,Source or Java Script Codes in Blogger Posts

You want to know how to display html code / source code in your blog posts for the latest stuff you have created or want to show.

Here is an easy solution -

Go to the Encode/Decode HTML entries converter at Centricle

Just copy your entire html code / source code in the box at the above website and press encode/decode.

Now copy it back to your blog post (edit html / compose mode) and get your code displayed as you want people to see.
It is Sooo Easy!Try it!
Enjoy!

December 17, 2007 at 11:26 am Leave a comment

Older Posts

Blogger Templates

Posts filed under ‘Tricks’

Immediately Go to Your First Post-New Blogger Hack

Change the Title for blogger posts-Blogger Hack

13 more built in online bookmarks for blogger

A Comment Form Below the Posts-Widget For Blogger?

How to Add 3 Columns to Footer Section-Blogger Hack

Creating the new columns

How to Create Thumbnail images-Blogger Hack

How to Add a Signature to Your Blogger Posts-Blogger Hack

Super Peek-A-Boo Posts-Blogger Hack

How to Write HTML,Source or Java Script Codes in Blogger Posts

Recent Posts

Categories

Blogroll

Feeds

Recent Comments

Blog Stats

Follow “Blogger Templates”

	E.Khan-Edwardian on How to Install Invisible Music…
	Pip on How to Install Invisible Music…
	Ehtisham Khan-Edward… on New 2 Column Blogger xml …