Open top menu
Tutorial # 12 - How to write Privacy Policy, Disclaimer, and Terms & Conditions for your site

Privacy Policy, Disclaimer, and Terms & Conditions pages increase the credibility of your website or blog. However the main purpose of increasing the credibility of your website is to make the Google Adsense account to get approved as it being one of the conditions to be fulfilled for publishing Google ads in your site or blog.

There are examples of each of the following in which you need change the name, web address and date before using for your blog:-

Privacy Policy
The owner of this blog does not share personal information with third-parties nor does [Website] stored information is collected about your visit for use other than to analyze content performance through the use of cookies, which you can turn off at anytime by modifying your Internet browser’s settings. The owner is not responsible for the republishing of the content found on this blog on other Web sites or media without permission.

Blog Comments Policy
The owner of this blog reserves the right to edit or delete any comments submitted to this blog without notice due to:-

1. Comments deemed to be spam or questionable spam;

2. Comments including profanity;

3. Comments containing language or concepts that could be deemed offensive; and

4. Comments that attack a person individually.


These privacy policy statements are made on [Date] and may have a change on the futures with or without notice. You should read this privacy policy on this page when updated.


Disclaimer
[Website] does not represent or endorse the accuracy or reliability of any information's, content or advertisements contained on, distributed through, or linked, downloaded or accessed from any of the services contained on this website, nor the quality of any products, information's or any other material displayed, purchased, or obtained by you as a result of an advertisement or any other information's or offer in or in connection with the services herein.

You hereby acknowledge that any reliance upon any materials shall be at your sole risk. [Website] reserves the right, in it's sole dis-creation and without any obligation, to make improvements to, or correct any error or omissions in any portion of the service or the materials.

THE SERVICES AND THE MATERIALS ARE PROVIDED BY [Website] ON AN "AS IS" BASIS, AND [Website] EXPRESSLY DISCLAIMS ANY AND ALL WARRANTIES, EXPRESSED OR IMPLIED, WITHOUT LIMITATION WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE, WITH RESPECT TO THE SERVICE OR ANY MATERIALS AND PRODUCTS IN NO EVENT SHALL TO [Website]

BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, PUNITIVE, OR CONSEQUENTIAL DAMAGES OF ANY KIND WHAT'S OVER WITH RESPECT TO THE SERVICE, THE MATERIALS AND THE PRODUCTS.

[Website] respects the rights (including the intellectual property rights) of others and we ask our users to do the same. [Website] may in appropriate circumstances and in it is sole dis-creation, terminate the accounts of users that infringe or otherwise violate such rights of others.


Terms & Conditions
All content provided on this blog is for informational purposes only. The owner of this blog makes no representations as to the accuracy or completeness of any information on this site or found by following any link on this site.

The owner of [Website] will not be liable for any errors or omissions in this information nor for the availability of this information. The owner will not be liable for any losses, injuries, or damages from the display or use of this information.

These terms and conditions are subject to change at any time with or without notice.
Read more
Tutorial # 11 - Understand the HTML or XML Code of the Blogger Templates

All the templates or themes are based on HTML or XML Code which can be amended in order to make changes in the templates as per your requirements. Now the question arises how to amend it. Thus, first we have to make an understanding of the HTML or XML Coding so that we would at least be able to amend it a bit.

Every template has a different code because of different design and interface. If we have a basic understanding of HTML code, we will be able to amend all such templates to some extent. The templates available by default does not require to be amended because many of changes can be made in through "Layout" and "Template Designer" including background, fonts, widths, color, etc.

However the downloaded templates can't be amended in such ways, thus we have to go to HTML editing.

Step 1: Download a template from a website (e.g. btemplates.com)

Step 2: Select an appropriate design for your blog


Step 3: Download the template (.zip) file


Step 4: Unzip the file
After unzipping the downloaded file of the template, you will get the two important files namely:-

- Config.txt or Documentation.txt (or by some other name), and
- Template .XML file (MXfluity.XML in this case)

Their purposes have been explained in the picture below. The Config.txt file explains you how to amend the main components of the templates like menus, sub menus. This is the most easiest part of coding. You may add a new item in the menu bar by just copying the complete line of a menu item code starting from till in a relevant position. You just need to change the name and link included in the line.


Step 5: Upload the XML file of the template
(See Tutorial # 3 - Changing the Blog Template or Theme)


 Step 6: Go to Dashboard > Template, and Click on "Edit HTML"


Step 7: Now just have a glance on the coding of the blog template

You need to save the template in your computer before making any changes. Expand the code by clicking on all the triangles on the left-hand side (one has been marked below for your understanding).


Once you are gone through all the coding of the template, you must be able to comprehend some of the components of the code. With reference to the complete line, to some extent we are able to understand of which component in the interface it is talking about, like for example:-

- "px" refers to some margin, length, font size, gap, boundary, etc.

- "#363636", "#333", "#FFF", or "#8F8D8D" refers to a color in the HTML code. In order to identify the color, you may go to www.w3schools.com. This website also helps you in the choosing the color as it provides you the HTML code of each and every color.

- "float" helps to align or position a text or image to left, right or center.

In all the coding including the above three example, we can use the "Hit and Trial Method" to identify effect of any line, code or segment on the template. But make sure that the original template has been saved as back up arrangement.

However, here we can use another method which helps us in identifying the code line of each and every component in the interface.

Step 8: Go to the Home/Landing page of your blog and press Ctrl + Shift + I (or F12 in previous versions) in case of Google Chrome.
A new window known as Developer tools will be open as shown below. In the "Elements" tab you may find the HTML code of template.


The part of webpage will be highlighted when you place the cursor on the code line of the respective part. This makes it easier to identify the part which is represented by the code.


Step 9: Let's change the background of header from white to red





Step 10: Just check it out; and make such other changes using the preceding steps

Read more
Tutorial # 10 - How to Prevent or Disable Copying of Text on your Blog Posts

Step 1: Go to your blog’s dashboard, then its layout and add an HTML/JavaScript gadget at any place (e.g. any of the two encircled)

Step 2


Step 3: Paste the below code in the HTML/JavaScript gadget


<script type="text/javascript">
var omitformtags=["input", "textarea", "select"]
omitformtags=omitformtags.join("|")
function disableselect(e){
if (omitformtags.indexOf(e.target.tagName.toLowerCase())==-1)
return false
}
function reEnable(){
return true
}
if (typeof document.onselectstart!="undefined")
document.onselectstart=new Function ("return false")
else{
document.onmousedown=disableselect
document.onmouseup=reEnable
}
</script>


After adding the gadget, save the layout settings. Now your blog posts’ text is protected from being copied and the gadget shall not be visible in the blog.
Read more
Tutorial # 9 - How to add a Contact Form on a specific page or in a specific post

Adding a blog contact form to your website will give a professional look and also make it easier people to contact you direct on your website.

There are two methods which can be used to create a Contact Form in a specific page or post. Method # 1 is lengthy and difficult as compared to Method # 2. As compared to Method # 2, there is another drawback in Method # 1 that you can’t add custom fields such as phone number, mailing address and file upload methods to the contact form in blogger. BlogSpot uses special codes known as data tags to transfer data. So you can’t handle those tags as you want.

 Method # 1
Step 1
Step 2

Step 3

Step 4
Now go to Template and click on the Edit HTML button.


Step 5
Then paste below code just above of ]]></b:skin> code in the blogger template.

#ContactForm1
{
display: none ! important;
}

Step 6

Step 7: Create a new page

 Step 8
Switch it to HTML mode. Make sure that whether the "Use<br> tag" option in the option in post settings has been selected.

 Now paste below contact us form html code for Blogger on the empty Edit HTML field.

 <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>
Customization
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.
Some bloggers complain that blogger contact form does not work on their blogs. In some occasions ‘Send’ button does not work correctly and so message would not be sent. I have resolved the problem with embedded-Contact form on blogger post pages and stand alone pages.

Now let’s look at how to troubleshoot this problem easily without confusing your mind.

Go to Template page and back up your template.
After doing that, click on ‘Edit HTML’ button and find contact form widget code.You can do this easily by clicking on ‘Jump to Widget’ drop down button and choosing on ContactForm1 id. Now you will see a block of HTML code similar to below.

<form name=’contact-form’>
<p/>
<data:contactFormNameMsg/>
<br/>
<input class=’contact-form-name’ expr:id=’data:widget.instanceId + &quot;_contact-form-name&quot;’ 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 + &quot;_contact-form-email&quot;’ 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 + &quot;_contact-form-email-message&quot;’ name=’email-message’ rows=’5’/>
<p/>
<input class=’contact-form-button contact-form-button-submit’ expr:id=’data:widget.instanceId + &quot;_contact-form-submit&quot;’ 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 + &quot;_contact-form-error-message&quot;’/>
<p class=’contact-form-success-message’ expr:id=’data:widget.instanceId + &quot;_contact-form-success-message&quot;’/>
</div>
</form>

Remove above code and Save your template.
You’re done!

Step 9
The "Contact Us" page can be added in the menu bar as explained in Tutorial # 8 - How to create a menu bar below the header just like a proper website.

Method # 2
Step 1
Step 2
How to make customized HTML Code for Contact Form from third-party website (e.g. foxyform.com)

 Step 3
Log onto www.foxyform.com. Select the required field that you want to include inside your form. For example I want to add Name, Email, Subject, and Phone therefore I have selected those fields.
Step 4
Select the color of your form according to your website color scheme or leave it as default.
Step 5
 This is the preview of your form below.
Step 6
Insert the email address where you want to receive your message via blog/website and tick the check box and then click on "Create Formular".
Step 7

Step 8
The "Contact Us" page can be added in the menu bar as explained in Tutorial # 8 - How to create a menu bar below the header just like a proper website.
Read more
Tutorial # 7 - How to display a gadget on a specific post or page OR on every post and page except a specific one

To display a gadget only on a specific post or page
Follow exactly the same approach as in Tutorial # 6 - How to make a gadget/widget appear only on the front, home, or landing page.

But instead of

<b:if cond='data:blog.url == data:blog.homepageUrl'>

in order to display a gadget only on a specific page, use this code, and put the address of the page or post instead of POST-URL:

<b:if cond='data:blog.url == "POST-URL"'>>




To display a gadget on every post and page except a specific one

Replace the double equals signs (==) with the HTML code for not, which is an exclamation mark followed by an equal sign (!=).   For example:

<b:if cond='data:blog.url != data:blog.homepageUrl'>
Read more
Tutorial # 6 - How to make a gadget/widget appear only on the front, home, or landing page

Step 1: Add and place the gadget where you want it

Step 2
Step 3


Write the title (e.g. About Us) and the content (e.g. This is a Sample Blog).


 Step 4: Drag the text widget down and click on edit, but don't make any changes to it.

Step 5: This window will appear again.
Step 6
Maximize the window, so you can see the very end of the address bar in the window - at the top of the screen.

Notice the word at the very end of the address, ending in a number. This is the Gadget-id.

In this example, it's Text1. Other possible values are HTML1, Attribution1, Followers1, etc.


Step 7: Edit your template.
Step 8
Click in the search box inside the template editor, and search for the widget name i.e. Text1 in this example.

Once you've found it, use the expansion triangle at the left side of the template editor to expand this section of the code.

After you do, it will look like:


<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Text1' locked='false' title='Test gadget' type='Text'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:includable>
</b:widget>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>


The code to use is this - except put the gadget-id instead of the XXXX - after before the text "<!-- only display title if it's non-empty -->":

<b:if cond='data:blog.url == data:blog.homepageUrl'> 


The following code needs to be included just after the line "<b:include name='quickedit'/>"

<b:else/>
<style type='text/css'>
#XXXX {display:none;}/*remove blank space that the gadget leaves*/
</style>
</b:if>



The example above looks like this, when the code has been added:

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Text1' locked='false' title='Test gadget' type='Text'>
<b:includable id='main'>

  <b:if cond='data:blog.url == data:blog.homepageUrl'>  <!-- only display title if it's non-empty -->

  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>

<b:else/>
<style type='text/css'>
#Text1 {display:none;}/*remove blank space that the gadget leaves*/
</style>
</b:if>


</b:includable>
</b:widget>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>

Step 9: Check whether the change has been made or not
Read more
Subscribe to: Posts (Atom)