Sindhuli: Blogspot

How To Add Blogger Contact Form to Specific or other Pages

If you want to hide contact form from side bar and you should add the contact form widget so that showing it on a specific page. If you already have added it, please leave these steps and who don’t added official blogger "Contact Us" widget can follow below some steps
See the DEMO of the contact form
1. First sign in to your Blogger account with your valid user name and password and go to Layout
2. Now click on "Add a Gadget" link options and "More Gadgets" see the below snapshot
3. Now find “Contact form” page element and click on it.

3. If you want to change the title of the contact form widget, so you can change it which ever you want. then click on "Save" button
The gadget is has been added to sidebar but now we have to hide from sidebar and want to be shoing in to specific page so please lets go to do next step.

4. Now go to Template and click on the "Edit HTML" button.Then click the "Format template" and press "CTRL+F" or "F3" button from the keyboard and find this code "</b:skin>"then paste below code just above of "]]></b:skin>"code in the blogger template
[ #ContactForm1
{
display: none ! important;
} ]

5. Click on "Pages" tab from on the left hand side cournet
6. Now click on "New page >> Blank page" options

7. Now switch to the HTML mode paste the below code inside there inside empty page
<form name="contact-form">
<p></p>
Your Name:<br />
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" value="" type="text" />
<p></p>
Your Email:
<span style="font-weight: bolder;color:red;"></span><br />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" value="" type="text" />
<p></p>
Your Message: <span style="font-weight: bolder;color:red;"></span><br />
<textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" cols="25" rows="5"></textarea>
<p></p>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" value="Send" type="button" />
<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>

Note:
You can modify or change highlighted words with relevant your own words.(i.e: for Your Email,Type your Email address)
Replace Required message instead of red color star symbols(*)( i.e: (required) )
Change Send with wished text to be shown on Submit button
Now finally press the "Publish" button now go to blogspot site and see there has been shown.

Posted in: Blogspot |

Blogger Tips To Optimize Your Blog For Readers & Search Engine

Blogger Tips To Optimize Your Blog For Readers & Search Engine tips:

STEP1.

Search this code: <title><data:blog.pageTitle/></title> (Tip: Use CTRL+F)

Replace the above code with below codes

<b:if cond=’data:blog.pageType == "index"’> <title><data:blog.title/></title> <b:else/> <title><data:blog.pageName/> | <data:blog.title/></title> </b:if>

STEP2. Change Headings

Headings are the most precious HTML tags which are used to determine the value of a text in a paragraph. So in SEO terms we use H1 for blog’s post title and H2 for post titles, and this setting is applied to WordPress websites by default; But the problem is with blogger; blogger adds H3 to the post title in default templates. So we must at least promote the headings for post titles from H3 to H2. To do this follow given tips below:

Go to Blog Template and then HTML >> Proceed.

Search for H3 and from the CSS to HTML change all 8 or 9 H3 tags to H2. That’s all and save template

STEP3. Optimizing Blog Labels

The Label links are the tags which are used in Blogger, in WordPress they are called “Tags”. For a better user navigation we use these tags in Blogger. They most often create problems for search engines crawlers, because a URL is accessed from labels as well as from its respective URL (Permalink). So we need to change them to their respective HTML attributes and to tell search engines that this is not the actual URL but it is a tag. Follow below tips to do so:

Go to Blog Template > HTML >> Proceed

Search for This piece of Code:

<a expr:href=’data:label.url’

Replace it with this:

<a expr:href=’data:label.url’ rel=’tag’

Save Template and that’s all for Labels.

Note: If rel=’tag’ is already exists then don’t change anything, leave it as it is.

STEP4. Optimizing Comments

Comments are good for every blog and website. But if they are irrelevant then they might destroy the search ranking. So you must keep comments’ links as nofollow or external nofollow. This attribute will instruct Search Robots for not following or indexing the external (outgoing links) inside the comments, do following steps to do so:

Go to Blog’s Template >> HTML >> Proceed

Search for this piece of Code

expr:href=’data:post.createLinkUrl’

Replace above with this one below

rel=’external nofollow’ expr:href=’data:post.createLinkUrl’

Save Template and that’s all about comments.

STEP5. Optimizing Blog Archives

This is another problem with blogger blogs. Archives pages (if they are shown in home page) make problems for search robots. So if you want to get rid of this problem then just follow given steps below:

Go to Blog’s Template >> HTML >> Proceed

Search for this piece of Code

Replace above code with one below:

Save template and that’s all done about Archives.

STEP6. Enable Meta Description & Post Search Description

Now with new blogger interface, you can write a description for our blog home page and for every single post as well. But first of all we will have to enable this option in new blogger interface. So to do this quickly:

go to your Blog’s Setting >> Search Preferences >> Meta Tags >> Enable >> Yes and write maximum of 150 letters meta description for your blog and save it.

Now below the page find custom robots header tags. and enable it with this setting showing in picture below:

Save Changes and that’s all for meta description tags.

By enabling this option you will be able to write meta description for each of your new post. This is called search meta description. Having enabled this option you will see a small box named [search description] next to every new post side bar, so you can write 130 to 150 characters unique search description for every individual post. This should be unique from the post title.

STEP7. Change the Static Meta Description

In Blogger new interface, you can see some new added SEO options including dynamic meta description for single posts and blog description. But some or many of blogger custom templates might have the old static meta description code. So to make things correct we need to change the old code with the new one. Follow given steps to do this:

Go to Blog’s Template >> HTML >> Proceed

Just below the <head> tag insert below code

<b:if cond=’data:blog.metaDescription != ""’>

</b:if>

3. Save template and that’s all for changing meta tags.

STEP.8. Adding a Custom Robot.txt file

This is a bit advance option. Carefully use this option, if you can’t use it correctly then don’t use it. Because it can destroy your blog’s ranking in minutes. However, the correct usage of this option is beneficial for everyone. To add a Custom Robot.txt file to your blog’s template just follow given tips:

Go to Blog’s Setting >> Search Preferences >> Below the page find Custom Robot.txt as showing in below image.

First enable this option and the yes, so the box will appear. Copy below code and paste it in that box.

User-agent: Mediapartners-Google

Disallow:

User-agent: *

Disallow: /search?q=*

Disallow: /*?updated-max=*

Posted in: Blogspot |

How to make tree dropdown menu blogger sidebar

How to make tree dropdown menu blogger sidebar

Ever wondered to create an expandable Tree dropdown menu in a simple one step method? There we have it today! A Tree drodown Menu is different from other navigation menus You can add links to it or even simple text and hang it on your blog sidebar. It helps to organize data in a hierarchal method. Most often we use tree dropdown menus for displaying blog archives. It contains a Expand and Contract Link that collapses and shrinks the tree branches. So lets add this beautiful menu to blogger blogs in easiest possible way.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrcdMq5xMfq7G_hyphenhyphenRKrsZaHmNXhGAk4-nWWJZqMPw_m4TsUHtuMq2MMDbEPOl-4s0qNUtyeoc0EcQoyLImxg2jP5KaLRZelHvw3pVX0ag29ji87MIUfnTCZcRpiWOGbbYyzf419C7yCmdh/s1600/tree.png

How to add this method to your blog ?
1. First go to your blog and sign with your real user name and password
2. Now locate to "Layout > Add a Gadget" and find "HTML/Javascript" and click on that option
3. Copy and paste whole the code in to empty box

.treeview li{
background: white url(https://lh3.googleusercontent.com/-11Yqvfw5XQc/UvU8ZmSOthI/AAAAAAAAJzg/KL24trwsPIY/s14-no/list.gif) no-repeat 0px 3px;
list-style-type: none;
padding-left: 32px;
margin-bottom: 3px;
}

.treeview li.submenu{
background: white url(https://lh5.googleusercontent.com/-FvSp3TsRJsg/UvU77nQpNPI/AAAAAAAAJzM/uOg7EL1YN9g/w17-h12-no/closed.gif) no-repeat 0px 3px;
cursor: hand !important;
cursor: pointer !important;
}

.treeview li.submenu ul{
display: none;
}

.treeview .submenu ul li{
cursor: default;
}
</style>

ddtreemenu.closefolder=" https://lh5.googleusercontent.com/-FvSp3TsRJsg/UvU77nQpNPI/AAAAAAAAJzM/uOg7EL1YN9g/w17-h12-no/closed.gif " //set image path to "closed" folder image
ddtreemenu.openfolder=" https://lh6.googleusercontent.com/-48j0rMHvMIg/UvU9Rt56hqI/AAAAAAAAJz4/O_rFz0peXz8/w17-h12-no/open.gif" //set image path to "open" folder image

//////////No need to edit beyond here///////////////////////////

ddtreemenu.createTree=function(treeid, enablepersist, persistdays){
var ultags=document.getElementById(treeid).getElementsByTagName("ul")
if (typeof persisteduls[treeid]=="undefined")
persisteduls[treeid]=(enablepersist==true && ddtreemenu.getCookie(treeid)!="")? ddtreemenu.getCookie(treeid).split(",") : ""
for (var i=0; i<ultags.length; i++)
ddtreemenu.buildSubTree(treeid, ultags[i], i)
if (enablepersist==true){ //if enable persist feature
var durationdays=(typeof persistdays=="undefined")? 1 : parseInt(persistdays)
ddtreemenu.dotask(window, function(){ddtreemenu.rememberstate(treeid, durationdays)}, "unload") //save opened UL indexes on body unload
}
}

ddtreemenu.buildSubTree=function(treeid, ulelement, index){
ulelement.parentNode.className="submenu"
if (typeof persisteduls[treeid]=="object"){ //if cookie exists (persisteduls[treeid] is an array versus "" string)
if (ddtreemenu.searcharray(persisteduls[treeid], index)){
ulelement.setAttribute("rel", "open")
ulelement.style.display="block"
ulelement.parentNode.style.backgroundImage="url("+ddtreemenu.openfolder+")"
}
else
ulelement.setAttribute("rel", "closed")
} //end cookie persist code
else if (ulelement.getAttribute("rel")==null || ulelement.getAttribute("rel")==false) //if no cookie and UL has NO rel attribute explicted added by user
ulelement.setAttribute("rel", "closed")
else if (ulelement.getAttribute("rel")=="open") //else if no cookie and this UL has an explicit rel value of "open"
ddtreemenu.expandSubTree(treeid, ulelement) //expand this UL plus all parent ULs (so the most inner UL is revealed!)
ulelement.parentNode.onclick=function(e){
var submenu=this.getElementsByTagName("ul")[0]
if (submenu.getAttribute("rel")=="closed"){
submenu.style.display="block"
submenu.setAttribute("rel", "open")
ulelement.parentNode.style.backgroundImage="url("+ddtreemenu.openfolder+")"
}
else if (submenu.getAttribute("rel")=="open"){
submenu.style.display="none"
submenu.setAttribute("rel", "closed")
ulelement.parentNode.style.backgroundImage="url("+ddtreemenu.closefolder+")"
}
ddtreemenu.preventpropagate(e)
}
ulelement.onclick=function(e){
ddtreemenu.preventpropagate(e)
}
}

ddtreemenu.expandSubTree=function(treeid, ulelement){ //expand a UL element and any of its parent ULs
var rootnode=document.getElementById(treeid)
var currentnode=ulelement
currentnode.style.display="block"
currentnode.parentNode.style.backgroundImage="url("+ddtreemenu.openfolder+")"
while (currentnode!=rootnode){
if (currentnode.tagName=="UL"){ //if parent node is a UL, expand it too
currentnode.style.display="block"
currentnode.setAttribute("rel", "open") //indicate it's open
currentnode.parentNode.style.backgroundImage="url("+ddtreemenu.openfolder+")"
}
currentnode=currentnode.parentNode
}
}

ddtreemenu.flatten=function(treeid, action){ //expand or contract all UL elements
var ultags=document.getElementById(treeid).getElementsByTagName("ul")
for (var i=0; i<ultags.length; i++){
ultags[i].style.display=(action=="expand")? "block" : "none"
var relvalue=(action=="expand")? "open" : "closed"
ultags[i].setAttribute("rel", relvalue)
ultags[i].parentNode.style.backgroundImage=(action=="expand")? "url("+ddtreemenu.openfolder+")" : "url("+ddtreemenu.closefolder+")"
}
}

ddtreemenu.rememberstate=function(treeid, durationdays){ //store index of opened ULs relative to other ULs in Tree into cookie
var ultags=document.getElementById(treeid).getElementsByTagName("ul")
var openuls=new Array()
for (var i=0; i<ultags.length; i++){
if (ultags[i].getAttribute("rel")=="open")
openuls[openuls.length]=i //save the index of the opened UL (relative to the entire list of ULs) as an array element
}
if (openuls.length==0) //if there are no opened ULs to save/persist
openuls[0]="none open" //set array value to string to simply indicate all ULs should persist with state being closed
ddtreemenu.setCookie(treeid, openuls.join(","), durationdays) //populate cookie with value treeid=1,2,3 etc (where 1,2... are the indexes of the opened ULs)
}

////A few utility functions below//////////////////////

ddtreemenu.getCookie=function(Name){ //get cookie value
var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return ""
}

ddtreemenu.setCookie=function(name, value, days){ //set cookei value
var expireDate = new Date()
//set "expstring" to either future or past date, to set or delete cookie, respectively
var expstring=expireDate.setDate(expireDate.getDate()+parseInt(days))
document.cookie = name+"="+value+"; expires="+expireDate.toGMTString()+"; path=/";
}

ddtreemenu.searcharray=function(thearray, value){ //searches an array for the entered value. If found, delete value from array
var isfound=false
for (var i=0; i<thearray.length; i++){
if (thearray[i]==value){
isfound=true
thearray.shift() //delete this element from array for efficiency sake
break
}
}
return isfound
}

ddtreemenu.preventpropagate=function(e){ //prevent action from bubbling upwards
if (typeof e!="undefined")
e.stopPropagation()
else
event.cancelBubble=true
}

ddtreemenu.dotask=function(target, functionref, tasktype){ //assign a function to execute to an event handler (ie: onunload)
var tasktype=(window.addEventListener)? tasktype : "on"+tasktype
if (target.addEventListener)
target.addEventListener(tasktype, functionref, false)
else if (target.attachEvent)
target.attachEvent(tasktype, functionref)
}

</script>

<a href="javascript:ddtreemenu.flatten('treemenu1', 'expand')">Expand +</a> | <a href="javascript:ddtreemenu.flatten('treemenu1', 'contact')">- Contract</a>
<p></p>
<ul id="treemenu1" class="treeview"> <li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>

<li>Folder 1
    <ul>
    <li><a href="#">Sub Item 1.1</a></li>
    <li><a href="#">Sub Item 1.2</a></li>
    </ul>
</li>
<li><a href="#">Item 3</a></li>

<li>Folder 2
    <ul>
    <li><a href="#">Sub Item 2.1</a></li>
    <li>Folder 2.1
        <ul>
        <li><a href="#">Sub Item 2.1.1</a></li>
        <li><a href="#">Sub Item 2.1.2</a></li>
        </ul>
    </li>
</ul>
</li>

//ddtreemenu.createTree(treeid, enablepersist, opt_persist_in_days (default is 1))

ddtreemenu.createTree("treemenu1", true)
ddtreemenu.createTree("treemenu2", false)

</script>

4. Replace wellow color
# with your own blogger link

5. Replace 1 2 3 with own blogger link of title

Now finally save the template and view blog succesfully has been Done!

Posted in: Blogspot |

Showing posts with label Blogspot. Show all posts

How To Add Blogger Contact Form to Specific or other Pages

How To Add Blogger Contact Form to Specific or other Pages

Blogger Tips To Optimize Your Blog For Readers & Search Engine

Blogger Tips To Optimize Your Blog For Readers & Search Engine tips:

How to make tree dropdown menu blogger sidebar

Visitor