Tuesday, January 3, 2012


Trim Blogger popular post snippets right

I have done some "tweaks" for the popular posts gadget, and here's another cosmetic one. The gadget cuts the post snippet at a fixed character index, so it can cut words in half, which is quite stupid. It would be much better to cut the post text at a word break. This little hack I made does that, using jQuery.

Sometimes little things matter. :)

You can install this hack by adding an extra HTML/Javascript gadget in your sidebar, or paste the code to an existing gadget (the gadget must be after the popular posts gadget!). Or you can put this code in your template html, just before </body>. If you have my Shuffle or Shuffle and limit hack for popular posts installed, put this code in the same place, after that hack's code.

Data provided by - Download Raw

You must have jQuery loaded in your page for the script to work. Script, installed also on this blog, won't cut the text smaller than 42 chars. Hope you like it.

Tip: By modifying the jQuery path '.popular-posts ul li .item-snippet' you can apply the same technique to other text-ill-cutting gadgets, too.
[Hide comments] - [Show comments]
Click on a single comment to hide/show its text


Matt Morales said... [reply]

thanks. but how to set the snippet length?

MS-potilas said... [reply]

@Matt Morales
Hi, you can only (easily) make the snippet shorter than default, which is about 150 chars.

For example, in the hack's code change:

var txt=$(this).text();


var txt=$(this).text().substr(0,80); limit the snippet to max 80 chars (cut at the last space before 81 characters).

Seth Mason said... [reply]


Sorry for the newbie question, but how do I load jQuery?

MS-potilas said... [reply]

@Seth Mason Hi,

edit template, find </head> and put for example this line somewhere before the </head> line:

<script src='' type='text/javascript'></script>

I was a bit lazy writing this article and omitting that bit of info :)

Seth Mason said... [reply]

@MS-potilas Got it. Also read you can load jQuery directly from Google by using this: <script src='"></script> Supposedly faster. What do you think about loading it this way?

MS-potilas said... [reply]

@Seth Mason That works also. I'm not familiar with the different versions of jQuery, loading speed, etc., should study those some day... said... [reply]

Can you make the snippet longer? @MS-potilas

MS-potilas said... [reply] Unfortunately no. The template gives us only the certain length, and we can easily only cut it using javascript.

Kang Ismet said... [reply]

Nice share...
How to reduce or enlarge a thumbnail size?

MS-potilas said... [reply]

@Kang Ismet
Hi, I wrote an article about that, see Resize Blogger popular post thumbnails. Thanks for the idea. :)

pcgametv said... [reply]

I have just added the extra HTML/Javascript in my sidebar but now, when i try to like some post on facebook, the text from the snippet just come like the code ... the code itself apears. And no text from snippet. PLease help me.

MS-potilas said... [reply]

Hi, you should use HTML/Javascript gadget, not text gadget. Or you can install the code in the template, before </body> if the gadget does not work for some reason.

Admin said... [reply]
This comment has been removed by the author.
agus said... [reply]

I would like to change the ... to an arrow or some kind of unicode. Is that possible?
Thank you so much.

MS-potilas said... [reply]

Hi, yes it is possible. Locate '...' from the source, and replace the contents inside ' and ' with whatever you want. Unicode arrow for example: change '...' to '\u21e8'.

Suryakant sao said... [reply]


Thanks brother It works great with blog posts also really it helped me a lot

laetitia sanchez said... [reply]

bonne année, et merci pour cette astuce !

Post a Comment

Related Posts Plugin for WordPress, Blogger...
See the hack
for this dynamic
views icon: