Blogger Hacks from TechnoJuice

This post is a round up of all the Blogger Hacks from TechnoJuice. The idea is create a Table of Content for all the Blogger hacks we do and will keep this post updated as new Widgets, hacks and mods are created.

1) How To get Flash Header - This is first hack we did to add a Flash blogger header.

2) Create quote/pullquote in your blog - Now here is quick way to create blockquote or Pullquote in blog. A blockquote is used when you are quoting someone else or when you want to display a code or when you are showing an example !

3) Comment Box - Widget for blogger - A neat widget for blogger which show the comments and leave your comment form in the same page as blog when you click the Comments link.

Instead of being taken to default blogger comment page this widget displays the comments in a neat box with a loading gif.

4) Remove the Blogger nav bar - How to remove the bar on top of your blogspot with a few lines of code.

5) Custom Blogger Meta Tag for Blog SEO - There is no feature in blogger to customize the Meta Tags.Here are some easy mods to optimize the Meta tags for Keywords, Description, Title and even customize for the Index page, post page and archive !

6) Different Post Title and permalink - Now Search engines like Google love keywords in Title and the URL, but in blogger the file name or the permalink of the post is based on the post Title you give. Simple hack for different Post tile and permalink.

[Last Updated 02 Oct 2007]

Read the rest of this Post »

Blogger Hack for better permalink SEO

Earlier we wrote about a cool blogger hack and code for Meta tags for keyword, Description and even Title. Get ready for another simple blogger Hack for better SEO ! Now Search engines like Google love keywords in Title and the URL, but in blogger the file name or the permalink of the post is based on the post Title you give. For example if the title is Blogger Title & Meta Tag Keyword ,Description hack - Blog SEO Tip the link by default becomes http://technojuice.blogspot.com/2007/09/blogger-title-meta-tag-keyword.html removing any special characters.

But adding many keywords make the title boring for that eye catching effect for people! So what's the solution ? Simple !

1) Give the post the title with the Keywords coming in first, so if you are writing a post on Apple and iphone make sure to include them in first 5 words. NEVER STUFF THE TITLE WITH UNNECESSARY KEYWORD WHICH LAND YOU ON THE BAD BOOKS OF SEARCH ENGINE.

2) Publish the post then click edit post.

3) Now change the title to something a little more catchy and publish the post again !

And you are done !

Do check out our other Blogger Hacks.


Learn Search Engine Optimization Today

Read the rest of this Post »

Blogger Title & Meta Tag Keyword ,Description hack - Blog SEO Tip

Every SEO guru and even pseudo guru will tell you the importance of Meta Keyword and description Tag in SEO, and it is obvious there are plugins to do just that in wordpress !

But there is no feature blogger to customize the Meta Tags.

So I made some easy mods to optimize the Meta tags for Keywords, Description, Title and even customize for the Index page, post page and archive !

By default Blogger gives only the title which is :-

<title><data:blog.pageTitle/></title>

This give the output as the Title of your blog !

So to start the mod we need to identify the there types of pages i.e. Index (main page), Item page (the individual post page) and Archive ! So the code needs have 3 scenarios.

Next is the Globally available Data tags that blogger provides which is unbelievably less ! There is no post title, no post keywords. Hence we are forced to use the following

<data:blog.title/>

Which is the title of your blog

<data:blog.pageTitle/>

This is the Page Title.

So here is the SEO meta tag code customize it according to blog before your add it to your blog HTML.

<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.title/> : Write some stuff about your blog here not too much since only 60 char is all robot read</title>
<meta name='Description' content='Describe your blog here since this is what will be shown if your index page comes in a search' />
<meta name='Keywords' content='Key, Words, Here, Dont, go crazy, only, add, relavent, keyword' />
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<title><data:blog.title/> : Write some stuff about your blog here not too much since only 60 char is all robot read</title>
<meta name='Description' content='Describe your blog here since this is what will be shown if your index page comes in a search' />
<meta name='Keywords' content='Add, some, more, key, word, here, but, keep, it, sane ' />
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageTitle/></title>
<meta name='Keywords' expr:content='data:blog.pageTitle' />
</b:if>
</b:if>
</b:if>

To add to your Blogger blog HTML go to Template > Edit HTML

Paste the above code (after customizing) as shown in the below image



Save the template and you are done !

Check out this post to avoid making SEO mistakes

Let me know if this made any difference in your result ranking !

Also check out how to optimize you post permalink for better Blogger Hack SEO.


Get the SEO secrets

Read the rest of this Post »

How to Hide/Remove the Blogger nav bar from your Blogspot

Now every one is familiar with these uber cool bar on top of your blogspot(one of those things of a free blog).

If you want you can hide it with a few lines of code. Now there is a huge dilemma whether it is against the TOS (Terms of Service) to remove the bar. But I couldn't find such a clause.

I find it harmless and choose not remove it after all my blog don't cost me dime. But here is how you can hide your bar.

1) Go to Template > Edit Html

2) Search for the string <b:skin><![CDATA[/*

3) Paste the following code after the line <b:skin><![CDATA[/*

#navbar-iframe {
height: 0px;
visibility: hidden;
display: none;
}

4) Click Save template

Now if your choose to hide the Nav bar the search feature to search within your blog will be gone.

To install a search box check out our Search Box Widget and install a search tool in just 2 clicks !

Read the rest of this Post »

Launching Comment Box - Widget for blogger

A neat widget for blogger which show the comments and leave your comment form in the same page as blog when you click the 1 Comments link. Check out the screen shot of the Comment Box.

Instead of being taken to default blogger comment page this widget displays the comments in a neat box with a loading gif.





If you are looking for Recent Comment Box then click Here

Sites Running on Comment Box :

iamseriouslyjoking.blogspot.com

Before you install:-
This is a Beta Version only for blogger platform. We assume you have the template layout feature in your blogger and not classic version. If not you can upgrade to template by doing this.

Backup your Template before any change. You can restore if things don't workout.
To do this Go to Template > Edit Html

Then click on Download Full Template to backup.A xml file will be downloaded This is your template.
To restore upload the same xml by browsing for the file and then clicking Upload

By installing you agree to Terms and condition


Requirements
This widget is tested in Firefox 2.0, Internet Explorer 6.0, Safari 3.0, Opera 9.22 and works fine in all version. This widget uses javascript and iframe and should be enabled in the end user browser.

You can be a beta tester and let us know your findings in the comments, be sure to include the Operating system and Browser


Installation
Here are the steps to install Comment Box on your blogger web log !

1) Click on the bellow button to install the widget.

<script src="http://technojuice10.googlepages.com/compop.js" type="text/javascript"></script>

2) You will be taken to add widget page in this page leave the Title blank and then click Add Widget


3) You will be taken to the Layout page now click Edit HTML as shown below


4) In the Edit Html page click on Expand Widget Templates check box




5) Search for the portion by Ctrl + F in the HTML for this string

span class='post-comment-link'

Here is the screenshot


6) Once found the text select the whole block as shown below :-



7) Copy the code from the link below and Paste it such that it REPLACES the above code. To do that you can delete the above code and paste immediately without changing the position.

Click to get the Code

8) Press Save template.

You are Done now check it out !

Uninstallation

To uninstall the widget First go to Template > Edit html in your blogger dashboard

Then click on Revert widget templates to default link.

Go to page elements then click edit then remove the comment box element.

Trouble Shooting

Now for all those people who screwed up. Most likely you will get this message

We were unable to preview your template

Please correct the error below, and submit your template again. Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.

Check out what the message states and act accordingly. Most likely you might have missed a tag or deleted something.
You can always copy the original template which you had saved and start all over again.

Copy the code from the code page exactly ! Do not paste on any App such as Word etc which will autoformat the code. Do not edit the code or change it any way.

Read the rest of this Post »

Create quote/pullquote in your blog !

Now here is quick way to create blockquote or Pullquote in blog. A blockquote is used when you are quoting someone else or when you want to display a code or when you are showing an example !





The basic plan is to create a Quote symbol as a image and set that as a background to the Blockquote tag. To do this we will be adding the CSS attributes in the HTML of the template. You can even modify this code and use it on platforms other than blogger.

1) Go to the Edit Html section in your Blogger Template (not classic) Template > Edit HTML

2) Now in the Html code go to the blockquote attribute section (Just seach for blockquote by Find tool Ctrl + F)

3) This is the section which would determine how your blockquote tag appears. The settings i have choose are

• Font to be italic
• The text has 30px padding on the left and 15px padding on the top
  
• The block has a quote image on the background

The code I replace is:-

.post blockquote {
margin:1em 0px;
font-style: italic;
padding-left: 30px;
padding-top: 15px;
background-repeat: no-repeat;
background-position: left top;
background-image:url('http://i197.photobucket.com/albums/aa309/technojuiceblog/quote.gif');
}

How to customize ?
You can customize the above code to best suite you blog. You can input your quote image by replace the image path in the background-image:url('yourimagepath.jpg')

You can even add border to your blockquote by the code
border: 1px solid #111111;

For more customization such as color of the text, font you can add style attribute. Check out W3school for more info on CSS.


How to use it ?

To use it simple select the text you want to format as a quote and then click on the Blockquote button on the toolbar on the Blogger editor.

By changing the style sheet all the blockquote you have entered till now on your previous posts also gets revamped automatically. No sweat !

Here is the demo:

Here is how the quote block
looks after the changes have been made
The font is italic
The text is padded to give prominence to the quote
The quote looks subtle in light gray

Check out more Blogspot mods and hacks >

Read the rest of this Post »

How To get Flash Header - My First Blogger Hack

It was hardly a week and I was getting bored of the header in blogger. It was unreal to think it is just a text or plain image ! In this age of jazzy looking headers this was pathetic !

So went out for a simple blogger hack. Here's a Tut for you.

Warning: This is long and possibly boring tutorial. You are responsible for your own action and if your blog acts funny or goes up in flames I am not responsible. Blame it on Weapons of mass Distruction. A coke could be handy during this tutorial.

Even if you are going to put a flash header you need to first upload a image header( dummy image) and choose the following settings.

Step 1



Step 2



Note: If you are uploading the image header for the first time than the "Placement" option will not be visible as soon as you upload one. Close the window and repeat step 1.

Step 3

Now comes the embedding part. Go to Template -> Edit Html

Then click on Expand Widget Templates



COPY THE WHOLE TEMPLATE TO A NOTEPAD AND SAVE IT IF THINGS GO BAD YOU CAN ALWAYS PASTE AND GO BACK T0 DEFAULT.


Now the default templates have too many waste space on either side of the bog so first you need to decrease that so that you can insert a big header.

Step 4

Under the edit template search for "#header-wrapper" (by Ctrl + F.... duh !)

This is the code which gives the header-wrapper attributes

#header-wrapper {
width:670px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Now I wanted a atleast 800 px width and I didnt like the border so I changed to

#header-wrapper {
width:800px;
margin:0 auto 10px;
border:0px solid $bordercolor;
}


Step 5

I dont want even the the header border (by default there are 2)

So search for "#header { "

#header { margin: 5px; border: 1px solid $bordercolor; text-align: center; color:$pagetitlecolor; }

Changed it to :-

#header { margin: 5px; border: 0px solid $bordercolor; text-align: center; color:$pagetitlecolor; }

Now check out the preview.

Step 6

Now if you need to increase the width of the blog. This is how you do it to Increase blog width :-

Search for the string "#outer-wrapper { "

#outer-wrapper { width: 760px; margin:0 auto; padding:10px; text-align:left; font: $bodyfont; }

I Changed it to:-

#outer-wrapper { width: 900px; margin:0 auto; padding:10px; text-align:left; font: $bodyfont; }


Step 7

To decrease the width between the main blog and the sidebar

Then Search for the string "#main-wrapper { "

#main-wrapper { width: 410px; float: left;

Change it to

#main-wrapper { width: 510px; float: left;

Step 8

Press Preview to check it out. Never Press Save Template until you are absolutely sure about the changes.

If everything looks smooth like a baby's bottom then lets go to the next step !

Step 9

Now we start to embed the flash header. (Finally! The pop-corn were almost over)

You need to host the flash header, choose a flash header that lets you hotlink and gives you the full file address (eg http://somebloodyfreehost.com/crap/your-god-damn-header.swf and not http://reallystingyhosting.com/free-shit/1287192837198237jsdkajdshakd/ )

Once you you've done that, replace the the src to the file address in the following flash embedding code !

<embed bgcolor="'#FFFFFF'" height="'140'" pluginspage="'http://www.macromedia.com/go/getflashplayer'" src="'http://somesite.com/yourheader.swf'" type="'application/x-shockwave-flash'" width="'700'/"></embed>

Dont forget the /> at the end
Keep the width less than that in Step 4 and now keep the code handy (Copy to clipboard would be good)

Step 10

The moment of truth. Now its a good time to have that coke cuz don't mess up this step

Search the template for "!--Show just the image, no text-- "

here is the screenshot



Now replace the selected block of code with the flash embed code from step 9

Now press preview. If every thing is ok then click Save Template

Here is the screen shot of before and after

Before:


After:



With a flash header in blogger you can add menus, search box, mouse over effects including sound. Best of all looks non-template and alive !

Troubleshooting
Now for all those people who screwed up. Most likely you will get this message

We were unable to preview your template

Please correct the error below, and submit your template again.

Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.

This will be followed by the xml error message like this

XML error message: The element type "embed" must be terminated by the matching end-tag "".

Check out what the message states and act accordingly. Most likely you might have missed a tag or deleted something.
You can always copy the original template which you had saved in Step 3 and start all over again.



Coming soon more menus and header mods

Let me know your comments ! you can also post yours in the comments !

Read the rest of this Post »