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
