Sebenarnya merancang template blog sendiri di blogspot ini adalah berdasarkan penglaman pribadi saya dimana saya telah berhasil juga membuat template blog sendiri dan template yang saya pergunakan di Blog Juragan Kontes ini adalah salah satu template yang sukses saya buat. Anda mau membuat template blog sendiri? yuk mari kita bahas cara merancang template blog sendiri di blogspot ini step by step.
Untuk mulai tahap awal membuat blog sendiri ini saya disini juga menyediakan template kosong atau blank template yang bisa anda gunakan sebagai bahan latihan membuat template blog sendiri di blogspot 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>
<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: nama template anda
Designer: nama anda
URL: url anda tulis disini
----------------------------------------------- */
]]></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://juragankontes.blogspot.com/' style="color: #ffffff">Juragan Kontes</a> 2014.</font></b></center>
</div>
</body>
</html>Nah, tempatkan kode diatas ditemplate editor yaa. Ganti semuanya dengan kode tersebut. Kemudian simpan template anda. Kemudian silahkan anda lihat template dasar tersebut. Pasti kosong alias blank bukan? Hehe.namanya saja template kosong....!!.
Sekarang waktunya kita mendesain template tersebut dan sebagai rancangan awal template kita kali ini saya akan menambahkan elemen
- Header
- Iklan Header
- Artikel
- Sidebar di kanan
- 1 Kolom Footer
Sekarang silahkan anda ganti kode ]]></b:skin> sampai dengan </html> dengan kode di bawah ini
#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>
Sekarang simpan template anda tersebut dan coba lihat gimana tampilannya?. Untuk memodifikasi template blogspot di atas nanti kita bahas dalam kesempatan lainnya.
Demikianlah postingan singkat saya tentang cara merancang template blog sendiri di blogspot ini semoga saja bisa bermanfaat bagi anda.
Anda sedang membaca Artikel tentang Merancang Template Blog Sendiri di Blogspot dan anda bisa menemukan Artikel Merancang Template Blog Sendiri di Blogspot ini dengan URL http://juragankontes.blogspot.com/2014/05/merancang-template-blog-sendiri-di.html, Terimakasih Telah membaca Artikel Merancang Template Blog Sendiri di Blogspot Anda boleh menyebar Luaskan atau MengCopy-Paste nya jika Artikel Merancang Template Blog Sendiri di Blogspot ini sangat bermanfaat bagi anda, Namun jangan lupa untuk meletakkan Link "Merancang Template Blog Sendiri di Blogspot" sebagai Sumbernya.
Di posting oleh :
, Update pada :
07.57
| ►
0
komentar