Showing posts with label Blogger. Show all posts
Showing posts with label Blogger. Show all posts

How (and Why) to No-Index Archive Pages in Blogger


Don't Bore Google - No-Index Archive Pages in Blogger

When I checked how many webpages from were indexed in Google, I was a bit surprised.

We have 741 Blog Posts published so far and I noticed that 2150 webpages were indexed in Google - see screenshot below.

Number of Webpages Indexed in Google

Tip: To see how many of your webpages are indexed in Google, simply type "" in Google.

Continue Reading

Animated Zoom With Caption Effect For Pictures On Blogger


CSS3 Logo 3D Blue
OK we all love image effects and we love them even more when they can be achieved using just CSS with no need for Javascripts.This effect not only added a neat slide out caption to your pictures but also the image will darken and zoom behind the caption.Check out the link to the demo below (Just hover over the Spice Up Your Blog screenshot on the demo page) and then I will show you just how easy it is.Make sure to watch the video tutorial at the foot of the post to see the effect being added to the demo.

Add Zoom Caption To Blogger

Continue Reading

How To Embed A Facebook Status On Your Blog


In November last year I showed you How To Embed Tweets In Your Blog Posts followed in March this year with How To Embed Instagram Photos on your Blog Posts.In this post I will follow up with Embedding Facebook Status in your blog.Similar to Twitter and Instagram embedding a status from Facebook could not be easier.This will work on Blogger, WordPress or any blog platform that allows you to use HTML in your posts.

So why embedd a Status from Facebook on your blog ? As I had pointed out in the Embedd Tweets post you may want to quote a tweet or show reactions from Twitter on a certain subjectthe same goes for Facebook .For me embedding the status is much better than simply quoting the text.

When you embed a status as I have done from the Spice Up Your Blog Facebook page below a number of options are added.Note how people can like the page in the top right, the time date and reactions are also displayed.Finally you can comment, Like and Share the status from within the post.

Post by Spice Up Your Blog.

How To Embed A Facebook Status On Your Blog

Continue Reading

How To Change The Comment Font Face And Color On Blogger


As usual the inspiration behind this post is from a blog I was working on.I was actually finished the job when the blog got it's first comment (Always Exciting) it was only then we realised the comment font color clashed with the background color making it very hard to read.Take a look at the screenshot below to see how the font color is off white (#f8f8f8) making it clash with the white background.Of course you might just want to give your comments some style and a cool font.

Previously you could change the comment font via the template designer but that option was lost when threaded comments became available.So for this I will use the same Process as Southern Speakers did when the Threaded comments first appeared.

We will add some code to your template to make the comment font once again available to edit in the template designer.This is what we get :

First we will add the code that will allow you to edit the Comment font in the template designer.

Continue Reading

Allow Mobile Touch Screen Pinch To Zoom On Your Blogger Blog


Pinch To Zoom
I had just finished a design job on a Blogger blog when we came across a problem I had not encountered before.While checking how the blog looked on mobile devices such as the iPad, I found I could not use Pinch To Zoom.I'm sure you will all have used some form of a touch screen mobile device with pinch to zoom so now how important it is.

I had believed all sites automatically allowed pinch to zoom on mobile so I needed to find a way to fix the problem.

The solution I came up with was a meta tag I could add to the template that would :

1. First Set the blogs default size on Mobile devices : initial-scale=1.0

2. Second specify that Mobile users could zoom : user-scalable=yes'

3. Third set the minimum and maximum scale : maximum-scale=12.0, minimum-scale=.25,

With this meta tag added to the blog we then had no problem using pinch to zoom on the iPad and Android tablets.With such a high percentage of Internet users using mobile devices I would recommend checking your blog has pinch to zoom enabled.If not here is how you can add our meta tag.

Allow Pinch To Zoom On Your Blog

Continue Reading

Automatically Post Your YouTube Videos On Wordpress And Blogger


Connect YouTube Wordpress Blogger Logos
I know many bloggers have YouTube channels and like to post their YouTube videos on their blog.So in this post I will show you how can automatically post YouTube videos on your blog.Using IFTTT I have created two recipes to do just that, auto post any video you upload to YouTube to your blog on either Blogger or Wordpress.As well as this the Video title from YouTube will be used as the post title and the video description will be used as text within the post.

So; IFTTT is a site you can use to connect social accounts, online services, feeds, email and more.When we connect two of these services it is called a "recipe".I created a recipe wherein you can connect your YouTube account with your Wordpress blog and another were you can connect your YouTube account with your Blogger blog.I have tested both and once connected YouTube uploads are posted on your blog within minutes.I then made these recipes public so anyone can use them.

I have a video tutorial below along with links to both recipes for you to connect your blogs with your YouTube channel.

Video Tutorial

Continue Reading

Top 20 Best Premium Blogger Templates


We have created some fantastic lists of Free Blogger Templates, indeed they are some of the most viewed posts on the entire site.But what about Premium Blogger Templates, templates that require a fee ? For a long time I never even considered listing a collection of Premium Blogger templates.There was for the last few years Premium templates out there but in my opinion they did not offer enough more quality than free templates to warrant a fee.

But all that has changed, over the last year I have seen a number of designers selling premium templates that really are a cut above the rest.Yes the free templates are still good and some extremely good but many of the premium templates now being released have the extra quality and features that are worth a the lousy few bucks they charge (No template listed below costs more than $20).

I have actually worked with a few of these templates and it was while working with the first on the list I finally decided to bite the bullet and do the list.So here it is I have linked to the demo's and you can click on Full Details to get all the info on each template.

20 Best Premium Blogger Templates


Price $20
Masala is a template I have worked with and It's excellent.A bright fresh color scheme with a two column right sidebar layout.The template comes in two styles as you will see in the demo page, both a post list and portfolio style.In the sidebar is social icons with follow counters.A top menu, footer columns, author section and related posts are among the other features.

Malasa Template

Continue Reading

How To Automatically Hide Spam Links In Blogger Comments


Spam Comments Computer Keyboard Stock Image
Comment spam is a major issue for all bloggers.We all love comments and they can be the life blood of a blog but spam can be hard to control.Even comments that look OK can contain spam links, especially on Blogger were when moderating comments you can not see if any of the text is a link.So in this post I have two ways to ensure your the comments on your blog will not contain spam links.Not only will it remove the links from any future comments but it will also remove all links from past comments.

We have two options :

CSS - First a small piece of CSS that will completely remove links left in comments.With the CSS the anchor text that make the link (the clickable words) will be completely removed the rest of the comment will remain.

jQuery - Second we have a small piece of jQuery script that will leave the anchor text that make the link (the clickable words) but they will no longer be a link or clickable.

Cool Ehh ? I had used the CSS for some time (Yes spammers ye have been wasting your time) but have now switched to the jQuery.Check out the video tutorial to see more on how each works then It's your choice on how you want to go.The codes needed are below the video.

Continue Reading

How To Stop Sites From Opening Your Blog In A Frame


OK this is another post that comes from a readers question.They said "I use Networked Blogs to auto share my posts on Facebook but when you click the link on Facebook it shows the page with a bar at the top and a different URL".

This is in fact called a frame and some websites display pages from other sites within a frame, Stumble Upon would be a good example as indeed is Networked Blogs.While I feel Stumble Upon has a reason for this many websites do it to keep people on their site, some even take credit for your content.


In the first image you see how the blog usually looks :

Here we see the blog within the Networked Blogs frame.In the address bar you can see the URL is Networked Blogs (In Green) and a bar runs across the top of the page (In Red) :

We can fix this and add a line of script to your template that detects when your blog is being placed in a frame and overrides the frame.This tutorial is for Blogger Blogs but the code will work on any site.

Stop Your Blog Opening In A Frame

Continue Reading

How To Change The Blogger Navbar To A Slide Out Effect


Blogger Navbar
One of the first ever posts on this blog was How To Remove the Blogger Navbar (Indeed it was September 2009).Since then we have been given the option to remove it without the need for code.But many bloggers like the navbar so we looked to styling rather than removing with tutorials like Peek-a-boo hover navbar and Move the navbar from the top to the bottom of the page.

In this post I have a brand new modern style you can use on your blogs navbar, the slide out.Slide out menus have become popular in modern web design so why not ? The slide out navbar will be simply the blogger logo in the top corner of the screen but on hover it will slide out to full size.It's an easy trick to implement and I have a video tutorial at the end below the code if your having trouble.

Take a look at the demo below :

Note : You will see the small logo in the top corner simply hover your cursor over it for the magic, after a few seconds it will slide back.If you keep your cursor over then navbar it will not slide back, otherwise you can set the time for how long it stays open.

Continue Reading

Hire Us