How To Add CSS Image Morph Effect To Post Images On Blogger

A few days ago, I posted How to add CSS auto zoom effect to post images on blogger. Now I am continuing with image effects this time with something really awesome. Adding image morph effect to blogger blog is quiet easy even beginners can easily add this amazing effect by following some simple steps.

What's New In This Effect?

The main feature of image morph effect is on hover, images will spin and morph from square to circle. This effect has complete 3D style look. By clicking on the below link you can see live demo of image morph effect.

LIVE DEMO

How To Add CSS Image Morph Effect To Blogger Blog

1. Login to Blogger.com
2. Go to Dashboard.
3. Click on "Template Section".
4. Click on "Customize"
5. Click on Advanced > Add CSS.
6. Copy the below code in CSS Section.

/* CSS Image Morph http://www.makesomesense.com */
.post img{border:10px solid #fff;overflow:hidden;-webkit-box-shadow:5px 5px 5px #111;box-shadow:5px 5px 5px #111;-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;-ms-transition:all .5s ease;transition:all .5s ease;margin:20px}
.post img:hover{border-radius:50%;-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}
/* CSS Image Morph http://www.makesomesense.com */

7. Click "Apply Blog" to save settings.

That's it your work done.
Enjoy Blogging!

How To Add CSS Auto Zoom Effect To Post Images On Blogger

OK, so today i am going to share another post and today post is related to Advance CSS effect that how to add CSS auto zoom effect to post images on blogger blog. Every blogger and webmaster wants something unique in their site/blog for this you have to change something so that you can easily attract visitors. Due to the advancement of CSS code we can now use better effects in blogger. Even beginners can easily use CSS code. For adding this effect you have to add only one CSS code to blogger and can see auto zoom effect to post images.

Whenever you move mouse cursor towards post images it will automatically give a zooming effect which looks cool and unique. To know how to add CSS auto zoom effect to post images just follow the below steps.

LIVE DEMO

How To Add CSS Auto Zoom Effect To Post Images On Blogger

1. Login to Blogger.com
2. Go to Dashboard.
3. Click on "Template Section".
4. Click on "Customize"
5. Click on Advanced > Add CSS
6. Copy the below code in CSS Section

/* CSS image zoom effect http://www.makesomesense.com */
.post img {
height: 100%;
width: 100%; 
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease; 
} 
.post img:hover {
width: 150%;
height: 150%;
}
/*CSS image zoom effect http://www.makesomesense.com */

7. Click "Apply Blog" to save settings

That's it your work done.
Enjoy Blogging!

How To Place Post Title Before Blog Title For Better SEO

Post title and Blog title both are very important for SEO (search engine optimization). Both titles appears in search engine and more importantly appear as a clickable link. By default blogger displays blog title first and then post title which is not good for SEO. For better SEO (search engine optimization) you need to change default settings.

WHY IT IS IMPORTANT TO PUT POST TITLE BEFORE BLOG TITLE

Example how search engine displays your blog/website

Why we should use post title before blog title because whenever you publish your new post, no one knows what is really about. Only post titles describes about your post in few words and these few words works as the keyword of your post.Most important by placing post title before blog title makes your blog/website user friendly because keywords plays important role.But if you are displaying blog title first then you will not get good response from search engine. Because visitors will see blog title first and blog title doesn't describe few words about your post.

How To Place Post Title Before Blog Title For Better SEO

Follow the below steps to place post title before blog title.

1. Login to blogger.com

2. Go to Dashboard.

3. Click on Template section.

4. Click on "Edit HTML".

5. Press Ctrl+F and search for the below code.

<title><data:blog.pageTitle/></title>

And Replace it with the below code.

<b:if cond='data:blog.pageType == &quot;item&quot;'> <title><data:blog.pageName/> | <data:blog.title/></title>  <b:else/> <title><data:blog.pageTitle/></title> </b:if> 

6. Save template.

Work Done.

Enjoy!

How To Change Background Color Or Image In Each Post

When you want to make specific post stand out and when you have multiple authors on blog then you can change image or background color. Therefore, this tutorial will help you how to change background color and image in each post. It is quiet easy to change just you have to add some codes to make your blog look professional and unique.

Note: It won't effect your blog but make a backup first for safety step.

DEMO

How To Change Background Color 

When you create post there is option of HTML which is just near Compose tab you can see on the top left corner.just add the below code at the beginning and and at the end of your post content.

 <div style="background-color: #DCC368; padding: 5px 8px 5px 8px;">
Add your text here

</div>

Add the <div style> tag in red at the beginning of the post.
Change the color you like #DCC368 (search for color's hex value).
Add the </div> tag in blue at the end of the post.
And between both tags add your content.

It's done by wrapping your post content  into a "div" element. You can remove/change it later or you can apply this setting anytime to your posts which you already published.

                                   How To Change Background Image in Blogger Post

Add the following code at the start and end of your post content.

 <div style="background-image: url(Put Image URL here); background-repeat: no-repeat; "> Add your text here

</div>

Add the <div style> tag in red at the beginning of the post.
Add your image URL in green line as mentioned above.In green line you have to put URL address of hosted picture (Tinypic, Photobucket, Flickr, Blogger itself etc).
Add the </div> tag in blue at the end of the post.
And between both tags add your content.

Publish It, Your Work Done.
Happy Blogging!

Why You Should Ping Your Blog Or Website Content

Why you should Ping your blog or website content. This is most asked question on the internet by pro bloggers and for those who are running their sites. The main reason/purpose of ping is to inform our blog or website to the search engine servers that our website or blog is updated. By pinging website or blog SERP (Search engine rank page) increases web traffic.

Pinging website or blog to search engines is necessary for blog and website owner's.For this you don't have to worry as there are many sites on internet where you can easily ping your website or blog. One website which i know is PINGOMATIC. You can try it today!

Steps to Ping your blog or website content.

1. Put your url e.g: www.xyz.com or www.xyz.blogspot.com
2. Put your title eg: (This is my site) etc.
3. Put you Rss feed URL eg: http://feeds.feedburner.com/xyz or http://www.xyz.com/feeds/posts/default
4. Click on ping button.
5. It will take some time to ping and your work done.

Why You Should Ping Your Blog Or Website Content

1. To syndicate website or blog, pinging is only easy way to follow.

2. Pinging service is completely free. No registration or money required.

3. Pinging is easy process by which you can inform search engines about latest updates.

4. Pinging blog or website is a best practice to get into as it can make noticeable difference to how your pages and new contents get indexed.

5. The main benefit of pinging is that it provides a link back to your blog/website.

6. Ping a page whenever you update your website or blog as it will help to get indexed in search engines.

THREE IMPORTANT STEPS TO FOLLOW BEFORE USING PING SERVICE

There are three important steps to follow before using ping service which are as under.

1. Only ping your blog or website when you add fresh contents because extra 'pinging' won't help your blog or site and it can cause your IP address too which can be blocked by some services.

2.  There is no limit in pinging as much as you add your new contents you can use this service.

3.  Adding new contents to your site or blog is very good and you should aim to do atleast 2-3 times a week.

PING SERVICE I USE

1. Pingomatic.com
2. Totalping.com
3. Pingoat.net

Note: If you have blog on wordpress.org then your content will automatically be pinged. However if you want to ping your website/blog you can follow the above step.

How to Easily Backup And Restore Blogger Template

Today in makesomesense you will learn the basic tutorial of how to easily backup and restore blogger template. This is specially for beginner's as most of the beginner's makes mistake of not performing backup and restoring of blogger template in which they lose their data. It is very important for bloggers to know how to modify blogger template.

For avoiding this mistake you have to follow some easy steps because today we will not only guide you how to backup blogger template but we are also going to learn how to restore it.

How to Easily Backup Blogger Template

1. Login to blogger.com

2. Go to dashboard.

3. Click on 'Template' setting which is on left sidebar.

4. Click on Backup/Restore button.

5. Click on 'Download full template' 

6. Now your template is ready to download. Work Done!

                                           How to Easily Restore Blogger Template

1. Login to blogger.com
2. Go to dashboard.
3. Click on 'Template' setting which is on left sidebar.

4. Click on 'Choose file' and browser your blogger template file.

5. Click on upload.

6. Work Done!

Now you can easily backup and restore blogger template when you see something goes wrong. simply just restore blogger template. Problem solved!

Happy Blogging. Enjoy!

How to Make Your Blogger Blog Mobile Friendly

As you know, now a days millions of people are using internet on mobile instead of laptop or PC. More than that mobile devices now a days are coming with latest features, speeds and specs for example 3G, 4G, latest versions, more better software's that makes site or blog user friendly.

If you see the stats of blog or website you can clearly see that most of the visitors are using mobile operating systems which shows that how much there is usage of Cell Phones. If you will not make your blogger blog mobile friendly you will definitely lose mobile readers, in cell phones a normal blog takes a lots of time to load and there are other issues like in mobile screen site is not fitting properly.

Note: Now in blogger you can see there is already feature that makes your site mobile friendly but when you use other templates you have to add some codes to make your blogger blog mobile friendly.Below are two steps to make your blog mobile friendly.

How to Make your Blogger Blog Mobile Friendly

STEP ONE

Follow the steps to make your blogger blog mobile friendly.

1. Login to blogger.com

2. Go To Dashboard

3. Click on Template

4. Click on "Edit HTML'

5. Search for the below code

<b:include data='blog' name='all-head-content'/>

Paste this code below that line.
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>

<b:if cond='data:blog.isMobile'>

<meta content='width=device-width, initial-scale=1.0, user-scalable=0' name='viewport'/>

<b:else/>

<meta content='width=1100' name='viewport'/>

</b:if>

Work Done!

STEP TWO

Follow the below steps.

1. Login to blogger.com

2. Go To Dashboard
3. Click on Template
4. There is option of mobile on right side
5. Click on setting of mobile.
6. Click on Yes. Show mobile template on mobile devices. option.
7. Save it.

Work Done. Happy Blogging!

10 Killer Tips To Make Your Blog or Website's Load Faster

One of the web development important part is User experience. It is very important to make your blog or website user friendly. There are many blogs or website that have quality contents but are ruined just because of slow loading which visitors don't like. They also face other problems like less page views, returning visitors etc.If your website or blog takes time to load then users can leave your blog or website without loading it completely. So everyone wants to make to blog or site loads faster. In short every one wants speed. In this post you will learn how to make your blog or website's load faster. 

How To Check Speed Of Blog/Website?

If you want to check speed of website or blog then here is the best tool of Google where you can easily check speed below is the link

>> Google Speed Checker Tool

This Google speed checker tool is free and best tool which shows accurate loading time of blog or website.

Tips To Make Your Blog or Website's Load Faster

To make your blog or website's loading faster below are some effective tips. So let's have a look.

1. Try To Avoid JavaScript 

JavaScript is the main reason behind making your site loads slow JavaScript is web scripting language which is use to make scripts in website or blog. JavaScript no doubt is important part of website/blog but size of scripts are so big that it makes your blog loads slow so in nutshell try to avoid so many JavaScript and only use those scripts that you really need. 

2. Use Of Quality Templates

Try to use light templates and avoid using heavy templates because heavy templates are not well coded and have to many scripts that makes your blog load slow. Try to use well coded and quality templates for your site or blog and upload those images which are use in your template on your server.

3.Avoid Extra Widgets

Just remove extra widgets and use only those widgets which are necessary because using too much widgets can effect loading speed. Don't use extra or unnecessary widgets if you want to make your site/blog faster.

4. Don't Use Too Much Images

Avoid to use too much images. Images should be properly used in every post for example in one post use one or two images because images are heavy in size and it takes time to load this can also effect on blog load time.

5. Choose The Right Image Format

Choosing a proper format for images makes your blog/website's load faster. Try to avoid image format like JPEG because JPEG format is too large and heavy in size that takes time to load fast. The only solution is by converting images from JPEG format to PNG or GIF format. Because PNG or GIF image format doesn't take so much time to load and are not too large and heavy in size as compared to JPEG.

6. Avoid To Use Too Much Ads

Try to avoid using too much ads on your website or blog. There are many bloggers and website owners that are using too much ads just to earn more money but they don't know that at same time they also loose there traffic and visitors. Just try to use only those ads which are relevant and important.

7. Removing Extra Widgets

Remove extra widgets from your website or blog. Only use those widgets which are important and useful and delete those widgets which are useless and irrelevant.

8. Add 'Read More" Option

Use read more buttons or read more link under each and every post it helps to load your blog or site faster because if you are using more images read more link will automatically hide those images from your main page and your site/blog will be faster.

9. Avoid Using Popup Ads And Widgets

Avoid using pop ads and widgets in your site or blog because these types of popup ads and widgets contains java. So if you want good result don't add these types of stuff.

10. Show Few Posts On Homepage

Only show few posts on homepage like 4-5 posts not more than that because too much posts on homepage can effect on loading time of blog.

Final Words!

Just follow all the above steps definitely these tips will help you to make your website's or blog load faster.By following all these above tips you can also increase visitors and can get more traffic.