Design Blogger with W3.CSS

W3.CSS is a modern CSS framework to design Blogger blog.

Responsive, smaller and faster.
W3CSS is free, easier to learn and easier to use.
No jQuery or JavaScript library required.
Make Blogger blog super fast.
Provides CSS equality for all devices. PC, laptop, tablet, and mobile.

Add W3.CSS in Blogger

Go to Template > Edit HTML & past the code after <head> tag.

Use W3.CSS in Blogger

Add W3CSS classes for design your content.

<button class="w3-btn w3-light-grey w3-round w3-border">Button</button>

Background Color Classes

w3-red w3-pink w3-purple w3-deep-purple w3-indigo w3-blue w3-light-blue w3-cyan w3-aqua w3-teal w3-green w3-light-green w3-lime w3-sand w3-khaki w3-yellow w3-amber w3-orange w3-deep-orange w3-blue-grey w3-brown w3-light-grey w3-grey w3-dark-grey w3-black w3-pale-red w3-pale-yellow w3-pale-green w3-pale-blue

Text Color Classes

w3-text-red w3-text-pink w3-text-purple w3-text-deep-purple w3-text-indigo w3-text-blue w3-text-light-blue w3-text-cyan w3-text-aqua w3-text-teal w3-text-green w3-text-light-green w3-text-lime w3-text-sand w3-text-khaki w3-text-yellow w3-text-amber w3-text-orange w3-text-deep-orange w3-text-blue-grey w3-text-brown w3-text-light-grey w3-text-grey w3-text-white w3-text-dark-grey w3-text-black

Padding Classes

w3-padding w3-padding-tiny w3-padding-small w3-padding-medium w3-padding-large w3-padding-xlarge w3-padding-xxlarge w3-padding-jumbo w3-padding-0 w3-padding-4 w3-padding-8 w3-padding-12 w3-padding-16 w3-padding-24 w3-padding-32 w3-padding-48 w3-padding-64 w3-padding-128 w3-padding-top w3-padding-bottom w3-padding-left w3-padding-right

Margin Classes

w3-margin w3-margin-0 w3-margin-top w3-margin-bottom w3-margin-left w3-margin-right

Card Classes

w3-card w3-card-2 w3-card-4 w3-card-8 w3-card-12 w3-card-16 w3-card-24 w3-hover-shadow

Round Classes

w3-round w3-round-small w3-round-medium w3-round-large w3-round-xlarge w3-round-xxlarge w3-round-jumbo w3-circle

Float & Align Classes

w3-left w3-right w3-center w3-vertical w3-left-align w3-right-align w3-justify w3-display-topleft w3-display-topright w3-display-bottomleft w3-display-bottomright w3-display-middle w3-display-topmiddle w3-display-bottommiddle w3-top w3-bottom w3-overlay

Show / Hide Classes

w3-hide w3-show w3-hide-small w3-hide-medium w3-hide-large

Text Size Classes

w3-tiny w3-small w3-medium w3-large w3-xlarge w3-xxlarge w3-xxxlarge w3-jumbo w3-slim w3-wide

Complete W3.CSS Guide

View complete W3.CSS guide from w3schools here.

Close

Development

Blogger Development

Design

Blogger Design

Template Customize

Blogger Feature

Widget

Post Widget

Tutorials

Blogger Tutorial

Templates

Blogger Templates

nayan ad

Share

Top Navigation Menu