Bagian-bagian Template Blogger Part 5

Apa kabar Sahabat blogger????? Tidak terasa bagian-bagian template Blogger sudah mencapai tahap akhir nih.

Pada awalnya saya cukup pesimis dan tidak yakin bisa menyelesaikan pembahasan ini. Tetapi karena begitu banyaknya antusias dan dukungan dari para sahabat, maka pembahasan pun menjadi menyenangkan. Terima kasih atas dukungan Anda semua.

Sekarang kita akan membahas bagian terakhir dalam template Blogger. Sebelum melangkah lebih jauh, sebaiknya Anda sudah tahu struktur dari dokumen HTML. Setelah itu, baca dahulu

Bagian-bagian Template Blogger Part 1
Bagian-bagian Template Blogger Part 2
Bagian-bagian Template Blogger Part 3
Bagian-bagian Template Blogger Part 4

Okeh lah kalau begitu… Mari kita simak bagian-bagian template blogger berikut ini

/* Footer
----------------------------------------------- */
Bagian footer berawal di sini


#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}
Footer ini sama halnya seperti sidebar yaitu tempat penyimpanan gadget/widget pada blog kita namun footer tempatnya dibagian layout paling bawah yaitu dibawah main wrapper dan sidebar.


]]></b:skin>
Ini merupakan akhir dari css yang ada pada template blogger. Setelah kode ini, Anda bisa menyisipkan javascript dari autoreadmore, artikel terkait, dll. Setelah kode ini, bagian-bagian selanjutnya berisi kode HTML.


</head>
Ini merupakan tag penutup dari head pada dokumen HTML


<body>
Bagian body berawal pada tag ini
<div id='outer-wrapper'><div id='wrap2'>
Ini merupakan kode HTML dari outer-wrapper yang bisa diatur tampilannya dengan CSS


<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 bias kita ubah tampilannya dengan CSS


<div id='content-wrapper'>
Bagian main-wrapper dan sidebar-wrapper berada dalam tag ini


<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>

Widget blog terletak di sini

</b:section>
</div>
Ini merupakan kode HTML dari main-wrapper yang bisa kita ubah tampilannya dengan CSS.


<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>

Widget blog pada sidebar terletak di sini

</b:section>
</div>
Ini merupakan kode HTML dari sidebar-wrapper yang bisa kita ubah tampilannya dengan CSS.


<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'>&#160;</div>
Ini mengatur ketinggian sidebar-wrapper dan main-wrapper supaya sama tinggi.


</div> <!-- end content-wrapper -->
Ini merupakan akhir dari content-wrapper


<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
Ini merupakan kode HTML dari footer yang bisa kita ubah tampilannya dengan CSS


</div></div> <!-- end outer-wrapper -->
Ini merupakan tag penutup dari outer-wrapper


</body>
Ini merupakan tag penutup dari body pada dokumen HTML


</html>
Ini merupakan tag penutup dari dokumen HTML


Mungkin pembahasan akan lebih panjang jika kita membahas template dengan tanda centang pada 'expand widget template'.

Maka dari itu, script dari template di atas tidak dengan tanda centang pada 'expand widget template' sehingga terlihat simple.

Artikel Terkait



Berlangganan


Tulis alamat email Anda untuk berlangganan artikel terbaru dari blog ini:

Delivered by FeedBurner

22 Response to "Bagian-bagian Template Blogger Part 5"

Dimas mengatakan...

sep sob, dah mulai mengerti bagian2 mana yg mau aq ganti...

Ratasoe mengatakan...

Wah..lma ga update blogx ya sob. Ane tnggu2 artikel sambunganx ;-)..trims ya..ta save ya..

berita untuk negri mengatakan...

jadi lebih paham lagi...makasih sob

megi mengatakan...

makasih sob udah share
keep blogging !! ditunggu kelanjutannya ^^

Rizky2009 mengatakan...

belajar template blog cocok nih disini tempatnya, mantab

tomo mengatakan...

Sip kawan.sungguh aku ingin template bagus

gus ikwhan mengatakan...

wouw, serial html yang menarik ni
berguna buat ara newbi ni
kalau berkenan mampir balik ya ada postingan baru

belajar internet mengatakan...

wah,,sepertinya saya harus banyak belajar dari sini,,,,

makasih infonya,,

darahbiroe mengatakan...

makasih share bagian template na yg ke 5
sangat bermanfaat

berkunjung dan ditunggu kunjungan baliknya
salam blogger
makasih
:D

antok mengatakan...

sangat bermanfaat bagi saya yang newbie ini makasih

blogwalking

blogdunia mengatakan...

wah terima kasih kawan,,
penjelasanya sangat rinci dan mudah dimengerti..
sekarang ane sudah kenal dengan template,
jadi bisa rombak lagi neh templatenya

Darin mengatakan...

hmm..asik juga ya bahasa HTML.
makin lama makin bikin penasaran :)

Dunia Komputer mengatakan...

Semakin hari semakin paham jadi sob. Lanjutkan!

blogdunia mengatakan...

kunjungan sore neh mas...
mantab

van mengatakan...

mentapp dah kangg

buwel mengatakan...

wah thanks neh tips templetnya... jadi banyak tahu... keren!

a-chen mengatakan...

nice tutorial and nice sharing...

Adib from kompinter mengatakan...

Waduh sampai part 5 apakah berlanjut sampai part 6 heheh

U-marr mengatakan...

akhirnya selesai semuanya. semoga ilmunya bisa saya serap sehingga saya bisa handal dalam ngutak-ngatik template.

UBULISME mengatakan...

thank's info nya yo mas...
ane mau otak-atik dulu ah...

kosdiana@jak-stik.ac.id mengatakan...

kalo templatenya mau pakai foto kita bisa ga ?
kalo bisa, caranya gimana ?
mohpn penjelasannya ya ..
terimakasih ^_^

fadil2011 mengatakan...

terima kasih ats petunjuknya...
mantap say jadi ngerti kode2 html wlopun dikit
oia sob ktika saya menulis artikel setlh di publish eh g muncul, pas di liat di page element widget postingan jug ga da,,, mohon saran dan batunanya...
thanks

Posting Komentar

Silakan menyampaikan kritik, saran dan komentar.