widget: Google Translate

By Akbach May 6, 2008

Google Translate widget is the easy way to give your visitors the ability to translate blog content into other
language.

Google Translate official Page

Allows for easy, one-click translation of your webpage when you syndicate this gadget on your page.

To install the widget in your blog, just Copy and paste the code blow in an HTML/JavaScript element:

<script src="http://gmodules.com/ig/ifr?
url=http://www.google.com/ig/modules/translatemypage.xml&up_source_language=en&synd=open&w=16
0&h=60&title=Google+Translate+My+Page&lang=en&country=ALL&border=%23ffffff%7C0px
%2C1px+solid+%23993333%7C0px%2C1px+solid+%23bb5555%7C0px%2C1px+solid+
%23DD7777%7C0px%2C2px+solid+%23EE8888&output=js"></script>

Edit Tabs Menu

here's tutorial to edit tabs menu from my templates:

- Login to blogger, go to "Layout --> Edit HTML"

- Find this code :

<LI><A href='http://x-template.blogspot.com/'><SPAN>Home</SPAN></A></LI>

<LI><A href='http://trick-blog.blogspot.com'><SPAN>Blogger Hack</SPAN></A></LI>

<LI><A href='http://trik-tips.blogspot.com/' target='_blank'><SPAN>Trik Blogging</SPAN></A></LI>

<LI><A href='http://ebooks-box.blogspot.com/' target='_blank'><SPAN>Ebook Box</SPAN></A></LI>

<LI><A href='http://freeebook.freehostia.com.blogspot.com/' target='_blank'><SPAN>Free

Ebook</SPAN></A></LI>

<LI><A href='http://free3d.freehostia.com/' target='_blank'><SPAN>Free 3d Models</SPAN></A></LI>

- The red text is anchor text that display on the menu, and the yellow text is link of the menu. You can
cange the anchor text and links to whatever you want.
- If you want to delete some of the menu, just delete it from this code <LI> until this code </LI> (Like the
bold text).
- If you wanna add same menu, just add the code like the bold text and edit the red and yellow text.

How to Fix Search Engine Template

Some of my templates use search engine form, you need to change it before it work. Here'is the tutorial to
make your search engine working correctly

Login to Blogger, go to Edit HTML

Find this code :

<div id='footheader'>
<form action='http://YOURBLOGNAME.blogspot.com/search' class='searchform'
method='get'>
<label class='floatl'>search:</label>
<input class='s floatl' name='q' type='text' value=''/>
<input class='searchsubmit floatr' type='submit' value=''/>
</form>
</div>

Change "YOURBLOGNAME" text with your blog name.

OK, Congrats.....

Make Blog More Expressive With Auto Smile Icon

Kendhin

Blogger Hack

In this episode I will explain to you "how to make your blog more expressive with smile icon" without copy
an image and put to your blog, but with only little code and then it will be smile icon image automatically.
For example, if you type this code :) it will atomatically change to this image :) , this code :p will be like
this :p and etc. Do you interest? if no, go from my blog :D
here's the trick:

1. Login to blogger then chose "layout --> Edit HTML"

2. Find this code ]]></b:skin>, if you found it then put the code below under it.

<script src='http://kendhin.890m.com/smile/smile.js' type='text/javascript'/>

3. Save your editing.

* Before you type the code you have to press "space" first"

here is the code to show smile icon

:) --> :)
:( --> :(
:p --> :p
:D --> :D
:$ --> :$
;) --> ;)
:@ --> :@
:# --> :#
:k --> :k
:x --> :x
:o --> :o
:O --> :O
:L --> :L
:r --> :r
:s --> :s
:y --> :y
:~ --> :~
:v --> :v
:f --> :f
:d --> :d
:c --> :c
:z --> :z

http://trick-blog.blogspot.com/2008/01/make-blog-more-expressive-with-auto.html

Widget to Put Comment Box Under Posting

Kendhin

Blogger Hack, Comments, Widgets

Sometimes ago I have posted an articel about "How to Create Commnet Box Under Posting" it use
haloscan comment box. It working well for some bloger and bad for some bloger too. If you failed or
dislike using haloscan comment box, may be this will be alternatifvfor you. This comment box is created
by intensedebate.com, this comment box can be use as a widget, and to apply this widget is very simple,
and to remove this is more simple it just like when you remove Page Element from your blog. Ok, if you
interest to try this widget I’ll show you how to put it.

1. Login to Blogger.com the chose "Layout --> Edit HTML", click on the link "Download Full Template" to
backup your template first

2. Then go to intensedebate.com site sgn up, the login and go to "dashboard"

3. On the up right you will see "add blog" button, click the button

4. Then you will see a box to insert your blog url, fill it then press the button .

5. Then you will see a page like this:

intense

6. For easy, chose"Widget (Recomended)".

7. There are some choice on the "Replace Comment System". Chose "On post without comments" if you
want the comment box show under no comment articel (your previouse comment still exist). If you want
the comment box exist on every posting chose "On all blog post" (You will lose your previouse comments,
but it can be restored).

8. The click "Complete Installation" button.

9. You will see the page like this :

addwidget

10. Chose your blog then click "ADD WIDGET" button.

Finish...

How to Create Comment Box Under Your Post

Kendhin

Blogger Hack

Before you read this articel, I suggested you to read this first

If you create a blog use wordpress, you will have comment box under your post. but if use blogger.com
it's different, under your post is only a link that will open a window to post a comments. It's why webblog
use wordpress have more comments in their blog than blogger.com. But don't worry, for us who use
blogger, now we can trick it with free service from haloscan comments box. But the risk if you use this
comment box is you will lost your previous comments, so think this deeply. If decided to use this commnet
box let's begin our class.

Warning : This methode can have many risk, some template is not support for this comment box, it's can
cause you lost your post. So you have to back up your template first.

Here's the trick

1. Login to bloger and klick "layout --> Edit HTML, klick "download full templates link to download your
template.
2. Then open this website http://www.haloscan.com.
3. You have to sign up first. Then you log in.
4. You will found some tabs menu, First chose "setting" menu, Please set it firs then save.
5. If you did then chose "install" menu.
6. If you use blogger beta, chose radiobutton "Blogger or Blogspot (New Version / Google Login)", if you
use blogger classic chose "Blogger or Blogspot (Old Version)". Then click "next" button
6. Click brows button and find your template file. Then click "Upload blogger template" button.
7. After that click "download new template" and save it.
8. Back to blogger "Edit HTML", click "brows" button and find your new template from haloscan. Then
click "upload" button.
9. Save your editting.

Now you have comments box unr your post.

If you want to show "recent comments" on your sidebar just go to haloscan dashboard, you will see your
recent comments and under it there a link "Put this widget on your site", click the link you will see a box
with scripts, copy the script and paste into your blog.

Good Luck..

Change Post Date Become Calender Icon

Kendhin

Blogger Hack

If you bored with your blog face, may be you can use this trick to make your blog more beautiful. This trick
will explain "how to change posting date to become a calender icon" like as you see in my blog. If you
interest c'mon let's do it now.
The first thing you have to do is change your "date header format" to become mm.dd.yyyy (1.24.2008).
How to do this? go to your blogger account, then chose "Setting --> Formatting, change "date header
format" to become what I said before (mm.dd.yyyy) then save your setting.

Next step is go to tabs "Template --> Edit HTML". Don't forget to backup your template first. Click on a
"Expand Widget Templates" check box. OK lets go to the deep trick.
1. Find this code <TITLE><data:blog.pageTitle/></TITLE> in your HTML. If you found it, put the code
below under it.

<SCRIPT type='text/javascript'>
//<![CDATA[
/*********************************/
/* http://trick-blog.blogspot.com */
/*********************************/
function date_replace(date) {
var da = date.split('.');
var day = da[1], mon = da[0], year = da[2];
var month =
['0','Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
document.write("<div class='month'>"+month[mon]+"</div> <div class='day'>"+day+"</div>");
}
//]]>
</SCRIPT>

2. Then Find this code:

.date-header {
margin: 1.5em 0 0;
font-weight: normal;
color: $dateHeaderColor;
font-size: 100%;
}

if you can't found it try to find this:

h2.date-header {
margin:1.5em 0 .5em;
}

3. OK, you have found it? next step is put the below code under it.

.dateblock {
background: url("http://blogoholic.info/files/kalender/bluecalend.gif")
no-repeat;
width: 50px;
margin: 0;
font-weight: bold;
height: 50px;
/*position: absolute;
top: 0;
left: 0;*/
float: left;
text-align: center;
}

.month {
font-size: 11px;
width: 37px;
margin: 0 5px;
text-transform: uppercase;
color: #fff;
}

.day {
color:#3366CC;
font-size: 19px;
width: 37px;
margin: 0 5px;

Code http://blogoholic.info/files/kalender/bluecalend.gif is the place for calender icon, you can change it
with your own image or use my image below. what to do is change the bold text with the pictures code
below, for example, if you want to change it with red icon calender, just change bluecalend.gif with
redcalend.gif.
here is the icon images:

blackcalend.gif blue2calend.gif bluecalend.gif

greencalend.gif orangecalend.gif pinkcalend.gif

redcalend.gif ungucalend.gif yellowcalend.gif

4. Next step is find this code <data:post.dateHeader/>. The easy way to find it is by copying the code the
press Ctrl-f then paste to the shown box, you will found the code immediately. If you didn't anything you
can find it manually. OK, If you found it change the code with the below script.

<DIV class='dateblock'> <SCRIPT> date_replace('<data:post.dateHeader/>');</SCRIPT></DIV>

5. Save your editting, and see the result, is it working? :t

if the month and date upper, you can add this code padding: 4px 0px 0px 0px; under this code .month
{ and this .day {

Good Luck ............

How to Create Horizontal Tabs Menu

Kendhin

Menu

What is horizontal tabs menu? horizontal tabs menu is bla..bla..bla... I can't explain anymore, he..he., it's
look like this:

To create it is not as simple as it's look, it's complicated. You have to design button, you have to create
CSS and HTML code. Now I will show you how to create "Horizontal tabs menu" in blogger.

The first thing you have to di is create an image like this:

and
If you can't to create it, you can use my below images:

blackleft.gif blackright.gif

greenleft.gif greenright.gif

redleft.gif redright.gif

unguleft.gif unguright.gif

yellowleft.gif yellowright.gif

blueleft.gif blueright.gif

whiteleft.gif whiteright.gif

Ok, let's begin

1. Login to Blogger, chose "Lay out --> Template --> Edit HTML"
2. Don't forget to backup your template first.
3. Check the "Expand Widget Templates" checkbox.
4. Try to find this code ]]></b:skin>, if you found it then put the code below above it

/*credits : http://trick-blog.blogspot.com */
#tabshori {
float:left;
width:100%;
font-size:13px;
border-bottom:1px solid #2763A5; /*Under Line, you can change or delete it */
line-height:normal;
}
#tabshori ul {
margin:0;
padding:10px 10px 0 50px; /* Menu position*/
list-style:none;
}
#tabshori li {
display:inline;
margin:0;
padding:0;
}
#tabshori a {
float:left;
background:url("http://blogoholic.info/files/menu/blackleft.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabshori a span {
float:left;
display:block;
background:url("http://blogoholic.info/files/menu/blackright.gif") no-repeat right top;
padding:5px 14px 4px 4px;
color:#24618E; /*Text menu color*/
}
#tabshori a span {float:none;}
/* End IE5-Mac hack */
#tabshori a:hover {
background-position:0% -42px;
}
#tabshori a:hover span {
background-position:100% -42px;
}

you can change the bold text with other image, for example, if you want to chose my red menu image the
code will be like this:

background:url("http://blogoholic.info/files/menu/redleft.gif") no-repeat left top;

background:url("http://blogoholic.info/files/menu/redright.gif") no-repeat right top;

5. Then copy the code below

<div id="tabshori">
<ul>
<!-- Change the links with your own links -->
<li><a href="http://trick-blog.blogspot.com"><span>Home</span></a></li>
<li><a href="http://trick-blog.blogspot.com"><span>Trik-Tips</span></a></li>
<li><a href="http://trick-blog.blogspot.com"><span>Free Template </span></a></li>
<li><a href="http://trick-blog.blogspot.com"><span>Blog Dictionary</span></a></li>
<li><a href="http:/trick-blog.blogspot.com"><span>Profile</span></a></li>
</ul>
</div >

change http://trik-tips.blogspot.com with your own link, and change the bold text with your own text.

6. Next step is to put the tabs menu into your blog, this more difficult because we have different
templates. There are some methods to do this, Here is the methods, you can chose and try for any
methods.

- methode A:
Find this code :<div id="content-wrapper">. if you found it, paste the above code (code number five)
above it. Preview your template, if it looks good save your editting, but if it's not good try to put above this
code </div>, you will find many codes like that, try to put the code above it and preview your your blog, do
it more often until it's suitable for your template.

If you have nice with your menu position, is unnecessary to do methode B, but if you feel difficult to apply
methode A you can try methode B
- methode B:
Find the below code :

<b:section class='header' id='header'

maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true'
title='your blog title (Header)' type='Header'/>
</b:section>

change the green text so that to become like this:

<b:section class='header' id='header'
maxwidgets='2' showaddelement='yes'>
<b:widget id='Header1' locked='false'
title='your blog title (Header)' type='Header'/>
</b:section>

Save your setting, the go to "Page Elements" and click "Add page Element " on the header area, chose
"HTML/JavaScript" then put the number five code above into "content" box, then click "save" and preview
your new blog.

Show or Hide Your Full Post in Blogger

Kendhin

Blogger Hack

This is the way to show or hide your full post on the main page of your blog. This is different from my old
"Read More " methods. If in old "Read More" Methods it will show "Read More" link, then if you click the
link you will load and go to another page that will show your full post/articel. But with my next methode
below, if you click the link you will see your full post/articel in the same page and it no needs time to load,
it only expand your full post. Do you want to try it? here is the trick:

1. Login to Blogger, Chose "Layout --> Template --> Edit HTML

2. Click "Download Full Templates" link to back up your template.
3. Check on the "Expand Template Wdiget" Check Box.
4. Copy the code below and paste above this code </head>

<script src='http://kendhin.890m.com/Readmore.js' type='text/javascript'/>

5. Then find this code <div class='post-header-line-1'/> .

6. If You found it you will see a code like this:

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

or

<div class='post body'>

7. The next step is change or replace the code (Only Number 6 code) to be like this:

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

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

8. Under it you will see a code like this <p><data:post.body/></p>

9. Put the code below under it.

<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);'>[+/-]
Show Full Post...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-]Hide
Full Post...</a></p>
</span>
<script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>
</b:if>

10. So, the full code will like this :

<div class='post-header-line-1'/>
<div class='post-body entry-content' 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);'>[+/-]
Show Full Post...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Hide
Full Post...</a></p>
</span>
<script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>
</b:if>

11. Save Your Editing.

12. Go to menu "Setting --> Formatting"
13. On the bottom page you will see a box beside text "Post Template". Copy the code below and paste in
to the box

<span id="fullpost">

</span>

14. Save your setting.

15 If you want to post an articel place your part articel above this code <span id="fullpost">. Then the
remain or full post put between this code <span id="fullpost"> and this </span>

GOOD LUCK>>>>>

How to Create Read More

Kendhin

Blogger Hack

If you post an articel to your blog it will displayed on a main page, if you have a long post content, your
blog will opened more long time. But it can be tricked with a script to short your post or only abstraction
post will dispaled on a main page, and the full post will replaced by "Read More" link. Here's the trick to
create "Readmore"

1. You have to Login to blogger, then chose Layouts --> Edit HTML
2. Click on "Expand Widgets Template" checkbox.
3. Find the code below in your HTML Codes. ( the short way to find is by copy the code below then press
"Ctrl + F" then paste in the box)

<div class='post-header-line-1'/>
<div class='post-body'>
or

<div class='post-header-line-1'/>
<div class='post-body entry-content'>

4. If you have found it, put the code below under the above 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>

5. Under the code, you will find code like this <p><data:post.body/></p> you have to put the code below
under it.

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

</b:if>

6. You can change the "Read More" text with other.

7. Save your job.
8. Go to Setting --> Formatting Tab menu
9. At the lower page you will found "text area" box beside text "Post Template"
10. Put the code below to the box

<span class="fullpost">

</span>

11. Then click Save the setting.

12. If you want to post, put your short post or description above this code <span class="fullpost">, and the
next or full post put between <span class="fullpost"> and </span> code.

GOOD LUCK!!!!!

Change The Address bar Icon (Favicon)

Kendhin

Blogger Hack

If you open a web/blog you will see an icon on addressbar. If you make blog in blogger your default icon
will be like this:
But you can change the icon (favicon) with your own picture. it's very simple to do that. The first thing you
have to do is prepare an image with low dimension, it's about 22x22 pixel to 32x32 pixel, actualy bigger is
no problem but it will reduce speed to open your web/blog. And they can be formatted as gif, jpg, bmp,
ico, png. Then you store your image to webhosting. But if don't know how to make it or don't want to
occupied you can use the icon listed below. Ok lets begin the trick.

1. Login to blogger, chose "Layouts --> Edit HTML

2. Put the code below into your <head> tag or before <head> code.

<link href='http://www.geocities.com/uddin_81/icon/image1.gif' rel='SHORTCUT ICON'/>

3. The bold text is an address for your icon, you can change it with your own or just copy the below listed
address icon.
4. Save your editing.

here is the icon and it's addres

: http://www.geocities.com/uddin_81/icon/image1.gif
: http://www.geocities.com/uddin_81/icon/image2.gif
: http://www.geocities.com/uddin_81/icon/image3.gif
: http://www.geocities.com/uddin_81/icon/image4.gif
: http://www.geocities.com/uddin_81/icon/image5.gif
: http://www.geocities.com/uddin_81/icon/image6.gif
: http://www.geocities.com/uddin_81/icon/image7.gif
: http://www.geocities.com/uddin_81/icon/image8.gif
: http://www.geocities.com/uddin_81/icon/image9.gif
: http://www.geocities.com/uddin_81/icon/image10.gif
: http://www.geocities.com/uddin_81/icon/image11.gif
: http://www.geocities.com/uddin_81/icon/image12.gif
: http://www.geocities.com/uddin_81/icon/image13.gif
: http://www.geocities.com/uddin_81/icon/image14.gif
: http://www.geocities.com/uddin_81/icon/image15.gif
: http://www.geocities.com/uddin_81/icon/image16.gif

How to Hide Navbar (Navigation Bar)

Kendhin

Blogger Hack

Navbar (Navigation Bar) is fasility of blogger.com. But many blogger want to hide this navbar because it
will make their blog layout look better without a box (navbar) above it. The Question "is this break TOS
(Term Of Service) of blogger.com?" I don't know, but so far is good, there are many blogger hide their
navbar but no reaction from blogger.com. So? do you want to hide Your blog navbar? if you want here's
the trick to hide blogger navbar:

1. Login to Blogger then klick "Layout --> Edit HTML".

2. Copy the code below and insert into your <head> tag.

#navbar-iframe {
display: none !important;
}

3. for example put like this

-----------------------------------------------
Blogger Template Style
Name: xxx
Designer: xxx
URL: http://trick-blog.blogspot.com
Date: Januari 2008
----------------------------------------------- */

#navbar-iframe {
display: none !important;
}

/* Variable definitions
====================

4. Save your setting, and open your blog, You will have no navbar in your blog page

CONGRATULATION!!!!!