How to Find Free Images for Blog Posts

As a blogger for blog posts copyright free images for blogs or royalty free images is a big issue for many of us. Because to get high rank in search engine a blog should have unique content on it. Today, if we use other’s copyrighted images then we may caught by google in any next algorithms update. There are many sources on internet from where you can get copyright free photos or images. Using these images you don’t need to publish any credit link of creator or website. This is very hot topic on internet that “how to get copyright free photos or non-copyrighted images for free”.

What is meant by copyrights of images?

If a photographer or graphic designer publish his photos or images on any website or blog then he mentions some limits that how this image access by public free or paid. Or using of that image for personal or professional? The designer/photographer defines this criteria.
The most common copyrights using for online content is Creative Common or CC. There are different versions of CC license. For example Creative Common 2.0. There are many graphic sites using this CC 2.0 which provide free images only for Personal. But if we use these images for commercial then we need to put Credit or Attribution of copyright holder.

Free images for Blog Posts?

Now, I am going to show a list of sources that provides images with this right that you can use that images everywhere personal and commercial use or modify that images without giving any credit/attribution to its original author/creator. Because these sources provide images or graphics with Creative Common 0 or CC 0. Now, you don’t need to pay heavy amount to paid sources of images like ShutterStock, istockphoto, fotolia, Gettyimages and many more.
These are free image providers:

1 unSplash

If you need high resolution images then unsplash is heaven for you. Unsplash publish/upload 10 new images with high resolution in 10 days. These images are licensed under Creative Commons Public Domain License.

get images for blog posts copyright free

2 SplitShire

SplitShire is a stock of charming and high Defination images. SplitShire also provides free images under license Creative Common Public Domain. You can use these images for your personal and commercial use without any credit of creator.

free images for blog posts

3 PixAbay

PixAbay is most popular royalty free image stock on internet which gives you rights to use its images for any purpose which may be Personal or Commercial. You don’t need to pay or credit of original author.

copyright free blog images

4 PublicDomainArchive.com

PublicDomainArchive.com is also a free image stock. PublicDomainArchive’s images are cool and close to nature.

how to get free blog post images


5 imFree

The last online image stock is imFree.

free images


Modification

Some images contains logos or links, you can easily remove these logos, names or links by using tools like Photoshop or any other. There are different techniques to modify or remove these logos by cropping or Eraser tool etc. You can also put the link of your site or Logo.


Get Free Complete CMS in PHP OOP

Before going to share complete CMS in PHP OOP I want to show you that what is CMS?
CMS means Content Management System. CMS is web application or program which is used to manage or create content. In this blog post I am going to share complete CMS in PHP OOP with source code which is easily downloadable and executable. The source code is a backlink free code. You can use this code for any CMS Project. In CMS there are two units, first is front end WEBSITE for users and second is back end which is Admin Panel. Admin Panel is a gateway for administrator from which administrator can login to and made changes according to its requirements.

How to execute PHP OOP CMS?

For that purpose you have need to install XAMPP or WAMP on your system. You can download these software from official websites the links are given   XAMPP or WAMP
After installation, download CMS source code file and paste in HTDOCS folder which is located in xamp/wamp installation folder. After that open your web browser (Chrome or Firefox) then write “localhost/phpblog” in URL address bar of browser. Then source code will be execute. Now the website is in front of you (as a visitor) which we have designed in coding. You need to import database which has the content post or admin panel.

Import Database?

To import database you need to create a new database with name of “phpblog”. Just go to localhost/phpmyadmin and create a new database (whole method is practically discussed in the video tutorial given below). Now you have created an offline localhost, now you can view you website on your localhost. You can login to admin panel of your site by entering given credentials email: abc@gmail.com and password: walikhan. You can also change login information later.


Video Tutorial
For your guidance about whole process of PHP OOP CMS I have also published a video tutorial. 
You can subscribe my channel for more web development tutorials in English. If you have any problem or error then comment below we’ll try to assist you ASAP. Happy sharing

How to Submit Blogger Sitemap to Google

After creating blogger sitemap you need to submit blogger sitemap to Google Webmaster Tools. There are different ways to generate blogger sitemap. You can create a sitemap by following this tutorial How to find blogger sitemap. Second method is also simple and easy you need to go any sitemap generator website like Blogger Sitemap Generator Tool then paste your blogger Blog’s Homepage URL address like:
www.aoablogger.blogspot.com

Submit sitemap to google Step by Step

1 Then click on button Generate Sitemap.

2 After that copy that link after atom.xml which highlighted in below caption.
3 Now go to Google Webmasters Tool
4 in Google Webmasters Tool from left sidebar Click on Crawl and then click on Sitemap
5 Now click on red button Add/Test Sitemap
6 After that paste the link which we have just copied from Blogger Sitemap Generator Tool
There will be 2 options TEST Sitemap and Submit Sitemap
(a)  TEST 
You can test your blogger sitemap before going to submit it to Google Webmaster.
(b)  ADD

After tested your blogger sitemap you can now submit it to google.

Social Sharing Gadget/Bar for Blogger

social sharing gadgets for blogger
In this tutorial, I am going to show you how to install awesome social sharing bar or social sharing buttons on your blogger/BlogSpot blogs. Social sharing icons are links that provide you’re an easy way to bookmark your blog post on social networks and this way you get a large number of driven traffic to your blog. Social sharing is very important in terms of Search Engine Optimization. Because social networks play an important role in link building.  If you want to get a good position in search engine then you must install social sharing widget on your blog. After that, your social sharing icons should be impressive for your blog reader. In blogger blogs, there is a default social sharing widget which looks bad and older. There are many websites like share this, jetpack, getsocial etc. which provides social sharing plugins and widgets which are paid and expensive. Today I am going to share a premium social media sharing widget for blogger. You can add this social sharing buttons either below your post title or in the bottom of blog post. Both methods are mention below. You can also display this sharing bar more than one time on blogger blog. For example, once below post title and second in the bottom of the post. If you want to make some changes in look then you can customize it via CSS. 
In this Jumbo Social sharing bar you will get following Social Media:
1 Facebook
2 Twitter
3 Google+
4 WhatsApp (If someone like to share on it then it will open link in WhatsApp automatically only in Mobile devices)
5 LinkedIn
6 Pinterest
7 Viber (Works similarly WhatsApp on Mobile devices)
8 Buffer
9 StumbleUpon
10 Print (by using this function reader can easily print your post through printer)

This Social Sharing Bar is auto responsive.

How to add Social Sharing Bar on Blogger

Follow the instructions given below:

1              Go to Blogger Dashboard >> Blogger Template
2              Click on backup your template
3              Click on HTML Editor and Press CTRL + F
4              Copy this code and paste in search bar ]]></b:skin> then copy the below code and paste immediately before ]]></b:skin>



   
/* ##### FREE JUMBO SHARE BUTTONS ####### */

#AOAshares-wrap{border-top: 1px dotted #eee;
padding: 10px 0;border-bottom: 1px dotted #eee;overflow:hidden}
#AOAshares{display:inline-block;overflow:hidden;text-align:left;white-space:nowrap;font-family:arial;font-size:22px;margin:0px 0px  0; line-height: 1.4em!important; text-align:center;}
#horiz{position:relative; padding:0; margin:0; }
#horiz #AOAshares{position:relative;top:-5px; padding-top:0px;}
#AOAshares a:hover{text-decoration:none!important; }
/***Facebook***/
.aoa-fb{opacity:0.4;background:transparent linear-gradient(#4C69BA,#3B55A0) repeat scroll 0 0;border:medium none;border-radius:2px;color:#FFF!important;cursor:pointer;font-weight:700;  height:37px; width:90px; border-radius:3px;line-height:40px;padding:0 6px;white-space:nowrap;text-shadow:0 -1px 0 #354C8C}
.aoa-fb:focus,.aoa-fb:hover,.aoa-fb:active{ opacity:1;background:transparent linear-gradient(#5B7BD5,#4864B1) repeat scroll 0 0;border-color:#5874C3 #4961A8 #41599F;box-shadow:0 0 1px #607FD6 inset}
.aoa-fb i{padding:2px 2px 0 4px;font-size:11px;color:#3B5998;background:#fff;margin-right:4px;margin-top:3px}
.aoa-fb:hover, .aoa-fb:visited, .aoa-tw:hover,.aoa-tw:visited, .aoa-linkedin:hover ,.aoa-linkedin:visited{color:#fff!important;}
/***Gplus, Pinit, Stumbleupon***/
.aoa-gp{opacity:0.4; background-color:#d73532; color:white; background-image:;border-radius:3px;border:; font-size:15px; color:white!important;cursor:pointer;font-weight:700;line-height:40px; text-align:center; width:90px; height:37px; padding:0 2px 0 2px;white-space:nowrap;}
#AOAshares .pinit{border-radius:3px;text-align:center; background:#d73532!important; color:white! important}
#AOAshares .stumb{background:#f0fafe!important;border:1px solid #cde3ea}
#AOAshares .stumb:hover{border:px solid #b7d5df;box-shadow:0 1px 0 rgba(0,0,0,0.1)}
#AOAshares .stumb i{color:#eb4823!important;font-size:13px!important;margin-top:1px!important}
.aoa-gp:focus,.aoa-gp:hover,.aoa-gp:active{color:white! important ;box-shadow:0 1px 0 rgba(0,0,0,0.1); opacity:1;}
.aoa-gp i{padding:2px 2px 0 0;font-size:11px;color:#DB4437;margin-right:2px;margin-top:3px}
.aoa-gp .fa-pinterest{padding:0 0px 0 0;font-size:14px}
#aoashares .bufferimg{width:15px; margin-top:2px; padding:0 1px 0 0; }
/***LinkedIn***/
.aoa-linkedin{opacity:0.4; transition:background-color .218s ease 0s,border-color .218s ease 0s,box-shadow .218s ease 0;background-color:#0077B5;text-shadow:0 -1px #005887;border:medium none;border-radius:2px;border:px solid #066094;color:#fff!important;cursor:pointer; font-weight:700;height:20px;line-height:20px;padding:0 2px 0 1px;white-space:nowrap;
height:37px; width:90px; border-radius:3px;line-height:40px;}
@media screen and (-webkit-min-device-pixel-ratio:0) {
.aoa-linkedin{padding:0 5px 0 1px}
}
.aoa-linkedin:focus,.aoa-linkedin:hover,.aoa-linkedin:active{opacity:1; border:px solid #0369A0;background-color:#0369A0}
.aoa-linkedin i{padding:0;font-size:17px;color:#FFF;margin-right:0;position:relative;left:1px}

/**Twtter, Print, Whatsapp, viber**/
.aoa-tw{position:relative;height:22px;padding:4px 8px 1px 4px;font-weight:700;color:#FFF!important;cursor:pointer;background-color:#1B95E0;border-radius:3px;box-sizing:border-box;opacity:0.4;
height:37px; width:90px; border-radius:3px;line-height:33px;
}
.aoa-tw:focus,.aoa-tw:hover,.aoa-tw:active{opacity:1; background-color:#0C7ABF}
.aoa-tw i{padding:0 0 0 1px;font-size:14px;color:#fff;margin-right:4px;margin-top:0}
.aoa-o{max-width:100%}
.aoa-o,.aoacount-o,.aoa-fb,.aoa-gp,.aoa-linkedin,.aoa-tw,.label,#aoacount{display:inline-block;vertical-align:top}
.aoacount-o{position:relative;min-width:15px;height:38px;text-align:center; display:none; padding:1px 5px;margin-left:2px;background:#FFF none repeat scroll 0 0;border:1px solid #e7e7e7;border-radius:2px; }
#AOAshares .printme {background-color:#333;}
#AOAshares .printme:focus,#AOAshares .printme:hover,#AOAshares .printme:active{background-color:#000}
#AOAshares .whatsapp{background-color:#73D40B;}
#AOAshares .whatsapp i{font-size:15px!important;}
#AOAshares .whatsapp:focus,#AOAshares .whatsapp:hover,#AOAshares .whatsapp:active{background-color:#65BA09}
#AOAshares .viber{background-color:#7b519d;}
#AOAshares .viber:focus,#AOAshares .viber:hover,#AOAshares .viber:active{background-color:#8558aa}
#AOAshares .viberimg{width:13px; margin-top:0px; padding:0 3px 0 0; }
#aoacount{color:#666;white-space:nowrap;text-decoration:none;padding:2px 0 0}
#aoacount:hover{text-decoration:none}
#AOAshares .arrow{height:0;left:-10px;position:relative;top:-15px;width:5px;z-index:2}
#AOAshares .ext{min-height:18px!important}
#AOAshares .arrow s,#AOAshares .arrow i{border-color:transparent #e7e7e7;border-style:solid;border-width:4px 5px 4px 0;display:block;position:relative;top:19px}
#AOAshares .arrow i{border-right-color:#FFF;left:2px;top:11px}
.share-btn{position:relative;display:inline-block}
.share-btn .h2{font-size:30px;font-weight:700;font-family:arial;color:#73D40B;height:31px; line-height: 1.4em;}
.share-btn .h4{font-size:12px;font-family:arial}
/*#########Floating Counter Styles###########*/
.aoa-vertical{display:block; max-width:60px!important;margin:0 0 0 -83px!important;border:1px solid #f3f3f3!important;padding:3px 2px 0!important;background:#fff; position: fixed;z-index:99999;bottom: 7%;float: left;border-right:0px solid #fff!important;}
.aoa-vertical #AOAshares{display:block;width:60px;margin:7px 0!important}
.tcount{margin:0 10px 0 0;text-align:center;min-width:60px;border-right:3px solid #73D40B;padding:0 15px 0 10px}
.aoa-vertical .tcount{border-right:0;padding:0;text-align:center;height:auto}
.tcount .h2{font-size:29px;padding-bottom:5px}
.tcount .h4,.aoa-vertical .tcount .h4{font-size:12px;padding-bottom:5px;border-radius:0}
.aoa-vertical .tcount .h4{border-bottom:3px solid #73D40B}
.aoa-vertical .aoa-o,.aoa-vertical .aoacount-o,.aoa-vertical .aoa-fb,.aoa-vertical .aoa-gp,.aoa-vertical .aoa-tw,.aoa-vertical #aoacount{display:block}
.aoa-vertical .aoacount-o{margin-bottom:7px;margin-left:0;height:30px}
.aoa-vertical #aoacount{padding:7px 0 0;font-size:15px;color:#666}
.arrow-v{bottom:-8px;height:7px;left:25px;position:absolute;width:0;z-index:2}
.arrow-v s,.arrow-v i{border-color:#e7e7e7 transparent transparent;border-style:solid;border-width:5px;display:block;position:relative}
.arrow-v i{border-top-color:#FFF;left:0;top:-12px}
/*#########Vertical Counter Switch###########*/
.switchoff{display:}
.aoaswitch{padding:0 16px;margin:0 0 5px;display:block;max-width:60px;height:20px;cursor:pointer;background-color:#fff;border:1px solid #eee;border-radius:2px;outline:0 none;font:16px fontawesome;color:#ddd}
.aoaswitch:hover{color:#73D40B}
.aoaswitch i.active:after{content:'\f067';position:relative;left:7px;top:2px;font-style:normal}
.aoaswitch i.inactive:after{content:'\f068';position:relative;left:7px;top:2px;font-style:normal}

#fb1{
font-size:20px;
}
#in1{
font-size:18px;
}
#t1{
font-size:18px;
}
#pin1{
font-size:14px;
}
#sharing1{
font-size:40px;
}

How to Create Calculator in JavaScript

JavaScript is vast programming language through which you can create any web application. JavaScript use in every single element on web application. Means that use of java script in web programming is necessary. Using JavaScript you make online calculator, online currency converter or anything which you want you can build in JavaScript which works online and offline on your web page. As you know calculator is a basic necessary element in our life. For example if you want to find the percentage of your income then you'll need to use calculator for calculation.
In this tutorial i am gonna show you that how to create calculator in JavaScript. You can also stylize this calculator source code by using CSS style sheet according to your requirements.

Calculator in JavaScript


how to create calculator in javascript

Calculator JavaScript Code

<h2>Calculator in Javascript</h2>
<br/>
<form Name="calculator">
<table border=2>
<tr>
<td colspan=4><input type=text Name="disp"></td>
</tr>
<tr>
<td><input type=button value="0" OnClick="calculator.disp.value+='0'"></td>
<td><input type=button value="1" OnClick="calculator.disp.value+='1'"></td>
<td><input type=button value="2" OnClick="calculator.disp.value+='2'"></td>
<td><input type=button value="+" OnClick="calculator.disp.value+='+'"></td>
</tr>
<tr>
<td><input type=button value="3" OnClick="calculator.disp.value+='3'"></td>
<td><input type=button value="4" OnClick="calculator.disp.value+='4'"></td>
<td><input type=button value="5" OnClick="calculator.disp.value+='5'"></td>
<td><input type=button value="-" OnClick="calculator.disp.value+='-'"></td>
</tr>
<tr>
<td><input type=button value="6" OnClick="calculator.disp.value+='6'"></td>
<td><input type=button value="7" OnClick="calculator.disp.value+='7'"></td>
<td><input type=button value="8" OnClick="calculator.disp.value+='8'"></td>
<td><input type=button value="x" OnClick="calculator.disp.value+='*'"></td>
</tr>
<tr>
<td><input type=button value="9" OnClick="calculator.disp.value+='9'"></td>
<td><input type=button value="C" OnClick="calculator.disp.value=''"></td>
<td><input type=button value="=" OnClick="calculator.disp.value=eval(calculator.disp.value)"></td>
<td><input type=button value="/" OnClick="calculator.disp.value+='/'"></td>
</tr>
</table>
</form>

5 SEARCH ENGINE OPTIZATION Tips For Bloggers

search engine optimizatopn tips for blogger
Search Engine Optimization is known as SEO. In other words, Search Engine Optimization is a way through search engines such as Yahoo.com, Bing.com, Google.com and many other present your page on their sites according to the search results of users.

How Search engine rank a Site?

Now there is a question, how they do that? These search engines do that through complicated software tools, which are also called spiders. Following example of empty room would be helpful for you to understand SEO, suppose the empty room of internet is filled with air particles. The empty room is filled with websites and also completely dark, complicated software tools crawling like a spider and the very step of this spider is taking as the slowly moving the website. Like a spider the search engine optimization moving through websites by taking up one by one. After studying them and then ranking them. This ranking of SEO is of great importance, because a high ranked website will always be here on the first page by search results of Google in the comparison of the low ranked websites.

SEO is much essential to get higher rank in the hub of websites. Now search engine optimization is of great significant because billions of users and number of websites are increasing day by day. If you want to get high rank for your site you need to improve it or optimize it. Let’s watch how can improve or optimize your site rank.

search engine optimization tips for bloggers

Kinds of Optimization
Before proceeding, it is important to know that optimization is of two kinds like On-page Optimization and Off-Page Optimization.

On-page optimization
Very first step of SEO is on-page optimization. There are factors that refers by Search engine Optimization for listing your website in search result. You can control these factors by encoding on your website. HTML codes, Keywords density, keyword placement and Meta tags are the example of the on-page optimization.

Off-page optimization
It is very important part of SEO for ranking your website, however it deals with back links to your website. Your website will reachable on other networks, apps and websites via back links.


1 Clarity in Blog Post Title
The title of your post is much important for search engine optimization, because they can attract and distract attention. So this is important for you to give reasonable attention   to the title of the post. Title must be simple, accepting, intriguing and descriptive, and easy for people. Seventy characters’ keywords of your post title are of great importance.

2 Good Quality of Content
As you may know that “content is king”. Content is very important part of your website, so you must write original, use unique keywords, use related images in order to appear in the search results, and any post of your website must be of 300-500 words. On the other hand you need to avoid copy pasting, objects of keywords, avoid to use multimedia subjects and avoid to write any post less than 300 words.

3 Use of keywords
Keywords are specific conditions that are used by others in order to search for your content. Keywords are important in search engine optimization but it doesn’t mean that you stuff your website with keywords. This act will not helpful for the ranking of your website.
Simply you chose a title and utilize it page URL, use in the beginning and conclusion paragraph and use in article body where it need.    

4 Importance of Meta Tag
Meta tags are also important for search engine optimization. Google.com, bing.com, yahoo.com and all others search engines have used long left Meta tags for getting website information. Met tagging is important for your website but it is not all that you need for your site ranking. All the same it is important as like the keywords in your metadata.

5 Significance of Links 
For SEO perspective links and hyperlinks are also important. You can utilize it to link out to other posts, previous posts, networks and websites using keywords anchor elements. And other can link in to you through sharing your posts on their website or other social media networks.

How to Remove Credit Link in Blogger Template

how to remove credit links in blogger

This Blogger tutorial will help you to modify your Blogger Templates. As you know there a large number of websites providing free and premium blogger templates. But every free Blogger Template have a credit link hidden in Html or JavaScript. There is a logic to provide you free Blogger template. For example someone needs to create backlinks for search engine optimization of his blog or website. Because backlinks have magical effect on SEO. So he will design a blogger template by hiring any Web Designer and he will put a credit link (Link of his blog or website) hidden in coding. After that he will publish it on any blogger template providing website. This credit link will create a backlink for his site or blog from every single Blogger blog on which that template should be install. So that was the logic behind credit links. When someone’s blog link display on your blog its looks a bad. Many people wants to get rid from credit links in blogger templates. You can easily remove credit link from your blogger template by following the instructions given below:

Steps to Remove Credit Links in Blogger


Step 1: Go to your Blogger Dashboard Click on TEMPLATE >> HTML EDIT
how to remove credit links in blogger templates

Step 2: Click anywhere inside code editor and Press CTRL+F from your keyboard

remove credit link in blogger template

Step 3: After that a search box will be appear on top right in HTML EDITOR and type these keywords to find credit link

Credit, Copyright or Designed by

Step 4:  When found then it will looks like
how to remove credit link in blogger templates

Step 5: Now you have to just add this code here
how to remove credit link in blogger templates
Code is:


style='visibility: hidden;'

Other useful posts:
                               How to Remove Powered by Blogger Attribution 

How to Change Blogger Favicon


What is a favicon?
A favicon is an image or picture of very small size 16 pixel by 16 pixel which always display in the tab bar of web browser that represents your blog before the title of your blogger blog and also appears on saved or bookmarked webpages..  It’s also appear in history, search results and bookmark lists. Favicon usually contains on logos or icons of blog. You can use .PNG or .JPG or any other graphic formatted image but the size of favicon is fixed and not acceptable more than 16x16Pixels. For example blogger or BlogSpot default favicon for all blogs is shown in the caption given below:

Usability of Blog:
Favicon increase usability of a blog. Favicon of a blog or site has a very minor but important role in your Blog SEO. Favicon has no direct impact on SEO but has an indirect impact on your Blog SEO. If your site has a custom favicon then it will increase usability of your blog. Because it displays on tab bar next your blog title, history, bookmark or saved pages. It will helps to your visitor or user to get access your blog without any time consume by finding your blog from web history, bookmark folder, archives or a list of tabs open in web browser. User can easily find blog or website having favicon as compared to other blog which has no favicon.

Before going to choose a custom blogger favicon you need to create a favicon of size 16X16Pixel. There are many blogger favicon generators are available online. Go to www.favicon.co.uk then you have to choose image which you want resize as favicon and choose 16x16 size then click Generate. It will automatically resize it for blogger favicon.

How to change Blogger Favicon?

It’s quite simple to add a custom favicon in blogger blog. Follow the instructions given below in blogger tutorial.

1 Step:
Go to your BLOGGER DASHBOARD >> LAYOUT Panel

how to change blogger favicon


2 Step:
Click on Edit link given in Favicon box. Then a pop up window will be appear. Choose image which you want to add as favicon size 16X16 Pixels.

how to change blogger favicon


Then click on Save.



How to Create A Rollover Image Effect (Change image on MouseOver)


Image Rollover function or Effect is a function through which you can easily create an effect when mouse over an Image Web Object then this image changes or swaps to other image Web Object. When mouse out then original image came back. This effect is called Image Rollover Effect. Actually, this function is created by onMouseOver and onMouseOut attributes. By using this function you can make awesome webpages.

Demo: When Mouse Cursor goes over this Twitter Bird image then it will change to other small Twitter Bird image.


Creating Rollover Image Effect: 


Copy this code and paste in that post where you want to create a Rollover image effect:

<a href="TARGET URL ADDRESS"><img src="URL OF FIRST IMAGE " onmouseover="this.src='URL OF SECOND IMAGE '" onmouseout="this.src='URL OF FIRST IMAGE'" /></a>

Change the colored text with instructions given below:


1: TARGET URL ADDRESS
Here you need to write the URL Link where somebody goes after click on that image.
For example i want to send visitor to my Twitter account then i will enter my account Twitter Profile URL            www.twitter.com/AoABlogger


2: URL OF FIRST IMAGE
Replace this yellow colored text with the URL Link of the image that will appear in normal mode or when mouse cursor out.


3: URL OF SECOND IMAGE 
Replace this Blue colored text with URL Link of that image which will appear when mouse cursor goes over the image or mouse over the image .

That's it! You can create Rollover effect in every post by using this simple method.

Video Tutorial:


How to Show Blogger Images only in Homepage and Hide from Post Page


Do you want to know how to add a custom posts thumbnail in blogger or how to hide a specific picture/image from blogger posts and make them visible on your blogger homage as Thumbnails. On other platforms like WordPress while creating a post there is an option to choose a specific picture/image to show as thumbnail on your blog homepage for that post. This feature makes a first look to reader or blog visitor about every post and make our homepage user-friendly. If you are blogger and annoying to create this specific thumbnail for every single post. We can easily make this function and hide pictures for thumbnail from our post and make them visible to homepage. For this purpose you have to follow the tutorial.

Step 1: Go to Blogger Dashboard  >>  Template >> Edit Html

show blogger images only in homepage and remove from post page


Step 2: Click anywhere in Html Editor and press CTRL+F from your keyboard then a Search Box will be appear in top right corner of Html Editor.

show blogger images only in homepage and remove from post page


Step 3: Copy this code and paste in Search Box then hit ENTER
]]></b:skin>
Step 4: Copy given below CSS code and paste it immediately below this    ]]></b:skin>


<b:if cond='data:blog.pageType != &quot;index&quot;'>
<style>
.hideimage{
display: none;
}
</style>
</b:if>


And Save the Template

Step 5:  Every time while you will create a new post then add your image/picture first and then turn editor to Html

show images on homepage and hide on post page


Then locate the code for that image which will look like that

Note: this html code for your image can be located anywhere according where you have uploaded that image in post’s Start, Middle or End

Step 6: Replace the code highlighted below in caption with code “hideimage

show images on homepage and hide on post page


Now that’s all specific thumbnail for a blog post option have created on your blog you have to repeat for every new single post.

For any help or assistance please comment below or go to Contact and submit me your problem or question.


Video Tutorial:


Other useful Posts:

                            How to Remove Powered by Blogger Attribution  
                            How to Remove Quick Edit and Wrench Icons in Blogger


How to Remove Powered by Blogger Attribution

Powered by Blogger Attribution is a Link which display in the bottom or footer of many blogger templates. Powered by Blogger Attribution is mark or representation that this blog is on Blogger/Blogspot.  Many people wants to remove Powered by Blogger Attribution widget from their bogs they click on Quick Edit Button but there is no option in Quick Edit Popup window to remove or hide this widget. Because this widget is locked in your blog coding. If you want to remove Powered by Blogger widget then follow the instructions given below

Step 1:   Go to Blogspot Dashboard Go to Template Edit Html


how to remove powered by blogger attribution widget


Step 2:   Click anywhere in the code editor and Press CTRL+F to find

Step 3:   Now copy and paste this code in the Search Box then press Enter
    </head>

Step 4:   Copy this code and Paste just immediately before </head>:

<style>
#attribution1{
display: none; }
</style>
Step 5:   Now click on “Save Template”.

Congrats! Your Blogger is now free from Powered by Blogger or Blogger Attribution. 

How to Remove Quick Edit and Wrench Icons in Blogger

First of all let me tell you that “What is Quick Edit Button or Wrench Icon”?
When you are using Blogger/BlogSpot default templates then you will see a Quick Edit Button or Wrench Icon on right side of every blogger Widget or Gadget for example. Quick Edit button is very useful function.  The purpose of adding this quick edit button by Template Designer is save the time of Blogger or Blog Editor.  Blogger can make easily any change or modification in appearance of widgets from blogger homepage without going to template editor or layout of blogger. This link or Quick Edit Pencil Button is only visible to Blog Editor or Admin and also to blog readers but visitor cannot make any change through this button. This is very handy tool to make Blogger or BlogSpot comfortable platform for Bloggers. But having positive features of this tool on blog there are also many hidden negative faults and disadvantages on many Blogger features such as
Such as negative impact on site loading speed or Blog loading speed, SEO, Look of Blog and many more. In other words when a visitor visit your Blog he look at these tools or links showing on your blog that makes bad impression on your visitor. Means that these Quick Edit Pencil icon or Wrench Icon damages your blog’s beauty. Many bloggers don’t use this tool to make any changes in their Widgets. They use their Admin Panel or Layout Panel of their blog. So many Blogger want to know “How to Remove Quick and Wrench Icons in Blogger”.  Anyone can easily remove these icons or links from his Blog within Seconds by following these 3 easiest and simple ways.



Methods:

Method 1: Removing Quick Edit Button or Wrench Icon with CSS:

Quick Edit Pencil or Wrench icon create ease of access to make changes in widgets if you want to remove quick edit pencil icon or wrench icon from your Blog so you can easily hide this by using CSS.
To remove this quick edit icon go to
                         TEMPLATE EDITOR  →  EDIT HTML →  PRESS CTRL + F
to Find this code </head>
Copy given below code and paste immediately before </head>
           
                     
.qiuckedit{ Display:none;}

Method 2: Removing tag code from Template:

 
If you want to remove edit button or wrench icon completely from your template. Then this method is perfect for that. Just Go to
                                   TEMPLATE EDITOR → EDIT HTML → PRESS CTRL + F
to find this code and where you found this code remove all codes and save your Template.
<b:include name='quickedit'/>
Now your template is completely free from Quick Edit Pencil or Wrench Icon.


Method 3: Remove Quick Edit Pencil from Blog Post footer:


Sometimes quick edit button is also display in the footer of blog posts. If you want to remove this wrench icon Go to

Blogger Admin Panel  →  Layout Panel Now in the right end of
Blog Posts  section there will be a Edit Button click on it → Then a pop up window will be appear then uncheck Box of “Show Quick Editing Option and then save template

Top 10 Ways To Make Money From Home

It is fact about the Internet that it has become a money making tool or machine. I assure you that a person can earn more money at home through Internet rather than heavy investment in companies physically.  There are more than one hundred ways of online earning at home. Now Internet is industry of trillions dollars. From these ways to make money from home you can earn without any investment and it’s totally free.   Thousands number of companies are working online a great number of people are full time working online and most interesting thing is that billions of dollars are earned and spent via internet while keeping at home. This is also truth that this industry is growing very dramatically and rapidly. With the start of New Year, a number of people will be interesting or planning in New Year determination, their determination may be about better future. If you is among those determinant people and thinking about earning online then you are at the true point. The most important thing about establishing online business is that one should not need to pay to take start. As you know there are hundred ways of make money online at home, but I am going to share with you a number of ways of make money via internet.


ways to make money from hom


Top 10 Ways to Make Money Online from Home

Below money making sites are legitimate and well-known. I have earned money via internet by utilizing myself. I can assure you 100% that you also can earn money via internet from home. In the coming list of online earning ways, some will be discussed with explanation and other ways will be described just with name. Therefore, the complete list of online earning ways while operating from home is presenting now. I have tried to adding more and more ways as I find them.

1) Google AdSense

Google Adsense is very easy method to earn money via internet is to make a website or blog or start exhibiting Google Ads. You’re earning will be increased as you have more visitors on your blog or website you will make money through impression or click via Google Adsense. Through this method you can earn passive income online. 


2) Media.net

Media.net is alternate advertising network of Google Adsense. This network is Yahoo and Bing contextual online advertising network. Through this network a blogger can earn more than Google Adsense earning.  This is second biggest Advertising Network after Google Adsense. The way of earning through Media.net is similarly to Adsense. You have to start a blog or Website and publish your content online. After that you have to achieve minimum traffic requirements suggested by media.net for become Ad publisher of Media.net.


3) Infolinks.com

Infolinks.com is also an Adverting network like Adsense and Media.net. You can earn through advertising ads of Infolinks.com on your blogs or website. The procedure of Infolinks.com is similarly to the Adsense or Media.net. It pays to its publishers through PayPal and Western Union.


4) Chitika.com

This is another platform of online earning through publishing ads on your blog or website. You need to create here an account. Chitika.com is too easy to device.
  

5) BuySellAds.com

BuySellAds.com is also online earning site of advertising of buy and sell ads own your blog or website. You simply get ads from the direct advertisers and direct ads selling website BuySellAds.com and publish this ad own your blog and earn money. The procedure of BuySellAds.com is much easy you need to set or put a blank space or bar on your website. Then the site BuySellAds.com complete its work.


6) TribalFusion.com

TribalFusion.com is also online money making site in online advertising. Here also you have to publish ads on your blog or website after its approval. After the procedure of approval you can earn a great amount by publishing their ad on your blog or website.


7) Bidvertiser.com

Bidvertiser.com is also ads advertising platform. Like Chitika.com you can make money online by publishing ads on your site/blog from bidvertiser.com. Bidvertiser.com is very easy to apply and you can sign up free and start making money. 

8) Adroll.com

Adroll.com is another great network publishing ads such as its name. Here also you can money online by publishing advertisement on your site or blog.

9) Taboola.com

Taboola.com is a new advertisement network and it is becoming very popular and famous among publishers. You can make money by publishing ads on your website and blog following to the observation and comment section. 


10) Frelancer.com

A great number of online work is offering by freelance.com such as web development, consultancy, programming, data entry and many more. You can earn money here by utilizing your skills and education. On this network a number of people are making online. This minimum earning is US $2. A newbie can easily make $100 in a month.

How To Remove Subscribe To Posts Atom in Blogger

Many blogger templates have their own default settings. Some Blogger Templates shown a button or link named as “Subscribe to Posts Atom” within post body. The purpose of this button is some visitors wants to Subscribe Atom Feeds. Because some blog readers use this link to subscribe atom feeds. There is no more function of this button. Means that this button or Link is useless. Mostly Bloggers wants to remove this link or button from their blog because they wants to make their blog look beautiful and shiny for their audience. But when it appear on your Blogger Template or Theme then it looks strange and it appear on the bottom of post body.

hide subscribe to posts atom


How To Remove Subscribe To Posts Atom in Blogger?


  If you are worried about it and wants to remove this “Subscribe to - posts atom” Link from your Blogger Template. Then you can easily remove this button or link from Blogger Template by following steps.

Method 1

Step 1:      Go to your Blogger Panel

Step 2:      Then Click on Template and select EDIT HTML

subscribe posts atom

Step 3:      Blogger’s CODE EDITOR will be open

Step 4:      Now copy this given below code

Step 5:      Again go to Blogger Code Editor then click anywhere inside CODE EDITOR

Step 6:     Press [CTRL + F] and a Search Box will be appear in editor window, Now paste that
                 code you have copied and press Enter [Enter]

how to remove subscribe to atom in blogger




Step 7:      Then this code will be appear in the editor as Highlighted Code
                  Remove that highlighted code and Click Save Template



Method 2:   

Step 1:      Open Template and then Edit Html

Step 2:      Click anywhere within Editor and 

Step 3:      Press [CTRL + F] to Find this Code just copy it and paste in the Search
                  Box

                                     ]]></b:skin>

Step 4:      Similarly code will be appear highlighted within code editor

              Step 5:  Expand this Code And Paste the code given below immediately before                                                   Highlighted code  ]]></b:skin>.

.feed-links { display:none !important; }



                                                
VIDEO TUTORIAL: