Cara membuat template blogspot sendiri - Template adalah perwujudan dari tampilan sebuah blog. Template yang unik tentu menjadi ciri khas tersendiri bagi sebuah pemilik blog. Nah bagi anda yang ingin belajar membuat template sendiri saya ucapkan selamat karena saat ini anda telah berada di tempat yang tepat. Blog Hoky kali ini akan mencoba mengulas cara membuat template blogspot dengan rancangan sendiri dan buat anda yang telah mahir tentunya postingan ini tidak akan berguna bagi anda namun bagi mereka yang baru belajar membuat blog dan ingin juga belajar mendesain sendri template blog kiranya postingan ini akan menjadi sangat berguna.
Sebagai modal membuat template blogspot sendiri ini saya berikan kode blank template (template kosongan) yang nanti kemudian kita akan modifikasi dan inilah yang nanti kita jadikan sebagai cara belajar membuat template blogspot sendiri tersebut.
Kode template kosong (blank template source code)
<?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[/*
-----------------------------------------------
Blogger Template Style
Name: Contoh Template
Designer: BlogHoky
URL: http://bloghoky.blogspot.com/
----------------------------------------------- */
]]></b:skin>
</head>
<body>
<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://Lwthacking.blogspot.com' style="color: #ffffff">LWTHacker</a> 2013.</font></b></center>
</div>
</body>
</html>
Selanjutnya adalah silahkan cari dan klik menu template di sebelah kiri halaman dasbor blogger anda dan lalu klik tombol html. Lihat gambar!
Lalu lakukan copy kode template kosongan di atas dan paste kan di halaman html tersebut dan jangan lupa simpan.Silahkan anda lihat hasilnya! Kosong khan? yap namanya saja template kosongan jadi belum ada isi apa pun.
Selanjutnya silahkan copy kode bagian body, kode tampilan link, dan kode tampilan link bergambar di bawah dan paste kan kode tersebut di atas ]]></b:skin>
body{background:#fff ;color:#000;margin: 0 auto;font-family:Arial, sans-serif;font-size: .8em;word-wrap: break-word;}Tahapan selanjutnya adalah coba kita akan belajar membuat header blog. Untuk memasang header blog maka disini kita memerlukan kode CSS nya dan kemudian memasang kode html untuk header-nya. Kode CSS biasanya dipasang di atas kode ]]></b:skin> sedangkan kode html nya dipasang di bawah <body>
a:link,a:visited{color:#3B5998;text-decoration:none}
a:hover{color:#3B5998;text-decoration:underline;}
a img,img{border-width:0}
Membuat header blog di template buatan sendiri, langkahnya adalah :
Copy code CSS header berikut dan pasang di atas kode ]]></b:skin>
#header-wrapper{width:1000px;margin:0 auto;padding:0px;}Kode di atas adalah kode CSS yang terdapat pada bagian atas template yang berisi judul dan deskripsi blog dan merupakan bagian pertama yang di baca search engine google.
#header{float:left;margin:0;padding:5px;}
Lalu copy code html di bawah ini dan pasang kode atau paste kode tersebut di bawah kode <body>. adalah sebagai berikut
<div id='header-wrapper'>Kode di atas merupakan kode html dari 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>
Simpan dan lihat hasilnya.Apakah sekarang blog kamu sudah memiliki header? Jika sukses maka selamat sekarang anda sudah bisa belajar membuat template blogspot sendiri.Mudah bukan? selanjutnya untuk bagaimana menampilkan posting atau sidebar anda tinggal pelajari sendiri karena dasar dasarnya sudah saya bahas disini tinggal anda mengembangkan sendiri. Sebagai pelengkap bahan belajar membuat template blogspot sendiri ini, berikut di bawah ini saya akan berikan kode template dua kolom dan coba anda pelajari. e creative man!!.
Baik agar tampilan blog kamu lebih bagus dan lengkap kembali, silahkan copy paste aja template 2 (dua) kolom yang saya bagi di posting ini. Template dua kolom ini telah memiliki header, posting dan sidebar tinggal anda modifikasi sesuai dengan keinginan anda.
<?xml version="1.0" encoding="UTF-8" ?>Modifikasi template misalkan menambahkan menu horisontal keren, memasang bredcrumb yang seo friendly atau memasang related post seo dan fast loading akan saya bahas dalam kesempatan lainnya karena jika ini saya bahas juga dalam posting ini tentunya akan menjadi sangat panjang. So ditunggu ya!!.
<!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[/*
-----------------------------------------------
Blogger Template Style
Name: Contoh Template
Designer: BlogHoky
URL: http://bloghoky.blogspot.com/
----------------------------------------------- */
#Attribution1,#Navbar1{height:0;visibility:hidden;display:none}
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;width:25%;margin:0;padding:5px;}
#header-ads{float:right;width:73%;margin:0;padding:5px;}
#content{margin:0 auto;width:1000px;background:#FFF;}
#posting{float:left;width:67%;margin:0;padding:5px;}
#sidebar{float:right;width:30%;margin:0;padding:5px;}
#footer{width:1000px;margin:0 auto;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>
<b:section class='header-ads' id='header-ads' preferred='yes'/>
<div style='clear:both;'/>
</div>
<div id='content'>
<div id='posting'>
<b:section class='main' id='main'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</div>
<div id='sidebar'>
<b:section class='isi-sidebar' id='isi-sidebar' preferred='yes'/>
</div>
<div style='clear:both;'/>
<div id='footer'>
<b:section class='isi-footer' id='isi-footer' preferred='yes'/>
</div>
</div>
</body>
</html>
Oke, demikian sedikit ulasan tentang cara membuat template blogspot sendiri dan tentunya tutorial membuat template blogspot sendiri ini akan saya sambung di posting berikutnya jadi jangan lupa bookmark dulu blogHoky ini ya dan sekali lagi saya ucapkan semoga saja apa yang saya bahas disini bisa bermanfaat bagi anda.
0 Response to "Membuat Template Blogspot Sendiri"
Posting Komentar
Kunjungi Juga Blog Admin
http://brofariz.xyz