How to Create Simple Blog Posts?

#blog #wordpress #thumbnail #posts

In this tutorial you will learn creating simple blog posts in CSS and HTML.

First write CSS code like this.


body { margin:46px; padding:0; }

.container { width:1400px; }

.float-fix { float:left; margin-right:50px; display:inline; width:640px; }

.place-pic { opacity:1; }
.place-pic a:hover { opacity:0.7; }

h2.title { padding:0px 0 0px; }
h2.title a { font-family: 'Arial', sans-serif; letter-spacing:.5px; line-height:1.2em; text-decoration:none;  color:#333333;  font-size:24px; }
h2.title a:hover {  color:#ff0000; text-decoration:none; }

.time-date { font-family: 'Arial', sans-serif; letter-spacing:.5px; line-height:.2em; text-decoration:none;  color:#747474;  font-size:12px;  }
.time-date a { font-family: 'Arial', sans-serif; letter-spacing:.5px; line-height:.2em; text-decoration:none;  color:#ff0000;  font-size:12px;  }

.description-text { padding-top:23px; padding-bottom:10px; font-family: 'Arial', sans-serif; letter-spacing:.5px; line-height:26px; text-decoration:none;  color:#747474;  font-size:15px;  }

.text-link { padding:0; }
.text-link a { background:#ff0000; padding:5px 11px 5px 11px; font-family: 'Arial', sans-serif; letter-spacing:.5px; line-height:16px; text-decoration:none;  color:#ffffff;  font-size:12px;  }

Now call these CSS styles into HTML like this.


<div class="container">
<div class="float-fix">
<div class="place-pic"><a href="#"><img src="https://picsum.photos/640/290?image=28"></a></div>

<h2 class="title"><a href="#">Sample Blog Post Title</a></h2>

<div class="time-date"> 13 Nov, 2018 / <a href="#">Showcase</a> </div>

<div class="description-text"> You can write text, because this is a simple blog post for beginners to advanced user. You can write text, because this is a simple blog post for beginners to advanced user. You can write text, because this is a simple blog post.</div>

<div class="text-link"><a href="#">Read more</a></div>  
</div>


<div class="float-fix">
<div class="place-pic"><a href="#"><img src="https://picsum.photos/640/290?image=29"></a></div>

<h2 class="title"><a href="#">Sample Blog Post Title</a></h2>

<div class="time-date"> 13 Nov, 2018 / <a href="#">Showcase</a> </div>

<div class="description-text"> You can write text, because this is a simple blog post for beginners to advanced user. You can write text, because this is a simple blog post for beginners to advanced user. You can write text, because this is a simple blog post.</div> 

<div class="text-link"><a href="#">Read more</a></div>  
</div>


</div>

Now copy these code and add to your html page and test it live in action.

You can learn more cool CSS techniques - Twibbr
studio code - Twibbr