Open top menu
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)