How to Add Recent Posts & Recent Comments Widgets on Blogger

You may have noticed that in my sidebar I have recent posts & recent comments widgets. In Wordpress there are many plugins available to achieve this but in Blogger there is no such built in widget. These widgets are useful fir improving clicks and allowing people to easily see your recent content. This is especially useful when people land on your blog via a specific post. So I am going to show you how to add these widgets in blogger. The finished product will look like this:

How to Add Recent Posts Widget

Navigate to your blogger dashboard and select the 'layout' page. Click on add widget and select 'feed'. in the url field enter http://yoururl/feeds/posts/default.

Hit save.

Drag the widget to its desired location and click on save new arrangement.

 

How to Add Recent Comments Widget

Navigate to your blogger dashboard and select the 'layout' page. Click on add widget and select 'feed'. in the url field enter http://yoururl/feeds/comments/default.

Hit save.

Drag the widget to its desired location and click on save new arrangement.

Make sure to change the title for both widgets otherwise your blog's name will default as the widget title.

 

If you have any questions or tutorial requests just leave a comment!

 

Read More

Add a Facebook Like Button to Your Blog

So many blogs have Facebook pages these days as many bloggers have realised the effect such a page can have on your traffic. Now I am not the biggest fan of Facebook as I much prefer the functionality and feel of Google+. But as of yet Google+ doesn't offer the same access to traffic as Facebook does as it is such a new network. One of the easiest ways for people to like your page is to have a like button on your blog. Having a link to your page is all good and well but it requires your readers to visit your Facebook page and like it. A button is a much better idea because as long as they are logged into Facebook they can like your page with just one click while on your blog. I recently added a button for a client and her likes more than doubled in less than a week. So today I'm going to show you how to easily add the button and this method works for Blogger AND Wordpress.

First of all visit http://developers.facebook.com/docs/reference/plugins/like/

You'll be presented with a page that looks like this.



In the top field enter your blog's Facebook page url.

Untick the send button box as a send button is completely unnecessary.

You can choose whether to show the faces of people who liked your page.

Layout style will let you choose the design of the button. As you choose options the button design on the right hand side of the screen will change so you can preview the button before adding it.

all the other options are fairly self-explanatory.

When your happy with the design click on 'get the code'.

In the box that pops up select 'iframe'.

Select all the code and copy it (ctrl+a then ctrl+c).

Paste the code into a widget in Blogger - Dashboard>Layout>Add Gadget>HTML/Javascript. In Wordpress - Dashboard>Appearance>Widgets>Text

That is all there is to it!

Read More

Experimenting with Text Effects in Photoshop

I love photoshop! it is most widely known for photo manipulation. But it has so many other uses. I'm still pretty much a beginner but I'm learning new tricks everyday. it is important as a designer that I learn as much as possible so I spend many a day reading tutorials and putting them into practice. my favorite tutorials to follow are ones for creating funky text effects so today i've been messing around with text effects and these two images are the finished products.

 





 

In a future post I'll compile a list of some of the best sites to visit for Photoshop tutorials!

Have a great Saturday guys.

Read More

Social Media Icon Set for Fashion Bloggers

I've got a new social media icon set for you and this one is especially for fashion bloggers with the addition of Lookbook and Formspring. It is available as a zipped file so don't forget to extract the contents!

 



 

Click on the link on the next page to download!

Social Media Icons GDG

Read More

5 Easy Ways for the Non CSS Savvy to Improve Their Blog Design

I'm obsessed with blog design. You know it, I know it. A good design is vitally important. How many popular bloggers do you know who use the blogger default theme with no customisation, personally I can't name one. How your blog looks directly influences how popular it is. Now I realise that not everyone has the CSS skills that I possess but there are simple changes that you can make to substantially improve how your blog looks. I'll outline some of them in the post. Let's get down to it.

1. Streamline Your Sidebars

Really and truly the only information you need in your sidebar is your photo and about me blurb(although you could just have an about me page instead), following options, social media links, archive and categories. Any more than this is just unnecessary. Streamlining them makes your blog look more aesthetically pleasing and greatly improves page load time. One sidebar is adequate I really don't get the attraction in 3 column layouts. Many will disagree with me on the sidebar issue but it is my opinion from a design point of view.

2. A Custom Header

I do a lot of blog reading and one thing that crops up again and again is people using Blogger's default header. They are not attractive and having one demonstrates a lack of effort. Even the non tech savvy are capable of creating a header in picnik or a similar site. It really is as simple as choosing a nice font and writing your blog's name in a colour that compliments your colour scheme. it isn't a huge task and it really does make all the difference to your design.

3. Using a Custom Font

Adding a custom font used to be an arduous task only to be performed by the tech savvy but all that has changed. In Blogger's recent upgrade they added the ability to add Google Web Fonts via their template designer. So now adding a new font is a cinch. It is equally easy for Wordpress users too via the plugin Fontific. A unique looking font used on post titles and sidebar titles can really make all the difference. Just ensure that the font is easily readable. Some fonts really are a nightmare to read.

4. Complimentary Colour Scheme

Make sure to select colours that compliment each other and don't clash. Those legends over at Studiopress have created a ton of colour palettes that can show you which colours go together. Don't overdo it with bright colours though. A fuchsia pink post area with bright yellow header area is so not a good look and frankly it would hurt my eyes.

5. Customise Your Titles

You could add a background colour, or a border or whatever effect you like. You could even add an icon to the start of the titles. These two tutorials will demonstrate how to do this.

Add Image to Post Title in Blogger

Add Background Colour to Titles

Read More

Another Free Download - Cute Post Dividers

Im really spoliling you today as I'm releasing my 3rd free download in 24 hours. This time I'm offering you free post dividers to brighten up your blogs. These are quite cute and kitsch. If your not sure how to install them follow my instructions on how to add a signature to posts.

 









 

Remember if you want to download a post divider just right click on the image and save. I hope you like them.

Read More

Free Download - Custom Bloglovin' Badges

Many blogger's (myself included) choose to let readers subscribe via Bloglovin. It is a great way to stay updated and it even has an iphone app for reading blogs on the go. But the badges they provide aren't to everyon's taste. So today I'm offering a free download of some creative and elegant Bloglovin badges. There are four to choose from and they are of course free for you to use. To save the badges just right click on the badge below and select save image as. Then you'll need to upload the image to Photobucket or another image hosting platform and grab the html code. Add the code to a widget but replace the first link in the code with your Bloglovin URL or if you use Blogger you can add it as a picture and put your Bloglovin URL in the link (url) field. I hope you like them and if you use one I'd love you to leave a comment so I can check it out. Enjoy!

Read More

Free Download - Beautiful, Creative Blog Headers

A big purpose of this blog is to help other bloggers create unique lookinand beautiful blogs. The header area of a blog is the MOST important aspect of your blog's design. It is the first part of your blog that visitors see on arrival. So here I have a free download for you of header banners. They were constructed in Photoshop and will really make your header 'POP'. All you need to do is add some text and your good to go. I highly recommend choosing an eye catching font in a contrasting colour. Da Font have a great selection.

To save the banner just click on the banner and you'll be taken to the full size version, just right click on the banner and select 'save image as' to save the banner to your computer. If you do use it I'd love for you to post a link. I really do enjoy seeing how my users apply my downloads & tutorials on their own blogs.

Read More

Add Related Posts Widget to Bottom of Posts - Blogger

 

It is well known that adding a related posts widget to the bottom of your posts increases pageviews and lowers your bounce rate. Link Within is great for this as it adds a thumbnail and is super easy to add to your blog. So today I'm going to show all you Blogger users how to add it to your blog.

First of all navigate to http://linkwithin.com

Fill in your blog details on the front page.



Then click on Get Widget.

On the next page click on Install Widget.

It will now take you into Blogger. On this screen choose your blog if you have multiple ones on your account then click on Add Widget.

 



Your Linked In widget has now been added to your layout. All that is left to do is drag the widget from the top of your sidebar to the bottom.

 



 

Voila. That is all there is to it. Now all your posts will have a related posts widget at the bottom.

Read More

5 Stylish but Functional Laptop Bags

I may be a lover of tech but that doesn't mean I don't crave style too. So let me introduce you to five stylish laptop bags for transporting your laptop out and about in style. This guide has something for every budget and in varying sizes so it really does have something for everyone.

Thierry Mugler Executive Briefcase / Laptop Bag

 



This one comes from legendary French design Thierry Mugler and it is the perfect laptop bag for the working woman. It has several compartments, a zip fastener and a lock and key. It measures 42cmx31cmx16cm. It also comes with an adjustable strap.

£13.99 from Amazon

 

14 Inch Smart Parts Designer Laptop Sleeve Case Bag

 

This laptop sleeve from Play.com comes in a stylish leopard print and a zip fastening. It is suitable for laptops up to 14inches.

£14.99 from Play

 

Stylish Canvas and leather Business bag / Laptop bag from Hansson

This cute canvas laptop bag is trimmed with leather and has a 2 buckle fastening. Inside it has a pouch & zip up pockets. This bag is very versatile and it would be brilliant as a bag for both carrying your laptop or one for carrying when your out and about.

£45.99 from Amazon

 

Pink small laptop case

 



This Fiorelli laptop case includes a zip along the top and is made from pink leather with a snakeskin effect. The front has a gold and pink bow for a beautiful stylish twist. There's padding inside to ensure your laptop is perfectly protected.

£59 from Debenhams

 

Ted Baker Blyth Laptop Case, Dark Orange

 



This a rather stylish laptop case from the team at Ted Baker. Featuring vertical panelling and a gold zip and badge. This one measures H26 x W36 x D2.5cm. The patent appearance is a nice twist and I love the colour.

£49 from John Lewis

 

There you have it so now you can carry your laptop in style. No more trying to squeeze your laptop in your handbag. Which is your favorite?

Read More

Why Your Blog Design Matters?

It is obvious from the content on this site that I have a lot of love for blog design and i really do feel the design of your blog says a lot about you as a blogger.

The Blogger platform is improving but it still only offers 7 templates. While these are very user friendly & easy to use they are far from unique. As the blogosphere expands it is more important than ever to have a blog that reels users in and makes yours stand out. Default Blogger templates aren't unique. Every day I read a lot of blogs and quite a few of them look similar to each other you have about ten seconds to reel your readers in and an attractive unique design is going to make a reader more likely to stick around. I don't know of any popular blog that hasn't either customised their template heavily or hired someone to create them a custom design.

It is very true that first impressions count a lot. This is especially true for visitors who arrive at your blog via a search engines. They may have stumbled across your blog while looking for information on a certain subject. You may or may not have the information they were looking for but the design of your blog really can impact whether they stay and have a look around. If someone has put no care into their blog's design why would we think that their posts will be any good? Your blog design really is a reflection on you!

Remember your blog is a brand and decisions you make in relation to it can strengthen or weaken your brand. Everything from the clothes you wear, the words you write and the way you design your blog all reflect on your brand.

So I've told you why a unique blog design is vital to the success of your blog but overall you should create a unique design for your blog because you want to. Not because I want you to or because of the reasons listed here but because you want to be the best that you can be.

It may surprise you to know that when I first started blogging I knew absolutely nothing about HTML, CSS or PHP. Everything I know I've learnt along the way. I'd highly recommend learning the basics so that you can tweak your design to suit your needs. Reading this blog is a good start as I have a fair few Blogger tutorials & I plan to do a lot more tutorials in the future. Also check out Dextrous Diva's post 6 tips for a visually stylish blog.

So stay tuned!

 

Read More

Create a Google+ Fan Page

Individual Google+ pages have been around for a while now but brand pages are a recent development. Creating a fan page is super easy and operates in much the same way as a Facebook fan page. So now I'm going to show you how to create one.

First of all navigate to https://plus.google.com/pages/create

You'll be faced with this page.



Select product or brand and fill in the details then press create.

Next you'll be taken to the screen below. Fill in a little information about your page and add a profile photo. Click continue.

 



Then press finish.



Fill in more details about your site on the about tab on your new profile page.

It really is worth your while having a Google+ as recent changes mean pages are searchable. So Google+ really can be a good source of traffic.

Now you'll want to let your readers know about your page by adding a badge to your site.

Go to https://developers.google.com/+/plugins/badge/config

Fill in your google+ page ID



You'll find your Google+ ID in the address bar of your page like below:



 

Adding the ID will generate a piece of code like this:

<!-- Place this tag in the <head> of your document -->
<link href="https://plus.google.com/115639686051747826824" rel="publisher" /><script type="text/javascript">
(function()
{var po = document.createElement("script");
po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(po, s);
})();</script>

<!-- Place this tag where you want the badge to render -->
<g:plus href="https://plus.google.com/115639686051747826824" size="badge"></g:plus>

You'll need to add the first paragraph of code to the HTML page of your site (Dashboard>Template>Edit HTML>Proceed. Add the code just before the </head> tag.

Now add the second paragraph of code into a html widget if your on Blogger or in a text widget if you use wordpress.

That is all there is to it you have now created a Google+ page for your blog.

 

Read More

Free Social Media Icon Set

 

I've got another free Social Media Icon Set for you guys. This set features icons for Twitter, Facebook, Google+ and RSS Feed. There's 3 sizes included 32x32px, 50x50px and 64x64px. They're totally free to download and you can use them however you wish. I hope you like them.

To download just click on the link and it'll take you to the download page. The images ar5e contained in a zipped file so you'll need to extract them first.

Download Link

Read More

How to Install Blogger's Threaded Comments

 

The blogosphere is buzzing with the news that the Blogger commenting system has been upgraded to include a function for threaded comments. But like most new Blogger features it doesn't work for every template particularly custom ones so today I'm going to show you how to fix that problem and it is super duper easy. I'm assuming that you've already checked in settings that your comment form is embedded and that you've set your feed to full feed. Oh and don't forget to back up your template before editing code. You should always back up your template before making design changes.

Navigate to Dashboard-Template-Edit HTML-Proceed.

Tick the Expand Widget Templates box at the top.
Find each occurence of the the following code (CTRL+F is the quickest way to do this) :

<b:include data='post' name='comments'/>

Replace with:

<b:if cond='data:post. showThreadedComments'>

<b:include data='post' name='threaded_comments'/>

<b:else/>

<b:include data='post' name='comments'/>

</b:if>

Save your Template ...
Congratulations! You should now be able to utilise the new threaded comments facility in Blogger.

But that fix won't work for everyone so if your one of those that it doesn't work for try the following fix.

Navigate to Dashboard-Template-Edit HTML-Proceed and again click on expand widget template. Find the following code.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <b:include data='post' name='comments'/>
</b:if>

Replace with the code below.

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
         <b:if cond='data:post.showThreadedComments'>
           <b:include data='post' name='threaded_comments'/>
         <b:else/>
           <b:include data='post' name='comments'/>
         </b:if>
       </b:if>
       <b:if cond='data:blog.pageType == &quot;item&quot;'>
         <b:if cond='data:post.showThreadedComments'>
           <b:include data='post' name='threaded_comments'/>
         <b:else/>
           <b:include data='post' name='comments'/>
         </b:if>
       </b:if>

Hit save.

These solutions will fix the problem for the majority of blogs but for some people it won't work. Just putting that out there. Good Luck!

 

 

 

Read More

Tutorial - Create a Badge & Grab Box for Your Blog

 

If you read a lot of blogs you'll probably have noticed that quite a few of them have blog badges and grab boxes in their sidebars. This allows readers to place your badge on their blogs and can help improve traffic to your site as well as helping you to rank higher in search results. You can even swap badges with other bloggers in a mutually beneficial arrangement. So today i'm going to show you how to place the badge on your site with a grab box underneath containing the code for the badge.

Step 1

First of all create your badge. This can be created in Photoshop, Gimp, Paint or an online photo editing site like Picnik. Bear in mind the width of your sidebar when creating your badge and make a note of its dimensions as you'll need this information later on.

 

Step 2

Upload your image to Photobucket or Flickr and grab the direct link. Make a note of this link.

 

Step 3

Navigate to your blogging platforms dashboard. If your on Blogger you'll need to go to the Layout page and Wordpress users will need the widgets page.

Paste the code below into a text widget (wordpress) or HTML widget (Blogger).

<a href="YOUR URL"><img alt="Blog" height="85" src="IMGLINK" width="250" /></a>
<textarea cols="31" name="textarea" rows="5" style="height: 85px; width: 250px;"><a href="YOUR URL"><img width ="100" alt="Blog" src=IMGLINK" height="100" /></a></textarea>

 

Now replace YOURURL in the code above with your blog's domain address.

Replace IMGLINK with the direct link you made a note of earlier.

Now you'll need the dimensions of your image. Next to height where it says 85 just replace that number with the height of your image. Do the same with the number next width.  Pretty self explanatory really.

You'll notice I have a badge and grab box in my sidebar and that is how I created it. Feel free to grab my badge (cheeky I know)!

Read More

Tutorial - Create a Letterpress Text Effect in Photoshop

Today I'm bringing you guys my first photoshop tutorial. I've long admired the letterpress effect I've seen cropping up more and more in blog design.

First up you need to create your background. I find that a background colour that's either a lot brighter or a lot darker than your text works best. To really make the text stand out I gave it a spotlight effect by selecting Filter>Render>Lighting Effects. I kept the default settings the same but changed the selector shape like below.

 



 

Next you need to add your text. Tiny text or very thin text won't work well with this text style. I used the lobster font. I used grey as it stands out well against the background.

 



 

Go to Layer>Layer Styles>Inner Shadow.

Now apply the settings as seen in the image below.

 



 

Next click on Drop Shadow (left hand side of Layer Styles palette)

Apply the settings as seen below.

 



 

Next navigate to the Gradient Overlay options.

Apply settings as I've demonstrated below.

 



 

Voila you should now have created something similar to this.

 

Read More

Add Image to Post Title in Blogger

[caption id="attachment_322" align="aligncenter" width="558" caption="Before"][/caption]

[caption id="attachment_325" align="aligncenter" width="556" caption="After"][/caption]

It has been a little while since I have done a Blogger tutorial so today I'm showing you how to add an image to your Blogger post title. It is actually pretty simple when you know how. So let's get started.

First of all you need to make sure your image is the correct size. I'd advise an image size of 40x40 px. When that's done you'll need to upload it to Photobucket and grab the direct link.

 



 

Next log into Blogger and navigate to Dashboard>Template>Edit HTML>Proceed>Expand Widget Template.

Now find the following (highlighted) lines and delete them.

 



 

Paste the following code where we just deleted the above code from:

 

<b:includable id='post' var='post'>

  <div class='post hentry'>

    <a expr:name='data:post.id'/>

    <b:if cond='data:post.title'>

    <table><tr>

     <td class='ssybyposttitle'>

      <img src='yoururl'/></td>

     <td><h3 class='post-title entry-title'>

      <b:if cond='data:post.link'>

        <a expr:href='data:post.link'><data:post.title/></a>

      <b:else/>

        <b:if cond='data:post.url'>

          <b:if cond='data:blog.url != data:post.url'>

            <a expr:href='data:post.url'><data:post.title/></a>

          <b:else/>

            <data:post.title/>

          </b:if>

        <b:else/>

          <data:post.title/>

        </b:if>

      </b:if>

      </h3>

     </td>

    </tr></table>

     <style>

       h3.post-title {

       margin: 0px !important;

       }

     </style>

    </b:if>

Remember to replace 'yoururl' with the direct link of your image.

Hit Save.

That's all there is to it you now have a post title that really stands out from the crowd.

As always leave a comment if you have any questions.

Read More

SEO Part 2 - Design, Link Structure & Keywords

 

In Part 2 of my guide to SEO we're going to look at how your site's design can influence your search results & lots more.



Search engines aren't manned by human beings so they don't view the content in the same way as you or I. When crawling your site for indexable content the only parts they can see is content that is in HTML form. Images and flash are pretty much invisible to them that is why it is so important to assign your images alt attributes to ensure they're searchable. CSS styling of images will also ensure they are seen by the search engines. If you post a lot of relevant videos i.e. tutorials then it is a good idea to accompany these videos with a text description. There is a way to check what information the search engines can see by viewing a cache version of your site. To do this type cache:yoururl and it will display a copy of your website as it is seen by the search engines.

For example here's a standard and cached version of Girl Does Geek.

[caption id="attachment_212" align="aligncenter" width="600" caption="standard"][/caption]

 

[caption id="attachment_213" align="aligncenter" width="600" caption="cached"][/caption]

 

You'll notice that my page looks the same to spiders as it does to human visitors thanks to the CSS styling that I use to build my design. But if you look at the site below you'll notice that hardly any of the content shows up when viewing the cached version as the site is predominantly flash-based.

[caption id="attachment_211" align="aligncenter" width="600" caption="standard"][/caption]

 

[caption id="attachment_209" align="aligncenter" width="600" caption="cached"][/caption]

 



 

A good link structure is also imperative if you'd like to maximise your blog's potential and attract new readers through search results. By this I mean that the search engine spiders must be able to reach all pages on your website from any other page if you wish those pages to garner search result listings. This isn't really necessary for some pages as you don't really need your contact me page to appear in search results but for some pages it is necessary. A text-based navigation system is especially useful for this reason.

 



 

Keywords are pretty darn vital to searches. The whole search process is based on those magic keywords. When the spiders crawl the internet  and index its content they create a database for each keyword. So instead of searching the whole of the internet they'll search the database related to the keyword that people are searching for. So it is of course wise to use keywords carefully as they're key to a good ranking. To best benefit make sure to:

• Use the keyword in your post title (title tag) as close to the beginning of the title as possible.


• Make sure the keyword features in the body of the post at least 3 times.


• The keyword should appear in bold at least once in your post and once in the "alt" attribute of an image.


• Keywords should also appear in the url of your post (this is why descriptive urls are so important).

Now let us delve a little deeper into title tags. Titles are meant to be a short description of a page or posts content. They are useful for searchers and particularly important for SEO. So here are some tips on using title tags.

• Keep titles to under 70 characters as that is as long as search engines can handle. Any longer and the end of the title won't appear in search results.


• The closer to the start of the title that a keyword is, the more like a user is to click on the link.


• Create a title that encourages click through. So descriptive but inviting post titles are a must.

Lastly for Part 2 I'll explain what a meta description is. Basically it is a short description of a post or pages content and it appears underneath the title in search results. It is good practice to keep it to under 160 characters as like the title search engines are limited to a certain number of characters. If like me you use Thesis the post pages comes in-built with a field for adding your meta description. Other WordPress users may wish to use the All-in-One SEO plugin to alter their meta description. Meta description doesn't effect where you appear in search results but it is important for drawing in readers and encouraging click-through. So make it good.

So that's Part 2 done and dusted. Hope your head isn't hurting from all the SEO knowledge coming your way as there is plenty more to come. Part 3 is on its way very soon.

Read More