bloggingtips

Friday, 15 October 2010

How To Fully Customize The Post Titles On Blogger

Many of the templates both from the Blogger template designer and Custom templates leave the post titles fairly standard.When it comes to fonts, sizes, colors etc.. the post titles on almost all blogs have the same design.But you can add some spice to your post titles without too much hard work and adding even a few minor customizations can make all the difference.Every Blogger template has a small piece of Css that controls how the Post titles appear and by adding or changing small pieces of code we can change the appearance.

So in this post among other changes to your blog titles we will see, How To Change The Size, Change The Color, Change The Background Color or add A Background Image, Change The Font Family and more..

First make sure to back up your template, I'm sure you wont make a mistake but just in case.With that done lets look at some of the effects we can add to Blogger post titles.

How To Customize Post Titles

The first thing we must do is find the section of Css that controls the post titles.This code will be the same in 95% of blogs so if for some reason it differs in your blog drop a comment and we will help.

From you dashboard click 'Design' > 'Edit Html' (No Need To Expand Widget Templates)

Click 'CTRL F' and look for the following code (CTRL F generates a search bar - More Info)

.post h3 a

This is the section of code that controls your post titles, it will be followed by a few lines of code that create the appearance.

If You Cant find that code try looking for this :

h3.post-title,

Now that you have located the sections of code that control the appearance of your post titles you can change the current Css or add extra Css, lets look at some examples.If you are adding Css it always goes below the code you found.

Make The Text / Font size Bigger Or Smaller - change the font-size number :

font-size: 18px;

Make The Post Titles All Capital Letters - add the following code directly below .post h3 :

text-transform:uppercase;

Make The Post Titles Bold - if you see font-weight: normal; change to font-weight: bold; or add font-weight: bold; if it is not already specified.

Move the Post Title To the left, right or in the center - Change or add the code below :

text-align:left;
text-align:right;
text-align:center;

Add A Background Color To Your Post Titles - Add The Code Below With Your Desired Color :

background:#000000;

You can change #000000 to your desired color - Get color codes here

Add A Border To Your Post Titles - Add The Code Below :

border: 1px dashed #cccccc;

You can change the border type dashed to solid or dotted, you can also change the color code from #cccccc - Get color codes here.

Add A Background Image To Your Post Titles - Add The Following Code :

background:url(http://YOURIMAGE.jpg) repeat;

Replace http://YOURIMAGE.jpg with the image you want to use.

Change the Font Style / Font Family - Your Css will either have the Font Family similar to this :

font: $(post.title.font);

Or Similar To This :

font-family: Georgia,trebuchet ms, tahoma, Verdana, Arial, Sans-Serif;

To Change The Font Family Replace that code with another font.This link is to Common Fonts For Windows And Mac..Almost all these fonts will work with Blogger.

Remove the current font and add the new font link this :

font-family:FONT FROM ABOVE LINK HERE;

To Look Like This :

font-family: Arial, Arial, Helvetica, sans-serif;

Be sure to add ; at the end of the font family.

There is much more you can do to customize your post titles but we will leave it there for now.Don't go changing your template without having a back up and that way you can play around until you find what your looking for.Another idea is to create a test blog and get the right combination there before changing the real blog..Have Fun !

Thursday, 14 October 2010

Build Backlinks While Earning AdSense Revenue

Back in September i told you how i had been Bookmarking my blogs on Xomba and not only getting Free back links but also earning AdSense revenue.Today i have another great tip for Building easy back links to your blog and once again you earn extra AdSense revenue in the process.This time the site we are looking at is Best Reviewer a brand new website that lets you create 'Tops Lists', put links to your blog in the lists and shares the Revenue from the AdSense with you.In fact you get 100% from the main AdSense unit (Directly under the title) and you also choose what size you want that unit to be.

What Are Tops Lists ?

Tops lists are Top 5, Top 10 style lists in fact you can create a list anywhere from Top 3 to Top 20.You give the list a title like 'Top 10 Blogger Tips And Tricks', name each Tip and add the URL to that tip ! So if you have for example a cookery blog you can create top 5 recipe lists and link to each of the recipes on your blog, once you publish you will have just built 5 back links to your blog.As all you need is a short introduction and conclusion along with your list and a line or two of text on each of the top 5, you can create a full list in less than 5 minutes.Also when filling out your account info you can include your Blog or website address and it appears at the foot of each top list you write, so even if your writing a fun top list or a top list to other sites you still get a back link.

Screenshot - See below a Top 5 List I Created Of Best Magazine Templates With Links Circled

-Each Of The Top 5 Link To A Different Post On Our Template Site www.BestBloggerTemplates.Net

How To Join

Joining is easy, follow this link to Best Reviewer then click the Log In link, you will be provided with the option to create an account.Give your desired username and Email and you can also add your AdSense ID at this stage or leave it until your ready to start creating Tops.Best Reviewer will send you an Email with your new password and a confirmation link.That's it your ready to start building back links and earning AdSense.Note - They generate a password for you but i suggest changing to something you will remember as soon as you log in (Edit Your Account).This site is new so you can get in at the ground level and have your Tops in Most viewed lists etc..Also Best Reviewer is from the makers of popular Article website 'She Told Me' (She Told Me Is Also A AdSense Share Site Check Out She Told Me Here) so you know it will be a success.

Final Note - Remember you can create Top on any subject and you don't have to link to your site or any site you can create fun lists and still Earn some cash, Enjoy !

Also make sure to check out the post on building back links on Xomba here - Paid To Bookmark.

Wednesday, 13 October 2010

4 Eye Catching Subscribe To Feed Banners For Below Blog Posts

Hi Guys ! When going through an old Photobucket account i came across a few Rss feed banners i have used below posts on different Blogs.Were you place your Feed options on your blog can have a huge effect the number of readers that take up the option to Subscribe.It's also important that the way your feed options are presented grab the attention of readers.So many websites and Blogs use the standard Rss Icon it has become White Noise.So in this post we will cover both placing a Feed option in Prime position and using a Rss Banner that will grab the attention of the reader.

When Readers reach the end of a post they think 'What Next?' and it's your job to make sure the next step they take is of benefit to your blog.This is why the top blogs have Rss options, Share and Bookmark Options, Related Posts and AdSense or other Advertising Directly below posts, of course they also have the option to comment.Click on any of those links to find out how to add each option below your blog posts, you can also add a Subscribe by Email form below your posts by checking out this post - 5 Stylish Feedburner Email Subscription Forms.So lets look at the three banners and see how you can put them below your blog posts.

Subscribe To Feed Banners Below Posts

Banner 1

Banner 1 Code

<a href='http://www.spiceupyourblog.com'><img alt='Best Blogger Tips' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaYqm6xBxp5E1rd4O1aT12fj-dLN-q80OAJ6XqEuhA3xy8Z9sq5bB5SLPNsaP6BSHYZWCHG3fizpfJbCqFftz-1evmQcUCbupu_I-TekVKuOM7HEggqFjkT97zU6gkD78Cm0OcDAJuLX6K/s1600/best+blogger+tips.png'/></a><center><a href="http://feeds2.feedburner.com/spiceupyourblog" title="Subscribe To Our Rss Feed"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ71FD_3xG9e0QqYxr7AMQoYhIQscyyr8ppP1bTsHYn6h9_9x_PeGDbX9zJTqP_-JeBWTTuYJPX_kwzN2s2FFbMHCgJaQHeZkXn7srOegiQTYwUCGO5f7y1KtWsXnrpIb_PuAbuPeeUBem/s320/dont+miss+feed.jpg" /></a></center>

Banner 2

Banner 2 Code

<a href='http://www.spiceupyourblog.com'><img alt='Best Blogger Tips' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaYqm6xBxp5E1rd4O1aT12fj-dLN-q80OAJ6XqEuhA3xy8Z9sq5bB5SLPNsaP6BSHYZWCHG3fizpfJbCqFftz-1evmQcUCbupu_I-TekVKuOM7HEggqFjkT97zU6gkD78Cm0OcDAJuLX6K/s1600/best+blogger+tips.png'/></a><a href="http://feeds2.feedburner.com/spiceupyourblog" title="Subscribe To Our Rss Feed"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuAAc8QKwN9I8tlnjCc4T6MBAKF6-YbnIB8LvLV2XGcFfZpvqPYSByY93qjjJTIMf3QJ_itPm3y0NqHy4__ygl_UnL_dcQOrQ3WaHbtl7De3_BR3YjyErLBIYPZfPjetCsrGGBMAT_4qpe/s320/shy+feed.jpg"/></a>

Banner 3

Banner 3 Code

<a href='http://www.spiceupyourblog.com'><img alt='Best Blogger Tips' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaYqm6xBxp5E1rd4O1aT12fj-dLN-q80OAJ6XqEuhA3xy8Z9sq5bB5SLPNsaP6BSHYZWCHG3fizpfJbCqFftz-1evmQcUCbupu_I-TekVKuOM7HEggqFjkT97zU6gkD78Cm0OcDAJuLX6K/s1600/best+blogger+tips.png'/></a><a href="http://feeds2.feedburner.com/spiceupyourblog" title="Subscribe To Our Rss Feed"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgooE8WoAO0XOuymU4xGSBhlc2ege5UEaPzkGnak4NZJ0uRbN804XYnCYB9FD5RkONoQGSvb_rk2qiKCJMBWFD2TuuilBiNAqb2UfWe7M8S2j7h_-4ZcLUlybeVOhWgaV1hHB5n8Sy-cCI4/s320/subscribe_tab.jpg"/></a>

Banner 4.

Banner 4 Code

<a href='http://www.spiceupyourblog.com'><img alt='Best Blogger Tips' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaYqm6xBxp5E1rd4O1aT12fj-dLN-q80OAJ6XqEuhA3xy8Z9sq5bB5SLPNsaP6BSHYZWCHG3fizpfJbCqFftz-1evmQcUCbupu_I-TekVKuOM7HEggqFjkT97zU6gkD78Cm0OcDAJuLX6K/s1600/best+blogger+tips.png'/></a><a href="http://feeds2.feedburner.com/spiceupyourblog" title="Subscribe To Our Rss Feed"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxDAUXVE75UnK_SpxxJowicCGZrTAm9hMRtbrnLXBjJ8tjEnGkWPTNUbzu_yl-ZiPU3mJsOiD0V26kfeTZanLe6GiQTlqVx77u45_A57cL1sjLEsgJS01OSuFggENDInZyZqv-CvXV8TnI/s1600/Rss+Sofa.png"/></a>

Note - You must change the URL in red to your Feed URL.

Place The Banner Below Your Posts On Blogger

Step 1. In your Blogger Dashboard click 'Layout/Design' > 'Edit Html' > Tick the 'Expand Widget Templates' box

Blogger layout

Step 2. Find The Following Piece Of Code In Your Blogs Html :
(Click 'Ctrl and F' for a search bar to find the code - More Info)

<data:post.body/>

Step 3. Place the code for your Rss Banner Directly Below / Under <data:post.body/>

Extra Note - If your Blog uses the 'Read More' or 'Post Summerys' feature you may want the banner to only be on the posts and not on the home page.If so place this snippet above your banner code : <b:if cond='data:blog.pageType == "item"'> And place this below you banner code : </b:if>

Once you have the banner code in your template Save and your Done !

You can of course use or create your own banner and for future reference remember everything you place below <data:post.body/> appears below your posts after the last line of text, every thing you place Directly Above <data:post.body/> appears at the top of your posts before the first line.Check out some of our other Great posts with Rss Feed Tips And Tricks.

Remember to Subscribe to Our Feed and let us know what you think below !

Monday, 11 October 2010

New Version Share The Love Sexy Bookmarks V2 For Blogger

In this post i will show you how to add the latest version of the popular 'Sexy Bookmarks' social Bookmarking Gadget by Shareaholic to Blogger.The latest version 'V2' has seen the addition of more Bookmarking options and a two tier effect when hovered over.Now the most popular Bookmarking icons are visible and a second selection pop out underneath.The new V2 Sexy Bookmarks Gadget has a scribbled 'Share The Love' caption.In all 18 icons are included like Facebook, Twitter, Digg, Stumble Upon, Mixx, Technorati, Rss, Delicious to name a few.Once added to your blog the Share The Love Sexy Bookmarks will appear below every post.

Demo - You Can See A Working Demo By Clicking Here.

Update - We have published an even newer version with lots of options find it here - Complete Animated Sexy Social Bookmarks V3 For Blogger

The previous Sexy Bookmarks gadget was allowed to expire by the designer.If you used the previous 'Sharing Is Caring' gadget from this Blog you can replace that code with the code for Share The Love V2.For extra instructions on removing the old gadget see the original post Here.

share the love sexy bookmarks blogger

Add V2 Share The Love Sexy Bookmark Gadget Now !

Step 1. In Your (New Design) Blogger Dashboard Click The Drop Down Menu For Your Blog > Choose Template > Then Edit Html > Now Proceed > Tick The Expand Widget Templates Box as shown in the video Below :

Step 2. Find this piece of code in your blogs html:
(Click 'CTRL' and 'F' for a search bar to find the code - More Info)

</head>

Step 3. Now add the code below Directly Before / Above </head>

Scroll Box - Make Sure Your Get All the Code

Step 4. Find The following piece of code in your blogs html :

<data:post.body/>

Step 6. Add the code below Directly After / Below <data:post.body/>

Scroll Box - Make Sure You Get All The Code.

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

<a href='http://www.spiceupyourblog.com'><img alt='Best Blogger Tips' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaYqm6xBxp5E1rd4O1aT12fj-dLN-q80OAJ6XqEuhA3xy8Z9sq5bB5SLPNsaP6BSHYZWCHG3fizpfJbCqFftz-1evmQcUCbupu_I-TekVKuOM7HEggqFjkT97zU6gkD78Cm0OcDAJuLX6K/s1600/best+blogger+tips.png'/></a><div class='sexy-bookmarks sexy-bookmarks-expand sexy-bookmarks-bg-love' style='margin:20px 0 0 0 !important; padding:25px 0 0 10px !important; height:29px;/*the height of the icons (29px)*/ display:block !important; clear:both !important;'>
<ul class='socials'>
<li class='sexy-delicious'><a class='external' expr:href='"http://del.icio.us/post?url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Share this on del.icio.us'>Share this on del.icio.us</a></li>
<li class='sexy-digg'><a class='external' expr:href='"http://digg.com/submit?phase=2&url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Digg this!'>Digg this!</a></li>
<li class='sexy-stumbleupon'><a class='external' expr:href='"http://www.stumbleupon.com/submit?url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'>Stumble upon something good? Share it on StumbleUpon</a></li>
<li class='sexy-reddit'><a class='external' expr:href='"http://reddit.com/submit?url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Share this on Reddit'>Share this on Reddit</a></li>
<li class='sexy-google'><a class='external' expr:href='"http://www.google.com/bookmarks/mark?op=add&bkmk="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Add this to Google Bookmarks'>Add this to Google Bookmarks</a></li>
<li class='sexy-twitter'><a class='external' expr:href='"http://twitter.com/home?status=Reading: " + data:blog.title + " - " + data:post.url + " (@NAME)"' rel='nofollow' title='Tweet This!'>Tweet This!</a></li>
<li class='sexy-facebook'><a class='external' expr:href='"http://www.facebook.com/share.php?u="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Share this on Facebook'>Share this on Facebook</a></li>
<li class='sexy-mixx'><a class='external' expr:href='"http://www.mixx.com/submit?page_url=" + data:post.url' rel='nofollow' title='Share this on Mixx'>Share this on Mixx</a></li>
<li class='sexy-comfeed'><a class='external' expr:href='data:blog.homepageUrl + "feeds/posts/default"' rel='nofollow' title='Subscribe'>Subscribe</a></li>
<li class='sexy-yahoobuzz'><a class='external' expr:href='"http://buzz.yahoo.com/submit/?submitUrl=" + data:post.url' rel='nofollow' title='Buzz up!'>Buzz up!</a></li>
<li class='sexy-linkedin'><a class='external' expr:href='"http://www.linkedin.com/shareArticle?mini=true&url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Share this on Linkedin'>Share this on Linkedin</a></li>
<li class='sexy-designfloat'><a class='external' expr:href='"http://www.designfloat.com/submit.php?url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Submit this to DesignFloat'>Submit this to DesignFloat</a></li>
<li class='sexy-technorati'><a class='external' expr:href='"http://technorati.com/faves?add="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Share this on Technorati'>Share this on Technorati</a></li>
<li class='sexy-scriptstyle'><a class='external' expr:href='"http://scriptandstyle.com/submit?url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Submit this to Script & Style'>Submit this to Script & Style</a></li>
<li class='sexy-myspace'><a class='external' expr:href='"http://www.myspace.com/Modules/PostTo/Pages/?u=http"+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Post this to MySpace'>Post this to MySpace</a></li>
<li class='sexy-blinklist'><a class='external' expr:href='"http://www.blinklist.com/index.php?Action=Blink/addblink.php&Url="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Share this on Blinklist'>Share this on Blinklist</a></li>
<li class='sexy-friendfeed'><a class='external' expr:href='"http://friendfeed.com/?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' title='Share this on FriendFeed'>Share this on FriendFeed</a></li>
<li class='sexy-newsvine'><a class='external' expr:href='"http://www.newsvine.com/_tools/seed&save?u="+ data:post.url + "&title=" + data:post.title' rel='nofollow' title='Seed this on Newsvine'>Seed this on Newsvine</a></li>
</ul><div style='clear:both;'/></div><p><a href='http://www.spiceupyourblog.com/2010/10/sexy-bookmark-share-love-gadget.html' target='_blank'><font color='#ccc' size='small'>Blogger Tips - Get This Gadget</font></a></p>

</b:if>

Note 1 - The code at the top and bottom in Red makes the gadget only appear on the post page of your blog and not on the home page to help with blogs using Read More and Post Summary's.If you want the gadget below your posts on the Home Page also just remover the Red code.

Note 2 - If you feel comfortable changing the code you can move around the position of the buttons to have your favorite Bookmarking sites at the top.

Step 7 .Save Your Template and the new Share The Love sexy bookmarks are in place !

We have a selection of Sexy Bookmarks gadgets exclusive to Spice Up Your Blog Readers Check Them Out Here :

- Sharing Is Caring Social Bookmarks
- Share The Love Social Bookmarks
- Sharing Is Sexy Social Bookmarks
- Share The Wealth Social Bookmarks
- Share The Knowledge Social Bookmarks

Drop Your Comments And Questions Below.

Auto Share Your Posts On 35 Social Networks

When you add a new post to your blog you want to update your friends and followers on Social Networks and Social Bookmark sites.The more sites you share your latest post on the more visitors you get to your blog but updating lots of sites often takes longer than writing the post in the first place.

That's were ping service Ping.Fm comes in.Ping.Fm can automatically update 35 social network and bookmarking websites with one click.So when you publish your latest post you can auto update Facebook, Facebook Pages, Twitter, Google Buzz, Myspace, LinkedIn, Posterous, Delicious and more..

Click Here To View Full Post >>

Best Blogger Templates

Many of you will be aware of the Blogger Templates Blog we connected to Spice Up Your Blog back in May this year.I had set up this new free templates blog using a Sub Domain of Spice Up Your Blog namely 'www.Templates.SpiceUpYourBlog.Com' and added templates periodically.The reaction was fantastic and over the last few months the number of visitors has risen to almost match Spice Up Your Blog itself !

With that in mind over the last few weeks i have put in a lot of work to Improve the templates site.The name was changed to Best Blogger Templates and a complete redesign was added.I made it much easier to navigate and find the template you want quicker and easier, over the last week a unique Facebook page was added, a new unique feed address and today i took off the shackles and added a sparkling new Domain - www.BestBloggerTemplates.Net .

Click Here To View Full Post >>

Sunday, 10 October 2010

What Are Blogger Limits On Blogs, Labels, Posts, Images, And More

I recently received an Email from a reader who was surprised to find out they had reached the limit on the number of different Labels they could use on their blog.While Blogger does not have many restrictions there are some limits for things like total labels and labels per post.So before you get taken by surprise lets look at the Limits And Restrictions Blogger have in place...

Number of Blogs - There is no limit to the number of blogs you can create in your Blogger/Google account.

Number of Posts - Blogger have no restriction on the number of posts you publish on your blog.

Size of Posts - Your Blog Posts can be as large or small as you like.Very long posts especially with lots of images will cause severe page load delays so don't over do it or you may loose visitors.

Click Here To View Full Post >>