Regi_Adi
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, dllSampai 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 .
Posted in 
51 Response to "Bagian-bagian Template Blogger part 2"
Mantap sob, tutorx :-D, ta save lagi di hp..thanks b4
wah, sudah main edit2 css, saya nyimak dulu, masi awam tentang css
wah saya baru pemula nih, baru bisa. makasih info edit cssnya ^_^
wah mantap naget bro,,,sangat mencerahkan !!
saya juga sangat suka utak atik css.
makasih infonya...
paham paham paham , sekarang pakde mulai paham tentang template, sehingga pakde nantinya dapat utak atik tempalte pakde
wah mantab sobat,,
ane jadi tahu kalau mau rubah template. ane harus ubah yang mana..
blogwalking ditunggu dirumah
Wah ikuti dulu nih... tak tunggu part selanjutnya...
bagian header penting.Jadi tahu aku kode htmlnya.trims
Wah uda bagian kedua nie. Saya bagian bagian pertama sobat! Thanks.
Thanx... Skg jadi jelas untuk ngutak atiknya.... :D
@2862978812393183838.0
iya sama2... silakan disave di hp :)
@8067115942001990768.0
iya Sob, sekarang udah sampe CSS...
silakan disimak
@3908396292734331282.0
terima kasih juga Mas,
kita belajar sama2 yaaa... ^_^
@3035882859117169460.0
terima kasih juga Mas Andhie,
saya juga suka nih otak-atik CSS, sambil belajar...
@9064429774634599272.0
terima kasih PakDe sudah berkunjung...
mudah2an artikel di atas bisa membantu PakDe dalam otak-atik template
@1653462112708193356.0
Mantappp Sob, langsung ke TKP yaaa...
@7947815322058501530.0
iya Mas Akhatam, silakan diikuti...
ditunggu lanjutannya yaa
@628626869023852847.0
iya Mas Tomo, memang penting, semoga artikel di atas bisa membantu
@6025011037076895992.0
hehehehehe, iya Mas udah bagian kedua,
terima kasih atas kunjungannya... ditunggu lanutannya yaaa...
wA KEREN SOB MAntab Tutorialnya!!Thax ya
Oh ya sob dukung pulau komodo ya dengan memasang widget buatanku di new7 wonders
@5433378172530785464.0
terima kasih juga Sob...
semoga membantu...
@3399774466706213600.0
terima kasih juga Sob...
mampir juga diblog gus yang satunya
wah makasih banget infonya??
pas banget lagi nyari2 gambar buat header tp bingung ngerubahnya dimana.. thx infonya...
kunjungan again,,
and again,,
ditunggu kunjungan baliknya,,
oia bagian 3 nya ada gk,,
yang 1 ma 2 udah saya lahap
ini dasar sekali dalam ngeblog :)
tambah materi belajar nih, biar ga katrox2 amat hehe
thanks mas ilmunya sudah saya baca yang part1, saya tunggu lanjutannya yah mas.
@6354009038646740989.0
widgetnya mana Sob???? nanti langsung saya pasang...
@6266771697112531340.0
terima kasih juga Gus,
langsung ke TKP
@4871848640923006645.0
terima kasih sudah berkunjung Mas Dimas :)
@1395890978159484366.0
terima kasih sudah berkunjung kembali
part 3 nanti saya posting... ditunggu yaaa
@2857981746616089104.0
iya Kak, ini yg paling dasar
@7864739050218035963.0
hehehehehe, semoga bermanfaat buat ngilangin katrox Sob... :D
@8837189006676647434.0
terima kasih juga Mas, ditunggu lanjutannya yaaa...
Bagus nih Infonya... jadi nambah ilmu lagi mengenai blogger
@6192182563359351627.0
semoga bisa tambah ilmu Mas,
Makasih tutorial template nya mas...jd tau guna2 dari script tersebut..
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...
Thanks infonya sobat.. SEorang blogger harus menyusun rapi semua kode2 nya dan urutannya seperti H1 dan H2
wah mantab sobat,,
fotoku juga dah ada dibawah,,
moga bisa update sekarang,,
doain saya juga soalnya saya juga belum update nih
ada beberapa blog saya juga pake blogspot dan posting ini terasa mantabbb... bermanfaat..
btw kemana aja ga pernah mampir ke blog saya?
kunjungan rutin aja nih,...
sambil nunggu episode selanjutnya...
@367511559863501699.0
terima kasih juga Mas Dinoe atas komentar dan kunjungannya
@7452094084734519528.0
silakan di bookmark,
boleh juga tuh tukeran link, nanti saya konfirmasi di blog Mas Rizal
@542676612161118134.0
betul juga, terima kasih atas pendapat Laksamana
@8166941248284798474.0
saya doakan Mas
@1522653050481338859.0
mudah-mudahan bermanfaat Kang,
maaf nih saya ngga pernah mampir Kang :)
@6290903372023145197.0
terima kasih atas kunjungan rutin Mas Dimas, episode selanjutnya sudah saya posting...
wah tempat yg tepat buat berguru mengotopsi tubuh blog neh...
Posting Komentar
Silakan menyampaikan kritik, saran dan komentar.