Website At 100: Email

HOW TO ADD “SEND ARTICLE TO A FRIEND” BUTTON IN WORDPRESS

<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;">
Few months ago I’ve posted a complete way to <strong style="line-height: inherit;">Send Article to your friend</strong> 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>, yeah it’s quite long and recommended for advance user only. Today I will give you another quick way to send your post by email, this also help your site get high organic traffic by sending great and valuable tutorial to anyone’s friend.</div>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
As usual we’re going to implement the functionality using <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>Shortcode, if you didn’t know shortcode yet please visit <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>Codex to know more about.</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;">
Copy and paste this snippet into your functions.<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>of your current theme, if you don’t have functions.php yet, please create a new one.</div>
<div data-settings=" minimize scroll-mouseover" id="crayon-52a6b30a15d68029606823" 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-52a6b30a15d68029606823-1">
1</div>
<div data-line="crayon-52a6b30a15d68029606823-2">
2</div>
<div data-line="crayon-52a6b30a15d68029606823-3">
3</div>
<div data-line="crayon-52a6b30a15d68029606823-4">
4</div>
<div data-line="crayon-52a6b30a15d68029606823-5">
5</div>
<div data-line="crayon-52a6b30a15d68029606823-6">
6</div>
<div data-line="crayon-52a6b30a15d68029606823-7">
7</div>
<div data-line="crayon-52a6b30a15d68029606823-8">
8</div>
<div data-line="crayon-52a6b30a15d68029606823-9">
9</div>
<div data-line="crayon-52a6b30a15d68029606823-10">
10</div>
<div data-line="crayon-52a6b30a15d68029606823-11">
11</div>
<div data-line="crayon-52a6b30a15d68029606823-12">
12</div>
<div data-line="crayon-52a6b30a15d68029606823-13">
13</div>
<div data-line="crayon-52a6b30a15d68029606823-14">
14</div>
<div data-line="crayon-52a6b30a15d68029606823-15">
15</div>
</td><td style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div id="crayon-52a6b30a15d68029606823-1">
add_shortcode(‘send_to_friend’, ‘email_to_friend’);</div>
<div id="crayon-52a6b30a15d68029606823-2">
function email_to_friend($atts)</div>
<div id="crayon-52a6b30a15d68029606823-3">
{</div>
<div id="crayon-52a6b30a15d68029606823-4">
    global $post;</div>
<div id="crayon-52a6b30a15d68029606823-5">
    extract(shortcode_atts(array(</div>
<div id="crayon-52a6b30a15d68029606823-6">
        ’anchor_text’ => ‘Send to Friend’,</div>
<div id="crayon-52a6b30a15d68029606823-7">
    ), $atts));</div>
<div id="crayon-52a6b30a15d68029606823-8">
</div>
<div id="crayon-52a6b30a15d68029606823-9">
    $post_title = htmlspecialchars( $post->post_title );</div>
<div id="crayon-52a6b30a15d68029606823-10">
    $email_subject = ‘Sur ‘.htmlspecialchars(get_bloginfo(‘name’)).’ : ‘.$post_title;</div>
<div id="crayon-52a6b30a15d68029606823-11">
    $email_body = ‘I recommend this page : ‘.$title.’. You can read it on : ‘.get_permalink($post->ID);</div>
<div id="crayon-52a6b30a15d68029606823-12">
    $send_button = ‘<a rel=”nofollow” href=”mailto:?subject=’.rawurlencode($email_subject).’&amp;body=’.rawurlencode($email_body).’” title=”‘.$anchor_text.’ : ‘.$title.’”>’.$text.’</a>’;</div>
<div id="crayon-52a6b30a15d68029606823-13">
</div>
<div id="crayon-52a6b30a15d68029606823-14">
    return $send_button;</div>
<div id="crayon-52a6b30a15d68029606823-15">
}</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;">
 How to use the shortcode?</div>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
Put this shortcode into your posts or pages</div>
<div data-settings=" minimize scroll-mouseover" id="crayon-52a6b30a15d72757560318" 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-52a6b30a15d72757560318-1">
1</div>
</td><td style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div id="crayon-52a6b30a15d72757560318-1">
[send_to_friend]</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;">
Template Tag</h3>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
If ever you want to use the button in your theme .php file, use the code below.</div>
<div data-settings=" minimize scroll-mouseover" id="crayon-52a6b30a15d78793168009" style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; text-align: justify;">
<div data-settings=" show">
<div title="Toggle Line Numbers">
 PHP</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-52a6b30a15d78793168009-1">
1</div>
</td><td style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div id="crayon-52a6b30a15d78793168009-1">
<?php echo do_shortcode(‘[send_to_friend]‘); ?></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 wish to change the anchor text by using the shortcode, just edit the above shortcode to this</div>
<div data-settings=" minimize scroll-mouseover" id="crayon-52a6b30a15d7d233616834" style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; text-align: justify;">
<div data-settings=" show">
<div title="Toggle Line Numbers">
PHP</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-52a6b30a15d7d233616834-1">
1</div>
</td><td style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div id="crayon-52a6b30a15d7d233616834-1">
[send_to_friend anchor_text="Send by Email"]</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 article useful</div>
</div>

HOW TO ADD “SEND ARTICLE TO A FRIEND” BUTTON IN WORDPRESS

Few months ago I’ve posted a complete way to Send Article to your friend using jQuery , yeah it’s quite long and recommended for advanc...

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 ...

RS CONTACT

<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;">
RS Contact is a simple <a href="http://websiteat100.com/blog/category/joomla/" 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="Joomla blog by websiteat100.com">Joomla </a>Contact Modules, that let your visitors contact you directly with this FREE extensions, It is fast, lightweight and easy to configure, You can also add information directly in admin panel using module Pre text parameter and lot more.</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;">
Features</h3>
<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;">Captcha Option</li>
<li style="list-style-position: outside; margin-bottom: 20px;">Random Captcha</li>
<li style="list-style-position: outside; margin-bottom: 20px;">Default Captcha</li>
<li style="list-style-position: outside; margin-bottom: 20px;">Editable Default Captcha Question and Answer</li>
<li style="list-style-position: outside; margin-bottom: 20px;">Editable CSS style</li>
<li style="list-style-position: outside; margin-bottom: 20px;">Editable Pre text before the form</li>
<li style="list-style-position: outside; margin-bottom: 20px;">Editable redirect message</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;">
Download Modules</h3>
<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;">Download Module for J1.5</li>
<li style="list-style-position: outside; margin-bottom: 20px;">Download Module for J1.6</li>
<li style="list-style-position: outside; margin-bottom: 20px;">Download Module for J1.7</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;">
Note:</h3>
<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’re using latest version of Joomla like 2.x, download module for <a href="http://websiteat100.com/blog/category/joomla/" 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="Joomla blog by websiteat100.com">Joomla </a>1.7 version.</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;">
Donation</h3>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
Thanks for using RS Login. You can show your appreciation and support for future development by</div>
</div>

RS CONTACT

RS Contact is a simple Joomla Contact Modules, that let your visitors contact you directly with this FREE extensions, It is fast, lightw...