Website At 100: Css

HOW TO CREATE FIXED MENU WHEN SCROLLING PAGE WITH CSS AND JQUERY

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px;">
In this Tutorial I will explain <strong style="line-height: inherit;">how to create fixed menu when scrolling page with CSS and jQuery</strong>, you already know jQuery right? A short description about jQuery, jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.</div>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px;">
The aim is to have the navigation fixed when user scrolling the page and back to its original position when scrolling back to top.</div>
<h3 style="background-color: white; color: #333333; font-family: 'Droid Sans'; font-size: 16px; font-weight: 200; letter-spacing: -0.1px; line-height: 20px; margin-top: 0px; padding: 0px;">
Demo</h3>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px;">
Click <a href="http://www.sutanaryan.com/Tutorials/fixed-menu-when-scrolling-page-with-CSS-and-jQuery/" rel="nofollow" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" target="_blank" title="Visit demo page">here</a>to view demo page.</div>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px;">
There are lots of tutorial out there in the net but it contains lots of JS code so I decided to create my own way and with only a few lines of JS code, in this tutorial I only use 2 JS functions to make the fixed menu working, yes only two functions.</div>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px;">
Ok, let’s start.</div>
<h3 style="background-color: white; color: #333333; font-family: 'Droid Sans'; font-size: 16px; font-weight: 200; letter-spacing: -0.1px; line-height: 20px; margin-top: 0px; padding: 0px;">
jQuery Library</h3>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px;">
All we need is only jQuery library; you can download it in jQuery site or use other library from <a href="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" rel="nofollow" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Google CDN">Google CDN</a>, <a href="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.min.js" rel="nofollow" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Microsoft CDN">Miscrosoft CDN</a> and <a href="http://code.jquery.com/jquery-1.7.min.js" rel="nofollow" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="jQuery CDN">jQuery CDN</a>.</div>
<h3 style="background-color: white; color: #333333; font-family: 'Droid Sans'; font-size: 16px; font-weight: 200; letter-spacing: -0.1px; line-height: 20px; margin-top: 0px; padding: 0px;">
HTML</h3>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px;">
This contains our menu HTML element, this is just a simple HTML UL tag to make our menus but if you already have one then use that instead.</div>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px;">
<div>
NOTE:</div>
<div>
If you’re going to use your old menus make sure to replace the class in JS code.<br />
<br /></div>
</div>
<div data-settings=" minimize scroll-mouseover" id="crayon-52a94eeff3560091964238" style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px;">
<div data-settings=" show">
<div title="Toggle Line Numbers">
</div>
<div title="Toggle Plain Code">
</div>
<div title="Toggle Line Wrap">
</div>
<div title="Expand Code">
</div>
<div title="Open Code In New Window">
</div>
<div style="line-height: inherit; margin-bottom: 18px;">
XHTML</div>
</div>
<div>
</div>
<div>
<table style="border-collapse: collapse; border-spacing: 0px;"><tbody>
<tr><td data-settings="show" style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div data-line="crayon-52a94eeff3560091964238-1">
1</div>
<div data-line="crayon-52a94eeff3560091964238-2">
2</div>
<div data-line="crayon-52a94eeff3560091964238-3">
3</div>
<div data-line="crayon-52a94eeff3560091964238-4">
4</div>
<div data-line="crayon-52a94eeff3560091964238-5">
5</div>
<div data-line="crayon-52a94eeff3560091964238-6">
6</div>
<div data-line="crayon-52a94eeff3560091964238-7">
7</div>
<div data-line="crayon-52a94eeff3560091964238-8">
8</div>
<div data-line="crayon-52a94eeff3560091964238-9">
9</div>
<div data-line="crayon-52a94eeff3560091964238-10">
10</div>
<div data-line="crayon-52a94eeff3560091964238-11">
11</div>
<div data-line="crayon-52a94eeff3560091964238-12">
12</div>
<div data-line="crayon-52a94eeff3560091964238-13">
13</div>
<div data-line="crayon-52a94eeff3560091964238-14">
14</div>
</td><td style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div id="crayon-52a94eeff3560091964238-1">
<div class=”nav-container”></div>
<div id="crayon-52a94eeff3560091964238-2">
<div class=”nav”></div>
<div id="crayon-52a94eeff3560091964238-3">
    <ul></div>
<div id="crayon-52a94eeff3560091964238-4">
        <li><a href=”">Home</a></li></div>
<div id="crayon-52a94eeff3560091964238-5">
        <li><a href=”">CSS</a></li></div>
<div id="crayon-52a94eeff3560091964238-6">
        <li><a href=”">PHP</a></li></div>
<div id="crayon-52a94eeff3560091964238-7">
        <li><a href=”">SEO</a></li></div>
<div id="crayon-52a94eeff3560091964238-8">
        <li><a href=”">jQuery</a></li></div>
<div id="crayon-52a94eeff3560091964238-9">
        <li><a href=”">Wordpress</a></li></div>
<div id="crayon-52a94eeff3560091964238-10">
        <li><a href=”">Services</a></li></div>
<div id="crayon-52a94eeff3560091964238-11">
    </ul></div>
<div id="crayon-52a94eeff3560091964238-12">
    <div class=”clear”></div> /*clear floating div*/</div>
<div id="crayon-52a94eeff3560091964238-13">
</div></div>
<div id="crayon-52a94eeff3560091964238-14">
</div></div>
</td></tr>
</tbody></table>
</div>
</div>
<h3 style="background-color: white; color: #333333; font-family: 'Droid Sans'; font-size: 16px; font-weight: 200; letter-spacing: -0.1px; line-height: 20px; margin-top: 0px; padding: 0px;">
CSS</h3>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px;">
To make our menu list horizontally we need to add CSS code.</div>
<div data-settings=" minimize scroll-mouseover" id="crayon-52a94eeff356a781048623" style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px;">
<div data-settings=" show">
<div title="Toggle Line Numbers">
</div>
<div title="Toggle Plain Code">
</div>
<div title="Toggle Line Wrap">
</div>
<div title="Expand Code">
</div>
<div title="Expand Code">
</div>
<div title="Open Code In New Window">
</div>
<div style="line-height: inherit; margin-bottom: 18px;">
CSS</div>
</div>
<div>
</div>
<div>
<table style="border-collapse: collapse; border-spacing: 0px;"><tbody>
<tr><td data-settings="show" style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div data-line="crayon-52a94eeff356a781048623-1">
1</div>
<div data-line="crayon-52a94eeff356a781048623-2">
2</div>
<div data-line="crayon-52a94eeff356a781048623-3">
3</div>
<div data-line="crayon-52a94eeff356a781048623-4">
4</div>
<div data-line="crayon-52a94eeff356a781048623-5">
5</div>
<div data-line="crayon-52a94eeff356a781048623-6">
6</div>
<div data-line="crayon-52a94eeff356a781048623-7">
7</div>
<div data-line="crayon-52a94eeff356a781048623-8">
8</div>
<div data-line="crayon-52a94eeff356a781048623-9">
9</div>
</td><td style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div id="crayon-52a94eeff356a781048623-1">
.nav-container{ background: url(‘images/nav_bg.jpg’) repeat-x 0 0;}</div>
<div id="crayon-52a94eeff356a781048623-2">
    .f-nav{ z-index: 9999; position: fixed; left: 0; top: 0; width: 100%;} /* this make our menu fixed top */</div>
<div id="crayon-52a94eeff356a781048623-3">
</div>
<div id="crayon-52a94eeff356a781048623-4">
.nav { height: 42px;}</div>
<div id="crayon-52a94eeff356a781048623-5">
    .nav ul { list-style: none; }</div>
<div id="crayon-52a94eeff356a781048623-6">
    .nav ul li{float: left; margin-top: 6px; padding: 6px; border-right: 1px solid #ACACAC;}</div>
<div id="crayon-52a94eeff356a781048623-7">
    .nav ul li:first-child{ padding-left: 0;}</div>
<div id="crayon-52a94eeff356a781048623-8">
    .nav ul li a { }</div>
<div id="crayon-52a94eeff356a781048623-9">
    .nav ul li a:hover{ text-decoration: underline;}</div>
</td></tr>
</tbody></table>
</div>
</div>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px;">
We set the z-index very high since we don’t want any other absolute element to be on top of our navigation and add with in percent to center menu while scrolling.</div>
<h3 style="background-color: white; color: #333333; font-family: 'Droid Sans'; font-size: 16px; font-weight: 200; letter-spacing: -0.1px; line-height: 20px; margin-top: 0px; padding: 0px;">
Javascript</h3>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px;">
This small JS code contains the main functions of our fixed scroll menu.</div>
<div data-settings=" minimize scroll-mouseover" id="crayon-52a94eeff356f323057027" style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px;">
<div data-settings=" show">
<div title="Toggle Line Numbers">
</div>
<div title="Toggle Plain Code">
</div>
<div title="Toggle Line Wrap">
</div>
<div title="Expand Code">
</div>
<div title="Open Code In New Window">
</div>
<div style="line-height: inherit; margin-bottom: 18px;">
JavaScript</div>
</div>
<div>
</div>
<div>
<table style="border-collapse: collapse; border-spacing: 0px;"><tbody>
<tr><td data-settings="show" style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div data-line="crayon-52a94eeff356f323057027-1">
1</div>
<div data-line="crayon-52a94eeff356f323057027-2">
2</div>
<div data-line="crayon-52a94eeff356f323057027-3">
3</div>
<div data-line="crayon-52a94eeff356f323057027-4">
4</div>
<div data-line="crayon-52a94eeff356f323057027-5">
5</div>
<div data-line="crayon-52a94eeff356f323057027-6">
6</div>
<div data-line="crayon-52a94eeff356f323057027-7">
7</div>
<div data-line="crayon-52a94eeff356f323057027-8">
8</div>
<div data-line="crayon-52a94eeff356f323057027-9">
9</div>
<div data-line="crayon-52a94eeff356f323057027-10">
10</div>
<div data-line="crayon-52a94eeff356f323057027-11">
11</div>
<div data-line="crayon-52a94eeff356f323057027-12">
12</div>
<div data-line="crayon-52a94eeff356f323057027-13">
13</div>
</td><td style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div id="crayon-52a94eeff356f323057027-1">
jQuery(“document”).ready(function($){</div>
<div id="crayon-52a94eeff356f323057027-2">
</div>
<div id="crayon-52a94eeff356f323057027-3">
    var nav = $(‘.nav-container’);</div>
<div id="crayon-52a94eeff356f323057027-4">
</div>
<div id="crayon-52a94eeff356f323057027-5">
    $(window).scroll(function () {</div>
<div id="crayon-52a94eeff356f323057027-6">
        if ($(this).scrollTop() > 136) {</div>
<div id="crayon-52a94eeff356f323057027-7">
            nav.addClass(“f-nav”);</div>
<div id="crayon-52a94eeff356f323057027-8">
        } else {</div>
<div id="crayon-52a94eeff356f323057027-9">
            nav.removeClass(“f-nav”);</div>
<div id="crayon-52a94eeff356f323057027-10">
        }</div>
<div id="crayon-52a94eeff356f323057027-11">
    });</div>
<div id="crayon-52a94eeff356f323057027-12">
</div>
<div id="crayon-52a94eeff356f323057027-13">
});</div>
</td></tr>
</tbody></table>
</div>
</div>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px;">
So, if we are on the top less than 136 height in pixel the menu is in the original position and add f-nav CSS class when greater than 136px height or add f-nav CSS class on scroll, where the top page greater than 136px height.</div>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px;">
That’s it, its easy right? Enjoy!</div>
</div>

HOW TO CREATE FIXED MENU WHEN SCROLLING PAGE WITH CSS AND JQUERY

In this Tutorial I will explain how to create fixed menu when scrolling page with CSS and jQuery , you already know jQuery right? A short...

HOW TO CREATE OR DISPLAY WORDPRESS POST IN THUMBNAIL GRID VIEW DESIGN

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
When creating <a href="http://websiteat100.com/blog/category/wordpress/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Wordpress blog by websiteat100.com">WordPress </a>site design, have you ever had the urge to create a grid display of posts or pages? The Grid View layout works great for media centric sites such as our <a href="http://websiteat100.com/blog/category/wordpress/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Wordpress blog by websiteat100.com">WordPress </a>Gallery, Portfolio or another showcase type site, many premium wordpress site has already a built in functionality for this, however if you’re trying to create same functionality in your <a href="http://websiteat100.com/blog/category/wordpress/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Wordpress blog by websiteat100.com">wordpress </a>development theme or for your personal site then might this tutorial help you, I’ll show you <strong style="line-height: inherit;">How to Create or Display WordPress Post in Thumbnail Grid View Design</strong> in your <a href="http://websiteat100.com/blog/category/wordpress/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Wordpress blog by websiteat100.com">WordPress </a>theme.</div>
<h3 style="background-color: white; color: #333333; font-family: 'Droid Sans'; font-size: 16px; font-weight: 200; letter-spacing: -0.1px; line-height: 20px; margin-top: 0px; padding: 0px; text-align: justify;">
HTML and PHP code</h3>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
This <a href="http://websiteat100.com/blog/category/php/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Php blog by websiteat100.com">PHP </a>and <a href="http://websiteat100.com/blog/category/html5-and-css3/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Html blog by websiteat100.com">HTML </a>code display thumbnail post under Gallery category</div>
<div data-settings=" minimize scroll-mouseover" id="crayon-52aff5941e13b173124393" style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; text-align: justify;">
<div data-settings=" show">
PHP</div>
<div>
</div>
<div>
<table style="border-collapse: collapse; border-spacing: 0px;"><tbody>
<tr><td data-settings="show" style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div data-line="crayon-52aff5941e13b173124393-1">
1</div>
<div data-line="crayon-52aff5941e13b173124393-2">
2</div>
<div data-line="crayon-52aff5941e13b173124393-3">
3</div>
<div data-line="crayon-52aff5941e13b173124393-4">
4</div>
<div data-line="crayon-52aff5941e13b173124393-5">
5</div>
<div data-line="crayon-52aff5941e13b173124393-6">
6</div>
<div data-line="crayon-52aff5941e13b173124393-7">
7</div>
<div data-line="crayon-52aff5941e13b173124393-8">
8</div>
<div data-line="crayon-52aff5941e13b173124393-9">
9</div>
<div data-line="crayon-52aff5941e13b173124393-10">
10</div>
<div data-line="crayon-52aff5941e13b173124393-11">
11</div>
<div data-line="crayon-52aff5941e13b173124393-12">
12</div>
<div data-line="crayon-52aff5941e13b173124393-13">
13</div>
<div data-line="crayon-52aff5941e13b173124393-14">
14</div>
<div data-line="crayon-52aff5941e13b173124393-15">
15</div>
<div data-line="crayon-52aff5941e13b173124393-16">
16</div>
<div data-line="crayon-52aff5941e13b173124393-17">
17</div>
<div data-line="crayon-52aff5941e13b173124393-18">
18</div>
<div data-line="crayon-52aff5941e13b173124393-19">
19</div>
<div data-line="crayon-52aff5941e13b173124393-20">
20</div>
<div data-line="crayon-52aff5941e13b173124393-21">
21</div>
<div data-line="crayon-52aff5941e13b173124393-22">
22</div>
<div data-line="crayon-52aff5941e13b173124393-23">
23</div>
<div data-line="crayon-52aff5941e13b173124393-24">
24</div>
<div data-line="crayon-52aff5941e13b173124393-25">
25</div>
<div data-line="crayon-52aff5941e13b173124393-26">
26</div>
<div data-line="crayon-52aff5941e13b173124393-27">
27</div>
<div data-line="crayon-52aff5941e13b173124393-28">
28</div>
<div data-line="crayon-52aff5941e13b173124393-29">
29</div>
<div data-line="crayon-52aff5941e13b173124393-30">
30</div>
<div data-line="crayon-52aff5941e13b173124393-31">
31</div>
<div data-line="crayon-52aff5941e13b173124393-32">
32</div>
<div data-line="crayon-52aff5941e13b173124393-33">
33</div>
<div data-line="crayon-52aff5941e13b173124393-34">
34</div>
<div data-line="crayon-52aff5941e13b173124393-35">
35</div>
<div data-line="crayon-52aff5941e13b173124393-36">
36</div>
<div data-line="crayon-52aff5941e13b173124393-37">
37</div>
<div data-line="crayon-52aff5941e13b173124393-38">
38</div>
<div data-line="crayon-52aff5941e13b173124393-39">
39</div>
<div data-line="crayon-52aff5941e13b173124393-40">
40</div>
<div data-line="crayon-52aff5941e13b173124393-41">
41</div>
<div data-line="crayon-52aff5941e13b173124393-42">
42</div>
<div data-line="crayon-52aff5941e13b173124393-43">
43</div>
<div data-line="crayon-52aff5941e13b173124393-44">
44</div>
<div data-line="crayon-52aff5941e13b173124393-45">
45</div>
<div data-line="crayon-52aff5941e13b173124393-46">
46</div>
<div data-line="crayon-52aff5941e13b173124393-47">
47</div>
<div data-line="crayon-52aff5941e13b173124393-48">
48</div>
<div data-line="crayon-52aff5941e13b173124393-49">
49</div>
<div data-line="crayon-52aff5941e13b173124393-50">
50</div>
<div data-line="crayon-52aff5941e13b173124393-51">
51</div>
<div data-line="crayon-52aff5941e13b173124393-52">
52</div>
<div data-line="crayon-52aff5941e13b173124393-53">
53</div>
<div data-line="crayon-52aff5941e13b173124393-54">
54</div>
<div data-line="crayon-52aff5941e13b173124393-55">
55</div>
<div data-line="crayon-52aff5941e13b173124393-56">
56</div>
<div data-line="crayon-52aff5941e13b173124393-57">
57</div>
<div data-line="crayon-52aff5941e13b173124393-58">
58</div>
<div data-line="crayon-52aff5941e13b173124393-59">
59</div>
<div data-line="crayon-52aff5941e13b173124393-60">
60</div>
<div data-line="crayon-52aff5941e13b173124393-61">
61</div>
<div data-line="crayon-52aff5941e13b173124393-62">
62</div>
</td><td style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div id="crayon-52aff5941e13b173124393-1">
    <div class=”gridBox”></div>
<div id="crayon-52aff5941e13b173124393-2">
        <h2 class=”grid-header”><?php _e(‘Gallery Page’, ‘rys’); ?></h2></div>
<div id="crayon-52aff5941e13b173124393-3">
        <div class=”boxes-container”></div>
<div id="crayon-52aff5941e13b173124393-4">
            <?php</div>
<div id="crayon-52aff5941e13b173124393-5">
                $args = array(</div>
<div id="crayon-52aff5941e13b173124393-6">
                    ’post_type’         => ‘post’,         // replace “post” if you want to display different post-type</div>
<div id="crayon-52aff5941e13b173124393-7">
                    ’category_name’        => ‘gallery’,    // category slug</div>
<div id="crayon-52aff5941e13b173124393-8">
                    ’posts_per_page’    => -1            //  show all posts</div>
<div id="crayon-52aff5941e13b173124393-9">
                );</div>
<div id="crayon-52aff5941e13b173124393-10">
</div>
<div id="crayon-52aff5941e13b173124393-11">
                // The Query</div>
<div id="crayon-52aff5941e13b173124393-12">
                $the_query = new WP_Query( $args );</div>
<div id="crayon-52aff5941e13b173124393-13">
</div>
<div id="crayon-52aff5941e13b173124393-14">
                // The Loop</div>
<div id="crayon-52aff5941e13b173124393-15">
                if ( $the_query->have_posts() ) {</div>
<div id="crayon-52aff5941e13b173124393-16">
</div>
<div id="crayon-52aff5941e13b173124393-17">
                    $c = 1;     // counter</div>
<div id="crayon-52aff5941e13b173124393-18">
                    $bpr = 4;     // number of column in each row</div>
<div id="crayon-52aff5941e13b173124393-19">
</div>
<div id="crayon-52aff5941e13b173124393-20">
                    while ( $the_query->have_posts() ) : $the_query->the_post();</div>
<div id="crayon-52aff5941e13b173124393-21">
                        ?></div>
<div id="crayon-52aff5941e13b173124393-22">
                            <div class=”grid-boxes <?php echo (($c != $bpr) ? ‘margin_right’ : ”); ?>”></div>
<div id="crayon-52aff5941e13b173124393-23">
                                <div class=”grid-thumbnail”></div>
<div id="crayon-52aff5941e13b173124393-24">
                                    <?php if ( has_post_thumbnail()) { ?></div>
<div id="crayon-52aff5941e13b173124393-25">
                                        <div class=”alignleft”></div>
<div id="crayon-52aff5941e13b173124393-26">
                                            <a href=”<?php the_permalink(); ?>” title=”<?php the_title_attribute(); ?>” ></div>
<div id="crayon-52aff5941e13b173124393-27">
                                            <?php the_post_thumbnail(); ?></div>
<div id="crayon-52aff5941e13b173124393-28">
                                            </a></div>
<div id="crayon-52aff5941e13b173124393-29">
                                        </div></div>
<div id="crayon-52aff5941e13b173124393-30">
                                    <?php } else { ?></div>
<div id="crayon-52aff5941e13b173124393-31">
                                        <img src=”<?php bloginfo(‘template_directory’); ?>/images/no-thumbnail.jpg” alt=”No Thumbnail” /></div>
<div id="crayon-52aff5941e13b173124393-32">
                                    <?php } ?></div>
<div id="crayon-52aff5941e13b173124393-33">
                                </div></div>
<div id="crayon-52aff5941e13b173124393-34">
                                <p class=”grid-title”></div>
<div id="crayon-52aff5941e13b173124393-35">
                                    <a href=”<?php the_permalink() ?>” title=”<?php printf(__(‘Permanent Link to %s’,'rys’), get_the_title()) ?>” rel=”bookmark”><?php the_title(); ?></a></div>
<div id="crayon-52aff5941e13b173124393-36">
                                </p></div>
<div id="crayon-52aff5941e13b173124393-37">
                            </div></div>
<div id="crayon-52aff5941e13b173124393-38">
                        <?php</div>
<div id="crayon-52aff5941e13b173124393-39">
</div>
<div id="crayon-52aff5941e13b173124393-40">
                        // we add a condition here to see if counter is equal to the number of column.</div>
<div id="crayon-52aff5941e13b173124393-41">
                        if( $c == $bpr ) {</div>
<div id="crayon-52aff5941e13b173124393-42">
                            echo ‘<div></div>’;</div>
<div id="crayon-52aff5941e13b173124393-43">
                            $c = 0;     // back the counter to 0 if the condition above is true.</div>
<div id="crayon-52aff5941e13b173124393-44">
                        }</div>
<div id="crayon-52aff5941e13b173124393-45">
                        $c++;             // increment counter of 1 until it hits the limit of column of every row.</div>
<div id="crayon-52aff5941e13b173124393-46">
</div>
<div id="crayon-52aff5941e13b173124393-47">
                    endwhile;</div>
<div id="crayon-52aff5941e13b173124393-48">
                } else {</div>
<div id="crayon-52aff5941e13b173124393-49">
</div>
<div id="crayon-52aff5941e13b173124393-50">
                    // no posts found</div>
<div id="crayon-52aff5941e13b173124393-51">
                    _e( ‘<h2>Oops!</h2>’, ‘rys’ );</div>
<div id="crayon-52aff5941e13b173124393-52">
                    _e( ‘<p>Sorry, seems there are no post at the moment.</p>’, ‘rys’ );</div>
<div id="crayon-52aff5941e13b173124393-53">
</div>
<div id="crayon-52aff5941e13b173124393-54">
                }</div>
<div id="crayon-52aff5941e13b173124393-55">
</div>
<div id="crayon-52aff5941e13b173124393-56">
                /* Restore original Post Data */</div>
<div id="crayon-52aff5941e13b173124393-57">
                wp_reset_postdata();</div>
<div id="crayon-52aff5941e13b173124393-58">
            ?></div>
<div id="crayon-52aff5941e13b173124393-59">
        </div></div>
<div id="crayon-52aff5941e13b173124393-60">
        <div class=”clear”></div></div>
<div id="crayon-52aff5941e13b173124393-61">
    </div></div>
<div id="crayon-52aff5941e13b173124393-62">
    </div></div>
</td></tr>
</tbody></table>
</div>
</div>
<h3 style="background-color: white; color: #333333; font-family: 'Droid Sans'; font-size: 16px; font-weight: 200; letter-spacing: -0.1px; line-height: 20px; margin-top: 0px; padding: 0px; text-align: justify;">
Confuse?</h3>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
Look at below for all function description.</div>
<ul style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; list-style: square outside; margin: 20px 0px 20px 40px; padding: 0px; text-align: justify;">
<li style="list-style-position: outside; margin-bottom: 20px;"><code style="font-family: monospace, monospace; font-size: 1em; white-space: pre-wrap; word-wrap: break-word;">has_post_thumbnail():</code> Returns a boolean if a post has a Post Thumbnail attached (true) or not (false).</li>
<li style="list-style-position: outside; margin-bottom: 20px;"><code style="font-family: monospace, monospace; font-size: 1em; white-space: pre-wrap; word-wrap: break-word;">the_post_thumbnail():</code> This display Post Thumbnail as set in post’s edit screen</li>
<li style="list-style-position: outside; margin-bottom: 20px;">Others are self explanatory, and I also included comments.</li>
</ul>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
So now our <a href="http://websiteat100.com/blog/category/php/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Php blog by websiteat100.com">PHP </a>code is ready, lets create some <a href="http://websiteat100.com/blog/category/html5-and-css3/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Css blog by websiteat100.com">CSS </a>classes to make it look elegant.</div>
<h3 style="background-color: white; color: #333333; font-family: 'Droid Sans'; font-size: 16px; font-weight: 200; letter-spacing: -0.1px; line-height: 20px; margin-top: 0px; padding: 0px; text-align: justify;">
HTML Output</h3>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
Here’s an <a href="http://websiteat100.com/blog/category/html5-and-css3/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Html blog by websiteat100.com">HTML </a>output that looks like.</div>
<div data-settings=" minimize scroll-mouseover" id="crayon-52aff5941e148547309683" style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; text-align: justify;">
<div data-settings=" show">
XHTML</div>
<div>
</div>
<div>
<table style="border-collapse: collapse; border-spacing: 0px;"><tbody>
<tr><td data-settings="show" style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div data-line="crayon-52aff5941e148547309683-1">
1</div>
<div data-line="crayon-52aff5941e148547309683-2">
2</div>
<div data-line="crayon-52aff5941e148547309683-3">
3</div>
<div data-line="crayon-52aff5941e148547309683-4">
4</div>
<div data-line="crayon-52aff5941e148547309683-5">
5</div>
<div data-line="crayon-52aff5941e148547309683-6">
6</div>
<div data-line="crayon-52aff5941e148547309683-7">
7</div>
<div data-line="crayon-52aff5941e148547309683-8">
8</div>
<div data-line="crayon-52aff5941e148547309683-9">
9</div>
<div data-line="crayon-52aff5941e148547309683-10">
10</div>
<div data-line="crayon-52aff5941e148547309683-11">
11</div>
<div data-line="crayon-52aff5941e148547309683-12">
12</div>
<div data-line="crayon-52aff5941e148547309683-13">
13</div>
<div data-line="crayon-52aff5941e148547309683-14">
14</div>
<div data-line="crayon-52aff5941e148547309683-15">
15</div>
<div data-line="crayon-52aff5941e148547309683-16">
16</div>
<div data-line="crayon-52aff5941e148547309683-17">
17</div>
<div data-line="crayon-52aff5941e148547309683-18">
18</div>
</td><td style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div id="crayon-52aff5941e148547309683-1">
<div class=”gridBox”></div>
<div id="crayon-52aff5941e148547309683-2">
<h2 class=”grid-header”>Gallery Page</h2></div>
<div id="crayon-52aff5941e148547309683-3">
<div class=”boxes-container”></div>
<div id="crayon-52aff5941e148547309683-4">
</div>
<div id="crayon-52aff5941e148547309683-5">
<div class=”grid-boxes”></div>
<div id="crayon-52aff5941e148547309683-6">
    <div class=”grid-thumbnail”></div>
<div id="crayon-52aff5941e148547309683-7">
        <div class=”alignleft”> Gallery Image </div></div>
<div id="crayon-52aff5941e148547309683-8">
        <p>Gallery Title</p></div>
<div id="crayon-52aff5941e148547309683-9">
    </div></div>
<div id="crayon-52aff5941e148547309683-10">
    <div class=”grid-thumbnail”></div>
<div id="crayon-52aff5941e148547309683-11">
        <div class=”alignleft”> Gallery Image </div></div>
<div id="crayon-52aff5941e148547309683-12">
        <p>Gallery Title</p></div>
<div id="crayon-52aff5941e148547309683-13">
    </div></div>
<div id="crayon-52aff5941e148547309683-14">
    <div class=”clear”></div></div>
<div id="crayon-52aff5941e148547309683-15">
</div></div>
<div id="crayon-52aff5941e148547309683-16">
<div class=”clear”></div></div>
<div id="crayon-52aff5941e148547309683-17">
</div></div>
<div id="crayon-52aff5941e148547309683-18">
</div></div>
</td></tr>
</tbody></table>
</div>
</div>
<h3 style="background-color: white; color: #333333; font-family: 'Droid Sans'; font-size: 16px; font-weight: 200; letter-spacing: -0.1px; line-height: 20px; margin-top: 0px; padding: 0px; text-align: justify;">
CSS</h3>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
Here are <a href="http://websiteat100.com/blog/category/html5-and-css3/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Css blog by websiteat100.com">CSS </a>codes to make our post grid display professional and elegant.</div>
<div data-settings=" minimize scroll-mouseover" id="crayon-52aff5941e14d795030475" style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; text-align: justify;">
<div data-settings=" show">
CSS</div>
<div>
</div>
<div>
<table style="border-collapse: collapse; border-spacing: 0px;"><tbody>
<tr><td data-settings="show" style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div data-line="crayon-52aff5941e14d795030475-1">
1</div>
<div data-line="crayon-52aff5941e14d795030475-2">
2</div>
<div data-line="crayon-52aff5941e14d795030475-3">
3</div>
<div data-line="crayon-52aff5941e14d795030475-4">
4</div>
<div data-line="crayon-52aff5941e14d795030475-5">
5</div>
<div data-line="crayon-52aff5941e14d795030475-6">
6</div>
<div data-line="crayon-52aff5941e14d795030475-7">
7</div>
<div data-line="crayon-52aff5941e14d795030475-8">
8</div>
<div data-line="crayon-52aff5941e14d795030475-9">
9</div>
<div data-line="crayon-52aff5941e14d795030475-10">
10</div>
<div data-line="crayon-52aff5941e14d795030475-11">
11</div>
<div data-line="crayon-52aff5941e14d795030475-12">
12</div>
<div data-line="crayon-52aff5941e14d795030475-13">
13</div>
<div data-line="crayon-52aff5941e14d795030475-14">
14</div>
<div data-line="crayon-52aff5941e14d795030475-15">
15</div>
<div data-line="crayon-52aff5941e14d795030475-16">
16</div>
<div data-line="crayon-52aff5941e14d795030475-17">
17</div>
<div data-line="crayon-52aff5941e14d795030475-18">
18</div>
<div data-line="crayon-52aff5941e14d795030475-19">
19</div>
<div data-line="crayon-52aff5941e14d795030475-20">
20</div>
<div data-line="crayon-52aff5941e14d795030475-21">
21</div>
<div data-line="crayon-52aff5941e14d795030475-22">
22</div>
<div data-line="crayon-52aff5941e14d795030475-23">
23</div>
<div data-line="crayon-52aff5941e14d795030475-24">
24</div>
<div data-line="crayon-52aff5941e14d795030475-25">
25</div>
<div data-line="crayon-52aff5941e14d795030475-26">
26</div>
<div data-line="crayon-52aff5941e14d795030475-27">
27</div>
<div data-line="crayon-52aff5941e14d795030475-28">
28</div>
<div data-line="crayon-52aff5941e14d795030475-29">
29</div>
<div data-line="crayon-52aff5941e14d795030475-30">
30</div>
<div data-line="crayon-52aff5941e14d795030475-31">
31</div>
</td><td style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div id="crayon-52aff5941e14d795030475-1">
.margin_right{ margin: 0 10px 20px 0;}</div>
<div id="crayon-52aff5941e14d795030475-2">
</div>
<div id="crayon-52aff5941e14d795030475-3">
.gridBox {</div>
<div id="crayon-52aff5941e14d795030475-4">
   margin: 20px auto 16px auto;</div>
<div id="crayon-52aff5941e14d795030475-5">
   width: 975px;</div>
<div id="crayon-52aff5941e14d795030475-6">
}</div>
<div id="crayon-52aff5941e14d795030475-7">
</div>
<div id="crayon-52aff5941e14d795030475-8">
.gridBox .grid-header{</div>
<div id="crayon-52aff5941e14d795030475-9">
   border-bottom: 1px solid #DFDDD5;</div>
<div id="crayon-52aff5941e14d795030475-10">
   margin-bottom: 20px;</div>
<div id="crayon-52aff5941e14d795030475-11">
   padding-bottom: 10px;</div>
<div id="crayon-52aff5941e14d795030475-12">
}</div>
<div id="crayon-52aff5941e14d795030475-13">
</div>
<div id="crayon-52aff5941e14d795030475-14">
.gridBox .boxes-container{ }</div>
<div id="crayon-52aff5941e14d795030475-15">
</div>
<div id="crayon-52aff5941e14d795030475-16">
.gridBox .boxes-container .grid-boxes{</div>
<div id="crayon-52aff5941e14d795030475-17">
   float: left;</div>
<div id="crayon-52aff5941e14d795030475-18">
   background: #fff;</div>
<div id="crayon-52aff5941e14d795030475-19">
   padding: 6px;</div>
<div id="crayon-52aff5941e14d795030475-20">
   width: 222px;</div>
<div id="crayon-52aff5941e14d795030475-21">
   border: 1px solid #DFDDD5;</div>
<div id="crayon-52aff5941e14d795030475-22">
}</div>
<div id="crayon-52aff5941e14d795030475-23">
</div>
<div id="crayon-52aff5941e14d795030475-24">
.gridBox .boxes-container .grid-boxes .grid-thumbnail{ }</div>
<div id="crayon-52aff5941e14d795030475-25">
</div>
<div id="crayon-52aff5941e14d795030475-26">
.gridBox .boxes-container .grid-boxes .grid-title{</div>
<div id="crayon-52aff5941e14d795030475-27">
   text-align: center;</div>
<div id="crayon-52aff5941e14d795030475-28">
   margin-bottom: 0 !important;</div>
<div id="crayon-52aff5941e14d795030475-29">
   padding: 8px 0 6px 0;</div>
<div id="crayon-52aff5941e14d795030475-30">
   font-size: 14px;</div>
<div id="crayon-52aff5941e14d795030475-31">
}</div>
</td></tr>
</tbody></table>
</div>
</div>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
That’s it hope you find this tutorial helpful.</div>
</div>

HOW TO CREATE OR DISPLAY WORDPRESS POST IN THUMBNAIL GRID VIEW DESIGN

When creating WordPress site design, have you ever had the urge to create a grid display of posts or pages? The Grid View layout works g...

HOW TO ADD “EMAIL THIS ARTICLE TO A FRIEND” INTO YOUR WORDPRESS SITE WITHOUT USING A PLUGIN

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
As we created interesting posts in our site and which are worth of sharing into our friends, we open use other functionality so that user can share, send posts to their friends, other sites owner are adding social sites to share and send post to their friends and followers but this time I will try to explain <strong style="line-height: inherit;">how to create Email This Article to Friend without using a plugin</strong> and or social sites.</div>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; text-align: justify;">
<div>
Note</div>
<div>
In this tutorial we need to edit <strong style="line-height: inherit;">single.php</strong> file in our current theme as the Send button only display in single post.</div>
</div>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
Okay, let’s start.</div>
<h3 style="background-color: white; color: #333333; font-family: 'Droid Sans'; font-size: 16px; font-weight: 200; letter-spacing: -0.1px; line-height: 20px; margin-top: 0px; padding: 0px; text-align: justify;">
PHP</h3>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
This contains small information use to send email, like Post title, Post content and post URL. This snippet should put before the <a href="http://websiteat100.com/blog/category/html5-and-css3/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Html blog by websiteat100.com">HTML </a>form.</div>
<div data-settings=" minimize scroll-mouseover" id="crayon-52a811f2636e4273865052" style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; text-align: justify;">
<div data-settings=" show">
PHP</div>
<div>
</div>
<div>
<table style="border-collapse: collapse; border-spacing: 0px;"><tbody>
<tr><td data-settings="show" style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div data-line="crayon-52a811f2636e4273865052-1">
1</div>
<div data-line="crayon-52a811f2636e4273865052-2">
2</div>
<div data-line="crayon-52a811f2636e4273865052-3">
3</div>
<div data-line="crayon-52a811f2636e4273865052-4">
4</div>
<div data-line="crayon-52a811f2636e4273865052-5">
5</div>
<div data-line="crayon-52a811f2636e4273865052-6">
6</div>
<div data-line="crayon-52a811f2636e4273865052-7">
7</div>
<div data-line="crayon-52a811f2636e4273865052-8">
8</div>
<div data-line="crayon-52a811f2636e4273865052-9">
9</div>
<div data-line="crayon-52a811f2636e4273865052-10">
10</div>
<div data-line="crayon-52a811f2636e4273865052-11">
11</div>
<div data-line="crayon-52a811f2636e4273865052-12">
12</div>
<div data-line="crayon-52a811f2636e4273865052-13">
13</div>
<div data-line="crayon-52a811f2636e4273865052-14">
14</div>
<div data-line="crayon-52a811f2636e4273865052-15">
15</div>
<div data-line="crayon-52a811f2636e4273865052-16">
16</div>
</td><td style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div id="crayon-52a811f2636e4273865052-1">
<?php</div>
<div id="crayon-52a811f2636e4273865052-2">
    session_start();</div>
<div id="crayon-52a811f2636e4273865052-3">
</div>
<div id="crayon-52a811f2636e4273865052-4">
    $message = get_the_content(‘readmore &raquo;’, false);</div>
<div id="crayon-52a811f2636e4273865052-5">
</div>
<div id="crayon-52a811f2636e4273865052-6">
    //filter the content to display HTML tag like <p></div>
<div id="crayon-52a811f2636e4273865052-7">
    $message = apply_filters(‘the_content’, $message);</div>
<div id="crayon-52a811f2636e4273865052-8">
    $message = str_replace(‘]]>’, ‘]]&gt;’, $message);</div>
<div id="crayon-52a811f2636e4273865052-9">
</div>
<div id="crayon-52a811f2636e4273865052-10">
    $title = get_the_title(); //get post title and assign into $title variable</div>
<div id="crayon-52a811f2636e4273865052-11">
    $site_url = get_permalink(); //get post permalink and assign into $site_url variable</div>
<div id="crayon-52a811f2636e4273865052-12">
</div>
<div id="crayon-52a811f2636e4273865052-13">
    $_SESSION['message'] = $message;</div>
<div id="crayon-52a811f2636e4273865052-14">
    $_SESSION['title'] = $title;</div>
<div id="crayon-52a811f2636e4273865052-15">
    $_SESSION['site_url'] = $site_url;</div>
<div id="crayon-52a811f2636e4273865052-16">
?></div>
</td></tr>
</tbody></table>
</div>
</div>
<h3 style="background-color: white; color: #333333; font-family: 'Droid Sans'; font-size: 16px; font-weight: 200; letter-spacing: -0.1px; line-height: 20px; margin-top: 0px; padding: 0px; text-align: justify;">
HTML</h3>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
This contains our <a href="http://websiteat100.com/blog/category/html5-and-css3/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Html blog by websiteat100.com">HTML </a>form for sending data.</div>
<div data-settings=" minimize scroll-mouseover" id="crayon-52a811f2636f0206438932" style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; text-align: justify;">
<div data-settings=" show">
XHTML</div>
<div>
</div>
<div>
<table style="border-collapse: collapse; border-spacing: 0px;"><tbody>
<tr><td data-settings="show" style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div data-line="crayon-52a811f2636f0206438932-1">
1</div>
<div data-line="crayon-52a811f2636f0206438932-2">
2</div>
<div data-line="crayon-52a811f2636f0206438932-3">
3</div>
<div data-line="crayon-52a811f2636f0206438932-4">
4</div>
<div data-line="crayon-52a811f2636f0206438932-5">
5</div>
<div data-line="crayon-52a811f2636f0206438932-6">
6</div>
<div data-line="crayon-52a811f2636f0206438932-7">
7</div>
<div data-line="crayon-52a811f2636f0206438932-8">
8</div>
<div data-line="crayon-52a811f2636f0206438932-9">
9</div>
<div data-line="crayon-52a811f2636f0206438932-10">
10</div>
<div data-line="crayon-52a811f2636f0206438932-11">
11</div>
<div data-line="crayon-52a811f2636f0206438932-12">
12</div>
<div data-line="crayon-52a811f2636f0206438932-13">
13</div>
<div data-line="crayon-52a811f2636f0206438932-14">
14</div>
<div data-line="crayon-52a811f2636f0206438932-15">
15</div>
<div data-line="crayon-52a811f2636f0206438932-16">
16</div>
<div data-line="crayon-52a811f2636f0206438932-17">
17</div>
<div data-line="crayon-52a811f2636f0206438932-18">
18</div>
<div data-line="crayon-52a811f2636f0206438932-19">
19</div>
<div data-line="crayon-52a811f2636f0206438932-20">
20</div>
<div data-line="crayon-52a811f2636f0206438932-21">
21</div>
<div data-line="crayon-52a811f2636f0206438932-22">
22</div>
<div data-line="crayon-52a811f2636f0206438932-23">
23</div>
<div data-line="crayon-52a811f2636f0206438932-24">
24</div>
<div data-line="crayon-52a811f2636f0206438932-25">
25</div>
<div data-line="crayon-52a811f2636f0206438932-26">
26</div>
<div data-line="crayon-52a811f2636f0206438932-27">
27</div>
</td><td style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div id="crayon-52a811f2636f0206438932-1">
<div class=”email-to-friend”></div>
<div id="crayon-52a811f2636f0206438932-2">
    <div class=”top-arrow”></div></div>
<div id="crayon-52a811f2636f0206438932-3">
</div>
<div id="crayon-52a811f2636f0206438932-4">
    <h4>E-mail this interesting post to a friend.</h4></div>
<div id="crayon-52a811f2636f0206438932-5">
    <div class=”message”></div></div>
<div id="crayon-52a811f2636f0206438932-6">
</div>
<div id="crayon-52a811f2636f0206438932-7">
    <form id=”emailform” method=”post”></div>
<div id="crayon-52a811f2636f0206438932-8">
        <p></div>
<div id="crayon-52a811f2636f0206438932-9">
            <label for=”to”>E-mail to:</label></div>
<div id="crayon-52a811f2636f0206438932-10">
            <input type=”text” id=”to” name=”to” class=”text” value=”" /></div>
<div id="crayon-52a811f2636f0206438932-11">
        </p></div>
<div id="crayon-52a811f2636f0206438932-12">
        <p></div>
<div id="crayon-52a811f2636f0206438932-13">
            <label for=”sender”>Sender Name:</label></div>
<div id="crayon-52a811f2636f0206438932-14">
            <input type=”text” id=”sender” name=”sender” class=”text” value=”" /></div>
<div id="crayon-52a811f2636f0206438932-15">
        </p></div>
<div id="crayon-52a811f2636f0206438932-16">
        <p></div>
<div id="crayon-52a811f2636f0206438932-17">
            <label for=”your_email”>Your Email:</label></div>
<div id="crayon-52a811f2636f0206438932-18">
            <input type=”text” id=”your_email” class=”text” name=”your_email” value=”" /></div>
<div id="crayon-52a811f2636f0206438932-19">
        </p></div>
<div id="crayon-52a811f2636f0206438932-20">
        <p></div>
<div id="crayon-52a811f2636f0206438932-21">
            <label for=”subject”>Subject:</label></div>
<div id="crayon-52a811f2636f0206438932-22">
            <input type=”text” id=”subject” name=”subject” class=”text” value=”" /></div>
<div id="crayon-52a811f2636f0206438932-23">
        </p></div>
<div id="crayon-52a811f2636f0206438932-24">
        <p><input type=”submit” value=”Send” name=”send_btn” class=”send-btn” /> or <a href=”javascript: void(0);” id=”hide-form”>Cancel</a></p></div>
<div id="crayon-52a811f2636f0206438932-25">
        <input type=”hidden” name=”action” value=”email-to-friend” /></div>
<div id="crayon-52a811f2636f0206438932-26">
    </form></div>
<div id="crayon-52a811f2636f0206438932-27">
</div></div>
</td></tr>
</tbody></table>
</div>
</div>
<h3 style="background-color: white; color: #333333; font-family: 'Droid Sans'; font-size: 16px; font-weight: 200; letter-spacing: -0.1px; line-height: 20px; margin-top: 0px; padding: 0px; text-align: justify;">
Javascript</h3>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
This contain <a href="http://websiteat100.com/blog/category/jquery/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Javascript blog by websiteat100.com">JS </a>script for popup <a href="http://websiteat100.com/blog/category/html5-and-css3/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Html blog by websiteat100.com">HTML </a>or simply a dialog box form and send data to the server.</div>
<div data-settings=" minimize scroll-mouseover" id="crayon-52a811f2636f7389476722" style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; text-align: justify;">
<div data-settings=" show">
JavaScript</div>
<div>
</div>
<div>
<table style="border-collapse: collapse; border-spacing: 0px;"><tbody>
<tr><td data-settings="show" style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div data-line="crayon-52a811f2636f7389476722-1">
1</div>
<div data-line="crayon-52a811f2636f7389476722-2">
2</div>
<div data-line="crayon-52a811f2636f7389476722-3">
3</div>
<div data-line="crayon-52a811f2636f7389476722-4">
4</div>
<div data-line="crayon-52a811f2636f7389476722-5">
5</div>
<div data-line="crayon-52a811f2636f7389476722-6">
6</div>
<div data-line="crayon-52a811f2636f7389476722-7">
7</div>
<div data-line="crayon-52a811f2636f7389476722-8">
8</div>
<div data-line="crayon-52a811f2636f7389476722-9">
9</div>
<div data-line="crayon-52a811f2636f7389476722-10">
10</div>
<div data-line="crayon-52a811f2636f7389476722-11">
11</div>
<div data-line="crayon-52a811f2636f7389476722-12">
12</div>
<div data-line="crayon-52a811f2636f7389476722-13">
13</div>
<div data-line="crayon-52a811f2636f7389476722-14">
14</div>
<div data-line="crayon-52a811f2636f7389476722-15">
15</div>
<div data-line="crayon-52a811f2636f7389476722-16">
16</div>
<div data-line="crayon-52a811f2636f7389476722-17">
17</div>
<div data-line="crayon-52a811f2636f7389476722-18">
18</div>
<div data-line="crayon-52a811f2636f7389476722-19">
19</div>
<div data-line="crayon-52a811f2636f7389476722-20">
20</div>
<div data-line="crayon-52a811f2636f7389476722-21">
21</div>
<div data-line="crayon-52a811f2636f7389476722-22">
22</div>
<div data-line="crayon-52a811f2636f7389476722-23">
23</div>
<div data-line="crayon-52a811f2636f7389476722-24">
24</div>
<div data-line="crayon-52a811f2636f7389476722-25">
25</div>
<div data-line="crayon-52a811f2636f7389476722-26">
26</div>
<div data-line="crayon-52a811f2636f7389476722-27">
27</div>
<div data-line="crayon-52a811f2636f7389476722-28">
28</div>
<div data-line="crayon-52a811f2636f7389476722-29">
29</div>
<div data-line="crayon-52a811f2636f7389476722-30">
30</div>
<div data-line="crayon-52a811f2636f7389476722-31">
31</div>
<div data-line="crayon-52a811f2636f7389476722-32">
32</div>
<div data-line="crayon-52a811f2636f7389476722-33">
33</div>
<div data-line="crayon-52a811f2636f7389476722-34">
34</div>
<div data-line="crayon-52a811f2636f7389476722-35">
35</div>
<div data-line="crayon-52a811f2636f7389476722-36">
36</div>
<div data-line="crayon-52a811f2636f7389476722-37">
37</div>
<div data-line="crayon-52a811f2636f7389476722-38">
38</div>
<div data-line="crayon-52a811f2636f7389476722-39">
39</div>
<div data-line="crayon-52a811f2636f7389476722-40">
40</div>
<div data-line="crayon-52a811f2636f7389476722-41">
41</div>
<div data-line="crayon-52a811f2636f7389476722-42">
42</div>
<div data-line="crayon-52a811f2636f7389476722-43">
43</div>
<div data-line="crayon-52a811f2636f7389476722-44">
44</div>
<div data-line="crayon-52a811f2636f7389476722-45">
45</div>
<div data-line="crayon-52a811f2636f7389476722-46">
46</div>
<div data-line="crayon-52a811f2636f7389476722-47">
47</div>
<div data-line="crayon-52a811f2636f7389476722-48">
48</div>
</td><td style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div id="crayon-52a811f2636f7389476722-1">
<script type=”text/javascript”></div>
<div id="crayon-52a811f2636f7389476722-2">
    var ryans = jQuery.noConflict();</div>
<div id="crayon-52a811f2636f7389476722-3">
</div>
<div id="crayon-52a811f2636f7389476722-4">
    ryans(document).ready(function(){</div>
<div id="crayon-52a811f2636f7389476722-5">
</div>
<div id="crayon-52a811f2636f7389476722-6">
        // Display our form</div>
<div id="crayon-52a811f2636f7389476722-7">
        ryans(“#show-form”).click(function(e){</div>
<div id="crayon-52a811f2636f7389476722-8">
            ryans(“.email-to-friend”).fadeIn(“slow”)</div>
<div id="crayon-52a811f2636f7389476722-9">
            .css(‘top’, e.pageY + 16)</div>
<div id="crayon-52a811f2636f7389476722-10">
            .css(‘left’, e.pageX)</div>
<div id="crayon-52a811f2636f7389476722-11">
            .appendTo(‘body’);</div>
<div id="crayon-52a811f2636f7389476722-12">
        });</div>
<div id="crayon-52a811f2636f7389476722-13">
</div>
<div id="crayon-52a811f2636f7389476722-14">
        // Hide our form</div>
<div id="crayon-52a811f2636f7389476722-15">
        ryans(“#hide-form”).click(function(){</div>
<div id="crayon-52a811f2636f7389476722-16">
            ryans(“.email-to-friend”).fadeOut(“slow”);</div>
<div id="crayon-52a811f2636f7389476722-17">
        });</div>
<div id="crayon-52a811f2636f7389476722-18">
</div>
<div id="crayon-52a811f2636f7389476722-19">
    });</div>
<div id="crayon-52a811f2636f7389476722-20">
</div>
<div id="crayon-52a811f2636f7389476722-21">
    // Add submit event to the form.</div>
<div id="crayon-52a811f2636f7389476722-22">
    ryans(“#emailform”).submit(function(){</div>
<div id="crayon-52a811f2636f7389476722-23">
</div>
<div id="crayon-52a811f2636f7389476722-24">
        eaction = this.action.value;</div>
<div id="crayon-52a811f2636f7389476722-25">
        eto = this.to.value;</div>
<div id="crayon-52a811f2636f7389476722-26">
        esender = this.sender.value;</div>
<div id="crayon-52a811f2636f7389476722-27">
        eyour_email = this.your_email.value;</div>
<div id="crayon-52a811f2636f7389476722-28">
        esubject = this.subject.value;</div>
<div id="crayon-52a811f2636f7389476722-29">
        send_btn = this.send_btn;</div>
<div id="crayon-52a811f2636f7389476722-30">
</div>
<div id="crayon-52a811f2636f7389476722-31">
        // send data using jQuery.post</div>
<div id="crayon-52a811f2636f7389476722-32">
        ryans.post(“<?php bloginfo(‘template_directory’) ?>/includes/email-ajax.php”, {action: eaction, to: eto, sender: esender, your_email: eyour_email, subject: esubject}, function(data){</div>
<div id="crayon-52a811f2636f7389476722-33">
            if(data==’0′) {</div>
<div id="crayon-52a811f2636f7389476722-34">
                ryans(“.message”).html(‘<p>All fields are required.</p>’);</div>
<div id="crayon-52a811f2636f7389476722-35">
            } else if(data==’1′) {</div>
<div id="crayon-52a811f2636f7389476722-36">
                ryans(“.message”).html(‘<p>Invalid Email Address, Please try again.</p>’);</div>
<div id="crayon-52a811f2636f7389476722-37">
            } else {</div>
<div id="crayon-52a811f2636f7389476722-38">
                send_btn.value=”Sent”;</div>
<div id="crayon-52a811f2636f7389476722-39">
                send_btn.disabled=true;</div>
<div id="crayon-52a811f2636f7389476722-40">
                ryans(“.message”).html(‘<p>Post successfully emailed to your friend <img alt=";)" class="wp-smiley" src="http://websiteat100.com/blog/wp-includes/images/smilies/icon_wink.gif" style="border: 0px; height: auto; margin: 0px !important; max-height: 1em; max-width: 100%; vertical-align: middle;" /> </p>’);</div>
<div id="crayon-52a811f2636f7389476722-41">
            }</div>
<div id="crayon-52a811f2636f7389476722-42">
</div>
<div id="crayon-52a811f2636f7389476722-43">
        });</div>
<div id="crayon-52a811f2636f7389476722-44">
</div>
<div id="crayon-52a811f2636f7389476722-45">
        return false;</div>
<div id="crayon-52a811f2636f7389476722-46">
    });</div>
<div id="crayon-52a811f2636f7389476722-47">
</div>
<div id="crayon-52a811f2636f7389476722-48">
</script></div>
</td></tr>
</tbody></table>
</div>
</div>
<h3 style="background-color: white; color: #333333; font-family: 'Droid Sans'; font-size: 16px; font-weight: 200; letter-spacing: -0.1px; line-height: 20px; margin-top: 0px; padding: 0px; text-align: justify;">
Confused?</h3>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
Okay I will explain how the above <a href="http://websiteat100.com/blog/category/jquery/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Javascript blog by websiteat100.com">javascripts </a>works.</div>
<ul style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; list-style: square outside; margin: 20px 0px 20px 40px; padding: 0px; text-align: justify;">
<li style="list-style-position: outside; margin-bottom: 20px;"><code style="font-family: monospace, monospace; font-size: 1em; white-space: pre-wrap; word-wrap: break-word;">ryans("#show-form"):</code> We simply add an event and display the form if #show-form is triggered.</li>
<li style="list-style-position: outside; margin-bottom: 20px;"><code style="font-family: monospace, monospace; font-size: 1em; white-space: pre-wrap; word-wrap: break-word;">ryans("#hide-form"):</code> This will use to hide the form.</li>
<li style="list-style-position: outside; margin-bottom: 20px;"><code style="font-family: monospace, monospace; font-size: 1em; white-space: pre-wrap; word-wrap: break-word;">ryans.post():</code> We’re using jQuery.post to send data(s) to the server, visit <a href="http://api.jquery.com/jQuery.post/" rel="nofollow" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" target="_blank" title="jQuery">jQuery</a> site for more information.</li>
</ul>
<h3 style="background-color: white; color: #333333; font-family: 'Droid Sans'; font-size: 16px; font-weight: 200; letter-spacing: -0.1px; line-height: 20px; margin-top: 0px; padding: 0px; text-align: justify;">
ajax-email.php</h3>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
This contains <a href="http://websiteat100.com/blog/category/php/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Php blog by websiteat100.com">PHP </a>script that accepts data that are being sent from <a href="http://websiteat100.com/blog/category/jquery/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Javascript blog by websiteat100.com">javascript </a>above.</div>
<div data-settings=" minimize scroll-mouseover" id="crayon-52a811f2636fd362887334" style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; text-align: justify;">
<div data-settings=" show">
PHP</div>
<div>
</div>
<div>
<table style="border-collapse: collapse; border-spacing: 0px;"><tbody>
<tr><td data-settings="show" style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div data-line="crayon-52a811f2636fd362887334-1">
1</div>
<div data-line="crayon-52a811f2636fd362887334-2">
2</div>
<div data-line="crayon-52a811f2636fd362887334-3">
3</div>
<div data-line="crayon-52a811f2636fd362887334-4">
4</div>
<div data-line="crayon-52a811f2636fd362887334-5">
5</div>
<div data-line="crayon-52a811f2636fd362887334-6">
6</div>
<div data-line="crayon-52a811f2636fd362887334-7">
7</div>
<div data-line="crayon-52a811f2636fd362887334-8">
8</div>
<div data-line="crayon-52a811f2636fd362887334-9">
9</div>
<div data-line="crayon-52a811f2636fd362887334-10">
10</div>
<div data-line="crayon-52a811f2636fd362887334-11">
11</div>
<div data-line="crayon-52a811f2636fd362887334-12">
12</div>
<div data-line="crayon-52a811f2636fd362887334-13">
13</div>
<div data-line="crayon-52a811f2636fd362887334-14">
14</div>
<div data-line="crayon-52a811f2636fd362887334-15">
15</div>
<div data-line="crayon-52a811f2636fd362887334-16">
16</div>
<div data-line="crayon-52a811f2636fd362887334-17">
17</div>
<div data-line="crayon-52a811f2636fd362887334-18">
18</div>
<div data-line="crayon-52a811f2636fd362887334-19">
19</div>
<div data-line="crayon-52a811f2636fd362887334-20">
20</div>
<div data-line="crayon-52a811f2636fd362887334-21">
21</div>
<div data-line="crayon-52a811f2636fd362887334-22">
22</div>
<div data-line="crayon-52a811f2636fd362887334-23">
23</div>
<div data-line="crayon-52a811f2636fd362887334-24">
24</div>
<div data-line="crayon-52a811f2636fd362887334-25">
25</div>
<div data-line="crayon-52a811f2636fd362887334-26">
26</div>
<div data-line="crayon-52a811f2636fd362887334-27">
27</div>
<div data-line="crayon-52a811f2636fd362887334-28">
28</div>
<div data-line="crayon-52a811f2636fd362887334-29">
29</div>
<div data-line="crayon-52a811f2636fd362887334-30">
30</div>
<div data-line="crayon-52a811f2636fd362887334-31">
31</div>
<div data-line="crayon-52a811f2636fd362887334-32">
32</div>
<div data-line="crayon-52a811f2636fd362887334-33">
33</div>
<div data-line="crayon-52a811f2636fd362887334-34">
34</div>
<div data-line="crayon-52a811f2636fd362887334-35">
35</div>
<div data-line="crayon-52a811f2636fd362887334-36">
36</div>
<div data-line="crayon-52a811f2636fd362887334-37">
37</div>
<div data-line="crayon-52a811f2636fd362887334-38">
38</div>
<div data-line="crayon-52a811f2636fd362887334-39">
39</div>
<div data-line="crayon-52a811f2636fd362887334-40">
40</div>
<div data-line="crayon-52a811f2636fd362887334-41">
41</div>
<div data-line="crayon-52a811f2636fd362887334-42">
42</div>
<div data-line="crayon-52a811f2636fd362887334-43">
43</div>
<div data-line="crayon-52a811f2636fd362887334-44">
44</div>
<div data-line="crayon-52a811f2636fd362887334-45">
45</div>
<div data-line="crayon-52a811f2636fd362887334-46">
46</div>
<div data-line="crayon-52a811f2636fd362887334-47">
47</div>
<div data-line="crayon-52a811f2636fd362887334-48">
48</div>
<div data-line="crayon-52a811f2636fd362887334-49">
49</div>
<div data-line="crayon-52a811f2636fd362887334-50">
50</div>
</td><td style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div id="crayon-52a811f2636fd362887334-1">
<?php</div>
<div id="crayon-52a811f2636fd362887334-2">
</div>
<div id="crayon-52a811f2636fd362887334-3">
    session_start();</div>
<div id="crayon-52a811f2636fd362887334-4">
</div>
<div id="crayon-52a811f2636fd362887334-5">
    $err = ”;</div>
<div id="crayon-52a811f2636fd362887334-6">
    $success = ”;</div>
<div id="crayon-52a811f2636fd362887334-7">
</div>
<div id="crayon-52a811f2636fd362887334-8">
    if( isset($_POST['action']) && $_POST['action']==’email-to-friend’ ) {</div>
<div id="crayon-52a811f2636fd362887334-9">
</div>
<div id="crayon-52a811f2636fd362887334-10">
        $to = $_POST['to'];</div>
<div id="crayon-52a811f2636fd362887334-11">
        $sender = $_POST['sender'];</div>
<div id="crayon-52a811f2636fd362887334-12">
        $your_email = $_POST['your_email'];</div>
<div id="crayon-52a811f2636fd362887334-13">
        $subject = $_POST['subject'];</div>
<div id="crayon-52a811f2636fd362887334-14">
</div>
<div id="crayon-52a811f2636fd362887334-15">
</div>
<div id="crayon-52a811f2636fd362887334-16">
        if( $to == “” || $sender == “” || $your_email == “” || $subject == “” ) {</div>
<div id="crayon-52a811f2636fd362887334-17">
            echo ’0′;</div>
<div id="crayon-52a811f2636fd362887334-18">
        } else if(!filter_var($to, FILTER_VALIDATE_EMAIL)) {</div>
<div id="crayon-52a811f2636fd362887334-19">
            echo ’1′;</div>
<div id="crayon-52a811f2636fd362887334-20">
        } else if(!filter_var($your_email, FILTER_VALIDATE_EMAIL)) {</div>
<div id="crayon-52a811f2636fd362887334-21">
            echo ’1′;</div>
<div id="crayon-52a811f2636fd362887334-22">
        } else {</div>
<div id="crayon-52a811f2636fd362887334-23">
</div>
<div id="crayon-52a811f2636fd362887334-24">
            $body = $_SESSION['message'];</div>
<div id="crayon-52a811f2636fd362887334-25">
            $title = $_SESSION['title'];</div>
<div id="crayon-52a811f2636fd362887334-26">
            $site_url = $_SESSION['site_url'];</div>
<div id="crayon-52a811f2636fd362887334-27">
</div>
<div id="crayon-52a811f2636fd362887334-28">
            $message = ‘</div>
<div id="crayon-52a811f2636fd362887334-29">
            <html></div>
<div id="crayon-52a811f2636fd362887334-30">
            <head></div>
<div id="crayon-52a811f2636fd362887334-31">
                <title>’. $title .’</title></div>
<div id="crayon-52a811f2636fd362887334-32">
            </head></div>
<div id="crayon-52a811f2636fd362887334-33">
            <body></div>
<div id="crayon-52a811f2636fd362887334-34">
                <h2>’. $title .’</h2.</div>
<div id="crayon-52a811f2636fd362887334-35">
                ’. $body .’</div>
<div id="crayon-52a811f2636fd362887334-36">
                <p>Having trouble viewing this email? <a href=”‘. $site_url. ‘”>Click here</a>.</p></div>
<div id="crayon-52a811f2636fd362887334-37">
            </body></div>
<div id="crayon-52a811f2636fd362887334-38">
            </html></div>
<div id="crayon-52a811f2636fd362887334-39">
            ’;</div>
<div id="crayon-52a811f2636fd362887334-40">
            $headers = ‘From: ‘. $sender .’ <’. $your_email .’>’ . “\r\n”;</div>
<div id="crayon-52a811f2636fd362887334-41">
</div>
<div id="crayon-52a811f2636fd362887334-42">
            $email = mail( $to, $subject, $message, $headers );</div>
<div id="crayon-52a811f2636fd362887334-43">
            if( $email ) {</div>
<div id="crayon-52a811f2636fd362887334-44">
                echo ’2′;</div>
<div id="crayon-52a811f2636fd362887334-45">
            }</div>
<div id="crayon-52a811f2636fd362887334-46">
</div>
<div id="crayon-52a811f2636fd362887334-47">
        }</div>
<div id="crayon-52a811f2636fd362887334-48">
    }</div>
<div id="crayon-52a811f2636fd362887334-49">
</div>
<div id="crayon-52a811f2636fd362887334-50">
?></div>
</td></tr>
</tbody></table>
</div>
</div>
<h3 style="background-color: white; color: #333333; font-family: 'Droid Sans'; font-size: 16px; font-weight: 200; letter-spacing: -0.1px; line-height: 20px; margin-top: 0px; padding: 0px; text-align: justify;">
CSS</h3>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
To beautify our send button and form we need to add <a href="http://websiteat100.com/blog/category/html5-and-css3/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Css blog by websiteat100.com">CSS </a>code, copy and paste below code to apply.</div>
<div data-settings=" minimize scroll-mouseover" id="crayon-52a811f263704814338570" style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; text-align: justify;">
<div data-settings=" show">
CSS</div>
<div>
</div>
<div>
<table style="border-collapse: collapse; border-spacing: 0px;"><tbody>
<tr><td data-settings="show" style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div data-line="crayon-52a811f263704814338570-1">
1</div>
<div data-line="crayon-52a811f263704814338570-2">
2</div>
<div data-line="crayon-52a811f263704814338570-3">
3</div>
<div data-line="crayon-52a811f263704814338570-4">
4</div>
<div data-line="crayon-52a811f263704814338570-5">
5</div>
<div data-line="crayon-52a811f263704814338570-6">
6</div>
<div data-line="crayon-52a811f263704814338570-7">
7</div>
<div data-line="crayon-52a811f263704814338570-8">
8</div>
<div data-line="crayon-52a811f263704814338570-9">
9</div>
<div data-line="crayon-52a811f263704814338570-10">
10</div>
<div data-line="crayon-52a811f263704814338570-11">
11</div>
<div data-line="crayon-52a811f263704814338570-12">
12</div>
<div data-line="crayon-52a811f263704814338570-13">
13</div>
<div data-line="crayon-52a811f263704814338570-14">
14</div>
<div data-line="crayon-52a811f263704814338570-15">
15</div>
<div data-line="crayon-52a811f263704814338570-16">
16</div>
<div data-line="crayon-52a811f263704814338570-17">
17</div>
<div data-line="crayon-52a811f263704814338570-18">
18</div>
<div data-line="crayon-52a811f263704814338570-19">
19</div>
<div data-line="crayon-52a811f263704814338570-20">
20</div>
<div data-line="crayon-52a811f263704814338570-21">
21</div>
<div data-line="crayon-52a811f263704814338570-22">
22</div>
<div data-line="crayon-52a811f263704814338570-23">
23</div>
<div data-line="crayon-52a811f263704814338570-24">
24</div>
<div data-line="crayon-52a811f263704814338570-25">
25</div>
<div data-line="crayon-52a811f263704814338570-26">
26</div>
<div data-line="crayon-52a811f263704814338570-27">
27</div>
<div data-line="crayon-52a811f263704814338570-28">
28</div>
<div data-line="crayon-52a811f263704814338570-29">
29</div>
<div data-line="crayon-52a811f263704814338570-30">
30</div>
<div data-line="crayon-52a811f263704814338570-31">
31</div>
<div data-line="crayon-52a811f263704814338570-32">
32</div>
<div data-line="crayon-52a811f263704814338570-33">
33</div>
<div data-line="crayon-52a811f263704814338570-34">
34</div>
<div data-line="crayon-52a811f263704814338570-35">
35</div>
<div data-line="crayon-52a811f263704814338570-36">
36</div>
<div data-line="crayon-52a811f263704814338570-37">
37</div>
<div data-line="crayon-52a811f263704814338570-38">
38</div>
<div data-line="crayon-52a811f263704814338570-39">
39</div>
<div data-line="crayon-52a811f263704814338570-40">
40</div>
<div data-line="crayon-52a811f263704814338570-41">
41</div>
<div data-line="crayon-52a811f263704814338570-42">
42</div>
<div data-line="crayon-52a811f263704814338570-43">
43</div>
<div data-line="crayon-52a811f263704814338570-44">
44</div>
<div data-line="crayon-52a811f263704814338570-45">
45</div>
<div data-line="crayon-52a811f263704814338570-46">
46</div>
<div data-line="crayon-52a811f263704814338570-47">
47</div>
<div data-line="crayon-52a811f263704814338570-48">
48</div>
<div data-line="crayon-52a811f263704814338570-49">
49</div>
<div data-line="crayon-52a811f263704814338570-50">
50</div>
<div data-line="crayon-52a811f263704814338570-51">
51</div>
<div data-line="crayon-52a811f263704814338570-52">
52</div>
<div data-line="crayon-52a811f263704814338570-53">
53</div>
<div data-line="crayon-52a811f263704814338570-54">
54</div>
<div data-line="crayon-52a811f263704814338570-55">
55</div>
<div data-line="crayon-52a811f263704814338570-56">
56</div>
<div data-line="crayon-52a811f263704814338570-57">
57</div>
<div data-line="crayon-52a811f263704814338570-58">
58</div>
<div data-line="crayon-52a811f263704814338570-59">
59</div>
<div data-line="crayon-52a811f263704814338570-60">
60</div>
<div data-line="crayon-52a811f263704814338570-61">
61</div>
<div data-line="crayon-52a811f263704814338570-62">
62</div>
<div data-line="crayon-52a811f263704814338570-63">
63</div>
<div data-line="crayon-52a811f263704814338570-64">
64</div>
<div data-line="crayon-52a811f263704814338570-65">
65</div>
<div data-line="crayon-52a811f263704814338570-66">
66</div>
<div data-line="crayon-52a811f263704814338570-67">
67</div>
<div data-line="crayon-52a811f263704814338570-68">
68</div>
<div data-line="crayon-52a811f263704814338570-69">
69</div>
<div data-line="crayon-52a811f263704814338570-70">
70</div>
<div data-line="crayon-52a811f263704814338570-71">
71</div>
<div data-line="crayon-52a811f263704814338570-72">
72</div>
<div data-line="crayon-52a811f263704814338570-73">
73</div>
<div data-line="crayon-52a811f263704814338570-74">
74</div>
<div data-line="crayon-52a811f263704814338570-75">
75</div>
<div data-line="crayon-52a811f263704814338570-76">
76</div>
</td><td style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div id="crayon-52a811f263704814338570-1">
.show-form{</div>
<div id="crayon-52a811f263704814338570-2">
    padding: 4px 6px 4px 26px;</div>
<div id="crayon-52a811f263704814338570-3">
    background: #ECEEF5 url(‘images/email.png’) no-repeat 6px center;</div>
<div id="crayon-52a811f263704814338570-4">
    border: 1px solid #CAD4E7;</div>
<div id="crayon-52a811f263704814338570-5">
    font-size: 12px;</div>
<div id="crayon-52a811f263704814338570-6">
    color: #3B5998;</div>
<div id="crayon-52a811f263704814338570-7">
    text-decoration: none;</div>
<div id="crayon-52a811f263704814338570-8">
    border-radius: 2px;</div>
<div id="crayon-52a811f263704814338570-9">
    -moz-border-radius: 2px;</div>
<div id="crayon-52a811f263704814338570-10">
    -webkit-border-radius: 2px;</div>
<div id="crayon-52a811f263704814338570-11">
}</div>
<div id="crayon-52a811f263704814338570-12">
    .show-form:hover{</div>
<div id="crayon-52a811f263704814338570-13">
        background: #E2E6EF url(‘images/email.png’) no-repeat 6px center;</div>
<div id="crayon-52a811f263704814338570-14">
        text-decoration: none !important;</div>
<div id="crayon-52a811f263704814338570-15">
    }</div>
<div id="crayon-52a811f263704814338570-16">
</div>
<div id="crayon-52a811f263704814338570-17">
.email-to-friend{</div>
<div id="crayon-52a811f263704814338570-18">
    z-index: 99999;</div>
<div id="crayon-52a811f263704814338570-19">
    background: #fff;</div>
<div id="crayon-52a811f263704814338570-20">
    border: 1px solid #323232;</div>
<div id="crayon-52a811f263704814338570-21">
    padding: 10px;</div>
<div id="crayon-52a811f263704814338570-22">
    position: absolute;</div>
<div id="crayon-52a811f263704814338570-23">
    display: none;</div>
<div id="crayon-52a811f263704814338570-24">
}</div>
<div id="crayon-52a811f263704814338570-25">
.email-to-friend  a:hover{</div>
<div id="crayon-52a811f263704814338570-26">
    text-decoration: underline;</div>
<div id="crayon-52a811f263704814338570-27">
}</div>
<div id="crayon-52a811f263704814338570-28">
.email-to-friend .top-arrow{</div>
<div id="crayon-52a811f263704814338570-29">
    margin-top: -15px;</div>
<div id="crayon-52a811f263704814338570-30">
    background: url(‘images/top-arrow.png’) no-repeat 2% top;</div>
<div id="crayon-52a811f263704814338570-31">
    width: 9px;</div>
<div id="crayon-52a811f263704814338570-32">
    height: 5px;</div>
<div id="crayon-52a811f263704814338570-33">
    display: block;</div>
<div id="crayon-52a811f263704814338570-34">
}</div>
<div id="crayon-52a811f263704814338570-35">
.email-to-friend label{</div>
<div id="crayon-52a811f263704814338570-36">
    width: 88px;</div>
<div id="crayon-52a811f263704814338570-37">
    position: absolute;</div>
<div id="crayon-52a811f263704814338570-38">
    cursor: pointer;</div>
<div id="crayon-52a811f263704814338570-39">
}</div>
<div id="crayon-52a811f263704814338570-40">
.email-to-friend .text{</div>
<div id="crayon-52a811f263704814338570-41">
    padding: 4px;</div>
<div id="crayon-52a811f263704814338570-42">
    width: 200px;</div>
<div id="crayon-52a811f263704814338570-43">
    margin-left: 90px;</div>
<div id="crayon-52a811f263704814338570-44">
    border: 1px solid #BDC7D8;</div>
<div id="crayon-52a811f263704814338570-45">
}</div>
<div id="crayon-52a811f263704814338570-46">
.email-to-friend .send-btn{</div>
<div id="crayon-52a811f263704814338570-47">
    width: 60px;</div>
<div id="crayon-52a811f263704814338570-48">
    padding: 4px 6px;</div>
<div id="crayon-52a811f263704814338570-49">
    background: #ECEEF5;</div>
<div id="crayon-52a811f263704814338570-50">
    border: 1px solid #CAD4E7;</div>
<div id="crayon-52a811f263704814338570-51">
    font-size: 12px;</div>
<div id="crayon-52a811f263704814338570-52">
    cursor: pointer;</div>
<div id="crayon-52a811f263704814338570-53">
    color: #3B5998;</div>
<div id="crayon-52a811f263704814338570-54">
    border-radius: 2px;</div>
<div id="crayon-52a811f263704814338570-55">
    -moz-border-radius: 2px;</div>
<div id="crayon-52a811f263704814338570-56">
    -webkit-border-radius: 2px;</div>
<div id="crayon-52a811f263704814338570-57">
}</div>
<div id="crayon-52a811f263704814338570-58">
</div>
<div id="crayon-52a811f263704814338570-59">
.email-to-friend .message {</div>
<div id="crayon-52a811f263704814338570-60">
    margin: 6px 0;</div>
<div id="crayon-52a811f263704814338570-61">
}</div>
<div id="crayon-52a811f263704814338570-62">
.email-to-friend .message p{</div>
<div id="crayon-52a811f263704814338570-63">
    border-radius: 2px;</div>
<div id="crayon-52a811f263704814338570-64">
    -moz-border-radius: 2px;</div>
<div id="crayon-52a811f263704814338570-65">
    -webkit-border-radius: 2px;</div>
<div id="crayon-52a811f263704814338570-66">
}</div>
<div id="crayon-52a811f263704814338570-67">
.email-to-friend .success {</div>
<div id="crayon-52a811f263704814338570-68">
    padding: 4px 8px;</div>
<div id="crayon-52a811f263704814338570-69">
    background: lightYellow;</div>
<div id="crayon-52a811f263704814338570-70">
    border: 1px solid #E6DB55;</div>
<div id="crayon-52a811f263704814338570-71">
}</div>
<div id="crayon-52a811f263704814338570-72">
.email-to-friend .error {</div>
<div id="crayon-52a811f263704814338570-73">
    padding: 4px 8px;</div>
<div id="crayon-52a811f263704814338570-74">
    background: #FFEBE8;</div>
<div id="crayon-52a811f263704814338570-75">
    border: 1px solid #C00;</div>
<div id="crayon-52a811f263704814338570-76">
}</div>
</td></tr>
</tbody></table>
</div>
</div>
</div>

HOW TO ADD “EMAIL THIS ARTICLE TO A FRIEND” INTO YOUR WORDPRESS SITE WITHOUT USING A PLUGIN

As we created interesting posts in our site and which are worth of sharing into our friends, we open use other functionality so that user ...

WORDPRESS ADMIN-LIKE LOGIN FORM WITH CSS3 AND JQUERY

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
I was a bit amazed in the <strong style="line-height: inherit;"><a href="http://websiteat100.com/blog/category/wordpress/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Wordpress blog by websiteat100.com">WordPress </a>Admin Login Form</strong> that shake if the inputted login information is wrong or if the user is not registered, so I decided to create one with the same functionality and I will share you <strong style="line-height: inherit;">how easy to make this with <a href="http://websiteat100.com/blog/category/html5-and-css3/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Css3 blog by websiteat100.com">CSS3 </a>and <a href="http://websiteat100.com/blog/category/jquery/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Jquery blog by websiteat100.com">jQuery</a></strong>.</div>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
We know that the Admin Login in <a href="http://websiteat100.com/blog/category/wordpress/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Wordpress blog by websiteat100.com">WordPress </a>is coded with Ajax to send inputted data to the server without refreshing page but in this tutorial I only use a very simple way to validate inputted data using <a href="http://websiteat100.com/blog/category/php/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Php blog by websiteat100.com">PHP </a>and shake the login box using<a href="http://websiteat100.com/blog/category/jquery/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Jquery blog by websiteat100.com">jQuery </a>shake effect.</div>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
Okay let’s start.</div>
<h3 style="background-color: white; color: #333333; font-family: 'Droid Sans'; font-size: 16px; font-weight: 200; letter-spacing: -0.1px; line-height: 20px; margin-top: 0px; padding: 0px; text-align: justify;">
Javascript</h3>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
Add this code in the header of <code style="font-family: monospace, monospace; font-size: 1em; white-space: pre-wrap; word-wrap: break-word;">index.php</code> file.</div>
<div data-settings=" minimize scroll-mouseover" id="crayon-52a95706bf0d6348445312" style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; text-align: justify;">
<div data-settings=" show">
JavaScript</div>
<div>
</div>
<div>
<table style="border-collapse: collapse; border-spacing: 0px;"><tbody>
<tr><td data-settings="show" style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div data-line="crayon-52a95706bf0d6348445312-1">
1</div>
<div data-line="crayon-52a95706bf0d6348445312-2">
2</div>
</td><td style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div id="crayon-52a95706bf0d6348445312-1">
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js”></script></div>
<div id="crayon-52a95706bf0d6348445312-2">
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js”></script></div>
</td></tr>
</tbody></table>
</div>
</div>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; text-align: justify;">
<div>
Note</div>
<div>
Use both script for the shake effect to work</div>
</div>
<h3 style="background-color: white; color: #333333; font-family: 'Droid Sans'; font-size: 16px; font-weight: 200; letter-spacing: -0.1px; line-height: 20px; margin-top: 0px; padding: 0px; text-align: justify;">
index.php</h3>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
This file contains our <a href="http://websiteat100.com/blog/category/html5-and-css3/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Html blog by websiteat100.com">HTML </a>form and <a href="http://websiteat100.com/blog/category/php/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Php blog by websiteat100.com">PHP </a>script to accept and validate submitted data.</div>
<div data-settings=" minimize scroll-mouseover" id="crayon-52a95706bf0e0184632637" style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; text-align: justify;">
<div data-settings=" show">
XHTML</div>
<div>
</div>
<div>
<table style="border-collapse: collapse; border-spacing: 0px;"><tbody>
<tr><td data-settings="show" style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div data-line="crayon-52a95706bf0e0184632637-1">
1</div>
<div data-line="crayon-52a95706bf0e0184632637-2">
2</div>
<div data-line="crayon-52a95706bf0e0184632637-3">
3</div>
<div data-line="crayon-52a95706bf0e0184632637-4">
4</div>
<div data-line="crayon-52a95706bf0e0184632637-5">
5</div>
<div data-line="crayon-52a95706bf0e0184632637-6">
6</div>
<div data-line="crayon-52a95706bf0e0184632637-7">
7</div>
<div data-line="crayon-52a95706bf0e0184632637-8">
8</div>
<div data-line="crayon-52a95706bf0e0184632637-9">
9</div>
<div data-line="crayon-52a95706bf0e0184632637-10">
10</div>
<div data-line="crayon-52a95706bf0e0184632637-11">
11</div>
<div data-line="crayon-52a95706bf0e0184632637-12">
12</div>
<div data-line="crayon-52a95706bf0e0184632637-13">
13</div>
<div data-line="crayon-52a95706bf0e0184632637-14">
14</div>
<div data-line="crayon-52a95706bf0e0184632637-15">
15</div>
<div data-line="crayon-52a95706bf0e0184632637-16">
16</div>
<div data-line="crayon-52a95706bf0e0184632637-17">
17</div>
<div data-line="crayon-52a95706bf0e0184632637-18">
18</div>
<div data-line="crayon-52a95706bf0e0184632637-19">
19</div>
<div data-line="crayon-52a95706bf0e0184632637-20">
20</div>
<div data-line="crayon-52a95706bf0e0184632637-21">
21</div>
<div data-line="crayon-52a95706bf0e0184632637-22">
22</div>
<div data-line="crayon-52a95706bf0e0184632637-23">
23</div>
<div data-line="crayon-52a95706bf0e0184632637-24">
24</div>
<div data-line="crayon-52a95706bf0e0184632637-25">
25</div>
<div data-line="crayon-52a95706bf0e0184632637-26">
26</div>
<div data-line="crayon-52a95706bf0e0184632637-27">
27</div>
<div data-line="crayon-52a95706bf0e0184632637-28">
28</div>
<div data-line="crayon-52a95706bf0e0184632637-29">
29</div>
<div data-line="crayon-52a95706bf0e0184632637-30">
30</div>
<div data-line="crayon-52a95706bf0e0184632637-31">
31</div>
<div data-line="crayon-52a95706bf0e0184632637-32">
32</div>
<div data-line="crayon-52a95706bf0e0184632637-33">
33</div>
<div data-line="crayon-52a95706bf0e0184632637-34">
34</div>
<div data-line="crayon-52a95706bf0e0184632637-35">
35</div>
<div data-line="crayon-52a95706bf0e0184632637-36">
36</div>
</td><td style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div id="crayon-52a95706bf0e0184632637-1">
<h2 class=”title”>Wordpress Admin like Login Form with CSS3 and jQuery</h2></div>
<div id="crayon-52a95706bf0e0184632637-2">
</div>
<div id="crayon-52a95706bf0e0184632637-3">
<div class=”login”></div>
<div id="crayon-52a95706bf0e0184632637-4">
    <?php</div>
<div id="crayon-52a95706bf0e0184632637-5">
    //add a condition if stat variable is already set</div>
<div id="crayon-52a95706bf0e0184632637-6">
    if(isset($_SESSION['stat']) == 1) : ?></div>
<div id="crayon-52a95706bf0e0184632637-7">
        <form method=”post” action=”logout.php”><fieldset></div>
<div id="crayon-52a95706bf0e0184632637-8">
            <p><?php echo ‘Welcome <strong>’ . $_SESSION['username'] .’</strong>’; ?></p></div>
<div id="crayon-52a95706bf0e0184632637-9">
            <input type=”submit” class=”submit-button” value=”Logout” /></div>
<div id="crayon-52a95706bf0e0184632637-10">
            <input type=”hidden” name=”task” value=”logout” /></div>
<div id="crayon-52a95706bf0e0184632637-11">
        </fieldset></form></div>
<div id="crayon-52a95706bf0e0184632637-12">
    <?php else : ?></div>
<div id="crayon-52a95706bf0e0184632637-13">
        <div class=”message”></div>
<div id="crayon-52a95706bf0e0184632637-14">
            //this display error and success message</div>
<div id="crayon-52a95706bf0e0184632637-15">
            <?php if($errs != “”) { echo ‘<p>’.$errs.’</p>’; } ?></div>
<div id="crayon-52a95706bf0e0184632637-16">
            <?php if($success != “”) { echo ‘<p>’.$success.’</p>’; } ?></div>
<div id="crayon-52a95706bf0e0184632637-17">
            //this get the query log variable if is set or not.</div>
<div id="crayon-52a95706bf0e0184632637-18">
            <?php if(isset($_GET['log']) != “”) { echo ‘<p>You are now logged out.</p>’; } ?></div>
<div id="crayon-52a95706bf0e0184632637-19">
        </div></div>
<div id="crayon-52a95706bf0e0184632637-20">
</div>
<div id="crayon-52a95706bf0e0184632637-21">
        <form method=”post” action=”index.php”></div>
<div id="crayon-52a95706bf0e0184632637-22">
            <p></div>
<div id="crayon-52a95706bf0e0184632637-23">
                <label for=”username”>Username<br /></div>
<div id="crayon-52a95706bf0e0184632637-24">
                <input type=”text” id=”username” name=”username” class=”input” value=”<?php echo (isset($_POST['username']) ? $_POST['username'] : ”) ?>” size=”20″ tabindex=”10″ /></label></div>
<div id="crayon-52a95706bf0e0184632637-25">
            </p></div>
<div id="crayon-52a95706bf0e0184632637-26">
            <p></div>
<div id="crayon-52a95706bf0e0184632637-27">
                <label for=”password”>Password<br /></div>
<div id="crayon-52a95706bf0e0184632637-28">
                <input type=”password” id=”password” name=”password” class=”input” value=”<?php echo (isset($_POST['password']) ? $_POST['password'] : ”) ?>” size=”20″ tabindex=”20″ /></label></div>
<div id="crayon-52a95706bf0e0184632637-29">
            </p></div>
<div id="crayon-52a95706bf0e0184632637-30">
            <p class=”submit”></div>
<div id="crayon-52a95706bf0e0184632637-31">
                <input type=”submit” name=”submit” id=”submit” class=”submit-button” value=”Log In” tabindex=”100″ /></div>
<div id="crayon-52a95706bf0e0184632637-32">
                <input type=”hidden” name=”task” value=”login” /></div>
<div id="crayon-52a95706bf0e0184632637-33">
            </p></div>
<div id="crayon-52a95706bf0e0184632637-34">
        </form></div>
<div id="crayon-52a95706bf0e0184632637-35">
    <?php endif; ?></div>
<div id="crayon-52a95706bf0e0184632637-36">
</div></div>
</td></tr>
</tbody></table>
</div>
</div>
<h3 style="background-color: white; color: #333333; font-family: 'Droid Sans'; font-size: 16px; font-weight: 200; letter-spacing: -0.1px; line-height: 20px; margin-top: 0px; padding: 0px; text-align: justify;">
PHP</h3>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
This <a href="http://websiteat100.com/blog/category/php/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Php blog by websiteat100.com">php </a>script read if the form is being submitted and add <a href="http://websiteat100.com/blog/category/jquery/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Jquery blog by websiteat100.com">jQuery </a>code to shake the login form if one of the fields is not filled in or user is not registered.</div>
<div data-settings=" minimize scroll-mouseover" id="crayon-52a95706bf0e7783950116" style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; text-align: justify;">
<div data-settings=" show">
PHP</div>
<div>
</div>
<div>
<table style="border-collapse: collapse; border-spacing: 0px;"><tbody>
<tr><td data-settings="show" style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div data-line="crayon-52a95706bf0e7783950116-1">
1</div>
<div data-line="crayon-52a95706bf0e7783950116-2">
2</div>
<div data-line="crayon-52a95706bf0e7783950116-3">
3</div>
<div data-line="crayon-52a95706bf0e7783950116-4">
4</div>
<div data-line="crayon-52a95706bf0e7783950116-5">
5</div>
<div data-line="crayon-52a95706bf0e7783950116-6">
6</div>
<div data-line="crayon-52a95706bf0e7783950116-7">
7</div>
<div data-line="crayon-52a95706bf0e7783950116-8">
8</div>
<div data-line="crayon-52a95706bf0e7783950116-9">
9</div>
<div data-line="crayon-52a95706bf0e7783950116-10">
10</div>
<div data-line="crayon-52a95706bf0e7783950116-11">
11</div>
<div data-line="crayon-52a95706bf0e7783950116-12">
12</div>
<div data-line="crayon-52a95706bf0e7783950116-13">
13</div>
<div data-line="crayon-52a95706bf0e7783950116-14">
14</div>
<div data-line="crayon-52a95706bf0e7783950116-15">
15</div>
<div data-line="crayon-52a95706bf0e7783950116-16">
16</div>
<div data-line="crayon-52a95706bf0e7783950116-17">
17</div>
<div data-line="crayon-52a95706bf0e7783950116-18">
18</div>
<div data-line="crayon-52a95706bf0e7783950116-19">
19</div>
<div data-line="crayon-52a95706bf0e7783950116-20">
20</div>
<div data-line="crayon-52a95706bf0e7783950116-21">
21</div>
<div data-line="crayon-52a95706bf0e7783950116-22">
22</div>
<div data-line="crayon-52a95706bf0e7783950116-23">
23</div>
<div data-line="crayon-52a95706bf0e7783950116-24">
24</div>
<div data-line="crayon-52a95706bf0e7783950116-25">
25</div>
<div data-line="crayon-52a95706bf0e7783950116-26">
26</div>
<div data-line="crayon-52a95706bf0e7783950116-27">
27</div>
<div data-line="crayon-52a95706bf0e7783950116-28">
28</div>
<div data-line="crayon-52a95706bf0e7783950116-29">
29</div>
<div data-line="crayon-52a95706bf0e7783950116-30">
30</div>
<div data-line="crayon-52a95706bf0e7783950116-31">
31</div>
<div data-line="crayon-52a95706bf0e7783950116-32">
32</div>
<div data-line="crayon-52a95706bf0e7783950116-33">
33</div>
<div data-line="crayon-52a95706bf0e7783950116-34">
34</div>
<div data-line="crayon-52a95706bf0e7783950116-35">
35</div>
<div data-line="crayon-52a95706bf0e7783950116-36">
36</div>
<div data-line="crayon-52a95706bf0e7783950116-37">
37</div>
<div data-line="crayon-52a95706bf0e7783950116-38">
38</div>
<div data-line="crayon-52a95706bf0e7783950116-39">
39</div>
<div data-line="crayon-52a95706bf0e7783950116-40">
40</div>
</td><td style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div id="crayon-52a95706bf0e7783950116-1">
<?php</div>
<div id="crayon-52a95706bf0e7783950116-2">
    $errs = ”;</div>
<div id="crayon-52a95706bf0e7783950116-3">
    $success = ”;</div>
<div id="crayon-52a95706bf0e7783950116-4">
</div>
<div id="crayon-52a95706bf0e7783950116-5">
    if(isset($_POST['task']) && $_POST['task']==’login’)</div>
<div id="crayon-52a95706bf0e7783950116-6">
    {</div>
<div id="crayon-52a95706bf0e7783950116-7">
        $username = mysql_real_escape_string($_POST['username']);</div>
<div id="crayon-52a95706bf0e7783950116-8">
        $password = mysql_real_escape_string($_POST['password']);</div>
<div id="crayon-52a95706bf0e7783950116-9">
</div>
<div id="crayon-52a95706bf0e7783950116-10">
        if( $username == “” || $password == “”) {</div>
<div id="crayon-52a95706bf0e7783950116-11">
            $errs = ‘Fields are required.’;</div>
<div id="crayon-52a95706bf0e7783950116-12">
</div>
<div id="crayon-52a95706bf0e7783950116-13">
            //add jquery effect to shake our login form ?></div>
<div id="crayon-52a95706bf0e7783950116-14">
            <script type=”text/javascript”></div>
<div id="crayon-52a95706bf0e7783950116-15">
                $(document).ready(function() {</div>
<div id="crayon-52a95706bf0e7783950116-16">
                    $(“.login form”).effect(“shake”, { times: 3 }, 64);</div>
<div id="crayon-52a95706bf0e7783950116-17">
                });</div>
<div id="crayon-52a95706bf0e7783950116-18">
            </script></div>
<div id="crayon-52a95706bf0e7783950116-19">
            <?php</div>
<div id="crayon-52a95706bf0e7783950116-20">
        } else {</div>
<div id="crayon-52a95706bf0e7783950116-21">
            if( $username == “demo” && $password == “demo” ) {</div>
<div id="crayon-52a95706bf0e7783950116-22">
                $_SESSION['username'] = “Demo”;</div>
<div id="crayon-52a95706bf0e7783950116-23">
                $_SESSION['password'] = “demo”;</div>
<div id="crayon-52a95706bf0e7783950116-24">
                $_SESSION['stat'] = 1; //set status to 1</div>
<div id="crayon-52a95706bf0e7783950116-25">
                $success = ‘You\re successfully login.’;</div>
<div id="crayon-52a95706bf0e7783950116-26">
            } else {</div>
<div id="crayon-52a95706bf0e7783950116-27">
                $errs = ‘Invalid Username or Password.’;</div>
<div id="crayon-52a95706bf0e7783950116-28">
</div>
<div id="crayon-52a95706bf0e7783950116-29">
                //add jquery effect to shake our login form ?></div>
<div id="crayon-52a95706bf0e7783950116-30">
                <script type=”text/javascript”></div>
<div id="crayon-52a95706bf0e7783950116-31">
                    $(document).ready(function() {</div>
<div id="crayon-52a95706bf0e7783950116-32">
                        $(“.login form”).effect(“shake”, { times: 3 }, 64);</div>
<div id="crayon-52a95706bf0e7783950116-33">
                    });</div>
<div id="crayon-52a95706bf0e7783950116-34">
                </script></div>
<div id="crayon-52a95706bf0e7783950116-35">
                <?php</div>
<div id="crayon-52a95706bf0e7783950116-36">
            }</div>
<div id="crayon-52a95706bf0e7783950116-37">
</div>
<div id="crayon-52a95706bf0e7783950116-38">
        }</div>
<div id="crayon-52a95706bf0e7783950116-39">
    }</div>
<div id="crayon-52a95706bf0e7783950116-40">
?></div>
</td></tr>
</tbody></table>
</div>
</div>
<h3 style="background-color: white; color: #333333; font-family: 'Droid Sans'; font-size: 16px; font-weight: 200; letter-spacing: -0.1px; line-height: 20px; margin-top: 0px; padding: 0px; text-align: justify;">
CSS</h3>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
To look our login form like in <a href="http://websiteat100.com/blog/category/wordpress/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Wordpress blog by websiteat100.com">WordPress </a>Admin lets add <a href="http://websiteat100.com/blog/category/html5-and-css3/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Css blog by websiteat100.com">CSS </a>code.</div>
<div data-settings=" minimize scroll-mouseover" id="crayon-52a95706bf0ee226364240" style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; text-align: justify;">
<div data-settings=" show">
CSS</div>
<div>
</div>
<div>
<table style="border-collapse: collapse; border-spacing: 0px;"><tbody>
<tr><td data-settings="show" style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div data-line="crayon-52a95706bf0ee226364240-1">
1</div>
<div data-line="crayon-52a95706bf0ee226364240-2">
2</div>
<div data-line="crayon-52a95706bf0ee226364240-3">
3</div>
<div data-line="crayon-52a95706bf0ee226364240-4">
4</div>
<div data-line="crayon-52a95706bf0ee226364240-5">
5</div>
<div data-line="crayon-52a95706bf0ee226364240-6">
6</div>
<div data-line="crayon-52a95706bf0ee226364240-7">
7</div>
<div data-line="crayon-52a95706bf0ee226364240-8">
8</div>
<div data-line="crayon-52a95706bf0ee226364240-9">
9</div>
<div data-line="crayon-52a95706bf0ee226364240-10">
10</div>
<div data-line="crayon-52a95706bf0ee226364240-11">
11</div>
<div data-line="crayon-52a95706bf0ee226364240-12">
12</div>
<div data-line="crayon-52a95706bf0ee226364240-13">
13</div>
<div data-line="crayon-52a95706bf0ee226364240-14">
14</div>
<div data-line="crayon-52a95706bf0ee226364240-15">
15</div>
<div data-line="crayon-52a95706bf0ee226364240-16">
16</div>
<div data-line="crayon-52a95706bf0ee226364240-17">
17</div>
<div data-line="crayon-52a95706bf0ee226364240-18">
18</div>
<div data-line="crayon-52a95706bf0ee226364240-19">
19</div>
<div data-line="crayon-52a95706bf0ee226364240-20">
20</div>
<div data-line="crayon-52a95706bf0ee226364240-21">
21</div>
<div data-line="crayon-52a95706bf0ee226364240-22">
22</div>
<div data-line="crayon-52a95706bf0ee226364240-23">
23</div>
<div data-line="crayon-52a95706bf0ee226364240-24">
24</div>
<div data-line="crayon-52a95706bf0ee226364240-25">
25</div>
<div data-line="crayon-52a95706bf0ee226364240-26">
26</div>
<div data-line="crayon-52a95706bf0ee226364240-27">
27</div>
<div data-line="crayon-52a95706bf0ee226364240-28">
28</div>
<div data-line="crayon-52a95706bf0ee226364240-29">
29</div>
<div data-line="crayon-52a95706bf0ee226364240-30">
30</div>
<div data-line="crayon-52a95706bf0ee226364240-31">
31</div>
<div data-line="crayon-52a95706bf0ee226364240-32">
32</div>
<div data-line="crayon-52a95706bf0ee226364240-33">
33</div>
<div data-line="crayon-52a95706bf0ee226364240-34">
34</div>
<div data-line="crayon-52a95706bf0ee226364240-35">
35</div>
<div data-line="crayon-52a95706bf0ee226364240-36">
36</div>
<div data-line="crayon-52a95706bf0ee226364240-37">
37</div>
<div data-line="crayon-52a95706bf0ee226364240-38">
38</div>
<div data-line="crayon-52a95706bf0ee226364240-39">
39</div>
<div data-line="crayon-52a95706bf0ee226364240-40">
40</div>
<div data-line="crayon-52a95706bf0ee226364240-41">
41</div>
<div data-line="crayon-52a95706bf0ee226364240-42">
42</div>
<div data-line="crayon-52a95706bf0ee226364240-43">
43</div>
<div data-line="crayon-52a95706bf0ee226364240-44">
44</div>
<div data-line="crayon-52a95706bf0ee226364240-45">
45</div>
<div data-line="crayon-52a95706bf0ee226364240-46">
46</div>
<div data-line="crayon-52a95706bf0ee226364240-47">
47</div>
<div data-line="crayon-52a95706bf0ee226364240-48">
48</div>
<div data-line="crayon-52a95706bf0ee226364240-49">
49</div>
<div data-line="crayon-52a95706bf0ee226364240-50">
50</div>
<div data-line="crayon-52a95706bf0ee226364240-51">
51</div>
<div data-line="crayon-52a95706bf0ee226364240-52">
52</div>
<div data-line="crayon-52a95706bf0ee226364240-53">
53</div>
<div data-line="crayon-52a95706bf0ee226364240-54">
54</div>
<div data-line="crayon-52a95706bf0ee226364240-55">
55</div>
<div data-line="crayon-52a95706bf0ee226364240-56">
56</div>
<div data-line="crayon-52a95706bf0ee226364240-57">
57</div>
<div data-line="crayon-52a95706bf0ee226364240-58">
58</div>
<div data-line="crayon-52a95706bf0ee226364240-59">
59</div>
<div data-line="crayon-52a95706bf0ee226364240-60">
60</div>
<div data-line="crayon-52a95706bf0ee226364240-61">
61</div>
<div data-line="crayon-52a95706bf0ee226364240-62">
62</div>
<div data-line="crayon-52a95706bf0ee226364240-63">
63</div>
<div data-line="crayon-52a95706bf0ee226364240-64">
64</div>
<div data-line="crayon-52a95706bf0ee226364240-65">
65</div>
<div data-line="crayon-52a95706bf0ee226364240-66">
66</div>
<div data-line="crayon-52a95706bf0ee226364240-67">
67</div>
<div data-line="crayon-52a95706bf0ee226364240-68">
68</div>
<div data-line="crayon-52a95706bf0ee226364240-69">
69</div>
<div data-line="crayon-52a95706bf0ee226364240-70">
70</div>
<div data-line="crayon-52a95706bf0ee226364240-71">
71</div>
<div data-line="crayon-52a95706bf0ee226364240-72">
72</div>
<div data-line="crayon-52a95706bf0ee226364240-73">
73</div>
<div data-line="crayon-52a95706bf0ee226364240-74">
74</div>
<div data-line="crayon-52a95706bf0ee226364240-75">
75</div>
<div data-line="crayon-52a95706bf0ee226364240-76">
76</div>
<div data-line="crayon-52a95706bf0ee226364240-77">
77</div>
<div data-line="crayon-52a95706bf0ee226364240-78">
78</div>
<div data-line="crayon-52a95706bf0ee226364240-79">
79</div>
<div data-line="crayon-52a95706bf0ee226364240-80">
80</div>
<div data-line="crayon-52a95706bf0ee226364240-81">
81</div>
<div data-line="crayon-52a95706bf0ee226364240-82">
82</div>
<div data-line="crayon-52a95706bf0ee226364240-83">
83</div>
</td><td style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div id="crayon-52a95706bf0ee226364240-1">
.login * {</div>
<div id="crayon-52a95706bf0ee226364240-2">
    margin: 0;</div>
<div id="crayon-52a95706bf0ee226364240-3">
    padding: 0;</div>
<div id="crayon-52a95706bf0ee226364240-4">
}</div>
<div id="crayon-52a95706bf0ee226364240-5">
.title{</div>
<div id="crayon-52a95706bf0ee226364240-6">
    font: italic 26px Georgia;</div>
<div id="crayon-52a95706bf0ee226364240-7">
    margin-bottom: 20px;</div>
<div id="crayon-52a95706bf0ee226364240-8">
        margin: auto;</div>
<div id="crayon-52a95706bf0ee226364240-9">
}</div>
<div id="crayon-52a95706bf0ee226364240-10">
</div>
<div id="crayon-52a95706bf0ee226364240-11">
.login{</div>
<div id="crayon-52a95706bf0ee226364240-12">
    width: 320px;</div>
<div id="crayon-52a95706bf0ee226364240-13">
    padding: 20px 0 0;</div>
<div id="crayon-52a95706bf0ee226364240-14">
    margin: auto;</div>
<div id="crayon-52a95706bf0ee226364240-15">
}</div>
<div id="crayon-52a95706bf0ee226364240-16">
.login label {</div>
<div id="crayon-52a95706bf0ee226364240-17">
    color: #777;</div>
<div id="crayon-52a95706bf0ee226364240-18">
    font-size: 14px;</div>
<div id="crayon-52a95706bf0ee226364240-19">
    cursor: pointer;</div>
<div id="crayon-52a95706bf0ee226364240-20">
}</div>
<div id="crayon-52a95706bf0ee226364240-21">
</div>
<div id="crayon-52a95706bf0ee226364240-22">
.login form {</div>
<div id="crayon-52a95706bf0ee226364240-23">
    margin-left: 8px;</div>
<div id="crayon-52a95706bf0ee226364240-24">
    padding: 24px 20px 46px;</div>
<div id="crayon-52a95706bf0ee226364240-25">
    font-weight: normal;</div>
<div id="crayon-52a95706bf0ee226364240-26">
    background: white;</div>
<div id="crayon-52a95706bf0ee226364240-27">
    border: 1px solid #E5E5E5;</div>
<div id="crayon-52a95706bf0ee226364240-28">
</div>
<div id="crayon-52a95706bf0ee226364240-29">
    /* add login box shadow  */</div>
<div id="crayon-52a95706bf0ee226364240-30">
    -moz-box-shadow: rgba(200,200,200,0.7) 0 4px 10px -1px;  /*for Mozilla*/</div>
<div id="crayon-52a95706bf0ee226364240-31">
    -webkit-box-shadow: rgba(200,200,200,0.7) 0 4px 10px -1px; /*for Chrome and Safari*/</div>
<div id="crayon-52a95706bf0ee226364240-32">
    box-shadow: rgba(200,200,200,0.7) 0 4px 10px -1px;</div>
<div id="crayon-52a95706bf0ee226364240-33">
}</div>
<div id="crayon-52a95706bf0ee226364240-34">
</div>
<div id="crayon-52a95706bf0ee226364240-35">
.login form .input {</div>
<div id="crayon-52a95706bf0ee226364240-36">
    font-weight: 200;</div>
<div id="crayon-52a95706bf0ee226364240-37">
    font-size: 24px;</div>
<div id="crayon-52a95706bf0ee226364240-38">
    line-height: 1;</div>
<div id="crayon-52a95706bf0ee226364240-39">
    width: 100%;</div>
<div id="crayon-52a95706bf0ee226364240-40">
    padding: 3px;</div>
<div id="crayon-52a95706bf0ee226364240-41">
    margin-top: 2px;</div>
<div id="crayon-52a95706bf0ee226364240-42">
    margin-right: 6px;</div>
<div id="crayon-52a95706bf0ee226364240-43">
    margin-bottom: 16px;</div>
<div id="crayon-52a95706bf0ee226364240-44">
    border: 1px solid #E5E5E5;</div>
<div id="crayon-52a95706bf0ee226364240-45">
    background: #FBFBFB;</div>
<div id="crayon-52a95706bf0ee226364240-46">
    outline: none;</div>
<div id="crayon-52a95706bf0ee226364240-47">
</div>
<div id="crayon-52a95706bf0ee226364240-48">
    /* add input box a inset shadow  */</div>
<div id="crayon-52a95706bf0ee226364240-49">
    -moz-box-shadow: inset 1px 1px 2px rgba(200,200,200,0.2); /*for Mozilla*/</div>
<div id="crayon-52a95706bf0ee226364240-50">
    -webkit-box-shadow: inset 1px 1px 2px rgba(200,200,200,0.2); /*for Chrome and Safari*/</div>
<div id="crayon-52a95706bf0ee226364240-51">
    box-shadow: inset 1px 1px 2px rgba(200,200,200,0.2);</div>
<div id="crayon-52a95706bf0ee226364240-52">
}</div>
<div id="crayon-52a95706bf0ee226364240-53">
</div>
<div id="crayon-52a95706bf0ee226364240-54">
input.submit-button {</div>
<div id="crayon-52a95706bf0ee226364240-55">
    float: right;</div>
<div id="crayon-52a95706bf0ee226364240-56">
    border: 1px solid #298CBA;</div>
<div id="crayon-52a95706bf0ee226364240-57">
    font-weight: bold;</div>
<div id="crayon-52a95706bf0ee226364240-58">
    color: white;</div>
<div id="crayon-52a95706bf0ee226364240-59">
    background: #21759B;</div>
<div id="crayon-52a95706bf0ee226364240-60">
    text-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0;</div>
<div id="crayon-52a95706bf0ee226364240-61">
    padding: 3px 10px;</div>
<div id="crayon-52a95706bf0ee226364240-62">
    cursor: pointer;</div>
<div id="crayon-52a95706bf0ee226364240-63">
</div>
<div id="crayon-52a95706bf0ee226364240-64">
    /* add submit button a rounded corner */</div>
<div id="crayon-52a95706bf0ee226364240-65">
    -o-border-radius: 10em;  /*for opera*/</div>
<div id="crayon-52a95706bf0ee226364240-66">
    -khtml-border-radius: 10em;</div>
<div id="crayon-52a95706bf0ee226364240-67">
    -webkit-border-radius: 10em;</div>
<div id="crayon-52a95706bf0ee226364240-68">
    border-radius: 10em;</div>
<div id="crayon-52a95706bf0ee226364240-69">
</div>
<div id="crayon-52a95706bf0ee226364240-70">
</div>
<div id="crayon-52a95706bf0ee226364240-71">
    /* add background gradient effet */</div>
<div id="crayon-52a95706bf0ee226364240-72">
    /*for Chrome and Safari*/</div>
<div id="crayon-52a95706bf0ee226364240-73">
    background: -webkit-gradient(linear, left top, left bottom, from(#298CBA), to(#217096));</div>
<div id="crayon-52a95706bf0ee226364240-74">
</div>
<div id="crayon-52a95706bf0ee226364240-75">
    /*for Mozilla*/</div>
<div id="crayon-52a95706bf0ee226364240-76">
    background: -moz-linear-gradient(top,  #298CBA,  #217096);</div>
<div id="crayon-52a95706bf0ee226364240-77">
</div>
<div id="crayon-52a95706bf0ee226364240-78">
    /*for IE*/</div>
<div id="crayon-52a95706bf0ee226364240-79">
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#298CBA’, endColorstr=’#217096′);</div>
<div id="crayon-52a95706bf0ee226364240-80">
</div>
<div id="crayon-52a95706bf0ee226364240-81">
}</div>
<div id="crayon-52a95706bf0ee226364240-82">
</div>
<div id="crayon-52a95706bf0ee226364240-83">
input.submit-button:hover { border: 1px solid #000; }</div>
</td></tr>
</tbody></table>
</div>
</div>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
If you want to send inputted data using Ajax, visit <strong style="line-height: inherit;"><a href="http://websiteat100.com/blog/category/php/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Php blog by websiteat100.com">PHP </a>and MySql Comment Form without Refreshing Page with<a href="http://websiteat100.com/blog/category/jquery/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Jquery blog by websiteat100.com">jQuery</a></strong>, which might help you.</div>
</div>

WORDPRESS ADMIN-LIKE LOGIN FORM WITH CSS3 AND JQUERY

I was a bit amazed in the WordPress Admin Login Form that shake if the inputted login information is wrong or if the user is not regist...