Fullscreen Mode
Normal Mode
Home  ›  Paduan Lengkap Membuat Template Blog untuk Pemula
Paduan Lengkap Membuat Template Blog untuk Pemula
By Admin PSP - Load

Paduan Lengkap Membuat Template Blog untuk Pemula

Posted By Add Comment Edit
Tutorial kali ini saya khususkan bagi pemula yang ingin mencoba belajar membuat template sendiri, tutorial ini hanya khusus untuk platfrom blogger saja. Pertama tama bahan yang harus digunakan adalah kerangka, kerangka tersebut akan menjadi dasaran utama sebelum membuat template, sudah saya sediakan kerangka sederhana untuk membuat template sendiri, pastikan anda buat dulu sebuah blog baru khusus hanya untuk uji coba template yang nantinya akan dijadikan sebagai bahan pengerjaan proyek template dan jangan lupa buat minimal 1 posting demo, setelah kamu membuat sebuah blog baru, silahkan kamu pilih template sembarang dlu yang sudah disediakan oleh blogger, toh nantinya template tersebut tidak akan kita pakai karena kita akan membuat template sendiri, sekarang kamu masuk pada bagian dasbord blogger, karena kita akan mengedit edit bagian template maka kamu harus pilih pada bagian menu template
Langkah pertama

Kerangka Template

Berikut ini bahan utama yang sudah saya siapkan yaitu kerangka template, salin dan tempelkan kerangka ini pada Edit HTML template kamu.
<?xml version="1.0" encoding="UTF-8" ?>


<!DOCTYPE html>
<HTML expr:class='data:blog.languageDirection + &quot; no-js rwd&quot;' expr:dir='data:blog.languageDirection'>



  <head>
    <b:include data='blog' name='all-head-content'/>
    <b:if cond='data:blog.pageType == &quot;index&quot;'>
      <title>
        <data:blog.pageTitle/>
      </title>



      <b:else/>
      <b:if cond='data:blog.pageType == &quot;error_page&quot;'>
        <title>
          404: Page Not Found ~ 
          <data:blog.title/>
        </title>
        <b:else/>
        <title>
          <data:blog.pageName/>
          ~ 
          <data:blog.title/>
        </title>
      </b:if>
    </b:if>
    <b:skin>
      <![CDATA[
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
html,body,div,span,
applet,object,iframe,
h1,h2,h3,h4,h5,h6,
p,blockquote,pre,
a,abbr,acronym,address,
big,cite,code,del,dfn,
em,img,ins,kbd,q,
s,samp,small,strike,strong,
sub,sup,tt,
var,b,u,i,center,
dl,dt,dd,
ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,embed,
figure,figcaption,
footer,header,hgroup,menu,nav,
output,ruby,
section,summary,
time,mark,audio,video {
  margin:0;
  padding:0;
  border:0;
  font-size:100%;
  font:inherit;
  vertical-align:baseline;
}

/* HTML5 display-role reset for older browsers */
article,aside,details,
figcaption,figure,footer,
header,hgroup,menu,nav,section {
  display:block;
}

body {
  line-height:1;
}

ol,ul {
  list-style:none;
}

blockquote,q {
  quotes:none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content:'';
  content:none;
}

table {
  border-collapse:collapse;
  border-spacing:0;
}

/* ===============
   FRAMEWORK START
   =============== */
body {
  font:normal normal .8125em/1.4 Arial,Sans-Serif;
  background-color:white;
  color:#333;
}

strong,b {
  font-weight:bold;
}

cite,em,i {
  font-style:italic;
}

a {
  text-decoration:none;
}

a:hover {
  text-decoration:underline;
}

a img {
  border:none;
}

abbr,
acronym {
  border-bottom:1px dotted;
  cursor:help;
}

sup,
sub {
  vertical-align:baseline;
  position:relative;
  top:-.4em;
  font-size:86%;
}

sub {
  top:.4em;
}

small {
  font-size:86%;
}

kbd {
  font-size:80%;
  border:1px solid #999;
  padding:2px 5px;
  border-bottom-width:2px;
  border-radius:3px;
}

mark {
  background-color:#ffce00;
  color:black;
}

p,blockquote,pre,
table,figure,hr,form,
ol,ul,dl {
  margin:1.5em 0;
}

hr {
  height:1px;
  border:none;
  background-color:#666;
}

h1,h2,h3,h4,h5,h6 {
  font-weight:bold;
  line-height:normal;
  margin:1.5em 0 0;
}

h1 {font-size:200%}
h2 {font-size:180%}
h3 {font-size:160%}
h4 {font-size:140%}
h5 {font-size:120%}
h6 {font-size:100%}

ol,ul,dl {margin-left:3em}
ol {list-style:decimal outside}
ul {list-style:disc outside}
li {margin:.5em 0}

dt {font-weight:bold}
dd {margin:0 0 .5em 2em}

input,
button,
select,
textarea {
  font:inherit;
  font-size:100%;
  line-height:normal;
  vertical-align:baseline;
}

textarea {
  display:block;
  box-sizing:border-box;
}

pre,
code {
  font-family:"Courier New",Courier,Monospace;
  color:inherit;
}

pre {
  white-space:pre;
  word-wrap:normal;
  overflow:auto;
}

blockquote {
  margin-left:2em;
  margin-right:2em;
  border-left:4px solid #ccc;
  padding-left:1em;
  font-style:italic;
}

table th,
table td,
table caption {
  border:1px solid;
  padding:.5em 1em;
  text-align:left;
  vertical-align:top;
}

th {
  font-weight:bold;
}

table caption {
  border:none;
  font-style:italic;
}
.hidden,[hidden] {
  display:none;
}

.invisible {
  visibility:hidden;
}

.visually-hidden {
  position:absolute !important;
  overflow:hidden;
  clip:rect(0px 0px 0px 0px);
  clip:rect(0px,0px,0px,0px);
  height:1px;
  width:1px;
  margin:-1px 0 0;
  padding:0;
  border:0;
}

.clear {
  display:block;
  clear:both;
}

.clearfix:before,
.clearfix:after {
  content:"";
  display:table;
}

.clearfix:after {
  clear:both;
}

.clearfix {
}

.pull-left {
  float:left;
}

.pull-right {
  float:right;
}

.centered {
  clear:both;
  display:block;
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}

.text-center {
  text-align:center;
}

.text-left {
  text-align:left;
}

.text-right {
  text-align:right;
}

.text-justify {
  text-align:justify;
}

.btn {
  color:white;
  background-color:black;
  /* ... */
}

.btn:hover {
  /* ... */
}

.btn:active {
  /* ... */
}
#outer-wrapper{overflow:hidden}
#main-wrapper{width:60%;float:left}
#sidebar-wrapper{width:38%;float:right}
*/]]>
    </b:skin>
  </head>
  <body expr:class='data:blog.pageType' itemscope='itemscope' itemtype='http://schema.org/WebPage'>
    <div id='outer-wrapper'>
      <!-- Disini posisi elemen outer-wrapper -->
      <header class='header-wrapper' id='header-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPHeader'>
        <b:section class='header' id='header' maxwidgets='1' showaddelement='yes'/>
      </header>
      <div id='main-wrapper' itemprop='mainContentOfPage'>
        <!-- Disini lokasi untuk posting dan komentar dan b:section dibawah ini adalah widget untuk posting dan komentar -->
        <b:section class='main' id='main' showaddelement='no'>
          <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
        </b:section>
      </div>
      <aside id='sidebar-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPSideBar'>
        <!-- Disini Lokasi sidebar blog yang berisi widget, dan kode b:section dibawah ini adalah kode untuk widget sidebar -->
        <b:section class='sidebar' id='sidebar-kanan' showaddelement='yes'/>
      </aside>
      <footer class='footer-wrapper clear' id='footer-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPFooter'>
        <!-- Disini lokasi footer, bisa di isi widget dan copyright desainer -->
        <div class='credit' id='credit'>
          Desain Template oleh : Namamu
        </div>
      </footer>
    </div>
    <!-- Akhir dari outer-wrapper -->
  </body>
</HTML>
Simpan, dan coba klik Lihat Blog pada bagian atas dasbord blogger kamu, dan lihat hasilnya, template blank putih

Menambahkan Widget Header Blog

Buatlah dulu header blog, header blog sendiri akan menampilkan Nama Blog Kamu dan deskripsi dari blog kamu
Untuk membuatnya pertama tama masuk pada bagian Tata Letak, dan klik Tambahkan Gadget pada bagian atasnya widget posting
Menambahkan Widget Header
  • Tulis Judul Blog Kamu Pada Bagian Judul Blog
  • Tulis Deskripsi Blog Kamu Pada Bagian Deskripsi Blog
Pembuatan pondasi utama sudah selesai, sekarang tinggal mempercantik tampilannya dengan menambahkan CSS pada tiap tiap wrapper

Mulai Mendesain Template

Pertama tama pasanglah dulu Framework CSS Reset ini, CSS ini akan menormalkan semua tampilan elemen HTML —kecuali elemen-elemen formulir— menjadi seragam/normal.
Buka Komentar
Tutup Komentar

0 Response to "Paduan Lengkap Membuat Template Blog untuk Pemula"

Post a Comment

Subscribe to: Post Comments (Atom)

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel