Blogger Hack|Css|HTML|Template

  • Entries
  • Comments

  • HOME
  • Blogger Templates
  • Blogging Tips

Change FeedBurner Icon With your Desire.

Sunday, December 28, 2008

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>&nbsp;<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.

Read more.....

4:20 AM | Labels: Blogger Modification, Blogger Tutorial, blogging Tips |   2 Comments  

How To Modify Your BlogLog Recent Reader.

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&amp;c_width=330&amp;c_sn_opt=n&amp;c_rows=2&amp;c_img_size=h&amp;c_heading_text=&amp;c_color_heading_bg=eeeddf&amp;c_color_heading=111&amp;c_color_link_bg=eeeddf&amp;c_color_link=c13a10&amp;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.

Read more.....

3:58 AM | Labels: Blogger Modification, Blogger Tutorial, blogging Tips, blogging Trick, Blogspot tutorial |   0 Comments  

Making Ads Place To Your Blog

Saturday, December 27, 2008


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

  1. sign in to blogger.com with your ID
  2. Click Layout, then click Edit HTML
  3. 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...

Read more.....

5:25 PM | Labels: Blogger Modification, Blogger Tutorial, blogging Tips, blogging Trick, Blogspot tutorial |   1 Comments  

How To Insert Search Form In Your Blog

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

  1. as usual, sign in to blogger.com with your ID.
  2. Click Layout then Click Page Element
  3. 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...

Read more.....

3:50 PM | Labels: Blogger Modification, Blogger Tutorial, blogging Tips, blogging Trick, Blogspot tutorial |   0 Comments  

How To Make Link Exchange Box

Saturday, December 20, 2008

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;



  1. Sign in to blogger.com with your ID
  2. Click Layout at blogger dashboard
  3. 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.......





Read more.....

2:52 AM | Labels: Blogger Modification, Blogger Tutorial, blogging Tips, blogging Trick, Blogspot tutorial |   2 Comments  

Tips To Protect Your Post From Blog Faker

Friday, December 19, 2008

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

  1. Sign in to blogger with your ID
  2. Click Layout then Click Edit HTML
  3. 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



Read more.....

10:52 PM | Labels: Blogger Modification, Blogger Tutorial, blogging Tips, Blogspot tutorial |   0 Comments  

How To Insert Animation Image At Your Post Title

Thursday, December 18, 2008

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

  1. sign in to blogger.com with your id
  2. click layout.
  3. Click edit html.
  4. 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> &nbsp;&nbsp;<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.








Read more.....

7:23 PM | Labels: Blogger Modification, Blogger Tutorial, blogging Tips, blogging Trick, Blogspot tutorial |   1 Comments  

How To Insert Clock On Your Side Bar

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



  1. go to http://www.clocklink.com
  2. Click Want a clock on your Website ?
  3. chose your desire design
  4. Click accept
  5. Set your time zone
  6. set your clock size.
  7. 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





Read more.....

10:29 AM | Labels: Blogger Modification, Blogger Tutorial, blogging Tips, blogging Trick, Blogspot tutorial |   0 Comments  

Make a Walking Text With Marquee

Wednesday, December 17, 2008

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







Read more.....

7:47 AM | Labels: Blogger Modification, Blogger Tutorial, blogging Tips, blogging Trick, Blogspot tutorial |   0 Comments  

Making Readmore In Your XML Template

Tuesday, December 16, 2008

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 class="fullpost">



</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;
<div class='post-body'>

  • 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;
<p><data:post.body/></p>

  • Copy this code typed below, then paste under the previous code.
<a expr:href='data:post.url'>Read More......</a>

</b:if>

  • 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;
<div class="fullpost">


</div>

  • Write your article that you want to appear before this code:
<div class="fullpost">

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

Read more.....

8:26 PM | Labels: Blogger Modification, Blogger Tutorial, blogging Tips, blogging Trick, Blogspot tutorial |   0 Comments  

HOW TO SETTING COMMENT BOX UNDER YOUR POSTING

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.


  1. Log in into draft.blogger.com with your blogger ID. remember Log in into draft.blogger.com not blogger.com.
  2. Click Setting in your draft.blogger panel.
  3. In the setting tab, Click Comments, look at the Comments Form Placement, Chose Embedded below post. like this:
  4. Click Save Settings button that place below.
  5. 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.


    <p class='comment-footer'>

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

    <b:include data='post' name='comment-form'/>

    <b:else/>

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


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

    </b:if>

    </b:if>

    </p>

    • Click Save Template. Finish

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

    Read more.....

    7:02 AM | Labels: Blogger Modification, Blogger Tutorial, blogging Tips, blogging Trick, Blogspot tutorial |   0 Comments  

    Newer Posts Home
    Subscribe to: Posts (RSS)


    Free Subscibe Via Feed Burner

     

    Click Icon Above If You Like My Article
    • Site Info

      Add to Technorati Favorites free counters

      Labels

      • Blogger Modification (11)
      • Blogger Tutorial (11)
      • blogging Tips (11)
      • blogging Trick (9)
      • Blogspot tutorial (10)

      Blog Archive

      • ▼  2008 (11)
        • ▼  December (11)
          • Change FeedBurner Icon With your Desire.
          • How To Modify Your BlogLog Recent Reader.
          • Making Ads Place To Your Blog
          • How To Insert Search Form In Your Blog
          • How To Make Link Exchange Box
          • Tips To Protect Your Post From Blog Faker
          • How To Insert Animation Image At Your Post Title
          • How To Insert Clock On Your Side Bar
          • Make a Walking Text With Marquee
          • Making Readmore In Your XML Template
          • HOW TO SETTING COMMENT BOX UNDER YOUR POSTING

      MY LINK EXCHANGE

    • Blog-Catalog

      My Community

      Are You Interested??

      Join Now!!


    Copyright 2008 Free Premium Wordpress Themes and BlackQuanta | Bloggerized by : GosuBlogger