Struktur Dasar Template Blogger 3

Malam ini Tutorial Dan Bisnis akan melanjutkan posting yang tertunda dengan judul   Struktur Dasar Template Blogger 3 , ini merupakan lanjutan dari malam kemarin  dengan topik bahasan yang sama yaitu  Struktur Dasar Template Blogger 2  yang tertunda karena nonton EURO 2012 dulu antara Jerman vs Italia,  kan rugi besar tuh kalau gak nonton. hehee.. Oh..ya sebaiknya memang baca yang kemarin dulu baru yang ini.


Langsung ke topik bahasan tentang Struktur Dasar Template Blogger 3 
No.
Isi Template / CSS
Keterangan
1 /* Sidebar Content
----------------------------------------------- */
.sidebar {
color: $sidebartextcolor;
line-height: 1.5em;
}
.sidebar ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
Sidebar dimulai dari sini

Tampilan sidebar secara keseluruhan
Tampilan daftar pada sidebar
2 .sidebar li {
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:.25em;
padding-$startSide:15px;
text-indent:-15px;
line-height:1.5em;
}
.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}
Tampilan definisi daftar dari tag <ul>



Tampilan widget / gadget
3 /* 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;
}
Mulai bagian footer
Footer ini sama seperti sidebar yaitu tempat penyimpanan gadget/widget pada blog , namun footer tempatnya dibagian layout paling bawah yaitu dibawah main wrapper dan sidebar.
4 ]]></b:skin>
</head>
Tag penutup head pada dokumen HTML
<body>  (Bagian body berawal dari sini)
<div id='outer-wrapper'><div id='wrap2'>
Akhir dari css yg ada pada template blogger. Setelah kode ini, kita bisa sisipkan javascript misalnya Read More, Artikel terkait, dll. Setelah kode ini, bagian-bagian selanjutnya berisi kode HTML.
Kode HTML outer-wrapper, bisa diatur tampilannya dengan CSS
5 <div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Blogwalking list (Header)' type='Header'/>
</b:section>
</div>
Bagian ini merupakan header-wrapper yang bisa di edit tampilannya dengan CSS
Bagian main-wrapper dan sidebar-wrapper berada dalam tag ini
6 <div id='content-wrapper'>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
Widget blog terletak di sini
Kode HTML dari main-wrapper yang bisa di edit tampilannya dengan CSS.
7 </b:section>
</div>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
</div>
Widget blog pada sidebar terletak di sini
Kode HTML dari sidebar-wrapper yang bisa diedit tampilannya dengan CSS
8 <!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'>&#160;</div>
</div> <!-- end content-wrapper -->
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
Ini mengatur ketinggian sidebar-wrapper dan main-wrapper supaya sama tinggi.
merupakan akhir dari content-wrapper
Ini merupakan kode HTML dari footer , bisa di edit tampilannya dengan CSS
9 </div></div> <!-- end outer-wrapper --> ini merupakan tag penutup dari outer-wrapper
10 </body>   
</html
tag penutup dari body 
tag penutup dokumen HTML
Demikianlah Struktur Dasar Template Blogger 3 , sebagaimana di sampaikan diawal bahwa kode2 ini tidak mutlak sama pada setiap Blog atau Web karena semuanya tergantung selera pembuatnya, apalagi kalau sudah dilakukan editing.
Kalau blog sobat ingin tampil beda silahkan lakukan editing pada kode HTML / Template sobat dan kalau mau ada Tips Cara Mudah Edit CSS Dengan TopStyle Lite. …. happy blogging


  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 3 dengan Url https://tutorialdanbisnis.blogspot.com/2012/06/struktur-dasar-template-blogger-3.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:

3 komentar:

Silahkan Comment disini, saya comment di sana..

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