A Drag n Drop Form Builder
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
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.
Typically, it’s a bar that runs along the bottom of your webpage, even when scrolling.
View the live demo here .
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.
Lets start
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.
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
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
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
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
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