Posts

Showing posts with the label CSS

Ad Blocker Detector for Google Adsense with JavaScript

Image
Advertisements are very important for any post published in internet. This is what decides the person’s revenue. But, recently adblocker system is killing revenue of the publisher because of which it also effects the creativity of that person. Today, I am providing a simple new solution for those depressed and effected persons of adblocking system. Here is a simple javascript to be included along with your website code to either hide the content of your website or show a pop-up or alert message to remove the viewers adblock plugin. Any blogger or any website management can use this code to improve your revenue of your website. This code is mainly designed for Google Adsense. Read more »

Twitter Heart Button CSS3 Animation

Today twitter has been introduced a new heart (like) button, it is actually a replacement for favorite button. I love the way twitter has implemented cool animation effect for click action. This post will explain you, how to implement this using CSS3 and Jquery. Read my previous post Facebook Like System with Jquery, MySQL and PHP , you will understand more about Like System database design and ajax functionality. Take a quick look at the live demo and click the hearts. Read more »

Google Materialize a Responsive HTML5 Framework

Image
Materialize is a Responsive CSS Framework based on Google’s Material Design Concepts. Materialize aims to bring material design to web which was initially made by Google for Android. In this tutorial I will explain what material design is and then we will build a blog home page using Materialize. What is Design Language? A design language(or design vocabulary) is an style that guides the design of a complement of products. Designers wishing to give their suite of products a unique but consistent look and feel define a design language for it, which can describe choices for design aspects such as materials, color schemes, shapes, patterns, textures, or layouts. Read more »

iOS Style Switch Button using CSS3 and Jquery.

Image
I said earlier the mobile revolution has been started, now time to build mobile web application for your web projects. Many third party platforms like Apache Cordova and Phonegap are offering that you can convert web application into native mobile application. This tutorial will help you how to design iOS style switch button component using HTML, CSS and Jquery. Specially I love CSS :before and :after pseudo-elements, this helps you to minimize the HTML code. Read more »

Facebook Style Notification Popup using CSS and Jquery.

Image
Are you looking for Facebook UI features, this post will explain you how to create a Facebook style notifications popup using Jquery, HTML and CSS, you will understand how CSS elements will helps to improve better web design. This is the most needed feature for social networking web projects to minimize and enrich the UX elements. Just few lines of code implement these concepts in your next project, take a quick look at this live demo. Read more »

HTML5 Template Design for Blog.

Image
This is right time to adopt HTML5 semantic markup tags into your website design. W3C has conducted a study of over billion websites and found that the most of common div IDs and classes are footer, header, menu, content, title and nav. HTML5 semantic markup elements that can convey the purpose of the element to developers, browser and search spider algorithms. Read more »

Responsive Web Design for Menu, Image and Advertisements

Image
This post is the continuation of my previous Responsive Web Design using CSS3 . I had explained how to design a basic responsive web page using CSS3 and Modernizr for lower version browsers. In this post we want to explain how to design responsive collapsed navigation menu, images and advertisements grids for different media devices. Read more »

Responsive Web Design using CSS3

Image
Smartphone revolution brings new features to the web development, it is time to change your website design into a responsive design instead of maintaining a separate mobile version . Responsive design will automatically adjust itself based on the screen size of the media devices. This post explain you how to use CSS 3 @media property and working with Internet Explorer using Modernizr. Read more »

Facebook Wall Script 5.0

Image
Very Long days back I released a commercial script called Wall Script 4.0, It is a rich Jquery, PHP, MySQL application and collaboration of 9lessons blog tutorials. After many requests I’m releasing Wall Script 5.0 with extra features like friend relations, user authentication, news feed with existing Wall Script 4.0 features and implemented latest Jquery plugins Don't miss the video demo. Thanks Read more »

ECommerce Menu Design with JSON Data.

Image
Now the right time to build an online selling portal, people started believing online shopping for buying things. This tutorial helps you to to speed up the most important product category navigation menu system for your ecommerce projects. I had implemented Amazon style menu with category image using PHP, MYSQL andj JQuery. Read more »

Simple Drop Down Menu with Jquery and CSS

Image
This post is very basic level Jquery and CSS implementation. I want to explain how to design simple drop down menu with CSS, HTML and Jquery. This system helps you to minimise the menus list. Just take a quick look at this post very few lines of code, use it and enrich your web projects. Read more »

Facebook Style Dynamic Timeline for Wall Script.

Image
Few months back I had posted any article about Facebook New Timeline Design HTML version using CSS and Jquery, after that I received many requests from wall script users and readers that asked to me how to convert this into dynamic with PHP and MySQL. This is an update for Wall Script 4.0 users to convert the user updates into timeline data visualization just take a look at the this live demo with multiple actions like scrolling results, commenting, updating, expanding and delete. Read more »

Gravatar Login Box Design with Jquery, CSS and PHP.

Image
I had designed a simple interesting login box with contains Gravatar image, just importing user avatar from Gravatar.com based on email ID. This post is very basic level CSS implementation and few lines of Jquery and PHP code. I hope this login box design gives special flavor to to your web project. Before trying this live demo upload your avatar at Gravatar. Read more »