Cara Membuat Template Blog Versi S_I Bag:2 (HEADER)

Serba_Inform - Oke sob, Bertemu lagi dengan Serba_Inform ^^. Pada kesempatan kali ini, Serba_Inform akan melanjutkan Postingan Cara Membuat Template Blog Versi S_I Bag:1 (DASAR)
Udah gak sabaran ? yuk simak dibawah ini ^^

Pada kesempatan kali ini, Serba_Inform akan membuat Headernya Bro :D, kemaren kan baru Code dasarnya, nah sekarang kita akan melanjutkan dengan membuat headernya :D
>> Lihat Code Dasar <<

Di tulisan berwarna merah, diganti dengan :

------------------------------------ Nama Template : Bla bla bla <<== Nama Template Agan Nantinya Designer : (NAMA AGAN) URL : (BLOG AGAN 1) URL2: (BLOG AGAN 2) ----------------------------------

Sebenarnya, yang diatas sini, gak berpengaruh dalam tampilan template, ya terserah mau bikin apa mau hapus, ini hanya sebagai pengenalan dalam aja.
Setelah itu dibawahnya masukkan Code :

body {background:#FFFFFF; padding:3px; font-family:Century gothic, Arial,Tahoma,sans-serif; color:#126A9B; font-size:13px; text-align:center;} #halaman {width:100%; clear:both; overflow:hidden; background:#FFFFFF;}

body : adalah tubuh template blog
#Halaman adalah : kotak template, jadi nanti blog kita itu, diselimuti oleh #Halaman ini. Agar terlihat rapi

Selanjutnya kita membuat top atas, gunanya sebagai Menu atas sebelum Header

/* TOP ATAS */ #tpats {width:100%; overflow:hidden; background:#000000} #tpats .kiri{float:left; display:block; max-width:50%} #tpats .kiri ul{display:block; overflow:hidden; list-style:none; margin:0; padding:0} #tpats .kiri ul li{display:block; list-style:none; border-right:1px; solid #FFFFFF; float:left} #tpats .kiri ul li a{display:block; padding:7px 13px; font-family:arial; font-size:14px; color:#FFFFFF} #tpats .kiri ul li a:hover{background:#6755E3}

Nb: TOP Atas ini sudah saya setting seperti TOP Atas blog ini . (Sederhana)

Selanjutnya, Kita membuat Headernya yang saya bikin dengan nama "TOP"

/* TOP */ #batas {width:99.2.5%; overflow:hidden; border:5px solid #FFFFFF; background:#FFFFFF;} #top {overflow:hidden; background:#FFFFFF; border:3px; solid:#000000;}

Setelah itu, Tambah Code dibawah ini

#bts {width:100%; overflow:hidden; border:7px solid #000000; background:#FFFFFF;} /* Headings */ h1,h2,h3,h4,h5,h6{font-family:BenchNine,"Bebas Neue",Bebas,"Arial Narrow",Sans-Serif;font-weight:normal;text-transform:none;margin:0}

setelah itu, dibawah <body> buatlah kode penghubung untuk menghubungkan TOP atas dan TOP (Header)
Buatlah Code ini dibawah <body>

<div id='halaman'> <div id='tpats'>
<div class='kiri'>
<ul><li><a href='/'>Home</a></li><li><a href='http://serba-inform.blogspot.com/p/about-me_26.html'>About</a></li><li><a href='http://serba-inform.blogspot.com/p/sitemap.html'>Site Map</a></li><li><a href='http://serba-inform.blogspot.com/p/contact-form.html'>Contact</a></li><li><a href='http://serba-inform.blogspot.com/p/privacy-policy-for-www.html'>Privacy Policy</a></li></ul></div></div>
<div id='batas'/>
<div id='top'>
<b:section class='header' id='header' maxwidgets='1' showaddelemenet='no'> <b:widget id='Header1' locked='true' title='Nama Blog(Header)' type='Header'>   </b:widget>
</b:section>

Maaf Code Diatas Tidak Memakai Blockquote, Karena Error, Internet Lelet

Setelah Semua Terlaksana, Semua Akan Seperti Dibawah Ini

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html >
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.title/></title>
<b:skin><![CDATA[
---------------------------------------
Nama Template : Black White Faster Template
Designer : Muhammad Kemal Al Arifin
URL : serba-inform.blogspot.com
URL2: catatankemal.blogspot.com
-------------------------------------------
body {background:#FFFFFF; padding:3px; font-family:Century gothic, Arial,Tahoma,sans-serif; color:#126A9B; font-size:13px; text-align:center;}

#halaman {width:100%; clear:both; overflow:hidden; background:#FFFFFF;}

/* TOP ATAS */
#tpats {width:100%; overflow:hidden; background:#000000}
#tpats .kiri{float:left; display:block; max-width:50%}
#tpats .kiri ul{display:block; overflow:hidden; list-style:none; margin:0; padding:0}
#tpats .kiri ul li{display:block; list-style:none; border-right:1px; solid #FFFFFF; float:left}
#tpats .kiri ul li a{display:block; padding:7px 13px; font-family:arial; font-size:14px; color:#FFFFFF}
#tpats .kiri ul li a:hover{background:#6755E3}
#tpats .kanan{float:right;display:block;max-width:50%}

/* TOP */
#batas {width:99.2.5%; overflow:hidden; border:5px solid #FFFFFF; background:#FFFFFF;}
#top {overflow:hidden; background:#FFFFFF; border:3px; solid:#000000;}

#bts {width:100%; overflow:hidden; border:7px solid #000000; background:#FFFFFF;}

/* Headings */
h1,h2,h3,h4,h5,h6{font-family:BenchNine,"Bebas Neue",Bebas,"Arial Narrow",Sans-Serif;font-weight:normal;text-transform:none;margin:0}

]]></b:skin>
</head>
<body>
<div id='halaman'>
<div id='tpats'>
<div class='kiri'>
<ul><li><a href='/'>Home</a></li><li><a href='http://serba-inform.blogspot.com/p/about-me_26.html'>About</a></li><li><a href='http://serba-inform.blogspot.com/p/sitemap.html'>Site Map</a></li><li><a href='http://serba-inform.blogspot.com/p/contact-form.html'>Contact</a></li><li><a href='http://serba-inform.blogspot.com/p/privacy-policy-for-www.html'>Privacy Policy</a></li></ul></div></div>
<div id='batas'/>
<div id='top'>
<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 id='batas'/>
<div id='bts'/>
</div>
</div>
<b:section class='main' id='main'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</div>
</body>
</html>

Oke Sekian Cara Membuat Template Blog Versi S_I Bag:2 (HEADER) Semoga Bermanfaat Untuk Kita Semua ^^
Tunggu Kelanjutannya ^^
*NB : Maaf Kurang Rapi Code CSS Dan HTML Diatas, Karena Internet Lagi Kurang Memadai (LELET) , Jadi Blm Bisa Setting Rapi :)
katakunci/keyword : template blog, bagaimana cara bikin template blog, bagaimana bikin header blog bagus dan rapi, template kemal, template header seo friendly, cara gampang bikin template seo dan keren, template fast loading

Sabtu, 04 Januari 2014

Cara Membuat Template Blog Versi S_I Bag:2 (HEADER)

22 komentar:

Lihat Juga

INFORMASI

Partner