New Pinterest Blogger Gadget

Use this generator to create the code of a pinterest feed and then copy and paste the code to the HTML gadget in the sidebar that is called Latest Pins.

Pinterest board:
(You can leave this blank if you want to show the latest pins from all boards.)


Blogger “Read more” link on posts

You can have your Blogger display whole posts on the home page or just a snippet with a Read more link.

To have a whole post displayed – just write your post as you usually do.

But if you want to have a Read more button present that takes you to the whole post, do the following:




Inside your post editor, place the cursor in place where you want the post snippet to end. Everything that’s above will be displayed on the blog home page, the rest only on a post page. Click the Insert jump break button above the editor. You’ll see that a new line appears in the editor marking the cut.

That’s it! Save the post, you’re done! Enjoy the result with your favourite coffe ;-)


Advanced use

To style the Read more link that will appear use these CSS classes:

.jump-link{ /* this is the whole div class */
.jump-link a{ /* only the link */
.jump-link:hover a{ /* link on mouse over */

You could do something like this for example:

.jump-link {
 background: black;
 display: inline-block;
 padding: 5px 10px;
 position: relative;

.jump-link a {

.jump-link:before {
 content: "Continue reading!";

So the read more button will appear this way:

continue reading

Notice that we’ve changed the text of the button and we didn’t have to modify the template file for that! Hurray!

PS. Of course add your CSS code on the Advanced tab of the Blogger Template Designer and not in the template code itself. Stay away from the code until there’s really no other way ;-)

Automatic Labels list on a blogger page

Have you ever wondered how to create a Blogger page that will show you an automatic list of labels used on your blog? It’s actually quite easy and I’ll show you how to do it.


First we need the Labels box. Go to Layout page of your Blogger dashboard and click Add a Gadget button somewhere to open up a widget list:



In this tutorial I’ll be using our Noir Blank Blogger template that has a 3 column layout, but you can use whatever template you have as this solution is compatible with most of the Blogger templates.

Ok, so choose a Labels gadget: (it’s down there! but use a cmd+F or ctrl+F to find it quicker)



You can leave the default settings of the Labels widget or choose whatever you want here. I left the default ones.



Now, let’s move the new widget below the post. This part is not necessary, but will keep our Layout page tidier and it will be easier to locate the Labels gadget to hide if we have more than one:



Next part is making sure that it doesn’t show up for all of the pages. We’ll do that by finding out it’s HTML id and hiding it altogether.

Go to Template page of your dashboard and click the Edit HTML button below the template preview:



There, find the Label widget that is placed below the Blog1. I haven’t had a Labels gadget before so my gadget is Label1 (in your case it might be Label2):



Remember your number!

Now, let’s hide the whole gadget. To do that, we’ll go to Custom CSS part and add this short CSS snippet. Change the number in Label1 to whatever you found out in the previous step:

#Label1{ display: none;}

Here’s the whole process:



It’s hidden now, so let’s create a new page for the Archive and make it visible there. Creating a page is easy. Go to Pages in the Blogger dashboard and click New Page, give it a name: Archive or any other you like ;-)



Switch the page editor to HTML and add this line of code:

<div id="labelsList"></div>

You can also remove the comments on that page if you like, by clicking the cog wheel icon on the right side and choose Don’t allow, hide existing for comments.

Now, let’s get back to Layout page and add one more widget, but this time an HTML widget in which we’ll add script to copy the Labels to the page content. This is what you should copy and paste to the new HTML widget: (Notice the Label1 which you should change to your label number)

<script src='' ></script>
 <script type='text/javascript'>
  if($('#labelsList').length > 0)
  $('#Label1 .widget-content').appendTo($('#labelsList'));
 <!-- Labels page -->


You can place the new HTML widget wherever you want, I put it below the Labels to remember what it’s used for. This is my final layout with the new HTML gadget marked:



The last thing you should do, is to add a link to your new page to the menu. I have the Pages box below the blog title, so I just click the Edit button on it and mark Archive page to be added to the list and then reorder the pages in the menu.



That’s it! Enjoy your Archive page! Here’s my final result:



Let me know in the comments if you have any questions!


Fix a blurry Blogger Profile Image

Since a few days ago profile pictures on some blogs have started to look blurry. This happened as Blogger changed the default size of the Profile image and now shows a very small 80×80 picture that is later scaled to fit the sidebar and that’s why it’s blurry.

To fix it, we need to change the size of the image taken from Blogger servers. Here’s a simple code, that you need to add to your blog as an HTML/JavaScript gadget (preferably in the sidebar or footer), but wherever you place it, do it BELOW the profile image for it to work. Thank you Shelley for noticing that.

<script type="text/javascript"> var img = document.getElementsByClassName("profile-img"); img[0].setAttribute("src", img[0].getAttribute("src").replace(/s\B\d{2,4}/,'s' + '256-c')); </script>

Copy the code and paste it to a new HTML gadget and you should be all set! Leave the title field empty as you don’t want to have it visible on the blog, do you?