7 Langkah mudah membuat template blogger dari nol sampai jadi -
Nah sobat kali ini saya mau share membuat template blogger dari
nol, biar lebih mudah dan tidak terlalu banyak membuat kode CSS kita
gunakan Bootstrap, untuk icon bisa pakai font awesome kamu bisa cek
contoh sederhananya disini http://jampintar.blogspot.com/,
oke langsung aja ya, jangan lupa sebelum ganti template template lama
di backup dulu ya biar kalau kenapa kenapa bisa ganti langsung dengan
template yang lama, berikut step stepnya :
1. Pertama masuk ke akun blogger kamu seperti contoh gambar :
2. Kemudian pilih template disamping kiri kamu,
3. Kemudian Klik Edit HTML
4. Kemudian Copy Paste Code Dibawah ini
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<include expiration='7d' path='/assets/**.css'/>
<include expiration='7d' path='/assets/**.js'/>
<include expiration='3d' path='/assets/**.gif'/>
<include expiration='3d' path='/assets/**.jpeg'/>
<include expiration='3d' path='/assets/**.jpg'/>
<include expiration='3d' path='/assets/**.png'/>
<meta content='no-store' http-equiv='Cache-Control'/>
<meta content='no-cache' http-equiv='Cache-Control'/>
<meta content='no-cache' http-equiv='Pragma'/>
<meta content='Fri, 18 Jul 2014 1:00:00 GMT' http-equiv='expires'/>
<meta content='index, follow, noodp, noydir' name='robots'/>
<meta content='id' name='geo.country'/>
<meta content='Gunawan Gee' name='author'/>
<meta content='1 days' name='revisit-after'/>
<meta content='Indonesia' name='geo.placename'/>
<meta content='blogger' name='generator'/>
<meta content='general' name='rating'/>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<b:include data='blog' name='all-head-content'/>
<title>
<b:if cond='data:blog.pageType == "index"'>
<data:blog.pageTitle/>
<b:else/>
<b:if cond='data:blog.pageType != "error_page"'>
<data:blog.pageName/> | <data:blog.title/>
<b:else/>
404 | <data:blog.title/>
</b:if>
</b:if>
</title>
<b:if cond='data:blog.metaDescription != ""'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
</b:if>
<b:if cond='data:blog.postImageUrl != ""'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
</b:if>
<!-- Latest compiled and minified CSS -->
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css' rel='stylesheet'/>
<!-- Optional theme -->
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css' rel='stylesheet'/>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>
<style type="text/css"><!-- /* <b:skin><![CDATA[
header li {list-style:none;}
#main{width:550px; float:left;}
#sidebar{width:200px; float:right;}
#footer li{list-style:none;}
*/]]></b:skin>
<style type='text/css'>
/*
Blogger Template Style
Name : Nama Template Anda
Date : Tanggal Pembuatan Template Ini
Updated by : Gunawan Gee/Namamu
*/
body{margin-top:60px;}
.title{font-size:16px;}
.navbar-default{background-color: #f0f0f0;border-color: transparent;}
#copyright{background:#333;}
#copyright,#copyright a{font-size:12px; color:#fff; padding:10px 0;}
#footer li{list-style:none;}
#footer{background:#ddd; padding:20px 0; margin-top:20px;}
h2.date-header {font-size: 12px;}
.date-outer {margin-bottom: 50px;}
</style>
</head>
<body>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'/>
<!-- Latest compiled and minified JavaScript -->
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'/>
</body>
</html>
5. Untuk membuat Menu, contoh kita pakai navbar bawaan bootsrap, masukan kode dibawah ini setelah kode <body>
<header>
<nav class='navbar navbar-default navbar-fixed-top'>
<div class='container'>
<!-- Brand and toggle get grouped for better mobile display -->
<div class='navbar-header'>
<button aria-expanded='false' 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='#'>Brand</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' aria-haspopup='true' class='dropdown-toggle' data-toggle='dropdown' href='#' role='button'>Dropdown <span class='caret'/></a>
<ul class='dropdown-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' role='separator'/>
<li><a href='#'>Separated link</a></li>
<li class='divider' role='separator'/>
<li><a href='#'>One more separated link</a></li>
</ul>
</li>
</ul>
<ul class='nav navbar-nav navbar-right'>
<li><a href='#'>Link</a></li>
<li class='dropdown'>
<a aria-expanded='false' aria-haspopup='true' class='dropdown-toggle' data-toggle='dropdown' href='#' role='button'>Dropdown <span class='caret'/></a>
<ul class='dropdown-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' role='separator'/>
<li><a href='#'>Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</header>
6. Kemudian kita akan buat main blog, sidebar dan footer masukan kode dibawah ini tepat setelah kode </header>
,
<div class='clearfix' id='wrapper'>
<div class='container clearfix'>
<!-- B. Isi Blog Kamu-->
<div class='col-md-9'>
<b:section class='main' id='main'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'></b:widget>
</b:section>
</div>
<!-- E. Isi Blog Kamu-->
<!-- B. Sidebar-->
<div class="col-md-3">
<b:section class='sidebar' id='sidebar' showaddelement='yes'></b:section>
</div>
<!-- E. Sidebar-->
</div>
<div id='footer'>
<div class='container clearfix'>
<div class='col-md-4'>
<ul class='link-footer'>
<li><a href='#'>Link</a></li>
<li><a href='#'>Link</a></li>
<li><a href='#'>Link</a></li>
<li><a href='#'>Link</a></li>
<li><a href='#'>Link</a></li>
<li><a href='#'>Link</a></li>
<li><a href='#'>Link</a></li>
<li><a href='#'>Link</a></li>
</ul>
</div>
<div class='col-md-4'>
<li><a href='#'>Link</a></li>
<li><a href='#'>Link</a></li>
<li><a href='#'>Link</a></li>
<li><a href='#'>Link</a></li>
<li><a href='#'>Link</a></li>
<li><a href='#'>Link</a></li>
<li><a href='#'>Link</a></li>
<li><a href='#'>Link</a></li>
</div>
<div class='col-md-4'>
<li><a href='#'>Link</a></li>
<li><a href='#'>Link</a></li>
<li><a href='#'>Link</a></li>
<li><a href='#'>Link</a></li>
<li><a href='#'>Link</a></li>
<li><a href='#'>Link</a></li>
<li><a href='#'>Link</a></li>
<li><a href='#'>Link</a></li>
</div>
</div>
</div>
<div id='copyright'>
<div class='container clearfix'>
<div class='col-md-12 text-left clearfix'>
Copyright &copy; Gunawan Gee All Right Reserved
</div>
</div>
</div>
</div>
7. Kemudian save.
Coba lihat hasilnya, template pertama kamu sudah jadi, Cuma semua
tulisan tampil untuk membuatnya menjadi auto readmore, akan dibahas
dipostingan berikutnya atau kamu bisa cari tutorialnya karena banyak
sekali versi dan cara untuk tutorial readmore ini.
Template diatas hanya sebagai acuan dasar untuk membuat template sesuai
dengan bentuk yang kamu inginkan, jika sudah terbiasa dengan css
tentunya akan sangat mudah buat sobat modifikasi.
Demikian Cara membuat template blogger dari nol sampai jadi, semoga
menjadi inspirasi dan bermanfaat buat sobat.
Author
Keyword-Tech
Date
00.36
Categories
Edit
0 komentar:
Posting Komentar