Keeping your users and customers up to date and providing a medium for interaction is essential to success on the web. Although the concept sounds great, the design of the blog, and the quality of its content, will determine the success or failure of your blog. In this article, Solodev will provide you with the steps and code to create a blog for your website.
For detailed instructions, view Solodev's Creating a Blog with Bootstrap article.
Check out a working example of the Blog Overview Page on JSFiddle. Check out a working example of the Blog Detail Page on JSFiddle.
The blog overview page contains the basic HTML markup below.
<header class="header--type2" data-background="images/blog.jpg" data-height="35%" style="background-image: url(images/blog.jpg); min-height: 303.8px; -webkit-user-select: auto;">
<div class="inner" style="-webkit-user-select: auto;">
<div class="container" style="-webkit-user-select: auto;">
<div class="row" style="-webkit-user-select: auto;">
<div class="col-md-10" style="-webkit-user-select: auto;">
<section class="ct-page_title" style="-webkit-user-select: auto;">
<div class="h1" style="-webkit-user-select: auto;">
Blog
</div>
<div class="ct-page_title-content" style="-webkit-user-select: auto;"></div>
</section>
</div>
</div>
</div>
</div>
</header>
<div class="container ct-u-paddingTop40 ct-u-paddingBottom100">
<div class="row">
<div class="col-md-12 ct-content">
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="theBlogGrid">
<ul class="row blogGrid" id="blogGrid">
<li class="col-xs-12 col-sm-6 col-md-3 blog-inner">
<div class="imgHolder">
<img alt="Building in WebCorpCo CMS 8" class="grid-image img-responsive" src="images/blog-4.jpg">
<div class="description-box animateBottomName">
<p>Building in WebCorpCo CMS 8</p>
</div>
</div>
<div class="clearfix"></div>
</li>
<li class="col-xs-12 col-sm-6 col-md-3 blog-inner">
<div class="imgHolder">
<img alt="WebCorpCo Named to Inc. 5000" class="grid-image img-responsive" src="images/blog-3.jpg">
<div class="description-box animateBottomName">
<p>WebCorpCo Named to Inc. 5000</p>
</div>
</div>
<div class="clearfix"></div>
</li>
<li class="col-xs-12 col-sm-6 col-md-3 blog-inner">
<div class="imgHolder">
<img alt="What's New in WebCorpCo CMS 8" class="grid-image img-responsive" src="images/blog-2.jpg">
<div class="description-box animateBottomName">
<p>What's New in WebCorpCo CMS 8</p>
</div>
</div>
<div class="clearfix"></div>
</li>
<li class="col-xs-12 col-sm-6 col-md-3 blog-inner">
<div class="imgHolder">
<img alt="WebCorpCo CMS 8 Launches" class="grid-image img-responsive" src="images/blog-1.jpg">
<div class="description-box animateBottomName">
<p>WebCorpCo CMS 8 Launches</p>
</div>
</div>
<div class="clearfix"></div>
</li>
</ul>
<div class="blue-border blog-blue-border"></div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
The blog includes a blog detail page which contains the basic HTML markup below.
<header class="header--type2" data-background="images/blog.jpg" data-height="35%" style="background-image: url(images/blog.jpg); min-height: 303.8px; -webkit-user-select: auto;">
<div class="inner" style="-webkit-user-select: auto;">
<div class="container" style="-webkit-user-select: auto;">
<div class="row" style="-webkit-user-select: auto;">
<div class="col-md-10" style="-webkit-user-select: auto;">
<section class="ct-page_title" style="-webkit-user-select: auto;">
<div class="h1" style="-webkit-user-select: auto;">
Blog
</div>
<div class="ct-page_title-content" style="-webkit-user-select: auto;"></div>
</section>
</div>
</div>
</div>
</div>
</header>
<div class="container ct-u-paddingTop40 ct-u-paddingBottom100">
<div class="row">
<div class="col-md-12 ct-content">
<div class="blog-wrapper">
<h1>
What's New in WebCorpCo CMS 8
</h1>
<img alt="images/blog-2.jpg" class="img-responsive pull-right blog-inner" src="images/blog-2.jpg">
<p>
<b>Orlando, Florida, August 13, 2015</b> -- Inc. magazine today ranked WebCorpCo as the 1,870th fastest growing company on the 34th annual Inc. 5000 and 9th fastest in the state of Florida. The Inc. 5000 is an exclusive ranking of the nation's fastest-growing private companies and represents the most comprehensive look at the most important segment of the economy-America's independent entrepreneurs. Companies such as Yelp, Pandora, Timberland, Dell, Domino's Pizza, LinkedIn, Zillow, and many other well-known names gained early exposure as members of the Inc. 5000.
</p>
<p>
"We are honored to have made the Inc. 5000 and see it as another validation point of our overall business strategy," says Shawn Moore, Founder and CTO of WebCorpCo. "WebCorpCo is on the move and will be making some exciting announcements in the weeks ahead - we expect 2015 and 2016 to be huge years for us as we execute on the most important initiatives in our company's history."
</p>
<p>
The 2015 Inc. 5000 is the most competitive crop in the list's history. The average company on the list achieved a mind-boggling three-year growth of 490%. The Inc. 5000's aggregate revenue is $205 billion, generating 647,000 jobs over the past three years. "The story of this year's Inc. 5000 is the story of great leadership. In an incredibly competitive business landscape, it takes something extraordinary to take your company to the top," says Inc. President and Editor-In-Chief Eric Schurenberg. "You have to remember that the average company on the Inc. 5000 grew nearly six-fold since 2012. Business owners don't achieve that kind of success by accident." Founded in 2006, WebCorpCo is an enterprise website content management software developer.
</p>
<p>
WebCorpCo CMS customers include the Florida Department of Education, MobileHelp, the Dr. Phillips Center for the Performing Arts, and the CNL family of companies. WebCorpCo has earned several major awards in the past year. The Miami Beach Information mobile app was judged to be 2014's best travel destination app by Travel Weekly and earned the Gold Magellan award, finishing ahead of the silver-award winning Hotwire.com app. More about Inc. and the Inc. 500|5000
</p>
</div>
</div>
</div>
</div>
</div>
All required CSS is contained in blog-overview.css
Both blog-overview.html and blog-detail.html include the following third party resources.
<link href="blog-overview.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent