Lalu bagaimana solusinya?
Selalu ada solusi dari setiap permasalahan, jadi tenang sobat saya akan coba menguraikan beberapa cara membuat template blog sendiri.
Sudah siap?
Here we go..
3 Cara Membuat Template Blog Sendiri
1. Cara Membuat Template Blog dengan Pemrograman
Bagi sobat yang pernah mengenal apalagi menguasai bahasa pemrograman entah itu HTML, Javascript, Dreamweaver atau yang lainnya mungkin membuat template blog sendiri bukan suatu persoalan yang mengganggu. Pastinya mudah dan tidak banyak membutuhkan waktu lama.Bagi sobat yang ingin mencoba untuk berlatih membuat template blog sendiri dengan HTML, berikut ini merupakan template kosong yang bisa sobat modifikasi sendiri sesuai kebutuhan.
<?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>
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
<b:if cond='data:blog.isMobile'>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<b:else/>
<meta content='width=1100' name='viewport'/>
</b:if>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[
body{background:#fff ;color:#000;margin: 0 auto;font-family:Arial, sans-serif;font-size: .8em;word-wrap: break-word;}
a:link,a:visited{color:#3B5998;text-decoration:none}
a:hover{color:#3B5998;text-decoration:underline;}
a img,img{border-width:0}
#header-wrapper{width:1000px;margin:0 auto;padding:0px;}
#header{float:left;margin:0;padding:5px;}
]]></b:skin>
</head>
<body>
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelemenet='no'>
<b:widget id='Header1' locked='true' title='titl blog (Header)' type='Header'/>
</b:section>
<div style='clear:both;'/>
</div>
<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'/>
</b:section>
<div style='margin-top:700px; '>
<br/>
<center><b><font color='#ffffff'>© All Rights Resrved by <a href='http://blogoonline.blogspot.com' style="color: #ffffff">LWTHacker</a> 2015.</font></b></center>
</div>
</body>
</html>
2. Cara Membuat Template Blog dengan Tools Online Gratis
Cara membuat template blog selanjutnya dengan memanfaatkan layanan gratis penyedia tools pembuat template. Ini merupakan sebuah solusi yang cukup baik, hanya dengan waktu singkat sobat bisa memiliki template blog yang sedikit berbeda dari yang lain. Mengapa saya bilang sedikit berbeda, karena kemungkinan bisa terjadi apabila blog lain juga menggunakan template blog yang sama.Seperti halnya jika sobat menggunakan template dari hasil download di penyedia template, betul kan? Seperti itu juga dengan peraturan untuk tidak menghapus link footer dari penyedia template sebagai salah satu apresiasi atas kerja mereka dalam menghasilkan sebuah template blog. Rasanya tidak terlalu berlebihan juga untuk menghargai hasil kerja orang lain kan?
Berikut ini beberapa layanan penyedia pembuat template online gratis yang bisa sobat coba :
- Profilebrand
- DoTemplate
- Eris Template Generator
- Firdamatic
- PsycHo
Tapi jika sobat merasa keberatan untuk menempatkan link footer yang mengarah ke blog mereka, maka solusinya yaitu dengan cara dibawah ini (poin ke-3)
3. Cara Membuat Template Blog dengan Mengedit Template Default
Cara membuat template blog sendiri yang terakhir yaitu dengan cara mengedit template default dari blogger. Semakin banyaknya blog yang membahas cara memodifikasi/ mengedit template blog, semakin banyak juga kesempatan sobat untuk bisa memodifikasi template default blogger menjadi lebih cantik, seperti template yang blogoonline gunakan sekarang.Setelah mencari informasi bagaimana cara membuat template blog sendiri dan mencoba mempraktekkannya, hasil yang saya peroleh justru kegagalan. Karena jujur, saya bukan orang yang bisa bahasa pemrograman, hanya tahu sedikit-sedikit saja. Dan, cara ini merupakan cara yang paling mudah dan cocok untuk saya terapkan, hasilnya sendiri pun tidak saya duga ternyata cukup memuaskan bagi saya pribadi.
Yaitu sebuah template yang simple, seo friendly dan responsive. Seperti yang disarankan beberapa blogger tentang kriteria template blog yang disukai mesin pencari dan Google Adsense.
Lalu, bagaimana cara memodifikasi template default blogger?
Dari mana memulainya?
Berikut ini langkah-langkah cara memodifikasi template default blogger yang saya lakukan :
1. Membuat template blog menjadi responsive
a. Non aktifkan navbar pada template sobat caranya ke menu "Layout" / "Tata Letak" di dashboard sobat, kemudian klik "Edit" dan pilih "Off" setelah itu klik "Save"
b. Cari kode berikut
.post-body img, .post-body .tr-caption-container { padding: $(image.border.large.size); }
Lalu ganti dengan kode dibawah ini
.post-body img, .post-body .tr-caption-container {
padding: 0;
width:auto;
max-width:100%;
height:auto;
}
c. Berikutnya, cari kode berikut
<b:if cond='data:blog.isMobile'>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<b:else/>
<meta content='width=1100' name='viewport'/>
</b:if>
Jika sudah ketemu, lalu ganti dengan kode dibawah ini
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
Apabila kode yang sobat cari tidak ditemukan, langkah ini dilewati saja seperti yang saya lakukan juga..
d. Langkah selanjutnya cari kode </head>, jika sudah ketemu letakkan kode berikut tepat diatas </head>
<style type='text/css'>
@media screen and (max-width:1024px){
body,.content-outer, .content-fauxcolumn-outer, .region-inner {width: 100%!important;min-width:100%!important;padding:0!important}
body .navbar {height: 0!important;}
.footer-inner {padding: 30px 0px!important;}
}
@media screen and (max-width: 603px){
.main-inner .columns {padding-right: 0!important;}
.main-inner .column-right-outer {width: 100%!important;margin-right: 0!important;}
}
</style>
2. Membuat template agar seo friendly
Modifikasi template default blogger menjadi template yang lebih seo friendly bisa sobat lakukan, seperti tutorial yang disampaikan oleh mas sugeng.3. Membuat kelengkapan yang mendukung seo friendly
Apa saja kelengkapan yang mendukung seo friendly itu? Diantaranya adalah membuat Breadcrumb, Artikel Terkait, Menu Navigasi yang responsive dan keterangan blog seperti menu Tentang, Kontak dan Privacy Policy.4. Membuat halaman utama blog
Sobat bisa membuat halaman depan blog sesuai dengan keinginan sobat mau bergaya bagaimana. Bisa thumbnail dengan keterangan seperti contoh disini, atau thumbnail dengan dua kolom, atau thumbnail berupa gambar saja.Tips : Simpanlah perubahan template yang sobat modifikasi langkah demi langkah, supaya jika terjadi kesalahan atau tidak sesuai dengan keinginan sobat saat di preview, sobat tidak perlu mengulang lagi dari awal.
Demikian artikel mengenai cara membuat template blog sendiri, bila sobat mempraktekkannya dengan teliti dan berhati-hati pasti akan berhasil. Semoga bermanfaat.
Tidak ada komentar:
Posting Komentar
Silahkan Berkomentar dengan :
1. Bahasa Indonesia yang baik dan benar
2. Tutur bahasa yang sopan dan santun
3. Tidak mencantumkan alamat url apalagi link aktif
4. Sesuai isi artikel ( bukan sekedarnya )
Maaf, komentar akan saya hapus jika tidak sesuai dengan peraturan diatas.
Mohon maaf juga apabila komentar tidak muncul segera, dikarenakan tidak selalu online dan kesibukan offline lainnya. Terima kasih atas perhatian dan pengertiannya.