Full Blogging Tutorial and SEO Trick For Your Blog

Home » All posts

How to add Search engine Friendly Title to Blogger?

Posted by Unknown

This article will help new blogger blog owners and all bloggers to make their blog search engine friendly Titles.By default Blogger blog titles are not search engine friendly.Page Title is group of text that appears on top of your browser.It is more important in showing your blog/blog posts on Search engine results.The Page title is the most important element in your blog in terms of higher ranking in search results.
Here is example,the figure shows the title of our blog post,the blog title is displayed first and after that the post title has been displayed.

Google only displays 70 characters on Google search results and in case of Yahoo display bit more.So your blog posts will not display or you will not get as much rank in Search Results.Let us think about reversing of position of the blog title and post title,Giving the first priority to Post title and it will works.
It will appears like the following figure.

This
Lets see how to optimize your blogger blog titles Search engine friendly.

Go to Design->Edit HTML
find the following

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

Replace the it with the following code

<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/> - NetOops Blog</title>
</b:if>

Replace the red text by your blog's Name
Done..! you have an SEO friendly page title.

More about → How to add Search engine Friendly Title to Blogger?

Google Official Contact Form for Static Pages in Blogger

Posted by Unknown

Blogger released it's brand new Contact Form Widget for Blogger Users .It helps to send e-mails to blog owner without Sign In to Google or any other account. Anyone can send mails by providing a valid e-mail address and Message. But there is a problem with that Widget. We posted an article about "How to add Blogger Official Contact Form?" It only works as a Widget (it occupies in Sidebar / Footer), it can place in Static Pages. In many popular websites/blogs they use a page for Contact Form. By default this Contact Form can only used as widget, we are introducing a technique to use Google Official contact Form on Blogger Static Pages.

Check our Contact Us Page for Demo

Add Blogger Official Contact Form to Static Pages

Sign In to Blogger Dashboard
Select Pages -> Create Blank Page

Switch to HTML mode from Compose Mode.
Click on HTML in left top of the Page
Copy the Following code inside it and Save

<table><tbody>
<tr><td>Name</td> <td>
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
</td></tr>
<tr> <td>
Email<span style="font-weight: bolder;">*Mandatory</span></td><td>
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
</td></tr>
<tr> <td>
Message<span style="font-weight: bolder;">*Mandatory</span></td><td>
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
</td></tr>
<tr><td align="center" colspan="2">
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" />
</td></tr>
<tr><td align="center" colspan="2">
<div style="max-width: 222px; text-align: center; width: 100%;">
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
</div>
</td></tr>
</tbody></table>

Go to Template -> Edit HTML
Click on Jump to Widget and take Contact Form1

Click on the arrow before <b:widget id='ContactForm1' locked='false' title=' Contact Us' type='ContactForm'>

Delete the portion inside <b:includable id='main'> ........ </b:includable>

Now Sidebar Widget will not appear.
Click on Save

More about → Google Official Contact Form for Static Pages in Blogger

Add Google Official Contact Form Widget to Blogger?

Posted by Unknown

Contact Form Widget is used to send mails to the Blog owner from the visitors/users. Do your blog looks anything missing?. I think a Contact Form is an important widget that was missed for long time. Are you using Contact From in your blog? If so, it will not Google's Official contact Form. That may be from other hosted providers. Here Google released its brand new Contact Form Widget for Blogger Users. It helps to send e-mails to blog owner without Sign In to Google or any other account. Anyone can send mails by providing a valid e-mail address and Message. This Contact Form can add to any blogger blogs that hosted in Google's Server.

It have three Fields- Name,e-mail and Message and a Send Button. E-mail and Message field are mandatory. It also have e-mail validation, checks whether the e-mail address provided is valid or not. And a notice or message will appear to show the status of sending e-mail, Shows success message it it delivered to user,otherwise shows error message. There is no CAPTCHA (Used to prevent Spam) in the Contact Form, but Google implemented its effective Spam detection mechanisms. The problem exist with the Contact Form is it can only use as Widget (in Sidebar or Footer or Under Posts). In many popular websites/blogs they use a page for Contact Form. By default this Contact Form can used as widget, we introduce a technique to use Google Official contact Form on Blogger Static Pages

Advantages

Send e-mails to Blog owner without Sign In to any Accounts.
E-mail validation is provided.
Spam detection Mechanism.
Show status message of sending.

Disadvantages

Use only as Widget (in Sidebar/ in Footer)
No CAPTCHA

Add Google Contact Form to Blogger

Sign In to Blogger Dashboard
Select Layout -> Click on Add a Gadget
Select More Gadgets in Left Side and Select Contact Form
Give the Title and Click Save

You have done please check your blog.

When visitor drop a message it goes straight to your inbox. One copy of the message will send to each Admin.
I hope this Contact Form will help your blog to get Suggestions and queries from visitors.

More about → Add Google Official Contact Form Widget to Blogger?

Beautiful Page Navigation for Blogger Blog [new script]

Posted by Unknown

Blogger Page Navigation is an awesome trick to navigate your Blogger Blog Pages.It allows your users to Navigate Blog pages like Book,By using this your blog visitors can easily go to an appropriate page.By default Blogger allows Older Posts and Newer Posts link to Navigate between Blog pages.It is very difficult for your users to navigate deeper into your Blog's Posts, so the Page Navigation helps us to solve this problem.
Let's see how to install it.Follow the steps below.

1.How to install Page Navigation Widget

Log In to your Blogger Account
Go to Design-> Page Elements(Shown in the Picture)
In New Blogger Template Go to Layout -> Add Gadget

Click on Add Gadget (anyone) and look for HTML/Javascript take it.
Leave the Title as Blank(as shown in the figure)

Copy and paste the below code in it.

you can change Red Highlighted texts when you need. pageCount=7; determines how many Blog posts in each pages. you want to display in each pages.(Note:if you change this value '7' goto Settings->Formatting and change value of Show at most as you given in PageCount)

And displayPageNum=5 determines how many additional Page Navigation numbers display on the page.

Click on save,You are almost clear.
Then Change the position of the Widget ,place under the Blog posts.(shown in the figure)

Done..your blog had a page navigation bar.

The Page Navigation had been developed by Muhammed Rias and it was a good presentation.There are some bugs in that and Abu Farhan had solved it.Give them a big thanks for giving us a Beautiful Page Navigation Solution.

More about → Beautiful Page Navigation for Blogger Blog [new script]

Add Animated Ramadan Lantern Widget/Ramadan Hanging Light to Blogger?

Posted by Unknown

Ramadan also known as Ramzan is a holy festival of Islam. This spiritual event is celebrated by fasting(every day sunrise to sunset) for a whole month.Ramadan is the month in which was sent down the Qur'an,
as a guide to mankind, also clear Signs for guidance and judgment between right and wrong. So everyone of you who is present during that month should spend it in fasting. In this time have you ever think about designing / decorating your blog something special. If you have a wish like that don't wait, here I am going to show a tutorial about decorating your blog with Ramadan Lanterns.

Before revealing this tutorial I would like to thank Syed Faizan Ali of MyBloggerLab.com, he made this animated Ramadan Lantern for blog users. Not only for blogger users but also can use this to Websites or Other blogging platforms(WordPress,Drupal etc) . This animated hanging light created in flash so your browser should support Flash Player,Otherwise you have to install Flash Player. In newer Operating Systems (Windows 7, Windows 8) Flash Player already installed it.Flash Animated Ramadan Lantern in top of our blog,you can see a hanging Lantern spinning to left to right then also back with a glowing Ramadan Kareem in background. This Ramadan Lantern looks very nice in Dark backgrounds,Blue,Orange Backgrounds.

You can see the demo in top of our Blog

How to add Animated Ramadan Lantern ?

Sign In to Blogger Dashboard
Go to Template -> Edit HTML
Find (Ctrl+F) </body>
Copy the Following code just above it

<div align='center'>
<table border='0' cellpadding='0' cellspacing='0' width='900'>
<tr>
<td height='0' width='900'>
<div style='float:top right; position:absolute; overflow:visible; left:45px; top:0px; height:192px; width:144px z-index: 9999;'><a href="http://www.fe-blogger.blogspot.com"></a><object border='0' classid='clsid:D27CDB6E-AE6D-11CF-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0' height='144' id='obj2' width='192'><param name='movie' value='http://netoopscodes.googlecode.com/svn/branches/swf/ramzan-hanging-lanterns.swf'/><param name='quality' value='High'/><param name='wmode' value='transparent'/><embed height='144' name='obj2' pluginspage='http://www.macromedia.com/go/getflashplayer' quality='High' src='http://netoopscodes.googlecode.com/svn/branches/swf/ramzan-hanging-lanterns.swf' type='application/x-shockwave-flash' width='192' wmode='transparent'/></object>
</div>
</td>
</tr>
</table>
</div>

Click on Save. It's done. Check your Blog
Here I am posting this article in this holy occasion of Ramadan not only to reveal this trick but also to show respect ,Kindness to the atmosphere filled with spirit of mirth and love of Ramadan. In this holy occasion I heartily wishing you a Happy Ramadan.

More about → Add Animated Ramadan Lantern Widget/Ramadan Hanging Light to Blogger?

Head banner image changing on reload for Blogger Blog

Posted by Unknown

Today i am saying about an interesting thing .Head banner changing trick for blogger
This is a simple blogger hack.when you add this, your blogger blog's header image will change after RELOAD the webpage on your browser.
Follow the instructions :)

Sign In to your blogger account.
Go to Template->Edit HTML
Find ]]></b:skin> and paste the following code before it.

#header {
background: url("your header image url in quotes") no-repeat left bottom;
margin:0;
padding:2px;
}

Then copy the below script and place above the </head> tag:

<script type="text/javascript">
var banner= new Array();

banner[0]="1st image url";
banner[1]="2nd image url";
banner[2]="3rd image url";
banner[3]="4th image url";
banner[4]="5th image url";
var random=Math.round(4*Math.random());

document.write("<style>");
document.write("#header {");
document.write(' background:url("' + banner[random] + '") no-repeat left TOP;');
document.write(" }");
document.write("</style>");
</script>

you are done...:)
If any problem with this blogger trick please leave comment,don't hesitate to ask,we are happy to help you:)

More about → Head banner image changing on reload for Blogger Blog

Remove Threaded Comments in blogger Easily trick revealed

Posted by Unknown

This is a simple article explaining How to remove Blogger 's New Threaded commenting system easily.There are some problems with it,Many users report that when a user click on post link,it takes control to the bottom of the page(to the comment section).Would you think that Threaded commenting system is not Good for Blog? Then you can remove it.
I am not going to say too much about Threaded commenting System,because i hope you know about it.
Follow the instructions below carefully.

Before Editing Template,you must Backup your template(How to Backup Template?)

Go to Design-> Edit HTML
Tick on Check box Expanded Widget Templates
Find the code data:post.showThreadedComments easily using ctrl+F
You will found code snippet like this

<b:if cond='data:post.showThreadedComments'>
            <b:include data='post' name='threaded_comments'/>
          <b:else/>
            <b:include data='post' name='comments'/>
          </b:if>
        </b:if>
        <b:if cond='data:blog.pageType == "item"'>
          <b:if cond='data:post.showThreadedComments'>
            <b:include data='post' name='threaded_comments'/>
          <b:else/>
            <b:include data='post' name='comments'/>
          </b:if>
        </b:if>

Replace it carefully with the following code [Note: You will find the above code twice,replace it twice]

<b:include data='post' name='comments'/>
          </b:if>
               <b:if cond='data:blog.pageType == "item"'>
                     <b:include data='post' name='comments'/>

        </b:if>

Save it ,

No longer Threaded commenting appear on your blog.Normal commenting will back.
Cheers..!

More about → Remove Threaded Comments in blogger Easily trick revealed

Awesome Random Posts Widget for blogger Blog

Posted by Unknown

Random Posts widget is an awesome widget for your Blogger Blog.Most important feature of this widget is it lets your Blog visitors to surf more blog posts in your blog.Surely it increases your Blog's internal links that lets your blog higher traffic.
Its let your users to spend more time in your Blog.

VIEW DEMO

Install Random posts widget

Make sure you are Sign In to your Blogger Account.

If you are a beginner in Blogger Editing ,use our one click Widget

Click the below Add to Blogger Button to install

Manually Add Random posts Widget

Sign In to your Blogger Account.
Go to Design->Page Elements
Click on Add Gadget and look for HTML/Javascript take it
Give the title as you need(eg:Random Posts)
Copy and paste the below code to the content section

Click on Save and its Done...If you have any doubts don't hesitate to ask.Please Comment.
I hope you had enjoyed this post.Leave Comments...

More about → Awesome Random Posts Widget for blogger Blog

Awesome Stylish 404 Error Pages For Blogger

Posted by Unknown

404 Error or Page Not Found Error generated by Blogger when a user enters an invalid URL or 404 Error is an HTTP status code that means the page you are trying to reach on your Blog couldn't found or Page not exist in the Server.
By Default Blogger shows Error page message in a box and its not look Style.
Here I am saying about how to Customize it much better...

View Demo

Only Custom message [No Style]

If you want to show only a custom message then First Go to updated Blogger Interface
Then Go to Setting->Search Preferences

Error Message with Stylish 404 images

If you want Colorful Stylish 404 page do the following.

Go to Design->Edit HTML
Find </head> and copy the below code just above it.

<b:if cond='data:blog.pageType == "error_page"'>
<style type="text/css">.status-msg-wrap{font-size:100%;margin:none;position:static;width:100%}.status-msg-border{display:none}.status-msg-body{padding:none;position:static;text-align:inherit;width:100%;z-index:auto}.status-msg-wrap a{padding:none;text-decoration:inherit}</style>
</b:if>

Save the Template

Error Page Style 1

Go to Setting->Search Preferences
Copy below code in Custom Page Not Found section [as shown in fig. first]

<h2 style="font-size: 35px;margin: 0;text-align: center;">Oops..! </h2>
<h3 style="font-size:17px;">Sorry,You are trying to reach an invalid page...!<br><a href="/">Click here</a> to go to Homepage <br> Have a nice Day...</h3><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCQWIbzK0D4lEb9g0j5tgNNVdpCD6n264clrfRGscH5AMMzEJwf5coJsQY6JNnHkMbyW2z4QL0qAtmG1Zl2frP0Bn6qcjZIFxLjGRyyZfArkbOksXrq8LWlzuLbDjT6ZyeQdDAqbaGalE/s1600/404+error+page+1.jpg"/>

Error Page Style 2

Go to Setting->Search Preferences
Copy below code in Custom Page Not Found section [as shown in fig. first]

<h2 style="font-size: 35px;margin: 0;text-align: center;">Oops..! </h2>
<h3 style="font-size:17px;">Sorry,You are trying to reach an invalid page...!<br><a href="/">Click here</a> to go to Homepage <br> Have a nice Day...</h3><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipv2XvCGiD_8QgLzl8Eg3LunWnQo8A1C_9qOt52eRiRQzQF2EHB1laVSbryoKBlcn48gDHrFQEfqN0WVrvPRpPqBzFbJS-WrJA5B4IISA2o0f4JBGb6al2CdOKL-cv8gJkM20DfhlEsJw/s1600/404+error+page+2.jpg"/>

Error Page Style 3

Go to Setting->Search Preferences
Copy below code in Custom Page Not Found section [as shown in fig. first]

<h2 style="font-size: 35px;margin: 0;text-align: center;">Oops..! </h2>
<h3 style="font-size:17px;">Sorry,You are trying to reach an invalid page...!<br><a href="/">Click here</a> to go to Homepage <br> Have a nice Day...</h3><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZi1TFP1lz4VQQf0Iy-OI8jFvuL642VgHOHcsZNSR0B0RYPA5iggU8SONg6siZ8EnhXJR63Ge7e1lPY_lbkfU6Ovm6slnZizlMX-8j5G0gw5jHB8PvIEPXSlid2sstfgNzH0iCokZhKrE/s1600/404+error+page+4.jpg"/>

Error Page Style 4

Go to Setting->Search Preferences
Copy below code in Custom Page Not Found section [as shown in fig. first]

<h2 style="font-size: 35px;margin: 0;text-align: center;">Oops..! </h2>
<h3 style="font-size:17px;">Sorry,You are trying to reach an invalid page...!<br><a href="/">Click here</a> to go to Homepage <br> Have a nice Day...</h3><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLVh-JPQoNbB-Xn98bQDeQy6R051p1zMYda_Nb5vX3hm-kkuFeA0Shq6MlAnN166-UZJr4cGc_veNQtxhZxGL80LtNen3rVneagAMxY99aZ80q7atooySscoRGRJL8p9w4A5RY3hDi05U/s320/404+error+page+6.jpg"/>

Error Page Style 5

Go to Setting->Search Preferences
Copy below code in Custom Page Not Found section [as shown in fig. first]

<h2 style="font-size: 35px;margin: 0;text-align: center;">Oops..! </h2>
<h3 style="font-size:17px;">Sorry,You are trying to reach an invalid page...!<br><a href="/">Click here</a> to go to Homepage <br> Have a nice Day...</h3><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMZA8HFes24PdIwRXjrufF18d54QPyZsJr7BxAHos5v8_VsjLpSmerA3BnW3mWBi8knDU_s37-JTn2rG0Fs9jYP1_zAsy16GggxH6Aw5k2en-87QEDE40Y7PfjwHyiKyWRbpF4Byg80m0/s1600/404+error+page+7.jpg"/>

Error Page Style 6

Go to Setting->Search Preferences
Copy below code in Custom Page Not Found section [as shown in fig. first]

<h2 style="font-size: 35px;margin: 0;text-align: center;">Oops..! </h2>
<h3 style="font-size:17px;">Sorry,You are trying to reach an invalid page...!<br><a href="/">Click here</a> to go to Homepage <br> Have a nice Day...</h3><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOIQKQeKwIkCRvSiJwz7kab6VoODHQjaa_J-V93H01qBr0z4MuNp_IsEylWr-VmMhcqQnpF6IV5I5IQGEbG4c2XVIAQEfqcl5eJK6qFDHRKRuOfK8w5vT8fFCm6h2OY-R4IGF6lx7rgvU/s1600/404+error+page+3.jpg"/>

Then Click Save..That all..
First thanks to Bloggerplugins.com for the custom error page code, visit here. Then i made some changes and add beautiful 404 images that i was inspired from HongKiat .

I thinks this article helped you..If any bugs of doubts don't hesitate to ask..do comment...
Like and share...

More about → Awesome Stylish 404 Error Pages For Blogger

Expand Widget Templates in new Blogger HTML Template Editor

Posted by Unknown

Today I am sharing a useful post that all of Blogger Bloggers searching in Blogger New HTML Editor.
In old HTML Editor, there is an option "Expand Widget Templates".
By default while editing HTML code, Blogger shows only core of template and not shows the Blogger Widget codes. To see the full template code you have to select the option "Expand Widget Templates"
This option is very useful to add new features or additional features inside specific widgets in Blogger template.
Here I am going to show you how to do in new Blogger HTML Editor.

This is the option in old Blogger Template.
The new Blogger Template looks like the following.

You can't expand all widgets simultaneously. You have to expand each Widgets by clicking the right arrows as shown below.

Also you can expand the code of specific widget, take "Jump to widget" from the drop down box take the appropriate widget to see the code.
I think this article will help you not a lot but a little, if so please take a few seconds to share this article..

More about → Expand Widget Templates in new Blogger HTML Template Editor

Pages

How to add Search engine Friendly Title to Blogger?

Google Official Contact Form for Static Pages in Blogger

Add Blogger Official Contact Form to Static Pages

Add Google Official Contact Form Widget to Blogger?

Advantages

Disadvantages

Add Google Contact Form to Blogger

Beautiful Page Navigation for Blogger Blog [new script]

1.How to install Page Navigation Widget

Add Animated Ramadan Lantern Widget/Ramadan Hanging Light to Blogger?

How to add Animated Ramadan Lantern ?

Head banner image changing on reload for Blogger Blog

Remove Threaded Comments in blogger Easily trick revealed

Before Editing Template,you must Backup your template(How to Backup Template?)

Awesome Random Posts Widget for blogger Blog

Install Random posts widget

Make sure you are Sign In to your Blogger Account.

Manually Add Random posts Widget

Awesome Stylish 404 Error Pages For Blogger

Only Custom message [No Style]

Error Message with Stylish 404 images

Error Page Style 1

Error Page Style 2

Error Page Style 3

Error Page Style 4

Error Page Style 5

Error Page Style 6

Expand Widget Templates in new Blogger HTML Template Editor

Translate

Total Pageviews

Popular Posts

Labels

Blog Archive