Blogger Tutorial - Add an Image to Sidebar Titles

Over on my other blog All These Pretty Things I have added a cute little feather to the start of my sidebar titles. this is a great design fluorish and makes the items in my sidebar stand out. so today I'm going to show you how to achieve the same thing on your own blogs. Of course you can use any images you like.

To start with you'll need to create your image in your photo editing software of choice. I made mine 40px high and 80px wide. Upload your image to photobucket and grab the direct link. Make a note of this url.

Log into blogger and navigate to the template designer. Click on advanced and select add CSS. Paste the following code into the CSS box.

.sidebar h2 {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL5KnsQeyX7wWhEAAApf6l6Vxjn1tc1pC8usxBuO1kb7EXOG3AE4clXyBJxK5bxHPivN10ifXSefLvAPyTJwgZJuj2UPzE9tCdqoochAmIr6aU4O4OwPdFxDIY0mfnCUC07Y-AWBOH2QI/s1600/feather.png);
background-repeat: no-repeat;
background-position:left;
height:40px;
margin:0;
padding:10px 3px 0 80px;
line-height:1.5em;
text-transform:uppercase;
letter-spacing:.2em;
}

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

Change the height to the height of your image and replace the '80px' on the line padding: 10px 3px 0 80px with the width of your image.

Press apply to blog.

You should now have an image next to your sidebar titles. easy peasy!

Read More

Show Post Excerpts on Homepage with Thumbnails - Blogger

This blog is all about giving you the tools and options to design your blog to look however you want it. So today I'm going to show you how to show post excerpts on your front page instead of full posts. This method will show an excerpt with a post thumbnail and a 'continue reading' link.

So first of all navigate to Dashboard>Template>Edit HTML>Proceed.

Tick the 'expand widgets' box. Search for the </head> tag and place the following code above it.

<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 300;
summary_img = 350;
img_thumb_height = 200;
img_thumb_width = 300;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}

//]]>
</script>

 

Now search for the following line of code.

<data:post.body/>

Replace it with the code below:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'><br/>
<data:post.body/>
<b:else/>

<b:if cond='data:blog.pageType != "item"'>

<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> continue reading "<data:post.title/>"</a></span>

</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
</b:if>

You'll see that I have bolded the words 'continue reading' you can change those words to read on or to whatever you like.

Hit save.

That is all there is to it :)

Read More

7 Tips for Increasing Your Google PageRank

 

I recently wrote a post on Google PageRank, what it is and why it is important. If you haven't already read it click here. I've had many questions regarding it and many of you asked how you can improve your PageRank. So today I'm going to give you some easy to implement tips on improving your ranking.

1. Post in Forums

Forums are a great source of backlinks (links to your website). Most forums allow you to add a signature to all your posts. In this signature just add a link to your website. But a word of caution - don't post in any old forum make it relevant to the content of your blog. Each of these posts is a backlink. Don't just post any old thing though make it a quality post.

 

2. Produce Quality Content

This may be obvious but I will say it anyway. High quality content is your best friend when obtaining links to your site. The better your content the more people will link to you. This kind of goes without saying.

 

3. Comment

Comments are backlinks. No spamming though or commenting just for a link. Make your comments valuable and related to the content. if you use Blogger DO NOT comment using your google login details, instead use the name/url option. Otherwise it will be a link to your Blogger profile and not to your site.

 

4. Submit Your Blog to Search Directories

These are a great way to get free links to your blog. They also help with improving your ranking on search engines and thus help you secure more traffic. Find a list of search engine directories here.

 

5. Submit Your Blog to Blog Directories

Add your blog to blog directories like Wikio and Blog Catalog. These are all quality backlinks to your blog.

 

6. Exchange Links with Other Blogs

Place another blogger's link on your blog and ask them to do the same for you. Make sure they blog about a similar topic though. Don't overdo it though as Google can penalize this type of link exchange.

 

7. Guest Posts

When you guest post for other bloggers, they usually add your blog's link to the end of the post. This provides you with a backlink to your blog. it is a double win situation as it also introduces your blog to people who maybe wouldn't find your blog otherwise.

 

So there you have it, those are my 7 tips for boosting your Google PageRank which in turn will provide you with a greater share of search engine traffic.

 

 

Read More

Create a Lightening Hover Effect on Photos - Blogger

You may have noticed that when you hover on photos on my blog they lighten. It is a nifty little effect that can really make your photos stand out. knew of course about hover effect on photos but never implemented it until I saw it on Miss Drifted Snow White's fab, well designed blog. Go check it out, I love her blog and she is an utter blog design geek like moi.

So now let us get on how to do it.

Navigate to Dashboard>Template>Customise>Advanced>Add CSS.

Copy the following code and paste it into the 'add css' box.

.post-body img:hover {
opacity: 0.5;
filter: alpha(opacity=50);
border: none;
}.post table.tr-caption-container img:hover {
opacity: 0.5;
filter: alpha(opacity=50);
border: none;
}

 

Click on 'apply to blog'.

That is all there is to it. But be aware that this hover effect won't work in IE because IE is an antiquated and rather rubbish browser. If your still using IE I advise you to switch to firefox or chrome.

Read More

How to Make All Images the Same Size Automatically on Blogger

Yet another post inspired by a conversation on Twitter. It seems some themes stretch the dimensions of an image making it look out of proportion. So I've devised a solution. This fix will make sure all your post images are the same width so it can also improve the look of your blog. It automatically works out the height so don't worry, you won't end up with images that look distorted. It retains the original images proportions.

To apply this fix. Navigate to Dashboard>Template>Customise>Advanced>Add CSS.

Copy the following code and place it in the box.

 

 

.post-body img {

width: 400px;

height: auto;

}

 

.post table.tr-caption-container img {

width: 400px;

height: auto;

}

Replace 400 with the desired default width you'd like for your photos. Then press the 'apply to blog' button and all your images will change to the desired size. Easy peasy! If you have any problems just comment, tweet me or drop me an email!

Read More

How to Add a Pop Up Email Subscription Box to Blogger

I've got a great little tutorial for you today. This one will show you how to add a popup email subscription button to your blog. It will place a follow button on the bottom right hand corner of your blog. When a user clicks on the follow button an email subscription box will appear. The beauty of the button is that it is fixed. So whenever a user scrolls down the page the follow button moves with them. The button is unobtrusive so it won't clutter your sidebar but it as it is always on the screen wherever you are on the page subscriptions should increase. it is based on the newly introduced follow by email widget.





So let's look at how to add it.

First things first. You'll need to add the follow by email widget. To do this - Dashboard>Layout>add a Gadget>Follow by Email .

Delete Title and add feedburner URL.

Save.

 

Then navigate to Dashboard>Template>Edit HTML>Proceed.

Look for </head>.

Add the code below above </head>

<style type="text/css">
/*<![CDATA[*/
.FollowByEmail {background-color: #c0c0c0;width: 200px;color: #fff;position: fixed;z-index: 999999;right: 10px;bottom: 0;}
.followOpened {-webkit-border-radius: 1px 0 0;-moz-border-radius: 1px 0 0;border-radius: 1px 0 0;-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);}
.w2bfollowButton {background: #c0c0c0;color: #CCC;font-size: 12px;line-height: 28px;padding: 0 10px;text-decoration: none;position: absolute;top: -28px;right: 0;display: block;-webkit-box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);-moz-box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);-webkit-border-radius: 2px 2px 0 0;-moz-border-radius: 2px 2px 0 0;border-radius: 2px 2px 0 0;height: 28px;}
.w2bfollowButton span {background: url("http://girldoesgeek.com/wp-content/uploads/2012/02/follow.png") no-repeat scroll 0 3px transparent;padding-left: 15px;}
.w2bfollowButton:hover,.followActive {color: #fff !important;}
.w2bfollowButton:hover span,.followActive span {background-position: 0 -37px !important;}
.followactive {background-color: #333;}
.follow-by-email-inner {padding: 15px;}
.FollowByEmail h2 {padding: 15px 15px 0;font-size: 18px;margin: 0 0 10px;font-weight: normal;}
.follow-by-email-inner p {margin: 0 0 10px;}
.follow-by-email-inner .follow-by-email-address {width: 95%;padding: 2px 4px;margin: 0 auto;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;font-size: 15px;border: 1px solid #444;color: #888;display: block;clear: both;}
.follow-by-email-inner form {text-align: center;}
.follow-by-email-inner td{display: inline-block;width:100%;text-align:center;}
.follow-by-email-inner .follow-by-email-address:focus {color: #000;border-color: #000;}
.follow-by-email-inner .follow-by-email-submit {cursor: pointer;padding: 2px 20px;background: #333;background: -webkit-linear-gradient(top, #333 0%, #111 100%);background: -moz-linear-gradient(top, #333 0%, #111 100%);background: -o-linear-gradient(top, #333 0%, #111 100%);background: -ms-linear-gradient(top, #333 0%, #111 100%);background: linear-gradient(top, #333 0%, #111 100%);color: #ccc;text-shadow: 0 1px 0 #000;border: 1px solid #282828;-webkit-border-radius: 11px;-moz-border-radius: 11px;border-radius: 11px;-webkit-box-shadow: inset 0 1px 0 #444;-moz-box-shadow: inset 0 1px 0 #444;box-shadow: inset 0 1px 0 #444;text-decoration: none;-webkit-transition: all 0.25s ease-in-out;-moz-transition: all 0.25s ease-in-out;-o-transition: all 0.25s ease-in-out;-ms-transition: all 0.25s ease-in-out;transition: all 0.25s ease-in-out;margin: 1em 0 1em 0;}
.follow-by-email-submit:hover {background: #222;background: -webkit-linear-gradient(top, #333 0%, #222 100%);background: -moz-linear-gradient(top, #333 0%, #222 100%);background: -o-linear-gradient(top, #333 0%, #222 100%);background: -ms-linear-gradient(top, #333 0%, #222 100%);background: linear-gradient(top, #333 0%, #222 100%);color: #fff;-webkit-box-shadow: inset 0 1px 0 #4f4f4f;-moz-box-shadow: inset 0 1px 0 #4f4f4f;box-shadow: inset 0 1px 0 #4f4f4f;text-decoration: none;}
.follow-by-email-submit:active {background: #111;background: -webkit-linear-gradient(top, #111 0%, #222 100%);background: -moz-linear-gradient(top, #111 0%, #222 100%);background: -o-linear-gradient(top, #111 0%, #222 100%);background: -ms-linear-gradient(top, #111 0%, #222 100%);background: linear-gradient(top, #111 0%, #222 100%);color: #aaa;-webkit-box-shadow: inset 0 -1px 0 #333;-moz-box-shadow: inset 0 -1px 0 #333;box-shadow: inset 0 -1px 0 #333;text-decoration: none;}
.w2bFollowFooter {text-align: center;font: normal 11px "Helvetica Neue", sans-serif;padding: 7px 0;margin: 0 0 -15px !important;border-top: 1px solid #3c3c3c;}
.w2bFollowFooter a {color: #aaa;text-shadow: 0 1px 0 #262626;background: none;text-decoration: none;}
.w2bFollowFooter a:hover {color: #fff;background: none;}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
;(function(w2b){w2b(document).ready(function(){w2b.extend(w2b.easing,{easeOutCubic:function(x,t,b,c,d){return c*((t=t/d-1)*t*t+1)+b}});var followBox=w2b(".FollowByEmail");followBox.prepend("<a class="w2bfollowButton" href="#"><span>Follow</span></a>");w2b("<p></p>",{class:"w2bFollowFooter",html:"<a href="http://feedburner.google.com" target="_blank">Delivered by FeedBurner</a>"}).appendTo(followBox.find(".follow-by-email-inner"));followBox.find("td:last").removeAttr("width");var followHeight="-"+followBox.outerHeight()+"px";followBox.hide().css({bottom:"-500px"});setTimeout(function(){followBox.show().animate({bottom:followHeight})},500);w2b(".w2bfollowButton").click(function(e){if(followBox.hasClass("followOpened")){w2b(this).removeClass("followActive");followBox.removeClass("followOpened").animate({bottom:followHeight},{duration:200,easing:"easeOutCubic"})}else{w2b(this).addClass("followActive");followBox.addClass("followOpened").animate({bottom:"0"},{duration:400,easing:"easeOutCubic"})}e.preventDefault()})})})(jQuery);
/*]]>*/
</script>

 

That is all there is to it! Any problems? Leave a comment.

 

Read More

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

How to Add Your Latest Instagram Photos to Your Blogger Sidebar

I love Instagram! I've only just started using it but i'm hooked on it (my username is fayemarieblogs in case you were wondering). Wordpress has dozens of plugins for adding your latest photos to your sidebar but the same can't be said of Blogger. So I went on a hunt for a way for Blogger users to add their latest photos to their sidebar and hooray I found one.

Snap Widget generates the code for you and you just add it as a HTML widget on your Blogger layout page.

Go to Snap Widget

Fill in your details like below:

It will generate a snippet of code, you just need to copy the code and paste it into a HTML widget in Blogger.

 

You'll then be left with your instagram photos displayed in your sidebar.

 



The beauty of this site is that it lets you choose your background and select how many pics show both horizontally and diagonally.

feel free to leave your Instagram username in the comments section. I need more people to follow!

Read More

Blogger Tutorial - Add a Pin It Button to Posts

You'd have to be living under a rock recently to not have heard about Pinterest. It really is the hottest new Social Media outlet out there. It is a great resource for bloggers too as things can go viral quite easily which in turn can provide you with a good traffic stream. More and more sites have pin it buttons now and they are a great way for your readers to easily share your content on Pinterest. Wordpress has tonnes of plugins for adding the button but as usual Blogger is lacking this function. So I'm going to show you how to add one to the bottom of your posts (just above your twitter/Facebook share buttons).

 



 

Navigate to Dashboard>Template>Edit HTML>Proceed.

Tick the 'Expand Widget Template' at the top.

Locate the following line of code - <data:post.body/>

Just below this line of code, paste the following:

<!-- Include ONCE for ALL buttons in the page -->
<script type="text/javascript">
(function() {
    window.PinIt = window.PinIt || { loaded:false };
    if (window.PinIt.loaded) return;
    window.PinIt.loaded = true;
    function async_load(){
        var s = document.createElement("script");
        s.type = "text/javascript";
        s.async = true;
        if (window.location.protocol == "https:")
            s.src = "https://assets.pinterest.com/js/pinit.js";
        else
            s.src = "http://assets.pinterest.com/js/pinit.js";
        var x = document.getElementsByTagName("script")[0];
        x.parentNode.insertBefore(s, x);
    }
    if (window.attachEvent)
        window.attachEvent("onload", async_load);
    else
        window.addEventListener("load", async_load, false);
})();
</script>

<!-- Customize and include for EACH button in the page -->
<a href="http://pinterest.com/pin/create/button/" count-layout="horizontal">Pin It</a>

Hit Save!

That is all there is to it people can now pin your posts to boards on Pinterest!

 

 

 

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

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

How to Add Social Share Buttons (with count) to Top of Post in Blogger

I really enjoy doing all these blogger tutorials and I hope you guys are finding them useful. Today I'm bringing you another tutorial and this one will show you how to add social media buttons to the tops of your posts. The buttons also count how many times your content has been shared. They include Facebook, Twitter, Stumble Upon and Digg.

 



 

So let us get down to the nitty gritty.

First of all navigate to Dashboard-Template-Edit HTML-Proceed and tick on the box at the top called Expand Widget template.

 

Find the following line of code:

]]></b:skin>

Paste the code below above that line.

.social-bar { border: dashed #ddd; border-width:1px 0 1px 0; margin: 10px auto 10px; display:block; padding: 3px 0 1px 0px; overflow: hidden; }
.social-bar .social_button {float: left; display: inline; overflow: hidden; height:22px; }
.social-bar .social_button.dg { margin: 0px 0 0 20px ; padding-top: 2px;}
.social-bar .social_button.tm { margin: 0px 0 0 20px; padding-top: 4px;}
.social-bar .social_button.fb { margin: 0 0 0 20px; padding-top:3px;}
.social-bar .social_button.su { margin: 0px 0 0 20px; padding-top: 2px;}
.social-bar .social_button.buzz { margin-left:20px ; padding-top: 3px;}

Now find the following line of code:

<div class='post-header'>

Paste this code underneath it:

<b:if cond='data:blog.pageType == &quot;item&quot;'><div class='social-bar'>
<div class='social_button dg'>
<a class='DiggThisButton DiggCompact'/><script src='http://widgets.digg.com/buttons.js' type='text/javascript'/>
</div>
<div class='social_button tm'>
<div style='float:right;width:90px;height:25px'>
<a class='twitter-share-button' data-count='horizontal' data-via='technowit' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></div>
</div>
<div class='social_button fb'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=verdana&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:80px; height:27px;'/>
</div>
<div class='social_button su'>
<script src='http://www.stumbleupon.com/hostedbadge.php?s=1'/>
</div>
<div class='social_button buzz'>
<a class='google-buzz-button' data-button-style='small-count' href='http://www.google.com/buzz/post' title='Post to Google Buzz'/>
<script src='http://www.google.com/buzz/api/button.js' type='text/javascript'/>
</div></div></b:if>

Hit Save. You should now have social media share buttons at the top of your posts :)

Read More

Photoshop Tutorial - How to Create Patterned (Cutout) Text

I recently got asked on Twitter to create a tutorial on how to create text like the example below.

This text was achieved in Photoshop by using clipping masks and an image. That may sound complicated but today I am going to show you how to achieve this look simply and quickly.

First of all you need to create a new document in Photoshop by navigating to File>New and filling in your required dimensions and background colour.

Then select the type tool by pressing the T in the left hand side toolbar. Along the top of your screen you can select the font, size and colour. It does not matter which colour you choose as it will be covered by the patterned image. The font I used in this tutorial is Myriad Pro Bold.

 



Next you need to navigate to File>Open and select the image you've chosen for the text.



 

When it is open, press Ctrl+An and then Ctrl+C

 



 

Now you need to paste it onto the text layer we created earlier. To do this click on the tab with the text layer and press Ctrl+V, make sure the image covers all of the text.

Now you need to navigate to the layers palette on the right hand side of the page (see image below). You need to right click on the layer above the text layer and select 'create clipping mask'.

 



 

That is all there is to it. You just need to save the image now. To do that just navigate to File>Save As.

See how simple it is? If you have any problems just tweet me or comment here.

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

Create Gold Metallic Effect 3D text in Photoshop

So yesterday I showed you how to create letterpress effect text in Photoshop and today I'm going to show you how to create Gold metallic effect 3D text. Like the letterpress effect it is very easy to achieve.

So first of all we create a new canvas in our background colour of choice. I chose white.

Then we choose our font of choice (I chose to use Lobster again). Write your text using the colour #c7b290.



Then navigate to Layer>Layer Style>Drop Shadow.

Set it to the settings below.



Press OK.

Navigate to Layer>Layer Style>Inner Shadow and use the settings shown below.



Press OK.

Then lastly navigate to Layer>Layer Style>Bevel and Emboss and use the settings shown in the image below.



Press OK.

It will leave you with a beautiful 3D gold effect text like I have here.



It really is really simple but such a lovely touch. Try it out and let me know what you think.

Read More

Publish Your Blog on Kindle in 5 Easy Steps

 

I recently added my blog to the amazon kindle network to allow my readers to view my blog on their kindle if they so wish. So i thought I'd do a little guide to what’s involved here.

Kindle Publishing for Blogs allows you to sign up and submit your blog feed. Amazon then converts this feed into a kindle-readable layout.

The main benefits to the blogger is a little added revenue and the fact that more readers will become aware of your blog as you can enter keywords which amazon users can search on. Kindle subscribers pay a small fee to gain access to your blogs which is usually $1.99 per month, the negative is that this fee is fixed (I wish it was free). Amazon takes 70% of this fee and the blogger retains 30%.

It’s free to join just visit the Kindle Publishing for Blogs page and create an account. So what’s stopping you?

Once you’ve created an account follow the following steps :

 



Click on ‘Your Blogs’ – its along the top of the page on the right hand side.



Then click on ‘Add Blog’ that's the one with the green cross next to it.



This is the screen that will be displayed next. Fill in the url of your blogs feed in the top field. Then click validate feed and a green tick will show underneath to show that your feed has been added successfully. Then fill in the other fields – blog title, tagline, blog description, your name, add a screenshot of your blog and one of your blog header, add keywords that kindle users can utilise to search for your blog. Press save and then click publish at the bottom.



To complete the process fill in your contact details and choose whether to add an account or be paid by cheque. FYI. only US users can be paid electronically all international users must be paid by cheque.

Then click publish and that’s it. It’ll take about 48 hours to be activated but it really is that simple!

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