Panduan Membuat Template Blogger Kreasi Sendiri

Blogger merupakan salah satu solusi yang dapat dijadikan alternatif pilihan dalam membuat blog. Beberapa kelebihan yang dimiliki adalah gratis, mudah untuk dikustomisasi, dapat disisipkan kode javascript, dapat dipasangi iklan, dan sebagainya. Bagi pemula, kendala yang dihadapi dalam membuat blog menggunakan blogger / blogspot adalah mengenai tampilan. Memang, blogger menyediakan pilihan template yang dapat digunakan langsung serta mudah untuk disesuaikan menurut selera masing-masing. Tapi bagi beberapa orang, tampilan yang tersedia tidak cukup mengakomodasi kebutuhan.

Berbagai cara dilakukan untuk mengubah tampilan blogger agar tampil elegan dengan mengubah kode template. Banyak tersedia template gratis atau pun berbayar yang dapat diterapkan untuk mengubah tampilan. Tapi dengan cara ini, design yang digunakan terlihat pasaran dan tidak unik karena bisa jadi orang lain juga menggunakan design serupa.

Agar tampak unik dan berbeda dari tampilan blog orang lain, buatlah sendiri template blogger menggunakan kode yang akan dijelaskan di halaman ini tahap demi tahap. Silakan ikuti baik-baik. Jika ada yang kurang dipahami, mari diskusikan bersama.

Pada dasarnya, secara garis besar sebuah website memiliki tiga komponen utama yaitu bagian header, body, sidebar (aside), dan footer.

Selain bagian yang tampil, ada juga bagian yang tidak tampil tapi memiliki fungsi penting yaitu bagian head. Kode yang terdapat di dalam tag head berisi tag-tag seperti title, description, style, dan sebagainya.

Sebelum memulai membuat template, amankan dulu template yang sudah ada untuk mengantisipasi kegagalan yang bisa saja terjadi. Klik menu Template > Backup/Restore.

Simpan di PC sebagai backup.

Klik menu Template > Edit HTML. Hapus semua kode yang ada.

Isi kolom editor template yang sudah dikosongkan sebelumnya dengan kode bagian head berikut.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html 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>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='width=device-width, initial-scale=1.0' name='viewport'/>
<b:include data='blog' name='all-head-content'/>
<title>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<data:blog.pageTitle/>
<b:else/>
<b:if cond='data:blog.pageType != &quot;error_page&quot;'>
<data:blog.pageName/> | <data:blog.title/>
<b:else/>
Page Not Found | <data:blog.title/>
</b:if>
</b:if>
</title>
<b:skin><![CDATA[
<!-- Bagian ini diisi oleh kode CSS -->
]]></b:skin>
</head>

Isi baris berikutnya dengan kode bagian header / kepala berikut ini.

<body>
<header>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='' type='Header'></b:widget>
</b:section>
</header>

Baris berikutnya isi dengan bagian artikel berikut ini.

<article>
<b:section class='main' id='main' preferred='yes' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
</b:widget>
</b:section>
</article>

Kode berikutnya merupakan kode untuk bagian aside atau dikenal dengan sidebar.

<aside>
<b:section class='sidebar' id='sidebar' maxwidgets='' showaddelement='yes'>
</b:section>
</aside>

Berikutnya ini merupakan kode untuk bagian paling bawah, yaitu footer.

Sponsor

<footer>
<div class="copyrights" style="clear: both;">
Copyrights © 2015 Your blogger template
</div>
</footer>
</body>
</html>

Simpan kode yang telah diinput dengan menekan tombol Save Template. Silakan View blog, Kamu akan melihat tampilan satu kolom dari atas ke bawah dengan tampilan sederhana apa adanya. Untuk mengatur tampilan agar terlihat rapi, kita perlu menambahkan kode CSS di bagian yang telah dijelaskan sebelumnya.

Buka kembali editor template dengan cara yang telah dijelaskan di atas. Pada saat Kamu kembali membuka editor template, Kamu akan melihat bahwa kode-kodenya telah berubah tidak seperti yang diinput sebelumnya. Tenang saja, gak perlu panik. Kode tersebut otomatis bertambah menyesuaikan sistem.

Berikut adalah contoh kode CSS yang dapat digunakan untuk mengatur tampilan agar terlihat rapi dan terformat.

html{
position: relative;
min-height: 100%;
}
body{
margin: 0 0 40px;
}
body a{
color:#3369e8;
}
header .title{
line-height:60px;
margin: 0;
font-size:30px;
}
header {
padding:0 20px;
background: #3369e8;
color: white;
font-family:'Lato', sans-serif;
-moz-box-shadow:0 10px 6px -6px #777;
-webkit-box-shadow:0 10px 6px -6px #777;
box-shadow:0 10px 6px -6px #777;
}
header a{
color:white;
text-decoration:none;
}
.descriptionwrapper{
display:none;
}
nav{
margin:0 auto;
padding:10px 0;
clear:both;
border-top:1px solid #fff;
}
nav ul{
list-style:none;
margin:0 auto;
padding:0;
}
nav li{
display:inline;
line-height:24px;
border-left: 1px solid #3369e8;
padding:0 5px 0 10px;
}
nav li:first-child{
padding:0 5px 0 0;
border-left: none;
}
nav li a{
display:inline-block;
text-decoration:none;
text-align:center;
font-family:'Lato', sans-serif;
font-size:16px;
color:#fff;
}
nav li a:hover{
text-decoration:underline;
text-align:center;
color:#fff;
}
.wrapper{
margin:0 auto;
padding:0 20px;
}
article {
width: 64%;
float: left;
line-height:24px;
font-size:16px;
color:#333;
font-family:'Lato', sans-serif;
}
.post-title{
font-size:20px;
color:#3369e8;
}
.post-title a{
text-decoration:none;
color:#3369e8;
}
aside {
float: right;
width: 35%;
font-size:16px;
font-family:'Lato', sans-serif;
color:#333;
}
aside h3 {
border-bottom:2px solid #3369e8;
color: #3369e8;
padding: 5px 10px;
font-size:16px;
}
aside ul,ol{
padding-left:1.5em;
line-height:24px;
}
footer {
position: absolute;
left: 0;
bottom: 0;
width:100%;
line-height:40px;
margin:20px 0 0;
float: left;
background: #3369e8;
color: #fff;
font-family:'Lato', sans-serif;
font-size:16px;
-moz-box-shadow:0 -10px 6px -6px #777;
-webkit-box-shadow:0 -10px 6px -6px #777;
box-shadow:0 -10px 6px -6px #777;
}
.copyrights{
padding:0 20px;
}
@media only screen and (max-width: 768px){
article{
width:100%;
}
aside{
width:100%;
float:left;
}
header h1{
font-size:20px;
}
}

Untuk menambahkan menu / navigasi bagian atas bisa dilakukan dengan berbagai cara. Salah satunya adalah dengan menambahkan widget HTML/Javascript di halaman Layout tepat di bawah Header. Kemudian isi widget tersebut dengan kode sebagai berikut.

<nav>
<ul>
<li><a href="url-menu-1">Menu 1</a></li>
<li><a href="url-menu-2">Menu 2</a></li>
</ul>
</nav>

Selamat berkreasi, semoga berhasil.

Oleh Opan
Dibuat
Seorang guru matematika yang hobi menulis tiga bahasa, yaitu bahasa indonesia, matematika, dan php. Dari ketiganya terwujudlah website ini sebagai sarana berbagi pengetahuan yang dimiliki.

Demi menghargai hak kekayaan intelektual, mohon untuk tidak menyalin sebagian atau seluruh halaman web ini dengan cara apa pun untuk ditampilkan di halaman web lain atau diklaim sebagai karya milik Anda. Tindakan tersebut hanya akan merugikan diri Anda sendiri. Jika membutuhkan halaman ini dengan tujuan untuk digunakan sendiri, silakan unduh atau cetak secara langsung.


Protected by Copyscape CodeCogs - An Open Source Scientific Library