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'> </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 |
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
- Thanks telah mampir, yo kita saling vote dan comment..
- Bila berkenan tolong share/bagikan dengan tombol share dibawah.
- Gratis langganan artikel blog ini, silahkan klik Subscribe Disini, atau masukan email disidebar yg telah disediakan
Lapor gan, saya sudah follback.. thanx..
BalasHapusThanks sob atas komentarnya
HapusMakasih info'y sangat bermnfaat
BalasHapus