Thursday, 31 March 2011

Blogger Launch 5 New Dynamic Views Templates

Blogger today launched 5 new templates that can totally transform how people view your blog.

"...These new views use the latest in web technology, including AJAX, HTML5 and CSS3, to deliver a host of benefits to you and your readers : Infinite scrolling: read more posts without having to reload or click to a second page, New layouts: different views suited to different types of blogs, Speed: download images as you view them, not all at once in advance, Interactivity: there are now more ways to experience and engage with blog content..."

Blogger Dynamic Templates Video




View Your Blog With Dynamic Templates


You can see how your blog looks with these dynamic templates by simply adding /view to the end of your URL.So to view Spice Up Your Blog using these templates this would be the URL (Click the link to check it out in a new window):

www.spiceupyourblog.com/view

Helpful Links


Blogger are still working on these amazing designs and you can give your opinion - Dynamic Templates Feedback

Check out the Blogger post on these templates - Blogger Buzz

You can also get more help - Help Center Article


The Blogger team promised 2011 would be a big year and they are starting to deliver, these templates while still in infacy are simply Awesome !

Drop Your Comments And Questions Below.

Wednesday, 30 March 2011

Simple Print Friendly And PDF Buttons For Your Blog Posts

Print PDF FriendlyIn this post i have an Exciting New, Extremely Easy and Professional way for you to make your blog posts available to print and download in PDF (Portable Document Format).We will add from a choice of neat buttons to your posts that readers can click to view a Print And PDF friendly version of your blog.

What Is Print and PDF friendly ?

Click Here To View Full Post >>

Monday, 28 March 2011

How to Create a Blogging Community

create blogger community
Guest Post - By Kitty Holman.

When we blog, we must try to create a thriving blogging community. In other words, it's important that we can access a network of like-minded bloggers who can help us if we need help and vice versa. In this case, blogging then becomes more than simply writing and publishing on our own blogs; instead, it becomes an activity that allows you and other bloggers to join together into a community of voices. Once this happens, you can really see how powerful blogging truly is.

But how do you create this thriving community? Follow these tips to see if you get any ideas.
Click Here To View Full Post >>

Sunday, 27 March 2011

Beautiful Animated Hover Effect Captions For Images On Blogger

Css3 Blogger Tutorial
In this post we have not only an amazing effect you can add to the images you use in your blog posts but it's amazingly simple and amazingly fast so wont slow down you page load time.The effect is similar to what you will see on many Featured Posts Gadgets, when you hover your cursor over the image a caption scrolls up from the bottom with your selected text.

So, you can have the title of the image, a description, date taken, credit or anything you like.The code we will use has No Javascript this ensures it will load fast and as i said not slow down your blog.The code is all Css3 (Don't Worry I Will Keep It Simple) so you have a flowing and transparent effect with the caption.There is also a stylish Shadow edge around the image On-Hover.
Click Here To View Full Post >>

Thursday, 24 March 2011

BuySellAds.Com Review And Interview With Founder Todd Garland

BuySellAds.Com review and interviewIn this post we will look at BuySellAds.Com (BSA), a site that makes selling direct advertising on your blog quick and easy while leaving you in control.I also have a short interview with Founder and CEO Todd Garland, Todd took the time to answer a few questions i thought would relate directly to Spice Up Your Blog readers.

BSA was created with the intention of taking the pain out of buying and selling ads, a process that otherwise is time consuming and frustrating.They also display your blog to potential advertisers you otherwise would not be able to attract, advertisers can find your blog in the BSA directory when searching for suitable publishers.

So lets first take a run through the process.

Quick Overview Of BuySellAds.Com


1. Submit your blog - BSA review all blogs before they can join the programme.Your blog must be established, have unique content and a healthy number of monthly impressions.

2. Create Your Ad Zones - Once accepted you can log in and create some zones for ads, Popular zones are the header and sidebar.The main script must be added first then you are provided with code for the actual area the ads appear - Create An Ad Zone Tutorial.

3. Advertise Here - Once you have the ad code in the zones the grey "Advertise Here" banner will appear.Visitors to your blog can click on the banner to view your directory page and purchase ads.

4. Ad Sold - As soon as an advertiser buys an ad the Advertise Here banner will automatically be replaced with their ad.

5. Cash Out - You can request a cash out via Paypal, Cheque or wire transfer once you have $50 Now $20 in your account.

6. Our Fancy Colorful Effects On Banners - You may have noticed the cool effect we use on the BuySellAds banners.Find out how to create it on your blog here : Buysellads.com banner ad effect tutorial.

Remember you are in control of the ad spots you make available, the price you charge and you can change your settings so you have to pre-approve any ads before they are displayed.You can get a full list of help articles from installing the ad zones to getting paid here - BuySellAds Help


Interview With BSA Founder Todd Garland


I asked the BSA Founder and CEO a few questions, here is what he had to say.

Spice Up Your Blog - I notice most of the sites selling ads on BuySellAds are in the Technology And Web Design Niche.First, do you accept sites from all niches and have you advertisers looking to advertise on other niches ?

Todd Garland - Yes, we accept sites form all niches, from cupcakes, to weddings, to motorcycle blogs and more. We are much stronger in the tech than other verticals, but we’re always working to increase activity for both advertisers and publishers across many verticals outside of tech.

SUYB - As most of my readers are Blogger users have you a policy when it comes to accepting blogs using the Blogger Sub Domain (Blogspot) ? I hear blogs using the sub domain are less likely to be accepted.

TG - That is correct. In our experience, .blogger sites tend to have lower traffic than is required to sell ads directly to advertisers with a system like BSA. Sure, there are edge cases and this does not apply to all .blogger sites.

SUYB - Are the links in the Ads Do-Follow ?

TG - We don’t specify. The ads are served us using JavaScript and we do not sell them with the intent of the ads passing any SEO value.

SUYB - Apart from Impressions what do you think is a sites main selling point (Alexa Rank, Page Rank, Followers, Fans etc..) ?

TG - I think it’s the quality of content on their site and the number of existing advertisers they have.

SUYB - What tips if any would you give to users to help sell more ads ?

TG - Write the best content you can write, hustle, and grow your community.

Sponsored Tweets


At the time of writing BuySellAds.Com have just launched a new feature called Sponsored Tweets.As the name suggests advertisers can "Buy A Tweet" on your Twitter account.For more information check out the BSA Blog Post On Sponsored Tweets.

You can view the Spice Up Your Blog listing on BuySellAds.Com or Submit Your Blog to BuySellAds.Com and start selling ads today.

Drop Your Comments, Views And Questions Below.

Wednesday, 23 March 2011

Text Wrapped Twitter And Facebook Buttons At Top Of Posts

Today as i was replying to the Emails from my contact form i got a bit of a surprise.One Email asked "I like to add Facebook share and tweet buttons to my blog post same like your blog (share and tweet buttons at the beginning of the post text). thanks:)".So i went to my list of posts page for Spice Up Your Blog to get the link to the tutorial for this to send back.Then i realised i have never actually covered it in a post.

I have showed how to have a Twitter counter at the top of your posts and even a Ttwitter and Facebook button in a fixed floating position, but not how to have the Twitter and Facebook Counter Buttons at the start of posts wrapped in text.It's actually quiet an easy tutorial..

So lets do it !

The Twitter button i will be using is the Most recent updated Twitter Button that includes a link to your Twitter Profile.You will see if you use the Twitter button on any of the posts in this blog the link you post on Twitter includes a link to my Twitter Profile and once you share the link you are given the option to follow me (If Your Not Already).So the button not only gets people sharing your posts but also gets you more followers.The facebook button is the standard counter button not the Like Button.

I am using these buttons at the time of writing the post but as you know I'm always changing so for future reference i have a live demo below.

Live Demo - Twitter And Facebook Button Demo

Add Twitter And Facebook Buttons To Blogger


Step 1. In Your Blogger Dashboard Click > Design > Edit Html > Tick The Expand Widget Templates Box.







Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code - More Info)

<data:post.body/>

Step 3. Copy And Paste The Following Code Directly Before / Above <data:post.body/>

<div style='float:left; margin-right:10px;'>
<a class='twitter-share-button' data-count='vertical' data-via='PaulCrowePro' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/><br/>
<a href='http://www.facebook.com/sharer.php' name='fb_share' type='box_count'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/><br/><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>

Important - Replace My Twitter Username In Red PaulCrowePro With Yours, If you don't have one Leave It Blank.

Step 4 Save Your Template.

The buttons will now be at the start of all your posts for readers to share your content, we have lots more Social Bookmarking Gadgets for you to check out.

Drop Your Comments, Views And Questions Below.

Sunday, 20 March 2011

How to Get Inspired and Enhance the Relevance of Your Blog Posts

Maybe you have a science blog and are constantly searching for new ways to make t-cells interesting. Maybe you have a fashion blog, and you're always on the lookout for the next big trend. No matter what type of blog you host or writing you do, there inevitably comes a time when your own ideas grind to a halt. Unfortunately, when this happens, it is more than just writers' block. When you become so engrossed in one particular subject, even though you may be able to write about it for hours on end, the real struggle becomes finding the inspiration to take your writing to a new level or in a different, fresher, direction.
Click Here To View Full Post >>

Thursday, 17 March 2011

New Subscribe By Email Rss Form For Blogger

In the last post we got a sneak preview of the New Blogger Design coming in 2011, Blogger had also promised lots more new features.And just a day later they have added an Email Rss Form to the Gadget Directory so you can easily provide the option for your readers to get your latest posts delivered to their inbox.By coincidence i also published a post this week about how Google connect their other services with Blogger and the Email Rss Form is connected with the Google owned Feedburner.

Email Rss has been provided by Feedburner for a long time and before you had the option to "Burn A Feed" for your blog, Activate Email Rss, Grab The Code For The Email Form and then paste it into a Html/Javascript gadget on your sidebar.Now this whole process has been cut down to 3 clicks without the need to leave Blogger.

"...The Follow by Email gadget provides blog authors a simple way for their readers to subscribe to the latest hot-off-the-press updates, which are delivered directly to the reader’s inbox. When new blog content is published, all subscribed readers will receive a daily email notification of the new published posts, which includes a copy of the new content as well as links back to the actual posts..."

So lets first look at a screenshot and then how you add the Email Rss form to your blog.

Screenshot Of Email Rss Form

Blogger Email Rss Form

Add The New Email Rss Gadget To Your Blog


Step 1. In your Blogger Dashboard Click Design > Add A Gadget





Step 2. You will see the new option "Follow By Email" at the top of the list, click the plus.




Step 3. You Will now be brought to a Page with options for your feed and the title of the gadget.If you already have a feedburner feed you can enter it were shown below, if you don't have a feed one will automatically generated for you.



Step 4. You can now save the gadget.

Options - I would highly recommend you take advantage of some of the other options available on feedburner.Remember once you add this gadget to your blog a Feedburner account is automatically created for you.You can log into this account with the same Email and Password as you log into Blogger - Log Into Feedburner.

That's your new Email Rss form, i may look at some Css options to Spice It Up a bit so keep an eye out for that.Check out some more Feedburner Tips and Blogger Gadgets on Spice Up Your Blog.

Drop Your Comments, Views And Questions Below.

Wednesday, 16 March 2011

16 Stunning Free Gallery Style Blogger Blogspot Templates

Blogger Gallery Templates
In this post we will continue my list of The Best Free Blogger Templates in the most popular styles.We have already listed the best Artistic Templates, Magazine Templates, Dark Templates and Odd Templates.Today i have listed some awesome Template with a Gallery design.Gallery templates can be used for any type of blog but are most popular with Photography Blogs, Design Blogs, Image Based Blogs and Portfolio Blogs.The basic premise behind a Gallery template is the posts are displayed on the home page as images, so the first images is cropped into a thumbnail and displayed.Some of the templates i have listed below are set to display up to five rows of images.The templates have lots of other features listed with the screenshot and for the Live Demo and Download details simply click the title.

Top 16 Gallery Blogger Templates


1.

Simplex Portfolio - Photography Blogger Template




Template Info : The simplex portfolio free blogger template is a fantastic template for any photographers looking to display their photos in a blog.The template has a large photo slider that slides through selected photos and 12 smaller photo areas.The template also has a posting area for text and other information,This template is perfect for photographers of all levels from beginners to professionals.

Simplex Blogger Template

2.

Magnesiumize - Pro Gallery Blogger Template




Template Info : Magnesiumize is a Magazine Gallery Template suited to Photography And Design Blogs.The template has a professional design and color scheme.The template is made up of Three columns of post summary's on the Homepage and Two Columns with a Right Sidebar on post pages.Included is a Featured Content slider, Four Column Footer and more.

Professional Blogger Temlate

3.

Work A Holic - Photo Display Template




Template Info : The Work A Holic Template is a specialist style for Photographers, Designers or just blogs that display lots of images.The home page displays the main image from the nine latest posts which can be clicked to lead to the full post or more images.When the home page images are hovered over they also display a message.The template also has a sub header and a three column footer section.The design is clean and white.

Photo Display Blogger Template


4.

Creative By Nature - Gallery Blogger Template



Template Info : Creative By Nature is a Three Column Blogger Template with No Sidebar as the columns are used to display posts.The template is perfect for Design Blogs, Photography Blogs, Portfolio Blogs and other blogs focusing on Pictures and Images.The posts are represented by the main image on the home page.

Creative Gallery Blogspot Theme


5.

Premium Gallery - Photographer Blogger Template




Template Info : Premium Gallery is a specialist Blogger template designed to display photos and images.The home page will display thumbnails of 20 pictures which can be clicked to lead to a post with the full image and text.

Premium Blogspot Gallery Theme


6.

Portal Folio - Special Portfolio Template



Template Info : Portal Folio is a specialist Blogger Template for Portfolios, Showcase Blogs, About pages etc..The template uses a clean white theme with a gallery slider and about section in the header.Below the top section is three columns for your info and details.

Portfolio Blogspot Theme


7.

Blue Folio - Bright Gallery Template



Template Info : Blue Folio is a sky blue Gallery Magazine Blogger Template.The Blue Folio template is made up of two columns with a right sidebar.The template has a compact headers section and image only post summary's making it perfect for photo blogs, design blogs and other portfolio blogs.

Bright Gallery Blogspot Template


8.

iShowcase - Black Gallery Template



Template Info : I Showcase is a gallery magazine style blogger template.The template is made up of two columns with a right sidebar and a Block color scheme.The home page displays only an image from each post in three sections of three.This makes iShowcase great for Photography Blogs, Design blogs and other professional Blogs.

showcase gallery blogspot templates


9.

Brown Galleria - Gallery Mag Template



Template Info : Brown Galleria is another great Gallery Magazine template.As with all gallery templates the home page uses fixed summery sections displaying only the first image from each post.This make Brown Galleria a great template for Image, Design or photography blogs.The template is made up of two columns with a right sidebar and a brown color scheme.

Brown Blogspot Theme


10.

Poster Inc - Gallery Blogger Template



Template Info : Poster Inc is a two column gallery Blogger template with a right sidebar.The color scheme is bright with a white background.The posts are displayed as thumbnails on the home page making it great for Photography and Portfolio Blogs.

Poster Inc Blogspot Template


11.

White Magic - Photographers Gallery Blogger Template



Template Info : White Magic Is a Two Column Gallery Blogger Template with a Right Sidebar.The template has a minimal look and is perfectly designed for Photographers, Portfolio Blogs and any Blogs Displaying Images and Designs.The Main Color is White and among the features are Two Column Photo Display on home page, Search Menu and Footer Columns.

White Magic Blog Theme


12.

Minimal Design - Gallery Blogger Template




Template Info : Minimal Design Is a Three Column Gallery Blogger Template with a Right Sidebars.Minimal Design is a Css template making it quick to load.The posts and two narrow sidebars can be use to display images making it a great choice for designers, photographers and Portfolios.The color scheme is bright with a retro feel.

Simple Gallery Blogger Template


13.

Designer Beauty - Gallery Blogger Template



Template Info : Designer Beauty Is a Two Column Blogger Template with a Right Sidebar.The template has a simple design with a bright look, the main color is white.The template features fixed summery boxes to display the posts on the home page with a gallery effect.Other template features are Ads sections, Search and Numbered Navigation.

Web DESIGN Blogspot Theme


14.

Showcase - Gallery Blogger Template




Template Info : Showcase Is a Two Column Gallery Blogger Template with a Right Sidebar.The template has a specialist design to display posts by the main image on the home page.Template features include icons beside selected sidebar titles, unique blog description above header in menu and wood effect background.A great template for design blogs and photography blogs.

Image Gallery Blogger Theme


15.

PhotoPlus - Digital Photography Blogger Template




Template Info : Photo Plus Is an advanced photography Blogger Template.This template is designed to display images only not proper blog posts.All images added will have a thumbnail and full view.The thumbnails are displayed in five columns and there are three columns below for info and gadgets.

Picture Display Blogger Template


16.

Video Blog - Gallery Blogger Template



Template Info : Video Blog Is a Two Column Blogger Template with Left And Right Sidebars.The Video Blog template is perfect for Movie Blogs or Music Blogs with the posts displayed in a gallery format.The Video Blog theme features Ads Ready Header, Search, Rounded Corners, Hover Effect Menu Bar and more.

Video Blog Blogger Template

That's 16 great Gallery Blogger Templates have you a favorite ? Check out some of our previous Best Templates Lists and BestBloggerTemplates.Net Has Hundreds More Free Blogger Templates.

Drop Your Comments, Views And Questions Below.

Tuesday, 15 March 2011

Exciting New Design Coming To Blogger In 2011

new blogspot design video
2010 seen the most major additions to Blogger in a long time.Now the Blogger team have reveled some of the exciting things in store for 2011.A whole new design is in store for Blogger users as a cleaner more efficient interface is introduced.

Your Blogger dashboard will get a much needed face lift making it fresher with a focus not only on your Blogs but also the Blogs you Follow.The new Blogger Post editor which has only been around a short time is also getting an overhaul.

Blogger broke the news of the updates with a cool video and while they are not giving away too much i also have a few screenshots of the new dashboard and post editor.
Click Here To View Full Post >>

Thursday, 10 March 2011

Important Information On Images You Upload To Blogger

Blogger Picasa LogoSince Google took over Blogger in 2003 they have fully integrated almost every part of the system with their other services.In fact if you stand back and look at it Blogger was the perfect acquisition for Google as they can run so many of their other products alongside it.

Let me show you why I'm referring to :

Blogger - Your Blogger account is now part of your Google account.

Picasa - The images you upload to your blog are hosted on Google's image hosting service, once you upload your first image a picasa account is created for you.

Feedburner - Google own the most popular Rss Feed service and have recently taken advantage of this to offer extra options for Blogger users.

YouTube - Videos you add to your blog will be hosted on YouTube and recently you got the option to add YouTube videos directly from your post editor.

AdSense - You can monetize your blog with AdSense directly from your blogs Design > Add a gadget page.Many people with websites and other blogs find it hard to get approved for AdSense, in fact some people create a Blogger blog in an effort to get approval.


Google Fonts - Google have recently integrated their web fonts with the template designer allowing users to use a wide selection of fonts on their blogs.


AdWords - Over the Christmas Google offered a free $100 voucher to Blogger users.I actually took them up on the offer and have to say I'm delighted with the results, i had to add $5 to get the campaign started but i then had $105 of AdWords advertising.

Webmaster Tools - Blogs you create are now automatically added to your webmaster tools account, when you log in you have a one click option to add a blog rather than going through the verification process.

Google Friend Connect - Also known as Followers, the Followers gadget is added to each blog and other gadgets can also be added from the directory.

Remember your Google Email or Gmail you use to log into Blogger is actually your Goolge account an can be used to log into all these services and more.

This is part of how Google manage to grow, they acquire websites and services they know they can connect with other sites they already own.Other Google services i also use in connection with my blog include Google Code, i host all the scripts i share with your on Spice Up Your Blog on Google Code, Google Affiliate Network, Although i don't use it as much as previously.

So by using Blogger, Google are introducing you to many of their other services that you may continue even using if you stop blogging in the future.

Google Accounts


This brings me to the point of this post and how having all these services connected to one account can cause trouble down the line.In a recent post on The Real Blogger Status a great Blogger related blog by one of the top moderators in the Blogger Help Forum called Nitecruzer or Chuck he made a great point about the images you use on your blog.

As all images you upload to your blog are hosted on Google's images hosting site Picasa, if for some reason you closed your Picasa account all those images would vanish.That would be a disaster to any Blogger, but you may ask why would you close your Picasa account ? Chuck makes a few examples.

If you are a member of a team blog (Blogs can have up to 100 contributors, more info can be found via Settings > Permissions) and in the future you have stopped contributing and decide to close you Google account.

If you transfer the ownership of your blog you may decide to delete the Google account that was connected.

Probably the most common occurrence would be changing the account you use to log into and post to your blog.I am the perfect example of this, when i created Spice Up Your Blog i was using the Email PaulCrowe77(at)Gmail.com, as the blog grew i decided to have a unique Email attached to the blog and everything related.So i created Spiceyourblog(at)Gmail.com, i then gave that new Email permission to the blog and still use that every time i log in.Now...I had published around 40 posts before i changed so if i were to delete PaulCrowe77(at)Gmail.com all the images from those 40 posts would be gone !

I hope i haven't lost you, if you don't understand the permissions process of inviting people to your blog it could be hard to follow.But i guess the best thing to do is simply don't delete any Google account and you will never have anything to worry about.If your not using a Google account just let it sit there in obscurity, it's not like it will effect you in any way.

Drop Your Comments, Views And Questions Below.

Tuesday, 8 March 2011

Use Automatic Read More Jump Break With Thumbnail On Blogger

Blogger Read More Automatic
On Blogger you have the option to add a jump break to your posts, so the posts will be displayed with just a short summery on the home page and a link to read the full post will be below.The jump break has a number of great advantages, if you display full posts on your home page it will severely slow down the load time, Also With the jump break in place visitors that land on your home page will see a selection of your posts without the need to scroll.It's also more professional looking and as visitors have to click through to the full post it increases page views.

Update again 05/12/2012 - If you are using this hack you will notice it stopped working.The script caused this as it stopped working.I have added a new script here so it works fine but if you added it before the date above you will need to make a change.

Simply find this line of code in your template :

http://bloggerblogwidgets.googlecode.com/files/auto_readmore_blogger.js

And replace it with this :

http://widgets.way2blogging.org/blogger-widgets/w2b-auto-readmore-blogger.js

Sorry for any inconvenience, these things happen sometimes.

In this Blogger Tip i have a script that will automatically turn your posts into read more summary's on your blogs home page with a few added extras.Here are some of the features of an auto Read More along with a live demo :

- Your posts will automatically be displayed as short summary's with a read more link.
- An image from the post will be re sized into a thumbnail and displayed beside the summery.
- You can choose how much text is displayed in the summery.
- You can choose the size of the thumbnail.
- All Previous posts will also have the jump break so you don't need to go through your archive adding it.

Live Demo - I have added the code to a test blog using the Simple Template from the Blogger template designer and you can see it here - Auto Read More Demo.

The script is used on Most Magazine Templates i publish on my Blogger Templates Site so i thought why not make it available on all blogs ? As well as posts having the jump break on your home page it will also be used on your label pages and archive pages.

Update 07 June 2011 - I have improved this code so your static pages will display properly.With other versions of this code your static pages will have the read more added but will not open when clicked.Now your pages will display fully without the read more jump break.Update helped with thanks to Harish from Way2Blogging.

If you added the old code you will need to replace it with the updated code.To see exactly what you need to replace you can see the old code here with instructions.

Add Auto Read More Post Summary's To Your Blog


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 the following piece of code in your blogs Html : (Click CTRL and F for a search bar to help find the code - More Info)

</head>

Step 3. Copy the following code and paste it Directly Above / Before </head>

<script type='text/javascript'>
var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 120;
img_thumb_width = 120;
</script>
<script type='text/javascript' src='http://widgets.way2blogging.org/blogger-widgets/w2b-auto-readmore-blogger.js' ></script>

Important

The code in red sets how the post summary's are displayed.Remember if a post has an image it will be re sized into a thumbnail to be displayed beside the summery.If the post does not have an image just a text summery will be displayed.

summary_ noimg= 430; --> The length of the summery if the post does not have a thumbnail.
summary_img = 340; --> The length of the summery if there is an image in the post that will be converted into a thumbnail.
null_thumb_height = 120; --> The height in pixels of the thumbnail.
null_thumb_width = 120; --> The width in pixels of the thumbnail.

Step 4. Find the following piece of code in your blogs Html : (Click CTRL and F for a search bar to help find the code - More Info)

<data:post.body/>

Step 5. Replace <data:post.body/> With The Code Below

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>
createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<div style='clear: both;'/>
<span class='rmlink' style='font-weight:bold;padding:5px;float:right;text-align:right;'><a expr:href='data:post.url' >Read more ... </a></span>
</b:if>
</b:if>

Note - You can change the text in red from Read More to "Continue Reading", "Read Full Post" or anything you like.

Note 1. You should try to have the first image in your posts as close to square as possible so they work well when used as thumbnails on your home page.Images that are for example rectangle in shape will appear distorted when they are re sized.I use a version of this script on this blog and always add an image at the top of the posts that are close to square, then size then wont make a big impact on the appearance.Remember it's the first image in each post that is used as a thumbnail.

Step 6. Save Your Template.

That's it for this Blogger tip, All your posts including all archived posts will now be displayed with a summary and read more on your home page, labels pages and archive pages.Check out more of our Blogger Tips and Blog Gadgets.

Did you know you can use a Jump Break In Your Full Feed ?

Drop Your Comments, Views And Opinions Below.

Wednesday, 2 March 2011

Blogger Stylish Hover Effect Thumbnails Only Related Posts

Blogger Related Posts GadgetBack in December i published a post showing you a great Related Posts with thumbnails gadget.That gadget displayed a selected number of related posts generated using labels, the posts are displayed using a thumbnail with the title of the post below.That post has been one of the most popular on Spice Up Your Blog over the last few months and today i have another Related Posts With Thumbnails Gadget but with a very cool feature.

I found this gadget in a template i published on my Templates Blog BestBloggerTemplates.Net and knew it would be popular.This Related Posts gadget does not display the title of the post below the Thumbnail but rather has a Hover Effect to display the post title.So below your posts will be just the thumbnails but when you hover your cursor over them the thumbnail is replaced by the title.

Hmmm not easy to explain in text so take a look at the screenshots and live demo below.
Click Here To View Full Post >>