Vipin Freelance Web Designer

How to create PHP Contact Form with Validations in HTML and Ajax

noreply@blogger.com (Freelance Web Designer) — Tue, 28 Apr 2020 07:10:00 +0000

Contact form is a best way to get feedback or contact with your visitors. Every website needs a contact form because visitors feel easy to send emails through contact forms. So I decided to share a small tutorial / Code of professional Contact form with you. Normal contact form is creating in HTML and sending emails using PHP mail function. There are different methods to prevent wrong / incomplete and invalid submissions of form by validating our form fields. We can use JavaScript and JQuery to validate our contact form. So let’s begin to creating our form now.

Demo of Contact form :

Before start to design a Contact form, see demo to take an idea what actually we are going to make.

See Demo of Contact form

Step 1 : Create Simple Contact form in HTML

First of all we create a simple form with basic required fields in Html. Create Contact.html file and paste this code in it.

<html>
 <head>
 <title>Contact Form in Html with Ajax Validation - webdesignseotips.com</title>
 <link rel="stylesheet" type="text/css" href="css/style.css">
 <meta name="description" content="This is a Professional Contact Form build in Html and Ajax. It validates all the form fields without refreshing the Page or form fields.">
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
 <script type='text/javascript' src="js/validation.js"></script>
 </head>
 <body>
 <div id='container'>
 <form name="contactForm" id='contact_form' method="post" action='email.php'>
 <h2>Contact Form with Validations in HTML and Ajax</h2>
 <h3>When you Press Submit Button, Email will be send to your Entered Email Id</h3>
 <p> Your Name:
 <div id='name_error' class='error'><img src='images/error.png'>Please enter your name.</div>
 <div>
 <input type='text' name='name' id='name' placeholder="Enter Your Name Here">
 </div>
 </p>
 <p> Your Email ID:
 <div id='email_error' class='error'><img src='images/error.png'>Please enter your valid Email Address.</div>
 <div>
 <input type='text' name='email' id='email' placeholder="Enter Your Email ID Here">
 <div>
 </p>
 <p> Subject:
 <div id='subject_error' class='error'><img src='images/error.png'>Please enter Email Subject.</div>
 <div>
 <input type='text' name='subject' id='subject' placeholder="Enter Your Subject Here">
 </div>
 </p>
 <p> Your Message:
 <div id='message_error' class='error'><img src='images/error.png'>Please enter your message.</div>
 <div>
 <textarea name='message' id='message' placeholder="Enter Your Message Here"></textarea>
 </div>
 </p>
 <div id='mail_success' class='success'><img src='images/success.png'>Your message has been sent successfully.</div>
 <div id='mail_fail' class='error'><img src='images/error.png'> Sorry, error occured this time sending your message.</div>
 <p id='submit' align="center">
 <input type='submit' id='send_message' value='Submit Form'>
 <input type='reset' id='send_message' value='Reset Form'>
 </p>
</form>
 </div>
 </body>
 </html>

This is a simple form in Html but I also add some images codes in it to make it more beautiful and professional. In the head section I create links with external css style sheet file and JavaScript file. These files not created yet, we will create them later. You see we give form action to email.php file, so now we create this file to make our form working.

Step 2 : Add Sending Functionality in Contact form by Using PHP mail function

To make our form working , we need to create a PHP file where we create some variables to store fields data and then send them to the required email id using PHP mail function. So create another file with .php extension named as email.php and paste this code in the file.

<?php
 $subject = $_REQUEST['subject'] . ' Ajax HTML Contact Form : Demo'; // Subject of your email
 $to = $_REQUEST['email']; //Recipient's E-mail
$headers = 'MIME-Version: 1.0' . "\r\n";
 $headers .= "From: " . $_REQUEST['email'] . "\r\n"; // Sender's E-mail
 $headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
$message .= 'Name: ' . $_REQUEST['name'] . "<br>";
 $message .= $_REQUEST['message'];
if (@mail($to, $subject, $message, $headers))
 {
 // Transfer the value 'sent' to ajax function for showing success message.
 echo 'sent';
 }
 else
 {
 // Transfer the value 'failed' to ajax function for showing error message.
 echo 'failed';
 }
 ?>

Now form is ready but we add some css code to design it.

Step 3 : Design Our form using CSS

Create a new folder with name “css” and then create new file names as style.css (with .css extension). This is our external style sheet which is already linked with our form. Now Paste below Code in this file.

body {
 background:#C1CFF7;
 }
 #container {
 font-family:Arial;
 width:400px;
 padding:0;
 margin:0 auto;
 }
 #container h2 {
 font-variant:small-caps;
 font-weight:normal;
}
 #container h3 {
 font-size:14px;
 font-weight:normal;
}
 #container p {
 font-weight:normal;
}
 #container input, #container textarea {
 width:100%;
 font-family:inherit;
 padding:5px;
 border:1px solid #3399FF;
 }
 #container textarea {
 height:100px;
 border:1px solid #3399FF;
 }
 #send_message {
 width:200px !important;
 font-variant: small-caps;
 border:none;
 cursor:pointer;
 background:#3399FF;
 color:#FFFFFF;
 }
 #submit {
 text-align:left;
 }
.error {
 display: none;
 padding:10px;
 margin:0 0 5px 0;
 color: #D8000C;
 font-size:12px;
 background-color: #FFBABA;
 }
 .success {
 display: none;
 padding:10px;
 color: #044406;
 font-size:12px;
 background-color: #B7FBB9;
 }
.error img {
 vertical-align:top;
 }

You can customize its design in CSS according to your needs.

Step 4 : Validate Our Form Fields in JavaScript

Now we validate our form using JavaScript and Jquery (Libraries of JavaScript). Create another new file in Your Notepad++ or any other editor you are using and save it with extension .js and named as validation.js and save it in a new folder named as ”js” and paste this code in the validation.js file.

$(document).ready(function(){
 $('#send_message').click(function(e){
//Stop form submission & check the validation
 e.preventDefault();
// Variable declaration
 var error = false;
 var name = $('#name').val();
 var email = $('#email').val();
 var subject = $('#subject').val();
 var message = $('#message').val();
// Form field validation
 if(name.length == 0){
 var error = true;
 $('#name_error').fadeIn(500);
 }else{
 $('#name_error').fadeOut(500);
 }
 if(email.length == 0 || email.indexOf('@') == '-1'){
 var error = true;
 $('#email_error').fadeIn(500);
 }else{
 $('#email_error').fadeOut(500);
 }
 if(subject.length == 0){
 var error = true;
 $('#subject_error').fadeIn(500);
 }else{
 $('#subject_error').fadeOut(500);
 }
 if(message.length == 0){
 var error = true;
 $('#message_error').fadeIn(500);
 }else{
 $('#message_error').fadeOut(500);
 }
// If there is no validation error, next to process the mail function
 if(error == false){
 // Disable submit button just after the form processed 1st time successfully.
 $('#send_message').attr({'disabled' : 'true', 'value' : 'Sending...' });
/* Post Ajax function of jQuery to get all the data from the submission of the form as soon as the form sends the values to email.php*/
 $.post("email.php", $("#contact_form").serialize(),function(result){
 //Check the result set from email.php file.
 if(result == 'sent'){
 //If the email is sent successfully, remove the submit button
 $('#submit').remove();
 //Display the success message
 $('#mail_success').fadeIn(500);
 }else{
 //Display the error message
 $('#mail_fail').fadeIn(500);
 // Enable the submit button again
 $('#send_message').removeAttr('disabled').attr('value', 'Send The Message');
 }
 });
 }
 });
 });

We use some Jquery libraries in this file, so you must add Jquery file with it. Click here to Download file and place it in same folder (in js folder). We also use three images to make our form more beautiful and professional, which are saved in new folder named as “images” which is also attached in the source file given at the end.

Now Your form is ready to use. Simply Open Contact.html file in your browser and run it. Upload all the files on your server to test the working of this form. Although we create this form for professional use and I am giving you extra explanation of the working of form but next time we create simple form for learning form working. You can use this form for your websites. source code of all the files is given below to download.

Download Source files

Create Professional and Advance Dropdown Menu in Jquery

noreply@blogger.com (Freelance Web Designer) — Tue, 28 Apr 2020 06:35:00 +0000

Just few days ago we learn to create simple Horizontal and vertical drop-down menu in CSS that was just for giving you an idea to create simple side bar and horizontal sub-menu but today we are going to create professional and advance menu. When you visit big websites like Facebook, LinkedIn, Google+ or Yahoo, notice that they use advance Jquery menu for account settings and user sign-out etc. So we create that type of professional drop-down menu for our website. Before start tutorial you must see the Live Demo so that you can understand what actually we are going to create .

Creating Basic Structure in HTML

Create new file write simple HTML Code as below, and save that file with extension .html :

<html>
<head><title>Create drop-down Menu using Jquery and JavaScript</title></head>
<div align=”center”>
<h3>jQuery Dropdown – Click on My Account below</h3>
<form action=”#” method=”post” style=”width:119px; height:160px; padding:30px;” >

<div class=”dropdown”>
<a class=”mainmenu toggle-login”>My Account <span class=”icon”>?</span></a>

<div class=”submenu”>
<ul class=”menuitems”>
<li ><a href=”#”>Advertising</a></li>
<li ><a href=”#”>Account setting</a></li>
<li ><a href=”#”>Privacy setting</a></li>
<li ><a href=”#”>Logout</a></li> <hr>
<li ><a href=”#”>Help</a></li>
</ul>
</div>
</div>
</form>
</div>

</body>
</html>

I hope you understand this simple code as already well explained in our previous tutorials. we use unordered-list to create menu items. We use one extra thing above that is “?” in class icon, we actually convert this icon into beautiful small triangle with the help of css. This Icon is used to Show and Hide (Toggle) our menu items.

Give Styling to Menu in CSS

Now we give some styling and positioning to our menu and list items. You may use external style sheet or paste this css code in <head> tag. CSS code is given below :

body {
}
.dropdown
{
color: #555;
margin: 3px -22px 0 0;
width: 143px;
position: relative;
height: 17px;
text-align:left;
}
.submenu
{
background: #fff;
position: absolute;
top: -12px;
left: -20px;
z-index: 100;
width: 135px;
display: none;
margin-left: 10px;
padding: 40px 0 5px;
border-radius: 6px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
.dropdown li a
{
color: #555555;
display: block;
font-family: “Arial”, Georgia;
padding: 6px 15px;
cursor: pointer;
text-decoration:none;
}

.dropdown li a:hover
{
background:#3B5998;
color: #FFFFFF;
text-decoration: none;
}
a.mainmenu
{
font-size: 14px;
line-height: 16px;
color: #555;
position: absolute;
z-index: 110;
display: block;
padding: 11px 0 0 20px;
height: 28px;
width: 121px;
margin: -11px 0 0 -10px;
text-decoration: none;
background: url(icons/arrow.png) 116px 17px no-repeat;
cursor:pointer;
}
.menuitems
{
list-style:none;
margin:0px;
padding:0px;
font-size: 11px;
padding: 11px 0 0 0px;
border-top:1px solid #dedede;
}

.icon{
color: #0099FF;
}
.toggle-login
{
display: inline-block;
*display: inline;
*zoom: 1;
height: 25px;
line-height: 25px;
font-weight: bold;
padding: 0 8px;
text-decoration: none;
text-shadow: 0 1px 0 #fff;
}

Using Jquery to Create Advance Drop-down Menu

First of all before using Jquery you must include Jquery library in your <head> section. Jquery is actually an advance library of JavaScript which has built-in functions. We call that functions as per need. So add Jquery link as :

<head>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script>
</head>

That’s it. Now add this JavaScript Code in your body section :

<script type=”text/javascript”>
$(document).ready(function () {
$(‘.toggle-login’).click(function () {
$(this).next(‘#login-content’).slideToggle();
$(this).toggleClass(‘active’);

if ($(this).hasClass(‘active’)) $(this).find(‘span’).html(‘▲’)
else $(this).find(‘span’).html(‘▼’)
})
});

$(document).ready(function () {

$(“.mainmenu”).click(function () {
var X = $(this).attr(‘id’);
if (X == 1) {
$(“.submenu”).hide();
$(this).attr(‘id’, ’0′);
}
else {
$(“.submenu”).show();
$(this).attr(‘id’, ’1′);
}
});
$(“.submenu”).mouseup(function () {
return false
});
$(“.mainmenu”).mouseup(function () {
return false
});
$(document).mouseup(function () {
$(“.submenu”).hide();
$(“.mainmenu”).attr(‘id’, ”);
});
});

</script>

Final Code

Now that’s all. I am giving you final code in one file to review. Just Copy/Paste this code in any html file and see the output.

<html>
<head>
<style>
body {
}
.dropdown
{
color: #555;
margin: 3px -22px 0 0;
width: 143px;
position: relative;
height: 17px;
text-align:left;
}
.submenu
{
background: #fff;
position: absolute;
top: -12px;
left: -20px;
z-index: 100;
width: 135px;
display: none;
margin-left: 10px;
padding: 40px 0 5px;
border-radius: 6px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
.dropdown li a
{
color: #555555;
display: block;
font-family: “Arial”, Georgia;
padding: 6px 15px;
cursor: pointer;
text-decoration:none;
}

.dropdown li a:hover
{
background:#3B5998;
color: #FFFFFF;
text-decoration: none;
}
a.mainmenu
{
font-size: 14px;
line-height: 16px;
color: #555;
position: absolute;
z-index: 110;
display: block;
padding: 11px 0 0 20px;
height: 28px;
width: 121px;
margin: -11px 0 0 -10px;
text-decoration: none;
background: url(icons/arrow.png) 116px 17px no-repeat;
cursor:pointer;
}
.menuitems
{
list-style:none;
margin:0px;
padding:0px;
font-size: 11px;
padding: 11px 0 0 0px;
border-top:1px solid #dedede;
}

.icon{
color: #0099FF;
}
.toggle-login
{
display: inline-block;
*display: inline;
*zoom: 1;
height: 25px;
line-height: 25px;
font-weight: bold;
padding: 0 8px;
text-decoration: none;
text-shadow: 0 1px 0 #fff;
}
</style>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script>
</head>
<body>
<script type=”text/javascript”>
$(document).ready(function () {
$(‘.toggle-login’).click(function () {
$(this).next(‘#login-content’).slideToggle();
$(this).toggleClass(‘active’);

if ($(this).hasClass(‘active’)) $(this).find(‘span’).html(‘▲’)
else $(this).find(‘span’).html(‘▼’)
})
});

$(document).ready(function () {

$(“.mainmenu”).click(function () {
var X = $(this).attr(‘id’);
if (X == 1) {
$(“.submenu”).hide();
$(this).attr(‘id’, ’0′);
}
else {
$(“.submenu”).show();
$(this).attr(‘id’, ’1′);
}
});
$(“.submenu”).mouseup(function () {
return false
});
$(“.mainmenu”).mouseup(function () {
return false
});
$(document).mouseup(function () {
$(“.submenu”).hide();
$(“.mainmenu”).attr(‘id’, ”);
});
});

</script>

<div align=”center”>
<h3>jQuery Dropdown – Click on My Account below</h3>
<form action=”#” method=”post” style=”width:119px; height:160px; padding:30px;” >

<div class=”dropdown”>
<a class=”mainmenu toggle-login”>My Account <span class=”icon”>?</span></a>

<div class=”submenu”>
<ul class=”menuitems”>
<li ><a href=”#”>Advertising</a></li>
<li ><a href=”#”>Account setting</a></li>
<li ><a href=”#”>Privacy setting</a></li>
<li ><a href=”#”>Logout</a></li> <hr>
<li ><a href=”#”>Help</a></li>
</ul>
</div>
</div>
</form>
</div>

</body>
</html>

what you think now ? is it not just like “Facebook Account Setting drop down menu” ? So now create these type of professional links navigation for your sites. You may alter CSS code according to your styling requirements. Your questions and queries are more then welcome below. I will try my best to solve them for you. Also share this with your friends and on social networks as you know sharing is caring

Create Simple Horizontal and Vertical Drop down Menu in HTML and CSS

noreply@blogger.com (Freelance Web Designer) — Tue, 28 Apr 2020 06:33:00 +0000

Drop down menu is mostly used in websites to give users interactive way to navigate to sub-pages or sub-categories. It is not very difficult to create sub menu (drop down menu) if you already know how to create simple horizontal menu. I search on net about creating drop down simple menu but I found many results but all are complex and confusing codes and its difficult for newbies to learn that how to create simple drop down menu using HTML and CSS. So I decided to create a tutorial which help you to learn the basics. I will try to use smaller code as possible and avoid extra confusing codes. Let’s start now.

HTML Code / Structure for creating Drop down Menu

Normally we create menu using un-ordered list in HTML. Code is given below :

<html>
<head>
<title>Simple Horizontal drop down Menu</title>
</head>
<body>

<div id=”menu”>
<ul>
<li><a href=”#”>TopMenu1</a></li>
<li><a href=”#”>TopMenu2</a>
<ul>
<li><a href=”#”>SubMenu1</a></li>
<li><a href=”#”>SubMenu2</a></li>
<li><a href=”#”>SubMenu3</a></li>
<li><a href=”#”>SubMenu4</a></li>
</ul>
</li>
<li><a href=”#”>TopMenu 3</a>
<ul>
<li><a href=”#”>SubMenu1</a></li>
<li><a href=”#”>SubMenu2</a></li>
<li><a href=”#”>SubMenu3</a></li>
<li><a href=”#”>SubMenu4</a></li>
<li><a href=”#”>SubMenu5</a></li>
</ul>
</li>
<li><a href=”#”>TopMenu 4</a></li>
</ul>
</div>
</body>
</html>

The above HTML code show Output as :

This is simple structure of code. We create sub menu for Top Menu2 and Top Menu3. for sub-menu, we add another <ul> (un-ordered list) before closing the </li> tag. So that <ul> is a child of that <li> (list item). Its enough for HTML, we do other work in CSS.

Add CSS to Create Drop down Menu

CSS code for creating horizontal drop down menu is given below :

#menu{
width:600px;
background-color:red;
}
#menu ul{
display:inline-block;
}
#menu ul li{
list-style-type:none;
float:left;
position:relative;
}
#menu ul li a{
color:#fff;
background-color:#000;
text-decoration:none;
margin:5px;
padding:3px;
}
#menu ul li a:hover{
color:#fff;
background-color:brown;
}
#menu ul ul{
position:absolute;
left:-40px;
visibility:hidden;
}
#menu ul li:hover ul{
position:absolute;
left:-40px;
visibility:visible;
}

Explanation of above CSS code :

There is a simple logic behind the drop down menu. I give position:relative; to #menu ul li (these are list items of TopMenu) because I want to adjust sub-menu according to its parent menu. Later on I use visibility:hidden; to hide sub-menu (in this condition complete <ul> will be hidden from user- keep in mind this ul is a child of main ul) and un-hide the child ul by using visibility:visible; when someone hover to <li> (list-item). you may also use display:none; and display:block; CSS property to hide and show menu respectively.

Final Code to Create Horizontal Drop Down Menu

Now we get final by combining HTML and CSS code which is given below.

<html>
<head>
<title>This is Simple Horizontal Drop Down Menu – WebDesignSEOtips.com</title>
<style>
#menu{
width:600px;
background-color:red;
}
#menu ul{
display:inline-block;
}
#menu ul li{
list-style-type:none;
float:left;
position:relative;
}
#menu ul li a{
color:#fff;
background-color:#000;
text-decoration:none;
margin:5px;
padding:3px;
}
#menu ul li a:hover{
color:#fff;
background-color:brown;
}
#menu ul ul{
position:absolute;
top:25px;
left:-40px;
visibility:hidden;
}
#menu ul li:hover ul{
position:absolute;
left:-40px;
top:25px;
visibility:visible;
}
</style>
</head>

<body>
<div id=”menu”>
<ul>
<li><a href=”#”>TopMenu1</a></li>
<li><a href=”#”>TopMenu2</a>
<ul>
<li><a href=”#”>SubMenu1</a></li>
<li><a href=”#”>SubMenu2</a></li>
<li><a href=”#”>SubMenu3</a></li>
<li><a href=”#”>SubMenu4</a></li>
</ul>
</li>
<li><a href=”#”>TopMenu 3</a>
<ul>
<li><a href=”#”>SubMenu1</a></li>
<li><a href=”#”>SubMenu2</a></li>
<li><a href=”#”>SubMenu3</a></li>
<li><a href=”#”>SubMenu4</a></li>
<li><a href=”#”>SubMenu5</a></li>
</ul>
</li>
<li><a href=”#”>TopMenu 4</a></li>
</ul>
</div>
</body>
</html>

Final Output of above code is shown below :

Click Here to See Live Demo of Horizontal Drop-down Menu

Create Vertical Drop down Menu / Sidebar Menu

Vertical drop down menu sometimes called sidebar menu is also very popular in web designing. Its very simple to create. If you understand horizontal menu code then there is no any rocket science to create sidebar menu. I use same pattern to create it. So that you feel easy to understand its code.

CSS Code for Creating Vertical Side bar Menu

This is slightly different from the previous one. CSS Code is given below.

#menu{
width:600px;
background-color:red;
}
#menu ul{
display:inline-block;
}
#menu ul li{
list-style-type:none;
position:relative;
}
#menu ul li a{
color:#fff;
background-color:#000;
text-decoration:none;
margin:3px;
padding:3px;
}
#menu ul li a:hover{
color:#fff;
background-color:brown;
}
#menu ul ul{
position:absolute;
top:1;
left:14px;
visibility:hidden;
}
#menu ul li:hover ul{
position:absolute;
top:1;
left:14px;
visibility:visible;
}

As you see the code is very similar to horizontal menu, difference is only that I not give float:left; to list items and adjust positions according to requirements as shown above. That’s it.

Final Code of Vertical Sidebar Menu

Final and complete code for vertical sidebar /drop down menu is given below :

<html>
<head>
<title>This is Vertical Drop Down Menu – WebDesignSEOtips.com</title>
<style>
#menu{
width:600px;
background-color:red;
}
#menu ul{
display:inline-block;
}
#menu ul li{
list-style-type:none;
position:relative;
}
#menu ul li a{
color:#fff;
background-color:#000;
text-decoration:none;
margin:3px;
padding:3px;
}
#menu ul li a:hover{
color:#fff;
background-color:brown;
}
#menu ul ul{
position:absolute;
top:1;
left:14px;
visibility:hidden;
}
#menu ul li:hover ul{
position:absolute;
top:1;
left:14px;
visibility:visible;
}
</style>
</head>

<body>
<div id=”menu”>
<ul>
<li><a href=”#”>Menu 1</a></li>
<li><a href=”#”>Menu 2</a>
<ul>
<li><a href=”#”>Menu1</a></li>
<li><a href=”#”>Menu2</a></li>
<li><a href=”#”>Menu3</a></li>
<li><a href=”#”>Menu4</a></li>
</ul>
</li>
<li><a href=”#”>Menu 3</a>
<ul>
<li><a href=”#”>Menu1</a></li>
<li><a href=”#”>Menu2</a></li>
<li><a href=”#”>Menu3</a></li>
<li><a href=”#”>Menu4</a></li>
</ul>
</li>
<li><a href=”#”>Menu 4</a>
<ul>
<li><a href=”#”>Menu1</a></li>
<li><a href=”#”>Menu2</a></li>
<li><a href=”#”>Menu3</a></li>
<li><a href=”#”>Menu4</a></li>
</ul>
</li>
<li><a href=”#”>Menu 5</a>
</ul>
</div>
</body>
</html>

Output of above code is shown below:

Your Assignment

Copy above codes and save them in notepad file with extension of .html and test in your browsers, or see given demos. After testing write code with your hand and try to make them more attractive. I write simple and short code so that you can understand it easily but you should try to add some css3 properties to give them more beautiful look and attractiveness. This is your assignment, later on I will share some advance level drop down menus with JavaScript and Jquery. Be happy with new Designing Tips

How to Copy Text from Images Online

noreply@blogger.com (Freelance Web Designer) — Tue, 28 Apr 2020 06:24:00 +0000

Sometimes we need to copy text from images and we type text manually from image but what happened when we need to copy text from hundred’s of images and every image is full of text ? It is not a good practice to type all the text manually from images. So for this purpose we require any software who scan our image and give all the text from image in the text format. There are many software available in the market who do this job for you but its always irritating me to download trail versions of softwares on my computer. Most of the softwares are not for free, So we move to the Online Tools who do these type jobs for us. First good thing of online tools is that we don’t need to download and install heavy softwares in our machines and second is they are absolutely free of cost because they earn from their advertisements not by selling their products.

Online Tools to Copy Text from Images

These type of Softwares / Online tools are mostly called as OCR (Optical character Recognition). You may search on Google with these terms to find tools and software for this type of task. Let’s start to review best Online tools who copy and extract text from images. These tools are very useful and chosen by me, I am also used them when needed.

1. OnlineOCR.Net

This tool extract text from image (JPG, JPEG, BMP, TIFF, GIF) and convert into editable Word, Text, Excel, PDF, Html output formats. Converted documents by using this look exactly looks like the original one. It place all the data in right place like Tables, columns and graphics etc. This tool allows you to convert 15 images per hour without registration. Maximum 4 Mb file size support to upload.

2. NewOCR.Com

This is another best online OCR it support many image and document formats. It also allows you to give URL of image which you want to extract. It also supports many other languages with English. You should specify language before upload your file.

3. Free-Online-OCR.Com

This is another tool to perform same task. It is much secure then others. I is not save or allows search engines to indexed extracted data by its users. It also supports many formats including all common image and document formats. Its supports many low resolution and low quality images to extract text. So these are some great features of this tool.

4. Free-OCR.Com

The last, it is another nice tool for same purpose but it has some restrictions. It only allows you to upload maximum 2 MB file with no higher resolution than 5000 pixels. There is also another limit that you are not allowed to upload more than 10 image per hour.

Final Review

I shared this because when I need these tool, I am not getting any help from anywhere. I love to use these online applications. After using these tools please don’t forget to write your review below about these tools and your earlier experience with any other OCR tool. Keep surfing World Wide Web and Make Your Life easier with Online Apps

Top 3 Domain Name Checker Tools

noreply@blogger.com (Freelance Web Designer) — Tue, 28 Apr 2020 06:20:00 +0000

Choosing a domain name is first thing after deciding to start an online website. Domain name give identity to your online business or brand so its most important part because your business name, website, and also some part of SEO is depend on your domain name. Its very easy to find domain name online by typing “domain name checker tool” in Search. But I want to share best tools that I use to choose domain names for my self and for my clients.

1. NameCheck.com

This is one of the best tool to find domain names because its very powerful tool give results instantly and show all domains along with usernames availability of Facebook,twitter, blogger, WordPress, LinkedIn, Digg, Flicker and many others. So if you are start your new brand then you can choose that domain name which has also available for all popular social sites. This is a great advantage of this tool.

Another advantage of this tool is that it show only that domain names as “available” which are actually available in normal price and not for sell on other sites. I am feeling confusing when search for a domain name, some tools show that domain name is available but that was actually taken by anyone and available for sell in higher amounts. So I recommend you to use this tool as your first choice.

2. InstantDomainSearch.Com

As its name, you can find domain names instantly. It means no need to press enter key after write keywords.Just write keywords which you have in your mind for domain name and it will show all the available and taken results instantly. Most of the time I use this tool too. But I prefer above tool because that have some extra features over it.

3. GoDaddy.Com

This third tool is very common, but I shared it because it is reliable. You can search your domain names here and also buy from them. Feature of this tool is that is give wide variety of domain names extensions like .mobi (for mobile sites) and regional domains. Also It give you suggestions according to your searched keywords. So its a good idea to use godaddy domain search tool for choosing your website / brand name.

I shared my favorite online tools, if you find better then above then please give them in comments. I will feel happy to add them in my favorite list.

How to Convert docx and doc file to pdf

noreply@blogger.com (Freelance Web Designer) — Tue, 28 Apr 2020 06:17:00 +0000

Most of the time we need to convert MS office word document format file doc or docx to pdf format. To do such a task you need any software but problem is that mostly software are not free and have many limitations. Now a time is for online tools because no one wants to download and install trail versions of softwares on their local systems, it also irritating me because every time installing free softwares unnecessary toolbars are also installed with it which make my system so heavy and slow. So the solution is using online available tools to fulfil our needs. That’s why I shared very commonly used tools today here.

Top 3 Tools to Convert doc and docx files to pdf

I find only 3 top and best online tools that will do all your task related to conversions of files formats. There details are given below. I also used them frequently and recommended to you too

1. ZAMZAR

This is one of my favourite online tool because using this website you will convert and docx and doc or pdf file to any format. You will also convert pdf and docx in any image format like jpg, png, gif or any other using simple steps.

Convert files using simple steps in zamzar as shown in given screen shot below.

2. Convert Online Free

This is also very good and useful online tool for converting doc or docx file in pdf format. This tool is best specially if you want to convert number of files instead of singles. It supports up to 20 files in zipped format. Upload all files and download in your desired format (.pdf).

3. PDF Online

This is not my first choice because it has some limitations like maximum upload size is 2Mb that’s why I always prefer first 2 sites but you may use this tool too , its depend on your choice but all these 3 tools are awesome and do your work when you need.

Your favourite Online tools

If you have experienced with any other online tool which works same and you feel they are more better than above, you must share them with us because its your turn now also give feedback in comments which one you like from above 3 tools.

Create Facebook Cover Photos Online

noreply@blogger.com (Freelance Web Designer) — Tue, 28 Apr 2020 06:11:00 +0000

All you know what is the importance of facebook fanpages. If you have more likes of your page then you may get more traffic on your website and also it increase online presence of your business. Facebook cover picture is a first thing which any visitor see on your profile or page therefore you should make your first impression good so create attractive cover photos for your fb fanpage or Google+ page. There are many online tools available on the Internet who provide this facility but I pick 3 best online tools who create attractive and professional facebook timeline cover photos for you.

1. Pagemodo :

This website is very good and my favourite. you create any type of profile picture. Just select your desire theme and start writing text, add pictures and make your cover so professional. It has great extra features like amazing fonts styles, opacity, border round corners, themes regarding your topic and much more. Go online with this tool and make fun !

2. Tricked Out Timeline :

This is second best tool to create free social media timeline covers online. I love this tool because it give special effects to your cover picture like merging, zoom in or zoom out, tear off the bottom edge and some others.

Simply select your desire effect and give a new look to your timeline photo.

3. Image Chef :

image Chef is a third best tool which has many features like clip arts, backgrounds, smileys, texts and extra options to design and create cover photos for your timeline. Its easy to use, simply drag and drop and re-size options are available in this site.

Final Words :

If you are not familiar with photoshop and other photo creating and editing softwares then these online tools are heaven for you. You can create profile pictures and timeline cover photos for facebook, twitter and Google+ here. If you have an experience with more better sites than I selected above then share with us below.

Create Different Styles of Marquee in Html and JavaScript

noreply@blogger.com (Freelance Web Designer) — Tue, 28 Apr 2020 06:02:00 +0000

Marquee Tags are elements of Html which are used to scrolling and sliding text and images in web designing. Most of the time you see latest news scrolling in different websites these are scrolling due to marquee tags. There are different styles of marquee in Html, like scroll from left to right or right to left and from top to bottom or bottom to top, designers use different styles according to their needs. I am going to discuss all styles and types of marquee one by one below.

Simple Scrolling Marquee :

<marquee>This is Simple HTML Marquee Tag</marquee>

In above code I write a simple marquee tag. We add some marquee attributes in opening tag to give different styles to it, like direction, behavior ,bgcolor, loop, scrollamount and some others.

<marquee behavior=”scroll” direction=”left” scrollamount=”3″ bgcolor=”yellow”>This is Simple Scrolling Marquee which is moving from right to left.</marquee>

Output of above Code :

This is Simple Scrolling Marquee which is moving from right to left.

Direction : direction tells the direction on which you want to scroll e.g left, right, up or down.

Scrollamount : This attribute define a speed of marquee. More value means higher the speed.

Behavior : It describes behavior of marquee e.g scrolling, slides or alternate etc.

Alternate Behavior of Marquee :

<marquee behavior=”alternate” direction=”right” bgcolor=”pink”>This is Simple alternate Marquee which is moving from right to left and left to right.</marquee>

Output :

This is Simple alternate Marquee which is moving from right to left and left to right.

Other Examples :

Using marquee with loop and sliding behavior:

<marquee behavior=”slide” direction=”right” bgcolor=”orange” loop=”5″ scrollamount=”10″>This is Simple sliding Marquee with loops.</marquee>

Output :

This is Simple sliding Marquee with loops.

Using Marquee with directions up and down and involve height and width with it.

<marquee behavior=”scroll” direction=”up” bgcolor=”yellow” scrollamount=”5″ width=”200px” height=”100px”>This is another example, In which text is moving from bottom to top.</marquee>

Output :

This is another example, In which text is moving from bottom to top.

Moving marquee in reverse direction :

<marquee behavior=”scroll” direction=”down” bgcolor=”orange” scrollamount=”6″ width=”200px” height=”100px”>This is another example, In which text is moving from top to bottom.</marquee>

Output :

This is another example, In which text is moving from top to bottom.

Use Marquee to Scroll Images :

You can insert any type of Html code between <marquee> tags, like images, links, headings or anything you want to see in scrolling behavior. for example I show you how we scroll images in marquee in the given example.

<marquee behavior=”scroll” direction=”right”><img src=”http://domain/wp-content/uploads/2013/07/rose-flower1.jpg”/> <img src=”http://domain.com/wp-content/uploads/2013/07/rose-flower2.jpg”/><img src=”http://domain.com/wp-content/uploads/2013/07/rose-flower3.jpg”/></marquee>

Output :

Marquee in JavaScript with Start and Stop Events :

With the combination of javascript codes we add some extra features in simple html marquee. When you hover text it stops scrolling and when mouse out, it again start scrolling. Example is given below.

<font size=”12″ color=”red” ><marquee behavior=”scroll” bgcolor=”yellow” onmouseout=”this.start();” onmouseover=”this.stop();”>This is simple marquee text in JavaScript. Hover Mouse in the text and see results.</marquee></font>

Output :

This is simple marquee text in JavaScript. Hover Mouse in the text and see results.

Html and JavaScript Marquee in Typing Style :

Computer typing style marquee is very rarely used but it is very beautiful, one word type after the other in a sequence. This will created using JavaScript. Example is given below.

<html>

<head>

<title>Marquee in Typing Style</title>

<SCRIPT>

var i = 0

var showString= “This is a Computer Typing Text Style Marquee Example, The words are show in typing style here. ”

+ “one letter after another. This is Used for displaying Latest News in Websites and blogs.”

function marquee()

{

var stringLength= showString.length

document.show.marquee1.value= document.show.marquee1.value + showString.charAt(i)

i++ //Copy and paste this same code below each other to increase the letter typed out at one time

var timeID= setTimeout(“marquee()”,50) //Change the number to change the speed (the smaller, the faster)

if (i >= stringLength)

{clearTimeout(timeID); i=0}

}

</SCRIPT>

</head>

<body onLoad=”marquee()”>

<CENTER>

<FORM name=”show”><TEXTAREA rows=5 cols=53 wrap=”virtual” name=”marquee1″></TEXTAREA></FORM></CENTER>

</body>

</html>

Output :

To see the output of above code Click here.

Final Words :

I hope you learn marquee tags completely now, you can use different combinations of all attributes to give amazing styles to your marque according to your needs and requirements. I will teach you marquee in css3 in later posts. For now your assignment is to copy above codes in your notepad and run it in your browsers. If you need any help regarding this lesson, your quarries are welcome below in comment section.

Create Rounded Borders in CSS3

noreply@blogger.com (Freelance Web Designer) — Tue, 28 Apr 2020 05:59:00 +0000

In web designing, CSS is used to make a beautiful designs in website. CSS3 is a latest version of CSS which make revolution in the field of web designing. I also love to working in it. Rounded border property is also a part of CSS3. Today I will teach you how we create rounded borders with a very small and simple code of CSS3 using border-radius property.

How to Create Rounded Borders in CSS3

We write simple code of Html and CSS, we use only 5 properties that is width, height, background-color, border and border-radius. In this post we focus to learn border-radius property.

First make a class with name box (class name always start with dot (.) as .box) use all above properties to show div. At the end I create a div and assign a class = “box” to it.

<style>

.box {

width:200px;

height:200px;

background-color:red;

border:5px solid blue;

border-radius:10px 10px 10px 10px;

-webkit-border-radius:10px 10px 10px 10px;

-moz-border-radius:10px 10px 10px 10px;

}

</style>

<html>

<body><div class=”box”></div></body>

</html>

The Output of above Code is given below :

This is Rounded Box div

This property is not working on some browsers like Mozilla, safari and Google chrome, so to show border radius in these browsers we use “-webkit- for chrome and safari and -moz- for Mozilla” as :

-webkit-border-radius:10px 10px 10px 10px;

-moz-border-radius:10px 10px 10px 10px;

you see 4 values of this property first 10px is for top left, 2nd for top right and so on. It moves in clock wise direction. If you want to give same radius to all corners then may be code is written as :

border-radius:10px;

This is short form of code. All corners of box pick 10px radius. To increase the radius of corners replace 10px with any higher value. If you want a complete circle then give it 360px as shown below:

<style>

.circle {

width:200px;

height:200px;

background-color:green;

border:5px solid red;

border-radius:360px;

-webkit-border-radius:360px;

-moz-border-radius:360px;

}

</style>

<html>

<body><div class=”circle”></div></body>

</html>

To run this code, copy it and paste it in notepad file, save notepad file with .html extension and open it in your browser.You will see a round colorful circle as shown in output.

The Output of above Code is given below :

Give border-radius to Images

Same thing is may be applied to images which make your site more attractive. In above examples we give border-radius to <div> but if you want to give same effect to any image , same class assigned to that image but this time we don’t need extra CSS properties like width, height and background-color because image has its own height, width and background color as shown below :

<style>

.image-round {

border:5px solid orange;

border-radius:30px;

-webkit-border-radius:30px;

-moz-border-radius:30px;

}

</style>

<html>

<body><img src=”http://example.com/wp-content/uploads/2013/06/lion-image.jpg” class=”image-round”/></body>

</html>

The Output of above Code is given below :

Your Assignment

If you really want to learn these things then must do your assignment, copy all above codes and insert into any editor like Notepad or Notepad++ and save file as filename.html and open it in your browser and see output then practice these codes by typing yourself. If you need any help regarding these codes do not hesitate to ask any type of question below. I will teach you some more great tools and properties of CSS3 in later posts.

Create Folding Edges in CSS3

noreply@blogger.com (Freelance Web Designer) — Tue, 28 Apr 2020 05:43:00 +0000

We are going to create folding edges using CSS3. It looks very cool in design. When I need to create folded corners in CSS to design a notification box in my client website. I just created using simple codes. Which is given below.

HTML Code for Folding Edges

HTML code for design basic and simple. E.g :

<div class=”notification”>
<div class=”notify-title”>Title</div>
<p>The content will be added here</p>
</div>

Styling Box using CSS

Now I design box in CSS and giving positions to title and content elements as given below :

.notification {
position: relative;
padding: 23px 10px 22px;
margin: 20px;
background: #fffdf2;
border: 2px solid #ffcb00;
font-family: Helvetica, Arial;
}
.notify-title {
position: absolute;
top: -10px;
left: -10px;
padding: 4px 8px;
background: #df9c00;
color: #fff;
}

Output of above code show as :

I give the position “relative” to main container box because other elements like heading and paragraph content positioned relative to container box i.e .notification in this case.

Add Folding Effect to Edges of Title

So to add folding effect in edges we need to create small triangle in dull color, which is possible by using :effect (The :after selector inserts content after the selected element). We use content: ‘ ‘ property to specify text. But in this case we don’t need any content to show, so we keep the value empty in content property. Code is given below :

.notification {
position: relative;
padding: 23px 10px 22px;
margin: 20px;
background: #fffdf2;
border: 2px solid #ffcb00;
font-family: Helvetica, Arial;
}
.notify-title {
position: absolute;
top: -10px;
left: -10px;
padding: 4px 8px;
background: #df9c00;
color: #fff;
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}
.notify-title:after {
content: ”;
display: block;
height: 20px;
width: 8px;
position: absolute;
top: 24px;
left: 0px;
background: transparent;
z-index: -1;
border-top: 50px solid #eed993;
border-left: 45px solid transparent;
}

Now the Output is shown as :

Note that a small triangle makes illusion of folding corners.We also add some shadow effect using box-shadow property in CSS3. To test this code in your browser, create a new html file and paste the final code in it which is given below.

<html>
<head>
<style>
.notification {
position: relative;
padding: 23px 10px 22px;
margin: 20px;
background: #fffdf2;
border: 2px solid #ffcb00;
font-family: Helvetica, Arial;
}
.notify-title {
position: absolute;
top: -10px;
left: -10px;
padding: 4px 8px;
background: #df9c00;
color: #fff;
}
.notification {
position: relative;
padding: 23px 10px 22px;
margin: 20px;
background: #fffdf2;
border: 2px solid #ffcb00;
font-family: Helvetica, Arial;
}
.notify-title {
position: absolute;
top: -10px;
left: -10px;
padding: 4px 8px;
background: #df9c00;
color: #fff;
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
box-shadow: 1px 1px 2px rgba(0,0,0,0.3);

}
.notify-title:after {
content: ”;
display: block;
height: 20px;
width: 8px;
position: absolute;
top: 24px;
left: 0px;
background: transparent;
z-index: -1;
border-top: 50px solid #eed993;
border-left: 45px solid transparent;
}
</style>
</head>
<body>
<div class=”notification”>
<div class=”notify-title”>Title</div>
<p>The content will be added here</p>
</div>
</body>
</html>

I hope this web designing tip will make you surprise. May be I am not the first one who create this, but I want to tell you how beautifully you can create this illusion effect in CSS codes without using any image.

Top Common Tips to Design a Website

noreply@blogger.com (Freelance Web Designer) — Tue, 28 Apr 2020 05:41:00 +0000

Designing a website is not a uncommon thing now a days but not every one is a good designer. When you learn all the tools of designing, you try to use all in your design which is not a good idea you must follow some points of professionals to create good web page design. I have some of good and simple but important tips to design your websites.

Simplicity is the best :

As I mention above , When you learn all tools of designing, don’t try to use all in a single design, keep the things simpler as possible. Avoid unnecessary marquees, blinking images and pop-up windows. Use only related images which are necessary for your design. Your design don’t need extra colorful bells and whistles.

Color Scheme :

Choose maximum 3 to 4 colors and stuck with them, use these colors with different effects and color gradients. In short use limited colors in design. Use same color scheme in the whole site. Also try to use images with a same scheme as light or dark.

Use Common Fonts :

Use fonts which are common and easily to read, most of the sites are used Arial, Veranda, Georgia fonts. Font size also matter, use normal size, nor very large neither small. Font color must be opposite with background color so that it is clearly readable.

Simple Navigators :

Use simple menu, most of the website have horizontal menu at the top of the site. Limit the number of items in the menu so that its easy to navigate from one page to another. Provide all necessary information on the homepage and secondary information on the other pages. Avoid deep navigation because users don’t like to go in deep links like secondary, tertiary and so on. Design Navigation Menu items using list (un-ordered list).

Also don’t use icons links, always use text links in navigation menu. If you want to use icons then also include text links with it , which is readable by users.

Logo and other Images :

Logo show your brand, give link to your logo of homepage of the site. Other images should be small in size so that they load faster and appear in your site instantly. It save your bandwidth as well as users’s.

Use Home Page and Contact Links :

Use home page and contact us page links in every page in the main or footer navigation, so that users don’t need to press back button to go back to the home page of your site. Although its common thing but most of the new designers try to design something new and eliminate some important links from the web pages.

Use CSS and CSS3 instead of JavaScript’s / Flash :

Use CSS and CSS3 to design your site. Avoid using background images. Use background colors and give different effects using css3. Flash and JavaScript’s are now old fashioned , they make your page heavier to load.

Last but not least :

Limit your Page length, users don’t want to scroll down so far. Also small pages make your page lighter and visible all content to user. Use paragraphs and white spaces in the text so readers feeling good, continues text bored the reader.

Keep these points in your mind when start designing a website. It will help you when choosing layout, colors, fonts, images and other essentials for designing.

How to Create Shadow effects in CSS3

noreply@blogger.com (Freelance Web Designer) — Tue, 28 Apr 2020 05:35:00 +0000

Today we learn another css3 property that is box-shadow property. Before css3 we do this task in softwares like photo-shop but now its too easy to write simple small code that give shadow effects to images and texts. So let’s start how this works.

box-shadow Property in CSS3

This property is used to give shadow effects to any box like image or div. This property takes four values.

horizontal shadow
vertical shadow
blur distance and size of shadow
color of the shadow

box-shadow:10px 10px 5px grey; // This is simple code of box-shadow

Now we do some practical work and create a class in css with name “box” and give box-shadow property to it.

<html>
<head>
<style>
.box{
width:200px;
height:200px;
background-color:indigo;
box-shadow:10px 10px 15px grey;
-webkit-box-shadow:10px 10px 15px grey;
-moz-box-shadow:10px 10px 15px grey;
}

</style>

</head>
<body>
<div></div>
</body>

</html>

Output of above code :

Give shadow to images in css3

In the same way you may give shadow to any image. Simply use box-shadow property as shown in below example.

<html>
<head>
<style>
.image{
box-shadow:10px 10px 15px #888888;
-webkit-box-shadow:10px 10px 15px #888888;
-moz-box-shadow:10px 10px 15px #888888;
}

</style>

</head>
<body>
<div><img src=”https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8lPurS0vFSNGNSuuj6lXIdYQ8lbHMmr6sCC-1QwQW3buZP26EIonda577tsqH19N-umy0vH2vzfWhDCnsknhEY5pIKNHVEvtVUG4LQYEcKswWKX76NIwn0Can5tM3xfKtt80MDskbyl5-/s1600/rose-flower1.jpg” class=”image”/></div>
</body>

</html>

Output of above code :

Give shadow to text in CSS3

text-shadow is another property of css which is used to decorate your text on web pages. It is also very simple and easy to implement. follow the code below.

<html>
<head>
<style>
.text{

font-size:20px;

color:red;

text-shadow:5px 5px 6px yellow;
-webkit-text-shadow:5px 5px 6px yellow;
-moz-text-shadow:5px 5px 6px yellow;

}

</style>

</head>
<body>
<p class=”text”>This is example text showing shadow effect. It also takes 4 properties as box-shadow takes. It is very useful to design paragraphs with styling fonts and shadow effects on the websites.</p>
</body>

Output of above code is :

This is example text showing shadow effect. It also takes 4 properties as box-shadow takes. It is very useful to design paragraphs with styling fonts and shadow effects on the websites.

Your Lesson :

I hope you understand all codes describe above, if you have any confusion then let me know below. Also I have assignment for you. Copy all codes in your notepad and save it with .html extension and run on your browsers. we use -webkit- for chrome and safari browsers and -moz- for Mozilla because these browsers sometimes not supported this property but latest browsers not need to add these keywords. Use this effect on your website or blog. You can easily add it on any platform like blogger or wordpress. I will see you in next lesson. bye.

Create Stylish Dropdown Log in / Sign up form using Jquery and CSS

noreply@blogger.com (Freelance Web Designer) — Tue, 28 Apr 2020 05:32:00 +0000

In our last post, we create awesome drop-down menu navigation in Jquery and CSS , today we create log in and sign up form in drop down style.we follow same last tutorial pattern to create this form. We use Jquery and CSS to give styles. Later on you may use PHP or asp.net for working this module according to your requirement. We just create styling and design in Jquery and CSS in this tutorial. See Live Demo before continue reading, so you have better understand that what actually we are going to create.

Basic Structure of form in HTML

First of all we create basic structure of our form in HTML. We only create Log in form and give dummy link to sign up button. So that you can give the link of your registration form page later. Code of basic HTML form is given below :

<div>
<nav>
<ul>
<li id=”login”>
<a id=”login-trigger” href=”#”>Log in <span>?</span></a>
<div id=”login-content”>

<form id=”inputs” action=”#” method=”post”>
<input type=”text” id=”txtUserName” placeholder=”Your email address”/>
<input type=”password” id=”txtPwd” placeholder=”Password”/>

<input type=”submit” id=”btnLogin” Value=”Login” class=”submit” onclick=”btnLogin_Click”/></br> </form>

</br> <form action=”#” method=”post”>
<input type=”checkbox” name=”rememberme” value=”RememberMe”>Remember me</form>
<a href=”#” style=”float:right;”>Forgot password?</a>
</div>

</li>
<li id=”signup”>
<a href=”#”>Sign up</a>
</li>
</ul>
</nav>
</div>

Give Styling to form using CSS

After creating form in HTM, we apply some CSS to positioning and designing it. We already give ids to all elements in HTML and now we target that ids to apply CSS over them. CSS code is given below :

nav ul {
margin: 0;
padding: 0;
list-style: none;
position: relative;
float: right;
background: #eee;
border-bottom: 1px solid #fff;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}

nav li {
float: left;
}

nav #login {
border-right: 1px solid #ddd;
-moz-box-shadow: 1px 0 0 #fff;
-webkit-box-shadow: 1px 0 0 #fff;
box-shadow: 1px 0 0 #fff;
background: #eee;
}

nav #login-trigger,
nav #signup a {
display: inline-block;
*display: inline;
*zoom: 1;
height: 25px;
line-height: 25px;
font-weight: bold;
padding: 0 8px;
text-decoration: none;
color: #444444;
background:#eeeeee;
}

nav #signup a {
-moz-border-radius: 0 3px 3px 0;
-webkit-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
background: #eeeeee;
}

nav #login-trigger {
-moz-border-radius: 3px 0 0 3px;
-webkit-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
}

nav #login-trigger:hover,
nav #login .active,
nav #signup a:hover {

background:#E7A34C;
color:#ffffff;
}

nav #login-content {
display: none;
position: absolute;
top: 24px;
right: 0;
z-index: 999;
background: #ffffff;
background-image: -webkit-gradient(linear, left top, left bottom, from(#E7A34C), to(#fff));
background-image: -webkit-linear-gradient(top, #E7A34C, #fff);
background-image: -moz-linear-gradient(top, #E7A34C, #fff);
background-image: -ms-linear-gradient(top, #E7A34C, #fff);
background-image: -o-linear-gradient(top, #E7A34C, #fff);
background-image: linear-gradient(top, #E7A34C, #fff);
padding: 15px;
-moz-box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
-webkit-box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
-moz-border-radius: 3px 0 3px 3px;
-webkit-border-radius: 3px 0 3px 3px;
border-radius: 3px 0 3px 3px;
}

nav li #login-content {
right: 0;
width: 280px;
}

#inputs input {
background: #f1f1f1;
padding: 6px 5px;
margin: 0 0 5px 0;
width: 238px;
border: 1px solid #ccc;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: 0 1px 1px #ccc inset;
-webkit-box-shadow: 0 1px 1px #ccc inset;
box-shadow: 0 1px 1px #ccc inset;
}

#inputs input:focus {
background-color: #fff;
border-color: #e8c291;
outline: none;
-moz-box-shadow: 0 0 0 1px #e8c291 inset;
-webkit-box-shadow: 0 0 0 1px #e8c291 inset;
box-shadow: 0 0 0 1px #e8c291 inset;
}

#login #actions {
margin: 10px 0 0 0;
}

#login .submit {
background-color: #3F80EC;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f06015), to(#f88e11));
background-image: -webkit-linear-gradient(top, #f06015, #f88e11);

background-image: -moz-linear-gradient(top, #f06015, #f88e11);
background-image: -ms-linear-gradient(top, #f06015, #f88e11);
background-image: -o-linear-gradient(top, #f06015, #f88e11);
background-image: linear-gradient(top, #f06015, #f88e11);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
text-shadow: 0 1px 0 rgba(0,0,0,.5);
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
border: 1px solid #7e1515;
float: left;
height: 30px;
padding: 0;
width: 100px;
cursor: pointer;
font: bold 14px Arial, Helvetica;
color: #fff;
}

#login .submit:hover,
#login .submit:focus {
background-color: #e97171;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
background-image: -webkit-linear-gradient(top, #f88e11, #f06015);
background-image: -moz-linear-gradient(top, #f88e11, #f06015);
background-image: -ms-linear-gradient(top, #f88e11, #f06015);
background-image: -o-linear-gradient(top, #f88e11, #f06015);
background-image: linear-gradient(top, #f88e11, #f06015);
}

#login .submit:active {
outline: none;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
}

#login .submit::-moz-focus-inner {
border: none;
}

#login label {
float: right;
line-height: 30px;
}

#login label input {
position: relative;
top: 2px;
right: 2px;
}

You may change colors and styling in above code as per your need. You may create external style sheet but I will place this code in <head> tag.

Add Jquery Code in form

Jquery code is given below :

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”>
</script>

<script type=”text/javascript”>
$(document).ready(function(){
$(‘#login-trigger’).click(function () {
$(this).next(‘#login-content’).slideToggle();
$(this).toggleClass(‘active’);

if ($(this).hasClass(‘active’)) $(this).find(‘span’).html(‘▲’)
else $(this).find(‘span’).html(‘▼’)
})
});
</script>

That’s it, this Jquery will only work when internet connection is available because we linked Jquery library online so to run this script properly you must need an active internet connection.

Final and Complete Code of Log in / Sign up Form in Jquery and CSS

Final and complete code of form is given below :

<html>
<head>
<style>
nav ul {
margin: 0;
padding: 0;
list-style: none;
position: relative;
float: right;
background: #eee;
border-bottom: 1px solid #fff;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}

nav li {
float: left;
}

nav #login {
border-right: 1px solid #ddd;
-moz-box-shadow: 1px 0 0 #fff;
-webkit-box-shadow: 1px 0 0 #fff;
box-shadow: 1px 0 0 #fff;
background: #eee;
}

nav #login-trigger,
nav #signup a {
display: inline-block;
*display: inline;
*zoom: 1;
height: 25px;
line-height: 25px;
font-weight: bold;
padding: 0 8px;
text-decoration: none;
color: #444444;
background:#eeeeee;
}

nav #signup a {
-moz-border-radius: 0 3px 3px 0;
-webkit-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
background: #eeeeee;
}

nav #login-trigger {
-moz-border-radius: 3px 0 0 3px;
-webkit-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
}

nav #login-trigger:hover,
nav #login .active,
nav #signup a:hover {

background:#E7A34C;
color:#ffffff;
}

nav #login-content {
display: none;
position: absolute;
top: 24px;
right: 0;
z-index: 999;
background: #ffffff;
background-image: -webkit-gradient(linear, left top, left bottom, from(#E7A34C), to(#fff));
background-image: -webkit-linear-gradient(top, #E7A34C, #fff);
background-image: -moz-linear-gradient(top, #E7A34C, #fff);
background-image: -ms-linear-gradient(top, #E7A34C, #fff);
background-image: -o-linear-gradient(top, #E7A34C, #fff);
background-image: linear-gradient(top, #E7A34C, #fff);
padding: 15px;
-moz-box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
-webkit-box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
box-shadow: 0 2px 2px -1px rgba(0,0,0,.9);
-moz-border-radius: 3px 0 3px 3px;
-webkit-border-radius: 3px 0 3px 3px;
border-radius: 3px 0 3px 3px;
}

nav li #login-content {
right: 0;
width: 280px;
}

#inputs input {
background: #f1f1f1;
padding: 6px 5px;
margin: 0 0 5px 0;
width: 238px;
border: 1px solid #ccc;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: 0 1px 1px #ccc inset;
-webkit-box-shadow: 0 1px 1px #ccc inset;
box-shadow: 0 1px 1px #ccc inset;
}

#inputs input:focus {
background-color: #fff;
border-color: #e8c291;
outline: none;
-moz-box-shadow: 0 0 0 1px #e8c291 inset;
-webkit-box-shadow: 0 0 0 1px #e8c291 inset;
box-shadow: 0 0 0 1px #e8c291 inset;
}

#login #actions {
margin: 10px 0 0 0;
}

#login .submit {
background-color: #3F80EC;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f06015), to(#f88e11));
background-image: -webkit-linear-gradient(top, #f06015, #f88e11);

background-image: -moz-linear-gradient(top, #f06015, #f88e11);
background-image: -ms-linear-gradient(top, #f06015, #f88e11);
background-image: -o-linear-gradient(top, #f06015, #f88e11);
background-image: linear-gradient(top, #f06015, #f88e11);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
text-shadow: 0 1px 0 rgba(0,0,0,.5);
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
border: 1px solid #7e1515;
float: left;
height: 30px;
padding: 0;
width: 100px;
cursor: pointer;
font: bold 14px Arial, Helvetica;
color: #fff;
}

#login .submit:hover,
#login .submit:focus {
background-color: #e97171;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
background-image: -webkit-linear-gradient(top, #f88e11, #f06015);
background-image: -moz-linear-gradient(top, #f88e11, #f06015);
background-image: -ms-linear-gradient(top, #f88e11, #f06015);
background-image: -o-linear-gradient(top, #f88e11, #f06015);
background-image: linear-gradient(top, #f88e11, #f06015);
}

#login .submit:active {
outline: none;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
}

#login .submit::-moz-focus-inner {
border: none;
}

#login label {
float: right;
line-height: 30px;
}

#login label input {
position: relative;
top: 2px;
right: 2px;
}
</style>
</head>
<body>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”>
</script>

<script type=”text/javascript”>
$(document).ready(function(){
$(‘#login-trigger’).click(function () {
$(this).next(‘#login-content’).slideToggle();
$(this).toggleClass(‘active’);

if ($(this).hasClass(‘active’)) $(this).find(‘span’).html(‘▲’)
else $(this).find(‘span’).html(‘▼’)
})
});
</script>
<div>
<nav>
<ul>
<li id=”login”>
<a id=”login-trigger” href=”#”>
Log in <span>?</span>
</a>
<div id=”login-content”>

<form id=”inputs” action=”#” method=”post”>
<input type=”text” id=”txtUserName” placeholder=”Your email address”/>
<input type=”password” id=”txtPwd” placeholder=”Password”/>

<input type=”submit” id=”btnLogin” Value=”Login” class=”submit” onclick=”btnLogin_Click”/></br> </form>

</br> <form action=”#” method=”post”>
<input type=”checkbox” name=”rememberme” value=”RememberMe”>Remember me</form>
<a href=”#” style=”float:right;”>Forgot password?</a>
</div>

</li>
<li id=”signup”>
<a href=”#”>Sign up</a>
</li>
</ul>
</nav>
</div>
</body>
</html>

Create new file and Copy / Paste above code in the file and save it with extension .html. Now run that file in your browser to test the working of this script.

Need Help ?

I try my best to write simple codes so that you can understand it easily but if you need my help regarding this tutorial you are more than welcome. Just write your query in comments section below and I will try to solve your all type of queries. Also share it with your friends and share on your social profiles so for me, it will be a great favor from your side. Keep in touch with us for more amazing posts

How to Protect Your Text Content from Copycats

noreply@blogger.com (Freelance Web Designer) — Tue, 28 Apr 2020 04:52:00 +0000

Copping other contents is major issue now a days because new bloggers don’t know about the strictness of copyright policies and they republish others content in their blogs which is equally harmful for copier and for the owner of original content, Google dislike duplicate content and you will be penalized earlier or later for this act. According to Google, every webmaster is responsible for all activities on his/her website so we should take care of our content from online copycats. These are thieves and copy your content even text and images without your permission and republish it in their own blogs. There are several ways to protect your original content and make it difficult to copping it by others.

Disable Right Click of Mouse on your Blog

By disabling right click of mouse on your blog, you will be create a difficulty for copycats and it will help you to protect your text and images. Although it is not a complete solution but somehow it works for most of the time. Now we see how to disable right click in our blog. This issue is facing by bloggers who are mostly used WordPress or Blogger as a CMS so I talk about them.

For Blogger

If you are using Blogger, you can disable right click by adding small piece of JavaScript code. Go to your blogger dashboard,then its layout and add a new HTML/JavaScript gadget and paste below in it.

<script type="text/javascript">
var omitformtags=["input", "textarea", "select"]
omitformtags=omitformtags.join("|")
function disableselect(e){
if (omitformtags.indexOf(e.target.tagName.toLowerCase())==-1)
return false
}
function reEnable(){
return true
}
if (typeof document.onselectstart!="undefined")
document.onselectstart=new Function ("return false")
else{
document.onmousedown=disableselect
document.onmouseup=reEnable
}
</script>

Now save the settings and that’s all. Now your blog is safe from copping text.

For WordPress

As all WP user know, WordPress has a huge plugins library where all necessary plug-ins are available. Go to Plugins > Add New and Search for disable Right Click, you will see list of plugins, you can install any of them for this purpose. I recommend you to install Blog Content Protector or if you want to protect only images then use No Right Click Images.

You can also use above JavaScript Code in your WordPress blog. Go to Widgets, drag “Text” widget and paste above code on it.

Care of your Content

As I mention, disabling right click of mouse is not a perfect solution to protect your original text content. You should check your posts manually by using online duplicate content checker tools frequently. If you find your post on any other blog then ask the owners to remove it and complain to Google, so that Google will remove the indexed URL of that site. I hope you will learn something from this post. I request you to respect others copyrights and never copy text from other sites, even avoid to reuse images of other sites without permissions of the owner of that image.

How to get New Topics daily for Fresh Blog Posts

noreply@blogger.com (Freelance Web Designer) — Tue, 28 Apr 2020 04:50:00 +0000

Content of the website is most important ingredient in fact content is a soul of your website because users visit your site for content that you offer. So lets imagine if your blog has no content it is just soulless that means dead. Every blogger knows importance of content so if you want get success in blogging, you have to update your blog with fresh content daily or at least 4 times in a week but the problem is comes out when you have time, want to create fresh and original content for your blog but your mind have no ideas for post a new article. If you get one topic for today’s post then the next day again you have to find a new hot topic for your post. Which is sometimes give a reason to copy content from other sites by newbies bloggers. From where to get new ideas and topic for daily posts on my blog ? Today we will try to get the answer of this question.

Choose your blog’s niche carefully

First of all, when you decide to start blog, research on your niche. Your niche has some scoop. You must have a deep knowledge and grip on the topic. You have thirst to learn more on your selected niche. If you select right niche for your blog, there are less chances that you face run short of content or topics. So spend some time to think when choosing your blog’s topic.

Write on the topics that you need

Sometimes we face any problem and search on the web and don’t find any reliable solution but after doing some experiments getting help from others we finally get success to solve our issue. You may post that experience with your readers because if you face problem today, may be someone other facing same problem in the future, so can give suggestions and share your experience to solve that issue which will help others too.

Give the Solutions of Problems

No matter what is your niche, Join popular forums, groups on social media sites like Facebook Groups which are related to your blog’s niche and read the issues and problems facing by others. In the forums and groups many newbies ask questions. They just need your help. So you may be get benefit if you know the solution of their problems. Simply write the new post on that topic with the guidelines to solve the problem and give the link on the forum thread’s reply. You will get three benefits from it. First You will get one backlink from that forum and in this case forum moderator easily accepted your post link because you share relevant link for helping user. Second, you get a hungry visitor or customer if you offer some product. Third you are getting new fresh topic for your blog. Is it not cool !?

See Trends on Social Media

Keep eye on the latest trends of your niche, touched with social media and see what people talks about. Try to target hot topics. You get new ideas from social sites, by chatting peoples, to see friends posts. Trending in more important in the field of SEO, if you successfully target the hottest trend of the time you might be received thousands of hits by writing single post. yes, its true. So trends on the social media will definitely help out for giving some cool and new ideas to write updated and fresh posts on your blog.

What you do to get fresh ideas for your blog ?

After reading this post I hope you will get some ideas to find fresh content and topics for your blog. I will soon write an article on How to select blogging niche? but this time tell us from where you get ideas and latest topics for your blogs daily now a days. Your tips may be helpful for me and for others. Stay tuned with me !

How to Get Traffic in Your Newly Created Website

noreply@blogger.com (Freelance Web Designer) — Tue, 28 Apr 2020 04:47:00 +0000

Getting traffic is a major issue for newly created website because when you create new website or blog it has no online reputation and search engine ranking, even indexing of your site URL’s take weeks to appear, so how we get traffic in that time ? SEO strategies will not work in short time, they also takes weeks and months so in the start we will only rely on the referral traffic not on organic traffic (traffics comes from search engines like Google etc). There are so many ways to get referral visitors on your website when it is new. Now we see some of them step by step.

Step 1 : ( Submit Your Site links to all Search Engines )

First of all submit your site links to all search engines, because referal traffic is temporary, so for long terms you should submit your site links to all search engines like Google, Bing, AOL etc. Also submit sitemap in Google webmaster tool to get indexed faster in Google. Now move to step 2.

Step 2 : (Create some high quality Backlinks of your website)

When your website or blog is new, you have less to zero popularity on the web, so make some quality backlinks by submitting your site links in popular and well reputed web directories, social bookmarking sites and try to write high quality guest posts for getting do-follow backlinks.

The above two steps are important because these make your search engine ranking better with the passage of time while you are getting referral traffic in that time.

Step 3 : Referral Traffic from Social Media

Social media websites provide a great opportunity for webmasters and bloggers, you can join groups in facebook, Big communities in Google+ and linkedIn which are relevant to your website niche. You can surely get 100′s of hits on a single post from social media sites. But keep in mind you must have follow some rules while sharing your post link on that groups like you have not violate the group rules and always join groups whaich have already 1000′s of members and closely related to your blog’s topic.

Step 4 : Commenting on Related Blogs and Forums

Find top blogs which are related to your site niche and do regular commenting on these blogs with your link. Keep in mind always write a sensible comment of at least two-three lines which are showing your participation otherwise high ranked blogs not accepted spam or short comments with links. Do commenting whether it is no-follow or do-follow, we need referral visitors, and definitely you will receive high number of traffic from that comments.

Step 5 : Submit Your Site for Reviews

There are many website which accepted new websites to review like showcase of website. Specially IT forums and hosting sites have separate section for new websites and blogs reviews. You can submit your site there and you will see how many people visit your site and reviewed it. Sometimes you will also get a smart backlink from that forums So you can considered it too for getting referral traffic.

Step 6 : Write Guest Posts for Related Blogs

Today’s guest posting trend is growing day by day in the field of blogging because it is considered a real method of getting guanine and loyal visitors. Some blogs also offer do-follow backlink with guest post which is an awesome opportunity of your newly created website, you not only receive huge amount of returning visitors but also get online reputation and a do-follow backlink. So I highly recommend you to try guest posting if you just start your new site yet.

Final Words

I give the title “Get Traffic in newly Created Website” to this post because old and well reputed sites receives enough traffic from search engines and they not even consider referral traffic but actually this post is equally helpful for all sites whether it is newly created or popular on the web. I hope you enjoyed this article and learn something new today. Don’t forget to share on social media and write comments below for your suggestions are queries. Stay tuned!

Create beautiful CSS3 Buttons for your Websites

noreply@blogger.com (Freelance Web Designer) — Tue, 28 Apr 2020 04:44:00 +0000

CSS3 is used to make beautiful, professional and light weight buttons. Nobody neglect the power of CSS in the web designing . I love to create professional designs using CSS3 commands when find free time but some time when you need some owesome design for your site or for your client website to impress him with your work you will need to use some free online tools to create desire buttons. In this post I will share 2 sites from where you can create free CSS buttons which are gennerally used in websites for Register, Login, Join us, Subscribe, Buy Now, Order or like these options.

Live Examples

TEXT TEXT TEXT

CSS Button Generator

This is best online tool to generate awesome professional buttons for your websites and blogs. No technical skills are required. Just drag n drop and select options from user friendly interface. It has built-in themes that are enough for any site, you need to select color theme, write button text, adjust other options according to your requirements and get the code. Simply paste that code in your website and you are done I personally use this tool for many sites and it is my first choice to create css3 designs.

CSS3 Buttons Creator Tool

It also same as above, it will be your second choice. Sometimes you need something different. So you can use it. It has live preview. Unlimited color choices. Easy to use and easy to customize. Simple neat and clean code is provided by this tool. You can choose any color for effects like hover, border, shadow and others. You don’t need any skills to use this tool and its also free.

Need My Help ?

There are many other online tools do the same task but they are not as simple and professional as these. So I hope you will find it worth and have fun while create beautiful designs from your creative ideas using these online free tools. Some time newbies face problems because of already created same name classes in css files, so you are always more than welcome to ask any question below regarding this post. I will surely help you otherwise it is just simple and easy to understand. So Let’s fun and share it with your friends on social media it will be a great favor from your side. Stay Tuned & Cheers.

Free Download WordPress Theme Junkie Templates for Blogger

noreply@blogger.com (Freelance Web Designer) — Tue, 28 Apr 2020 04:38:00 +0000

Theme Junkie WordPress Themes are popular and widely used by many big bloggers and webmasters because theme junkie themes are looking simple and professional. That’s why I am also using premium theme of junkie proudly on this blog . Every one who see live demos want to use these themes for their blog but what if he want to use that theme for blogger instead of WordPress ? Don’t worry we have a solution, some of our genius friends convert theme junkie WP themes for blogger templates and give you that premium templates absolutely Free of cost. So let’s review some of them. You can also download any blogger template for free.

1. Resizable Template for Blogger

Demo | Download

Resizable is a responsive design template which is easily used by any system mobile, mac, tablets etc. It comes in magazine and blogger category. It is originally created by Theme-junkie for WP but after its popularity it is created for blogger users. It has ready made adsense slots for ads placements.

2. ChannelPro Template for Blogger

Demo | Download

This is another awesome template specially for bloggers. It comes in personal blog and magazine category. It has some extra widgets and tabs for subscribe fields and social media buttons. It is very popular in junkie’s templates. It is available for bloggers now. It is SEO friendly and take less time to load.

3. FreshLife Template for Blogger

Demo | Download

I don’t need to say anything about FreshLife theme. I myself using this theme for my WordPress blog but now its also available for blogger users. It has professional and simple design comes in blogger blogs category. It has social share buttons with every post and two menu bars. Ready made widgets, SEO friendly layout and adsense ready widgets are some great features of this template which is not free for WP users but now free download for blogger

4. Video Pro Template for Blogger

Demo | Download

If you want to create a Vblog (blog for videos) using blogger then it is best for you. Many sites using this as WP theme but now you can use it for blogs. One thing it is not free this time but its not very costly you can buy it just only in $20. I include this theme in the list because it is very popular and widely used by bloggers. You can save your hosting expenditures using Google hosting but before it you have to pay little for template.

5. Delivery Template for Blogger

Demo | Download

This is also converted from Theme-junkie WP themes, It comes in magazine and personal blog category. It is best suited for News blogs, web Portals, technology blogs, fashions etc. It has three category menu bars. Two are on header and other is left sidebar. It is also simple and resembles with resizable and freshlife themes.

6. Black-Light Template for Blogger

Demo | Download

This was also created by premium theme of junkie. It is gifted to black color lovers. This template comes in the category of magazine / personal blog. It is well suited for technology blogs, gadgets reviews blogs. It has a features slider which adds 4 moons in its beauty I love to use it in my sister blog.

7. Daily-Theme for Blogger

Demo | Download

This is Daily v2.0 blogger template available for free download here. It was originally developed by theme-junkie for WordPress. It is SEO friendly layout with featured slider. It comes in magazine / personal blog / news category. It is suited for NEWS portals, tech blogs, fashion, reviews etc. I t has magazine style layout. You can easily use this template for your blog.

All the freebies provided above are linked with bloggertheme9 who created these free templates for us. I find them very useful, so I shared them with you hope you will get benefits from them and give your suggestion below. Happy Blogging with Premium freebies

Is WordPress Optimized for AdSense? How we Insert ads in WP Themes

noreply@blogger.com (Freelance Web Designer) — Tue, 28 Apr 2020 04:23:00 +0000

Google AdSense is one of the most effective tools for monetizing a website. If your website utilizes WordPress, then you can easily integrate Google AdSense into your site to create a source of new revenue. Of course, this only works for self-hosted installations, since WordPress.com blogs do not allow for advertisements except for larger volume websites. Even for those, you have to split the earnings, making it an undesirable arrangement.

There are multiple methods for integrating AdSense code into your WordPress website in order to maximize advertising revenue. This article focuses on two primary methods.

Directly Insert Code

You have the option to directly insert AdSense code into the theme itself. You can do this by adding it to the code for your theme. By editing the code for your sidebar, header or footer, you can easily slip in an appropriately formatted AdSense advertisement. For example, one of the leaderboard formats can work well in a header or footer. A skyscraper format may be necessary if it is to fit in a sidebar.

Another method for directly inserting code is to create a widget and inserting the AdSense code within that widget. Usually a small amount of trial and error is involved until you create the placement you are looking for. You can also experiment with different ad placements until your site begins to have the click-through ad rates that generate the most revenues.

Ad Injection

The Ad Injection plugin can automate the inclusion of AdSense advertisements in your website blog posts. It provides a highly customizable dashboard which allows you to set up your ad preferences to meet your needs.

The Ad Injection plugin is not necessarily the easiest tool to master. While it is highly customizable, it can be somewhat confusing for the rookie webmaster. Many of the settings are designed to cut down on click fraud or click bombing. For example, you can omit advertisements from your homepage if you prefer. Again, you can eventually discover the best fit for using this plugin through trial and error.

Ad Injection is compatible with most Premium WordPress themes as well as the usual mix of free themes. You may simply download the plugin through the WordPress dashboard, create your preferences in the settings and activate the plugin. You will need to paste your AdSense code html into the appropriate blocks in the settings in order for it to generate the proper ads.

Top 5 Websites to Learn Web Designing Completely

noreply@blogger.com (Freelance Web Designer) — Tue, 28 Apr 2020 04:15:00 +0000

Now a days its a great trend to learn Web Designing because designing of creative web pages is not just a fun but also a fast way to earn money that’s why newbies run to learn web designing which includes combination of different languages and softwares like HTML, CSS, Photoshop, JavaScript more on HTML5 and CSS3. In today’s post I will share some top websites from where you can learn this course completely with examples. I deeply worked on that sites and after investigation and learn many new things myself from that sites I am going to share with you.

1.W3Schools

Whenever we talk about learn web designing, the first website is w3schools because all the tutorials are complete and updates on this website so this is best place to learn. You can also test your codes in live editors in this website.

2.DevelopPHP

Although this is best site for PHP and web development but you can also learn all tools of web designing here. This site also have some Video Tutorials which are extremely helpful because you can learn more by watching live projects.

3.TutsPlus

This is also very good website, you can learn complete HTML and CSS within 30 days. You can learn here Photoshop too in a professional way for Free.

4.Tizag

This is also one of the best website to learn web designing. It resembles with w3schools. You can find live examples and projects with their source codes and explanations with Tips here.

5.HTMLdog

Well, I think above 4 sites are enough to learn and become expert in Web designing field but htmldog is also a good site for beginners where you can explore all the terms of HTML, CSS and JavaScript.

Tuts2Learn

I notice most of the readers are from India and Pakistan so you learn Web Designing HTML/CSS/JavaScript in Hindi and Urdu languages by watching live projects of websites. This website is newly started by one of my v.good respected friend Wali Khan. I hope you will learn many things from this site.

Final Words

I hope you will feel easy to learn website designing now. I advice you not only see tutorials but also do practicals by writing codes with your hands if you are serious to learn and become an expert in this field other you will never get success its my own experience said Best of Luck…

Move Complete Website to New Domain name Without losing Traffic and Ranking

noreply@blogger.com (Freelance Web Designer) — Tue, 28 Apr 2020 04:09:00 +0000

Moving your complete website to new domain name is very painful and difficult decision because you are actually going to change your brand name. Its easy to change hosting server. There is no fear to lose ranking, visitors and trust of your users on your brand when you change your servers but if you are going to change your domain name all these things may be affected with this act. But sometimes you have no choice and it is necessary to shift your same site to a new domain name. May be you have following reasons :

Want to change domain name because current name is too long and difficult to remember
Currently using free sub-domain and want to use top level domain name
Change brand name due to some Marketing strategy
OR may be some other reasons

I was experienced the same thing so I decided to share it with you which help you to shift your complete website to new domain without losing a single visitor, Google PR and SERP’s. Just follow all below steps.

Register Your New Domain and also Keep Your Old Domain

Before start shifting you must make plan. First of all buy domain name on which you want to move your website. If you are going to buy aged domain must take care because sometimes old domains are banned by search engines. These domains are blacklisted or affected by penalty algorithms like panda or penguin.

Upload Website data and all its files to new Server

After register your new domain, upload all files of your website in your new server. Keep in mind that you don’t delete website from your old server. Just copy all files and folders to new server. So that you have two same sites with different domains.

Redirect 301 your Old domain to New Domain

Now open .htaccess file in your old domain server. If its is not exist create it and paste the following code in it.

RewriteEngine On
RewriteBase /
RewriteCond %{HTTP_HOST} !newdomain.com$ [NC]
RewriteRule ^(.*)$ http://newdomain.com/$1 [L,R=301]

This code redirect all your old domain pages to new domain pages. Replace newdomain.com with your actual new domain name before save it.

We use 301 redirect that means your are going to shifted permanently to new domain so it will all redirect all the rankings and backlinks juice to new website and you don’t lose your Google Page Rank or Alexa Rank even Google Search Rankings are also stabled. But it takes some time and you need some patience.

Inform Google about your Shifting to New Domain

Login to your Google Webmaster tool where you verified your Old website. Now verified your new domain here and Go to Settings > Change of Address and select your site from drop down menu and submit it. Now Google webmaster knows about your shifting and it will soon replace all your old URLs with new ones.

Create and Submit Site Map to Index all your pages in Search Engines

Now generate site map using any online tool like xml-sitemaps.com and submit it to webmaster tools of Google and Bing so that they index all new pages of your website also resubmit all old sitemaps which tells all search engines about your redirection.

Be Patience, This process takes some time

As you know search engines takes some time to update index, so be patience and do relax because you done your job other will done automatically.

Update Your Backlinks where possible

During search engine process, you must try to update all possible backlinks created before for old domain. Where not possible to update , their link juice is send to your new site. When new PR update will come your site also updated with the same PR which your old site has or it may be increased if you create some new quality backlinks. Alexa rank will also comes to normal approximately after 3 months.

Test Your Websites for broken links

Test you both sites (new and old) by checking all links. Make sure there are no broken links available. Also test all redirected URLs working fine. If you find any broken link or 404 not found page, correct it immediately because when crawlers come and find any broken link it directly effect your ranking in search results. So deeply testing of your all links is necessary because during movement there are many chances to break some links.

Keep your Old Domain and Hosting for at least Next 6 Months

After complete shifting process from your old domain name to new domain, don’t lose your old domain. Google says Keep your old domain at least next 6 months because search engines needs time to index all links and replace them with your new links but I recommend you to keep active your old domain at least next 2 ,3 years or forever if you can afford it. Sometime your old clients don’t know about your new domain and they directly search your old domain name, if they don’t find you there, may be they never find you at your new brand. So keep your old domain for long time as possible.

Need My Help ?

I mentioned all steps necessary to take when shifting from one domain to new domain but if you need my help kindly ask me below in comments. I am already do this for my own website and also do many times for my clients. You may face any issue or may be you have a different scenario. So don’t feel helpless, Just post your question below I will surely help you or give you some advice on how you move your site safely. I hope you learn something new today. Stay Tuned. Cheers

Top 3 WordPress Premium Themes Free Download

noreply@blogger.com (Freelance Web Designer) — Tue, 28 Apr 2020 04:03:00 +0000

Hey friends, I am back after 3 weeks as you know I was busy in my exams. Today I bring top 3 WordPress Premium themes for you at no cost . Let me review of these themes for you then I will give you download link of each premium theme pack. I actually bought these themes for my clients and now give you for FREE. I promise I will also share some more WordPress Premium themes with you later.

1. U-Design WordPress Theme by Theme-forest Free Download

U-Design is a professional business theme originally created by ThemeForest. Its actual price is $55. It has following features.

Features of U-Design Theme

Powerful and Versatile Theme
Top seller theme in ThemeForest (Featured Theme)
Responsive Layout
Unlimited Color Skins
SEO Optimized
Flash Slider
jQuery Cycle Slider With sliding Images and Sliding Text
Desired Fonts and Font Colors
Custom Theme Widgets
Contact Page
Typography
WO-Commerce Integration Support
Complete Documentation & Support

These are some features shown in the official site but it has uncounted features. I personally used it for my client’s website.

View Live Demo

Download Link

2. Nebulae WordPress Theme by RocketTheme Free Download

Nebulae is also a best premium theme originally released by RocketTheme. It is best suited for Web Designing Companies. It is dark colored unique layout. Business theme used for multiple purposes. I also used this theme for my clients. It is also released for Joomla CMS. Its some features are given below.

Features of Nebulae Theme

Gantry Framework (a very powerful framework)
8 Preset Styles (different colors with amazing designs)
RocketTheme Plugins Styling
New RokStories Layout
New Content Typography (different designs of buletlists and tables etc)
Scrolling Widget Positions
Fusion with MegaMenu & Splitmenu
68 Widget Positions
22 Widget Variations
Javascript Form Styling
FF 4, Safari 4, Opera 10.x, IE7+ Compatible
W3C XHTML 1.0 / CSS Valid

View Live Demo

Download Link

3. ClassiPress WordPress Theme by App-theme Free Download

WordPress is not only used for blogs and business websites but also used for eCommerce and classifieds sites now. The most used Classified WordPress theme is Classipress which is released by AppTheme. So I decided to share it with you. Its original price is $99. Features are given below.

Features of Classipress Theme

Fully Customizable Front Page
Custom Fields & Forms
Membership Packages
Great Advanced Search Bar
Categories and Sub categories
Facebook Page Widget
Login with Social Networks
Coupon Code Module
Ad Listing Visitor Stats
Awesome Slider
Payment System Integration

View Live Demo

Download Link

Need any Help ?

If you need any help to download and installing themes or if you face any problem in the setup then you are more then welcome to ask in comments. I will definitely solve your issues. Happy WordPress Day with Top Premium Themes :p ! Stay Tuned with me for more freebies.

Why Good Website Design and Marketing Matters

noreply@blogger.com (Freelance Web Designer) — Mon, 27 Apr 2020 18:33:00 +0000

Our objective is quite simply to help clients of all types design websites, find new customers online, and increase sales and profits without spending more than they need to. We have put together website design and marketing plans for small businesses. Whether it be business to business websites pertaining to agriculture, farm equipment or food processing, or business to consumer e-commerce websites of our retail products and services landscape, we are ready to help you design, market, and maintain the website that will best communicate your mission.

We know that the most important aspect of success on the Internet is good search engine ranking. That is why we believe that websites should be simple and to the point. We provide text development and attractive and simple storefront design to achieve your success. We provide all aspects of Internet marketing tools. If you need to put expensive accessories like animation and audio on your website we can do that. If not, we will not try to sell you something you do not need.

We are in the business of designing, marketing and maintaining websites for clients who understand that the Internet is the way that business will be done in the future. Let us not kid ourselves. The Internet is still in it’s infancy. It will continue to grow at an astronomical rate. Even now, the Internet is the most economic and effective way for businesses to communicate to a world wide audience. Our belief is that it is better to be positioned sooner rather than later. If you are looking to make a website yourself you can use some great free online tutorials teaching you to setup an authority wordpress website however if you need some help we are here for you.

If you are not doing business online ……. you should!

If you do not have a website……we can design it!

If you have a website that is not working……we can help!

We understand the importance of the website’s design. We also understand the importance of the maintenance and marketing of the website. The goal of having a website is to create traffic.

We use many marketing techniques to attract visitors to your website. We provide the complete website service for businesses and industries. We will build your website and provide ongoing maintenance to ensure that your website remains successful.

A great looking website is wonderful……unless no one sees it!

To work, a site must generate traffic……not just look cool!

Everyone’s Going Mobile-friendly Website Design

noreply@blogger.com (Freelance Web Designer) — Mon, 27 Apr 2020 18:09:00 +0000

In the past—long before apps were a mainstream feature of day-to-day life—, companies did not consider the development of mobile-optimised websites to be of any real importance. Mobile sites were considered superfluous, a luxury add-on which only the very largest businesses would bother with. Times have changed.

The world has never been more mobile. Smartphones are no longer a fringe device for early-adopters, celebrities, and the super-rich; nowadays, in fact, it is far more common to have one than not to. The iPhone heralded in the Golden Age of mobile browsing and applications which we now enjoy, and with it came the need to radically rethink our approach to the mobile web and app design at large.

It is no longer enough to opt for a ‘that will do’ approach to mobile design. With hundreds of thousands of businesses commissioning expert design companies like Messapps to create dedicated apps solely for driving more customers to themselves, the competition is there, and the bar has been set. Mobile design—both in terms of websites and applications—requires at least as much attention, time, and investment as does your primary website.

We’ve all been there. You try to load up a website on your smartphone’s browser and find that the text is too small or isn’t loading, the images have vanished or are taking up the whole screen, and the whole site is, to be generous, a real shame. This simple frustration is often enough to push potential clients towards a competitor: if their site does the job, you had better believe that people who are used to browsing solely on their mobile device will head there before sitting through the 20-minute boot-cycle of their ancient, seldom-used PC! Having a top-quality presence in the mobile world has never been more essential, and will continue to be the backbone of many and varied businesses across all manner of professional interests and sectors. You wouldn’t settle for a poorly-designed, barely-functional primary web presence, so why—in a world in which more and more users are shifting their browsing habits to focus solely on mobile devices—would you let your mobile site ruin your brand image in one fell swoop?

The world of mobile apps is, in many ways, in the same place today that mobile websites were a few years ago. Aside from the big players, not every business has one, and people are only just cottoning on to quite how effective they can be both in terms of driving sales and, perhaps even more importantly, building brand loyalty and spreading the word as a marketing tool. With push notifications, there has never been a more direct, informal line available between the business owner and their clients: offers, reminders, news, and more can all be directed instantly before the eyes of an eager customer with just the press of a button.

If the very thought of app design and app development causes a mild panic to rise up, don’t worry! Many app design agencies exist who will take the load off your mind, and work with you to produce the very best representation of your company that can be made.

Balancing Design and Performance

noreply@blogger.com (Freelance Web Designer) — Mon, 27 Apr 2020 17:57:00 +0000

Back in the days of dial-up internet, websites were designed to be functional, but offered little in the way of aesthetics as there would be too much information for the user to download. In today’s modern world of fibre-optic broadband, designing a website packed with eye-catching visuals is a given, but it’s still important that functionality is balanced with aesthetics. If you ask the best SEO company, they will tell you that what goes on behind the scenes is just as important as what occurs visually, but they should also provide Search Engine Optimisation services that will work with your web design, and not compromise it. But getting this balance of deisgn and performance isn’t always easy.

How Do You Balance Design & Performance?

Building a website that is appealing to an online audience is vital in today’s modern world, especially with the plethora of different websites available. But it’s also important that the website can be found when the relevant keywords are entered into a search engine. In the first instance, website owners and developers should look as to who their target audience is. For example, a website offering website design services should indeed contain a portfolio of what work has been carried out in the past, as this will be the call-to-action that helps a visitor decide whether to enlist the service of that provider or not. But to be found in the first place, a website needs to function correctly.

In this regard, website owners should consider what keywords will be used when they search for website design online. There is no generic term, so different people may enter different keywords to get to where they want to be. Website owners and developers should carry out research into what keywords are being used within search engines. Content should then be created that include these keywords, while ensuring the content makes sense to the reader.

Are There Any Other Factors To Consider?

There is no generic way to create a website. Granted, many may seem similar, but website owners should always have an idea of what they expect the website to achieve. If they are enlisting the services of a website designer or an SEO company (or in some instances, both) then they need to discuss what the most important function of the website. From here, a website can be created that not only appeals to your target audience, but also contains information that can be collected when search engines crawl the site.

It’s not just the content that’s relevant as to how well a website performs. Although search engines do pick up on keywords contained within the content, this content may not necessarily appear clearly within search engine results. SEO companies will generally advise that meta tags are also completed, which will allow search engines to present a clear title, along with a synopsis that tells a potential audience as to what the website or web page is about.

Semantic markup is another important strategy, as there are a number of methods that a website owner can employ, depending on his website niche. Ensuring the correct kind of semantic markup is in place will not only ensure you are found within search engine results, but it will give a clear picture of what your website is about.

Can a Website’s Speed Be Affected by the Design?

In short, yes it can. But many designers understand how a website works, so you don’t have the sacrifice the aesthetics of your website. A website will load much quicker as long as everything behind the scenes is optimised correctly. The optimising of images can be a huge factor as to how quickly a webpage loads. Those who are designing their own website may assume that scaling the images will be enough, but unfortunately the file size remains the same. It will be more beneficial to use an image editing program. Duplicate scripts can also take its toll on a website’s loading time, so eliminating these can improve your website speed overall.

Overall, there is no need to sacrifice one aspect of your website for another, as long as a website owners knows what they want their site to do. Remember that design companies and SEO companies work with website owners daily, so more often than not, they will be fully aware of what’s need to make a website both attractive and functional.