» , » Struktur Dasar Template Blogger 2

Struktur Dasar Template Blogger 2

Masih sekitar membedah Template atau CSS , sekarang Tutorial Dan Bisnis akan posting tentang Struktur Dasar Template Blogger  2 meneruskan postingan kemarin dengan topik yang sama  yaitu Struktur Dasar Template Blogger 1, bagi yang mau baca , silahkan berkunjung ke tkp.


Langsung saja menuju topik bahasan tentang Struktur Dasar Template Blogger  2

No
Isi Template / CSS
Keterangan
1 <?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>		 Deklarasi file XHTML pada template Blogger dengan jenis Strict. XHTML. Untuk membuat halaman yg layout dan formatnya dikontrol penuh oleh CSS.
2 <head>
<b:include data='blog' name='all-head-content'/>  
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>
<meta content='Belajar Tutorial Blog Dan Bisnis Online' name='description'/>
<meta content= ………name=’keywords'/>
<b:skin><![CDATA[/*		 Bagian head template blog  berisi judul blog dan awal dari kode CSS.
Biasanya, di sini digunakan untuk meta tag descripsi,  keyword dan meta tag yang lainnya
3 /* Content    -------------- */
body {
  font: $(body.font);
  color: $(body.text.color);
  background: $(body.background); }
html body .content-outer {
  min-width: 0;
  max-width: 100%;   width: 100%; }		 Body bagian paling dasar dari struktur template , biasanya memenuhi halaman dari browser baru setelah itu tersusun bagian-bagian lainnya
4 a:link {
color:$linkcolor;
text-decoration:none; }
a:visited {
color:$visitedlinkcolor;
text-decoration:none; }
a:hover {
color:$titlecolor;
text-decoration:underline; }
a img {
border-width:0; }
.body-fauxcolumn-outer .cap-top {
  position: absolute;
  z-index: 1;
  height: 276px;
  width: 100%;   } 		Kode untuk tampilan link .
Visited : Kode  tampilan link yang pernah dikunjungi
Hover : Kode tampilan link jika  mouse berada di atas link.
Mengubah tampilan link bergambar.
Kode separator line (garis pemisah) antara … dg …
5 /* Header    -------------------- */
.header-outer {
  margin: $(header.margin.top) 0 $(header.margin.bottom) 0;
  background: $(header.background.color) $(header.background.gradient) repeat scroll 0 0;
}
.Header h1 {
  font: $(header.font);
  color:#000066; $(header.text.color);  text-shadow: 0 0 $(title.shadow.spread) #000000;     }
.Header h1 a {
  color: $(header.text.color);   }
.Header .description {
  font: $(description.font);
  color: #006600; $(description.text.color); }
.header-inner .Header .titlewrapper,
.header-inner .Header .descriptionwrapper {
  padding-left: 0;
  padding-right: 0;
  margin-bottom: 0; } 		Header berawal di sini




Judul Blog,  Jenis  dan warna font, dll.

Mengubah tampilan link yang terdapat pada header
Deskripsi atau keterangan Blog
Kode CSS ini mengubah tampilan header bagian dalam
6 /* Outer-Wrapper  --------------------- */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont; 
}
#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 */
}		 Tempat dimana bagian-bagian dasar seperti header, main wrapper, sidebar dan footer tersusun disini


Main-Wrapper atau area posting pada Blog


Sidebar ini tempat penyimpanan gadget/widget.
baik yang sudah disediakan blogger muapun pihak lain seperti Alexa dllm, tempatnya disamping posting area/main wrapper
7 /* Headings   ------------------------ */
h2 {
margin:1.5em 0 .75em;
font:$headerfont;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color:$sidebarcolor;
}
Kode untuk tampilan judul pada blog dengan kelas h2 seperti judul artikel, judul widget pada sidebar, dll
8 /* Posts   ------------------------*/
h2.date-header {
margin:1.5em 0 .5em;
}
.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;
}		 Bagian Posting dimulai dari sini
Tampilan tanggal artikel blog

Tampilan posting atau Artikel blog

Tampilan judul artikel blog
9 .post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:$titlecolor;
font-weight:normal;
}
.post-body {
margin:0 0 .75em;
line-height:1.6em;
}
.post-footer {
margin: .75em 0;
color:$sidebarcolor;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
line-height: 1.4em;   }
.comment-link {
margin-$startSide:.6em;  }
.post img, table.tr-caption-container {
padding:4px;
border:1px solid $bordercolor;  }
Tampilan link


Tampilan bagian postingan

Tampilan footer atau catatan kaki postingan blog


tampilan link komentar
Tampilan gambar pada postingan
10 /* Comments  ------------------ */
#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: $sidebarcolor;
}
#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author {
margin:.5em 0;
}
#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;   }
.deleted-comment {
font-style:italic;
color:gray;    }
.feed-links {
clear: both;
line-height: 2.5em;
}
Bagian Setting Komentar  Blog
Tampilan judul bagian komentar


Tampilan bagian komentar

Tampilan link author atau link komentator
Tampilan isi komentar Blogger
Tampilan dari footer komentar. Comment-footer biasanya berisi tanggal komentar.

Tampilan komentar yang telah dihapus
Tampilan link feed
Sampai disini dulu serial Tutorial Template Blogspot , sebagian merupakan hasil  pengalaman pribadi dalam topik Struktur Dasar Template Blogger  2 , nantikan posting selanjutnya.. ya.. n.. tolong iklannya sekali-kali di sentuh yaah.. hihihi… ngarep…

  1. Thanks telah mampir, yo kita saling vote dan comment..
  2. Bila berkenan tolong share/bagikan dengan tombol share dibawah.
  3. Gratis langganan artikel blog ini, silahkan klik Subscribe Disini, atau masukan email disidebar yg telah disediakan

Sobat sedang membaca artikel Struktur Dasar Template Blogger 2 dengan Url https://tutorialdanbisnis.blogspot.com/2012/06/struktur-dasar-template-blogger-2.html , bila berkenan silahkan bagikan dengan tombol share di atas. Bila mau COPAS untuk di blog sobat, letakan link aktif artikel ini sebagai sumbernya dengan copy kode di bawah ini.


Related Post:

2 komentar:

Silahkan Comment disini, saya comment di sana..

Langganan: Posting Komentar (Atom)

Langganan Artikel

Enter your email address:

Delivered by FeedBurner

Label

  1. Bisnis (5)
  2. Daftar Isi (4)
  3. Info (4)
  4. Link (2)
  5. Olah Raga (1)
  6. SEO (5)
  7. Software (3)
  8. Template (14)
  9. Tips Dan Trik (2)
  10. Tutorial (16)

Alexa