Uchiha Obito Blogger Template Seo Friendly

Uchiha Obito Blogger Template Seo Friendly / Akatsuki Obito - Sobat penggemar berat serial anime naruto??? nah kali ini berhubung ada kesempatan, ane akan kasih template keren yang saya beri nama Obito Uchiha Template Seo Friendly. Template ini sengaja saya buat karena penasanrannya saya akan kemisteriusan karakter tokoh obito dalam serial naruto.

Template ini bisa di bilang adalah salah satu template kebanggan saya, di dalamnya telah di pasang navigasi breadcrumb, readmore otomatis, related post dan lain - lain. Background di template ini di ambil dari profilebrand.

Berikut screenshot templatenya.

sobat yang tertarik dengan Template Uchiha Obito ini silahkan di download..

DEMO / DOWNLOAD

Cara Bikin Template Blog Sendiri Bagian 3

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..

Cara Bikin Template Blog Sendiri Bagian 2

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.

Cara Bikin Template Blog Sendiri

Cara Bikin Template Blog Sendiri - Template blog buatan sendiri adalah kebanggan bagi setiap blogger, Kali ini saya akan kasih tips membuat template blog sendiri yang saya pelajari selama mengutak - atiktemplate. Template yang akan kita gunakan adalah template minima.

Mengapa saya menggunakan template minima?? seperti kita ketahui bersama bahwa template minima adalah template tata letak yang paling banyak di gunakan para blogger dalam ber eksperimen. Berbeda dengan templae tata letak lain, seperti rounder, template minima mempunyai kode css yang tidak rumit dan tentu saja mudah di edit. Karna itu, tanpa basa - basi silahkan sobat ikuti tutorial membuat template blog sendiri berikut.

Pertama - tama kita membahas dulu bagian paling mendasar dari pembuatan template blog, yaitu pengenalan akan bagian - bagian template blogger.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Merupakan deklarasi file XHTML pada template Blogger dengan jenis Strict. XHTML jenis Strict digunakan untuk membuat halaman yang layout dan formatnya dikontrol penuh oleh CSS. Pada deklarasi ini tidak menggunakan tag font dan table

<head>
    <b:include data='blog' name='all-head-content'/>
    <title><data:blog.pageTitle/></title>
    <meta expr:content='data:blog.metaDescription' name='description'/>
    <b:skin><![CDATA[/*

Bagian kepala atau head template blog yang berisi judul blog dan awal dari kode CSS. Di sinilah tempat untuk meletakkan meta tag baik deskripsi, keyword, atau meta - tag lainnya.

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

Body adalah bagian paling dasar dari bagian-bagian template lainya, body pada template blog biasanya memenuhi halaman dari browser baru setelah itu tersusun bagian-bagian lainya.

a:link {
  color:$linkcolor;
  text-decoration:none;
  }

Kode ini untuk mengubah tampilan link pada template blog Anda.

a:visited {
  color:$visitedlinkcolor;
  text-decoration:none;
  }

Ini menubah tampilan link yang pernah di kunjungi

a:hover {
  color:$titlecolor;
  text-decoration:underline;
}

 Merubah tampilan link ketika pointer di atas link

a img {
  border-width:0;
  }

Mengubah tampilan link bergambar



/* Header
-----------------------------------------------
 */

#header-wrapper {
  width:660px;
  margin:0 auto 10px;
  border:1px solid $bordercolor;
  }

Terdapat pada bagian atas template yang berisi judul dan deskripsi blog dan merupakan bagian pertama yang di baca serach engine.

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

mengubah tampilan header bagian dalam.

#header {
  margin: 5px;
  border: 1px solid $bordercolor;
  text-align: center;
  color:$pagetitlecolor;
}

Mengubah tampilan judul blog dan deskripsi blog secara keseluruhan

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

Mengubah tampilan judul dan deskripsi blog tingkat 1

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

Mengubah tampilan link yang terdapat pada header

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

Mengubah tampilan link pada header jika pointer mouse berada di atas link.

#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;
  color: $descriptioncolor;
 }

Mengubah tampilan deskripsi blog yang terdapat pada header. Biasanya pada tingkat 2 yaitu h2

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

Mengubah tampilan gambar header.

/* Outer-Wrapper
----------------------------------------------- */

#outer-wrapper {
  width: 660px;
  margin:0 auto;
  padding:10px;
  text-align:$startSide;
  font: $bodyfont;
  }

berisi seluruh wrapper seperti header-wrapper, main-wrapper, sidebar-wrapper,  footer-wrapper dan content-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 */
  }

 adalah area postingan ( bagian yang dalamnya adalah artikel )

#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 */
}

Berfungsi sebagai tempat widget/gadget yang sobat pasang baik widget dari pihak blogger atau melibatkan pihak ketiga dengan fasilitas HTML/Javascript.


/* Headings
----------------------------------------------- */

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

Kode CSS ini mengubah tampilan judul pada blog dengan kelas h2 seperti judul artikel, judul widget pada sidebar,judul widget-footer, dll.

sekarang kita masuk ke bagian post nya.


/* Posts
-----------------------------------------------
 */

h2.date-header {
  margin:1.5em 0 .5em;
  }

Mengubah tampilan tanggal artikel.

.post {
  margin:.5em 0 1.5em;
  border-bottom:1px dotted $bordercolor;
  padding-bottom:1.5em;
  }

Mengubah tampilan artikel blog.

.post h3 {
  margin:.25em 0 0;
  padding:0 0 4px;
  font-size:140%;
  font-weight:normal;
  line-height:1.4em;
  color:$titlecolor;
}

Mengubah tampilan judul artikel blog.

.post h3 a, .post h3 a:visited, .post h3 strong {
  display:block;
  text-decoration:none;
  color:$titlecolor;
  font-weight:normal;
}

Mengubah tampilan link judul artikel.

.post h3 strong, .post h3 a:hover {
  color:$textcolor;
}

mengubah tampilan link judul artikel ketika di lewati pointer.

.post-body {
  margin:0 0 .75em;
  line-height:1.6em;
}

Mengubah tampilan bagian posting.

.post-body blockquote {
  line-height:1.3em;
}

 Mengubah / memodifikasi blockquote pada postingan blog.

.post-footer {
  margin: .75em 0;
  color:$sidebarcolor;
  text-transform:uppercase;
  letter-spacing:.1em;
  font: $postfooterfont;
  line-height: 1.4em;
}

Mengubah catatan kaki atau bagin footer pada postingan blog.

.comment-link {
  margin-$startSide:.6em;
}

Mengubah tampilan link komentar ( jumlah komentar ).

.post img, table.tr-caption-container {
  padding:4px;
  border:1px solid $bordercolor;
}

Mengubah tampilan image / gambar pada areal postingan.


/* Comments
----------------------------------------------- */

#comments h4 {
  margin:1em 0;
  font-weight: bold;
  line-height: 1.4em;
  text-transform:uppercase;
  letter-spacing:.2em;
  color: $sidebarcolor;
  }

Mengubah tampilan judul bagian komentar.

#comments-block {
  margin:1em 0 1.5em;
  line-height:1.6em;
  }

Mengubah tampilan bagian keseluruhan komentar.

#comments-block .comment-author {
  margin:.5em 0;
  }

Mengubah tampilan link author atau link komentator

#comments-block .comment-body {
  margin:.25em 0 0;
  }

 Mengubah tampilan isi komentar.

#comments-block .comment-footer {
  margin:-.25em 0 2em;
  line-height: 1.4em;
  text-transform:uppercase;
  letter-spacing:.1em;
  }

Mengubah tampilan footer komentar. Comment-footer biasanya berisi tanggal komentar.

.deleted-comment {
  font-style:italic;
  color:gray;
  }

Mengubah tampilan komentar yang telah di hapus.

.feed-links {
  clear: both;
  line-height: 2.5em;
}

mengubah tampilan link feed


/* Sidebar Content
----------------------------------------------- */

.sidebar {
  color: $sidebartextcolor;
  line-height: 1.5em;
 }

 Mengubah tampilan sidebar secara keseluruhan.

.sidebar ul {
  list-style:none;
  margin:0 0 0;
  padding:0 0 0;
}

Mengubah tampilan daftar pada sidebar.

.sidebar li {
  margin:0;
  padding-top:0;
  padding-$endSide:0;
  padding-bottom:.25em;
  padding-$startSide:15px;
  text-indent:-15px;
  line-height:1.5em;
  }

Mengubah tampilan definisi daftar dari tag <ul>

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

Mengubah tampilan widget secara keseluruhan termasuk area postingan dan footer.

/* Footer

----------------------------------------------- */

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

Pada dasarnya sam seperti sidebar namu lataknya yang berbeda. footer berada di bagian paling bawah atau di atas dari credits template blog ( hanya ada pada template yang di download ).

]]></b:skin>

Merupakan akhir dari kode css pada template blogger. Di bawah  kode ini,sobat bisa menyisipkan script. (seperti readmore, related post, dll )

</head>

Merupakan pasang atau tag penutup dari tag <head> pada dokumen HTML.

  <body>

Bagian ini di mulai dari kode berikut.

  <div id='outer-wrapper'><div id='wrap2'>

 Merupakan kode html dari outer-wrapper.

<div id='header-wrapper'>
 <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='tes tatelu (Header)' type='Header'/>
</b:section>
 </div>

Merupakan kode html dari header-wrapper.

<div id='content-wrapper'>

Bagian main-wrapper dan sidebar-wrapper berada dalam tag ini

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol'/>
 </div>

Bagian antara header-wrapper dan content-wrapper.

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
 </div>

Kode html dari area postingan atau main-wrapper

 <div id='sidebar-wrapper'>
  <b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>
</b:section>
 </div>

Kode html untuk sidebar-wrapper

<!-- spacer for skins that want sidebar and main to be the same height-->
      <div class='clear'>&#160;</div>

Mengatur ketinggian sidebar-wrapper dan main-wrapper supaya sama tinggi.

</div> <!-- end content-wrapper -->

akhir dari content-wrapper' .

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
 </div>

Kode html untuk area footer-wrapper

  </div></div> <!-- end outer-wrapper -->

Akhir dari outer-wrapper.

<b:include data='blog' name='google-analytics'/>

jika sobat menemukan kode seperti ini, kode ini adalah kode google analityc, yaitu fasilitas untuk menghitung jumlah pengunjung blog.

</body>
Merupakan tag penutup dari tag body pada dokumen html.

</html>
Merupakan tag penutup dari dokumen html.

Baca kelanjutan cara membuat template blog sendiri pada bagian 2 nya....

Blogspot Template Blog

Blogspot Template Blog - Berbicara tentang blog tentu berbicara tentang template blog ( blogspot ) dan berbicara tentang template blog tentu sobat akan mencari template blogspot tebaik dan berbicara tentang template blogspot terbaik saya rasa sampai sekarang belum ada tuch... hihihi

Mungkin sobat blogger merasa aneh dengan judul dalam postingan kali ini, namun mungkin bagi sebagian blogger juga sudah tahu bahwa maksudnya yaitu untuk menembak keyword. jadi, bagi sobat blogger yang merasa ke sasar dengan menggunakan keyword Blogspot Template Blog, mohon maaf .. dan jika berkenan silahkan lihat - lihat dulu artikel lain di blog ini terutama yang berhubungan dengan template blog . di antaranya..

1. Cara Mengganti Template Blogger 
2. Tatelu Blogger Template 
3. Tatelu Blogger Template V2
4. Template Blogger Seo Friendly 2012

 Silahkan di download templatenya jika di rasa pas dengan keinginan sobat blogger.

Salam!!!

Template Blogger Seo Friendly 2012

Template blogger seo friendly 2012 - Berbicara tentang template blogspot seo friendly pasti yang ada di benah sobat adalah sebuat template yang sangat super easy loading, most downloaded dan tentunya di sukai oleh raksasa search engine yaitu om gugel. Nah di tahun 2012 ini saya akan berbagi 1 template seo friendly dan easy loading ( loadingnya ringan ) yang barusan saya buat dan saya sebut Template Blogspot  Seo Friendly Tahun 2012 dengan nama Tatelu style..

Sebelumnya saya sudah pernah mengeluarkan 2 template yang saya beri nama Tatelu Blogger Template dan Versi ke duanya yang saya beri nama Tatelu Blogger Template V2 namun dari ke tiga template keluaran saya, template dalam postingan kali ini lah yang paling bagus.. Sobat yang berminat mendownloadnya, silahkan.

balik ke topik....

Berbagai fitur sudah tersedia dalam template ini diantaranya navigasi breadcrumb seo friendly, optimasi tag h1 h2 dan h3, related post, dua kolom elemen di bawah postingan dan masih banyak lagi. Untuk lebih jelasnya, ada baiknya sobat melihat screenshot di bawah ini.

DEMO/DOWNLOAD

Cara Mengganti Template Blogger

Cara Mengganti Template Blogger - Sobat yang bosan dengan tampilannya blognya dan ingin menggantinya dengan template baru, sepertinya sobat berada di tempat yang benar. Kali ini kita akan membahas bagaimana cara mengganti template blogger blogspot.

Sekedar pemberitahuan bahwa sebelumnya christian tatelu telah mengeluarkan 2 template seo friendly yang bisa sobat download gratis. yaitu tatelu blogger template dan tatelu blogger template V2. bagi sobat yang berminat silahkan di download.

lanjut....

Sobat yang berniat mengganti template blogger silahkan ikuti tutorial berikut.

1. Log in ke akun blog sobat.
2. Klik Rancangan -->Edit HTML
3. Klik tombol Browse

4. Pilih file XML dari template yang akan di pakai kemudian klik open.

5. Klik Unggah.

6. Setelah selesai di unggah maka akan ada peringatan tentang widget dari template sebelumnya.

• Pilih pertahankan widget jika ingin mempertahankan widget dari template sebelumnya.
• Pilih Hapus widget untuk menghapus widget dari template semula.
• Pilih batal untuk membatalkan proses penggantian template.

7. Klik Simpan.

Tambahan :
Umumnya template yang sobat download di internet ber format rar untuk itu harus di ekstrak terlebih dahulu ke file XML. caranya seperti gambar berikut.

Semoga Cara Mengganti Template Blogger di atas berguna untuk sobat blogger.