Bagian-bagian Template Blogger part 2

Apa kabar Sobat???? Mudah-mudahan baik-baik saja yaaa…

O iya, sebelum melanjutkan membaca, ada baiknya Anda membaca Bagian-bagian Template Blogger part 1 terlebih dahulu.

Pada episode kali ini, kita akan membahas bagian header, outer-wrapper, main-wrapper dan sidebar-wrapper. Untuk mempersingkat postingan dan ngga usah panjang lebar dikali tinggi, langsung saja ke tempat kejadian perkara…hehehehehehe…


/* Header
-----------------------------------------------
*/
Header berawal di sini


#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
Header ini terdapat pada bagian atas template karena berfungsi sebagai informasi suatu blog yang akan dibaca oleh pengunjung blog diantaranya judul blog dan deskripsi blog. Selain teks, header juga bisa kita ganti dengan gambar.


#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}
Kode CSS ini 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;
}
Bagian ini adalah tempat dimana bagian-bagian dasar seperti header, main wrapper, sidebar dan footer tersusun diatas bagian ini


#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 */
}
Main-Wrapper sering disebut juga posting area karena main wrapper adalah area postingan pada suatu Blog


#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 */
}
Sidebar ini berfungsi sebagai tempat penyimpanan gadget/widget.
Misalnya gadget yang telah disediakan oleh pihak blogger seperti label, arsip, profile maupun luar blogger seperti widget alexa rank yang tempatnya disamping posting area/main wrapper


/* 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, dll


Sampai di sini dulu ya Sob...

Saya harap Sobat tidak bosan berkunjung ke blog saya. Terima kasih untuk Sobat yang sudah berkunjung, berkomentar dan membaca artikel di blog saya.Ditunggu lanjutannya yaaaa….

Seperti biasanya, bagian-bagian template Blogger akan dilanjutkan pada Bagian-bagian Template Blogger Part 3 .

Artikel Terkait



Berlangganan


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

Delivered by FeedBurner

51 Response to "Bagian-bagian Template Blogger part 2"

Ratasoe mengatakan...

Mantap sob, tutorx :-D, ta save lagi di hp..thanks b4

Yahoo VS Google mengatakan...

wah, sudah main edit2 css, saya nyimak dulu, masi awam tentang css

baru bisa mengatakan...

wah saya baru pemula nih, baru bisa. makasih info edit cssnya ^_^

andhie mengatakan...

wah mantap naget bro,,,sangat mencerahkan !!
saya juga sangat suka utak atik css.
makasih infonya...

pakde sulas mengatakan...

paham paham paham , sekarang pakde mulai paham tentang template, sehingga pakde nantinya dapat utak atik tempalte pakde

blogdunia mengatakan...

wah mantab sobat,,
ane jadi tahu kalau mau rubah template. ane harus ubah yang mana..
blogwalking ditunggu dirumah

akhatam mengatakan...

Wah ikuti dulu nih... tak tunggu part selanjutnya...

TOMO mengatakan...

bagian header penting.Jadi tahu aku kode htmlnya.trims

Dunia Komputer mengatakan...

Wah uda bagian kedua nie. Saya bagian bagian pertama sobat! Thanks.

Roxx's Share mengatakan...

Thanx... Skg jadi jelas untuk ngutak atiknya.... :D

Seputar-Internet mengatakan...

@2862978812393183838.0
iya sama2... silakan disave di hp :)

Seputar-Internet mengatakan...

@8067115942001990768.0
iya Sob, sekarang udah sampe CSS...
silakan disimak

Seputar-Internet mengatakan...

@3908396292734331282.0
terima kasih juga Mas,
kita belajar sama2 yaaa... ^_^

Seputar-Internet mengatakan...

@3035882859117169460.0
terima kasih juga Mas Andhie,
saya juga suka nih otak-atik CSS, sambil belajar...

Seputar-Internet mengatakan...

@9064429774634599272.0
terima kasih PakDe sudah berkunjung...
mudah2an artikel di atas bisa membantu PakDe dalam otak-atik template

Seputar-Internet mengatakan...

@1653462112708193356.0
Mantappp Sob, langsung ke TKP yaaa...

Seputar-Internet mengatakan...

@7947815322058501530.0
iya Mas Akhatam, silakan diikuti...
ditunggu lanjutannya yaa

Seputar-Internet mengatakan...

@628626869023852847.0
iya Mas Tomo, memang penting, semoga artikel di atas bisa membantu

Seputar-Internet mengatakan...

@6025011037076895992.0
hehehehehe, iya Mas udah bagian kedua,
terima kasih atas kunjungannya... ditunggu lanutannya yaaa...

Adib from kompinter mengatakan...

wA KEREN SOB MAntab Tutorialnya!!Thax ya

Adib from kompinter mengatakan...

Oh ya sob dukung pulau komodo ya dengan memasang widget buatanku di new7 wonders

Seputar-Internet mengatakan...

@5433378172530785464.0
terima kasih juga Sob...

semoga membantu...

Seputar-Internet mengatakan...

@3399774466706213600.0
terima kasih juga Sob...

gus ikhwan mengatakan...

mampir juga diblog gus yang satunya
wah makasih banget infonya??

Dimas mengatakan...

pas banget lagi nyari2 gambar buat header tp bingung ngerubahnya dimana.. thx infonya...

blogdunia mengatakan...

kunjungan again,,
and again,,
ditunggu kunjungan baliknya,,
oia bagian 3 nya ada gk,,
yang 1 ma 2 udah saya lahap

secangkir teh dan sekerat roti mengatakan...

ini dasar sekali dalam ngeblog :)

richo mengatakan...

tambah materi belajar nih, biar ga katrox2 amat hehe

U-marr mengatakan...

thanks mas ilmunya sudah saya baca yang part1, saya tunggu lanjutannya yah mas.

Seputar-Internet mengatakan...

@6354009038646740989.0
widgetnya mana Sob???? nanti langsung saya pasang...

Seputar-Internet mengatakan...

@6266771697112531340.0
terima kasih juga Gus,
langsung ke TKP

Seputar-Internet mengatakan...

@4871848640923006645.0
terima kasih sudah berkunjung Mas Dimas :)

Seputar-Internet mengatakan...

@1395890978159484366.0
terima kasih sudah berkunjung kembali

part 3 nanti saya posting... ditunggu yaaa

Seputar-Internet mengatakan...

@2857981746616089104.0
iya Kak, ini yg paling dasar

Seputar-Internet mengatakan...

@7864739050218035963.0
hehehehehe, semoga bermanfaat buat ngilangin katrox Sob... :D

Seputar-Internet mengatakan...

@8837189006676647434.0
terima kasih juga Mas, ditunggu lanjutannya yaaa...

My-Belix mengatakan...

Bagus nih Infonya... jadi nambah ilmu lagi mengenai blogger

Seputar-Internet mengatakan...

@6192182563359351627.0
semoga bisa tambah ilmu Mas,

Dinoe mengatakan...

Makasih tutorial template nya mas...jd tau guna2 dari script tersebut..

rizal mengatakan...

wow bagus sekali nih, pas dengan saya yang suka utak-atik tempplate....
izin boookmark blog ini...kalau booleh saya mau pasang link blog ini ke blog saya, ditunggu kompirmasinya...

Laksamana Embun mengatakan...

Thanks infonya sobat.. SEorang blogger harus menyusun rapi semua kode2 nya dan urutannya seperti H1 dan H2

Abu Irsya Aljundu mengatakan...

wah mantab sobat,,
fotoku juga dah ada dibawah,,

moga bisa update sekarang,,
doain saya juga soalnya saya juga belum update nih

widi adiana mengatakan...

ada beberapa blog saya juga pake blogspot dan posting ini terasa mantabbb... bermanfaat..
btw kemana aja ga pernah mampir ke blog saya?

Dimas mengatakan...

kunjungan rutin aja nih,...
sambil nunggu episode selanjutnya...

Seputar-Internet mengatakan...

@367511559863501699.0
terima kasih juga Mas Dinoe atas komentar dan kunjungannya

Seputar-Internet mengatakan...

@7452094084734519528.0
silakan di bookmark,

boleh juga tuh tukeran link, nanti saya konfirmasi di blog Mas Rizal

Seputar-Internet mengatakan...

@542676612161118134.0
betul juga, terima kasih atas pendapat Laksamana

Seputar-Internet mengatakan...

@8166941248284798474.0
saya doakan Mas

Seputar-Internet mengatakan...

@1522653050481338859.0
mudah-mudahan bermanfaat Kang,

maaf nih saya ngga pernah mampir Kang :)

Seputar-Internet mengatakan...

@6290903372023145197.0
terima kasih atas kunjungan rutin Mas Dimas, episode selanjutnya sudah saya posting...

Bayu Lebond mengatakan...

wah tempat yg tepat buat berguru mengotopsi tubuh blog neh...

Posting Komentar

Silakan menyampaikan kritik, saran dan komentar.