How To Add Flip Over Book With J-Query Effect

This is the best animated widget to show off your blog/site beauty, you can put you info, links, new in this widget and improve your views.It open when someone move his mouse on book then the page turn to open and your inside data becomes out.

First step:-

Go to blogger->>Design or Template->>Edit Html

CSS Code:

Search for the code ]]></b:skin>

Add below css code above it

<style type="text/css">
div.pad {width:600px; height:400px; padding:0 0 40px 0; margin:20px auto; position:relative; overflow:hidden; background:#aaa; border:40px solid #aaa; border-width:40px 40px 0 40px;}
div.pad > div {width:300px; height:400px; position:relative; position:relative; float:right;}
div.pad > div > div:nth-of-type(1) {width:300px; height:400px; position:absolute; left:0; top:0; background:#574;
}
div.pad > div > div:nth-of-type(2),
div.pad > div > div:nth-of-type(2) div {
-webkit-transform-origin: 0 -900px;
-moz-transform-origin: 0 -900px;
-ms-transform-origin: 0 -900px;
-o-transform-origin: 0 -900px;
transform-origin: 0 -900px;
-webkit-transition: 0.75s ease-in-out;
-moz-transition: 0.75s ease-in-out;
-ms-transition: 0.75s ease-in-out;
-o-transition: 0.75s ease-in-out;
transition: 0.75s ease-in-out;
}
div.pad > div > div:nth-of-type(3),
div.pad > div > div:nth-of-type(3) div {
-webkit-transform-origin: 300px -900px;
-moz-transform-origin: 300px -900px;
-ms-transform-origin: 300px -900px;
-o-transform-origin: 300px -900px;
transform-origin: 300px -900px;
-webkit-transform: rotate(-17deg);
-moz-transform: rotate(-17deg);
-ms-transform: rotate(-17deg);
-o-transform: rotate(-17deg);
transform: rotate(-17deg);
-webkit-transition: 0.75s ease-in-out;
-moz-transition: 0.75s ease-in-out;
-ms-transition: 0.75s ease-in-out;
-o-transition: 0.75s ease-in-out;
transition: 0.75s ease-in-out;
}
div.pad > div > div:nth-of-type(2) {width:300px; height:440px; position:absolute; left:0; top:0; overflow:hidden;
-webkit-transform: rotate(-17deg);
-moz-transform: rotate(-17deg);
-ms-transform: rotate(-17deg);
-o-transform: rotate(-17deg);
transform: rotate(-17deg);
}
div.pad > div > div:nth-of-type(2) div {width:300px; height:400px; position:absolute; left:0; top:0; background:#ddd;
-webkit-transform: rotate(17deg);
-moz-transform: rotate(17deg);
-ms-transform: rotate(17deg);
-o-transform: rotate(17deg);
transform: rotate(17deg);
}
div.pad > div > div:nth-of-type(3) {width:300px; height:440px; position:absolute; left:-300px; top:0; overflow:hidden;}
div.pad > div > div:nth-of-type(3) div {width:299px; height:400px; position:absolute; left:0; top:0; background:#eee; border-right:1px solid #888;
-moz-box-shadow: -2px 0px 10px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: -2px 0px 10px rgba(0, 0, 0, 0.5);
box-shadow: -2px 0px 10px rgba(0, 0, 0, 0.5);
}
div.pad > div:hover > div:nth-of-type(2),
div.pad > div:hover > div:nth-of-type(3),
div.pad > div:hover > div:nth-of-type(2) div,
div.pad > div:hover > div:nth-of-type(3) div
{
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
div.pad h1 {padding:0; margin:0; text-align:center; font:normal 80px/250px georgia, serif; color:#111; text-shadow: 0px 1px 1px #ddd;}
div.pad p {margin:0; text-align:center; font:normal 15px/18px Georgia, serif; color:#111; padding:20px;}
</style>

PART 2:

HTML Code:

Go to blogger->>Layout or page elements->>Add a gadget->> Html/java script

Add below code in Html java script box.

<div class="pad">
<div>
<div><h1>Demo</h1><p>by<br />Blogger choices</p></div>
<div><div>
<p>add text here</p>
</div></div>
<div><div><p>add text here</p></div></div>
</div>
</div>

Now Change Red Text To Your Desire One.
Finish, Done.

Don't Forget To Say Thanks

Read More ...

How To Create An HTML-PHP Working Contact Form For Your Website

You Don't Have Need To Any Contact Form Builder Or Provider.

Here Are The Simple & Easy Step To Do.

This Tutorial Will Teach You How To Create A Very Simple Contact Form For HTML Based Website & Blog.

First Of All Create 2 Files:

contactform.html and contact.php.

Then Do As I Say.....

Code for contactform.html:
(Copy Below Text And Paste It On Notepad Then Save It In contactform.html)

<form action="contact.php" method="post" enctype="plain">              

         Name*:</br>
<input type="text" name="Name"  value="Your Name"  size="50"/>
        </br>
</br>
E-mail*:</br>
<input type="text" name="E-Mail"  value="Your E-Mail"  size="50"/>
         </br>
</br>
Message*:</br>
<textarea type="text" name="Message" rows="10" cols="39"  ></textarea>
         </br>
</br>
<input type="submit" value="Send" />
                        <input type="reset" value="Reset" />
</form>


It Looks Like This...........................

Name*:


E-mail*:


Message*:

Code for contact.php:
(Copy Below Text And Paste It On Notepad Then Save It In contact.php)

<?php
$field_name = $_POST['Name'];
$field_email = $_POST['E-Mail'];
$field_message = $_POST['Message'];

$mail_to = 'hassan.exe393@gmail.com';
$subject = '#Message# '.$field_name;

$body_message = 'From: '.$field_name."\n";
$body_message .= 'E-mail: '.$field_email."\n";
$body_message .= 'Message: '.$field_message;

$headers = 'From: '.$E-Mail."\r\n";
$headers .= 'Reply-To: '.$E-Mail."\r\n";

$mail_status = mail($mail_to, $subject, $body_message, $headers);

if ($mail_status) { ?>
<script language="javascript" type="text/javascript">
alert('Thank you for the message. We will contact you shortly.');
window.location = 'contactform.html';
</script>
<?php
}
else { ?>
<script language="javascript" type="text/javascript">
alert('Message sending failed. Please, send an email to hassan.exe393@gmail.com');
window.location = 'contactform.html';
</script>
<?php
}
?>

Do Some Changes:
1.) First Change All Red Text As You Want But Keeps Them Same Wording And Same Capitalization Of Letter.
2.) Change Blue Text As You Want, They Are A POP Up Confirmation News After Click On Send Button.
3.) Yellow Highlighted Text Is So Important To Change, Change It Your E-Mail In Which You Want Receive This E-Mail.
4.) Change Pink Text If You Want, It Will Appear On E-Mail Subject.

Read More ...

How To Create An HTML Hover Button For Your Blog And Website

How To Create An HTML Hover Button For Your Blog & Website?

Many bloggers like to place buttons instead of simple links.
And in some widgets and posts, buttons do look a lot better than simple hyperlinks.
But most of the bloggers think that placing a button is a tedious job, and due to their laziness they finally end up placing a normal link.
:-)

But through this post, you will learn that the task of adding an HTML button is as simple as inserting a hyperlink !

Style 1:-
First have a look at the button below:-

If you want to place a button similar to that, then simply copy
and paste this code...

<form action="http://www.google.com" target="_blank" method="GET">
<input type="submit" value="Google">
</form>

Change the code in RED, as per your requirement !
You can delete target="_blank" from the first line, if you want the new page to open in the same window, and if you want that the new page should open in a new window/tab then leave the target="_blank" as it is...!

The button explained above is a "submit" type button, there are many other types too, like text, radio, check boxes etc.


Style 2:-

This will need more work from your side, as it does not only depends on the code, but also on the graphics. That means you have to create two buttons, with exactly the same dimensions, one as Button_Up and one as Button_Down (when cursor is on the button).

Here's the button:




I have used these two images:
IMAGE 1:
IMAGE 2:

If you want to place a button similar to that, then simply copy and paste this code...

<a href="http://bloggerstop.net"><img src="IMAGE1" onmouseover="this.src='IMAGE2'" onmouseout="this.src='IMAGE1'" alt="Click Me"/></a>


Like.........


<a href="http://bloggerstop.net"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinWxbMgrAdfYwCeW7CRvcTIz0wG0kzH_jTkF1skheM92XyDzOH_rkDiBDwKGU6HXLH9WyswumhtMMYcRU3IQDHSs2w1YdCHIgswSYfpOJWv7JGQvNOMiweV_f-ZlBSHWtEq9pPua7y-bd0/s320/Rss_2.png"onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj12ehFJstNkr2kFJRezqtU1fCvHQ8Zl56VH9CFHaaavtWrriCI92JY69G_XYFtG8DGEo3cT4ujDwqod9r2Sp3B4-cRSdg5epOK0cnopmUcfPlL2ae6aCDl0zXausxlHFvVORHx4zhKo9xs/s320/RSS_1.png'"onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinWxbMgrAdfYwCeW7CRvcTIz0wG0kzH_jTkF1skheM92XyDzOH_rkDiBDwKGU6HXLH9WyswumhtMMYcRU3IQDHSs2w1YdCHIgswSYfpOJWv7JGQvNOMiweV_f-ZlBSHWtEq9pPua7y-bd0/s320/Rss_2.png'" 
alt="Click Me"/>
</a>


Although this method is quite slow in loading the second image, but this method is easier for most of the users. Moreover the other methods use CSS coding / JavaScript, due to which for every type of image, you have to add a different code in the blog template, which can slow down your whole blog...

Read More ...