Cara Menciptakan Template Blog Sendiri Dengan Bootstrap

Cara Membuat Template Blog Sendiri dengan Bootstrap

Cara Membuat Template Blog Sendiri dengan Bootstrap. Responsive 100% dan Fast Loading. Template blogger starter-simple sederhana pisan. Tinggal dipoles di CSS.

Apa Itu Bootstrap?

Sebelum ke teknis cara menciptakan template blogger sendiri dengan bootstrap, kita kenali dulu apa itu bootstrap.

Bootstrap ialah produk Twitter untuk membangun situs web atau blog berbasis HTML dan CSS.

Bootstrap is a free and open-source front-end web framework for designing websites and web applications. It contains HTML- and CSS-based design templates.
Bootstrap makes front-end web development faster and easier. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes. (Get Bootstrap)

Menurut Wikipedia, Twitter Bootstrap ialah sebuah alat bantu untuk menciptakan sebuah tampilan halaman website yang sanggup mempercepat pekerjaan seorang pengembang website ataupun pendesain halaman website.

Sesuai namanya, website yang dibentuk dengan alat bantu ini mempunyai tampilan halaman yang sama / ibarat dengan tampilan halaman Twitter atau desainer juga sanggup mengubah tampilan halaman website sesuai dengan kebutuhan.

Twitter Bootstrap dibangun dengan teknologi HTML dan CSS yang sanggup menciptakan layout halaman website, tabel, tombol, form, navigasi, dan komponen lainnya dalam sebuah website hanya dengan memanggil fungsi CSS (class) dalam berkas HTML yang telah didefinisikan. Selain itu juga terdapat komponen-komponen lainnya yang dibangun memakai JavaScript.
Template blog yang memakai Bootstrap dijamin Mobile Friendly alias Responsive sebab orientasi kodenya memang "mobile first".

Cara Membuat Template Blog Sendiri dengan Bootstrap

Berikut ini cara Membuat Template Blog Sendiri dengan Bootstrap yang layak Anda coba. Jika akhirnya bagus, sanggup Anda jual tuh templatenya!

Tahapan Membuat Template Blog Sendiri dengan Bootstrap
'
1. Buat Blog Baru di Blogger
2. Klik Template > Edit HTML
3. Hapus SEMUA instruksi yang ada, lalu...
4. Copas instruksi berikut ini!

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<HTML>
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
<meta expr:content='data:blog.metaDescription' name='description'/>

<b:skin><![CDATA[
/*
Name: Nama Template
Author: Nama Desainer
URL: Url Blog Desainer
*/

]]></b:skin> 

</head>

<body>


<div class='bs-example'>

<nav class='navbar navbar-default'>
<div class='container-fluid'>

<div class='navbar-header'>
<button class='navbar-toggle collapsed' data-target='#bs-example-navbar-collapse-1' data-toggle='collapse' type='button'>
<span class='sr-only'>Toggle navigation</span>
<span class='icon-bar'/>
<span class='icon-bar'/>
<span class='icon-bar'/>
</button>
<a class='navbar-brand' href='#'>
<img alt='Brand' src='Logo kau / atau sanggup diganti dengan goresan pena disini'/>
</a>
</div>


<div class='collapse navbar-collapse' id='bs-example-navbar-collapse-1'>
<ul class='nav navbar-nav'>
<li class='active'><a href='#'>Link <span class='sr-only'>(current)</span></a></li>
<li><a href='#'>Link</a></li>
<li class='dropdown'>
<a aria-expanded='false' class='dropdown-toggle' data-toggle='dropdown' href='#' role='button'>Dropdown <span class='caret'/></a>
<ul class='dropdown-menu' role='menu'>
<li><a href='#'>Action</a></li>
<li><a href='#'>Another action</a></li>
<li><a href='#'>Something else here</a></li>
<li class='divider'/>
<li><a href='#'>Separated link</a></li>
<li class='divider'/>
<li><a href='#'>One more separated link</a></li>
</ul>
</li>
<li><a href='/?m=1'>Mobile View</a></li>
</ul>
<form class='navbar-form navbar-left' expr:action='data:blog.homepageUrl + "search"' role='search'>
<div class='form-group'>
<input class='form-control' name='q' placeholder='Search' type='text'/>
</div>
<button class='btn btn-default' type='submit'>Submit</button>
</form>
<ul class='nav navbar-nav navbar-right'>
<li><a href='#'>Link</a></li>
<li class='dropdown'>
<a aria-expanded='false' class='dropdown-toggle' data-toggle='dropdown' href='#' role='button'>Dropdown <span class='caret'/></a>
<ul class='dropdown-menu' role='menu'>
<li><a href='#'>Action</a></li>
<li><a href='#'>Another action</a></li>
<li><a href='#'>Something else here</a></li>
<li class='divider'/>
<li><a href='#'>Separated link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div> 

<div class='container outer-wrapper'> 

<div class='blog-header'> 
<div class='container'>
<b:section class='header' id='header1' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='(Header)' type='Header'/>
</b:section>
</div>
</div>

<div class='row'>
<div class='col-md-8 blog-main'> 
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</div>

<aside class='col-xs-4 blog-sidebar'> 
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='PopularPosts1' locked='false' title='Artikel Populer' type='PopularPosts'/>
</b:section>
</aside> 
</div> 


<div class='clear'/>

</div> 

<footer class='blog-footer'> 
<p>Copyright © <script type='text/javascript'>var creditsyear = new Date();document.write(creditsyear.getFullYear());</script> <a expr:href='data:blog.homepageUrl'><data:blog.title/></a>. All rights reserved.</p>
<p>
<a href='#'>Back to top</a>
</p>
</footer> 

</body> 

</HTML>

5. Pasang Bootstrap

5.1 Pasang di atas instruksi </head>

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"/>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"/>

5.2 Pasang instruksi berikut ini di atas instruksi </body>

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js' type='text/javascript'/>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js" type='text/javascript'/>

6. Copas instruksi berikut ini di atas kode </head>

<style type='text/css'>

/*Navigation*/
.navbar {
    border-radius:0;
}
/*Nav Brand*/
.navbar-brand img {
    width: 32px;
    height: 32px;
}
.navbar-brand {
    padding: 10px 20px;
}
/*Blog Wrapper*/
.blog-header {
    padding-top: 20px;
    padding-bottom: 20px;
    margin-left: -20px;
}
.blog-main {
    font-size: 18px;
    line-height: 1.5;
}
.blog-sidebar {
    margin:0;
}
/*Headings*/
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    margin-top: 0;
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: normal;
    color: #333;
}
/*Posts*/
.post .post-title {
    margin-bottom:0;
}
.post-body {
    margin:0 0 .75em;
    line-height:1.6em;
    font-size:15px;
}
/*Post Image*/
.post table.tr-caption-container td {
    border:none;
    padding:8px;
}
.post table.tr-caption-container, .post table.tr-caption-container img, .post img {
    max-width:100%;
    height:auto;
}
.post td.tr-caption {
    color: #333;
    font-size: 80%;
    padding: 8px 8px 8px !important;
    background-color: #eee;
    font-style: italic;
}
img {
    display: inline-block;
    max-width: 100%;
    height: auto;
}
table.tr-caption-container {
    padding:4px;
    margin-bottom:.5em
}
td.tr-caption {
    font-size:80%
}
.post table caption {
    border:none;
    font-style:italic;
}
.post table caption {
    border:1px solid #d8dde1;
    padding:.2em .5em;
    text-align:left;
    vertical-align:top;
}
/*Post Footer*/
.post-footer {
    margin:.75em 0;
    letter-spacing:.1em;
    line-height:1.4em;
    font-size: 12px;
}
/*Post Meta*/
.blog-post-meta {
    margin: 10px 0 5px;
    color: #999;
    font-size: 15px;
}
.blog-post-meta a {
    color: #999;
    border-bottom: 1px solid #eee;
    padding-bottom: 4px;
}
.blog-post-meta a:hover {
    border-bottom: 1px solid #23527c;
}
.timestamp-link {
    cursor:help;
    border-bottom: 1px solid #eee;
    padding-bottom: 4px;
}
.timestamp-link:hover {
    border-bottom: 1px solid #23527c;
}
/*Breadcrumbs and Date Header Font-size*/
.breadcrumb, .date-header {
    font-size: 13px;
}
/*SideBar*/
.sidebar .widget ul, .sidebar .widget ol {
    margin-top:0
}
.sidebar h2, .sidebar h3, .footer h2 {
    color: #333;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0 0 20px 0;
    position: relative;
    padding: 8px 15px;
    list-style: none;
    background-color: #f5f5f5;
    border-radius: 4px;
}
/*Popular Posts*/
.popular-posts ul, .popular-posts li {
    margin:0;
    padding:0;
    list-style:none
}
.popular-posts li {
    margin-bottom:.6em
}
.PopularPosts .item-snippet {
    font-size:12px;
    color:#333;
    max-height:45px;
    overflow:hidden;
}
.PopularPosts .item-thumbnail {
    transition: all 0.15s ease-in-out 0s;
    margin:0 8px 0 0;
    display:inline;
    opacity:10;
}
.PopularPosts .item-thumbnail a img {
    height:69px;
    width:69px;
    display:block;
    margin:0;
    padding:2px;
    border:1px solid #e8e8e8 !important;
}
.PopularPosts .item-thumbnail a img:hover {
    background:#00AFAF;
    border:1px solid #00AFAF !important;
}
.PopularPosts .widget-content ul li {
    padding:3px 0px !important;
    border-bottom:1px solid #e2e2e2;
}
/*Footer*/
.blog-footer {
    padding: 40px 0;
    color: #999;
    text-align: center;
    background-color: #f9f9f9;
    border-top: 1px solid #e5e5e5;
}
.blog-footer a {
    border-bottom: 1px solid #eee;
    padding-bottom: 4px;
}
.blog-footer a:hover {
    border-bottom: 1px solid #23527c;
}
/*Comments*/
#comments h4 {
    margin:1em 0;
    font-weight:bold;
    line-height:1.4em;
    text-transform:uppercase;
    letter-spacing:.2em;
}
#comments-block {
    margin:1em 0 1.5em;
    line-height:1.6em;
}
#comments-block .comment-author {
    margin:.5em 0;
}
#comments-block .comment-body {
    margin:.25em 0 0;
}
#comments-block .comment-footer {
    margin:-.25em 0 2em;
    line-height:1.4em;
    text-transform:uppercase;
    letter-spacing:.1em;
}
#comments-block .comment-body p {
    margin:0 0 .75em;
}
.deleted-comment {
    font-style:italic;
    color:gray;
}
.feed-links {
    display:none;
}
/*Responsive*/

/*Override Bootstrap's default container.*/
@media (min-width: 1200px) {
    .container {
        width: 970px;
    }
}
@media screen and (max-width: 960px) {
    .blog-main, .blog-sidebar {
        float: none;
        display: block;
        width: auto;
    }
}
</style>

7. Save Template!

Beres! Anda tinggal lengkapi dengan widget lainnya, seperti: Memasang instruksi Auto Read More supaya tampilan goresan pena halaman depan berupa ringkasan, tidak full artikel, dan Menghapus Teks Subscribe to Atom.

Demikian Membuat Template Blog Sendiri dengan Bootstrap. Saya sudah terapkan. Hasilnya: Bootstap fo Blogger. Mau? Nanti kalo sudah beres 100% dibagikan gratis.

Cek ada dulu yang sudah ada: Koleksi Template Boootsrap Gratis. Wasalam. (blogromeltea.blogspot.com).*

Sumber:
http://www.w3schools.com/bootstrap/default.asp

https://startbootstrap.com/bootstrap-resources/3

Cara Menciptakan Template Blog Sendiri Dengan Bootstrap

4/ 5

Oleh BMNG Info

BMNG Info 5:32 AM Komentar