Membuat Frame Content Pada Template Blogger

Sebelumnya saya mengucapkan SELAMAT TAHUN BARU 2011 buat blogger semua, semoga di awal tehun ini kita bisa menjadi lebih baik dari tahun kemarin. Mengawali posting di awal tahun ini saya akan membahas cara pembuatan frame Content pada area template blogger.

Frame Content ini bisa diterapkan pada bagian atas (top), bawah (Bottom) atau sidebar kiri dan kanan template bloger, dan untuk kali ini saya akan membuat frame content pada bagian atas template blogger.

Lihat Demo

Langsung pada cara pembuatan frame content :
Pertama masukan kode dibawah ini diatas kode ]]></b:skin>
#framecontent{
position: absolute;
top: 0; left: 0; width: 100%;
height: 90px;
overflow: hidden;
background: #6db3f2; }

#maincontent{
position: fixed;
top: 92px;
left: 0; right: 0; bottom: 0;
overflow: auto; background: #fff; }

.innertube{ margin: 15px; }

* html body{ /*IE6 hack*/
padding: 90px 0 0 0; /*Set value to (HeightOfFrameDiv 0 0 0)*/}

* html #maincontent{ /*IE6 hack*/
height: 100%; width: 100%;}

Lalu masukan juga kode dibawah ini dibawah kode <body>

<div id='framecontent'>
<div class='innertube'>
<h1>Frame Conten</h1>

<div id='maincontent'>
<div class='innertube'>

<div id='outer-wrapper'>
......................
......................
......................

Tambahkan tag penutup </div> di atas kode </body>

Silahkan pratinjau terlebih dahulu, kalau sudah cocok silahkan di simpan.
Selamat mencoba.

NB : Teks warna merah bisa anda ganti dengan logo blog ataupun dengan navigasi silahkan di custom saja sesuai dengan selera blogger.

Komentar

Amdhas mengatakan…
Kalu saya suka pakai iframe buat demo.
Oia ada award buat chugy dari saya,
Selamat tahun baru 2011
anak betawi mengatakan…
Siip banget ada bantuan css
Admin mengatakan…
wah sobat manteep banget nih ilmunyaa...saya lihat demonya ., bagus2 tuhh tampilan navigasinya..di save dulu *minta izin*
Chugy mengatakan…
blogger admin :: Ia Um saya juga pake buat demo.
Thanks Um buat award-y. met TAHUN BARU JUGA Um. Sukses Slalu.

Ipin's cool :: Ok smoga bermanfaat.
BLOGINKOM mengatakan…
Wah setelah melihat demonya cukup menarik juga....kapan2 mungkin bisa saya terapkan di blog saya. Trimakasih buat sharingnya.

Selamat Tahun Baru 2011.
Unknown mengatakan…
woww,,, keren banget nihh gan... dicoba dulu ahhh...

happy new year yaaa semuaaa...
Ummi Ubay mengatakan…
dah chika liat demonya keren2
warnanya bisa dirubah gx?
Belajar CorelDRAW mengatakan…
Uji TKP du;u sob.

Met tahun baru juga...
Suparyanto mengatakan…
Maksudnya apa ya sahabat frame tersebut?maap belum jelas ^_^

Mohon maaf selama setahu kemarin,banyak salah banyak khilaf. Moga tahun depan lebih baik lagi sahabat..
Chugy mengatakan…
Suparyanto :: Frame ini bagian dari tampilan blog yang tidak mengikuti scroll. seperti contoh di blog demo pada bagian atas.

Sama2 Brad Smoga tahun baru ini menjadikan kita lebih baik. Sukses selalu.
nyayu amibae mengatakan…
keren.... siip............. di save dulu.. :), met tahun baru.. semoga ditahun ini kita lebih baik dari sebelumnya.....
Abdullah (Fish Seller) mengatakan…
mas chugy release template blog dong hehe
Chugy mengatakan…
Xabduh :: Insyaallah kalau ada waktu nanti saya share template?

nyayu amibae :: Ok Met Tahun Baru Juga smoga sukses slalu.
Kian Coy mengatakan…
wah keren sob...!!! di kombine aja dengan tab navigasi pst jd lbh keren lg... thank's for visited me...!!!
Suparyanto mengatakan…
Betul...betul...memang mantap framenya.

sepakat, templatenya kemarin2 dishare donk ^_^...
Anonim mengatakan…
ane cari2 tutorialnya ternyata cuma position: fixed; doang he... btw, nice inpo!
masterpiece mengatakan…
kagak bisa ya gan di blog saya
Clipping Design mengatakan…
Thank you very much for information about blogger templates.
Thanks again for sharing.... :)
Horier mengatakan…
keren tutorialnya, tapi ini bentuknya kotak apa rounded yah??
Sekarang TAhu mengatakan…
Thank's tutorialnya..

mampir ke web saya gan
Bonus sign up 5 USD mengatakan…
nice info,penjelasan agan tentang frame artikel blog bagus gan,saya suka,terimakasih ilmu saya sudah bertambah

Postingan populer dari blog ini

Motion Tween dan Shape Tween

Mengenal Symbol dalam Animasi Flash

Membuat Bayangan Di Dalam Text