How to add a contact form to Ghost Blogging Platform

How to add a Contact Form to Ghost_image

Currently the Ghost Blogging platform does not have an native contact form builder , so one will need to use a third party form builder service like SpiceForms to add a contact form. In this tutorial I will explain how you can easily add a contact form (or any other form) to your Ghost blog.

I will making use of the default Casper Theme for adding the contact form.

This tutorial is primarily aimed at people who use the Ghost Pro service to run their blog.

Lets startContinue Reading

How to Use HTML5 Geolocation API – A Detailed Tutorial

Disply User LOcation on a Map using Geolocation API
Today, we will create web pages that are location aware.  We will utilize the Geolocation API to fetch the user Coordinates. To make things even better we will capture the user location and then display it on Google Maps. 

 

Before we begin, lets talk a bit about the Geolcation API.

 

What is Geolocation API?

The geolocation API allows you to easily fetch the geographical position of a user. If the browser support Geolocation API, one can easily get the Longitude and Latitude just using Javascript. The Geolocation API uses  multiple sources to determine the most accurate position of the user.   The location accuray depnds upon the best location source available.
The most common sources of location information are IP address, Wi-Fi and Bluetooth MAC address, radio-frequency identification (RFID), Wi-Fi connection location, or device Global Positioning System (GPS) and GSM/CDMA cell IDs. Here is link to Wiki

Continue Reading

How to Create A Sticky Footer With CSS

Create a fixed footer with CSS

A sticky footer is a great way to encourage people to subscribe to your website’s newsletter, get more eyes on your advertisements or post short and important updates for your visitors.

The difference between a sticky header and a sticky footer is that the footer doesn’t take up “prime real estate” on your blog’s page in the same way that a header does. Visitor’s eyes will naturally make their way down to the footer as they read through your content and it’s not disruptive to their viewing.

What is a sticky footer?

Typically, it’s a bar that runs along the bottom of your webpage, even when scrolling.

Create a fixed footer with CSS

View the live demo here .

The Method

Let’s start out by creating a HTML webpage.

<html>
<head>
<title>My Webpage</title>
<style type="text/css">
</style>
</head>
<body>
Your webpage content goes here. To be able to test the functions of your fixed footer correctly, you need to have enough content so that when viewing you are required to scroll down the page to continue reading.
</body>
</html>

Next, we’ll add the footer div layer to the page.

<html>
<head>
<title>My Webpage</title>
<style type="text/css">
</head>
<body>
Your webpage content goes here. To be able to test the functions of your fixed footer correctly, you need to have enough content so that when viewing you are required to scroll down the page to continue reading.
<div id="footer">
Your fixed footer content goes here. You can use web forms, images, javascript code or whatever you want!
</div>
</body>
</html>

Now that we’ve got the basic set up for your webpage, we will rely on CSS to do the rest of the work. Use the following code in your style.css file or include it in between the script tags I have used above.

I am going to include a little styling for mine, which is optional for you.

body {
background-color: #e4e4e4; /* Styling */
font-family: 'Arial', sans-serif; /* Styling */
font-size: 17px; /* Styling */
}

#footer {
position: fixed;
bottom: 0px;
width: 100%;
overflow: visible;
z-index: 99;
height:40px;
left: 0px;
padding: 5px; /* Styling */
border-top: 2px solid #000000; /* Styling */
background-color: #ffffff; /* Styling */
text-align: center; /* Styling */
}

Not only do you now have a sticky footer on your screen, but it’s also mobile responsive. Keep in mind that you will have to add some additional styling for mobile view if you want the viewer to be able to see what is in the footer. Widths should be set to 100% and heights to auto to ensure it shrinks to size correctly.

How to Disable HyperLink using Jquery -3 Techniques

In this post I will discuss various approaches to disable a Hyperlink with Jquery.  More specifically, I will be covering 3 approaches

 

  1. Disable Links by utilizing preventDefault
  2. Disable Links by Removing the href attribute
  3. Disable Links by utilizing the click handler

Lets start

 

Continue Reading

Create Your Own Mobile Responsive Masonry (Pinterest Style) Content Grid

Traditional Grid - Create Your Own Mobile Responsive Masonry (Pinterest Style) Content Grid

With Pinterest coming out of the woodwork and taking social media by storm in the recent months, it’s apparent that a lot of it’s popularity is down to it’s aesthetically pleasing layout. Pinterest’s “grid view” style for displaying pins is what the design world refers to as a Masonry Grid.

Masonry Grids are different from normal grids in that they do not have to be the same size as each other (like traditional grids created with CSS & HTML) and they slot in perfectly with each other despite their different lengths.

Traditional Grid

Traditional Grid - Create Your Own Mobile Responsive Masonry (Pinterest Style) Content Grid

Masonry Grid

Masonry Grid - Create Your Own Mobile Responsive Masonry (Pinterest Style) Content GridContinue Reading

A list of Comment Syntax in Popular Programming Languages

Recently I had to look up how to write a comment in Python. Since I mostly develop in PHP, I had to turn to Google to find the exact syntax for commenting in Python.

At that time I got an idea that it would be cool to have a single resource which lists commenting Syntax for various Programming Languages. Thus this post was born :)

Enjoy :)

 

PHP

// This is a Comment in PHP

 

 

Python

# This is a comment in Python

Continue Reading

Manipulating dates in JavaScript – a Moment.js Tutorial

Displaying date and time in JavaScript has never been an issue but manipulating them has never been an easy task. Earlier, programmers manually made date/time realted calculations but with time, analytics became important, with demand for more complex calculations. To match up those modern requirements, we have Moment.js.Continue Reading

How to Import CSV to MySQL database with PHP

CSV files, commonly known as Excel (.xls) files, are used as spread sheets to store information in a tabular manner. Modern CSV handlers are capable of most of the functions — like calculating sum, average, median to making graphs, charts and tables. But, at times we may need to store the data in SQL format to be parsed easily, or for secure storage. SQL is not doubt the best medium for such kind of jobs. But typing or even copy-pasting each data to SQL is a tiresome job.

This is where PHP comes in action. It has the ability to parse CSV files, which allows us to do further processing. Let us see how to import the CSV to MySQL database using PHP.Continue Reading

Create Animated Loaders and Spinners with CSS3

circular loader 1

Loaders and spinners are a common sight in webpages, popping up whenever the server loads a page. For long, animated gifs have served the purpose. However, a plethora of custom made, editable CSS spinners are now available. This tutorial will walk you through the creation of basic animated loaders and how to apply elementary mathematics for various transformations, rather than a hit and trial approach.Continue Reading

Create a CSS3 Clock using no JavaScript

CSS3 has shown a true test of mettle in the field of power and speed. One can produce a pixel perfect webpage with CSS3 that will load faster, has a small overall file size and fewer HTTP requests.

CSS3 animation module provides an elegant solution to basic animation needs of webpages without requiring to trespass the realm of scripting and has the potential to be a major part of web designing practices. Using CSS3 keyframe animations, one can create smooth, maintainable animations that perform relatively well.

An example of creating an analogue clock using purely CSS would be a nice way to illustrate the power of CSS3. No Javascript is used for this purpose. This article will walk you through with various parts of the CSS3 clock, mainly focussing on the new features introduced in CSS3, like the transforms, gradients and animations.Continue Reading