ADD A CONTACT FORM TO PAGE ON BLOGGER

HOW TO ADD A CONTACT FORM TO PAGE ON BLOGGER

1. Go to Layout, scroll down to the footer and add a new gadget > more gadgets > contact form > save.
2. Go to Template > Edit HTML and find ]]></b:skin>,  Above ]]></b:skin> add the following CSS 

div#ContactForm1 {
  display: none !important;
}

3. Go to Pages. Create a new page or select your contact page. click Compose Mode select Interpret typed HTML. Paste the code below into the editor where you want it to appear and save.

The Your Code

<div dir="ltr" style="text-align: left;" trbidi="on">
Here Goes Your Contact Page Message To Visitors or Else Delete it.
<br />
<style>
.twist_blogger_cntct_form_wrap {
  margin: 0 auto;
  max-width: 840px;
  padding: 0 10px;
  position: relative;
  background-color: #FDFDFD;
}
.twist_blogger_cntct_form_wrap:after, .twist_blogger_cntct_form_wrap:before {
  content: '';
  display: table;
  clear: both;
}
/*----Change Contact Form Background Color Here----*/
div#twist_blogger_cntct_form {
  padding: 20px 20px 10px 20px;
  background: #FA540B;
  border-radius: 2px;
  margin: 20px auto 20px;
  color: #FFF;
  font-size: 16px;
  max-width: 260px;
}
input#ContactForm1_contact-form-name, .contact-form-email, .contact-form-email:hover, .contact-form-email:active, .contact-form-email-message, .contact-form-email-message:active, .contact-form-email-message:hover {
  padding: 5px;
  box-shadow: none!Important;
  min-width: 186px;
  max-width: 260px;
  width: 100%;
  border: 0 !important;
  line-height: 1em;
  min-height: 31px;
  background: #FCFCFC;
  margin-bottom: 15px;
}
/**** Submit button style ****/
.contact-form-button-submit {
  background: #FA540B;
  font-size: 20px;
  letter-spacing: 2px;
  cursor: pointer;
  outline: none!important;
  color: #FFFFFF;
  border: 2px solid rgba(255,255,255,1);
  border-radius: 50px;
  min-width: 186px;
  max-width: 260px;
  width: 100%;
  text-transform: uppercase;
  height: 46px;
  margin-top: 10px!important;
  transition: all 300ms ease-;
  -webkit-transition: all 300ms ease-in-out;
  -moz-transition: all 300ms ease-in-out;
}
/**** Submit button on mouse hover ****/
.contact-form-button-submit:hover {
  border: 2px solid;
  color: #FFFFFF;
  background: #EF4800 !important;
}
/**** Submit button on Focus ****/
.contact-form-button-submit:focus, .contact-form-button-submit.focus {
  border-color: #FFFFFF;
  box-shadow: none !important;
}
/**** Error message and Success Message ****/
.contact-form-error-message-with-border .contact-form-success-message {
  background: #f9edbe;
  border: 1px solid #f0c36d;
  bottom: 0;
  box-shadow: 0 2px 4px rgba(0,0,0,.2);
  color: #666;
  font-size: 12px;
  font-weight: bold;
  padding-bottom: 10px;
  line-height: 19px;
  margin-left: 0;
  opacity: 1;
  position: static;
  text-align: center;
}
</style>
<br />
<br />
<div class="twist_blogger_cntct_form_wrap">
<div id="twist_blogger_cntct_form">
<form name="contact-form">
Your Name<br />
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" placeholder="Enter your name here..." size="30" type="text" value="" /><br />
<br />
Your Email*<br />
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" placeholder="Enter your email here..." size="30" type="text" value="" /><br />
<br />
Your Message*<br />
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Write your message here..." rows="5"></textarea><br />
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" /><br />
<div style="max-width: 260px; 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>
</form>
<br />
</div>
</div>
</div>

Read more »

Posted in: Blogger Tips

Secure your website with JavaScript, NO RIGHT CLICK for Images

Have you ever worked really hard on graphics for your site only to find later that someone has stolen them as their own. You can help encrypt and protect your site with the following HTML codes. No right click block is 100% effective, but they will help against novices.

Use the script below so when someone right clicks to save an image off your page, a message will come up letting people know that your information is copyrighted.

This script may not work in all browsers, and is not foolproof. If someone really wants something from your page they can find ways around it, but at least it's a warning to people who want to take your graphics. But it certainly is a great start.

Copy and paste the following code, and make sure it comes right after your <HEAD> tag:

<script language=JavaScript> var message="Function Disabled!"; function clickIE4(){ if (event.button==2){ alert(message); return false; } } function clickNS4(e){ if (document.layers||document.getElementById&&!document.all){ if (e.which==2||e.which==3){ alert(message); return false; } } } if (document.layers){ document.captureEvents(Event.MOUSEDOWN); document.onmousedown=clickNS4; } else if (document.all&&!document.getElementById){ document.onmousedown=clickIE4; } document.oncontextmenu=new Function("alert(message);return false") </script>

If you don't like using javascript, you can always use a span tag to position a transparent gif over the top of the image like the example code below. Don't forget, you will need to create a transparent.gif to implement this method.

<span style="background-image: url(images/my_image.jpg)"><img src="images/transparent.gif" width="200" height="150" border="0" alt="Protected Image."></span>

"NO RIGHT CLICK" for Source

Here is a handy little script which will not only protect your images from right clicking, but your whole page. Remember this only stops some visitors from viewing your source. There are ways around it and if someone really wants to view your source they may find a way. There is another trick below to protect your source code, so keep reading.

<script language=JavaScript> var message="Function Disabled!"; function clickIE4(){ if (event.button==2){ alert(message); return false; } } function clickNS4(e){ if (document.layers||document.getElementById&&!document.all){ if (e.which==2||e.which==3){ alert(message); return false; } } } if (document.layers){ document.captureEvents(Event.MOUSEDOWN); document.onmousedown=clickNS4; } else if (document.all&&!document.getElementById){ document.onmousedown=clickIE4; } document.oncontextmenu=new Function("alert(message);return false") </script>

Disable Copy and Paste for greater website security.

One of the most popular questions I recieve here at Hypergurl is "How do you stop visitors from stealing your webpage information?"

Below is a little trick that will stop your visitors from copying and pasting your webpage information. Anyone with experience may know a way around this trick. However it will make it hard enough to discourage them and get them moving on to easier targets.

Add the following html code to your BODY tag: 
Here is how your BODY tag may look once implimented: <body bgcolor="#FFFFFF" ondragstart="return false" onselectstart="return false">

ondragstart="return false" onselectstart="return false"

Make Your Source Code Vanish.

Now before I show you this last trick to protect your source, I would like you to first view my source. Just click "View" then choose "Source"

How did I do that?

Place your cursor in front of the opening <html> tag and hit your enter button for a while. It will push your source code out of view and this will fool the fools. *smiles*

Read more »

Posted in: JavaScript

Easy Javascript Drop Down Link Selection

The Javascript

function goToThere(opt){

var path = opt.options[opt.selectedIndex].value;
var url = window.location;
var protocol = url.protocol;
var domain = url.host;
var old_path = url.pathname;

if(path != "default" && path != "" && path != old_path){
if(path.indexOf("http://") != -1 || path.indexOf("https://") != -1)
window.location.href = path;
else
window.location.href = protocol+"//"+domain+"/"+path;
}
}

Let’s go through the code. First, we are passing an attribute opt, which in our HTML we will send the select object. Now we need to set some variables, most of which are only used to rebuild the URL if you pass the function a relative path:

path — This simply gets the text that we store in a value attribute for the selected option. This can be a relative link (/category/tutorials/) or external (http://superprofundo.com/category/tutorials/).
url — this just stores the window.location object in a variable for easy access, which we’ll use to grab different parts of the URL.
protocol — As described above, this would be equivalent to window.location.protocol, which specifies the protocol of the current URL – e.g. http: or https:
domain — this will grab the host name of the site, e.g www.superprofundo.com
old_path — this contains the path name of the current URL (for “site.com/index.html,” the pathname is “/index.html”).

Next, our conditional statement is checking that…
path != “default” … the path is not the default option
path ! = “” … the path is not empty
path ! = old_path … the path is not equal to the page we are currently on.

If all of these conditions are true, we can set up the redirect. The next conditional statement uses indexOf to search for an occurrence of “http://” or “https://” in the path. This function returns the position of the first occurrence of what we’re searching for in a string; it will return -1 if it can’t find it. So, if indexOf returns something other than -1 when searching for either http:// or https:// in path, we can assume that pathis a full URL. If this is the case, use window.location.href to redirect the browser window to the URL specified in path. If path isn’t a full URL, we build the redirect URL using the information we culled from window.location.

The HTML

<select onChange="goToThere(this)">

<option value="default" selected="true">---Choose Destination---</option>

<option value="/categories/tutorials">Tutorials</option>

<option value="http://www.superprofundo.com/categories/editorials/">Editorials</option>

</select>

This part is simple. We make a drop down that runs our Javascript function, goToThere, when the onChange event is activated (which would be when a user changes the selected option). The value attribute in each option specifies the path or URL to which the function will ultimately redirect (except for the default selected option). Now we just need to define our Javascript function in the header.

That’s all you need for a versatile drop down link selector in JavaScript. Of course, feel free to use and modify this example. What better way to learn?

This example

  <script>
    function goToThere(opt){
var path = opt.options[opt.selectedIndex].value;
var url = window.location;
var protocol = url.protocol;
var domain = url.host;
var old_path = url.pathname;


if(path != "default" && path != "" && path != old_path){
if(path.indexOf("http://") != -1 || path.indexOf("https://") != -1)
window.location.href = path;
else
window.location.href = protocol+"//"+domain+"/"+path;
}
}
</script>
<table width="100%" border="1">
  <tr>
    <td class="select">
<form action="#"> 
<div align="center">Categories  
<select onChange="goToThere(this)">         
<option>Select Categorie</option>         
<option value="/mobile/index/category/PHP%20Scripts/1">PHP Scripts</option>         
<option value="/mobile/index/category/JavaScript/2">JavaScript</option>         
<option value="/mobile/index/category/HTML%20script/3">HTML script</option> 
<option value="/mobile/index/category/CSS%20scripts/4">CSS scripts</option>
<option value="/mobile/index/category/WordPress/5">WordPress</option>
<option value="/mobile/index/category/Joomla/6">Joomla</option> 
<option value="/mobile/index/category/Domain_&_Hosting/7">Domain & Hosting</option>
<option value="/mobile/index/category/Web-Design-Software/8">Web Design Software</option>   
</select>  </div> 
</form></td>
  </tr>
</table>
________________________________________________________

Read more »

Posted in: JavaScript

iframe HTML

Inline Frames are a great implementation of the frames idea — they allow you to open new pages inside main pages, without the many problems brought about by classic-style frames.

<iframe> Basics

Inline or “floating” frames are ones which appear on a page, much like an image or a table would. This allows you to open completely separate pages in the middle of your pages. Here’s a simple example of an inline frame:

So now, I have two pages being displayed on one page, without the restrictions of the usualframeset stuff. The code for inline frames is very easy, and very similar to the <img>element. To get that page to display, I wrote

<iframe src="../examples/inlineframes1.html" width="80%" height="110"> </iframe>

Very, very easy really. The iframe element sets up some space for the new content, and thesrc attribute specifies the address of the inlined file. If you wanted to use a page from another website, you could just put in its full URL, starting with the “http://” part.

The width and height of the frame are denoted as either pixel values or percentages. You doneed a closing </iframe> tag, even though you'd imagine it's un-needed, so don’t forget it. Anything you put between the tags will appear to browsers who can’t do iframes (i.e. Netscape 4).

Interaction

If you have multiple iframes on the same page you can have them interacting, by sending commands between them, just like normal frames. Check out this:

   

Again, this is basically the same method of interlinking you’ve learned in basic frames. You simply give your iframes a name attribute, and then add the appropriate target="name" to the link. So, the code would go something like this:

<iframe src="left.html" name="left"></iframe>
<iframe src="right.html" name="right"></iframe>

Then in left.html, add target="right" to the link. Easy. And if it’s not, you should probably have a look back over the first frames tutorial. If you want to set up this effect, you will need to create a blank html file to sit in the right iframe waiting to change — you cannot leave thesrc empty.

Also note how the Back and Forward buttons in your browser behave. If you click a link that opens in an iframe, pressing Back will make the frame return to its previous contents, and you’ll need to press Back again to go back a page in your history.

All the attributes

There are a load of attributes you can use on your inline frames, and they are:

scrolling="no"

if the framed page is too big for the dimensions you've specified a scrollbar will appear. This attribute will stop this from happening.

frameborder="0"

setting the border to 0 gets rid of it, allowing the page to seamlessly integrate with your main page. Possible values are 1 (yes) and 0 (no), you cannot give it a bigger border.

marginwidth="x"

adds some spacing between the iframe’s side borders and the page inside it.

marginheight="x"

adds some spacing between the iframe’s top and bottom borders and the page inside it. Any value you give marginwidth and marginheight will be added to anymargins you’ve applied to the inner pages themselves.

align="right"

like the image attribute, this will affect how the text around the frame aligns itself.

hspace="x"

sets a margin of white space around the iframe to the sides.

vspace="x"

sets a margin of white space to the top and bottom of the iframe, pushing it away from other page elements.

Most of these attributes can be replaced with appropriate CSS, for borders and spacing.

Read more »

Posted in: HTML Scripts