Automatic Read More Hack at Once for All Posts with Thumbnails

I came to know with this amazing Read More Hack of blogger!

All previous hacks were controlled manually where author can differentiate the summary length and this make the HomePage awkword due to different lengths of posts. But this hack summarises the posts with predefined and same length. All previous hacks were not applicable to all previous posts but this one applies on all posts either pervious or upcomings. The additional quality for this hack is its thumbnail show! Yes! It shows the first picture of the post as Thumbnail.

Here are the details of this hack:

PART-1

First we have to add some JavaScript code in the Head Section of Template, for this login to your Website/Blog and navigate to Layout section of your appropriate Blog. Here you navigate to sub section Edit HTML and check the box just before Expand Widget Templates option.

Now search the template code for tag </head> and place the following Code just above that tag for the First Step:

<SCRIPT type='text/javascript'> var thumbnail_mode = "no-float" ; summary_noimg = 500; summary_img = 400; img_thumb_height = 130; img_thumb_width = 281; </SCRIPT> <SCRIPT src='http://www.smashingtips.com/wp-content/uploads/2009/05/read-more.js' type='text/javascript'/>

then Second Step search out the tag <p><data:post.body/></p> and replace the whole tag with the code given below:

<b:if cond='data:blog.pageType == &quot;item&quot;'><p><data:post.body/></p><b:else/><DIV expr:id='&quot;summary&quot; + data:post.id'><p><data:post.body/></p></DIV> <SCRIPT type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</SCRIPT> <div style='clear: both;'/> <div style='border:0px;padding-top:5px;;float:right;text-align:right;'><span class='readon'><a expr:href='data:post.url' rel='bookmark'><img src='http://i422.photobucket.com/albums/pp302/bloggeracs/ReadMore.png'/></a></span></div></b:if>

The job is DONE! Now first you Preview your Template and if found satisfactory then save the Template.

PART-2

Now I will tell you that how to customize the template code as per your needs and template theme.

Here in default the Thumbnail is unformatted. If you want to change the format e.g. you want the Thumbnail to be shown at left side, just replace the "no-float" with "float" from var thumbnail_mode = "no-float";.
img_thumb_height = 130; this atribute defines the hieght of the Thumbnail, where 130 is pixels.
img_thumb_width = 281 ; this atribute defines the width of the Thumbnail, where 281 is pixels.
To adjust the Thumbnail area just varry the pixels.
summary_noimg = 500 ; is default. For default; if you don't have any image in post; the summary will comparise of 500 characters, you can change the figure 500 as more or less you want.
summary_img = 400 ; shows that the summary of the post with Thumbnail will comparise of 400 characters, here you also can change the figure as per requirement.
[[[http://i422.photobucket.com/albums/pp302/bloggeracs/ReadMore.png]]] is the URL of the "Read More" Button used in this Hack, if you have yours then you can change the above URL with the URL of your button.

........Read Full Article........

DISPLAY 'RECENT POSTS' & 'RECENT COMMENTS' IN BLOGGER

How to show the RECENT POSTS and RECENT COMMENTS, this is too simple. This is what we can make with the BLOGGER's default widgets.

To add RECENT POSTS:
-Go to LAYOUT
-Select Add Page Element
-There you choose some suitable place to place the widget, then click on Add a Gadget/Element
-Now select the FEED from the shown list, this will open in separate window

Here you enter your FEED URL, it must be http://www.yourblogurl.blogspot.com/atom.xml

Change the yourblogurl with the URL and press continue, existing window will be replaced with another one, here you put your desired information.

Same like that you can add RECENT COMMENTS, but the difference is, that you must enter the http://www.yourblogurl.blogspot.com/feeds/comments/default insteat the http://www.yourblogurl.blogspot.com/atom.xml
The process is the same.

If you like the TRICK, then DIGG IT!

........Read Full Article........

EMBEDING THE HTML & JAVASCRIPT CODE INSIDE POSTS USING DISPLAT BOXES

Last time I told HOW TO EMBED HTML TEXT IN BLOGGER POSTS, there an APPLICATION was used, here this is also used.

Today I will tell you the way to show that HTML & JavaScript Code in Custom Display Boxes. The thing to do is that some code should be pasted in the template code.

HOW?

Here is the PROCEDURE!

NOTE: Before doing this, you must download your template code, so if some mistake took place, you could reload your template.

-Go to LAYOUT
-Select EDIT THML
-Tick the box just before Expand Widget Template
-Find ]]></b:skin> in the template code and press ENTER Button at start of this line.
-Paste the following CSS code above that line (as shown in picture):

pre
{
background:#efefef;
border:1px solid #A6B0BF;
font-size:120%;
line-height:100%;
overflow:auto;
padding:10px;
color:#000000 }
pre:hover {
border:1px solid #efefef;
}
code {
font-size:120%;
text-align:left;
margin:0;padding:0;
color: #000000;}
.clear { clear:both;
overflow:hidden;
}
 

This Trick will draw boxes for HTML & Javascript codes with fix width & hieght, but you can fix it by editing the values in the given code as per your requirement. The boxes are not shown automatically, ou have to call them with some easy step as follows:

<pre>
"Your HTML or Javascript Code"
</pre>

Now here is the usage of that APPLICATION, i told at the start of the post. This utility provides you the translated HTML code of your desired HTML Code which you want to show in the post. Get that translated code, paste it between <pre> & </pre>.

If you like this post just DIGG IT!

........Read Full Article........

DIGG BUTTON IN BLOGGER POSTS!

DIGG it!

This is a social content website, where articles are submitted. If, your readers like any of yours posts, they simply Digg it! They like the material of post and Digg it for you and your Blog, and will wirte comments!

For all this and your readers, you as a host, must make easy all this and encourage your readers to submit your Blog posts. How to make? There are many ways to put the Digg button in the post. You can place the Digg button right after your Post Title, at the left side of the post, right side of the post, bottom of the post, in the footer of the post, right after the labels and even there where you like by editing the HTML Code of your template.

There are many buttons different in shape, has different text on them.

Now the thing to is, what code is to edit to place the Digg button in the posts. Here are the details:

Step-1: If you want to place the Digg button at each of your posts, you much set the Post Pages setting to 'YES', to enable it to this setting login your blogger account-> go to the Setting of your desired Blog->click the Archiving-> here set the Enable Post Pages? to YES. This action enables you to place the Digg button in every post, but here you are unable to include or exclude the Digg button from some specific post.

Step-2: Go to the Layout-> click Edit HTML, [Note: Before editting the Template Code, always download you template code or copy the text code to a new text file. So if you make any mistake you could install your old template.] -> check the box just before the Expand Widget Templates, now scroll down the template code and find:

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

Now:

I- If you want to place the button at the top right corner of your post, insert this code just before the above mentioned code:
<div style='float:right; margin-left:10px;'><script type='text/javascript'>digg_url=&quot;<data:post.url/>&quot;;</script><script src='http://digg.com/tools/diggthis.js' type='text/javascript'/></div>

II- If you like the button to be appear at the right upper corner of the post then paste the below code just before the above mentioned code:

<div style='float:left; margin-right:10px;'><script type='text/javascript'>digg_url=&quot;<data:post.url/>&quot;;</script><script src='http://digg.com/tools/diggthis.js' type='text/javascript'/></div>

III- If you want that the button should be place at the bottom of the post then paste the following code just after the above mentioned code:

<div style='float:right; margin-left:10px;'><script type='text/javascript'>digg_url=&quot;<data:post.url/>&quot;;</script><script src='http://digg.com/tools/diggthis.js' type='text/javascript'/></div>

IV- If you paste the following code just before the <div class='post-body'> you will get the button just below the post title at the right corner:

<div style="float:right; margin-left:10px;"> <a expr:href='"http://digg.com/submit?phase=2&amp;url=" +data:post.url + "&amp;title=" + data:post.title'target='_blank'><img border="0" alt="Digg this" src="http://digg.com/img/badges/91x17-digg-button.gif"/></a></div>

........Read Full Article........

LET YOUR VISITORS BE COUNTED FOR YOU

People who are new webmaster/blogger are always interested to know that how much people are visiting thier Blog a day, a week, a month, and where they come from, search engine, reffer, who is reffering them to you. These are much interesting information for a webmaster.

Search for the sites who provide the stat counters for Blogs & Websites, therey are too much. Not all but some sites will provide you all the information (discussed above) to you. Here are some of these, but remember all the sites need you to be registered and provide the common information regarding your Blog, then they will provide you the HTML Code of your desired counter, which you have to embed in your Blog.

How to do that?

-Sign-in to your account & go to dashboard.

-Go to Layout section.

-Open the Add a Page Element.

-Select the HTML/Javascript option in the list. (a window will be open)

-Paste the Code (provided by the counter site) in the window and SAVE it.

Save the changes and view the Blog, you counter will be there. Now your Blog is being tracked for your visitors.

Here are some good counter-sites:

Get your CODE HERE

Get your CODE HERE

Get your CODE HERE

........Read Full Article........

INCREASE YOUR TECHNORATI AUTHORITY!

How to increase Technorati Authority?

This is the question, asked very frequently in the Blogging world by the new bloggers. If you are a new Blogger, then first What is Technorati..... Technorati is one of the leading Blog Search Engine which crawls and indexes millions of Blogs. And the secondly What is the Technorati Authority..... it means the total number of Blogs which were linked to your Blog within last 6 months. Technorati Authority is also a parameter for advertisers, because they look for this to buy the adds spot. If you Technorati Authority is High, it means your Blog is popular and has messive traffic, so the advertisers will preffer your to buy the add spots in your blog.

So want to become the favorite for the advertisers, here are some ways to make your blog popular than others:

1. Link Exchagne: Exchange your links with the Blogs most popular and related to your Blog topic. To do this just find the subject Blogs, contact the owners of those and offer them to exchange their links with you! For this go through the Blog Directories and Blog Search Engines, select your Category, find your desired ones and go ahead with those to exchange the links.

But why they will exchange their links with yours, if you don't have the contents good enough???

2. Quality Content: As you require the real material in the Newspapers, good features in any product, nice theme in Drama and Movie, then you should post the good quality content to your Blog, so the readers could have something new and good from you Blog. If you could do so, then the readers will come to your Blog and your Blog will be popular well.

3. Give a Way to You: If you are expertise in some field like fonts, Icons, template etc, then offer some free stuff to other people so they come to your Blog and have fun, just let them link to your Blog.

4. Link to Us: The readers who love your Blog want to add your link to their Blogs, so just design a small and pretty button or icon and add the "Link to Us" HTML code to your sidebar. This is easy for your readers to jsut copy and paste your link to their blogs.

5. Buy Links: If you want to increase your traffic with other ways then just buy the links on other blogs and websites related to your blog's topic and advertise your blog. This will increase you traffic, increase your Technorati Authority and increase the chances to be favorite add spot for advertisers.

6. More Blogs: If you have more blogs then you can increase your Technorati Authority easily by linking your all blogs to your main blog. More blogs you lin to your Blog, your atuhority will increase automatically.

7. Top Commentators: Try to find the people who have the 'Top Commentator' widget on their blogs. You just comment on their posts and get a backlink. DO NOT SPAMMMM!

8. Use Technoratie Badges: Technorati Badge is a button used to make favorite the Blog in the rating (Here it is.). You just simply add it to your Blog so the readers could fav you in Technorati Rating, it gives you a point.

9. Ping Blogs: Ping the blogs who are linking to your one. Just find the Blogs who are linking to you and ping them, doing so the Tecnorati will crawl them first and your authority will be increased automatically very fact. You can ping HERE.

........Read Full Article........

TECHNORATI ADD TO FAVORITES - PLACE THIS BUTTON IN YOUR BLOG

Technorati rating is good for your Blog Indexing and Page Ranking. Your readers do this.

How?

Just add this button to you Blog, this will make easier for the readers to favorite your Blog on Technorati. And here is the procedure to do the all..........

Place this button in sidebare, just go to Layout, then Add a Gadget, now go to html/javascript, paste the code (provided below) and save it. Here you have Technorati Favorites button:


Type 1:



<a href="http://technorati.com/favs?add=http://yourblog.blogspot.com"><img src="http://i40.tinypic.com/2yw8lma.jpg" alt="Add us to your technorati favorites" width="145" height="25" border="0" /></a>

Type 2:

<a href="http://technorati.com/favs?add=http://yourblog.blogspot.com"><img src="http://i42.tinypic.com/nqe0lc.jpg" alt="Add us to your technorati favorites" width="145" height="25" border="0" /></a>


Type 3:



<a href="http://technorati.com/favs?add=http://yourblog.blogspot.com"><img src="http://i44.tinypic.com/2utnl9u.jpg" alt="Add us to your technorati favorites" width="80" height="15" border="0" /></a>


Here you get your favorite Technorati Favorites add button.

NOTE: When you paste the appropriate button code in the HTML/Javascript window, then replace the yourblog.blogspot.com with your blog address, and save it.

........Read Full Article........

GET FEED BACK FROM YOUR READERS - THEY RATE YOUR POSTS

Hey! do you know readers love your posts? What they about?

Having trouble to know? It's no problem!

You can get feedback from your readers either they like your post, and how much! For this you just add this beautiful Outbrain 5 star rating button to your Blog. You also can use this in anyother webpage you have. When you will add this to your Blog, you will automatically get the beautiful 5 star rating widget just below the Post.

Some readers ignore this and pass comments on your Post, it is better, but some readers are lazy they just tick the star and rate your post as ABCDE........

Get your own rating widget HERE.

Thanks to Outbrain to provide this widget for FREE and without getting register.

........Read Full Article........

{HOW TO} Embed HTML Text in Posts with background

While looking on my previous posts, I felt that there was a problem in my BLOG, that the HTML Text, shown inside the posts, was directly texted in the lines. It seems to be difficult to read some text under this format, so I was searching for the solution and I found one in TricksDadyy.com.

This is a simple and very short trick, takes just a min only!

All to do is to:

• Login to your account,
• Go to LAYOUT
• Go to subcategory EDIT HTML

There will be shown your Template's Code, you all have to do that edit that code by pasting code given below, just before ]]></b:skin>

• Now search ]]></b:skin> in template code
• Paste the following code just before that;

.csscode {
margin : 15px 35px 15px 15px;
padding : 10px;
clear : both;
list-style-type : none;
background : #EEEEEE;;
border-top : 2px solid #AAAAAA;
border-right : 2px solid #AAAAAA;
border-bottom : 2px solid #AAAAAA;
border-left : 2px solid #AAAAAA;
}

• Done IT!

Just save your template.

The work is not finished.

Now whenever you want to embed some HTML Text inside post, just type the subject code between <div class=csscode> and </div>

Like:

<div class=csscode>

Type HTML Code HERE

</div>

• The ALL is DONE!

Now whenever you will post with this method, HTML Code will be embeded with BACKGROUND.

........Read Full Article........

HOW TO EMBED THE HTML TEXT IN BLOGGER POSTS

As I started blogging i faced many more problems, but i sort them out, How?

Then I thought that the solution for those problems must be told to everyone. So i started to post my experiments, but there was another problem.

When I typed some HTML Code post and published that post, the HTML Code was invisible. This was because Browser interpret the HTML code as instruction how to show the post.

e.g if I type the command <br/> , the Browser will take this as an instruction (line Break) and show the followed content in a new line.


Now what to do here?

Then I tried to change the symbols into their codes for; like

'<' for &lt '>' for &gt


This effort ended my problem but it was too difficult for me to change all the symbols, then I searched & found this utility which enable me to counter that problem.

http://centricle.com/tools/html-entities

Now i was free of trouble to show the HTML text to you!

........Read Full Article........