Blogger hack: Hide blog post date!

The theme of this blogger hack is not new. I have already written a post to remove blog post's date, time and author earlier. But this blogger hack doesn't removes the blog post date rather it just hides the blog post date from your reader so that you shouldn't have to remove the code from your template.

Start by going to Dashboard then to Layout and finally to edit HTML.

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

Now replace the above code with the following code below:

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

Now save the template, reload the blog and thank me. This was easy, wasn't it?
You can also try other blogger hacks like Controlling number of posts displayed in archive and label pages or Removing borders from header and images.

Create Table of contents: A blogger hack.

Back again with a blogger hack and this time with a coolest thing. You can see 'Show Table of contents' section in my blog now where all my table of contents will be loaded with one click. You can try it just to see what table of content looks like if you haven't seen it earlier. Well before starting to write about this blogger hack, i want to remember Hans of beautifulbeta who created this blogger hack as far as i know. Well, i am deriving his codes and hacks but i am trying to write in a much simpler way then him. So here is the process to create a Table of contents in your blog.

Table of contents helps your readers to find your posts easily. Just add some codes and all your posts are one click away from your readers.
Goto blogger 'Edit HTMl' page and search for the code <b:section> with id=main. This is the section which held blog posts. Now replace that line with the following code.

<b:section class='main' id='main' maxwidgets='2' showaddelement='yes'>

Now add the following CSS code to the head section of your template. This code is for the style of your table of contents. You can change this code according to your choice. The best place to add this code is just above ]]></b:skin> I am saying this place now because i was really confused about at which place of the head section should i put this code when i was creating my own Table of contents.


<style type="text/css">
#toc {
border: 0px solid #000000;
background: #ffffff;
padding: 5px;
width:500px;
margin-top:10px;
}
.toc-header-col1, .toc-header-col2, .toc-header-col3 {
background: #ffd595;
color: #000000;
padding-left: 5px;
width:250px;
}
.toc-header-col2 {
width:75px;
}.toc-header-col3 {
width:125px;
}
.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {
font-size:80%;
text-decoration:none;
}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
font-size:80%;
text-decoration:underline;
}
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {
padding-left: 5px;
font-size:70%;
}
</style>

Now you are done with 'edit HTML' page. Now save the template and go to 'page elements' section.
Now click on 'add a page element' and then click on 'HTML/Javascript'. Now paste the code there leaving title blank.

<div id="toc"></div>

Now do the final step. Again add a new page element and click on HTML/javascript. Now paste the code there and keep the title 'Table of contents'.

<div id="toclink"><a href="javascript:showToc();">Show TOC</a><br/><br/></div>
<script style="text/javascript" src="http://home.planet.nl/~hansoosting/downloads/blogtoc.js"></script>
<script src="http://YOURBLOG.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script>

Change YOURBLOG with your own name and congratulate yourself for making your own table of contents.
This was todays blogger hack on creating table of contents. You can also try other blogger hacks like Adding Yahoo! emotion on your blog post or making your images tweak on blogger.

Blogger hack: Add Yahoo! emotion on your blog post

Time for another blogger hack. And this time its not about expandable sidebar or adding social bookmarking widget, its about your emotion. Yeah, we are dealing with adding Yahoo emotion on your blog post section. Yahoo emotion? Yes, its true. Can't post your own emotion so took a help from yahoo. So here's how we make this blogger hack happen.

Adding Yahoo emotion in your blog post section is really easy, as easy as . Its just a matter of few HTML and what you gotta do is follow the instructions below. Oh wait, i forgot first make sure that you are using Mozilla firefox as you cannot move a step ahead if you are not using it.

Step 1
Install Greasemonkey which is an firefox add on on your browser. Click here to get greasemonkey. After you install restart your browser so that add on will work.
Step 2
Click this script and then click install.
Step 3
Now its about your HTML code. Goto 'Dashboard' then to 'layout' and then to 'Edit HTML'. Now same OLD boring line "Please backup your template so that you can use it afterwards if anything goes wrong".
Now search for this code: ]]></b:skin>
Step 4
Now copy the following code just above the code in step 3.

img.emoticon { padding: 0; margin: 0; border: 0; }
Step 5
save your template and Congratulations! You made it, wooo!

To check if you are done or not , goto blogger create post, you will see the emotion in the tools panel of the compose tabs as in image below.
If this blogger hack was good then why don't you try Control number of pages displayed in Label and archive page?

Blogger hack on expandable content script for blogger

Another blogger hack here but its UPDATED. I just want to tell you that this Updated blogger hack about expandable content script for blogger is not so crappy like matrix reloaded rather it is cool and mostly, this blogger hack works woopie!

If you are unsure about the topic then i suggest you to look at my sidebar. Yes, expandable content script will help us create expandable content for blog like my sidebar. Just click on '+' sign of my sidebar once and you will be cleared about the function of expandable content script for blogger. But since this is am updated blogger hack, i first suggest you to read my older post on expandable content script, Create expandable sidebar.
Wait before you start calling me genius for creating updated expandable content script for blogger let me tell you that this post belongs to somebody else. Yeah the whole credit goes to Bloganol, who created this updated blogger hack. So i suggest you to check Create expandable script for blogger. I hope the link will help you learn the blogger hack and make your blog look stylish and neat.

Blogger hack: Control number of posts displayed in Label page!

Blogging hacks, this word has fascinated me so much lately that almost everyday i post a new hack. Its hard to collect hacks but feels really good when you guys like it. Comment is the thing that inspires me a lot and thank you guys, i have been getting some comments lately. Today,s blogger hack is pretty easy. We can control number of pages to be displayed on the Label pages from this hack. So read rest of the post to learn this blogger hack.

You may find it conjusted when there are lots of post displayed in your Label age. You may want to control it on your choice. So what are you gonna do? From this blogger hack you can easily control number of pages to be displayed on your label pages. You can keep it as your wish, 5,10 or whatever. So lets do it step by step.
Step 1:
Sorry, same old boring line again. Goto 'Layout' then to 'Edit HTMl' and don't forget to click on 'Expand widget templates'. Please don't forget to back your template up.
Step 2:
Search for this code:

data:label.url

Now replace the upper code with this code:

data:label.url + "?max-results=n"

Where, "n" is the number of post you want to display in your label page. Just replace "n" with your choice of number and save the template. Now check on label to see if this blogger hack have worked on you or not.
This was today's blogger hack and i will bring you lots of other cool blogger hacks soon. Till then you can check other blogger hacks like Show only Post Title at Labels and Archive page or How to hide borders from header and images?

Blogger hack: Only show "Post Title" at the Label and Archive page

You too may hate it like me but you have no idea how to remove it. I am talking about the full articles that comes in your label page. How would it be when your "Post title" is only shown except of full post in your label and archive page? Well, it will be great as your page will take less time to load and you will get another page view from your reader if they find your Post title attractive. So in today's blogger hack we are learning to show only post title at the Label and archive page.
Step 1:
Same old line, go to 'Layout' then to 'Edit HTML' and click on 'expand widget templates' checkbox. Now backup your template by clicking 'Download full template' so you can get your template back if anything goes wrong.
Step 2:
Search for the code below:

<b:include data='post'name='post'/>

Step 3:
Replace the above code in step 2 with this code:

<b:if cond='data:blog.homepageUrl!= data:blog.url'> <b:if cond='data:blog.pageType != "item"'> <h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3> <b:else/> <b:include data='post' name='post'/> </b:if><b:else/><b:include data='post' name='post'/> </b:if>

Now save the template and you did it. This was real easy wasn't it? If you liked this hack then why don't you try to create a Drop down menu in your blog or Hide blog posts date,time and author.

There are lots more blogging hacks coming. So Subscribe me so that you will not miss any of the cool blogger hacks.

Blogger hack: Create drop Down labels

After talking about blogger hacks like how to create drop down menu and how to add Digg button on your post, in this series of blogger hacks we are talking about how to create Drop down labels. Drop down labels? Yeah, no kidding, i swear of Peter's mom that this blogger hack is going to be cool and really great to implement too.

This blogger hack is not that hard to implement. It is just the game of few codes and you are done. So lets go to the point on how to create Drop Down labels. Firstly go to 'Layout' then to 'Edit HTML' and click on the 'Expand widget template' checkbox. i am again repeating the same boring thing 'Please download your full template first'. Okay, so are we done till this step? Okay then let's move forward.
Now look for the following code in your template

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>

 <ul>
   <b:loop values='data:labels' var='label'>
     <li>
       <b:if cond='data:blog.url == data:label.url'>
         <data:label.name/>
       <b:else/>
         <a expr:href='data:label.url'><data:label.name/></a>
       </b:if>
       (<data:label.count/>)
     </li>
   </b:loop>
   </ul>


<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Now, replace the code above in blue with following code.

<br />
<select onchange='location=this.options[this.selectedIndex].value;'>
<option>Select a label</option>
<b:loop values='data:labels' var='label'>
   <option expr:value='data:label.url'><data:label.name/>
      (<data:label.count/>)
   </option>
</b:loop>
</select>

Now save the template and you are done. Wow, you did it man.
This was todays blogger hack. If you will use this hack then i hope a free backlink from you.

Swimming around a blogpond: A blog i liked

Sometimes you feel so low that you don't like to write a post about new blogger hack nor you like to keep sticking on mybloglog to see your traffic stats. It's a time to explore something and guys i am out with my untied seatbelt to travel the wild blogosphere. While exploring the blogosphere i went through a personal cum technical wordpress blog of Hari and here i am writing about it.

A black background with orange post background color and white colored links is what Aspiring entrepreneur blog is made off. I don't know why he calls his blog Aspiring entrepreneur but forget that because till now i don't know why i am calling my blog Third world chaos. College, education, free downloads are some of the categories covered by this blog and that too in a cool way. This was todays post about Aspiring entrepreneur and if you love to read personal blog then you can go for this blog.

Blogger hack: create drop Down menu

In this todays post, we are talking about creating drop down menu. For your idea, a drop down menu is the menu THAT DROPS DOWN! Oh, this was the worst definition you may have heard about drop down menu but what can i do? This is the best i can give.

It's not hard to create a drop down menu, its just a trick or lets say hack. What you gotta do is just copy the code given below and put it in your page elements.

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

The Green text you see their is of your links.So CHNAGE it with your links.
The Blue text you see their is your Anchor text. So change it with your anchor text too.
Time for an example:

This is the code i used to create the Drop down menu you can see in my sidebar.

<select onChange="document.location.href=this.options[this.selectedIndex]
<option value="0" selected>Blogger Hacks</option>
<option value="http://thirdworldchaos.blogspot.com/2008/05/blogger-hack-add-digg-button-to-your.html">Add
Digg button on your post</option>
<option value="http://thirdworldchaos.blogspot.com/2008/05/blogger-hack-dont-let-anybody-copy-your.html">Disable
Right click on your blog</option>
</select>

If you want to add more value then you can put a code like below.

<option value="Links 3">Text 3</option>
before this code </select>

If you want the links to be opened in new window then replace below code:

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

With this code:

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

I think now you too are rushing to create a drop down menu like yours. So if you are doing it then can i get a link please.

Blogger hack: Add Digg button to your post!

I am still unaware about the definition of blogger hack. In my sinple and innocent( he he) sense i think every thing related to the blogger codes may be called blogger hack. Was that wrong? Thank you smartass, leave your comment below about it then. Okay now lest go to the topic. today we are adding digg button on our post. And its easy to do that. Digg button on our post? Well, the button under my post title may help you.

This blogger hack(i said it, again) is not hard to implement. A digg button under your post in the way like my blog is just a few clicks away. So let's go step by step.
Step 1
I am making you bored again. Please download your full template so that you can have it like now. For that go to 'Dashboard' and then to 'Layout' and then to 'edit HTML'.
Step 2
Okay, i guess now you are on 'Edit HTML' section and have already backed your template up. Dont forget to click on 'Expand widget Templates' checkbox. Now search for this code
<p><data:post.body/></p>
If you want to put your botton on the top left like mine then replace the above code with this.
<div style='float:left; margin-right:10px;'>
<script type='text/javascript'>
digg_url="<data:post.url/>";
</script>
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'/>
</div>
<p><data:post.body/></p>

But if you want to keep it at the top right corner of the page then replace with this code:
<div style='float:right; margin-left:10px;'>
<script type='text/javascript'>
digg_url="<data:post.url/>";
</script>
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'/>
</div>
<p><data:post.body/></p>

You can keep experimenting with the codes to keep it on other parts of the blog too. If this post about Digg was good then please Digg me!

Blogger hacks: Recent comments in the sidebar.

This blogger hack is useful, this blogger hack is cool and the best thing is this blogger hack is so easy to implement. Gentleman, welcome to the post dedicated on showing recent comments in sidebar.

Showing recent comments in sidebar is not a hard thing to do. Its just a game of code. So without delay i am onto game. To show recent5 comments on sidebar, you should copy the following codes in red and stick it in the template. After you save it, see your recent comments on sidebar.

<MainPage>
<h2 class="sidebar-title">Recent Comments</h2>
<ul>
<Blogger>
<BlogItemCommentsEnabled>
<BlogItemComments>

<li><$BlogCommentAuthor$> //
<a href="<$BlogCommentPermalinkURL$>">
<$BlogCommentDateTime$></a></li>

</BlogItemComments>
</BlogItemCommentsEnabled>
</Blogger>
</ul>
</MainPage>

If you are using this blogger hack then i hope i could get a link back to me.

Blogger hack: Don't let anybody copy your post content!

A question first. Do you love your content to a extent that you don't want anybody to copy it and paste it in their blog? Or are you strictly against plagiarism? If your answer is yes then this blogger hack is for you. This blogger hacks disable any right click on your content so that some newbie thief can't copy your content. Did i said newbie? Yes only newbie can be blocked from copying your content because professional thief will copy your content anyway.

Not many bloggers use this blogger hack to disable right click on their post content. I too havent done that as i am confident that nobody has faced such a bad day to copy this shit. He he. I am safe. Okay so lets cut the crap and go to blogger hack directly. What you gotta do to implement this is firstly goto 'Layout' and then click on 'Edit HTML'. Now find <body> code and replace it with the code given below.
<body onmousedown="return false" oncontextmenu="return false" onselectstart="return false">

Now save the template and you are done. Dont forget to see other blogger hacks too on the related posts.

Blogger hack: Hide blog Post date, time and author.

I am not sure why people use this blogger hack. I have never used it after all who wants to hide their name as the author of the blog. But this blogger hack is really useful for the ones who want to keep their blog clean in fact very clean by removing all the post date, time and name of author. So if you too belong to the same category then this blogger hack is for you.

First thing first, go to 'layout' and then to 'Edit HTML'. Don't forget to check 'Expand widget templates'.

Hide Post date
To hide the post date, find the code below and delete it.
<data:post.dateHeader/>

Hide Post time
This blogger hack says, to hide post time find the code below and remove it, NOW!
<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
To hide the name of author, why don't you find code below 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>

Congratulations, now your post is time, date and author free. Don't let it be readers free!
If you are thinking to use this blogger hack then can i get a linkback please!

Blogger hack:Show first post letter BIG!

Still not sure if this is called a blogger hack or not. in fact i don't know the meaning of the word called 'blogger hack'. Its not that i have not searched in dictionary but i haven't found it. Maybe it was dictionary problem or mine problem while choosing the smallest dictionary from the store to save money for smoking. Well, jokes apart. So today we are talking about how to make the first letter of the post big and bold. If you are confused about what i am talking then the screenshot below may help you.

Now i think you have got some idea about it. So without wasting our time lets go to the blogger hack.
Step 1

Go to 'Layout' and then go to 'edit HTML'. It is better to 'Download full template' for the backup.
Step 2

Copy the following code and paste it anywhere in the CSS stylesheet. It is better if you paste it in front of the closing b:skin tag.

.dropcaps { float:left; color: $headerBgColor; font-size:100px; line-height:80px; padding-top:1px; padding-right:5px; }

Step 3

If you are done with step 2 then lets talk about step 3. From now, put code below in every post whose first letter you want to make big.

<span style="gt;<span class="dropcaps"> Post First Letter Goes Here</span></span>

If you liked this post then can i get a comment from you or just a linkback if you use this?

Blogging Tricks: Add snow on your background.

Here is a new blogging trick and i swear that this is not my original post. The man behind this post is the same man behind Dynamicdrive. So if you got any problem with this script or it didn't worked for you then i am sorry, talk to Dynamicdrive first. He he, i am safe. Oh, we were talking about snow. So in todays blogging trick, we will create cool snow on our blog background. But i think firstly you want to check this demo.

This snow stuff works on the blog with dark background. So , i hope now that you have already seen the demo and i think some of you are even wishing to try adding snow on your blog. So here is the code to add snow in your blog's background.

<script type="text/javascript" src="snow.js"> /*********************************************** * Snow Effect without images-by Kurt Grigg at http://www.btinternet.com/~kurt.grigg/javascript * Script featured and available at Dynamic Drive at http://www.dynamicdrive.com/ * Please keep this notice intact ***********************************************/ </script>

If this post was little readable then Subscribe me!

Disable right click on images.

This is a new blogger hack. Well, i am not sure if its called blogger hack nor i think its new. But i had to start the paragraph with nice line so i said new blogger hack. You gotta problem with that? Okay, lets get to the point. Today we are learing(its learning, actually) to disable the right click on images. Disable the right click, what does it means? Oh, it means that the image can't be saved by clicking save image as which means your images cannot be stolen. Confused? I am sure you are. I am not good at english. So just read the whole post below and know by yourself.

Okay i think now you are known about the meaning of disabled right click and when do we need to disable right click on blog's images. So, if you think that thing is a thing you can too try in your blog then here is the code. Just paste the code below in the END of the page above end /body>tag and you are done. Congratulations, now your images are all safe.

<script language="JavaScript1.2"> /* Disable right click script II (on images)- By Dynamicdrive.com For full source, Terms of service, and 100s DTHML scripts Visit http://www.dynamicdrive.com */ var clickmessage="Right click disabled on images!" function disableclick(e) { if (document.all) { if (event.button==2||event.button==3) { if (event.srcElement.tagName=="IMG"){ alert(clickmessage); return false; } } } else if (document.layers) { if (e.which == 3) { alert(clickmessage); return false; } } else if (document.getElementById){ if (e.which==3&&e.target.tagName=="IMG"){ alert(clickmessage) return false } } } function associateimages(){ for(i=0;i<document.images.length;i++) document.images[i].onmousedown=disableclick; } if (document.all) document.onmousedown=disableclick else if (document.getElementById) document.onmouseup=disableclick else if (document.layers) associateimages() </script>

If you think this post was just digestible then can you link me back please?

Add Social bookmarking widget in blog!

This widget is so easy to set up and much more helpful too. I hope most of you guys have already implemented this on your blog. But for those who haven't, this post is for you. By the help of this widget the readers of your blog can submit your article to many directories like Digg, Delicious, Blinklist and lot more. Click Read more to know more and see the screenshot!


Step 1
Go to blogger layout and then to edit template section. Don't forget to back your template up and please click on 'expand widget template' check box.

Step 2
paste the code in this text file between to section of your template.

Step 3
Search for this code following code in your template:

Step 4
Replace the above line with this text file.

Step 5
Save your template.

Oh man, you did it. wow. Now it is so easy for your readers to add you on Digg and other social networks. Congratulations!

How to expand the sidebar?

Have you seen something so cool in my sidebar now? Yeah i am talking about the sidebar that expands when it is clicked. It is one of the coolest thing i did in my blog after making peek-a-boo post. Look now fellas! My post as well as sidebar both are expandable. So if you too are interested to keep the expandable sidebar in your blog or just want to check how it looks then read more.

This hack(should we call it hack) is not mine. rather this hack comes from the person who said he spent two days to create the code. Hallelujah! He deserves it. So the man behind is of site Flooble! Flooble is the site that contains Blogger scripts, Blogger hacks and lot more. If you are interested to learn blogger hacks , do yourself a favor, Check the Fooble site.
Oh, we were on sidebar expand. Okay so i am not giving any codes here and i am directing this to Foobls site. So click here to know the way of getting expandable sidebar. If this hacks works on you then don't forget to leave me a comment so that i can add you in my blogroll.

How to make your image tweak on mouse hover?

Clueless on the title? Or just want to know what does it means? Okay, if you want to see the demo Just go and hold a mouse on any image of this blog. Cant find any image? how about the title image of the blog? Did you see anything? Yeah right the images are tweaking. How can we do that? Click Read more to know the most simplest way to make your image tweak on mouse over.

It's so simple yet so nice. Just a little code on the Template and Voila! Okay, just copy the code below and paste it in the head section of your template. Now you are done, congratulations!


img:hover {
position: relative;
top: 1px;
left: 1px;
}


If this hack was really easy to implement then why are you being shy to Subscribe me!