Hello there. The meaning of a blog is changing these days. Almost every single blog out there today has a magazine layout. And every magazine too turned into something which we call it a blog. And so here in this post I'll be teaching you on how to create a blog layout using HTML and CSS.
Bootstrap is a CSS framework from Twitter and it is open source and has the best grid system I've ever seen. You can download that from the link.
Download Bootstrap. Extract and open the folder that you extracted. Open the CSS folder and place the bootstrap.css in the folder where you would be creating your HTML files.
When you get into a site the first thing that you would take a look at is the header of the site. And so we would be creating it first. And the result would be something like the following one.
And so to get something like this type in the following and save it as index.html in the same folder where you saved your boostrap.css file.
Edit the things that you need to do in the above code.
And so the next thing that you need to do is to take care of the main post area. And this is where you blog post and the widget are would go.
The output would look like the following :
And so open up your index.html file which you saved in the previous part and paste the following code after what we typed earlier.
Well !! And that's it. Save it and open up your browser and you will have your site ready. The only thing that you need to do is to replace the content that I have typed with yours. And Hurray ! Your site is up and ready now ! Happy Blogging :D
What will we be dealing with :
Well we will be creating a single post layout using HTML and CSS and it would be having a sidebar too and it would be completely responsive. And so lets get started and see on how to do that.Things you need :
- A text editor
- Bootstrap (We will be seeing on how to get that)
Downloading Bootstrap :
Bootstrap is a CSS framework from Twitter and it is open source and has the best grid system I've ever seen. You can download that from the link.
DOWNLOAD BOOTSTRAP
Download Bootstrap. Extract and open the folder that you extracted. Open the CSS folder and place the bootstrap.css in the folder where you would be creating your HTML files.
Getting Started :
When you get into a site the first thing that you would take a look at is the header of the site. And so we would be creating it first. And the result would be something like the following one.
And so to get something like this type in the following and save it as index.html in the same folder where you saved your boostrap.css file.
<link rel = "stylesheet" href = "bootstrap.css">
<title>My New Site</title>
<body style = "background-color: #f1f1f1;">
<div style = "background-color: #365e99; height: 70px; padding: 20px; color: #fff;">
<text style = "font-family: Muli; font-size: 18px;">MY NEW SITE</text>
<ul style = "list-style: none; float: right; margin-top: 5px; font-weight: bold; font-family: Muli;">
<li style = "margin-right: 15px; display: inline;">HOME</li>
<li style = "margin-right: 15px; display: inline;">ABOUT</li>
<li style = "display: inline;">CONTACT</li>
</ul>
</div>
Edit the things that you need to do in the above code.
Post Body :
And so the next thing that you need to do is to take care of the main post area. And this is where you blog post and the widget are would go.
The output would look like the following :
And so open up your index.html file which you saved in the previous part and paste the following code after what we typed earlier.
<br><br>
<style>
p {
font-family: Muli;
font-size: 15px;
line-height: 2em;
}
</style>
<link href='http://fonts.googleapis.com/css?family=Monda' rel='stylesheet' type='text/css'>
<div class = "container">
<div class = "rows">
<div class = "col-md-8" style = "background-color: #fff; padding: 15px;">
<b><text style = "font-family: Monda; font-size: 30px; color: #364957;">How To Remove Background Noise From Video</text></b><br><br>
<i>Posted By Admin</i><br><hr>
<p>
Ever wondered how some of the youtube videos got no background noise ? The answer is simple and there are two possible answer. One. They are using a good microphone with great noise cancellation. Two. They know how to remove background noise from their audio or video. And this is exactly what we are going to see in this post.
</p>
<h3 style = "font-family: Monda;">
Convert Video To MP3 :
</h3>
<p>
If you are having a video file then you need to first convert that video file into an MP3 file and we would be removing the background noise from this mp3 file. To do so take a loot at the following steps.
<br><br>
1. Download & Install Free Video To MP3 Converter.
<br>
2. Open it up and browse for the video for which you want to remove background noise.
<br><br>
<center><img src = "image.png"></center>
<br><br>
3. Choose the destination folder and click Convert.
<br><br>
The process will proceed and the video will get converted to an MP3 file.
<br><br><hr>
<!-- Replace this with your comment box code... to get comment code visit disqus.com -->
</p>
</div>
<div class = "col-md-3 col-md-offset-1" style = "background-color: #fff; padding: 15px; padding-top: 0px;">
<h3 style = "font-family: Monda;">Calender</h3>
<img src = "calender.png" width = "100%">
<br>
<h3 style = "font-family: Monda;">Twitter</h3>
<a class="twitter-timeline" href="https://twitter.com/ms_srivathsan" data-widget-id="455611402590236672">Tweets by @ms_srivathsan</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<h3 style = "font-family: Monda;">Facebook Like Box</h3>
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fxprowebtech&width=250&height=290&colorscheme=light&show_faces=true&header=true&stream=false&show_border=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:290px;" allowTransparency="true"></iframe>
</div>
</div>
</div>
<br><br>
</body>
Well !! And that's it. Save it and open up your browser and you will have your site ready. The only thing that you need to do is to replace the content that I have typed with yours. And Hurray ! Your site is up and ready now ! Happy Blogging :D
0 comments:
Post a Comment