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!
Wednesday, November 27, 2013
Monday, September 9, 2013
45
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
11
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! :)
Monday, January 21, 2013
14
How to easily host web content on Google Drive
This article is deprecated, here's a message from Google:
Last November (2012) Google announced that Google Drive can now host static web content, for example html pages, javascript files, and flash. Here's the article where they announced this: Announcing Google Drive Site Publishing, and here's the documentation: Google Drive SDK.
It all looks very good, you can programmatically make shared public folder for hosting and add content. But what if I just wanted to host some .js (javascript) files which I have ready? Must I write a program to implement this hosting? Fortunately, I don't.
Hosting web files on Google Drive
First you have to create a directory in your drive. It can be a subdirectory (of a non-shared directory), for example in the root I have sub directory "Web Hosting" (private dir) which has all the public web hosting directories I have made.
/Web Hosting
--/Google Drive hosting url tool
--/Some Other Web Project
--/etc...
After you have created the directory, you can upload files there. When you want to begin hosting those files, select "Share..." for the directory, and under "Who has access" change the directory to be public on the web. Copy the "Link to share" url from the sharing dialog.
To get the web hosting url, use this tool ("Google Drive hosting url tool" hosted under my Google Drive):
You can make the url manually, or use the Drive API and "webViewLink", but I made this simple javascript tool for the job. It is a hosting example at the same time.
Other options for web hosting with Google products
You can also use Google Sites to host your files. Google App Engine can be used, too, but that is a bit more compilicated.
Some tips for hosting on Google Drive
Thanks to Ben for the article idea. :)
Update May 6th 2013:
Updated the tool to handle the new Google Drive sharing urls.
Hello from Google,
We announced last year that we’re deprecating web hosting in Google Drive for users and developers. Our records show that you might have used this feature to publish a webpage or serve other web assets.
On Aug 31, 2016, we will discontinue serving content via googledrive.com/host/[id] and the webpages will not be accessible anymore.
As an alternative to web hosting in Drive, we recommend:
- Blogger—An easy and free way to host websites.
- Firebase Hosting— An alternative if you’re using the web-hosting feature to serve static webpages with items on Drive.
If you have additional questions or need assistance, please contact Google Support.
Sincerely,
The Google Apps Team
Last November (2012) Google announced that Google Drive can now host static web content, for example html pages, javascript files, and flash. Here's the article where they announced this: Announcing Google Drive Site Publishing, and here's the documentation: Google Drive SDK.
It all looks very good, you can programmatically make shared public folder for hosting and add content. But what if I just wanted to host some .js (javascript) files which I have ready? Must I write a program to implement this hosting? Fortunately, I don't.
Hosting web files on Google Drive
First you have to create a directory in your drive. It can be a subdirectory (of a non-shared directory), for example in the root I have sub directory "Web Hosting" (private dir) which has all the public web hosting directories I have made.
/Web Hosting
--/Google Drive hosting url tool
--/Some Other Web Project
--/etc...
After you have created the directory, you can upload files there. When you want to begin hosting those files, select "Share..." for the directory, and under "Who has access" change the directory to be public on the web. Copy the "Link to share" url from the sharing dialog.
To get the web hosting url, use this tool ("Google Drive hosting url tool" hosted under my Google Drive):
You can make the url manually, or use the Drive API and "webViewLink", but I made this simple javascript tool for the job. It is a hosting example at the same time.
Other options for web hosting with Google products
You can also use Google Sites to host your files. Google App Engine can be used, too, but that is a bit more compilicated.
Some tips for hosting on Google Drive
- Don't upload multiple files with same name (like two copies of index.html) under the same directory. Use the "Manage revisions" option.
- You can use subdirectories under your web hosting directories.
- Do you have a good tip for Google Drive hosting? Please post it as a comment.
Thanks to Ben for the article idea. :)
Update May 6th 2013:
Updated the tool to handle the new Google Drive sharing urls.
Friday, August 31, 2012
8
Small update to my threaded comments hack v2
If you have my threaded comments hack v2 installed, and it stopped threading the comments, it is because Blogger changed the navbar iframe src attribute handling. Seemed to happen yesterday. To fix that, edit the template and find line 235 of the hack, which used to be:
and change it to:
(all in one line)
The source code has been updated in the hack's article.
var cfeedbase = 'http://'+window.location.hostname+'/feeds/'+$("#navbar-iframe").attr("src").match(/targetPostID=([^&]*)/)[1]+'/comments'and change it to:
var cfeedbase = $('link[href$="comments/default"]').attr("href").split("/default")[0];(all in one line)
The source code has been updated in the hack's article.
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!
Monday, June 11, 2012
3
Contact Form added
I added a new page containing a contact form to this blog. I use EmailMeForm service, which I already have used before in another blog of mine. EmailMeForm is free up to 200 form submissions per month and up to 5 different forms.
Link to the contact form can be found below the header, at the moment there are links to Home (main page) and Contact form.
Link to the contact form can be found below the header, at the moment there are links to Home (main page) and Contact form.
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
17
Profile Gadget with avatars and post counts
This is especially for multi author blogs. In multi author blog the profile gadget is very simple looking. It only contains author names in <ul>/<li> list. There is "avatar" but that is the default blogger logo.
My multi author blog profile gadget looks like this:
It works on single author blogs, too, and one could customize it to look about the same as the default single author blog profile gadget, but I'll leave that for you as an exercise. :)
Installation is simple. Add HTML/Javascript gadget into your blog, and paste the following code there:
You can configure some things in the script: maximum user name length, author line template, avatar size, and is avatar cropped or streched. As always, you can also modify the CSS to your liking.
This was "thrown together" very quickly, but it works ok so I decided to publish it. Hope you like it.
My multi author blog profile gadget looks like this:
It works on single author blogs, too, and one could customize it to look about the same as the default single author blog profile gadget, but I'll leave that for you as an exercise. :)
Installation is simple. Add HTML/Javascript gadget into your blog, and paste the following code there:
You can configure some things in the script: maximum user name length, author line template, avatar size, and is avatar cropped or streched. As always, you can also modify the CSS to your liking.
This was "thrown together" very quickly, but it works ok so I decided to publish it. Hope you like it.
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.
Friday, May 25, 2012
0
Extending Yahoo! Pipes with Google App Engine
In my Uploads and Favorites pipe I wanted to turn the timestamps into so called "humanized dates", like these six examples:
23 seconds ago
1 minute ago
4 hours ago
2 days ago
7 months ago
1 year ago
This could not be done by using only Yahoo! Pipes.
Google App Engine to the rescue
Yahoo! Pipes can be extended using a web service, which accepts the feed items as json, and outputs them (after changes) as json. I used this blog article Using Google App Engine to Extend Yahoo! Pipes as a starting point. Django framework has date humanizing functions coded in Python, and I borrowed those functions from there. Then I created a new Google App Engine application "humandate", and made files app.yaml and humandate.py.
app.yaml
humandate.py
I put these two files in a directory called "humandate" under my Google App Engine directory, with favicon.ico (the GAE default icon), and the development environment is ready. I now can deploy the application using "./appcfg.py update humandate/" or test it locally using "./dev_appserver.py humandate/", then the app runs at http://localhost:8080.
Testing the date humanizer
I made also an url based interface to "humandate" in addition to Yahoo! Pipes json interface. Url based interface works by giving a unix timestamp as "unixtime" parameter, like this. This made testing the date humanizer easier.
Using the service in Yahoo! Pipes
This service expects items to have y:published.utime field present. Service reads it from every item, turns it into a humanized date, and makes a new field "when" containing the humanized date. Then the service returns the items back to pipes.
See also my previous article about the four youtube pipes I've made (one of them uses this humandate, and one uses it indirectly). And have fun with Google App Engine and Yahoo! Pipes.
23 seconds ago
1 minute ago
4 hours ago
2 days ago
7 months ago
1 year ago
This could not be done by using only Yahoo! Pipes.
Google App Engine to the rescue
Yahoo! Pipes can be extended using a web service, which accepts the feed items as json, and outputs them (after changes) as json. I used this blog article Using Google App Engine to Extend Yahoo! Pipes as a starting point. Django framework has date humanizing functions coded in Python, and I borrowed those functions from there. Then I created a new Google App Engine application "humandate", and made files app.yaml and humandate.py.
app.yaml
humandate.py
I put these two files in a directory called "humandate" under my Google App Engine directory, with favicon.ico (the GAE default icon), and the development environment is ready. I now can deploy the application using "./appcfg.py update humandate/" or test it locally using "./dev_appserver.py humandate/", then the app runs at http://localhost:8080.
Testing the date humanizer
I made also an url based interface to "humandate" in addition to Yahoo! Pipes json interface. Url based interface works by giving a unix timestamp as "unixtime" parameter, like this. This made testing the date humanizer easier.
Using the service in Yahoo! Pipes
This service expects items to have y:published.utime field present. Service reads it from every item, turns it into a humanized date, and makes a new field "when" containing the humanized date. Then the service returns the items back to pipes.
See also my previous article about the four youtube pipes I've made (one of them uses this humandate, and one uses it indirectly). And have fun with Google App Engine and Yahoo! Pipes.
Thursday, May 24, 2012
0
Yahoo! Pipes, pipes, and more pipes for YouTube
Lately I've been playing around with Yahoo! Pipes and learned some new things. I already presented the YouTube Activity Feed, which I've cleaned up a little. And I've made three more pipes.
YouTube Activity Feed
Pipe ID: 58c841d14337ba4fbf693abd9701dc49
Pipe Web Address: http://pipes.yahoo.com/mspotilas/youtubeactivityfeed
Here's my previous article about this feed. YouTube API 2.0 does provide activity feeds, but you need to register an application to get developer key. My idea was to read the same info from user's channel feed page in html, parse the html and republish as a feed, and YouTube Activity Feed pipe does that.
As html parsing is quite complex task, if YouTube changes the feed page structure a lot, this pipe might break. I'll probably try to fix it if that happens.
YouTube Likes Feed
Pipe ID: a58d86555f7eb396e73d58ff50edc8f1
Pipe Web Address: http://pipes.yahoo.com/mspotilas/youtubelikesfeed
Same idea as in Youtube Activity Feed, but it gets only "liked videos" from the channel feed page. It is a bit simpler to parse only the likes. Also with this pipe, if YouTube changes the feed page a lot, the pipe might break.
YouTube Uploads and Favourites
Pipe ID: 0c2ee991c8d94ed0ceb19865c252e047
Pipe Web Address: http://pipes.yahoo.com/mspotilas/youtubeuploadsfavoritesfeed
YouTube has gdata feeds for user uploads and user favorites.
http://gdata.youtube.com/feeds/base/users/USERNAME/uploads?alt=rss&v=2
and
http://gdata.youtube.com/feeds/base/users/USERNAME/favorites?alt=rss&v=2
This pipe combines these two feeds, descriptions will be for example "2 days ago USERNAME favorited" or "1 hour ago USERNAME uploaded". The tricky part was to get this humanized date "2 days ago" derived from feed item's timestamp. It could not be done in Pipes only, so I extended its functionality with a web service I coded into Google AppEngine. It goes through the list, converts "y:published.utime" to humanized date like "2 days ago" and stores it in field "when" and returns the list back to pipes. Here's an article about the web service: Extending Yahoo! Pipes with Google App Engine.
This pipe should be robust, as it uses feeds as source, not page html.
YouTube Feed
Pipe ID: 73c5ee4a46e1837d908deaa60b1858d2
Pipe Web Address: http://pipes.yahoo.com/mspotilas/youtubefeed
This fourth pipe simply combines Uploads and Favourites and Likes Feed. Structure is very simple. Output is something similar to YouTube Activity feed, but it does not contain comments, playlist additions nor channel subscriptions. But sometimes simpler is better.
All pipes are compatible with my gadget which works also on Opera (Yahoo! Pipes badge does not). Just change the pipe ID (_id) to use a different pipe.
Feel free to examine these pipes, you can also make clones which you can modify. Comments are welcome, too. :)
YouTube Activity Feed
Pipe ID: 58c841d14337ba4fbf693abd9701dc49
Pipe Web Address: http://pipes.yahoo.com/mspotilas/youtubeactivityfeed
Here's my previous article about this feed. YouTube API 2.0 does provide activity feeds, but you need to register an application to get developer key. My idea was to read the same info from user's channel feed page in html, parse the html and republish as a feed, and YouTube Activity Feed pipe does that.
As html parsing is quite complex task, if YouTube changes the feed page structure a lot, this pipe might break. I'll probably try to fix it if that happens.
YouTube Likes Feed
Pipe ID: a58d86555f7eb396e73d58ff50edc8f1
Pipe Web Address: http://pipes.yahoo.com/mspotilas/youtubelikesfeed
Same idea as in Youtube Activity Feed, but it gets only "liked videos" from the channel feed page. It is a bit simpler to parse only the likes. Also with this pipe, if YouTube changes the feed page a lot, the pipe might break.
YouTube Uploads and Favourites
Pipe ID: 0c2ee991c8d94ed0ceb19865c252e047
Pipe Web Address: http://pipes.yahoo.com/mspotilas/youtubeuploadsfavoritesfeed
YouTube has gdata feeds for user uploads and user favorites.
http://gdata.youtube.com/feeds/base/users/USERNAME/uploads?alt=rss&v=2
and
http://gdata.youtube.com/feeds/base/users/USERNAME/favorites?alt=rss&v=2
This pipe combines these two feeds, descriptions will be for example "2 days ago USERNAME favorited" or "1 hour ago USERNAME uploaded". The tricky part was to get this humanized date "2 days ago" derived from feed item's timestamp. It could not be done in Pipes only, so I extended its functionality with a web service I coded into Google AppEngine. It goes through the list, converts "y:published.utime" to humanized date like "2 days ago" and stores it in field "when" and returns the list back to pipes. Here's an article about the web service: Extending Yahoo! Pipes with Google App Engine.
This pipe should be robust, as it uses feeds as source, not page html.
YouTube Feed
Pipe ID: 73c5ee4a46e1837d908deaa60b1858d2
Pipe Web Address: http://pipes.yahoo.com/mspotilas/youtubefeed
This fourth pipe simply combines Uploads and Favourites and Likes Feed. Structure is very simple. Output is something similar to YouTube Activity feed, but it does not contain comments, playlist additions nor channel subscriptions. But sometimes simpler is better.
All pipes are compatible with my gadget which works also on Opera (Yahoo! Pipes badge does not). Just change the pipe ID (_id) to use a different pipe.
Feel free to examine these pipes, you can also make clones which you can modify. Comments are welcome, too. :)
Monday, May 21, 2012
10
Another gadget for YouTube Activity Feed, works with Opera
Few days ago I finished making my first Yahoo! Pipe, which collects info from YouTube channel feed page, and republishes that info. Yesterday I noticed, that Yahoo! Pipes badge output does not support Opera – with Opera, nothing is shown. It is strange that Yahoo does not fix this, maybe it is because Pipes is a free product. About 3 % of my blogs readers use Opera.
I knew I could make a gadget that works on Opera, too. Yesterday evening I coded first a javascript version, and today morning a little tidier jQuery version.
Installation is simple: add an HTML/Javascript gadget and put the following code in it:
You can leave out the first line, if your template already loads jQuery. Make necessary configuration changes (change YouTube user name, for example). I did only very basic CSS, you can of course modify it to your liking. Code can be used also outside Blogger (in any html page).
I knew I could make a gadget that works on Opera, too. Yesterday evening I coded first a javascript version, and today morning a little tidier jQuery version.
Installation is simple: add an HTML/Javascript gadget and put the following code in it:
You can leave out the first line, if your template already loads jQuery. Make necessary configuration changes (change YouTube user name, for example). I did only very basic CSS, you can of course modify it to your liking. Code can be used also outside Blogger (in any html page).
Friday, May 18, 2012
5
I've had this idea for some time: somehow republish YouTube channel activity feed page as an RSS feed. So you could get a view of your latest YouTube activity in your blog, for example. This week I finally implemented a version of this using Yahoo! Pipes. This is a completely new gadget for Blogger, I have not seen anything like this before. You can use the pipe gadget output on WordPress and other internet pages, too. And you can get the RSS address for the pipe to connect it with various services and/or applications.
Link to the pipe: pipes.yahoo.com/mspotilas/youtubeactivityfeed.
And here's the "badge output" of that pipe from my youtube feed page, with 5 items:
This can be put into a sidebar gadget, like I've done in YABTB demo blog. The code to put inside an HTML/Javascript gadget is simple:
You may also use the "Get as a Badge" link when the pipe is run in the pipe's page, it offers an automated gadget installation into Blogger blogs, WordPress blogs and others.
Update May 21th: Because Badge output does not work with Opera browser, you might consider using instead a gadget made by me, which works with Opera.
Parameters of the pipe:
user: youtube user name,
max-results: maximum number of items returned,
allow: only accept entries that have this word in description, for example "liked" to get only likes or "uploaded" to get only uploads,
disallow: don't allow entries that have this word in description, for example "commented" to filter out commenting activity.
So at minimum you just have to change the user parameter value from "mspotilas" to any youtube user name you want (it does not have to be yours, try for example "NBC"). In my YABTB demo blog, to show what can be done with CSS styles, I also changed background colors, adjusted font sizes and margins, changed thumbnail to right side, changed thumbnail proportions (size), and hid the footer (powered by and get this), like this:
There is also a YouTube RSS feed, but... YouTube gdata feed for YouTube channel includes only uploads. No likes, favourites, comments, etc. Link to YouTube user's RSS feed of uploads is:
For example my YouTube channel's RSS feed is:
This is my very first Yahoo Pipe, so the implementation might be a bit clumsy. But it works, at least in my tests. :) You can clone the pipe and modify it according to your needs, or use this pipe if it suits you as is. If you like it, or find some bugs or something to improve, please tell me.
Update May 20th: I found out that Opera browser is not supported by Yahoo! Pipes. :( I think I could make a gadget for the pipe which would work in Opera, too, but I'm not sure if I will. About 3 % of my blog's viewers do use Opera.
Update May 21th: Here's the gadget I made, works with Opera, too.
Yahoo! Pipe to show YouTube activity feed in Blogger, WordPress, etc.
Link to the pipe: pipes.yahoo.com/mspotilas/youtubeactivityfeed.
And here's the "badge output" of that pipe from my youtube feed page, with 5 items:
This can be put into a sidebar gadget, like I've done in YABTB demo blog. The code to put inside an HTML/Javascript gadget is simple:
You may also use the "Get as a Badge" link when the pipe is run in the pipe's page, it offers an automated gadget installation into Blogger blogs, WordPress blogs and others.
Update May 21th: Because Badge output does not work with Opera browser, you might consider using instead a gadget made by me, which works with Opera.
Parameters of the pipe:
user: youtube user name,
max-results: maximum number of items returned,
allow: only accept entries that have this word in description, for example "liked" to get only likes or "uploaded" to get only uploads,
disallow: don't allow entries that have this word in description, for example "commented" to filter out commenting activity.
So at minimum you just have to change the user parameter value from "mspotilas" to any youtube user name you want (it does not have to be yours, try for example "NBC"). In my YABTB demo blog, to show what can be done with CSS styles, I also changed background colors, adjusted font sizes and margins, changed thumbnail to right side, changed thumbnail proportions (size), and hid the footer (powered by and get this), like this:
There is also a YouTube RSS feed, but... YouTube gdata feed for YouTube channel includes only uploads. No likes, favourites, comments, etc. Link to YouTube user's RSS feed of uploads is:
http://gdata.youtube.com/feeds/base/users/youtubeusername/uploads?alt=rss&v=2&orderby=published
For example my YouTube channel's RSS feed is:
This is my very first Yahoo Pipe, so the implementation might be a bit clumsy. But it works, at least in my tests. :) You can clone the pipe and modify it according to your needs, or use this pipe if it suits you as is. If you like it, or find some bugs or something to improve, please tell me.
Update May 20th: I found out that Opera browser is not supported by Yahoo! Pipes. :( I think I could make a gadget for the pipe which would work in Opera, too, but I'm not sure if I will. About 3 % of my blog's viewers do use Opera.
Update May 21th: Here's the gadget I made, works with Opera, too.
Wednesday, May 2, 2012
37
Top Commentators Gadget with avatars
I had a request of this gadget in one blog comment. There are some top commentators gadgets around, most relying on a Yahoo pipe. I knew it can be done with just javascript, with no pipes. Demo: it is installed on this blog, look at the right sidebar. Hope you like it. :)
Features
You can configure the maximum number of top commentators, and minimum number of comments one must have to get on the list (to weed out the 1 comment commentators, if wanted, for example). Own nick and a list of other nicks (for example "Anonymous") can be excluded from the list. Output strings can be translated.
The Script, installing
Add a HTML/Javascript gadget to your blog, and paste the following code into it.
Script configuration
There are two 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.
maxTopCommenters: how big the list is at maximum
minComments: how many comments must top commentator have at least
numDays: from how many days (ex. 30), or 0 from "all the time" (max 500 comments)
excludeMe: true, if own comments excluded
excludeUsers: array of usernames to exclude
maxUserNameLength: if 0, don't cut; if > 4, cut lenghty usernames
txtTopLine: specifies, what is output on each line. This text can have simple variables, which are: [#], [image], [user], and [count]. [#] is substituted by position on the list, [image] by commentator's avatar image, [user] by commentator name and [count] by number of comments. Text can also contain html.
txtNoTopCommenters: what to display, if list is empty
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
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
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: ).
cropAvatar: crop avatar to square (true) or stretch (false) to square
sizeAvatar: size of avatar in x and y direction, pixels
If you have very much comments (thousands and thousands of them), I suggest you to use this as "top commentators of 30 days" gadget or something like that (set numDays variable to 30), so that it won't take too long to load and calculate all the comments.
June 5th 2012: Small CSS update: Blogger changed the paddings of .profile-name-link, that's why I added this line (line 3.):
.top-commenter-line .profile-name-link {padding-left:0;}
August 1st 2017: To fix avatars, please change lines 48 and 49 (article code is updated).
Features
You can configure the maximum number of top commentators, and minimum number of comments one must have to get on the list (to weed out the 1 comment commentators, if wanted, for example). Own nick and a list of other nicks (for example "Anonymous") can be excluded from the list. Output strings can be translated.
The Script, installing
Add a HTML/Javascript gadget to your blog, and paste the following code into it.
Script configuration
There are two 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.
maxTopCommenters: how big the list is at maximum
minComments: how many comments must top commentator have at least
numDays: from how many days (ex. 30), or 0 from "all the time" (max 500 comments)
excludeMe: true, if own comments excluded
excludeUsers: array of usernames to exclude
maxUserNameLength: if 0, don't cut; if > 4, cut lenghty usernames
txtTopLine: specifies, what is output on each line. This text can have simple variables, which are: [#], [image], [user], and [count]. [#] is substituted by position on the list, [image] by commentator's avatar image, [user] by commentator name and [count] by number of comments. Text can also contain html.
txtNoTopCommenters: what to display, if list is empty
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
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
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: ).
cropAvatar: crop avatar to square (true) or stretch (false) to square
sizeAvatar: size of avatar in x and y direction, pixels
If you have very much comments (thousands and thousands of them), I suggest you to use this as "top commentators of 30 days" gadget or something like that (set numDays variable to 30), so that it won't take too long to load and calculate all the comments.
June 5th 2012: Small CSS update: Blogger changed the paddings of .profile-name-link, that's why I added this line (line 3.):
.top-commenter-line .profile-name-link {padding-left:0;}
August 1st 2017: To fix avatars, please change lines 48 and 49 (article code is updated).
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. :)
Subscribe to:
Posts (Atom)
Posts (Atom)
