Showing posts with label Blog Hack. Show all posts
Showing posts with label Blog Hack. Show all posts

New Related Posts with Thumbnails for Blogger


Displaying the links to related posts along with a thumbnail of the corresponding post will help you increase the page views/user .Users will be tempted to go for the related posts when they are presented attractively with thumbnails.

This is another first release from me.This one also uses the media thumbnails generated by blogger for each post.

For displaying the thumbnails,this widget will use the images uploaded for the post using the blogger image uploader(from the post editor) [Update - Now supports external images also.]

Related Posts Widget with Thumbnails for Blogger

Here are the detailed installation steps

1.First of all Login to your blogger dashboard and navigate to Layout > Edit HTML and check the "Expand Widget Templates" check box


Read Full Article Here....



Read more ...

Show the post on daily Inspired templates

( use firefox for easier finding the source)

<div class='post-body-n'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>


Copy code in above, and paste it above this source

<!-- IF NOT HOME -->


And Done...
Read more ...

How to Make Recent Comment (Blogger)

This tutorial is for how to make recent comment using Javascript code.

1. Go to layout > Add Gadget > Choose HTML/Javascript > Copy And Paste Code Below



<ul><script style="text/javascript">
function showrecentcomments(json) {
for (var i = 0; i < 5; i++) {
var entry = json.feed.entry[i];
var ctlink;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
ctlink = entry.link[k].href;
break;
}
}
ctlink = ctlink.replace("#", "#comment-");
var ptlink = ctlink.split("#");
ptlink = ptlink[0];
var txtlink = ptlink.split("/");
txtlink = txtlink[5];
txtlink = txtlink.split(".html");
txtlink = txtlink[0];
var pttitle = txtlink.replace(/-/g," ");
pttitle = pttitle.link(ptlink);
if ("content" in entry) {
var comment = entry.content.$t;}
else
if ("summary" in entry) {
var comment = entry.summary.$t;}
else var comment = "";
var re = /<\S[^>]*>/g;
comment = comment.replace(re, "");
document.write('<li>');
document.write('<a href="' + ctlink + '">' + entry.author[0].name.$t + '</a>');
document.write(' on ' + pttitle);
document.write('<br/>');
if (comment.length < 100) {
document.write(comment);
}
else
{
comment = comment.substring(0, 100);
var quoteEnd = comment.lastIndexOf(" ");
comment = comment.substring(0, quoteEnd);
document.write(comment + '...<a href="' + ctlink + '">(more)</a>');
}
}
document.write('</li>');
document.write('<div style="font-size:75&percnt;;text-align:center"><a href="http://blogs-tricks.blogspot.com/2009/11/how-to-make-recent-comment-blogger.html">Get this Widget</a></div>');
}
</script>
<script src="http://Yourblogname.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments">
</script></ul>
<noscript>You need to enable JavaScript to read this.</noscript>



2. Save And Done


Change URL http://YourBlogname.blogspot.com with your blog URL

Read more ...

How to Make Recent Post at Blogger

1. Layout > add a Gadgets > Feed





2. Copy your feed address here



ex: http://YourBlogName.blogspot.com/feeds/posts/default

3. In the Title Column Change with "Recent Post"


4. Save.




Read more ...

How To Make Hidden Guest book (blogger)

What Is Hidden Guest Book?

e.g

Click Here , see at the right side in there.

Step:

1. Login to your blogger , From dashboard, go to Layout >>
Page Elements >> Click Add Page Elements,>>Add HTML/SCRIPT.

2.
Download code in below and paste in the HTML/SCRIPT box.

Download Script

3. Save your widget,and try viewing your blogs.
Read more ...

Tutorial How to Add Digg Button(Blogger)


Digg.com is the one website can driver free traffic to your site.Digg also have some tools, and it a very useful tools,call Digg Button.As you see in my right top of each post.Digg allow your readers to digg your story from your blog finally they'll submit the stories to Digg.


I’ll show you how to put Digg button on the right or left of the top for each post (For blog that do the Automatic Thumbnail and Read More Function).

Follow Step In Below :

1. Login To Blogger >> Go To Layout >> Edit HTML

2. Back up your existing Template before making any changes!

3. Tick The "Expand Widget Templates" box

4. Find This Code(CTRL + F ) <data:post.body/>

5. Copy The Code In Below


<div style="float:left;"><script type="text/javascript">

digg_url = 'YOUBLOG';
</script>
<script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script>


Change (YOUBLOG) With You Blog URL e.g ( http://blogs-tricks.blogspot.com)


6. Paste the code(in above) before <data:post.body/>

e.g :

<div style="float:left;"><script type="text/javascript">
digg_url = 'YOUBLOG';
</script>
<script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script>
<data:post.body/>

7. Save Your Template.

Tips:
If you want to change it to the left, change this <div style='float:right;'> to <div style='float:left;'>


If your blog doesn't use Automatic Thumbnail and Read More Function you have to find this code <div class='post-header-line-1'/>.Put the code below above the <div class='post-header-line-1'/>;

e.g :

<div style="float:left;"><script type="text/javascript">
digg_url = 'YOURBLOG';
</script>
<script src="http://digg.com/tools/diggthis.js" type="text/javascript">

</script><div class='post-header-line-1'/>
Read more ...

How To Make Automatic Thumbnail and Read More Function (Blogger)

Before You Start,Check Another Tutorial How To Make Read More(How To Make (Read More)Function).


Follow steps as below:

1. Login Blogger>>Go To Layout >> click Edit HTML

2. Tick on "Expand Widget Templates"

3. Find this code

<data:post.body/>

4. Replace with this code below


<script type='text/javascript'>
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script src='http://kfile.110mb.com/summary-post.js' type='text/javascript'/>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'>Read more</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

5. Save it and check your blog.
Read more ...

Make A Welcome Alert (Blogger)


Want Make Welcome Alert Like This?

Step:

1. Login To Your blogger > Layouts > Edit HTML
2. Find The <head> Tag, And Add The Below Script Just Below The <head> Tag.

<script language='JavaScript'>alert(&quot;Your Message Here&quot;);</script>

You Can Change Text 'Your Message Here' With Anything Text You Want.

3. Now Save Template,View Blog And Your Can See Welcome Alert In Your Blog.



Read more ...

Hide Navbar In Blogger (Navigation Bar)

I think the Navbar (Navigation Bar) in blogger is important right?But many blogger want to hide this navbar. Why? Because it will make their blog layout look better without a navigation bar above it, like me ;p .. If you want to hide you navigation bar,follow the step in below:

1. Login To Your Blogger >> Layouts >> Edit HTML

2.
Copy the code in below and paste in to <head> tags

#navbar-iframe {
display: none !important;
}

3. Example: put like this

-----------------------------------------------
Blogger Template Style
Name: Template
Designer: eJoeee
URL: http://blogs-tricks.blogspot.com
Date: August 2009
----------------------------------------------- */


#navbar-iframe {

display: none !important;
}


/* Variable definitions
====================


4. Save You Template And Try View Your Blog. Your Navbar should be dissapear.. :D
Read more ...

Change The Address bar Icon (Favicon)

If you make blog in blogger your default icon address bar will be like mine,but you can change the icon (favicon) with your own picture.It's very simple and easy to do that. 1st your need prepare an image with low dimension, it's about 22x22 pixel to 32x32 pixel,formatted as gif, jpg, bmp, ico, png. Store you icon image to web hosting, Exp Image Hosting : Photobucket

Step:

1. Login to blogger >Layouts >Edit HTML

2. Put the code below into your <head> tag or before code <head> .


<link href='YOU-IMAGE-URL' rel='SHORTCUT ICON'/>

3. Put you own image url in YOU-IMAGE-URL
4. Save you template.


Read more ...

Tutorial How To Make Read More




This function is called Post Summary. It only work in new blogger template (beta) and does not work at classic template.

Follow The Steps Below :

Step #1 :

1. Login to you blogger account.
2. In the dashboard click layouts.
3. Then click edit HTML Tab.
4. Save you template 1st (Very important) by clicking download full template.
5. Mark the Expand Widget Templates box.
6. Go to you template and find this code: <p><data:post.body/></p>
7. Delete the code in above and change with this code in below:


<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/>
<a expr:href='data:post.url'><strong>Read more...</strong></a></p>
</b:if>

8. Save you template.

Step #2 :

1. Click Setting tab.
2. Then click the formatting tab.
3. Go to lower side. Find the Post Template.

Paste This Code into You Post Template:


<span class="fullpost">

</span>


Click save and you done.

How to post your article :

When you post the article,choose Edit HTML beside Compose.

Example Posting:

dsfasdfk dsf asdfeoiroi sdjhksdjjf asdnmasdnf dsfasdfk dsf asdfeoiroi sdjhksdjjf asdnmasdnf dsfasdfk dsf asdfeoiroi sdjhksdjjf asdnmasdnf dsfasdfk dsf asdfeoiroi sdjhksdjjf asdnmasdnf asdeirfk nm we fewa sdf sdasd dwefregf knkvnksdf dfre trtgfvd wdfertgc fewwdcx <span class="fullpost"> (this will show in front of your blog)

dsfasdfk dsf asdfeoiroi sdjhksdjjf asdnmasdnf asdeirfk nm we fewa sdf sdasd dwefregf knkvnksdf dfre trtgfvd wdfertgc sdfeoiroi sdjhksdjjf asdnmasdnf asdeirfk nm we fewa sdf sdasd dwefregf knkvnksdf dfre trc </span> (this will show if visitor click read more)



At front page of your blog, will show just like this :

dsfasdfk dsf asdfeoiroi sdjhksdjjf asdnmasdnf dsfasdfk dsf asdfeoiroi sdjhksdjjf asdnmasdnf dsfasdfk dsf asdfeoiroi sdjhksdjjf asdnmasdnf dsfasdfk dsf asdfeoiroi sdjhksdjjf asdnmasdnf asdeirfk nm we fewa sdf sdasd dwefregf knkvnksdf dfre trtgfvd wdfertgc fewwdcx.Read More...




Top Blogs

Read more ...

How To Make Related Post




Today Tutorial Blog and Blogger Hack. We all know that making visitor comfortable in our blog is the priority. They will feel like a someone special if we serve the best for them. For example if they want to find your old article that related to they want, your blog will give it an easily link to them. So it call related post widget. All you have to do is give them related post and they satisfied with your blog service.

Now our blogger hack today is making a related post below your post, so we will make it simple:

Step

  1. Go to Layout >Edit HTML in your Blogger Dashboard.
  2. Back up your existing Template before making any changes!
  3. Make sure to check the "Expand Widget Templates" box.
  4. Search for </head> the tag.
  5. Add the following code just before the </head> tag.

Download Code Here

6. Now search for <p><data:post.body/></p>. In some of the templates this code may look like this <div class='post-body> or <p><data:post.body/></p>

7. Add the following code just below the code you just searched for.


Download Code Here

8. Now Save your Template and you're done!

If you want to change the word “ Related Post by categories” by yourself just find this word on the code.






Top Blogs

Read more ...

Disable Right Click In Blogs

Dont like you blog copy by other people?Using this script u can protect u copyright in blogs.

Photobucket

1st,
Login 2 You Blog and go to Dashboard>>Layout>>Page Element>>Add Gadget>>HTML\JAVASCRIPT:

Copy Script in below and paste into HTML\JAVASCRIPT

<script language="JavaScript">
<!--
//Disable right mouse click Script
//By Maximus (maximus@nsimail.com) w/ mods by DynamicDrive
//For full source code, visit http://www.dynamicdrive.com
var message="Sorry No Right Click!!";

///////////////////////////////////
function clickIE4(){
if (event.button==2){
alert(message);
return false;
}
}
function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){ alert(message); return false;
}
}
}
if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}
document.oncontextmenu=new Function("alert(message);return false")
// -->
</script>

And Save Your Template.





Top Blogs

Read more ...

How to show 10 posts instead of 5 posts in blogger

One of the most popular and useful blogger hack or blogger widget is Recent Posts. This blogger hack lets you display recent posts of your blog. Maximum number of bloggers use blogger feed for this purpose. But, this method one limitation, i.e. only 5 most recent posts can be displayed.

How to show 10 recent posts :


Go to layouts>>page elements >> Add Gadget >> HTML\JAVASCRIPT

Copy code in below and paste to HTML\JAVASCRIPT Gadget

Here is the code:


<script>
function rp(json) {
document.write('<ul>');

for (var i = 0; i < numposts; i++) {
document.write('<li>');
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;

if (i == json.feed.entry.length) break;

for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}

posttitle = posttitle.link(posturl);
var readmorelink = "(more)";
readmorelink = readmorelink.link(posturl);
var postdate = entry.published.$t;
var cdyear = postdate.substring(0,4);
var cdmonth = postdate.substring(5,7);
var cdday = postdate.substring(8,10);
var monthnames = new Array();
monthnames[1] = "Jan";
monthnames[2] = "Feb";
monthnames[3] = "Mar";
monthnames[4] = "Apr";
monthnames[5] = "May";
monthnames[6] = "Jun";
monthnames[7] = "Jul";
monthnames[8] = "Aug";
monthnames[9] = "Sep";
monthnames[10] = "Oct";
monthnames[11] = "Nov";
monthnames[12] = "Dec";

if ("content" in entry) {
var postcontent = entry.content.$t;
} else if ("summary" in entry) {
var postcontent = entry.summary.$t;
} else
var postcontent = "";
var re = /<\S[^>]*>/g;
postcontent = postcontent.replace(re, "");
document.write(posttitle);

if (showpostdate == true) document.write(' - ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdday);

if (showpostsummary == true) {
if (postcontent.length < numchars) {
document.write(postcontent);
} else {
postcontent = postcontent.substring(0, numchars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0,quoteEnd);
document.write(postcontent + '...' + readmorelink);
}
}
document.write('</li>');
}
document.write('</ul>');

}
</script>

<script>
var numposts = 10;
var showpostdate = false;
var showpostsummary = false;
var numchars = 100;
</script>

<script src="http://YOURBLOG.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp"></script>

<div class="clear"></div><p style="text-align:right;"><a href="http://feeds.feedburner.com/~r/wolverinehacks/~3/423845145/how-to-show-10-posts-instead-of-5-posts.html" title="Grab this wiget">Grab this Widget</a></p>

You can make the recent post display more than 10 by change
var numposts = 10; change no. 10 whatever no. you want..

Credits (http://www.niteshkothari.com)




Top Blogs

Read more ...