Trick and Tips Tutorial Blogger

Highlight Author Comment in Blogspot

2008-11-02T00:23:00.000+07:00

This trick is to give a Highlight Author Comment . This will make the blog's owner comments looks different from the visitors comments. It's very usefull and interesting blogger hack tips. You can see the example in my blog. Here is what to do to make a "Highlight Author Comment" effect in Blogspot.

1. Login to blogger, then choose "Layout --> Edit HTML". Don't forget to backup your template first.
2. Check the "Expand Widget Templates" box.
3. Copy this script and put it before ]]></b:skin> or copy to your CSS area.

.comment-body-author {
background: #E6E6E6; /* Background color*/
color: #000; /* Text color*/
border-top: 1px dotted #223344;border-bottom: 1px dotted #223344;border-left: 1px dotted #223344;border-right: 1px dotted #223344;
margin:0;
padding:0 0 0 20px; /* Posotion*/
}

4. Then find this code:

5. The red color text is the code that you have to add to your script. The position must be right.
6. And then save your template.

* You have to login into your blogger account before to give comments.

Create Vertical Menu

2008-10-18T05:00:00.000+07:00

We have learned how to create horizontal menu before. Now we will try to make a vertical menu. We will make a vertical menu like the image. Ok let's do it

1. Login to blogger then choose "Layout-->Edit HTML"
2. Put the script below before this code ]]></b:skin> or put it in CSS code area.

.glossymenu, .glossymenu li ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 185px; /*WIDTH OF MAIN MENU ITEMS*/
border: 1px solid black;
}
.glossymenu li{
position: relative;
}
.glossymenu li a{
background: white url('http://blog.superinhost.com/vertical/blue1.gif') repeat-x bottom left;
font: bold 12px Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 5px 0;
padding-left: 10px;
text-decoration: none;
}
.glossymenu li ul{
position: absolute;
width: 190px;
left: 0;
top: 0;
display: none;
}
.glossymenu li ul li{
float: left;
}
.glossymenu li ul a{
width: 180px;
}
.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}
.glossymenu li a:hover{
background-image: url('http://blog.superinhost.com/vertical/blue2.gif');
}

* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }

You can change the menu color, look at the red text (blue1.gif and blue2.gif). Change it with some color menu below. For example, if you want to choose red color, then the code would be like this :

.glossymenu li a{
background: white url('http://blog.superinhost.com/vertical/red.gif') repeat-x bottom left;

dan

.glossymenu li a:hover{
background-image: url('http://blog.superinhost.com/vertical/red.gif');

Vertical Menu Color :

	blue1.gif blue2.gif
	green1.gif green2.gif
	red1.gif red2.gif
	pink1.gif pink2.gif
	black1.gif black2.gif

3. Save your template.
4. Then go to "Page Elements" menu
5. choose "Add a Gadget -->HTML/JavaScript" the insert the code below.

<ul id="verticalmenu" class="glossymenu">
<li><a href="/">Home</a></li>
<li><a href="http://trik-tips.blogspot.com">Trik Blog</a></li>
<li><a href="http://x-template.blogspot.com" >Free Template</a></li>
<li><a href="http://getebook.co.cc">Free Ebook</a></li>
</li>
</ul>

Note :
- The red code is the links.
- The Blue code is anchor text.
- If you want to add menu, just copy the blink code and paste it.

6. Then click "Save"

Create Tab View

2008-10-01T06:35:00.000+07:00

Tab View is very usefull box. We can fill it with many contain. It will save our blogs area. (See Image Below)

Here is Tutorial how to create a tab view:

1. Login to blogger, go to "Layout --> Edit HTML"
2. Then find this code ]]></b:skin>
3. Insert the below code before ]]></b:skin> or in CSS tag.

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Width top main menu */
text-align: center;
height: 24px; /* Height top main menu */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; /* Top Main menu border color */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Top main menu font */
font-weight: 900;
color: #000; /* Top main menu font color */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900; /* Top main menu background color */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* Content Border color */
overflow: hidden;
background-color: #FF9900; /* Content background color */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

4. You can change the code according to the red text explanation. To get html color code see HERE
5. The next step is put the code below before </head>

6. Then "save" it.
7. Go to "Page Elements" menu
8. Chose "Add Page Element" --> "HTML/Javascript" in place where you want to put this tab.
9. Insert this code :

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">

<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />
</div>
</div>

</div>
</div>
</form>

<script type="text/javascript">
tabview_initialize('TabView');
</script>

Note :
- The number or the blue text(350px) Is size of the tabview.
- The green code is the main menu text
- The red code is the content of tabview. you can fill it with links, banner, widget, comment or anything.
- To add more menu, see on the blink code. Add the code under it.

Good luck every body.

Show Recent Comments

2008-09-07T21:48:00.001+07:00

It's very usefull to Show Recent Comments on main blog page. We can know who have given comments on aur articles without open it one by one. At this time I will show you how to show recent comments on our main page blog. It's very easy

1. Login to blogger then go to "Layout"
2. Then copy this code :

- The 8 number is the sum of comments that will show up.
- Change trick-blog.blogspot.com with your blog's name.

3. You can show it in page elements. Just click on "add page elements --> HTML/Javascript" Then insert the script in it.

Or you can plug it in the "Tab View"

Setting Domain Blogspot With co.cc Domain

2008-07-18T03:43:00.000+07:00

co.cc is a free domain. It's not only URL forwarding but we can setup DNS Records, A, MX, and CNAME records. We can change our blog's name to become "name.co.cc". It's more simple than we use domain "name.blogspot.com". To change our default blogspot name to co.cc domain name there are some steps to do. Here is the tutorial to setup domain co.cc

1. Open your browser to co.cc
2. Then regiter a domain that you want to use.
3. If it's no available you have to find another domain name. But if it's available then you can register it.
4. The you have to setup your domain. Got to "setup-->Manage domain"
5. Choose "Zone Records"
6. In the coloumn "Host" fill it with your domain name (www.yourdomainname.co.cc")
7. Choose "CNAME" for "Type"
8. In the "Value" box fill it with "ghs.google.com"
9. Then click "Setup" Button.

The next step is make some setup in blogspot.

1. Login to Bloggr/blogspot then choose "Setting-->Publishing"
2. Then choose "Switch to: • Custom Domain
3. Then click on "Already own a domain? Switch to advanced settings"
4. Fill it with your new domain in the "Your Domain" coloumn.

5. To Finish click "Save Setting" Button.

It will take 1-48 hours for your new domain to work. So be patient....

Blogger Under Posting Comment box

2008-06-29T05:47:00.001+07:00

Now, blogger(blogspot) have developed their comment box. Last time ago, if we want to post a comment there should be only a link under our posting, and we have to click the link send a comment, it's not interesting. But now we can find a comment box under our post exactly. It's original from blogger, it's not like haloscan or intensedebate. But it's truely from blogger/blogspot. You can see it under this post.

Here is the trick to create comment box under your post.

1. Login to http://draft.blogger.com
2. Go to Setting-->Comments. then change "Comment Form Placement" to be "Embedded below post" (look at the image below)

3. Then "Save Setting"
Try to see your blog and klik on your titile post. if there is a embadded commnet box below your post just stop this step here. But if there is no comments box, just follow the next steps here.

4. Go to "Layout-->Edit HTML"
5. Check the "Expand widget templates" box.
6. Find this code :

7. Then replace it with this code :

8. Save your Template.

I've deleted my last comment box (haloscan). so now I lost all of my comments before. I do it to get this comment box.

Show Related Article to Your Post

2008-06-16T21:08:00.000+07:00

The advantage of showing related article to your post is it will help your readers find more information related to the topics. This is base on label or category. This is usually put to the end of the article. After your visitors finish read your article, they will find some links that related to the post base on label or category.

Here's the tutorial to create "related article to your spot":

1. Login to Blogger
2. Go to "Layout-->Edit HTML"
3. Click on "Expand Widgets Template" checkbox.
4. Then download THIS SCRIPT or HERE.
5. Open it then copy the scripts.
6. Paste the script after this code : <data:post.body/>. If you have "Read more widget" you will find two codes. Put it under the first code.
7. Save your template.

Good Luck...

Free Web Hosting Without Ads

2008-06-08T16:01:00.000+07:00

If we have a/some blogs, webhosting is important to support our blog running. web hosting is use for put our files such as images, sound, script, videos and many more. We can use use paid hosting or free hosting, but I suggested you to use 000webhost as your web hosting. 000webhost is a free web hosting service with full feature and no force ads. 000webhost is an amazing web hosting service. It's free web hosting that gives many features such as:

- 250 MB Disk Space
- 100 GB Data Transfer
- cPanel Control Panel
- Fantastico De Luxe 1-Click Autoinstaller
- Website Builder Software
- PHP Scripts Autoinstaller
- MySQL Databases
- Curl, GD2 library, ImageMagick, Zend
- and much more features are enabled

But to make your web hosting running well you must folow their rule.
Here is the most important rules:

1. No adult content or any kind.
2. No warez / hacking / phishing sites
3. No mass mailers / spammers (account will be automatically suspended if you will try to send mass mail), so if your software supports such feature, disable it right now.
4. We do not allow any public image or file hosting server scripts to be run.
5. Chat, proxy, or file download scripts are not allowed.
6. Paid-to-surf, auto-surm, buxto, and any other similar scripts are banned
7. We do not allow online gaming scripts such as ogame, mafia, etc..
8. Nulled software such as ip.board or vbulletin is not allowed to be hosted
9. Account cannot be used only to store files.

What are you waiting for, just SIGN UP HERE

Free Domain co.cc

2008-06-05T05:38:00.000+07:00

Do you feel your blog name is too long?
If we create a blog, use blogspot or wordpress service, we have to make a name to our blog, it should be like "name.blogspot.com" or "name.wordpress.com". Do you feel it's such as a long name? If we have some money, we can buy a domain, and then our blog name would be like name.com or name.net or name.co.uk name.us etc.

But now, we can to get free domain to cut up our blog name. it's co.cc service. We can register domain to co.cc, our blogname will be like "name.co.cc". It's free, no payment needed, no setup fee and it's easy to setup. I thinnk it's very good service that offer us a free domain name. I have try it for some of my blogs, and it's interesting. So what are you waiting for.....

Get Paid From Bloggerwave

2008-05-30T17:38:00.000+07:00

Bloggerwave is one of PPP (Pay Per Post) Program. It's like sponsoredreviews, buyblogreview and other PPP program. They provide some jobs to be reviewed by bloger. It's such as writing an article about a website or company and then we post it in our blog. To be approved to Bloggerwave is easier than other PPP programs. No PR needed or any others criteria. So I thing this is a good PPP program

HTML Color Codes

2008-05-26T05:44:00.000+07:00

Color is very important to design a blog. But to give a color to background or text or table it's not as simple as looks like, we have to know tho color code. With HTML color codes you can set the color of web site background, color of text, cells in tables and much more. With this dynamic HTML color codes chart you can get codes for basic colors.
Click on any color to get it's HTML color code:

Back up Your Blog

2008-05-11T04:06:00.000+07:00

Back up blog? is it important?
Yes it's very important. Because we can't guarantee that our blog will exist forever. Lately, many blogers lost their blogs because of unpredicted fault . Few months ago I lost all of my blog (it'a about 10 blogs), but now I got some of them back. Since then I know how important to back up our blog. It's really frustating when your hard work suddenly lost.

There is a free service website that allow us to back up our blog. It's name is blogbackuponline. They give us a space for 5 MB. Althought it's small but I think it's enough for us to backup our blog. If our avarage posted arcticle is 1000 character, meaning it can backup until 5000 title. It's for free version. They also provide more features for premium account. Just go to blogbackuponline and back up your blog there.

Put Paypal Donation Box to Blog

2008-05-05T00:55:00.000+07:00

Do you want to put this box in your blog/site? Well many of us want put this code on their own blog/site like those popular sites but they don't know how. Well i am very glad to teach you and going tell you how.
If you don't have a paypal account, click here to sign up one. Well i supply the code, and you just simply copy and paste it, is that simple.
Ok here we go.

Just copy the code and change some values in red.
Change Blog/Website Title to your own Blog title example change to "The-Online-Quest".
And change Your paypal email to your own paypal email.

Code:

<!-- The-Online-Quest Pay Pal Donation Form Code Start -->

<center>
<table border="1" width="143" cellspacing="0" cellpadding="0" bordercolorlight="#FFF8E8" bordercolordark="#EFE0C9">
<tr>
<td>
<p align="center"><b>Please Donate To My Blog</b>
</p></td>
</tr>
<tr>
<td width="145">
<form action="https://www.paypal.com/row/cgi-bin/webscr" name="_xclick" method="post">
<input value="Thanks for Your Donations - Blog/Website Title" name="item_name" type="hidden"/>
<input value="Your paypal email" name="business" type="hidden"/>
<p style="margin-top: 0; margin-bottom: 0">
<input value="_xclick" name="cmd" type="hidden"/>
<!-- input type="hidden" name="amount" value="1.00" -->
<b>Amount</b> <p style="margin-top: 0; margin-bottom: 0"> <select name="Amount" size="1">
<option selected value="1.00"/>1.00
<option value="2.00"/>2.00
<option value="3.00"/>3.00
<option value="4.00"/>4.00
<option value="5.00"/>5.00
<option value="10.00"/>10.00
<option value="15.00"/>15.00
<option value="20.00"/>20.00
<option value="25.00"/>25.00
<option value="30.00"/>30.00
<option value="35.00"/>35.00
<option value="40.00"/>40.00
<option value="45.00"/>45.00
<option value="50.00"/>50.00
<option value="100.00"/>100.00
<option value="200.00"/>200.00
<option value="300.00"/>300.00
<option value="400.00"/>400.00
<option value="500.00"/>500.00
<option value="1000.00"/>1000.00
</select>
<p style="margin-top: 0; margin-bottom: 0"><b>Currency</b> <select name="currency_code" size="1">
<option value="AUD"/>Australian Dollar
<option selected value="USD"/>USD
<option value="GBP"/>British Pound
<option value="CAD"/>Canadian Dollars
<option value="CZK"/>Czech Koruna
<option value="DKK"/>Danish Kroner
<option value="EUR"/>EUR
<option value="HKD"/>Hong Kong Dollars
<option value="HUF"/>Hungarian Forint
<option value="JPY"/>Japanese YEN
<option value="NZD"/>New Zealand Dollars
<option value="NOK"/>Norwegian Kroner
<option value="PLN"/>Polisg Zlotych
<option value="SGD"/>Singapore Dollars
<option value="SEK"/>Swedish Kronor
<option value="CHF"/>Swiss Francs
</select>
</p>
<p style="margin-top: 0; margin-bottom: 0" align="center">
<input border="0" alt="Make payments with PayPal - it's fast, free and secure!" width="60" src="http://www.blogpulp.com/imagehost/images/5971708800.gif" name="submit" height="30" type="image"/>
</p>
</p></p></form>
</td></tr>
<tr>
<td>
<p align="right"><b><font face="Arial" size="1">Powered by <a href="http://djyano.blogspot.com/2008/04/put-paypal-donation-code-to-your.html" target="_blank"> The-Online-Quest</a></font></b>
</p></td>
</tr>
</table>
</center>

<!-- End of The-Online-Quest Pay Pal Donation Form Code -->

For blogger, after you have copied and changed the values, just add a new page element. Click add HTML/JavaScript to blog, paste all the codes in and save changes.Enjoy blogging and have fun, if you have put this code in your blog/site, post a comment about it and please let me know.

Original post by : The Online Quest

How to Create Dropdown Menu

2008-04-09T23:11:00.000+07:00

What is dropdown menu?
Dropdown menu is like this :

Here is the trick how to create dropdown menu :

Copy the code below and put it on your page elements.

<select onChange="document.location.href=this.options[this.selectedIndex].value;">
<option value="0" selected>Blog Archive</option>
<option value="Links 1">Text 1</option>
<option value="Links 2">Text 2</option>
</select>

The red text is links, change it with your links.
The blue text is Anchor text. Yau must change it.

For example :

<select onChange="document.location.href=this.options[this.selectedIndex].value;">
<option value="0" selected>Blog Archive</option>
<option value="http://trick-blog.blogspot.com/2008/02/tutorial-to-create-dtree-menu.htmll"> How to Create Dtree Menul </option>
<option value="http://trick-blog.blogspot.com/2008/01/how-to-create-search-engine-in-blogger.html"> How to Create Search Engine </option>
</select>

The result would be like this:

To add more menu/item, put a code like below

<option value="Links 3">Text 3</option>

before this code </select>

If you want the links opened in new window, change the code below

<select onChange="document.location.href=this.options[this.selectedIndex].value;">

with this code ::

<select onchange="javascript:window.open(this.options[this.selectedIndex].value);">

The resul would be like this:

Free Unlimited File Hosting Service

2008-04-04T10:49:00.000+07:00

If we have a web/blog especially about downloading like mp3, video, ebook etc, it’s need a webhost to put these files, and usually we like a free webhosting rather than paying. But there are some problems/limitations if we chose a free file hosting like :Bingung Cari Tempat Hosting Gratis Dan Unlimited?

- Limited capacity/storage.
- No store big files bigger than 5 MB (Usually).
- traffic limitation (base on time)
- etc.

Now I have a solution to solve the problems. Try to use ziddu. ziddu is one of the free unlimited file hosting service. What will you get from ziddu? here is :

- Unlimited storage, (you can upload your files as much as possible).
- maximum file size to uploaded is 200 MB (it’s big enough)
- No huorly traffice limitation.
- Get paid everytime others download your files.
For the last poin, is it true that we will get paid everytime others download files?
Yes, it’s 100% true. You will get paid $0.001 per unique download. Cash will be transfered via paypal.

If you interesting SIGN UP HERE

How to Create Float Image

2008-03-31T19:35:00.001+07:00

This tutorial is about to create float image that will always show on your corner blog althought you drag side scroll bar. see example. You can put an image, widget, clock etc on the corner.
Step by step to create Float image.

1. Login ke blogger then click "Layout -->> Edit HTML
2. Find this code ]]></b:skin>, then put the code below above it.

#float_corner {
position:fixed;_position:absolute;bottom:0px;left:0px;clip:
inherit;_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);}

3. The bold text is it’e position. you can change it with "top", "bottom", "left", "right"
4. The next step is put the code below before tag</body>

<div id="float_corner">

<a href="http://trik-tips.blogspot.com"> <img src="

http://blogoholic.info/files/soniclari.gif" border="0" /></a>

</div>

"http://trick-blog.blogspot.com" is a link.
"http://blogoholic.info/files/soniclari.gif" is image URL, Change it with your own image.

5. If you wanna fill it with a widget, change the red code with your widget code.
6. Save and preview your blog.

How to Create Email Form Subscription

2008-03-22T11:06:00.000+07:00

The function of Email Form Subscription is to let your loyal visitors to subscribe your new article/posting in to their email. So if your post a new article your subscriber will receive your article automatically. It’s very usefull, your subscriber will know if there is a new article, so they will come to visit your blog immediatly.
Here the trick to create Email Form Subscription

1. visit this site : http://www.feedburner.com
2. You will see a box to enter your blog feeds. enter your blog feeds in to the box. Usually your blog feeds is like this : http://YOURBLOGNAME.blogspot.com/feeds/posts/default
3. If you have video file in your blog content, check on the "I am a podcaster"box, If not, it’s unnecessary. Then click "Next" Button.
4. After that, you must to fill a form, fill it with your information then click on the "Activate Feed"
5. If you’re succeed, you will see "Congrats your....." notificaton.
6. On the buttom you will see a "Next" Button and a link "Skip directly to feed management", choose this link.
7. You will see some menus on top. Choose "Email Subscription" menu.
8. On the left you will see some menu again, now click on the "Email Subscriptions"
9. Then click on the "Activate" button.
10. You will some code on the boxes. Choose code in the "Subsciption Form Code" box, and copy it. then click "Save" Button.

11. To plug it on your blog, go to "Layout-->>Add Page element-->HTML/Javascript" paste your code on the box.

See your blog, Now you have an "Email Form Subscription"
Congrats....

How to Create Blogroll (Link List Box)

2008-03-11T03:05:00.000+07:00

As a bloger, we usually added our Friends link on our blog. Day by day and month by month it's number will increased. But if your friends link over than hundredsor or even thousands, it will be a problem, your blog space will full of your friends link list.
Now I will show you how to create a blogroll, a box to place your friends link list. You can fill it with as many as links, and it's size will not get bigger. So it will save space on your blog or sidebar. The box will be like mine.

Here's the code that you should to copy and place on your blog or sidebar ("Add Page Element --> HTML/Java Script").

Note:
- Text width: 200px; and height: 300px; is size of the box, you can change it according to your place or sidebar size .
- Change the text "#link1,#link2, #link3 dst" with your friends link list.

Display Yahoo Messenger Status on Blog

2008-03-05T15:07:00.000+07:00

The advantage of showing Yahoo Messenger status on your blog is your visittors can talk or ask something to you directly via YM, it will make your relationship with your visitor to be more tighly. Ok lets begin.

If you’re oflfline, it will display image like this:

And if you’re online, it will display icon like this:

It’s very simple to create it. You just copy the code below and put it on your "Page Element" or sidebar.

Change the red text (kendhin_x) with your YM id.
Look at the green number "2", you can change it. What the result of doing this? you will different image/icon as your YM status.

You must try it !!!!

How to Show Recent Post on the Sidebar

2008-02-27T18:53:00.000+07:00

To show your recent post on the sidebar is very easy, you just follow the instruction below then you will see your recent post on your blog sidebar. here’s the steps :

1. Login to Blogger then Chose "Layout"
2. Click on "Add page element" (chose where you want to put it) then chose "HTML/Javascript"
3. Copy the code below and put it in the "content" box.

<script src="http://www.geocities.com/uddin_81/recent-post.js"></script>
<script>var numposts = 10; var showpostdate = false; var showpostsummary = false; var numchars = 100; </script>
<script src="http://YOURBLOGNAME.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp">
</script>

4. Change YOURBLOGNAME with your blogname.
5. The number "10" it’s amount of recent post that will be shown, You can change it.
6. Click Save.

Get Try it .......

Widget to Put Comment Box Under Posting

2008-02-21T21:09:00.000+07:00

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:

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 :

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

Finish...

Tutorial to Create DTree Menu

2008-02-19T20:50:00.000+07:00

DTree is a menu that be arranged like a tree. It will be like menu when you open "windows Explorer". It's very usefull if you have many posting (articel) in your blog. It can contain many link in small space. It will be like the below image :

Here's the step by step tutorial to create "DTree Menu" in blogger:

1. Login to Blogger, go to "Layout --> Edit HTML"
2. Put the code below over <head>

<link rel="StyleSheet" href="http://blogoholic.info/files/dtree/dtree.css" type="text/css" />
<script type="text/javascript" src="http://blogoholic.info/files/dtree/dtree.js"></script>

3. Save your editting.

4. Now edit end copy the below code then put on your sidebar.

<div class="dtree">
<script type="text/javascript">

</script>
</div>

Change "link.html" with your own link.
The first number must be unique (d.add(1,0,'Node 1','link.html');
The second number is child of the number (look at the color).

You can add the below code to add a new node with your own image

d.add(10,0,'Profile','link.html','','','http://blogoholic.info/files/dtree/trash.gif');

change "http://blogoholic.info/files/dtree/trash.gif" with your own image.
it will be like this :

Tutorial to Create Blogger Template

2008-02-13T09:35:00.000+07:00

This tutorial is to create simple blogger template, with simple methods. The easiest way to create blogger template is by edit a template. But don't worry, althought this is a simple methods but it can produce a beautifull template, it depend on how you design it. This tutorial is not to create blogger template from beginning but this is to create template by editing a template. Ok lets begin.
Before we begin I suggest you to create a new blog,weI don't wont to destroy your blog.
To follow this tutorial you have to download this template first. downlad template.

We will create a template that contain four main elements, (Bakground, Header, Main and Footer) Like the image :

So you have to create the four elements, You can use Image editor software like Adobe Photoshop, Corel Draw, Paint, etc.
Here's the detail to design it:
1. Create a design like above image.
2. On the backgroun part it should be a Pattern/Tile.
3. Cut for every part (Background, Header, Main and Footer)
it should be like this :

background
header
main
footer

4. Upload your part image on the webhosting like geocities or on the image hosting like photobucket.

Alll right, now we will arrange these part to the HTML.
1. Go to blogger then go to "EDIT HTML" menu.
2. Click on the "Brows" button to upload above template or this template
3. Find this code

body { margin: 0px; padding: 0px; text-align: left; font:$bodyfont; color:$textcolor; background: #323232 url('http://blogoholic.info/files/bg.jpg') repeat-x top left; }

4. Change the bold text with your image location
5. Then find this code, and change the blod text with your image location :

#center {background: #ffffff url('http://blogoholic.info/files/body.jpg') repeat-y top center;}

6. Find the code below and change the bold text with your image location:

#header { margin: 0; height:196px; width:898; color: $pagetitlecolor; background: url('http://blogoholic.info/files/head.jpg') no-repeat top center; }

7. Find the code below and change the bold text with your image location:

#footer { margin: 0; width: 898px; height:80px; padding: 0px; background: url('http://blogoholic.info/files/foot.jpg') repeat-y top center; }

8. Now find the code below

#outer-wrapper { width: 898px; margin: 0px auto 0; text-align: justify; }

this code width: 898px it's the widht of your blog, change it according to your image.

#main { float: left; width: 445px; margin: 5px; padding: 0px 0px 0px 10px; line-height: 1.5em; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; }

This code width: 445px; is size/widht of main, you can change it.

#sidebar { float: right; width: 153px; padding-right: 50px; font-size: 83%; color: $sidebartextcolor; line-height: 1.4em; word-wrap: break-word; overflow: hidden; }
#ads-wrapper {float: left; width: 195px; padding-left: 10px; word-wrap: break-word; overflow: hidden; }

This code width: 153px; is widht of your right sidebar. and this code width: 195px; is widht your left sidebar. And this code padding-right: 50px; is gap of text on the right sidebar with right line. And this code padding-left: 10px; is gap of text on the left sidebar with left line.

#header { margin: 0; height:196px; width:898; color: $pagetitlecolor; background: url('http://blogoholic.info/files/head.jpg') no-repeat top center; }

This code height:196px; width:898; is height and widht of your header, Change it according to your Header Image.

#footer { margin: 0; width: 898px; height:80px; padding: 0px; background: url('http://blogoholic.info/files/foot.jpg') no-repeat top center; }

This code width: 898px; height:80px; is widht and height of your footer.

9. Try to modify and preview it until looks good.
10. If it looks good you can save it.

GOOOD LUCK!!!!!!

How to Hide Your Post Date, Time and/or Author

2008-02-09T16:15:00.000+07:00

There are some reason for bloger to hide Post date, time and author. May be they want to see their blog looks clear or everything. Now I will show you the trick to "hide your post date, time and or author". the mothods is very simple, just find the code that I pointed to you and delete it. You can chose which part want to delete, date only, time only, author only or it all. Ok, if you decided to do it lets begin the hack.

1. Login to blogger the go to "Layout --> Edit HTML"
2. Click on the "Download Full Template" to back up your template first.
3. Check on the "Expand Widget Templates" check box.

Hide Post Date
find this code and delete it.
<data:post.dateHeader/>.

Hide Post Time
find this code and delete it.
<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark'
title='permanent link'><abbr class='published'
expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>
</b:if>
</b:if>
</span>.

Hide Post Author
find this code and delete it.
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>
.

5. Save your editting

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

Related Post :
Change Post Date Become Calender Icon

Show or Hide Your Full Post in Blogger

2008-02-06T11:15:00.001+07:00

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>

5. Then find this code <div class='post-header-line-1'/> .
6. If You found it you will see a code like this:

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

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

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

Advertise on This Blog

2008-02-03T04:52:00.000+07:00

You can advertise on this blog with low cost. Just for $15/Month you can put your banner (15px x 15px) here.

If you interest to advertise on this blog, send email to kendhin_x@yahoo.com.

Thanks.

How to Create Horizontal Tabs Menu

2008-01-30T02:04:00.001+07:00

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>

<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.

Protect Your Blog From Plagiarize (Copy Paste)

2008-01-27T03:00:00.000+07:00

May be you will be angry if your articel shown in other blog unexpectedly, moreover it without inserting the resource. I'll show you how to protect your blog from theif. But this trcik is pointed for small thief because it unusefull for expert thief. With this trick, the thief will unable to select your articel and unable to right click in your blog. But if you don't care about plagiarize, you will don't need this trick. Ok lets begin.

Go to your blog setting then chose "Template --> Edit HTML". Find this code <body> then replace with this code
<body onmousedown="return false" oncontextmenu="return false" onselectstart="return false">

Now your blog will be disable selecting and righ click, but the thief can still steal your articel by select "views --> page source" menu from their browser or by pressing "Ctrl + u", they can see your source code and can copy the articel from it. To deceive this, put your mouce cursor before this code <head> then press "enter" button many times, may be about 100 times :D the save your editting . Now if they press "Ctrl + u" they will only see a litle codes, he..he.. :D

But remember this trick is only work for a fool thieves, for an expert thieves is unusable.
I don't use it into my blog because there are many script that have to be copied by readers.

Change Post Date Become Calender Icon

2008-01-25T23:46:00.000+07:00

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 ............

Make Blog More Expressive With Auto Smile Icon

2008-01-25T00:30:00.000+07:00

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

Change The Address bar Icon (Favicon)

2008-01-24T00:19:00.001+07:00

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 Create Comment Box Under Your Post

2008-01-22T22:49:00.000+07:00

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...

How to Create Search Engine in Blogger

2008-01-22T05:28:00.000+07:00

Now I will show how to create "Search Engine" in your blogger. This Search Engine is use to find articel in your blog, not to find articel at all website in the world. It's very easy, just follow the trick below you will have search engine in your blog. Here's the step:

1. Login to Blogger, Go to "Layout --> Page Elements". Klick "Add a page elements" then chose "HTML/Java Script".
2. Put the code below into "Content" Box

<form action="http://yourblogname.blogspot.com/search" method="get"> <input class="textinput" name="q" size="30" type="text"/> <input value="search" class="buttonsubmit" name="submit" type="submit"/></form>

Change yourblogname with your blog's name. The number "30" is width of your search engine, you can change it for appropriate to your layout.

GOOD LUCK!!!

How to Hide Navbar (Navigation Bar)

2008-01-22T04:53:00.000+07:00

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!!!!!

How to Create Read More

2008-01-22T04:49:00.000+07:00

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)

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.

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

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!!!!!

Free Blogger Template

2008-01-21T05:42:00.000+07:00

To download the templates, right click on the "Download" link then chose "save link as"

Preview

Download

Preview

Download

Preview

Download

Preview

Download

I will create more templates later.

Blog Dictionary

2008-01-20T15:01:00.000+07:00

Are you puzzled by strange blogging terms and unusual blog abbreviations and blogging acronyms? Then this post will get the Blargon Demystified. This article attempts to simplify some common blogging terms organized into a simple blogging glossary. Only common and popular blog tools and services have been included.

Note : The language used here is mostly non technical to make the newbie blogger understand the blogging basics. These have not been created by me, but collected over time. This is NOT a substitute for dictionary meaning or a strict definition of these terms, but a simple layman approach to understanding what they mean. Please feel free to propose a better meaning in the comments.

BLOGGING

Weblog- An online dated diary listing your periodic thoughts on a specific topic, often in reverse chronological order.

Blog - short form for weblog

Blogging - the act of posting on blogs

Blogger - a person who blogs

Blogosphere - The internet blogging community

BLOGGING FORMS

Photoblogging - a blog predominantly using and focusing on photographs and images. Photoblogs are created by photobloggers

Podcasting - a method of distributing multimedia files (audio / videos) online using feeds for playback on mobile devices and personal computers. Podcasts are created by podcasters.

Autocasting - is an automated form of podcasting

Blogcasting - the blog and the podcast merged into a single website.

Vlogging - Also called video blogging. Shortened to vlog. Posted by vlogger. A variant on the blogging using video instead of text.

Audioblogging - Also called audioblog, MP3 blog or musicblogs. a variant on the blogging using audio instead of text. Created by audioblogger.

Moblogging - Also called moblogs. A blog posted and maintained via mobile phone. Moblogs are created by mobloggers.

BLOG COMPONENTS AND FUNCTIONS

Index page - the front page fo the blog

Header - the topmost part of the blog usually listing the blog title.

Footer - the most bottom part of the blog usually listing navigation and copyright statements

Sidebar - One or more columns along one or both sides of most blogs main page

Categories - A collection of topic specific posts

Post, Entry- individual articles that make up a blog

Comments - enabling readers to leave their remarks

Captcha - short for �Completely Automated Public Turing test to tell Computers and Humans Apart�. Those word and letter verification images you need to type in to show you are human and not a bot. Helful to block automated spam comments. more

Ping - Short for Packet Internet Grouper. Blog and ping helps to notify other blog tracking tools for updates, changes and trackbacks.

Trackback - A system by which a ping is sent to another blog to notify that their article has been mentioned by you

Pingback - See trackback.

Permalink - A link to a specific article

Tags - labelling / attaching keywords to collect similar posts

Tag cloud - Displaying tags lists or keywords in a blog.

Blogroll - list of links to other blogs in your sidebar. Also see blogrolling.com

Sideblog - A smaller blog usually placed in the sidebar of a blog.

Template - the blog presentation design

BlogThis - a function allows a blogger to blog the entry they a reading

Plugins - Small files that add improved functionality and new features. Wordpress plugins can greatly improve your blog usage and interactivity

Dashboard - When you login to your blogging account, it is the first screen with all controls, tools and functions.

Archives - a collection of all your posts on one page. Can be categorized by month etc.

Expandable post summaries - show a small teaser part of the post on the index page that link to the full post. more

Jump - the continuation of a the story on another page to preserve space on index page.

FTP - short for file transfer protocol. Transferring file to and fro from your web host using FTP tools like Filezilla

WEB FEEDS

Web Feed - allows online users to subscribe to websites that change or add content regularly.

RSS - a family of web feed formats used for Web syndication. Short form for Really Simple Syndication (RSS 2.0), Rich Site Summary (RSS 0.91, RSS 1.0), RDF Site Summary (RSS 0.9 and 1.0). Wordpress generates RSS 2.0

XML - short for eXtensible Markup Language. a general-purpose markup language for syndication formats used on blogs.

RDF - short for Resource Description Framework. A web content syndication format.

Atom - another specific web feed format. Blogger feeds are usually of this type.

OPML - short for Outline Processor Markup Language. It is an XML format for outlines. Easily import and export multiple blog subscriptions between different rss aggregators.

Photofeed- a web feed with image enclosures.

BLOGGING SOFTWARE / CLIENTS

Blogger - a free blogging platform by Google.

Blogspot - free Blogger hosting blog at name.blogspot.com

LiveJournal - free blogging tool by SixApart

Movable Type - paid blogging tool by SixApart

Typepad - paid blogging tool by SixApart

Wordpress.org- Free. Easy to Upload, customize and upgrade.

Wordpress.com - A Wordpress blog hosted free for you.

Radio Userland - another blog publishing software package

TYPES OF BLOGS

Group blog- with multiple contributing bloggers.

Event blog - focussed on an event

Kittyblogger - writing about cats.

Celeblog - focused on a celebrity.

Celebriblog - maintained by a celebrity.

Clog Blog - written in Dutch and/or in Holland.

CEOBlog - run by a chief executive officer.

Plog - a project blog. Also for Amazon.com personalised weblogs

Movlogs - mobile video blogs.

Splog- a spam blog

Tech blog - focused on a technical subject.

Anonoblog - by an anonymous blogger

Linguablog - about linguistics, translation etc.

Metablog - a blog about blogging.

Milblog - a military blog.

Blawg - blogged by lawyer / related to legal stuff

Edu-blog - education oriented blog.

Progblog - A progressive blog.

Shocklog - provokes discussion by posting shocking content

Klog - used by company knowledge workers. by Kloggers

Blogsite - A web site that combines blog feeds from a number of different sources

Dark Blog- A non-public blog

Photocast- a photoblog that automatically updates when new photos are added.

BLOGGING HABITS

Metablogging - writing articles about blogging

Blogstipation - writer�s block for bloggers. Cant think of what to blog about?

Blogathy - I do not want to post today and I do not care about it

Blogopotamus - A long long blog post

Blogorrhea - unusually high output of articles

Bleg - To use one�s blog to beg for assistance etc.

Hitnosis - Refreshing your browser repeatedly to see if your hit counter or comments have increased

GAD - Google Adsense Disorder. Repeatedly checking your adsense earnings. more

Blego - Blog+Ego. Measuring blogger worth

Blog hopping - jumping from one blog to another

Blogroach - A commenter who rudely disagrees with posted content

Blogoholic - addicted to blogging

Blogorific = blogtastic - something which a blogger says is terrific

Blogsit - maintaining a blog while the primary blogger is on leave

Blogvertising - Also called blogvert. Advertising on a blog.

Blurker - a blog reader not posting comments, just lurking around quietly.

Blogathon - update your website every 30 minutes for 24 hours straight. Maybe collect sponsorships. more

Blogiversary - your blog birthday

Blog Carnival - Links to other articles covering a specific topic.

Multiblog - running multiple blogs

Blog Tipping - Compliment 3 blogs on day 1 of every month. more

Blogger bash - a blogger party

Commenter - someone who leaves remarks / comments

Reciprocal Links - called link love. You link to my blog, I link to yours. To improve search engine rankings.

Linkbaiting - a habit of writing good content with the sole purpose of getting it linked from multiple sites.

Blogstorm - a large amount of blogosphere activity due to particular controversy. Also called Blog Swarm.

Blogsnob - refusing to respond to blog comments from �not-friends�.

Doppelblogger - plagiarize the content of another blogger. To Doppelblog.

Blogophobia - Fear of blogs and blogging.

Bloggerel - the same opinion posted repeatedly on a blog

BLOGGER TYPES

Problogger - professional blogger

Blognoscenti - especially knowledgable bloggers

Blogebrity - a famous blogger.

Blogerati - the blogosphere intelligentsia.

Commentariat - The community of those leaving comments.

Dooced - lost a job because of blog entries. To Dooce.

Blogther - a fellow blogger.

A-List- the top bloggers who influence the blogosphere.

Blogstar- blogger running a popular blog

OTHER BLOGGING TERMS

Bloggies- Annual blogging awards. more
MSM - Mainstream Media, or old media like newspapers etc.

BSM - Blogstream media. from most heavily trafficked blogs.

Blog Day - 31 August. Find 5 new Blogs that you find interesting and tell them. more

Blaudience - your blog audience.

Blargon - Also called Blogssary. Blogging slang and glossary. What I am telling you now.

Blogiversary - your blog birthday

Blogiverse - see blogosphere

XFN - short for XHTML Friends Network. Is a simple way to represent human relationships using hyperlinks.

Blogonomics - blogging conference on a Blog Cruise in 2006. more

EFF - short for Electronic Frontier Foundation. A nonprofit group working to protect blogger rights.

Blog of Note - a recommended blog. more

Navbar - a navigation bar usually seen on top of Blogger blogspot hosted blogs. more

Blook - a book created from a blog. more

Hat Tip- acknowledgement of the source that tipped you the news.

Spomments- Spam comments

Blammer- Blog spammer

SOB- acronym for Successful and Outstanding Blogger. From successful-blog.com

Blogiday- you get fed up and take a holiday from blogging

BLOGGING TOOLS & SERVICES

Bloglines, Rojo, Newsgator, Kinja, - are News Aggregators that display content from syndicated Web content from web feed. Can be configured online or downloaded on your desktop. Like . Also called RSS readers, feed readers, feed aggregators or news readers

Pageflakes, Newsvine - Track multiple feeds on a single page by modules.

Odeo, Podnova - are Podcatchers, a form of aggregator used to automatically download podcasts and can sometimes transfer a portable media player. Like

Feedburner - a professional feed management system

Pingomatic, Pingoat - ping multiple blog tracking services. More

Feedblitz, Zokooda - Email subscriptions and newletter tools.

Technorati - a real-time search engine that keeps track of what is going on in the blogosphere

b5media, 9rules - examples of popular blogging networks. Collection of blogs and bloggers providing great content, with revenue sharing sometimes.
K2, Blix - names of some popular wordpress themes.

Blogexplosion, Blogclicker- popular blog traffic generation / exchange services.

Adsense, Adbrite, CJ, Chitka, Blogads - popular affiliate programs to generate money from your blogs.

Sphere, Icerocket - blog search engines

Live Bookmarks - a firefox web browser feature. Update themselves automatically with the latest content from the Web.

Creative Commons - licenses provide a flexible range of protections and freedoms for authors to offer a voluntary �some rights reserved� approach.
CoComment - Tracks your comments across different platforms and follow conversations

WBloggar, Ecto, Qumanna - desktop blog publishing tools

Mint, Mybloglog, Measuremap, Analytics - site traffic tracking tools.

Haloscan- free trackback service

YouTube, Rapidshare- puts video on your blog

Flickr, Imageshack - photo sharing service. Host images on your blog

Del.icio.us, furl, spurl - share social bookmarks.

Blogburst - Syndicating your feed to top publishers.

Bloggeropoly - professional blogger recruiting agency. more

Blogger code - a way to describe different types of bloggers. more

Bloggoggle - Directory of Blogging Professionals

BlogHer - where the women bloggers are. At Blogher.org

BLOG TRAFFIC SURGES

Digged - link posted on digg.com driving huge traffic to your blog

Slashdotted - link posted on slashdot.org driving huge traffic to your blog. more

Instalanche - link posted on instapundit.com driving huge traffic to your blog

Farked - link posted on fark.com driving huge traffic to your blog
Boing Boinged - link posted on boingboing.net driving huge traffic to your blog

MISCELLANEOUS BLOGGING TERMS

Ajax - acronym for Asynchronous JavaScript and XML. creates interactive web applications.

Greasemonkey - a firefox web browser extension that can alter the functionality of any website using specific scripts.

Wiki - a collaborative on-line software that allows readers to add and edit content.

SEO - search engine optimization. To improve your search engine rankings.

Page Rank - Google measures of importance of a page which reflects in its rankings.

CMS - short for Content management system. software used to publish and manage websites.

Original Post