By default Blogger shows links to Newer Post, Home, and Older Post at the bottom of a post. There are hacks that add post titles to those links, couple by me, too, here's the latest: Add Post titles to Older and Newer Post links – reloaded. In one comment I was asked if it would be possible to display also thumbnail and post summary. It is.
I have installed this hack in my MS-potilas blog, which is in Finnish (you'll see the idea without understanding the language):
Installing the hack
You need to edit your blog's template. I use jQuery in this hack, so you need jQuery. If you already have it loaded, you can leave the first line out of the hack.
Open blog's template, and put this code before </head>:
If you have any previous hack for Newer/Older post links, remove it. Save the template and test.
Configuration
You can configure the following javascript variables:
maxSummaryLength - how many characters can summary text be
olderLink - contains the template for older link
newerLink - template for newer link
defaultOlderImage - if older post has no thumbnail, use this image instead
defaultNewerImage - if newer post has no thumbnail, use this image instead
In olderLink and newerLink templates you can use html and fields [title], [date], [datetime], [img], [thumburl], and [summary]. You can also edit the CSS to make everything look different. Hope you like this hack!
Showing posts with label hack. Show all posts
Showing posts with label hack. Show all posts
Wednesday, November 27, 2013
Monday, September 9, 2013
41
Hiding posts from Blogpost home page
I started doing this hack after I got a question if it is possible to hide blog posts from home page or not. And it is, with quite easy template modifications.
You must have a list of urls to the articles you want to hide from home page. Use the "blogspot.com" domain in the urls, not the local ones (like "blogspot.fi" in Finland).
I will hide one post, url is http://yabtb.blogspot.com/2013/09/test-post-hidden-from-home-page.html
Go to design, Template, Edit HTML. Select Jump to widget, "Blog1". Search for line:
Replace that line with either this code:
or this code:
First code hides articles from the home page (yourblog.blogspot.com) and the older posts' pages, when you click "Older posts" on the home page. This is probably the option you want.
Second code hides articles just from the home page (yourblog.blogspot.com).
If you have three articles you want to hide, make three lines starting with <b:if cond='data:post.url == " (lines 5-6 in the code snippets). Edit your urls carefully to the lines.
Save template. Test.
Hack is installed on this blog, and it is hiding this post http://yabtb.blogspot.com/2013/09/test-post-hidden-from-home-page.html from the home page of this blog.
If you have articles published on same date and you wish to hide one of them, you should install my Show date on all Blogger posts within same date, or edit the date of the article to be hidden.
You must have a list of urls to the articles you want to hide from home page. Use the "blogspot.com" domain in the urls, not the local ones (like "blogspot.fi" in Finland).
I will hide one post, url is http://yabtb.blogspot.com/2013/09/test-post-hidden-from-home-page.html
Go to design, Template, Edit HTML. Select Jump to widget, "Blog1". Search for line:
<div class="date-outer">
Replace that line with either this code:
<div class="date-outer"
<b:if cond='data:blog.pageType == "index"'>
<b:if cond='data:blog.searchQuery == ""'>
<b:if cond='data:blog.searchLabel == ""'>
<b:if cond='data:post.url == "http://yabtb.blogspot.com/2013/09/test-post-hidden-from-home-page.html"'> style='display:none;'</b:if>
<b:if cond='data:post.url == "ANOTHER ARTICLE URL"'> style='display:none;'</b:if>
</b:if>
</b:if>
</b:if>
>
or this code:
<div class="date-outer"
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:post.url == "http://yabtb.blogspot.com/2013/09/test-post-hidden-from-home-page.html"'> style='display:none;'</b:if>
<b:if cond='data:post.url == "ANOTHER ARTICLE URL"'> style='display:none;'</b:if>
</b:if>
>
First code hides articles from the home page (yourblog.blogspot.com) and the older posts' pages, when you click "Older posts" on the home page. This is probably the option you want.
Second code hides articles just from the home page (yourblog.blogspot.com).
If you have three articles you want to hide, make three lines starting with <b:if cond='data:post.url == " (lines 5-6 in the code snippets). Edit your urls carefully to the lines.
Save template. Test.
Hack is installed on this blog, and it is hiding this post http://yabtb.blogspot.com/2013/09/test-post-hidden-from-home-page.html from the home page of this blog.
If you have articles published on same date and you wish to hide one of them, you should install my Show date on all Blogger posts within same date, or edit the date of the article to be hidden.
Monday, May 6, 2013
2
Small update (visual improvement) for my tabbed gadgets
I made my gadget tabifying widget back in 2011. Today I saw another implementation, and it had nice fade in effect. I remembered that I had used also jQuery in the tabifying widget, and that jQuery has nice functions for fading. So I decided to try and tweak it a little. The result can be seen on this blog: click on the tabs on right sidebar (for example, About me, Followers, Subscribe to) and notice the smooth transition. :)
(This won't work with nested tabs, but I don't recommend using them in the first place, because nested tabs can be confusing to user.)
If you have my tabbed gadgets hack installed, you can make the same changes. It is quite easy:
1. Open the tabifying gadget for editing. Make a backup of the working script before making changes.
2. Find line (near line 105):
4. Then find this block of code (near line 111):
If you want, you can adjust the fade in time, now 300 (milliseconds), I think 200 to 600 milliseconds is good range. Hope you like it! :)
(This won't work with nested tabs, but I don't recommend using them in the first place, because nested tabs can be confusing to user.)
If you have my tabbed gadgets hack installed, you can make the same changes. It is quite easy:
1. Open the tabifying gadget for editing. Make a backup of the working script before making changes.
2. Find line (near line 105):
for(var i = 0; i<tabnav0_tabids.length; i++) {
3. after that add this line:
if(tabnav0_tabids[i] == nimi) continue;If you have multiple tab sets, and you have tabnav1_tabids instead of tabnav0_tabids, use tabnav1_tabids in the added line, etc.
4. Then find this block of code (near line 111):
toshow = document.getElementById(tabnav3_id).style.display;
document.getElementById(nimi).style.display=toshow;
if(tabsIDs[nimi])
document.getElementById(tabsIDs[nimi]).style.display = toshow;
5. Replace that block of code with this:
$("#"+nimi).fadeIn(300);
if(tabsIDs[nimi])
$("#"+tabsIDs[nimi]).fadeIn(300);
6. Save the gadget.If you want, you can adjust the fade in time, now 300 (milliseconds), I think 200 to 600 milliseconds is good range. Hope you like it! :)
Saturday, July 7, 2012
33
Resize Blogger popular post thumbnails
I got a question in a comment how to change the thumbnail size in Blogger popular post gadget, in my Trim Blogger popular post snippets right article. Here's how to do it, hack is similar to my previous popular post hacks.
You must have jQuery loaded in your page for the script to work. Check your template, and if it does not have jQuery, insert this before </head:>
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's html, just before </body>. If you have my other popular post hacks, like shuffle, shuffle and limit or Trim Blogger popular post snippets right, you can put this code in the same place, after those hack's code.
In the script there is the variable var newSize = 100; which defines the new size for thumbnails. You can set the new size smaller or bigger than the default size, which is 72.
You must have jQuery loaded in your page for the script to work. Check your template, and if it does not have jQuery, insert this before </head:>
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'></script>
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's html, just before </body>. If you have my other popular post hacks, like shuffle, shuffle and limit or Trim Blogger popular post snippets right, you can put this code in the same place, after those hack's code.
In the script there is the variable var newSize = 100; which defines the new size for thumbnails. You can set the new size smaller or bigger than the default size, which is 72.
Wednesday, June 27, 2012
23
Add Post titles to Older and Newer Post links – reloaded
When viewing a single Blogger blog post there are links to Newer Post, Home, and Older Post at the bottom of the page. Unfortunately the Newer and Older post links only contain text "Newer Post" and "Older Post", not the actual post titles. Wordpress, from where I migrated to Blogger, can display the post titles. But not Blogger...
Previous hacks
There are already some hacks to do this. One of the first is by ETBlue, here's that hack. It works very well, but it skews the stats: the loading of two extra posts by jQuery results in two extra stats hits for an opened post.
I did a hack, too, which adresses the stats problem, it is here. It uses somewhat different method to get the post titles: they are fetched from the blog feed, or generated from the blog url (=pseudo title), so no extra posts are loaded, so we have no stats skew. The problem is that is only gets real titles for 500 latest posts. Older posts get a pseudo title. 500 is sufficient in most cases. The script could be modified to get 1000 posts, or more, but it would take some time to load the feeds.
In a comment of my previous hack Duy Pham gave a link to his Older/Newer post title hack. He has an excellent solution for getting the titles from the blog feed: first get the index using publishing date of the post, then retrieve maximum of 3 posts (previous, this post and next post) from a feed.
Duy Pham's hack was so inspiring, that I started coding the thing same in jQuery (Duy uses javascript), and to be compatible with my previous hack. The result has 2 lines less code than the previous hack, and many more features:
Post titles to Older and Newer Post links – reloaded
Installing the hack
You need to edit your blog's template. I use jQuery in this hack, so you need jQuery. Check your template, and if it does not have jQuery, insert this before </head:>
Then find </body> and insert this code (just) before it:
If you had the previous version installed, you can replace the old code. Save the template, and the hack is installed!
Configuration
You can configure the following javascript variables:
olderLink - contains the template for older link, you can use [title] in this
newerLink - template for newer link, you can use [title] in this
olderTitle - template for older link title, you can use [title], [date] and [datetime] in this
newerTitle - template for newer link title, you can use [title], [date] and [datetime] in this
You can use any html, too, for example you can use images. If you use the default olderLink and newerLink, you can also style classes .blog-pager-older-link-title and .blog-pager-older-link-title.
The previous/next links need some styling, so that post titles fit better. For example something like this in Simple template; add these to the styles section of your template (or use Template Designer|Advanced|Add CSS):
Hope you like this hack!
Previous hacks
There are already some hacks to do this. One of the first is by ETBlue, here's that hack. It works very well, but it skews the stats: the loading of two extra posts by jQuery results in two extra stats hits for an opened post.
I did a hack, too, which adresses the stats problem, it is here. It uses somewhat different method to get the post titles: they are fetched from the blog feed, or generated from the blog url (=pseudo title), so no extra posts are loaded, so we have no stats skew. The problem is that is only gets real titles for 500 latest posts. Older posts get a pseudo title. 500 is sufficient in most cases. The script could be modified to get 1000 posts, or more, but it would take some time to load the feeds.
In a comment of my previous hack Duy Pham gave a link to his Older/Newer post title hack. He has an excellent solution for getting the titles from the blog feed: first get the index using publishing date of the post, then retrieve maximum of 3 posts (previous, this post and next post) from a feed.
Duy Pham's hack was so inspiring, that I started coding the thing same in jQuery (Duy uses javascript), and to be compatible with my previous hack. The result has 2 lines less code than the previous hack, and many more features:
Post titles to Older and Newer Post links – reloaded
Installing the hack
You need to edit your blog's template. I use jQuery in this hack, so you need jQuery. Check your template, and if it does not have jQuery, insert this before </head:>
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'></script>
Then find </body> and insert this code (just) before it:
If you had the previous version installed, you can replace the old code. Save the template, and the hack is installed!
Configuration
You can configure the following javascript variables:
olderLink - contains the template for older link, you can use [title] in this
newerLink - template for newer link, you can use [title] in this
olderTitle - template for older link title, you can use [title], [date] and [datetime] in this
newerTitle - template for newer link title, you can use [title], [date] and [datetime] in this
You can use any html, too, for example you can use images. If you use the default olderLink and newerLink, you can also style classes .blog-pager-older-link-title and .blog-pager-older-link-title.
The previous/next links need some styling, so that post titles fit better. For example something like this in Simple template; add these to the styles section of your template (or use Template Designer|Advanced|Add CSS):
.blog-pager-newer-link {background-color:transparent !important;padding: 0 !important;}
.blog-pager-older-link {background-color:transparent !important;padding: 0 !important;}
#blog-pager-newer-link {padding:5px;font-size:90%;width:200px;text-align:left;}
#blog-pager-older-link {padding:5px;font-size:90%;width:200px;text-align:right;}
.home-link {left:0px;position:absolute;margin-left:250px;text-align:center;width:60px;white-space:nowrap;}
If you don't have Simple template, test and change styles if needed. Values for .home-link work with 560px wide text area (250x2+60=560), change accordingly if needed. If "Home" text is very wide in your language, you may also have to change the values (test and see if it works). Of course you can style everything quite differently than me, that's just CSS. :)Hope you like this hack!
Friday, June 8, 2012
3
Small update to Adding Post titles to Older and Newer Post links
Since Blogger has started rolling out local domains, depending where you view the blog, the links inside the blog may not be anymore blogname.blogspot.com/ but may be for example blogname.blogspot.co.uk/ or blogname.blogspot.fi/.
However, the urls are internally still blogspot.com and also in blog's feeds. My hack for Adding post titles to Older and Newer Post links fetches the posts' urls and titles from feed and tries to change the older/newer post links' texts to post titles using the url. Local domains disturbed this, no match was found and a pseudo title was generated instead.
So I had to make a small update that changes the local domain back to .com before matching it with feed urls. Lines 34 and 41 are new, both containing this same code:
Update June 27th 2012: new version of this hack is here, I suggest you consider using it instead of this.
However, the urls are internally still blogspot.com and also in blog's feeds. My hack for Adding post titles to Older and Newer Post links fetches the posts' urls and titles from feed and tries to change the older/newer post links' texts to post titles using the url. Local domains disturbed this, no match was found and a pseudo title was generated instead.
So I had to make a small update that changes the local domain back to .com before matching it with feed urls. Lines 34 and 41 are new, both containing this same code:
href = href.replace(/\.blogspot\.[^/]+\//, ".blogspot.com/");If you have this hack installed, I suggest you make the same update. See the whole hack with installation instructions here, source code updated: Add post titles to Older and Newer Post links.
Update June 27th 2012: new version of this hack is here, I suggest you consider using it instead of this.
Thursday, June 7, 2012
20
Round avatars, thumbnails, and other images
Lately I learned how images can be rounded using CSS. This seems to be a "good formula":
Better recent comments gadget
Add this style:
Profile gadget with post count
Add this style:
Top Commentators gadget
Add this style:
Gadget for YouTube activity feed
This gives a nice "tube TV" like effect, add this style:
Just one more, and I think you'll get the hang of it. :)
Popular Posts (Blogger gadget)
Add this style using Template Designer, Advanced, Add CSS:
.someclass {
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
For some templates, and maybe just for a change, those rounded images can look very good. I'll show you CSS you can add to my hacks, and one Blogger gadget, to make images round. In my hacks you should add the CSS in the code before </style>.Better recent comments gadget
Add this style:
.recent-comment-ico img {
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
Profile gadget with post count
Add this style:
.author-avatar {
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
Top Commentators gadget
Add this style:
.top-commenter-line img {
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
Gadget for YouTube activity feed
This gives a nice "tube TV" like effect, add this style:
div.ytc_thumb img {
border:none;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
Just one more, and I think you'll get the hang of it. :)
Popular Posts (Blogger gadget)
Add this style using Template Designer, Advanced, Add CSS:
.PopularPosts .item-thumbnail img {
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
Wednesday, June 6, 2012
13
Customizable Author Box with post count
I got this request for an author box with post count in my blog's comments. An author box is something that is displayed after a post, and it shows info about the author who wrote the post. WordPress.org has many author box extensions, for example Author Box After Posts. There are some hacks for Blogspot blogs, too, but they are generally for single author blogs, and with no post count.
My Author Box has support for blogs with multiple authors, and post counts per author.
I must warn you, this hack suits best people who can do their own template customizations and basically already know their way around. These instructions have worked "as is" for Simple and Awesome templates, should work for all others, too, especially if you know you to adapt the code. Not for dynamic templates, though.
How to install
Installing is quite simple. Edit template HTML, expand widget templates. This hack uses jQuery, so if your template does not already have jQuery, add the following code in your template before </head>:
Then find: <data:post.jumpText/>, there should be only one instance. Few lines down from there is line:
This (+ possibly jQuery loading) is the only code you need to put into the template. Later I'll show you three snippets from this same code, don't put them in the template, just edit the previous code at those points. After pasteing the code to the template, you can save the template and see if there were any errors. You can also test the hack at this time. After that you must customize the hack to suit your blog and blog's authors.
Configuration
This hack works for both single author and multi author blogs. If you have multi author blog, you must set var multiAuthor = true; This setting can be true for single author blogs, too, but it is sligthly faster if you put false there for single user blogs.
With onePost and manyPosts variables you can localize the words "post"/"posts" or use other word like "article"/"articles".
There are more configurable things in javascript parts, but I'll tell more about them later.
HTML markup
This part defines the look of author box.
Author box html comes partly from the template, and author specific thigs are set by javascript. If you have a single author blog, you can put basically any html between <div class='post-author-block'> and </div>.
Just use <span class='authorinfopostcount'>0</span> where you want the post count to appear, and <span class='authorinfopostpost'>posts</span> where you want the singular/pluralis post word to appear. You can also use the same classes as in multiple author blogs, and you can use additional classes and make CSS for them as you wish.
With multi author blog, author specific information contains post count, author (profile) link, author avatar image, author description, and author name. So these can not be "hard coded" into the box, but they are set via javascript. Inside <div class='post-author-block'> and </div>, when you use the following tags + classes, their contents will be dynamically set:
<a class='authorinfolink'>somemarkup</a> this will link the text "somemarkup" to author profile link
<img class='authorinfoimage' src=''/> this will get author avatar
<span class='authorinfoname'/></a> author name will be put inside this span
<span class='authorinfopostcount'>0</span> and post count here
<span class='authorinfopostpost'>posts</span> this will be post/posts (singular, pluralis) according to how many posts author has
<span class='authorinfodescription'></span> this will be replaced by the author specific description, which can be plain text or complex html (but no scripts). Class can be used in div, too.
You can also add classes and CSS for elements if you wish. It is just basic template editing. And probably want to customize the CSS too, to get the box look like you want. CSS part is this:
Then in the javascript part, for every author or the blog you should set variable aut_desc['AUTHORNAME']. Element with class='authorinfodescription' will receive that description. You can use html here, put div's there, br's, links, imgs, pretty much everything, but not scripts. Now there is only some info about me and some dummy info, you can replace them with content that is relevant to your blog.
For every author or the blog you can (but it is not necessary) set/override auth_url['AUTHORNAME']. This way you can link author straight to his Google+ profile, or any other page you wish, instead of the blogger profile page. Here's the configuration part of the javascript:
I would have liked to get the author description automatically, but there is no feasible way of getting author profile descriptions in multi author blog, so the descriptions must be set in script. Positive side is that you can use any description you want, with links, images etc. Because descriptions could not be fetched automatically, I decided to leave the whole hack simple, so its users can customize the author box look themselves.
If anyone wants to develop this idea further, go right ahead. I'm not so good at making html/css, some of you will make this look much better. If you use it, please drop a comment so I can see what it looks like in your blog. :)
My Author Box has support for blogs with multiple authors, and post counts per author.
I must warn you, this hack suits best people who can do their own template customizations and basically already know their way around. These instructions have worked "as is" for Simple and Awesome templates, should work for all others, too, especially if you know you to adapt the code. Not for dynamic templates, though.
How to install
Installing is quite simple. Edit template HTML, expand widget templates. This hack uses jQuery, so if your template does not already have jQuery, add the following code in your template before </head>:
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'></script>
Then find: <data:post.jumpText/>, there should be only one instance. Few lines down from there is line:
<div class='post-footer'>just before that line paste all this code:
This (+ possibly jQuery loading) is the only code you need to put into the template. Later I'll show you three snippets from this same code, don't put them in the template, just edit the previous code at those points. After pasteing the code to the template, you can save the template and see if there were any errors. You can also test the hack at this time. After that you must customize the hack to suit your blog and blog's authors.
Configuration
This hack works for both single author and multi author blogs. If you have multi author blog, you must set var multiAuthor = true; This setting can be true for single author blogs, too, but it is sligthly faster if you put false there for single user blogs.
With onePost and manyPosts variables you can localize the words "post"/"posts" or use other word like "article"/"articles".
There are more configurable things in javascript parts, but I'll tell more about them later.
HTML markup
This part defines the look of author box.
Author box html comes partly from the template, and author specific thigs are set by javascript. If you have a single author blog, you can put basically any html between <div class='post-author-block'> and </div>.
Just use <span class='authorinfopostcount'>0</span> where you want the post count to appear, and <span class='authorinfopostpost'>posts</span> where you want the singular/pluralis post word to appear. You can also use the same classes as in multiple author blogs, and you can use additional classes and make CSS for them as you wish.
With multi author blog, author specific information contains post count, author (profile) link, author avatar image, author description, and author name. So these can not be "hard coded" into the box, but they are set via javascript. Inside <div class='post-author-block'> and </div>, when you use the following tags + classes, their contents will be dynamically set:
<a class='authorinfolink'>somemarkup</a> this will link the text "somemarkup" to author profile link
<img class='authorinfoimage' src=''/> this will get author avatar
<span class='authorinfoname'/></a> author name will be put inside this span
<span class='authorinfopostcount'>0</span> and post count here
<span class='authorinfopostpost'>posts</span> this will be post/posts (singular, pluralis) according to how many posts author has
<span class='authorinfodescription'></span> this will be replaced by the author specific description, which can be plain text or complex html (but no scripts). Class can be used in div, too.
You can also add classes and CSS for elements if you wish. It is just basic template editing. And probably want to customize the CSS too, to get the box look like you want. CSS part is this:
Then in the javascript part, for every author or the blog you should set variable aut_desc['AUTHORNAME']. Element with class='authorinfodescription' will receive that description. You can use html here, put div's there, br's, links, imgs, pretty much everything, but not scripts. Now there is only some info about me and some dummy info, you can replace them with content that is relevant to your blog.
For every author or the blog you can (but it is not necessary) set/override auth_url['AUTHORNAME']. This way you can link author straight to his Google+ profile, or any other page you wish, instead of the blogger profile page. Here's the configuration part of the javascript:
I would have liked to get the author description automatically, but there is no feasible way of getting author profile descriptions in multi author blog, so the descriptions must be set in script. Positive side is that you can use any description you want, with links, images etc. Because descriptions could not be fetched automatically, I decided to leave the whole hack simple, so its users can customize the author box look themselves.
If anyone wants to develop this idea further, go right ahead. I'm not so good at making html/css, some of you will make this look much better. If you use it, please drop a comment so I can see what it looks like in your blog. :)
8
Hack for my recent comments hack: don't show own comments
Maybe you don't want to show your own comments in recent comments? Here is quick and simple hack for my Son of the better recent comments gadget to make it not show own comments.
Edit the HTML/Javascript gadget. Change lines 93 and 115, which both look like this now:
Edit the HTML/Javascript gadget. Change lines 93 and 115, which both look like this now:
var entry = json.feed.entry[i];to:
var entry = json.feed.entry[i]; if(entry.author[0].name.$t=="PUT YOUR USERNAME HERE") continue;Edit your username inside the quotation marks. Save the gadget. Your comments won't be displayed anymore in recent comments.
Sunday, April 8, 2012
11
How to make Blogger sticky post using a gadget
I have this other sticky post hack, which uses real Blogger posts. But for some Blogspot blogs that may not be the best solution, so lets see how we can do the sticky post thing using a HTML/Javascript gadget. I did not find "full solutions" where the sticky post works like it should, i.e. displays only on the first page of the blog, but not on other pages. So here is one, by me.
Adding the gadget
Go to Design, Page elements. Click Add a Gadget (any link will do, we will move the gadget to proper place afterwards).
Write the text/html you want in your "sticky post", click Save. I suggest to not use any title, it helps the correct alignment when gadget is hidden.
Now drag the new gadget to top of blog posts, like this:
Save.
Hide the gadget on other pages than first
Open template html for editing. Before </head> add this:
Depending on your template you might have to change the value -30px to adjust the position of blog texts. -30px works for "Simple" template.
How to mimic a post in gadget html
Here's a "template" you can use in HTML/Javascript gadget contents to make the gadget have post-like title, spacing and body text.
This template works at least in "Simple" and "Awesome Inc." templates, probably in others, too. :)
Adding the gadget
Go to Design, Page elements. Click Add a Gadget (any link will do, we will move the gadget to proper place afterwards).
Write the text/html you want in your "sticky post", click Save. I suggest to not use any title, it helps the correct alignment when gadget is hidden.
Now drag the new gadget to top of blog posts, like this:
Save.
Hide the gadget on other pages than first
Open template html for editing. Before </head> add this:
<b:if cond='data:blog.url != data:blog.homepageUrl'>
<style type='text/css'>
div.main div.widget.HTML .widget-content { display:none; }
div.main div.widget.HTML { margin-bottom:-30px; visibility: hidden;}
</style>
</b:if>
Depending on your template you might have to change the value -30px to adjust the position of blog texts. -30px works for "Simple" template.
How to mimic a post in gadget html
Here's a "template" you can use in HTML/Javascript gadget contents to make the gadget have post-like title, spacing and body text.
This template works at least in "Simple" and "Awesome Inc." templates, probably in others, too. :)
Sunday, March 4, 2012
30
Allow users embed YouTube videos in Blogger comments
Some time ago while googling something about video embeds I came across with oEmbed specification. This simple API allows websites to display embedded content from oEmbed providers. After some inspecting I used the oEmbed in a Python script to turn youtube links in a text into embedded videos. Worked nicely.
oEmbed returns data in JSON or XML format. That is ok with server side languages like php and Python. But for javascript this is a problem. If there is a problem, usually solution is found, and I found Embedly service, which is unfortunately not free.
With no intention to invest any money, and hands itching for another Google Appengine Python app, I saw an opportunity. To make a service that relays YouTube's oEmbed results to javascript format (JSONP). And all with memory caching etc. so it should be able to handle some traffic. After some coding it was ready and working http://oembed-js.appspot.com/?url=[youtube url to embed][&callback=foo] But now where to use it...
In Wordpress blogs, when commenting an article, user can just write/paste youtube url into the comment text, and it will be turned into a video embed. Surprise, not in Blogger. For some blogs this is a bummer. Now with my new, free, javascript/jQuery compatible GAE service oembed-js this became possible in Blogger. Of course we need to hack the blog first a bit. :)
You can decide, whether you want to turn all raw youtube links (watch and playlist links) into embeds, which is the default, or only those, that use [video=youtube_url] tag. You can also change the tag name, if you want, maybe you like youtube or embed more. If you have lazy loading installed in your blog, by default this script will use it, and pages with many videos load much faster. Installation is simple, open template html for editing, find </head> and paste this code before it:
This script does not work in dynamic views, but it works with Blogger native comments, my threaded comments, and also Blogger threaded comments. Hope you like it. I'll tell you later about the oembed‑js service API (application programming interface), so it is easier for you to develop own applications.
References:
- oEmbed specification
- YouTube API blog: oEmbed support
Update 27th March 2012: Line #74 updated, to handle better the case of only a YouTube url as comment text in new Blogger threaded comments (you do not need to update if you use videotag, or don't use Blogger threaded comments).
oEmbed returns data in JSON or XML format. That is ok with server side languages like php and Python. But for javascript this is a problem. If there is a problem, usually solution is found, and I found Embedly service, which is unfortunately not free.
With no intention to invest any money, and hands itching for another Google Appengine Python app, I saw an opportunity. To make a service that relays YouTube's oEmbed results to javascript format (JSONP). And all with memory caching etc. so it should be able to handle some traffic. After some coding it was ready and working http://oembed-js.appspot.com/?url=[youtube url to embed][&callback=foo] But now where to use it...
In Wordpress blogs, when commenting an article, user can just write/paste youtube url into the comment text, and it will be turned into a video embed. Surprise, not in Blogger. For some blogs this is a bummer. Now with my new, free, javascript/jQuery compatible GAE service oembed-js this became possible in Blogger. Of course we need to hack the blog first a bit. :)
You can decide, whether you want to turn all raw youtube links (watch and playlist links) into embeds, which is the default, or only those, that use [video=youtube_url] tag. You can also change the tag name, if you want, maybe you like youtube or embed more. If you have lazy loading installed in your blog, by default this script will use it, and pages with many videos load much faster. Installation is simple, open template html for editing, find </head> and paste this code before it:
This script does not work in dynamic views, but it works with Blogger native comments, my threaded comments, and also Blogger threaded comments. Hope you like it. I'll tell you later about the oembed‑js service API (application programming interface), so it is easier for you to develop own applications.
References:
- oEmbed specification
- YouTube API blog: oEmbed support
Update 27th March 2012: Line #74 updated, to handle better the case of only a YouTube url as comment text in new Blogger threaded comments (you do not need to update if you use videotag, or don't use Blogger threaded comments).
Sunday, February 26, 2012
34
Youtube videos lazy load, improved style
I styled my previous youtube lazy load hack a bit so that the video description text is easier to read. Before it looked like this (this is an image, so no hover effect):
HTML needed to produce this is:
Here's the code, place it before </head>. If you had previous version installed, you replace it with this code. And as always, you can edit CSS styles to your needs.
This script is installed on this blog.
HTML needed to produce this is:
<div style="text-align:center;"><a class="youtube-lazy-link" href="http://www.youtube.com/watch?v=SFiWfrLEqPw" style="width: 420px;height:315px;" title="Click to play!"><b>Mozart Fantasy in C minor</b> played by me</a></div>With the new style, it looks like this (actual embed):
Here's the code, place it before </head>. If you had previous version installed, you replace it with this code. And as always, you can edit CSS styles to your needs.
This script is installed on this blog.
Monday, February 6, 2012
12
Hack to expand/collapse Blogger sidebar gadgets
Previously I made the tabbed gadgets hack, which can save space in blog's sidebar. This hack serves the same purpose, but a bit differently. With this hack you can make your sidebar gadgets vertically collapsible, using jQuery. I have used it on this blog on some gadgets, and here is...
You can choose which gadgets you make collapsible, and make them either closed or open initially. You can also make gadget groups, from which only one gadget may be open at one time (in this blog the search gadgets, and in demo blog the profile gadget and "read more" gadget).
To install, you need to have some computing skills and know your way around. Edit your blog's template, and paste the following code before </head>. If you have jQuery already loaded somewhere in your template, you can leave out the first line.
Then you need to edit the window.load function at the end of the script. There you should add calls to cedgAddOpen or cedgAddClosed for all those gadgets that you want to make collapsible (and open or closed by default). Use gadget ID, preceded with #, or gadget title, as parameter. Using "#ID" is preferred method. You can easily see the IDs of the blog's gadgets at end of the template, when widget templates are not expanded.
To make a gadget group, pass several ID parameters to cedgAddOpen. The first ID's gadget will be opened initially, others closed. Example: cedgAddOpen("#Profile1", "#HTML1"); You can call cedgAddClosed again for the first gadget's ID if you want it initially closed, too.
Note: if you use also tabbed gadgets, you cannot collapse gadgets that are made into tabs.
As you can see in the CSS, the little plus and minus signs are implemented as base64 images. You can change them if you want, and they can be external images, too. Also other styles, and the gadget spacing, can be easily changed. You may also want to style the gadget titles (H2 element), I use a gradient there, here are instructions.
You can choose which gadgets you make collapsible, and make them either closed or open initially. You can also make gadget groups, from which only one gadget may be open at one time (in this blog the search gadgets, and in demo blog the profile gadget and "read more" gadget).
To install, you need to have some computing skills and know your way around. Edit your blog's template, and paste the following code before </head>. If you have jQuery already loaded somewhere in your template, you can leave out the first line.
Then you need to edit the window.load function at the end of the script. There you should add calls to cedgAddOpen or cedgAddClosed for all those gadgets that you want to make collapsible (and open or closed by default). Use gadget ID, preceded with #, or gadget title, as parameter. Using "#ID" is preferred method. You can easily see the IDs of the blog's gadgets at end of the template, when widget templates are not expanded.
To make a gadget group, pass several ID parameters to cedgAddOpen. The first ID's gadget will be opened initially, others closed. Example: cedgAddOpen("#Profile1", "#HTML1"); You can call cedgAddClosed again for the first gadget's ID if you want it initially closed, too.
Note: if you use also tabbed gadgets, you cannot collapse gadgets that are made into tabs.
As you can see in the CSS, the little plus and minus signs are implemented as base64 images. You can change them if you want, and they can be external images, too. Also other styles, and the gadget spacing, can be easily changed. You may also want to style the gadget titles (H2 element), I use a gradient there, here are instructions.
Thursday, January 19, 2012
0
Expand/Collapse all comments texts, for threaded comments v2
This is simple hack, it installs links for collapsing/expanding all comments' texts. You can test the functionality here.
You must have threaded comments v2 installed for this to work. Edit blog template, expand widget templates, find lines:
Save template. You're done.
You must have threaded comments v2 installed for this to work. Edit blog template, expand widget templates, find lines:
<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
After those lines, just before line that contains <H4>, add this code:Save template. You're done.
Wednesday, January 18, 2012
47
Blogger threaded commenting hack v2
Blogger announced its own threaded commenting on January 12th. I thought that soon my good old threaded comments hack would not be needed anymore.
But Blogger's implementation of threaded comments has its limitations, and bugs, too. So I decided to give my threaded commenting hack a new round, and made version 2. It is now installed on this blog, you can see it and test it for example in the threaded commenting playground.
Features include:
To install this, just edit your blog's template, copy the following code (use the "Download Raw" link) and paste it just before </body> in the template. If you have jQuery loaded previously in the template, you can delete the first line that loads jQuery. If you had my previous threaded commenting hack installed, remove that code (the javascript part). You don't need to install any hacks beforehand, like in the previous version: this hack includes them, if they are not installed.
This works at least on Simple template. If your template is heavily modded, then this hack might not work without modifications. And this hack does not work on dynamic views, and does not work if Blogger's threaded commenting is active. If you need to disable Blogger's threaded commenting, see this article.
Update August 31th 2012: If you have this installed, and threading stopped, please install this update.
But Blogger's implementation of threaded comments has its limitations, and bugs, too. So I decided to give my threaded commenting hack a new round, and made version 2. It is now installed on this blog, you can see it and test it for example in the threaded commenting playground.
Features include:
- (relatively) easy install, just one piece of code copied to template
- contains Reply links to comments hack
- contains highlight author comments hack
- expand/collapse individual comments
- style is similar to Blogger threaded comments
- max threading levels can be specified
- if you have used Blogger's threading, can read that threading information
- works with major browsers, tested on Internet Explorer, Firefox, Opera, Chrome
- I must have forgotten something. Did I mention that it is great? :)
To install this, just edit your blog's template, copy the following code (use the "Download Raw" link) and paste it just before </body> in the template. If you have jQuery loaded previously in the template, you can delete the first line that loads jQuery. If you had my previous threaded commenting hack installed, remove that code (the javascript part). You don't need to install any hacks beforehand, like in the previous version: this hack includes them, if they are not installed.
This works at least on Simple template. If your template is heavily modded, then this hack might not work without modifications. And this hack does not work on dynamic views, and does not work if Blogger's threaded commenting is active. If you need to disable Blogger's threaded commenting, see this article.
Update August 31th 2012: If you have this installed, and threading stopped, please install this update.
Monday, January 16, 2012
9
Short URLs for Blogspot posts, and update to urltinyfy
Recently I made a Google App Engine application in Python, that provides javascript JSONP APIs for different URL shortening services. Read more about URLtinyfy, and the API, in this blog article.
I expanded the application to support more URL shortening services. Currently it supports: tinyurl.com (provides same interface as json-tinyurl), goo.gl (provides same interface as ggl-shortener), safe.mn, is.gd, v.gd, mcaf.ee, linkee.com, cli.gs, (std.li*), tinyurl.ms, and "hidden" support for bit.ly (and j.mp, which is same as bit.ly). I added also a sample URL shortener in javascript for the (non-hidden) services, for example: Sample linkee.com URL shortener.
*) std.li API does not work anymore in June 2012, removed from the list
And here's another example of usage, a hack to add...
Short URLs for blog's posts
This requires template editing. Edit also Widget templates. Find (partial line):
The above code includes tinyurl, googl and safemn services. It is easy to add, remove or change the services displayed. Hack is installed on this blog, for demostration there are five different services offered here, but in practise I think it is better to limit the shortening services to two or three.
I expanded the application to support more URL shortening services. Currently it supports: tinyurl.com (provides same interface as json-tinyurl), goo.gl (provides same interface as ggl-shortener), safe.mn, is.gd, v.gd, mcaf.ee, linkee.com, cli.gs, (std.li*), tinyurl.ms, and "hidden" support for bit.ly (and j.mp, which is same as bit.ly). I added also a sample URL shortener in javascript for the (non-hidden) services, for example: Sample linkee.com URL shortener.
*) std.li API does not work anymore in June 2012, removed from the list
And here's another example of usage, a hack to add...
Short URLs for blog's posts
This requires template editing. Edit also Widget templates. Find (partial line):
post-footer-line-3'and about 8 lines later:
</span> </div>Add this code after that </span> </div> line:
The above code includes tinyurl, googl and safemn services. It is easy to add, remove or change the services displayed. Hack is installed on this blog, for demostration there are five different services offered here, but in practise I think it is better to limit the shortening services to two or three.
Wednesday, January 11, 2012
36
Add post titles to Older and Newer Post links
Update June 27th 2012: new version here, I suggest you consider using it instead of this.
When you open a Blogger blog post, there are links to Newer Post, Home, and Older Post at the bottom of the page. Unfortunately the Newer and Older post links only contain text "Newer Post" and "Older Post", not the actual post titles. Wordpress, from where I migrated to Blogger, can display the post titles. But not Blogger.
Already done, but...
I started thinking, if I could make a hack to display those post titles also in Blogspot blogs. Some googling revealed that this had already been done. I think ETBlue was the first author of that hack, here's Blogger forum post about that. Later it was repackaged and republished by Bloggersentral and WEB.SILOG.. The hack is quite clever, it uses jQuery to load the previous and next posts and uses jQuery selectors to get the titles. Good for me, I thought, saves the me trouble of making a hack.
...it skews the stats! 1 --> 3
After having the mod installed for a couple of hours I noticed, that I had many three-hit visits in my blog. Then I realised, that loading two extra posts by jQuery results in two extra stats hits for an opened post! That may not worry everyone, but I did not like that at all. So to the drawing board, after all.
My first version
So blog posts cannot be read from browser without causing stat hits. I uninstalled the ETBlue/WEB.SILOG./Bloggersentral hack and started devicing my own. My first quick & dirty solution was to parse the url, and create a "pseudo title" from that, so for example:
Url http://yabtb.blogspot.com/2011/11/return-of-better-recent-comments-gadget.html becomes "Return of better recent comments..." and http://yabtb.blogspot.com/2011/11/welcome-to-yabtb.html becomes "Welcome to yabtb". If url is so long, that it might be cut, it is cut once more (to make sure it is not full title) and ellipsis is added. See function urlToPseudoTitle in the hack source, if you need something like this.
This was quite nice solution and works especially on English blogs. And it is much faster than jQuerying two extra pages. I was satisfied for a couple of hours.
But then I noticed a glitch in my Finnish blog. In Finnish language there are letters ä and ö (a with dots, o with dots), which are converted to "a" and "o" in the post url. So if I have title "Monet kipulääkkeet lääkekannabista koukuttavampia", and its url is http://mspotilas.blogspot.com/2012/01/monet-kipulaakkeet-laakekannabista.html, the pseudo title becomes "Monet kipulaakkeet...". Pseudo title is still readable without the dotted letters, but is a bit funny. Once again, back to the drawing board...
The solution
Script cannot read blog posts without stats hits, but it can read blog feeds. Actually I did already something like this in my recent comments gadget: load the post feed and collect post url - post title pairs, to be later used to convert urls to post titles.
It is possible to read up to 500 entries at a time from the Blogger feeds. Most blogs aren't that big, so the limit of 500 entries will be most of the time sufficient. But one could easily add another line to the script to fetch entries from 501 to 1000. And as a fallback, if script did not get post title from feed, for reason or another, it creates a pseudo title from the post url (see previous chapter). Reading the feed entries might take some milliseconds, so the script is executed (0,5 seconds) after page is fully loaded, so it won't slow down page load.
Installing the hack
This hack is quite easy to install, although it requires template editing. I use jQuery in this hack, mainly for simplicity (much easier to execute something at window load, select elements, etc.). So you need jQuery. Check your template, and if it does not have jQuery, insert this before </head:>
Save the template, and the hack is installed!
Fine tuning Home link position
Home link is not centered on blog's front page, last page, newest post and oldest post. Add this CSS to center the link properly:
Hope you like this hack! It is installed for example in this blog.
Update June 8th 2012: Blogspot uses local domains (like "blogspot.fi") in next/prev links but not in feed. I added two lines to deal with this: lines 34 and 41 are new.
Update June 27th 2012: new version here.
When you open a Blogger blog post, there are links to Newer Post, Home, and Older Post at the bottom of the page. Unfortunately the Newer and Older post links only contain text "Newer Post" and "Older Post", not the actual post titles. Wordpress, from where I migrated to Blogger, can display the post titles. But not Blogger.
Already done, but...
I started thinking, if I could make a hack to display those post titles also in Blogspot blogs. Some googling revealed that this had already been done. I think ETBlue was the first author of that hack, here's Blogger forum post about that. Later it was repackaged and republished by Bloggersentral and WEB.SILOG.. The hack is quite clever, it uses jQuery to load the previous and next posts and uses jQuery selectors to get the titles. Good for me, I thought, saves the me trouble of making a hack.
...it skews the stats! 1 --> 3
After having the mod installed for a couple of hours I noticed, that I had many three-hit visits in my blog. Then I realised, that loading two extra posts by jQuery results in two extra stats hits for an opened post! That may not worry everyone, but I did not like that at all. So to the drawing board, after all.
My first version
So blog posts cannot be read from browser without causing stat hits. I uninstalled the ETBlue/WEB.SILOG./Bloggersentral hack and started devicing my own. My first quick & dirty solution was to parse the url, and create a "pseudo title" from that, so for example:
Url http://yabtb.blogspot.com/2011/11/return-of-better-recent-comments-gadget.html becomes "Return of better recent comments..." and http://yabtb.blogspot.com/2011/11/welcome-to-yabtb.html becomes "Welcome to yabtb". If url is so long, that it might be cut, it is cut once more (to make sure it is not full title) and ellipsis is added. See function urlToPseudoTitle in the hack source, if you need something like this.
This was quite nice solution and works especially on English blogs. And it is much faster than jQuerying two extra pages. I was satisfied for a couple of hours.
But then I noticed a glitch in my Finnish blog. In Finnish language there are letters ä and ö (a with dots, o with dots), which are converted to "a" and "o" in the post url. So if I have title "Monet kipulääkkeet lääkekannabista koukuttavampia", and its url is http://mspotilas.blogspot.com/2012/01/monet-kipulaakkeet-laakekannabista.html, the pseudo title becomes "Monet kipulaakkeet...". Pseudo title is still readable without the dotted letters, but is a bit funny. Once again, back to the drawing board...
The solution
Script cannot read blog posts without stats hits, but it can read blog feeds. Actually I did already something like this in my recent comments gadget: load the post feed and collect post url - post title pairs, to be later used to convert urls to post titles.
It is possible to read up to 500 entries at a time from the Blogger feeds. Most blogs aren't that big, so the limit of 500 entries will be most of the time sufficient. But one could easily add another line to the script to fetch entries from 501 to 1000. And as a fallback, if script did not get post title from feed, for reason or another, it creates a pseudo title from the post url (see previous chapter). Reading the feed entries might take some milliseconds, so the script is executed (0,5 seconds) after page is fully loaded, so it won't slow down page load.
Demo (this blog)
Installing the hack
This hack is quite easy to install, although it requires template editing. I use jQuery in this hack, mainly for simplicity (much easier to execute something at window load, select elements, etc.). So you need jQuery. Check your template, and if it does not have jQuery, insert this before </head:>
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'></script>The previous/next links need some styling, so that post titles fit better. For example something like this in Simple template; add these to the styles section of your template (or use Template Designer|Advanced|Add CSS):
.blog-pager-newer-link {background-color:transparent !important;padding: 0 !important;}
.blog-pager-older-link {background-color:transparent !important;padding: 0 !important;}
#blog-pager-newer-link {padding:5px;font-size:90%;width:200px;text-align:left;}
#blog-pager-older-link {padding:5px;font-size:90%;width:200px;text-align:right;}
If you don't have Simple template, test and change styles if needed. Then find </body> and insert this code (just) before it:Save the template, and the hack is installed!
Fine tuning Home link position
Home link is not centered on blog's front page, last page, newest post and oldest post. Add this CSS to center the link properly:
.home-link {left:0px;position:absolute;margin-left:250px;text-align:center;width:60px;white-space:nowrap;}
#blog-pager {min-height:2em;}
Values work with 560px wide text area (250x2+60=560), change accordingly if needed. If "Home" text is very wide in your language, you may also have to change the values (test and see if it works).Hope you like this hack! It is installed for example in this blog.
Update June 8th 2012: Blogspot uses local domains (like "blogspot.fi") in next/prev links but not in feed. I added two lines to deal with this: lines 34 and 41 are new.
Update June 27th 2012: new version here.
Tuesday, January 3, 2012
17
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.
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.
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.
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.
Saturday, December 31, 2011
10
Use new blank Blogger profile picture in comments
Blogger profile pages used to be like this (sample from Blogger documentation):
Profile pages changed to something like this a month or two ago:
If user hasn't set a profile image, then the "avatar blue" image is shown instead, like in the picture above. But in blogs' comments section, these users' avatars display the
icon, not "avatar blue". With this little hack you can change these users' avatar icons in your blog's comments.
Blogger icon → 
avatar blue
First I suggest you install avatar for anonymous commenters, so you will have the avatar size right, and also mystery man for unregistered commenters.
Open your blog template html, edit widget templates. Find the widget block that begins with the following line:
icon with the "avatar blue".
Profile pages changed to something like this a month or two ago:
If user hasn't set a profile image, then the "avatar blue" image is shown instead, like in the picture above. But in blogs' comments section, these users' avatars display the
icon, not "avatar blue". With this little hack you can change these users' avatar icons in your blog's comments. → avatar blueFirst I suggest you install avatar for anonymous commenters, so you will have the
avatar size right, and also mystery man for unregistered commenters.Open your blog template html, edit widget templates. Find the widget block that begins with the following line:
<b:includable id='comments' var='post'>Then find this line that ends the comments includable block:
</b:includable>If you want the jQuery solution, insert this before </b:includable>:
<script type='text/javascript'>
//<![CDATA[
$("#comments-block img[src$='http://img2.blogblog.com/img/b16-rounded.gif'][width$='16']").attr("src", "http://lh4.googleusercontent.com/-069mnq7DV_g/TvgRrBI_JaI/AAAAAAAAAic/Iot55vywnYw/s37/avatar_blue_m_96.png");
//]]>
</script>
(Double click to select for copying.) If you use jQuery, you need to have jQuery loaded somewhere in your blog's template page. Or if you want the non-jQuery solution, insert this before </b:includable>:
<script type='text/javascript'>
//<![CDATA[
if(document.getElementById("comments-block")) document.getElementById("comments-block").innerHTML = document.getElementById("comments-block").innerHTML.replace(/http:\/\/img2\.blogblog\.com\/img\/b16-rounded\.gif/g, "http://lh4.googleusercontent.com/-069mnq7DV_g/TvgRrBI_JaI/AAAAAAAAAic/Iot55vywnYw/s37/avatar_blue_m_96.png");
//]]>
</script>
(Double click to select for copying.) Choose either, don't use both. "Avatar blue" image is uploaded to my Picasa web album, so different sizes can be fetched easily. This hack goes nicely with my recent comments hack, which is also able to substitute the icon with the "avatar blue".
Thursday, December 29, 2011
117
Son of the better recent comments gadget
Here is the newest version of my recent comments gadget (here is the previous version). Previous version still works, so if you have it installed, you don't have to update if you don't want to.
What is new?
Earlier this month Blogger added comment authors' avatar (profile image) urls to comment feed. This new version uses those urls to get the avatars, instead of using my google appengine application to get avatars from profile pages, as the previous version does.
As an added bonus in this new "Son" version, avatar size can be adjusted easier using a configuration variable, and I give you two additional CSS styles for the gadget.
Features of my recent comments gadget
You can configure:
The Script
Add a HTML/Javascript gadget to your blog, and paste the following code into it. If you had previous version installed, replace it with this, and make the same configuration changes you made to the previous version. I'm sorry that there is no automated upgrade, but this is no rocket science, I'm sure you can do it. :) Know your way around.
Script configuration
There are some CSS definitions at first, which can be changed to your liking. After that there comes javascript code and configurable variables. Here is a list of the variables and a short explanation.
numRecentComments: how many comments you want displayed
numPerPost: how many comments per post max is the goal (will fallback when necessary)
maxCommentChars: how many chars max in excerpt of comment
maxPostTitleChars: how long post title can be, or 0 (=don't cut title)
txtWrote: header text, links to comment
txtMore: footer text, links to comment
txtToolTip: text to be shown when mouse hovers over comment
txtAnonymous: "Anonymous" username localized, or empty if English text "Anonymous" is to be used
getTitles: if true, fetch titles from post feed; if false, titles are generated from url
trueAvatars: if true, uses Blogger avatars (Blogger profile images) from comment feed, not just the blogger favico [B]
urlMyAvatar: especially if trueAvatars = false, set here the url to your avatar image
urlMyProfile: if you don't have a profile gadget on page, put your profile url here!
urlAnoAvatar: anonymous avatar, you can change from mystery man to a custom one, if you want, possibly this
maxResultsPosts: can be empty or &max-results=### where ### is number of posts to get from posts feed to get titles
maxResultsComments: empty or &max-results=### where ### is number of comments to get from comments feed
New configurable variables in "Son"
cropAvatar: crop avatar to square (true) or stretch (false) to square
sizeAvatar: size of avatar in x and y direction, pixels
urlNoAvatar: comment feed offers the
icon (Blogger logo) for those Bloggers who have not set their profile image. You can override the icon with this setting (default: 
).
txtWrote, txtMore and txtTooltip
These can be just normal text. If txtWrote is normal text, it is preceded by commenter name. So if txtWrote is "wrote..." the result would be Jason wrote..., if Jason was commenting.
All texts can also have simple variables, which are: [title], [user], [date], [time], [datetime] and [date format]. [title] is substituted by Post title, where comment belongs. [user] is substituted by commenter name. [date] displays date in current (user's computer's) locale, [time] displays time and [datetime] date and time in user's locale.
format in [date format]
In format some character combinations are substituted:
yyyy=long year, yy=short year, MM=month(01-12), dd=monthday,
hh=hour, mm=min, ss=sec (time/hours in 24-hour clock)
but format can contain also other text/characters (which are displayed as is).
"Written [date MM/dd/yyyy hh:mm]" could become "Written 11/03/2011 08:30".
Again, the script has good configuration defaults, so if all this was too complicated for you, you don't have to care about it. If you don't have a profile gadget on your page, put your profile url in the code I provided, and you're ready to go. If you have a profile gadget, then you don't have to change anything, just copy and paste.
Styles for different avatar sizes
Default size for avatar is 16 pixels. If you change, the CSS might need some adjusting. In the picture in the beginning of this post there are three examples, first the default (16 pixels), then 20 pixel avatars, and then 24 pixel avatars.
Styles for 20 pixel avatars:
Styles for 24 (and larger) avatars:
This gadget is installed on this blog with 16 pixel avatars. My MS-potilas blog has this gadget with 20 pixel avatars.
If you set the urlNoAvatar, you might want to change the icon also in the comments block, where the actual comments are (below the post). I have a hack for that, too, see: Use new blank Blogger profile picture in comments.
Problems in Internet Explorer?
By default many Blogger templates have set Internet Explorer to use EmulateIE7. IE7 emulation has some bug with blog feeds in foreign languages that can make the gadget not show properly. You can fix this by editing the template, find line:
Update Jan 2nd 2012: Deleted comments (This post has been removed by the author.) no longer have "alternate" link in comment feeds, like they used to, which can cause the recent comments to disappear. I modified the script to prevent this: line 124 is modified and line 131 is new.
June 6th 2012: Optional hack: If you don't want to show your own comments in recent comments, check this hack.
August 1st 2017: To fix avatars, please change lines 157 and 158 (article code is updated).
What is new?
Earlier this month Blogger added comment authors' avatar (profile image) urls to comment feed. This new version uses those urls to get the avatars, instead of using my google appengine application to get avatars from profile pages, as the previous version does.
As an added bonus in this new "Son" version, avatar size can be adjusted easier using a configuration variable, and I give you two additional CSS styles for the gadget.
Features of my recent comments gadget
You can configure:
- number of recent comments displayed
- max number of comments per post (so one post's comments don't "flood" recent comments)
- length of comment excerpt
- translation or own version of gadget's texts
- customize what is displayed.
- blog author's comments can be styled differently (CSS)
- display comment author's site favicon, comment author's Blogger profile image, or mystery man icon (configurable) for non-registered commenters
- does not have the bugs the recent comment gadget that Blogger offers has.
- loads Blogger avatars (profile images) using the new avatar urls in comments feed
- avatar icon size can be more easily configured
- three CSS examples for different size avatars.
The Script
Add a HTML/Javascript gadget to your blog, and paste the following code into it. If you had previous version installed, replace it with this, and make the same configuration changes you made to the previous version. I'm sorry that there is no automated upgrade, but this is no rocket science, I'm sure you can do it. :) Know your way around.
Script configuration
There are some CSS definitions at first, which can be changed to your liking. After that there comes javascript code and configurable variables. Here is a list of the variables and a short explanation.
numRecentComments: how many comments you want displayed
numPerPost: how many comments per post max is the goal (will fallback when necessary)
maxCommentChars: how many chars max in excerpt of comment
maxPostTitleChars: how long post title can be, or 0 (=don't cut title)
txtWrote: header text, links to comment
txtMore: footer text, links to comment
txtToolTip: text to be shown when mouse hovers over comment
txtAnonymous: "Anonymous" username localized, or empty if English text "Anonymous" is to be used
getTitles: if true, fetch titles from post feed; if false, titles are generated from url
trueAvatars: if true, uses Blogger avatars (Blogger profile images) from comment feed, not just the blogger favico [B]
urlMyAvatar: especially if trueAvatars = false, set here the url to your avatar image
urlMyProfile: if you don't have a profile gadget on page, put your profile url here!
urlAnoAvatar: anonymous avatar, you can change from mystery man to a custom one, if you want, possibly this
maxResultsPosts: can be empty or &max-results=### where ### is number of posts to get from posts feed to get titles
maxResultsComments: empty or &max-results=### where ### is number of comments to get from comments feed
New configurable variables in "Son"
cropAvatar: crop avatar to square (true) or stretch (false) to square
sizeAvatar: size of avatar in x and y direction, pixels
urlNoAvatar: comment feed offers the
icon (Blogger logo) for those Bloggers who have not set their profile image. You can override the icon with this setting (default: 
).txtWrote, txtMore and txtTooltip
These can be just normal text. If txtWrote is normal text, it is preceded by commenter name. So if txtWrote is "wrote..." the result would be Jason wrote..., if Jason was commenting.
All texts can also have simple variables, which are: [title], [user], [date], [time], [datetime] and [date format]. [title] is substituted by Post title, where comment belongs. [user] is substituted by commenter name. [date] displays date in current (user's computer's) locale, [time] displays time and [datetime] date and time in user's locale.
format in [date format]
In format some character combinations are substituted:
yyyy=long year, yy=short year, MM=month(01-12), dd=monthday,
hh=hour, mm=min, ss=sec (time/hours in 24-hour clock)
but format can contain also other text/characters (which are displayed as is).
"Written [date MM/dd/yyyy hh:mm]" could become "Written 11/03/2011 08:30".
Again, the script has good configuration defaults, so if all this was too complicated for you, you don't have to care about it. If you don't have a profile gadget on your page, put your profile url in the code I provided, and you're ready to go. If you have a profile gadget, then you don't have to change anything, just copy and paste.
Styles for different avatar sizes
Default size for avatar is 16 pixels. If you change, the CSS might need some adjusting. In the picture in the beginning of this post there are three examples, first the default (16 pixels), then 20 pixel avatars, and then 24 pixel avatars.
Styles for 20 pixel avatars:
... var sizeAvatar = 20;
Styles for 24 (and larger) avatars:
... var sizeAvatar = 24;
This gadget is installed on this blog with 16 pixel avatars. My MS-potilas blog has this gadget with 20 pixel avatars.
If you set the urlNoAvatar, you might want to change the
icon also in the comments block, where the actual comments are (below the post). I have a hack for that, too, see: Use new blank Blogger profile picture in comments.
Problems in Internet Explorer?
By default many Blogger templates have set Internet Explorer to use EmulateIE7. IE7 emulation has some bug with blog feeds in foreign languages that can make the gadget not show properly. You can fix this by editing the template, find line:
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>(or something similar with text "EmulateIE7"), and change it to:
<meta content='IE=EmulateIE8' http-equiv='X-UA-Compatible'/>
Update Jan 2nd 2012: Deleted comments (This post has been removed by the author.) no longer have "alternate" link in comment feeds, like they used to, which can cause the recent comments to disappear. I modified the script to prevent this: line 124 is modified and line 131 is new.
June 6th 2012: Optional hack: If you don't want to show your own comments in recent comments, check this hack.
August 1st 2017: To fix avatars, please change lines 157 and 158 (article code is updated).
Subscribe to:
Posts (Atom)
Posts (Atom)
