Journal

Broken WordPress dashboard links

Is your WordPress dashboard acting weird after the 4.3 update? With fonts in the menu overlapping and generally looking weird?

If so, that means you’re using Chrome browser and it’s a browser bug and not the website’s fault. Here’s a quick fix to bring everything back to normal.

 

Go to:

chrome://flags/#disable-slimming-paint

(you need to copy this link to a new browser window it will take you to an advanced settings page of your browser)

and click the Enable link below the Disable slimming paint on top. Don’t change the section below it, see the image.

 

This is how you want it to look like when you’re done:

wordpress-disable

After that click the Relaunch now button on the bottom of the page and you’ll be back in no time.

 

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:

 

more_link

 

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 {
 position:absolute;
 top:0;
 left:0;
 width:100%;
 height:100%;
 text-indent:-999px;
 z-index:5;
}

.jump-link:before {
 position:relative;
 z-index:4;
 color:white;
 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:

layout

 

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)

labels

 

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

labels-settings

 

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:

layout-cleanup

 

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:

edithtml

 

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):

jumptowidget

 

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:

customCSS

 

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

newPage

 

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='http://code.jquery.com/jquery-1.10.1.min.js' ></script>
 <script type='text/javascript'>
 /*<![CDATA[*/
  if($('#labelsList').length > 0)
  $('#Label1 .widget-content').appendTo($('#labelsList'));
 /*]]>*/
 </script>
 <!-- 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:

final-layout

 

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.

menu

 

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

final-page-700x438

 

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?