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 yaitu 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 yaitu 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 / menyerupai 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 alasannya yaitu 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 alhasil 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> <!-- End Style -->
</head>
<body>
<!-- Header -->
<div class='bs-example'>
<!-- Blog Navigation Start -->
<nav class='navbar navbar-default'>
<div class='container-fluid'>
<!-- Brand and toggle get grouped for better mobile display -->
<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>
<!-- Collect the nav links, forms, and other content for toggling -->
<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><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div> <!-- Blog Navigation End -->
<div class='container outer-wrapper'> <!-- Blog Outer Wrapper Start -->
<div class='blog-header'> <!-- Blog Header Start -->
<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'> <!-- Blog Main Wrapper Start -->
<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'> <!-- Blog Sidebar Wrapper Start -->
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='PopularPosts1' locked='false' title='Artikel Populer' type='PopularPosts'/>
</b:section>
</aside> <!-- Blog Sidebar Wrapper End -->
</div> <!-- Blog Row End -->
<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'/>
</div> <!-- Blog Content Wrapper End -->
<footer class='blog-footer'> <!-- Blog Footer Start -->
<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> <!-- Blog Footer End -->
</body> <!-- End 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 biar 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://topbloggergallery.blogspot.com//search?q=cara-membuat-auto-read-more-ringkasan
https://startbootstrap.com/bootstrap-resources/3
0 Response to "Cara Menciptakan Template Blog Sendiri Dengan Bootstrap"