create a simple contact form for blogger

Today i,m going to tell you that " How to create contact form for blogger " . Contact us page is one of the most important page in our blogs because it helps people to making contact with you . Contact form is used in many ways example are feedback, guest post, visitors query, Your service and many more. The more visitors you get the more chance that they will contact your, You can get many benefits of it because guest authors always contact through contact form .

foxyform.com

first you have to click on foxyform.com
then create a simple contact form after that add your email address at which visitors may contact you then click on create form and copy the code .
create a new contact page in your blogger blog and paste that code in you page and publish your page and its done.

Read More

mybloggertricks v2 like blogger responsive template

mybloggertricks v2 like new blogger responsive template

As ween seen on internet Mybloggertricks.com is one of the top blogging blog on the internet and in few past days mybloggertricks wear a new dress mean they are some up with a new responsive template which is very beautiful and responsive. we only say that it is beautiful but dont upsad i,m here with this new template

is it amazing? i know you are thinking that how can we cloned it but dont forget that it is a new era and everything is possible here so i,m going to tell you about that templates feature.

Features:

• Seo optimized
• beautiful menu
• fixed slide bar
• fixed width slide bar
• fast loading
• author box added
• read more hack
• complete social
• Responsive template
• back to top button

Now i,m going to give you the live demo of mybloggertricks clone template so you can easily understand its features.

Live Preview Click Here

Now here i,m going to give you template without any cost and full free but please keep visiting and kindly subscribe us for more latest hacks and widgets

Download Now Click Here

Thank you very much for visiting here keep visiting and find new templates and awesome widgets

Read More

how to earn money through google adsense

Google adsense ads program

Google is adsense is one of the best way to earn from website or a blog. Adsense is not a get rich quick program you have to built your site or blog a lot to earn some money. But how to make a site, you can use blogger and wordpress as a blogging platform these services are free of cost and you can use them to create a beautiful and attractive blog. But blog is nothing with SEO, if your blog is completely SEO optimized and you are getting high traffic from search engines then you will quickly approved by adsense.

What is adsense?

Google adsense is an AD program from google, in which google adsense place some ads on our website OR blog and when our users clicks on some of ads then google will pay us . But approval of google is not easy in these days because peoples are doing fraud to become rich but you know google is one of the biggest organization in the world that how they think that thet can fraud google hahaha not possible.

How much we can earn from adsense?

We can earn much more money if our blog is getting high number of traffic from search engines, one another thing if we are writing top quality posts we can get high traffic .the commision we get from google is depend on that how much advertisers are paying to google. you will earn a share of that amount from google. I listen that the earning of google adsense is from 1 cent to 15 dollars. it depend on your traffic and on your posts also.

how to create a blog OR website for adsense?

You listen that quality is everything first start a small blog i recommend to start a blog because it optimize for search engines more quickly then websites. make a blog about well knowing topic and post simple and attractive articles quantity does not matter, matter is quality make sure that you are posting a well researched and a highly SEO optimized post. 

How to get traffic?

traffic matters in every blog make sure that you are getting high traffic before applying for google adsense . If you are not getting high traffic follow my steps below

• Add meta tags in blogger
• Use Seo to drive more traffic
• optimize comments, archives and labels for better SEO
• Use SEO optimized template
• Optimize blog title for better SEO
• Use Social networks to make blog popular

You are thinking that why i,m telling you about Seo and what is the work of seo in traffic. So what is seo, Seo is the key of traffic if your blog is completely seo optimized then you can get a huge number of traffic.

You can also use social networks to get traffic use stumbleupon, digg, facebook, twitter, and pinterest, etc to get trafiic.

Hope you like my post about how to earn money through google adsense, if you enjoyed my post then please share this with your friends and keep visiting to find awesome articles and widgets for your blogger blog

Read More

how to add meta tags for each post in blogger

Seo for blogger blog

Adding meta tags in blogger is really a best way to drive traffic from search engines and it really good for seo of your blog. but did you know that we can also add separate meta tags for each post. so each post has his own data in google search engine. meta tags are really important part in blogs because it tell search engines that what is in your blog post . it is really best for blog and it make our blog rank high in search engines. you can add keywords and description for each post in blogger.
So how to add this ?
you only have to follow my steps.

Steps:

• Go to blogger
• now goto template tab and edit html
• Then find below line

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

•  Now paste the below code just below the above tag

<b:if cond='data:blog.url == "http://www.haseebnet.blogspot.com/"'> <meta content='DESCRIPTION' name='description'/> <meta content='KEYWORDS' name='keywords'/> </b:if>

• Now replace http://haseebnet.blogspot.com with your post url
• Replace description with your post description
• and replace keywords with your posts keywords 
• And then save the template

It is really beautiful and awesome way to increase pretty traffic to your blog i hope you like it please share this with your friend and please keep visiting and find out more widgets

Read More

how to customize 404 page for blogger

Custom 404 pages for blogger

404, what the mean of 404 page not found its mean when user click on an invalid link or an expired link So your user will redirected to 404 error page. error pages have many type but in blogger the most common error page is 404 error page. Now a days you can see how many sites have their own beautiful 404 custom error pages. Today i will teach you that how to create an awesome 404 error page in blogger . it is not so hard but it is too easy to create a most beautiful page of your blog.

Importance to 404 page:

404 page is really important in blogs because if your user find and invalid link he think that this blog is full of expired links but if you have custom page then he think its just a typo mistake and he again reading your other posts.

creating a 404 error page in blogger:  

• Goto blogger dashboard 
• Then goto setting tab and click on search preferences 
• then click custom page not found edit button

• Then paste below codes in it.

404 page

<style type="text/css" > body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibIjmc7zQ5QcYu-ue0N0SuaYjQFYpjnYUXWn5cOC4mXk-sfK8R40UoNxkz8Q9EK9yR19JJX6gp8x969Kb_0hvf_ktsuTp3hP3FX6GwzppIl-rB3ItdR0k2rV_-j7wpHUl7vyqFNkSGZxE/s1600/404-not-found-page-24.jpg') 50% 0% no-repeat !important;z-index:10000000;} .sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;} body {min-width: 0px !important;} </style>

404 page

<style type="text/css" >
body {background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp0W2dFnW_07rRE10T9lJTFrh3FoI_J03xwekd9WXh1nN72KvesYikZWgueB2HkzTMU_Uzahj2CEEHwCQV74PgELr5xkM0lfCzTI7XTXFxrtNLcQhjUrumwhRK3L8DaedwNom3EL5qSUw/s640/404_6.jpg')  50% 0% no-repeat !important;z-index:10000000;}
.sidebar, footer, .content, .header, .columns-inner, .footer-top {display:none;}
body {min-width: 0px !important;}
</style>

• Now save it and its done

Hope you like my post about customize 404 page please share it with your friends and keep visiting here to find new and awesome widgets

Read More

beautiful numbered page navigation for blogger blog

I recently Posted about characters and count tools for blogger  which my readers really like but some of them ask me about blogger widgets. Some ask me about seo and blogger templates but i decide to post about blogger widgets. Blogger widgets are playing an important role in designing of blogs . Making blog beautiful is a simple wish which nowadays every blogger had. But you are thinking that which one widget i,m going to share now, it is beautiful number page navigation for blogger which makes your blog very beautiful . you can watch live demo in below picture

beautiful numbered page navigation for blogger

you can also add this beautiful widget in blog this widget is really awesome and beautiful . page navigation is one of the most important part of blogger blog because your readers can engaged with your blog and it make ease to locate following posts which they are searching for . You can add this navigation bar really easy but its coding is pretty long so do not bored please and follow my steps to create this navigation bar :)

Installation:

• Goto blogger dashboard
• now goto  template tab and edit html
• and click expands widget templates
• now find ]]></b:skin> and paste below css just above  ]]></b:skin> tag.

.pagenavi{ position: relative; display: block; width: 400px; height: 40px; overflow: visible; margin: 50px auto; border: 10px solid rgba(255,255,255,0.5); /*border-radius*/ -webkit-border-radius: 40px; -moz-border-radius: 40px; border-radius: 40px; /*box-shadow*/ -webkit-box-shadow: inset 0 0 10px #fff,0 1px 0 #666,0 -1px 0 #fff; -moz-box-shadow: inset 0 0 10px #fff,0 1px 0 #666,0 -1px 0 #fff; box-shadow: inset 0 0 10px #fff,0 1px 0 #666,0 -1px 0 #fff; } .pagenavi span,.pagenavi a{ font: bold 20px/30px Tahoma, Arial; cursor: pointer; text-decoration: none; color: #464646; display: block; float: left; margin-left: 2px; /*box-shadow*/ -webkit-box-shadow: inset rgba(0,0,0,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 2px 0, inset rgba(255,255,255,0.7) 0 -1px 0, inset rgba(255,255,255,0.7) 1px 0 0, inset rgba(255,255,255,0.7) -1px 0 0, rgba(0,0,0,0.3) 0 3px 0; -moz-box-shadow: inset rgba(0,0,0,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 2px 0, inset rgba(255,255,255,0.7) 0 -1px 0, inset rgba(255,255,255,0.7) 1px 0 0, inset rgba(255,255,255,0.7) -1px 0 0, rgba(0,0,0,0.3) 0 3px 0; box-shadow: inset rgba(0,0,0,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 2px 0, inset rgba(255,255,255,0.7) 0 -1px 0, inset rgba(255,255,255,0.7) 1px 0 0, inset rgba(255,255,255,0.7) -1px 0 0, rgba(0,0,0,0.3) 0 3px 0; padding: 2px 10px; min-width: 10px; text-align: center; position: relative; text-shadow: #fff 0 1px 0; background: #cdcdcd; background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.8)), to(rgba(200,200,200,0.9))); /*linear-gradient*/ background: -webkit-gradient(linear,left top,left bottom,from(rgba(255,255,255,0.8)),to(rgba(200,200,200,0.9))); background: -webkit-linear-gradient(top, rgba(255,255,255,0.8), rgba(200,200,200,0.9)); background: -moz-linear-gradient(top, rgba(255,255,255,0.8), rgba(200,200,200,0.9)); background: -o-linear-gradient(top, rgba(255,255,255,0.8), rgba(200,200,200,0.9)); background: linear-gradient(top, rgba(255,255,255,0.8), rgba(200,200,200,0.9)); } .pagenavi a:after { content: ''; position: absolute; bottom: -3px; height: 100%; display: block; width: 100%; left: 0; /*box-shadow*/ -webkit-box-shadow: inset rgba(255,255,255,0.2) 1px 0 0, inset rgba(255,255,255,0.2) -1px 0 0, rgba(0,0,0,0.4) 0 1px 0; -moz-box-shadow: inset rgba(255,255,255,0.2) 1px 0 0, inset rgba(255,255,255,0.2) -1px 0 0, rgba(0,0,0,0.4) 0 1px 0; box-shadow: inset rgba(255,255,255,0.2) 1px 0 0, inset rgba(255,255,255,0.2) -1px 0 0, rgba(0,0,0,0.4) 0 1px 0; } .pagenavi a:first-child::after { /*border-radius*/ -webkit-border-radius: 500px 0 0 500px; -moz-border-radius: 500px 0 0 500px; border-radius: 500px 0 0 500px; } .pagenavi a:last-child::after { /*border-radius*/ -webkit-border-radius: 0 50px 50px 0; -moz-border-radius: 0 50px 50px 0; border-radius: 0 50px 50px 0; } .pagenavi a.current:after { height: 1px; bottom: -1px; } .pagenavi a:before { content: ''; position: absolute; top: 1px; height: 100%; /*box-shadow*/ -webkit-box-shadow: rgba(0,0,0,0.4) 0 3px 0; -moz-box-shadow: rgba(0,0,0,0.4) 0 3px 0; box-shadow: rgba(0,0,0,0.4) 0 3px 0; width: 1px; display: block; background: rgba(0,0,0,0.4); right: -1px; } .pagenavi a:last-child::before { display: none !important } .pagenavi a:first-child { /*border-radius*/ -webkit-border-radius: 50px 0 0 50px; -moz-border-radius: 50px 0 0 50px; border-radius: 50px 0 0 50px; font-family: 'WebSymbolsRegular'; } .pagenavi a:last-child { /*border-radius*/ -webkit-border-radius: 0 50px 50px 0; -moz-border-radius: 0 50px 50px 0; border-radius: 0 50px 50px 0; font-family: 'WebSymbolsRegular'; } .pagenavi a:hover { /*box-shadow*/ -webkit-box-shadow: inset rgba(0,0,0,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 2px 0, inset rgba(255,255,255,0.7) 0 -1px 0, inset rgba(255,255,255,0.7) 1px 0 0, inset rgba(255,255,255,0.7) -1px 0 0, inset rgba(255,255,255,1) 0 0 15px, rgba(0,0,0,0.2) 0 3px 0; -moz-box-shadow: inset rgba(0,0,0,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 2px 0, inset rgba(255,255,255,0.7) 0 -1px 0, inset rgba(255,255,255,0.7) 1px 0 0, inset rgba(255,255,255,0.7) -1px 0 0, inset rgba(255,255,255,1) 0 0 15px, rgba(0,0,0,0.2) 0 3px 0; box-shadow: inset rgba(0,0,0,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 2px 0, inset rgba(255,255,255,0.7) 0 -1px 0, inset rgba(255,255,255,0.7) 1px 0 0, inset rgba(255,255,255,0.7) -1px 0 0, inset rgba(255,255,255,1) 0 0 15px, rgba(0,0,0,0.2) 0 3px 0; } .pagenavi a:active { /*box-shadow*/ -webkit-box-shadow: inset rgba(0,0,0,0.1) 0 1px 0, inset rgba(0,0,0,0.2) 1px 0 0px, inset rgba(0,0,0,0.2) -1px 0 0px, inset rgba(255,255,255,0.7) 0 2px 0, inset rgba(255,255,255,0.7) 0 -1px 0, inset rgba(0,0,0,0.1) 0 0 15px, rgba(0,0,0,0.2) 0 2px 0; -moz-box-shadow: inset rgba(0,0,0,0.1) 0 1px 0, inset rgba(0,0,0,0.2) 1px 0 0px, inset rgba(0,0,0,0.2) -1px 0 0px, inset rgba(255,255,255,0.7) 0 2px 0, inset rgba(255,255,255,0.7) 0 -1px 0, inset rgba(0,0,0,0.1) 0 0 15px, rgba(0,0,0,0.2) 0 2px 0; box-shadow: inset rgba(0,0,0,0.1) 0 1px 0, inset rgba(0,0,0,0.2) 1px 0 0px, inset rgba(0,0,0,0.2) -1px 0 0px, inset rgba(255,255,255,0.7) 0 2px 0, inset rgba(255,255,255,0.7) 0 -1px 0, inset rgba(0,0,0,0.1) 0 0 15px, rgba(0,0,0,0.2) 0 2px 0; top: 1px; text-shadow: #fff 0 0 15px; } .pagenavi a:active:after { bottom: -2px } .pagenavi a:active:before { /*box-shadow*/ -webkit-box-shadow: rgba(0,0,0,0.4) 0 3px 0; -moz-box-shadow: rgba(0,0,0,0.4) 0 3px 0; box-shadow: rgba(0,0,0,0.4) 0 3px 0; top: 0px; } .pagenavi a.current { /*box-shadow*/ -webkit-box-shadow: inset rgba(0,0,0,0.1) 0 1px 0, inset rgba(0,0,0,0.3) 1px 0 0px, inset rgba(0,0,0,0.3) -1px 0 0px, inset rgba(255,255,255,0.7) 0 2px 0, inset rgba(255,255,255,0.7) 0 -1px 0, inset rgba(0,0,0,0.1) 0 0 15px, rgba(0,0,0,0.3) 0 1px 0; -moz-box-shadow: inset rgba(0,0,0,0.1) 0 1px 0, inset rgba(0,0,0,0.3) 1px 0 0px, inset rgba(0,0,0,0.3) -1px 0 0px, inset rgba(255,255,255,0.7) 0 2px 0, inset rgba(255,255,255,0.7) 0 -1px 0, inset rgba(0,0,0,0.1) 0 0 15px, rgba(0,0,0,0.3) 0 1px 0; box-shadow: inset rgba(0,0,0,0.1) 0 1px 0, inset rgba(0,0,0,0.3) 1px 0 0px, inset rgba(0,0,0,0.3) -1px 0 0px, inset rgba(255,255,255,0.7) 0 2px 0, inset rgba(255,255,255,0.7) 0 -1px 0, inset rgba(0,0,0,0.1) 0 0 15px, rgba(0,0,0,0.3) 0 1px 0; top: 2px; text-shadow: #fff 0 0 15px; } .pagenavi a.current:before { /*box-shadow*/ -webkit-box-shadow: rgba(0,0,0,0.4) 0 3px 0; -moz-box-shadow: rgba(0,0,0,0.4) 0 3px 0; box-shadow: rgba(0,0,0,0.4) 0 3px 0; top: -1px; } .pagenavi a.current:active:after { bottom: -1px }

• now find <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
• and paste below code just below the above tag

<b:includable id='page-navi'> <div class="pagenavi"> <script type="text/javascript"> var pageNaviConf = { perPage: 5, numPages: 6, firstText: "First", lastText: "Last", nextText: &quot;&#187;&quot;, prevText: &quot;&#171;&quot; } </script> <script type="text/javascript" src="http://rilwis.googlecode.com/svn/trunk/blogger/pagenavi.min.js"></script> <div class="clear" /> </div> </b:includable>

• Now here's the final step find  

<!– navigation –>
<b:include name='nextprev'/>

• And replace them with below code

<b:if cond='data:blog.pageType == "index"'>
<b:include name='page-navi' />
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<b:include name='page-navi' />
</b:if>
</b:if>

• Now save the template and its done

This widget is pretty cool but coding is pretty long also but it really make your blog beautiful i hope you like my post please share this with your friends and keep visiting to find more awesome widgets.

Read More

characters and words counter tool for blogger

Word counter tool for blogger

Today i,m going to give you a tool with which you can count your post words mean you can count that how many words are in your post. This is very important for every blogger that he know about word counting it is one of the most important part of blogging many bloggers ignore this and they donot know about disadvantages of this. The calculation of meta discription which fits in google search engine results is 145 characters and the characters of title in google search engine results is 45 which is completely fits in results

so you can count your title and meta description characters with our word counter tool.

Character Counter Tool

Word counter tool

Hope you enjoy our post please share this with your friends and keep visiting daily for more tools.

Read More

social buttons with hover effect like labnol.org

Today i,m going to tell you that how to add a beautiful social networking buttons to your blogger blog. these networking buttons are inspired from labnol.org . social networking buttons are one of the best way to engaged your users and it will create a better relation of you with your readers
here's the live demo of social networking buttons and i also add link below with which you can easily take a view of social networking buttons.

Social networking buttons with hover effect

Live Preview Click Here

You can easily install this widget to your blogger blog and these buttons are really beautiful

Installation:

• Goto blogger dashboard
• now Goto page layout tab
• Then add a gadget and select html/javascript
• Now paste below code in it.

<style> /************************** Social Buttons from Haseebnet.blogspot.com *************************/ .haseebnetgotsocial {padding: 2em 0 1.5em 50px;} .haseebnetgotsocial span  a {display: block;width: 32px;height: 32px;text-indent: -9999px;background-color: none;background: transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2pLOHDMTPcwMEvmfEkAbCU7Athvyd47SYb9jJM_ZxP_JcLl-tEvQ5HCWNp3l10OUBLbkwiqbuTIr1iakD2nBm-dG2vEZ1H2hn-6piTk4A0SFr_yh-IjZivOGQrYc3TKQJS0yPQR5chzjm/s1600/socialbuttons.png") 0 0 no-repeat;} .haseebnetgotsocial span {float: left;display: inline;margin-right: 8px;}
#iconTwitter,#iconFacebook,#iconRSS,#iconYouTube,#iconGooglePlus {transition:background-position .4s ease-in-out;-webkit-transition:background-position .4s ease-in-out; -o-transition:background-position .4s ease-in-out; -moz-transition:background-position .4s ease-in-out; -ms-transition:background-position .4s ease-in-out;} 
#iconTwitter {background-position: -33px -33px;} #iconTwitter:hover {background-position: -33px 0;}
#iconFacebook {background-position: -66px -33px;} #iconFacebook:hover {background-position: -66px 0;}
#iconRSS {background-position: 0 -33px;} #iconRSS:hover {background-position: 0 0px;}
#iconYouTube {background-position: -99px -33px;} #iconYouTube:hover{background-position:-99px 0}
#iconGooglePlus {background-position: -132px -33px;} #iconGooglePlus:hover {background-position: -132px 0;}
.ads67 {border: 1px solid gainsboro;border-right-style: none;border-left-style: none;}

</style>
<div class="haseebnetgotsocial"> <span><a href="http://twitter.com/carelexxmalik" id="iconTwitter" target="_blank" title="Twitter: carelexx malik">Twitter</a></span> <span><a href="http://www.facebook.com/carelexxmallik" id="iconFacebook" target="_blank" title="Facebook: Carelexx malik">Facebook</a></span> <span><a href="http://feeds.feedburner.com/haseebnetwork" id="iconRSS" target="_blank" title="RSS Feed: haseebnet blog post feed">RSS</a></span> <span><a href="https://www.youtube.com/user/mrdevilkid63" id="iconYouTube" target="_blank" title="YouTube Channel: carelexx malik on youtube">YouTube</a></span> <span><a href="https://plus.google.com/108867173879409387931?rel=author" id="iconGooglePlus" target="_blank" title="Google Plus: haseeb malik">Google</a></span> </div>

• Now kindly replace all yellow colored links with your links
• Now save it and its done

I hope you like and enjoy my widgets and please keep visiting and if you have any question or feedback please comment below.

Read More