How TO — Blog Layout
Learn how to create a responsive blog layout with CSS.
Learn how to create a responsive blog layout that varies between two and full-width columns depending on screen width.
Resize the browser window to see the responsive effect:
How To Create a Blog Layout
Step 1) Add HTML:
Example
Blog Name
TITLE HEADING
Title description, Dec 7, 2017
Some text..
TITLE HEADING
Title description, Sep 2, 2017
Some text..
About Me
Some text about me in culpa qui officia deserunt mollit anim..
Popular Post
Follow Me
Some text..
Footer
Step 2) Add CSS:
Example
body font-family: Arial;
padding: 20px;
background: #f1f1f1;
>
/* Header/Blog Title */
.header padding: 30px;
font-size: 40px;
text-align: center;
background: white;
>
/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn <
float: left;
width: 75%;
>
/* Right column */
.rightcolumn float: left;
width: 25%;
padding-left: 20px;
>
/* Fake image */
.fakeimg background-color: #aaa;
width: 100%;
padding: 20px;
>
/* Add a card effect for articles */
.card background-color: white;
padding: 20px;
margin-top: 20px;
>
/* Clear floats after the columns */
.row:after content: «»;
display: table;
clear: both;
>
/* Footer */
.footer padding: 20px;
text-align: center;
background: #ddd;
margin-top: 20px;
>
/* Responsive layout — when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) .leftcolumn, .rightcolumn <
width: 100%;
padding: 0;
>
>
Tip: Go to our CSS Website Layout Tutorial to learn more about website layouts.
Tip: Go to our CSS Responsive Web Design Tutorial to learn more about responsive web design and grids.
How to Make A blog Template Design Using HTML CSS
hello viewers, in this article I will tell you how to create custom blog template design help of html CSS. this template is very simple and very attractive. you have seen lots of blog template on internet but this different by all. because we are not use a download template design. we create design by your manual coding. you can easily modify this template design to your need according. this blog theme is based on two main colours first one is blue colour and second one is black colour you can see that on this project. colour combination is main part of your template because if your colour choice is not good so that your template design is also not looks good. when you create a web template design two main things you have one is web template fonts and second one is web template colour combination. if you have chased correct colour and fonts. then your web template design looking are very attractive and unique.
now you can copy the source code in below and then paste your html document
Blog
Latest
Contact
actually want to read
