Expandable Posts New Feature "Insert Jump Break" added in Blogger by Default

What is Expandable posts ?
A link option to read Full story. This setup avoid loading page time without necessary. Generally this link display various types as "Full Story" or "Continue Reading" or "Read More" or any text to expand.
Various Blogging platforms provides various options to enhance readership. Wordpress has already plugin to post break from displaying of Full story. Expandable Blogger posts is normally possible by slightly changing the Blogger Template.
Now 10th anniversary of of Blogger introduces some New features like "Default expandable Posts" "Custom Labels Widget". To activate blogger Read More option, Login to Blogger in Draft. Change the setting to Make Blogger in Draft my default dashboard. Now you can find a New Option "Insert Jump Break" in post editor.

Type the content as you want before and after the Insert Jump Break. This option gives more control to Blogging in Blogspot hosted Blogs.

Read This:How do Add Meta Tags for Blogspot Blogger ?

Read More

Add Background Image to Blog

Beautiful or Favourite Theme to Blog background makes a Good look. How do add Background Image to Blog? This post special focus on Blogger Blogs. But Wordpress, Typepad or any Blogging platform follows the same basic method to show image in background of the blog. You can add Image to Websites on self hosted also, You requires image uploading to Root Directory if Self Hosting.
First create suitable image to Blog Background, Next Follow the simple Template Modification steps to Display Image as Background to Blogger Blogs.

Login to Blogger >> Dashboard >> Layout >>Edit HTML >> [Backup your Blogger Template before any Modify]
Find the following line

body {
(or)
body{

Copy and Paste the following code after the above line

background-image: url(http://www.yourimageurladdress.com);
background-attachment: fixed;

Note: Change the URL address to your image in the code. Paste the code in appropriate location after Background or Background-color and This is may vary to custom templates.
Warning: Images must be small size(Format:Gif, Jpg, Jpeg), Don't use .Png extension images. Large images may take long time to loading, Use small as possible.

Preview and save Template.

Read This : Optimize Images to Search Engines

Read More

Rounded Corners by CSS Style to Blogger Blogs

What is Rounded Corners? This is a Round Shape corners instead of Square type corner. This round type corners not important to Blogging, But need to Beautiful design. Actually this type corners made by images in Blogger Templates. Default Rounded type Blogger(Blogspot Hosted) Templates using images to Style Corners. This type of images takes long time to load. If continue using this type, May loss Low Speed Internet Users as Readers.

Before and After Rounded Corners

I find many Websites to Generate CSS(Cascading Style Sheets) Codes for Rounded Corner Style. You can customize values like Color, Border width and Many more. This Change is simple no any critical Steps to Follow. I think the following two Websites Generate suitable codes with your Custom Options.

Spiffy Corners : This is simple and easy Code Generator, But unfortunately works only 5PX option. Color palette gives very high user friendly colors.

Roundedcornr : This Website has lot of options to customize CSS Style Corners than the previous website. This site has lack of Onsite color choosing option. So choose best one based on requirements.

How do Add Generated CSS Code into Blogger Template?
I choosed Spiffycorners code to explain here.
Login to Blogger >> Dashboard >> Layout >>Edit HTML [Backup your Blogger Template before any Modify]
First Step :
Copy and Paste the generated CSS code before </b:skin>
Your Template code must be the following style(Preview)

Next Step :
Add Generated HTML code where you want. You can choose Header, Main, Sidebar, Footer or any place you likes to show Rounded Shape Corners.
Actually split the code into Three parts.
Remove the line(This is centre part) <!-- content goes here -->

I choose Main Blog Posts Layout for Rounded Corners here.
Find the following code in your template

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>

Note : This code may vary in some Custom Templates, If you face any difficult, Try based on "Blog1" or "Blog Posts".
Add the First part of the HTML Code before this line and Last part of the HTML Code after the line.
Preview of Blogger Template Code must be the following style:


Check preview of Blog, If you satisfy, Save Template.
Note : Color Matching of Blogger Template Layout Backgrounds and CSS Style Code are necessary for best Appearance.
If you Find any errors or Having any easy method Share Here via valued Comments.
Read : How do better Posting to Blogger

Read More

How do Increase Blog Loading Speed

Loading is very crucial in Blogging success. I think loading of website very important for your visitors and also for search engines. Most of your readers use Low Speed Internet Connection.So you may loss 10% readers for every 3 seconds late of page load.
Check your page loading time, Means note the time from press enter after type the address in Browser to Completely load the page.
How do solve this problem for fast loading? Remove all unnecessary content and Compress template.This method is suitable for All websites or Blogs including hosted in Blogspot, Wordpress,Etc.
No need compress whole template,Compress only between the tags
<b:skin>
</b:skin>
Link for Compress Code

Visit Blogger Template Compress here:

You can see 28% template compression after compress.
Note:Take backup before any modify to template. Change the Compress settings suitable to your need.This is perfectly work for all CSS Templates.

Read More