Cara Bikin Template Blog Sendiri Bagian 2

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

bismillaahirrahmaanirrahiim

السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ

Assalamu'alaikum warahmatullahi wabarakatuh

Postingan kali ini adalah kelanjutan dari postingan sebelumnya yaitu cara bikin template blog sendiri. Kali ini kita akan membahas kode Css dan Wrapper. Membuat template blogger sebenarnya sangatlah mudah dan mengasyikan jika kita sudah menguasai css dan htmlnya, terutama arti - arti kode css ( Cascading Styles Sheet ) seperti margin, padding, border, dll. Berikut penjelasan singkatnya.

Margin : jarak/batas elemen dengan elemen lain
Padding : jarak elemen dengan isi elemen (elemen anak)
Border : border/gari tepi elemen (pengguaan solid, dotted, double dll)
Float : posisi konten ( penggunaan left, right,center, dll )
Color : warna
Background : latar belakang
Font : huruf
Font-family : jenis huruf
Font-size : ukuran huruf
Font-weigth : atribut huruf ( penggunaan bold, underline, strike dll)
Text-align : posisi text ( pengguaan left, right, center, bottom, top, $endside, dan $starside )
Text-decoration : hampir sama dengan font-weight
Img : image atau gambar
Width : lebar
Height : tinggi
Left : kiri
Right : kanan
Center : tengah;
Justify : sama rata kiri kanan
Bottom : bawah
Top : atas
Text-transform : ( penggunaan capitalize, uppercase, lowercase dan none )
Letter-spacing : jarak antar horisontal antara huruf

Sekarang kita mulai membuat template.

Langkah awal yang harus sobat lakukan untuk membuat template adalah menentukan warna latar belakang dari template tersebut. warna background bisa sobat atur pada css berikut.

body {
  background:$bgcolor; ( warna background )
  margin:0;
  color:$textcolor;
  font:x-small Georgia Serif;
  font-size/* */:/**/small;
  font-size: /**/small;
  text-align: center;
  }

ubah warna background dengan kode warna yang sobat inginkan seperti

putih : #FFFFFF

hitam : #000000

biru : #FF0000

merah : #0000FF , untuk lengkapnya bisa sobat lihat di sini.

atau bisa juga dengan gambar,dengan penggunaan seperti berikut.

background : #000000; url (url gambar) no repeat-x;

Kemudian saatnya sobat menentukan dan meyamakan ukuran lebar header-wrapper, outer-wrapper dan footer-wrapper.

#header-wrapper {
  width:660px; ( lebar header )

margin:0 auto 10px;

  border:1px solid $bordercolor;
  }

#outer-wrapper {
  width: 660px;
  margin:0 auto;

  padding:10px;

  text-align:$startSide;
  font: $bodyfont;
  }

#footer {
  width:660px;
  clear:both;
  margin:0 auto;
  padding-top:15px;
  line-height: 1.6em;
  text-transform:uppercase;
  letter-spacing:.1em;
  text-align: center;
}

• Atur ukuran width atau lebarnya dengan ukuran 900px.

Kira - kira seperti inilah kodenya.

#header-wrapper {
  width:900px; ( lebar header )

margin:0 auto 10px;

  border:1px solid $bordercolor;
  }

#outer-wrapper {
  width: 900px;
  margin:0 auto;

  padding:10px;

  text-align:$startSide;
  font: $bodyfont;
  }

#footer {
  width:660px;
  clear:both;
  margin:0 auto;
  padding-top:15px;
  line-height: 1.6em;
  text-transform:uppercase;
  letter-spacing:.1em;
  text-align: center;
}

setelah itu sekarang kita mengedit wrapper lain dalam outer-wrapper, yaitu main dan sidebar wrapper.

#main-wrapper {
  width: 410px;
  float: $startSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }

#sidebar-wrapper {
  width: 220px;
  float: $endSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

Atur lebarnya keduanya dengan memperhitungkan lebar header dan margin serta paddingnya. misalnya lebar header 900px maka lebar main-wrapper bisa sobat coba dengan 550px dan sidebar-wrappernya 350px.

550 + 350 = 900px. namun saya sangat anjurkan untuk sobat menggunakan padding dan margin ( contoh 10px ).

Berikut kodenya.

#main-wrapper {
  width: 530px;
  float: $startSide; ( main-wrapper akan berada di sisi kiri )
padding:10px;
margin-right:10px; ( memberi jarak antara main dan sidebar )
border:1px solid #000000; /* border tambahan */
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }

#sidebar-wrapper {
  width: 315px;
  float: $endSide; ( sidebar akan berada di sisi kanan )
padding:10px;
border:1px solid #000000; /* border tambahan */
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

Jadi singkatnya, keseluruhan wrappernya kira - kira seperti ini.

#header-wrapper {
  width:900px; ( lebar header )

margin:0 auto 10px;

  border:1px solid $bordercolor;
  }

#outer-wrapper {
  width: 900px;
  margin:0 auto;

  padding:10px;

  text-align:$startSide;
  font: $bodyfont;
  }

#main-wrapper {
  width: 530px;
  float: $startSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }

#sidebar-wrapper {
  width: 315px;
  float: $endSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

#footer {
  width:900px;
  clear:both;
  margin:0 auto;
  padding-top:15px;
  line-height: 1.6em;
  text-transform:uppercase;
  letter-spacing:.1em;
  text-align: center;
}

Dengan kode - kode di atas, tampilan blognya akan jadi seperti gambar berikut.

Berikut kode anjuran dari saya.

#header-wrapper{
width:900px;
margin-bottom:10px;
border:1px solid #000000;}


#outer-wrapper {
  width: 900px;
  margin:0 auto;

  padding:10px;

  text-align:$startSide;
  font: $bodyfont;
  }

#main-wrapper {
  width: 530px;
  float: $startSide;
padding:10px;
margin-right:10px;
border:1px solid #000000; /* border tambahan */
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }

#sidebar-wrapper {
  width: 315px;
  float: $endSide;
padding:10px;
border:1px solid #000000; /* border tambahan */
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

#footer {
  width:900px;
  clear:both;
  margin:0 auto;
  padding-top:15px;
  line-height: 1.6em;
  text-transform:uppercase;
  letter-spacing:.1em;
  text-align: center;
}

Tampilan untuk kode anjuran di atas seperti berikut.

Lanjut ke cara bikin template blog sendiri bagian 3.
Update Contact :
No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email : Fajarudinsidik@gmail.com NB :: Bila Sobat tertarik Ingin membuat software, membeli software, membeli source code, membeli hardware elektronika untuk kepentingan Perusahaan maupun Tugas Akhir (TA/SKRIPSI), Insyaallah Saya siap membantu, untuk Respon Cepat dapat menghubungi kami, melalui :

No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email: Fajarudinsidik@gmail.com

atau Kirimkan Private messanger melalui email dengan klik tombol order dibawah ini :

ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

Alhamdulilah hirobil alamin

وَ السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ

wassalamualaikum warahmatullahi wabarakatuh

Artikel Cara Bikin Template Blog Sendiri Bagian 2, Diterbitkan oleh scodeaplikasi pada Minggu, 04 Maret 2012. Semoga artikel ini dapat menambah wawasan Anda. Website ini dipost dari beberapa sumber, bisa cek disini sumber, Sobat diperbolehkan mengcopy paste / menyebar luaskan artikel ini, karena segala yang dipost di public adalah milik public. Bila Sobat tertarik Ingin membuat software, membeli software, membeli source code ,Dengan Cara menghubungi saya Ke Email: Fajarudinsidik@gmail.com, atau No Hp/WA : (fajar) : 085369237896, (puat) : 085267792168.