Display your instagram image feed on your website

You like to add photos in your Instagram. How it would be if you can show your Instagram images on your webpage? It would be really nice. If you have basic HTML knowledge, you can implement that by following the 2 process mentioned below:

Step 1: First you need to authenticate your Instagram account and obtain user id and access token key.
User id: http://www.pinceladasdaweb.com.br/instagram/user-id/
Go to this URL and put your Instagram username and it will give your Instagram user id.
Access token key: http://www.pinceladasdaweb.com.br/instagram/access-token/
Go to this URL and login with your Instagram account, authenticate your login and it will give your Instagram access token key.

Step 2: Now paste the following code in your web page where you want to display your Instagram image feed.

In the above code put your Instagram user id, access token where it mentions (xxxx). Also, you can change the image dimension of the feed, you just need to edit the image height and width tag value.

Continue Reading

How to create a simple HTML contact form with Ajax & PHP

There are so many times we don’t want to use any PHP file (say contact.php) directly for our HTML websites to process contact form rather we prefer to use HTML contact page (say contact.html). It is not a hard task, we can do this by using Ajax or jQuery. In this tutorial I am describing the easiest way to do the same.
The form will be in any HTML extension page with validation. What we need a separate PHP file for parsing email function only.

Here are the screen shots of the forms.

ajax-contact-form-basic

ajax-contact-form-validated

Step 1: Create an HTML page (contact.html) and write the form code with jQuery library CDN and validation script file  adding.

Step 2: Add a JS file for the form validation and 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 .

Step 3: Create a php file as email.php and write down the main PHP mail function.

Demo | Download

Continue Reading

Beautify your codes online, format source codes

If you want to be a good coder then you must format your codes properly with block commenting. It will help you a lot to update or modify your code at any time. I have worked with many coders who rarely love their codes and I had so much pain to work on their codes. It is really a pain.

There are several websites from where you can beautify (format) your codes instantly. Here are some good websites.

1. prettyprinter.de

Supports: PHP, Java, C++, C, Perl, JavaScript, CSS

2. styleneat.com

Supports: CSS

3. dirtymarkup.com

Supports: HTML, CSS, JavaScript

4. jsbeautifier.org

Supports: HTML, JavaScript

The ‘Adobe Dreamweaver’ has a built-in tool for source formatting and it is awesome with perfect source format and killing of unnecessary spaces.

Continue Reading

Transitional mouse hover effect in CSS

Presently we are very much conscious about the look and feel of our blog or website. For different reason we use hyper link text or block to highlight different section. Let’s see, we can draw this by any other way without using JavaScript or jQuery. Here I will explain a simple transitional mouse hover effect with the help of purely CSS.  Check this screen shot.

transitionalhover-effect

 

In the screen shot you can see the blue background effect on normal condition and the purple background effect on mouse hover. But this is not the trick. The changing of the colour will happen with a transition effect from light blue –> light purple –> Original purple colour within 0.5 second time span.

This is the simple HTML block text where I have put the hyper-linked text inside a DIV and main part of the CSS which calls the transitional effect.

If you have any idea to make this script more cool, please post your comment here. I have tested this script on latest version of Firefox, Google Chrome, Opera, Safari and Internet Explorer 9 and it is working fine. Please don’t ask for any update of this script for Internet Explorer 7 or prior versions as those engines do not support CSS3.

Continue Reading

Printer Friendly Version Of Your Web Page Content

Some times we need to put an option in our web page so that user can take a print of the content of the page like ‘Click here to Print’ button.
For printing the content we can use JavaScript so that user can print the content of the page only and the other graphics, page layout will be ignored at the time of printing.

Here is the code snippet.

Everything is done. Now any one can get a print out of the content of your web page.

Continue Reading

Style your web form with CSS

We have to use different forms in our website for different purposes like login form, registration form and so on. Web form plays a great role for the user point of view. Simple form attracts the users more to fill up. We can design a simple User Registration form with CSS in a proper manner as like as the image below.

Continue Reading