Cara Bikin Template Blog Sendiri Bagian 3

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

bismillaahirrahmaanirrahiim

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

Assalamu'alaikum warahmatullahi wabarakatuh

Postingan kali ini adalah kelanjutan dari postingan sebelumnya tentang cara bikin template blog sendiri bagian 2. Kali ini kita akan memfokuskan pembahasan pada komponen lain di header. Silahkan simak tutorial berikut.

hasil template pada tutorial sebelumnya.

Kira kira seperti ini kode header secara keseluruhan.

#header-wrapper{

width:900px;

margin-bottom:10px;

border:1px solid #000000;}

#header-inner {

  background-position: center;

  margin-left: auto;

  margin-right: auto;

}

#header {

  margin: 5px;

  border: 1px solid $bordercolor;

  text-align: center; ( judul blog berada di tengah, ubah kekiri dengan menggunakan kode left )

  color:$pagetitlecolor; ( untuk mengubah warna dari judul blog, ubah dengan warna yang di sukai )

}

#header h1 {

  margin:5px 5px 0;

  padding:15px 20px .25em;

  line-height:1.2em;

  text-transform:uppercase;

  letter-spacing:.2em;

  font: $pagetitlefont; ( jenis font dari judul blog )

}

#header a {

  color:$pagetitlecolor;

  text-decoration:none;

  }

#header a:hover {

  color:$pagetitlecolor; ( efek judul blog ketika di lewati pointer )

  }

#header .description {

  margin:0 5px 5px;

  padding:0 20px 15px;

  max-width:700px;

  text-transform:uppercase;

  letter-spacing:.2em;

  line-height: 1.4em;

  font: $descriptionfont; ( jenis font dari deskripsi blog )

  color: $descriptioncolor; ( warna dari deskripsi blog )

 }

#header img {
  margin-$startSide: auto;
  margin-$endSide: auto;
}

• kode berwarna biru adalah kode yang biasa di edit untuk membagi 2 kolom header serta memodifikasi konten di dalam header secara keseluruhan.
• kode berwarna ungu adalah kode untuk judul blog.
• kode berwarna merah adalah kode untuk deskripsi blog
• kode berwarna hijau adalah kode untuk efek hover pada judul blog
• kode bercetak tebal digunakan untuk mengatur tampilan image atau gambar dalam header.

ganti kode di atas dengan kode berikut.

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

#header-inner {
  background-position: center;
  margin-left: auto;
  margin-right: auto;
}

#header {
  margin: 10px;
  border: 0px solid $bordercolor;
  text-align: left;
  color:$pagetitlecolor;
}

#header h1 {
  margin:5px 5px 0;
  padding:15px 20px .25em;
  line-height:1.2em;
  text-transform:uppercase;
  letter-spacing:.2em;
  font: $pagetitlefont;
}

#header a {
  color:$pagetitlecolor;
  text-decoration:none;
  }

#header a:hover {
  color:$pagetitlecolor;
  }

#header .description {
  margin:0 5px 5px;
  padding:0 20px 15px;
  max-width:700px;
  text-transform:uppercase;
  letter-spacing:.2em;
  line-height: 1.4em;
  font: $descriptionfont;
font-size:16px;
  color: $descriptioncolor;
 }

#header img {
  margin-$startSide: auto;
  margin-$endSide: auto;
}

hasilnya akan seperti ini

Setelah membahas tentang header, sekarang kita masuk di Heading.

Seperti yang saya jelaskan pada cara bikin template blog bagian 1, bahwa heading adalah untuk mengubah tampilan judul pada blog dengan kelas h2 seperti judul artikel, judul widget pada sidebar,judul widget-footer, dll.
berikut kodenya

h2 {
  margin:1.5em 0 .75em;
  font:$headerfont;
  line-height: 1.4em;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:$sidebarcolor;
}

ubah dengan kode berikut

h2{
margin:1.5em 0 .75em;
font:$headerfont;
line-height:1.4em;
border-bottom:1px solid $bordercolor;
text-transform:uppercase;
font-size:17px;
letter-spacing:.2em;
color:#000}

 kode bercetak tebal adalah kode yang di tambahkan.


berikut tempilannya...

Pada gambar di atas sobat sobat melihat beberapa konten di postingan dan di sidebar berada dalam satu kotak, kita akan mencoba membuat area postingan secara terpisah - pisah dengan mengedit kode berikut.

.post {
  margin:.5em 0 1.5em;
  border-bottom:1px dotted $bordercolor;
  padding-bottom:1.5em;
  }
.post h3 {
  margin:.25em 0 0;
  padding:0 0 4px;
  font-size:140%;
  font-weight:normal;
  line-height:1.4em;
  color:$titlecolor;
}

ganti dengan kode berikut

.post {
margin-right:px;
margin-bottom:10px;
color:#000;
background:#ffffff;
line-height:20px;
border:1px solid #222;
padding:5px;
}
.post h1{
margin:5px;
padding-right:10px;
 font-size:20px;
border-bottom:1px solid #000000;
font-weight:normal;
line-height:1.4em;
color:$titlecolor}

selesai dengan itu sekarang kita ke sidebar...

buat sidebar dalam kotak - kotak terpisah dengan mengedit kode berikut.

.sidebar .widget, .main .widget {
  border-bottom:1px dotted $bordercolor;
  margin:0 0 1.5em;
  padding:0 0 1.5em;
 }

ganti dengan kode berikut

.main .widget{
border:0px solid $bordercolor;
background:#FFF;
padding:0 0 0em}

.sidebar .widget {
margin-bottom:10px;
color:#000;
background:#ffffff;
border:1px solid #222;
padding:3px 10px 10px 10px;
}

dengan kode di atas, tampilan template nya akan jadi seperti ini..

tunggu kelanjutannya di cara bikin template bagian 4..
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 3, Diterbitkan oleh scodeaplikasi pada Selasa, 06 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.