Blogger Hack|Css|HTML|Template

Change FeedBurner Icon With your Desire.

noreply@blogger.com (wiryo saputra) — Sun, 28 Dec 2008 12:20:00 +0000

Hi Blogger,

If you using this Default Rss icon, its so pail.
Now I would like to tell you about how to change your rss icon like in my blog.
usually, the rss feed like feedburner have script like this.

<p><a href="http://feedproxy.google.com/BloggerHackcsshtmltemplate" rel="alternate" type="application/rss+xml"><img alt="" style="vertical-align:middle;border:0" src="http://i423.photobucket.com/albums/pp320/blackhacker_2008/windowslivewriter40morefreerssfeedi.png"/></a> <a href="http://feedproxy.google.com/BloggerHackcsshtmltemplate" rel="alternate" type="application/rss+xml"></a></p>

You can change the red text with your image url, and the yellow text with your feed url. now its finished... the result is in my blog at the top left.

How To Modify Your BlogLog Recent Reader.

noreply@blogger.com (wiryo saputra) — Sun, 28 Dec 2008 11:58:00 +0000

Sometimes my bloglog widget can make our blog taking time too long to appear. Now, How to make it fast. I have one trick.

If you use new bloglog widget, change this with old version.

change your blog log script code with this code:

<script src="http://pub.mybloglog.com/comm2.php?mblID=YourID&c_width=330&c_sn_opt=n&c_rows=2&c_img_size=h&c_heading_text=&c_color_heading_bg=eeeddf&c_color_heading=111&c_color_link_bg=eeeddf&c_color_link=c13a10&c_color_bottom_bg=ffffff" type="text/javascript"></script>

change the red text with your blog log id.

next insert this CSS code bellow <b:skin><![CDATA[

td.mbl_fo_hidden{display:none;}td.mbl_join_img{}td.mbl_join{}tr#tr0{display: none}th.mbl_h{display:none;}

to insert Your Joining Text. Add this code to your bloglog script.

<p align="center"><a target="_blank" href="http://www.mybloglog.com/buzz/community/bloglog username/">
have you joined My community??</a></p>
<p align="center"><a target="_blank" href="http://www.mybloglog.com/buzz/yjoin/?ref_id=yourbloglogID&ref=w">
Join Now</a></p>

replace the green text with your bloglog username. then replace the red text with your bloglog ID.

For example, You can see My bloglog widget.

Making Ads Place To Your Blog

noreply@blogger.com (wiryo saputra) — Sun, 28 Dec 2008 01:25:00 +0000

Hi blogger,

now i would like to tell you about how to make ads place in your blog. blogger usually needed it to place their ads banner. in this tutorial, i made this for 125x125 ads banner.

You want to know how?

Check this out.

# step 1

sign in to blogger.com with your ID
Click Layout, then click Edit HTML
Insert This Code Bellow

#Box-Banner-ads {

margin: 0px;

padding: 5px;

text-align: center;

}

#Box-Banner-ads img {

margin: 0px 4px 4px 0px;

padding: 3px;

text-align: center;

border: 1px solid #c0c0c0;

}

#Box-Banner-ads img:hover {

margin: 0px 4px 4px 0px;

padding: 3px;

text-align: center;

border: 1px solid #333;

}

after that, we will go in the next step.

you can place this code at your side bar.

<div id="Box-Banner-ads">

<a target="_blank" href="http://your ads url.com"><img
border="0" alt="ads" src="http://your ads image url.com/Banner2.gif"/></a>

<a target="_blank" href="http://your ads url.com"><img
border="0" alt="ads" src="http://your ads image url.com/Banner2.gif"/></a>
<a target="_blank" href="http://your ads url.com"><img
border="0" alt="ads" src="http://your ads image url.com/Banner2.gif"/></a>
<a target="_blank" href="http://your ads url.com"><img
border="0" alt="ads" src="http://your ads image url.com/Banner2.gif"/></a>

</div>

good luck...

How To Insert Search Form In Your Blog

noreply@blogger.com (wiryo saputra) — Sat, 27 Dec 2008 23:50:00 +0000

hi blogger, I am sorry to you all for not update my blog because i have an examination in my college.

Are you ready? Now, I would like to tell you How to Insert Search Form In your Blog?

Just Follow This Step

as usual, sign in to blogger.com with your ID.
Click Layout then Click Page Element
Place This search form at your sidebar.

insert this code bellow:

<form id="searchthis" action="http://yourblog.blogspot.com/search" style="display:inline;" method="get">
</form>
<input id="b-query" maxlength="243" name="q" size="20" type="text"/>
<input id="b-searchbtn" value="Search" type="submit"/>

change the orange text with your blog.

the result will be like this:

If you want to replace your search icon. take this code:

<form id="searchthis" action="http://yourblog.blogspot.com/search" style="display: inline;" method="get">
<tr>
<td nowrap="nowrap" valign="top" height="16" align="left">
<input id="b-query" maxlength="243" class="textinputsearch" value="" name="q" size="22" type="text"/>
<input id="b-searchbtn" alt="Search" width="20" src="http://your image url.com/search.gif" height="20" align="top" type="image"/>
</form>

replace the green text with your blog name, and replace the red text with your image url.

the result will be like this:

finish...

How To Make Link Exchange Box

noreply@blogger.com (wiryo saputra) — Sat, 20 Dec 2008 10:52:00 +0000

Hi all,

Now I am gonna share about How to make Link Exchange Box in your blog.

As usual If you want to make link exchange box, just follow this step;

Sign in to blogger.com with your ID
Click Layout at blogger dashboard
Click Page Element.

Now Click Add A Gadget, Then Find and Click HTML/Javascript.

At Html/Javascript form, Type this code;

<textarea name="textarea" cols="20"><a href="http://repairblogger.blogspot.com"><img src="http://i423.photobucket.com/albums/pp320/blackhacker_2008/Untitled-1.gif" width="150" height="150" border="0" /></a></textarea>

Change the green text with your blog url, the red text with your image url, then the gray text with your desire sets

The result will be like this:

the result in your friends blog will be like this:

its finish,

Good Luck.......

Tips To Protect Your Post From Blog Faker

noreply@blogger.com (wiryo saputra) — Sat, 20 Dec 2008 06:52:00 +0000

Sometimes we feel so annoyed when other blogger imitate our blog without our permission. to prevent that, I have some trick that you must follow.

# Step By Step

Sign in to blogger with your ID
Click Layout then Click Edit HTML
Find <body> code with Ctrl+F.

After you find <body>

place this code inside <body> ---->

onmousedown="return false" oncontextmenu="return false" onselectstart="return false"

the placing code must be like this:
<body onmousedown="return false" oncontextmenu="return false" onselectstart="return false">

Now Its Finished.

note: If you using this trick all form format can't be fill. like google search, shoutmix, haloscan form comment . So if its no important don't use this tips.

Good luck

How To Insert Animation Image At Your Post Title

noreply@blogger.com (wiryo saputra) — Fri, 19 Dec 2008 03:23:00 +0000

Hi Blogger,

many image in your blog maybe interesting. your blog will looking beautiful with image in your post title. Do you want to insert an image in your post title like in my blog? just following this step:

#Step 1

find your desire animation picture in google, the file extension must be .GIF

#Step 2

Join Photobucket to host your picture free.

#Step 3

After you join at photobucket, upload your picture. Click Save. After that copy the code at the Direct Link form.

Now the next step is setting your width and height of your image by typing this code:

width="your desire width"
height="your desire height"

to make your image online you must type this code:

<img src="your image url">

for example; i have one image url and i want to make it online, so i type my code like this:

<img src="http://i423.photobucket.com/albums/pp320/blackhacker_2008/loader-gif-images1.gif" height="40" width="40">

the result will be like this:

to make it small just set your height and width.

The next step is placing your image at your post title.

#Step 1

sign in to blogger.com with your id
click layout.
Click edit html.
with Ctrl+F find this code :

<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>

# Step 2

place your image code between your blogger template code like this:

<a expr:href='data:post.url'> <img src="http://i423.photobucket.com/albums/pp320/blackhacker_2008/loader-gif-images1.gif" width="45" hight="45" border="0"></img>   <data:post.title/></a>
<b:else/>

now Click Save Template.

That's all finish, now look at your blog. have you see your picture in your post? If not just leave your comment bellow.

How To Insert Clock On Your Side Bar

noreply@blogger.com (wiryo saputra) — Thu, 18 Dec 2008 18:29:00 +0000

Your blog like your house that you must design to make it cool. every one need time to schedule their live.so we should place a clock in our blog to indulge our visitor. I have a little tutorial to place a clock on your side bar. Just follow this step

go to http://www.clocklink.com
Click Want a clock on your Website ?
chose your desire design
Click accept
Set your time zone
set your clock size.
copy html code then place it at your side bar.

for example this clock will looking like this:

place your clock html code to your blog side bar

finish
If you confuse or You wanna ask something just leave your comment

Make a Walking Text With Marquee

noreply@blogger.com (wiryo saputra) — Wed, 17 Dec 2008 15:47:00 +0000

Hi all,

sometimes we want to make our blog look interesting by making text walking like this:

Walking Text With Marquee

if you want to make walking text like you look above, Just following this Step:

firstly, before you making you should know the meaning of each marque text. Like This:

Marque Tag <marquee>Your Text</marquee>

This Code Will Generate Your Text To Walk

for example:
Your Text

BGCOLOR="COLOR"

This code will making background color behind your marquee text.

for example: I want to make gray background behind my marquee text, so make this code at my post.
<marquee BGCOLOR="gray">

My Text

</marquee>

the result will be like this:

My Text

The Next Code is DIRECTION="up/down/left/right"

This code will setting your moving text direction. Usually This code must be followed by width code, that will setting your width of your walking text

For example: I want MY TEXT walking from right, so I must type:

<marquee width="100%" direction="right">
MY TEXT
</marquee>

the result will be like this:

MY TEXT

The last. I want to show you more code and function.

BEHAVIOR="scroll/slide/alternate -----> this code will sets your text behavior.

scroll ----> text moving around
slide -----> moving just once after that text stop.
alternate ---> text moving to the right and left.
height ----> set your height of your marquee area text
title="your message" ---> message will appear when your mouse above your message.

scrollmount="number px" ---> sets your text moving speed in pixel.

scrolldelay="number px" ---> sets your text moving delay in millisecond

Now I will show you the variation of marquee text

This Is The End Of My Marquee Posting, If You want to ask Something Just Leave Your Comment Below

Making Readmore In Your XML Template

noreply@blogger.com (wiryo saputra) — Wed, 17 Dec 2008 04:26:00 +0000

Hi Blogger,

In my new posting today, I will shared to you about "How To Make "Read more" In Your New XML Blogger Template"

Sometimes if we come to another blog, we often seen "read more" in another blog to make summary of their posting. and of course to make their blog page more simple. You want to make your posting like that. Just Follow This Steps.

As usual, Signing in to your blogger.com with your ID

Click Setting in blogger Dashboard.

Click Formatting
On the screen below, beside Post Template; Like this;
There is A blank box. Fill in the blank Box With This Code:

</div>

Click Save Setting Button

This code assembly at means that when we posting an article, that code is direct emerging without has to before hand set down. so helps we in other not to shall ever remember that code.

The next step is adding code in your template. follow this step:

Click Dashboard menu.

Click Layout.

Click Edit HTML.

Click Download Full Template to backup your template.

Checklist box beside Expand Template. like this;
Wait until the process end.

now find this code below use Ctrl+F in your template;

copy HTML code below, paste under that code above;

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

<style>.fullpost{display:inline;}</style>

<p><data:post.body/></p>

<b:else/>

<style>.fullpost{display:none;}</style>

See to underside so you can see this following code;

Copy this code typed below, then paste under the previous code.

Click Save Template button

Finish.

How To Posting Your Article?

Click Posting menu at the blogger dashboard.

Click Edit HTML, the code that you typed before will be appear like this;

Write your article that you want to appear before this code:

Write your entirely article rest after code upon previous and before this code.

</div>

Click Publish Post and open your blog. did you see your read more? is that function?

Good Luck For Every body who try this tricks.

HOW TO SETTING COMMENT BOX UNDER YOUR POSTING

noreply@blogger.com (wiryo saputra) — Tue, 16 Dec 2008 15:02:00 +0000

Hi Blogger! How are you?

When I visiting my friend's blog, I have trouble in leaving my comment. Too many process that i must do when I leaving comment in his blog. For this case, I have one solving to place your comment box under your posting like in my blog.

Follow this step :

Note: If you using minima template, you just following this step to make your comment box place under your posting.

Log in into draft.blogger.com with your blogger ID. remember Log in into draft.blogger.com not blogger.com.
Click Setting in your draft.blogger panel.
In the setting tab, Click Comments, look at the Comments Form Placement, Chose Embedded below post. like this:
Click Save Settings button that place below.
Finished, now see your blog. do you see a comment box below your post?

If you still didn't see any comment box below post. just follow the next step.

This step also function if you using costume template.

#step 1

still in your later position, click Layout

click Edit HTML.

click Download Full Template to backup your blog HTML file.

Checklist Expand Template Widget. like this:

wait a moment until the process end.

find your code like the red color text. use Ctrl+F to make it easy to find. usually there are two code. choose the code at lower most.

<p class='comment-footer'>

<b:if cond='data:post.allowComments'>

<a expr:href='data:post.addCommentUrl'
expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>

</b:if>

</p>

#Step 2

remove the code above
, change with the code typed below.

Click Save Template. Finish

Now see your blog, Is that any comment box below? If still not, leave your comment below.....