Blogger Hacks Archives - Page 2 of 6

Tag: Blogger Hacks

Automatic Read More Hack with fixed pages

After a long time the most awaited Blogger feature called static pages or stand alone pages has been launched in drafts . But it has some issues with automatic expandable summaries read more trick for blogspot. With this new code you can minimize your blogger posts so that only some of your description and image appears on the homepage and the rest of all is shown when you visit that post or static page.
you might have familiar with earlier read more hack.

Just Follow this simple steps :

First log in to your blogger account.
Then click on Design Link.
Then Click on Edit HTML.
Check Expand widget content.
Then Search for below code :
</head>

Add the below code before </head> :

<script type='text/javascript'>var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 430;
summary_img = 300;
img_thumb_height = 130;
img_thumb_width = 160;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTagundefinedstrx,chop){
ifundefinedstrx.indexOfundefined"<")!=-1)
{
var s = strx.splitundefined"<");
forundefinedvar i=0;i<s.length;i++){
ifundefineds[i].indexOfundefined">")!=-1){
s[i] = s[i].substringundefineds[i].indexOfundefined">")+1,s[i].length);
}
}
strx = s.joinundefined"");
}
chop = undefinedchop < strx.length-1) ? chop : strx.length-2;
whileundefinedstrx.charAtundefinedchop-1)!=' ' && strx.indexOfundefined' ',chop)!=-1) chop++;
strx = strx.substringundefined0,chop-1);
return strx+'...';
}
function createSummaryAndThumbundefinedpID){
var div = document.getElementByIdundefinedpID);
var imgtag = "";
var img = div.getElementsByTagNameundefined"img");
var summ = summary_noimg;
ifundefinedimg.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTagundefineddiv.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Then Find this <data:post.body/>

Then Replace <data:post.body/> with the below code :

<b:if cond='data:blog.pageType == &quot;static_page&quot;'><b:else/> <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'>createSummaryAndThumbundefined&quot;summary<data:post.id/>&quot;);
</script> <span class='rmlink' style='float:right;padding-top:10px;'><a expr:href='data:post.url'><img src='http://i37.tinypic.com/351icqx.jpg'/></a></span>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if><b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

Then Click on Preview if no error occurs then just click on save.

Customization :

Now let us see how to customize the code to suit your style :

summary_noimg = 500 ;

This code will decide how much characters must be shown in the post if that post doesn’t contain any images. I have selected 500 characters.. you can customize it to suit ur template.

summary_img = 400 ;

If the post contains image , then this code will decide how many characters must be shown in that post. Change the number of characters to be shown to suit your template.

img_thumb_height = 130;

This tag decides the height of the thumbnail to be shown in the post. Vary the number 130 to suit your template.

img_thumb_width = 281 ;

This tag decides the width of the Thumbnail image to be shown

Changing Read More Image :

1. Find this :

http://i37.tinypic.com/351icqx.jpg

2. Change it to your desired image you want.

Having Text Instead Image :
1. Find this :

<img src=’http://i37.tinypic.com/351icqx.jpg’/>

2. And Replace it with the desired text you want to use.

How to add Attribution widget in blogger

In my previous post I told all of you that their is a new blogger widget name Attribution. As this new widget has come of our visitor named Khaled . wanted to put this widget on his blog. so he contacted through comment.If you also want anything you can do it. So now lets come to the point of to add this widget . Adding this widget is too simple .

Just Follow this simple steps :

Log in to your blogger account.
Click on the Design link.
Click on Edit HTML.
Then go to your sidebar or footer were you want to add this widget.
Their add the below code before </b:section>
<b:widget id=’Attribution1′ locked=’false’ title=” type=’Attribution’/>
Then preview it and if its ok then save it.
Then you are done.

Note if the above code doesnt work then try with below code :

<b:widget id=’Attribution1′ locked=’false’ title=” type=’Attribution’>
<b:includable id=’main’>
<div class=’widget-content’ style=’text-align: center;’>
<b:if cond=’data:attribution != ""’>
<data:attribution/>
</b:if>
</div>

<b:include name=’quickedit’/>
</b:includable>
</b:widget>
</b:section>

If you like this post then please share it with your friends and help us to grow and don’t forget to subscribe us.

Attribution : New Blogger Widget

As Now a days blogger is upgrading with all new stuffs . for the bloggers who use blogger. always while using blogger many people want their site to look professional . So they don’t put the word “by powered by blogger” because blogger is simple and some people feels ashamed while using because of it cheapness and Simple stuff. Like not have much powerful control like wordpress platform. So to get rid of all this problems and to increase bloggers rating or to bring it more in-front blogger made a new widget which is not yet launched officially . Its Name is “Attribution” the widget puts an simple text of powered by Blogger . This Widget can also be used to write our copy rights or disclaimer without going in the Edit HTML page.

Screen shots :

1. The Main Preview (The Preview of the widget appeared in the template):

2. Page Layout (widget appeared in Page Layout) :

3. Widget Page (The page when we click on the Edit Link of the Widget) :

How I found this widget ?
It was just a little coincident that we met each other. I was converting a new blogger template to share with all of you. After creating the blog i went to page layout and then pick template section. after picking an Minima template. I returned back to page layout page and then i found it their.

Dont Worry friends the template which i m converting is completed and i will share it with you tomorrow

Random Post Widget for Blogger

Although “Related Posts Widget” is important for all types of blogs, but in blogs where almost all the posts are similar (like blogs with articles on recipes, money-making, computer tricks or automobiles etc.), visitors usually do not mind reading some quite-unrelated posts too. So along with Related Posts widget, a “Random Posts widget” on your blog will help you to increase the number of page impressions.

Adding a Random posts widget is very easy…

Click Below button to Add the Random post Widget :

Customization :

Go to your blogger dashboard.
Then Click on the Edit Link of Random post widget.
Now Find this numofpost=6
Then Change the number from 6 to the desired number of posts you want to show.
Then Click on save button and you are done
Enjoy Random post widget.

Friends if you like it then please share it and bookmark using social networking help best2know.info to grow.

Facebook Like or Recommend Button For Blogger

Facebook has come up with a new set of Social plugins which enable you to provide engaging social experiences to your users with just a line of HTML. The Facebook Like Button is One of them. You can see a demo of the like button on this page. The Facebook like button will allow your readers to quickly share your posts with their Facebook Friends. You can also get to know how many people liked your Blog Post .
Follow this Steps :
1. Login to your Blogger Account and go to Layout > Edit HTML and click on the check box which says “Expand Widget Templates”

2. Look for <data:post.body/> and immediately after that place the following code.

<!– Facebook Like button by Best2know–>
<b:if cond=’data:blog.pageType == "item"’>
<iframe allowTransparency=’true’ expr:src=’"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=standard&show_faces=false&width=100&action=like&font=arial&colorscheme=light"’ frameborder=’0′ scrolling=’no’ style=’border:none; overflow:hidden; width:450px; height:40px;’/>
</b:if>

This code will show the Like Button on Post pages only. If you want to display it everywhere, then remove the two lines of code in red.
3. Save the template and you should see the Like Button Below each of your posts.

Optional Customisations

a) Now try changing action=like to action=recommend in the code and you will see something like .
b) Try changing colorscheme=light to colorscheme=dark or colorscheme=evil
c) You can change the font by editing the font=arial parameter. You can change it to any of

font=lucida+grande
font=segoe+ui
font=tahoma
font=trebuchet+ms
font=verdana

If you liked this post, then consider “Like” ing it :)

Adsense Revenue Sharing widget for blogger

You would be knowing for sure as now all the big bloggers with many writers use adsense revenue sharing hack for blogs.What actually it is about?.As many still would be not knowing about it,Like suppose i own a blog and run it.Now there are also,3 more authors to my blog who also write for my blog.Now the blog is owned by me but it have 4 authors including me who are very active on my blog to post and i have been using adsense adds at the beginning and end of the post to make some money out of it.

Now problem comes here,as how to distribute or share the revenue with other authors of my blog to give there share,as it becomes difficult to check how much the authors post is contributing to revenue of blog.So the thing only can be done is to show the adds of the that author google adsense account on posts done by him/her.As this will give him the exact revenue he deserves for doing that post.

I hope now you would be clear what i was talking about.Now this hack is very simple in wordpress blogs as plugin is available for it.Now i would like to tell you how make this work in bloggers.If you really have many authors to your blog-you can really use this hack to attract more authors and give them the reason to work hard for posting on your blog,which would give them the real revenue they deserve for that post.

As the best part is,if the author had previous posts on your blog,the adds will appear on that posts too automatically.Now how to implement it in blogger.

1. Login to Blogger dashboard
2. Navigate to Layout >> Edit HTML and Expand Widget templates
3. Search for the following code inside your template

<data:post.body/>

4. Insert the following piece of code just above or below the red code you find.As adding above will show adds at beginning of post and below will result in at end of post.Or add at top and bottom both,to show at both places.

<b:if cond=’data:blog.pageType == “item”‘>
<b:if cond=’data:post.author == “admin“‘>
Insert Ad Code for admin here undefinedfirst author)
</b:if>
<b:if cond=’data:post.author == “riteshsanap“‘>
Insert Ad Code for anshul here undefinedsecond author)
</b:if>
<b:if cond=’data:post.author == “rapidrounds“‘>
Insert Ad Code for sunil here undefinedthird author)
</b:if>
</b:if>

5. Replace the author name and ad code with the actual ones.As names are in bold and replace whole line ‘Insert Ad Code for admin here (first author)’ with the add codes of that author.

Its not necessary to use only adsense codes there.The author can have any banner add also like of his affiliate program he wants.Its upon the author with what add he wants to display.

Like above i have made 3 authors- admin,riteshsanap and rapidrounds.You can make any number you like,just keep on adding codes as i have done.Just change them with the name of yours,you are using in blogger as display name i.e post author name.Remember all the author names should be different.

6. Save the changes you have made.
7. You are done.
8.Verify that correct ads are shown by viewing HTML source code of the web pages when visiting posts created by various authors or bloggers.

I hope it will be very helpful for some bloggers who have many authors to there blog and even give you now opportunity to invite other authors to your blog.

Enjoy This Hack !!

TipTip Jquery – Change Default Hyperlink’s Title Style

Long time not posting… Now I’ll share how to integrate TipTip Jquery plugin to your blog. This plugin will change the default title attribute style become interest one. Don’t worry, this plugin is containing no images, it’s all using CSS, so it will load lightly. But, this plugin will not work in IE that we know doesn’t support CSS3.

Well, I don’t have any words again, so let’s go to the steps

Javascript

To use the plugins from Jquery, we must add the library script from jquery. Find </head> and paste the script below above </head>.

<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js’ type=’text/javascript’/>

If you have already add this code, you no longer need to add this code again.

After that, add the script below. This script is the core of TipTip Jquery.

<script src=’http://mbahrizh.googlecode.com/files/jquery.tipTip.js’ type=’text/javascript’/>

Also add this script. This script to call the TipTip Jquery.

<script type=”text/javascript”>
$(function(){
$(“.tooltip”).tipTip();
});
</script>

CSS

This plugin use bundled CSS file, so copy code below before </head>.

<link rel=”stylesheet” href=”http://mbahrizh.googlecode.com/files/tipTip.css” />

HTML

To activate TipTip, you must add class and title attribute to your tag, such as a, div, p, input, etc.
Example below use a tag

<a href=’YOUR-LINK-HERE’ class=’tooltip’ title=’THIS IS THE TITLE COLUMN OR YOU CAN ADD DESCRIPTION’ >This is a link</a>

If you hover at that link, the container which contain the title attribute will show interestly with some CSS styles.

Some Options

You can add following options to customize it as you wish. Example below is added maxwidth and edgeoffset option.

$(function(){
$(“.tooltip”).tipTip({maxWidth: “auto”, edgeOffset: 10});
});

Some other options:

activation: string (“hover” by default) – jQuery method TipTip is activated with. Can be set to: “hover”, “focus” or “click”.
keepAlive: true or false (false by default) – When set to true the TipTip will only fadeout when you hover over the actual TipTip and then hover off of it.
maxWidth: string (“200px” by default) – CSS max-width property for the TipTip element. This is a string so you can apply a percentage rule or ‘auto’.
edgeOffset: number (3 by default) – Distances the TipTip popup from the element with TipTip applied to it by the number of pixels specified.
defaultPosition: string (“bottom” by default) – Default orientation TipTip should show up as. You can set it to: “top”, “bottom”, “left” or “right”
delay: number (400 by default) – Number of milliseconds to delay before showing the TipTip popup after you mouseover an element with TipTip applied to it.

Thats all. See you!!!

Note : If you want completely CSS based tooltip you can click here.