Advance Tips And Tutorials

Wednesday 21 August 2013

How To Add Customized Contact Us Form On Blogger

02:22

Ms

Add Contact Form on Blogger

Login to Blogger > Dashborad
Click on Drop Down Menu and select Layout
Add Gadget
Click on More Gadget
Select Contact Form

Now Give a Name to your Contact Form as we recommend you should give Contact Form

Now save it.

Customize Contact Form

login to Blogger > Dashborad

Click on Drop Down Menu and select Template

Backup your Template before making any changes to your blog
Now Search for </head>
Paste below code just before </head>

<style>/*---- Compatible contact Form by TTH -----*/.contact-form-name, .contact-form-email, .contact-form-email-message { max-width: 220px; width: 100%; font-weight:bold; } .contact-form-name { background:#FFF url(http://2.bp.blogspot.com/bNZePDihTPU/UZ-lhWAHXqI/AAAAAAAAJuo/aSVVE_A6HpE/s320/name.png) no-repeat 7px 8px; background-color: #FFF; border: 1px solid #ddd; box-sizing: border-box; color: #A0A0A0; display: inline-block; font-family:Arial,sans-serif; font-size: 12px; font-weight:bold; height: 24px; margin: 0; margin-top:5px; padding: 5px 15px 5px 28px; vertical-align: top;} .contact-form-email { background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKRdXPw7KQ2J3qRkx_Etrm49SmolQEqlIuitAzgS4BV65T5aRkp2kaE8GJS5T7kXExhmCucqNWJp8vSUDXH9i-U_arzctNL02N5RH1zZwzCojURkxtQ0wtaRQEYaJ1CzEzgK8StNO7haY/s320/email.png) no-repeat 7px 10px; background-color: #FFF; border: 1px solid #ddd; box-sizing: border-box; color: #A0A0A0; display: inline-block; font-family: Arial,sans-serif; font-size: 12px; font-weight:bold; height: 24px; margin: 0; margin-top: 5px; padding: 5px 15px 5px 28px; vertical-align: top;}.contact-form-email:hover, .contact-form-name:hover{ border: 1px solid #bebebe; box-shadow: 0 1px 2px rgba(5, 95, 255, .1);padding: 5px 15px 5px 28px;}.contact-form-email-message:hover { border: 1px solid #bebebe; box-shadow: 0 1px 2px rgba(5, 95, 255, .1); padding: 10px; }.contact-form-email-message { background: #FFF; background-color: #FFF; border: 1px solid #ddd; box-sizing: border-box; color: #A0A0A0; display: inline-block; font-family: arial; font-size: 12px; margin: 0; margin-top: 5px; padding: 10px; vertical-align: top; max-width: 350px!important; height: 150px; border-radius:4px; }.contact-form-button { cursor:pointer; height: 32px; line-height: 28px; font-weight:bold; border:none; }.contact-form-button { display: inline-block; zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */ *display: inline; vertical-align: baseline; margin: 0 2px; outline: none; cursor: pointer; text-align: center; text-decoration: none; font: 14px/100% Arial, Helvetica, sans-serif; padding: .5em 2em .55em; text-shadow: 0 1px 1px rgba(0,0,0,.3); -webkit-border-radius: .5em; -moz-border-radius: .5em; border-radius: .5em; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); box-shadow: 0 1px 2px rgba(0,0,0,.2); } .contact-form-button:hover { text-decoration: none; } .contact-form-button:active { position: relative; top: 1px; }.TTH-btnLogin{-moz-border-radius:2px; -webkit-border-radius:2px;border-radius:15px;background:#a1d8f0;background:-moz-linear-gradient(top, #badff3, #7acbed);background:-webkit-gradient(linear, center top, center bottom, from(#badff3), to(#7acbed));-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#badff3', EndColorStr='#7acbed')";border:1px solid #7db0cc !important;cursor:pointer; padding:11px 16px;font:bold 11px/14px Verdana, Tahomma, Geneva;text-shadow:rgba(0,0,0,0.2) 0 1px 0px; color:#fff;-moz-box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px, rgba(0,0,0,0.1) 0 1px 1px; -webkit-box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px, rgba(0,0,0,0.1) 0 1px 1px;box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px, rgba(0,0,0,0.1) 0 1px 1px; margin-center:12px; float:center; padding:7px 21px;}.TTH-btnLogin:hover,.btnLogin:focus,.btnLogin:active{background:#a1d8f0;background:-moz-linear-gradient(top, #7acbed, #badff3);background:-webkit-gradient(linear, center top, center bottom, from(#7acbed), to(#badff3));-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#7acbed', EndColorStr='#badff3')";}.TTH-btnLogin:active{ text-shadow:rgba(0,0,0,0.3) 0 -1px 0px; }</style> <style> @media screen and (-webkit-min-device-pixel-ratio:0) {.contact-form-name { background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY08XvX_iJmHPl9DQfxq2MNPVNQzjhXLzvXYu8Oz5aJfytyHNi9-wCuLPm1bS-Y-nJz2yO-D9wbEAa9CBj0YCar1BI64ieGixYqEYIQLWIbl62lhHv8tXRPPmhyVlvCBgeZFYp88RRMpg/s320/name.png) no-repeat 7px 6px; padding: 15px 15px 15px 28px;}.contact-form-email { background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKRdXPw7KQ2J3qRkx_Etrm49SmolQEqlIuitAzgS4BV65T5aRkp2kaE8GJS5T7kXExhmCucqNWJp8vSUDXH9i-U_arzctNL02N5RH1zZwzCojURkxtQ0wtaRQEYaJ1CzEzgK8StNO7haY/s320/email.png) no-repeat 7px 8px; padding: 15px 15px 15px 28px;}.contact-form-email:hover, .contact-form-name:hover{ padding: 15px 15px 15px 28px; }.contact-form-button { height: 28px;}}</style>

Now Save it

Add Contact Form on Static Page

Login to Blogger > Dashborad
Click on Drop Down Menu and select Pages
Click on New Page
Select Blank Page

Now Click on HTML an Paste below code in it.

<div class='form'>

<form name='contact-form'>

<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' value="Name" size='30' type='text' onblur='if (this.value == "") {this.value = "Name";}' onfocus='if (this.value == "Name") {this.value = "";}' />
<p></p>

<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' value="Email ID" size='30' type='text' onblur='if (this.value == "") {this.value = "Email ID";}' onfocus='if (this.value == "Email ID") {this.value = "";}'/>
<p></p>

<textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message' value='Leave Your Message..' onblur='if (this.value == "") {this.value = "Leave Your Message..";}' onfocus='if (this.value == "Leave Your Message..") {this.value = "";}'></textarea>
<p></p>

<input class='TTH-btnLogin' type='reset' value='Clear'/>

<input class='TTH-btnLogin' id='ContactForm1_contact-form-submit' type='button' value='Send'/>
<p></p>

<div style='text-align: center; max-width: 222px; width: 100%'>
<p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
<p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
</div>
</form>

</div>

Now publish that page.

Hide Contact Form from Sidebar

Now here comes the part how to hide that contact form from sidebar or layout widget.

Login to Blogger > Dashborad
Click on Drop Down Menu and select Template
Backup your Template before making any changes to your blog.

Now search for the id "ContactForm". expand the widget by clicking on the black arrow on the left (same with the includable) and then delete the part that I have colored in red (see below):

Part to be removed:

<b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>
    <b:includable id='main'>
<b:if cond='data:title != ""'>
    <h2 class='title'><data:title/></h2>
</b:if>
<div class='contact-form-widget'>
    <div class='form'>
      <form name='contact-form'>
        <p/>
        <data:contactFormNameMsg/>
        <br/>
        <input class='contact-form-name' expr:id='data:widget.instanceId + "_contact-form-name"' name='name' size='30' type='text' value=''/>
        <p/>
        <data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span>
        <br/>
        <input class='contact-form-email' expr:id='data:widget.instanceId + "_contact-form-email"' name='email' size='30' type='text' value=''/>
        <p/>
        <data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span>
        <br/>
        <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + "_contact-form-email-message"' name='email-message' rows='5'/>
        <p/>
        <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + "_contact-form-submit"' expr:value='data:contactFormSendMsg' type='button'/>
        <p/>
        <div style='text-align: center; max-width: 222px; width: 100%'>
          <p class='contact-form-error-message' expr:id='data:widget.instanceId + "_contact-form-error-message"'/>
          <p class='contact-form-success-message' expr:id='data:widget.instanceId + "_contact-form-success-message"'/>
        </div>
      </form>
    </div>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

Now save the template.

How To Add Page Number in Blogger

02:08

Ms

Blogger free blog publishing platform uses a pretty limited navigation features that only display “Older Posts” or “Newer Posts” link to let readers navigate and browse to other pages on homepage (index), archive, category and label pages. Unlike WordPress blog that supports plugin to customize the page navigation link to numbered pages listing to make it more user friendly, Blogger, whether hosted on blogspot.com or custom domain does not have such flexibility.

As shown in image above, a navigation link consists of page numbers, first page, last page, next page and previous page (when applicable) is display on Blogger blog instead of the usual “Older Items” and “Newer Items” text links.
To add the “new” navigation link with page number to Blogger blog, simply add in a new Page Element Gadget in the Blogger. To do so, follow the guide below:

Login to Blogger account Dashboard.
Click on the Layout link for the blog that you want to modify (if you’re viewing the blog and logged in to Blogger or Google Account, just click on Customize on the Next Blog toolbar.
Go to Page Element tab (by default).
Click on Add a Gadget anywhere in the layout.
In the Add a Gadget window, select HTML/JavaScript.
Add the following code into the Content text field. Title field can be left blank, or just type in any description such as “Page Navigation” to differentiate it from the rest of widgets.

<style>
.showpageArea {
padding: 0 2px;margin-top:10px;margin-bottom:10px;
}
.showpageArea a {
border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageArea a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
.showpageNum a {
border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageNum a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
.showpagePoint {
font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
font-weight: bold;
border: 1px solid #333;
color: #fff;
background-color: #000000;
}
.showpage a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
.showpageNum a:link,.showpage a:link {
font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid #0066cc;
color: #0066cc;
background-color: #FFFFFF;}
.showpageNum a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
</style>
<script type=”text/javascript”>
function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==”.blogspot.com/”;
var isLablePage = thisUrl.indexOf(“/search/label/”)!=-1;
var isPage = thisUrl.indexOf(“/search?updated”)!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf(“/search/label/”)+14,thisUrl.length) : “”;
thisLable = thisLable.indexOf(“?”)!=-1 ? thisLable.substr(0,thisLable.indexOf(“?”)) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= ”;
var upPageHtml =”;
var downPageHtml =”;
var pageCount=5;
var displayPageNum=3;
var firstPageWord = ‘First’;
var endPageWord = ‘Last’;
var upPageWord =’Previous’;
var downPageWord =’Next’;
var labelHtml = ‘<span class=”showpageNum”><a href=”/search/label/’+thisLable+’?&max-results=’+pageCount+’”>’;
for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=”){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
postNum++;
htmlMap[htmlMap.length] = ‘/search/label/’+thisLable+’?updated-max=’+timestamp+’T00%3A00%3A00%2B08%3A00&max-results=’+pageCount;
}
}
}
}//end if(post.category){
itemCount++;
}
}else{
if(title!=”){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
if(title!=”) postNum++;
htmlMap[htmlMap.length] = ‘/search?updated-max=’+timestamp+’T00%3A00%3A00%2B08%3A00&max-results=’+pageCount;
}
}
itemCount++;
}
}
for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +’</a></span>’;
}else{
upPageHtml = ‘<span class=”showpage”><a href=”/”>’+ upPageWord +’</a></span>’;
}
}else{
upPageHtml = ‘<span class=”showpage”><a href=”‘+htmlMap[p]+’”>’+ upPageWord +’</a></span>’;
}
fFlag++;
}
if(p==(thisNum-1)){
html += ‘ <span class=”showpagePoint”><u>’+thisNum+’</u></span>’;
}else{
if(p==0){
if(isLablePage){
html = labelHtml+’1</a></span>’;
}else{
html += ‘<span class=”showpageNum”><a href=”/”>1</a></span>’;
}
}else{
html += ‘<span class=”showpageNum”><a href=”‘+htmlMap[p]+’”>’+ (p+1) +’ </a></span>’;
}
}
if(eFlag ==0 && p == thisNum){
downPageHtml = ‘<span class=”showpage”> <a href=”‘+htmlMap[p]+’”>’+ downPageWord +’</a></span>’;
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){
if(thisNum>1){
if(!isLablePage){
html = ‘<span class=”showpage”><a href=”/”>’+ firstPageWord +’ </a></span>’+upPageHtml+’ ‘+html +’ ‘;
}else{
html = ”+labelHtml + firstPageWord +’ </a></span>’+upPageHtml+’ ‘+html +’ ‘;
}
}
html = ‘<div class=”showpageArea”><span style=”font-size:11px;padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;color: #000000;border: 1px solid #333; background-color: #FFFFFF;” class=”showpage”>Page ‘+thisNum+’ of ‘+(postNum-1)+’: </span>’+html;
if(thisNum<(postNum-1)){
html += downPageHtml;
html += ‘<span class=”showpage”><a href=”‘+htmlMap[htmlMap.length-1]+’”> ‘+endPageWord+’</a></span>’;
}
if(postNum==1) postNum++;
html += ‘</div>’;
if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName(“pageArea”);
var blogPager = document.getElementById(“blog-pager”);
if(postNum <= 2){
html =”;
}
for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}
if(pageArea&&pageArea.length>0){
html =”;
}
if(blogPager){
blogPager.innerHTML = html;
}
}
}
</script>
<script src=”/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999″ type=”text/javascript”></script>
Click Save button.
Drag and drop the newly added HTML/JavaScript gadget to directly right below the Blog Posts element.
Click on Save button to make the change effective.

For user who don’t want to use the Page Element widget or gadget, it’s possible to manually editing the HTML file, although it’s more difficult to do and should only be tried by blogger with technical expertise.

Login to Blogger account Dashboard.
Click on the Layout link for the blog that you want to modify (if you’re viewing the blog and logged in to Blogger or Google Account, just click on Customize on the Next Blog toolbar.
Go to Edit HTML tab (there is no need to expand widget templates).
Search for the following line:]]></b:skin>
Copy the following CSS code and paste or append the code above the line: .showpageArea { padding: 0 2px;margin-bottom:10px;margin-top:10px; }
.showpageArea a { border: 1px solid #505050; color: #000000;font-weight:normal; padding: 3px 6px !important; padding: 1px 4px ;margin:0px 4px; text-decoration: none; }
.showpageArea a:hover { font-size:11px; border: 1px solid #333; color: #000000; background-color: #FFFFFF; }
.showpageNum a { border: 1px solid #505050; color: #000000;font-weight:normal; padding: 3px 6px !important; padding: 1px 4px ;margin:0px 4px; text-decoration: none; }
.showpageNum a:hover { font-size:11px; border: 1px solid #333; color: #000000; background-color: #FFFFFF; }
.showpagePoint { font-size:11px; padding: 2px 4px 2px 4px; margin: 2px; font-weight: bold; border: 1px solid #333; color: #fff; background-color: #000000; }
.showpage a:hover { font-size:11px; border: 1px solid #333; color: #000000; background-color: #FFFFFF; }
.showpageNum a:link,.showpage a:link { font-size:11px; padding: 2px 4px 2px 4px; margin: 2px; text-decoration: none; border: 1px solid #0066cc; color: #0066cc; background-color: #FFFFFF; }
.showpageNum a:hover { font-size:11px; border: 1px solid #333; color: #000000; background-color: #FFFFFF; }
Next, search for the following line of code in the template’s HTML code: <b:section class='main' id='main' showaddelement='no'> <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/> </b:section>
Note: The ‘no’ after “showaddelement” can be ‘yes’ for some bloggers.
Add and append the following JavaScript code right after the </b:section> line:

<script type="text/javascript">
function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';
var pageCount=5;
var displayPageNum=3;
var firstPageWord = 'First';
var endPageWord = 'Last';
var upPageWord ='Previous';
var downPageWord ='Next';
var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';
for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){
itemCount++;
}
}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}
for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}
fFlag++;
}
if(p==(thisNum-1)){
html += '&nbsp;<span class="showpagePoint"><u>'+thisNum+'</u></span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';
}
}
if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){
if(thisNum>1){
if(!isLablePage){
html = '<span class="showpage"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}else{
html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}
}
html = '<div class="showpageArea"><span style="font-size:11px;padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;color: #000000;border: 1px solid #333; background-color: #FFFFFF;" class="showpage">Page '+thisNum+' of '+(postNum-1)+': </span>'+html;
if(thisNum<(postNum-1)){
html += downPageHtml;
html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'"> '+endPageWord+'</a></span>';
}
if(postNum==1) postNum++;
html += '</div>';
if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");
if(postNum <= 2){
html ='';
}
for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}
if(pageArea&&pageArea.length>0){
html ='';
}
if(blogPager){
blogPager.innerHTML = html;
}
}
}
</script>
<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>
Click on Preview button to ensure that no code error been found. No effect on the navigation hack can be seen though.
Click on Save Template to save the change.

Customization and Modification

For user who is not using blogspot.com domain (using self-hosted domain name), modify the .blogspot.com and 14 (13 characters of domain name + 1) in the line of var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/"; accordingly.
The value in the line of var pageCount =5; determines the number of posts to be shown on each page.
The value in the line of var displayPageNum = 3; defines the number of page links in the navigation bar to be displayed (e.g. 1 – 2 – 3).
User who knows CSS and Java Script can customize the code to their likings.

Free Blogger Template OrangeLine

00:44

Ms

Download Click Here

12 Things to Do Before Applying for Google Adsense

00:38

Ms

1. Privacy Policy :

One of the common mistakes that every Blogger makes and that I made many times before finally getting approved. Even though there are people out there who say that having a Privacy Policy for a Blog doesn’t makes sense but they are wrong.
A Privacy actually describes to your readers about what they will get on your Blog , what they should do and what they should not. So obviously there is nothing bad in having a Privacy Policy. While it can affect somehow on your Adsense Approval, you must give it a try. You can write it yourself or find Privacy Policy Generators online (You don’t need a lawyer anyway).

2. About Page

An About has major role and importance if you don’t want to apply for Adsense. But when it comes to Adsense, they are about Zero chances of getting approved if you are not showing this page.About page simply describes about you and your Blog . This will not only help you establish a relationship with readers but it will also make them trust upon you.

3. Contact Us Page

It’s quite obvious that everyone has his/her own opinion. What one of your readers likes may be bothering someone else. Than it is better to give them opportunity to speak up to you and tell how they feel about your Blog, what they want to be edited , what they liked or hated.
It will also show the Google Adsense Team that is viewing your site that you actually care about your readers and not only the money and Adsense.

4. Name/ Email Verification

Make sure to put you Name and Email address in some easily visible area like About Me and Contact Us pages. It will confirm to Google Adsense Team that it is the same person who applied for Adsense and not some spam, crappy bots.

5. Age Verification

I’m really laughing out typing this.

Why?
Because this is where I encountered a problem. Instead of 18, I accidentally published my age as 17 while on Adsense Application Form, it was accurately 18.
Hence there started a problem . Because Google Adsense is not for under 18 people. I realized this problem after being disproved a few times without any legitimate reason. So I advice you to be accurate while typing your age.

6. Minimum Number of Posts

There is no exact answer. Not even one. Because I have seen very established Blogs with 400+ posts and their owner telling me that Google Adsense is rejecting them while somewhere ,people with 40,50 posts are enjoying making money. Exactly what I said that there is no actual answer. However, we can always predict things. According to my experience , you should only apply after you have more than 70 posts. Posts length should must be 500+ words too.
Read : Difference Between Short Length Post Vs Length Posts – What’s Best?

7. Design

Your Blog is the biggest thing after Content. This represents your expertise ,experience and Professionalism. So be careful because anything can kill your Chances.

8. Content Type

Be careful with what type of content you are publishing. Because it is something that truly matters. Google Adsense is not for Pornographic, Illegal Items, Drugs or other Blogs / Sites like that. Also Adsense team won’t be willing to allow you to step in if you own a Non English Blog. Having posts shorter than 300 words in length is also Red Signal.

9. Providing Value

Don’t complain about not making money and don’t clearly state that your are Blogging for Money only and have no other interest in it. Because this will show them that you will not be providing values to your readers any day. Hence another Red Light glows up.

10. Top Level Domain

12 Things to Do Before Applying for Google Adsense

Those are gone far away when Adsense used to approve “Blogspot” and “WordPress.com” Blogs. As for today, you must have your own unique domain that specifies your Blog. If you don’t have one yet, stop dreaming about getting approved with Sub domains and go buy a Top Level Domain.
Another important thing about domain is it’s age. Because for most of Asian Countries, Adsense has placed an age restriction. They don’t accept any sites before they are 6 months old.

11. Other Ad Networks

If you have any other Ads placed like Chitika, Clicksor or anything, it’s time to drop them off.
Even Google Adsense allows you to use other Ad Networks along with them, it’s better to remove the ads before Applying and don’t put them back until you get a reply from Adsense Team.

12. Paid Traffic

Google hates the sites that are getting Paid traffic and mostly penalizes them so there is not a damn chance of getting Adsense Approval letter for a site that is getting paid traffic. You can bring traffic from Search Engines or any other way you want but if you want to earn via Google Adsense the right way, paid traffic is not a solution.

Tuesday 20 August 2013

Add Custom Robots.txt file in Blogger

21:35

Ms

Adding Custom Robots.Txt to Blogger

Now the main part of this tutorial is how to add custom robots.txt in blogger. So below are steps to add it.

Go to your blogger blog.
Navigate to Settings >> Search Preferences ›› Crawlers and indexing ›› Custom robots.txt ›› Edit ›› Yes
Now paste your robots.txt file code in the box.
Click on Save Changes button.
You are done!

How to Check Your Robots.txt File?

You can check this file on your blog by adding /robots.txt at last to your blog URL in the browser. Take a look at the below example for demo.

http://www.tricks3000.blogspot.com/robots.txt

Once you visit the robots.txt file URL you will see the entire code which you are using in your custom robots.txt file. See below image.

How To Setting up Custom Robots header tag

21:24

Ms

Step 1: To enable these tags, Go To Blogger > Settings > Search Preferences, click Edit next to "Custom robots header tags," and select Yes. Activated!

Now you must learn when should you use them. Using them correctly can help you rank better and using them at wrong scenarios can surely going to opposite.

all:- There are no restrictions for indexing or serving. This is default for all pages
noindex:- Do not show this page in search results and do not show a "Cached" link in search results.
nofollow:- Do not follow the links on this page
none:- Equivalent to noindex, nofollow
noarchive:- Do not show a "Cached" link in search results.
nosnippet:- Do not show a snippet in the search results for this page
noodp:- Do not use metadata from the Open Directory project (DMOZ) for titles or snippets shown for this page.
notranslate:- Do not offer translation of this page in other languages in search results.
noimageindex:- Do not index images on this page.
unavailable_after:- [RFC-850 date/time]: Do not show this page in search results after the specified date/time. The date/time must be specified in the RFC 850 format. Example: 17 May 2012 15:00:00 PST.

Step 2: After Learning Above Meaning Lets Start Setting.

noodp ?

This command instruct Google not to use the meta data from DMoz for showing up the images and snippets of your website in Google search engine result pages.

"noindex" and "nofollow"?

"noindex" command restrict search engines to show a page in search engine result pages, not even cached link to that page also. Any page or post that you want to hide from robots and visitors can be tagged as noindex. Visitors wont be able to discover that page via search engines or may be even with the Google Custom Search Engine.
The "nofollow" command instruct not to follow the link of a page. The "none" command is similar to "noindex" and "nofollow".

"noarchive" and "notranslate"?

The "noarchive" command restrict search engine to show cached link of a web page. Where the "notranslate" command disable the translation of a page in search results.

noimageindex ?

If you are sharing your Project or Personal Picture on any of your posts or page then may be you would prefer not to make those pictures public and keep them limited to readers reach only.

all ?

This command means there are no restrictions for indexing and serving anything from a webpage.
What is the work of "unavailable_after"?
The command instruct the search engine that remove the page from the search results after a specific time period.

If you do not want to do the settings you can leave it as disable mode in default, you can get the better effect with your site SEO but it is an advanced mode for your Site. It will make more effective with your site content and make it make high rank from other blogger BlogSpot. I would really appreciate you to use it for your Blog