Pages

▼

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 Pastebin.com - 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.
   Posted at

19 comments:

  1. Matt MoralesJanuary 31, 2012 at 3:29 PM

    thanks. but how to set the snippet length?

    ReplyDelete
  2. MS-potilasJanuary 31, 2012 at 7:15 PM

    @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();

    to:

    var txt=$(this).text().substr(0,80);

    ...to limit the snippet to max 80 chars (cut at the last space before 81 characters).

    ReplyDelete
  3. Seth MasonApril 25, 2012 at 8:33 AM

    MS-potilas,

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

    ReplyDelete
  4. MS-potilasApril 25, 2012 at 10:15 AM

    @Seth Mason Hi,

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

    <script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'></script>

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

    ReplyDelete
  5. Seth MasonApril 25, 2012 at 8:25 PM

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

    ReplyDelete
  6. MS-potilasApril 26, 2012 at 7:32 AM

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

    ReplyDelete
  7. Tim SlatterJune 21, 2012 at 9:54 PM

    Can you make the snippet longer? @MS-potilas

    ReplyDelete
  8. MS-potilasJune 22, 2012 at 8:43 AM

    @timslatter.com Unfortunately no. The template gives us only the certain length, and we can easily only cut it using javascript.

    ReplyDelete
  9. Kang IsmetJuly 7, 2012 at 4:19 AM

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

    ReplyDelete
  10. MS-potilasJuly 7, 2012 at 1:10 PM

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

    ReplyDelete
  11. pcgametvJanuary 4, 2013 at 2:47 PM

    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.

    ReplyDelete
  12. MS-potilasJanuary 4, 2013 at 5:58 PM

    @pcgametv
    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.

    ReplyDelete
  13. AdminJune 15, 2013 at 7:51 PM

    This comment has been removed by the author.

    ReplyDelete
  14. agusOctober 8, 2013 at 8:02 PM

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

    ReplyDelete
  15. MS-potilasOctober 9, 2013 at 10:42 PM

    @agus
    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'.

    ReplyDelete
  16. UnknownJanuary 23, 2014 at 9:32 PM

    @MS-potilas

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

    ReplyDelete
  17. UnknownJanuary 1, 2018 at 10:16 PM

    coucou
    bonne année, et merci pour cette astuce !

    ReplyDelete
  18. Financing / Credit / Loan We offer financial loans and investment loans for all individuals who have special business needs. For more information contact us at via email: bullsindia187@gmail.com FromJuly 19, 2022 at 8:54 AM

    we are offering loans at the 2% interest rate. Our loan is safe and secure, for more information and applications, please contact us via email: bullsindia187@gmail.com or whats-app: +918130061433, Our services include the following: * Truck loans *

    ReplyDelete
  19. Financing / Credit / Loan We offer financial loans and investment loans for all individuals who have special business needs. For more information contact us at via email: bullsindia187@gmail.com FromJuly 19, 2022 at 8:55 AM

    DO YOU NEED A FINANCIAL HELP? ARE YOU IN ANY FINANCIAL CRISIS OR DO YOU NEED FUNDS TO START UP YOUR OWN BUSINESS? DO YOU NEED FUNDS TO SETTLE YOUR DEBT OR PAY OFF YOUR BILLS OR START A GOOD BUSINESS? DO YOU HAVE A LOW CREDIT SCORE AND YOU ARE FINDING IT HARD TO OBTAIN CAPITAL SERVICES FROM LOCAL BANKS AND OTHER FINANCIAL INSTITUTES? HERE IS YOUR CHANCE TO OBTAIN FINANCIAL SERVICES FROM OUR COMPANY. WE OFFER THE FOLLOWING FINANCE TO INDIVIDUALS- *COMMERCIAL FINANCE
    *PERSONAL FINANCE
    *BUSINESS FINANCE
    *CONSTRUCTION FINANCE
    *BUSINESS FINANCE AND MANY MORE:
    FOR MORE DETAILS.CONTACT ME VIA.
    Contact Our Customer Care:
    EMAIL: :bullsindia187@gmail.com
    (CALL/WHATS APP) :+918130061433
    Our services... Guaranteed 100%

    ReplyDelete

Smileys :) ;) :P :D :( and ;( are converted to graphical emoticons in the blog.