Kode-kode botstrap sendiri terdiri dari CSS, HTML, dan JavasScript yang sudah dibuat untuk mendesain template blog responsive (mobile friendly).
Cara Membuat Template Blog Sendiri dengan Bootstrap yaitu menggabungkan kode-kode Bootstrap dengan kode template blogger (XML). Kita bisa menggunakan template bawaan blogger untuk mengambil kode-kode blogger yang digabungkan dengan bootstrap.
Cara Membuat Template Blog Sendiri dengan Bootstrap
1. Buat Blog Baru! Jangan Diterapkan di Blog yang Sudah Jadi.
2. Pilih template bawaan blogger, yang mana saja.
3. Kalo sudah jadi, klik Theme > Edit HTML > Hapus SEMUA kode
4. Masukkan kode 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: Tulis Nama Templatenya
Author: Nama Kamu
URL: Website/ blog Kamu
*/
]]></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 kamu / atau bisa diganti dengan tulisan 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>Blog template built for <a href='http://getbootstrap.com'>Bootstrap</a> by <a href='https://twitter.com/AchmadMuharya'>@AchmadMuharya</a>.</p>
<p>
<a href='#'>Back to top</a>
</p>
</footer> <!-- Blog Footer End -->
</body> <!-- End Body -->
</HTML>
5. Pasang CDN
Untuk memasangnya, buka Get Boostrap Get Started.
- Copas kode CSS (berakhiran min.css) di bawah kode <head>
- Copas kode JS (berakhiran min.js) di atas kode </body>
- Tambahkan kode link ke jQuery di atas kode </head> atau </body>
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js' type='text/javascript'/>
6. Simpan di atas kode </head>
<style type='text/css'>
/*<![CDATA[
/*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;
}
.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;
}
/*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!
Sumber
Cara Lainnya Membuat Template Blog Sendiri dengan Bootstrap:
ternyata bisa toh, izin bookmark kak mau eksperimen hehe
ReplyDelete