Advertise

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.

22 komentar:

  1. Kalu saya suka pakai iframe buat demo.
    Oia ada award buat chugy dari saya,
    Selamat tahun baru 2011

    BalasHapus
  2. wah sobat manteep banget nih ilmunyaa...saya lihat demonya ., bagus2 tuhh tampilan navigasinya..di save dulu *minta izin*

    BalasHapus
  3. 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.

    BalasHapus
  4. Wah setelah melihat demonya cukup menarik juga....kapan2 mungkin bisa saya terapkan di blog saya. Trimakasih buat sharingnya.

    Selamat Tahun Baru 2011.

    BalasHapus
  5. woww,,, keren banget nihh gan... dicoba dulu ahhh...

    happy new year yaaa semuaaa...

    BalasHapus
  6. dah chika liat demonya keren2
    warnanya bisa dirubah gx?

    BalasHapus
  7. Uji TKP du;u sob.

    Met tahun baru juga...

    BalasHapus
  8. 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..

    BalasHapus
  9. 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.

    BalasHapus
  10. keren.... siip............. di save dulu.. :), met tahun baru.. semoga ditahun ini kita lebih baik dari sebelumnya.....

    BalasHapus
  11. mas chugy release template blog dong hehe

    BalasHapus
  12. Xabduh :: Insyaallah kalau ada waktu nanti saya share template?

    nyayu amibae :: Ok Met Tahun Baru Juga smoga sukses slalu.

    BalasHapus
  13. wah keren sob...!!! di kombine aja dengan tab navigasi pst jd lbh keren lg... thank's for visited me...!!!

    BalasHapus
  14. Betul...betul...memang mantap framenya.

    sepakat, templatenya kemarin2 dishare donk ^_^...

    BalasHapus
  15. ane cari2 tutorialnya ternyata cuma position: fixed; doang he... btw, nice inpo!

    BalasHapus
  16. kagak bisa ya gan di blog saya

    BalasHapus
  17. Thank you very much for information about blogger templates.
    Thanks again for sharing.... :)

    BalasHapus
  18. keren tutorialnya, tapi ini bentuknya kotak apa rounded yah??

    BalasHapus
  19. Thank's tutorialnya..

    mampir ke web saya gan

    BalasHapus
  20. nice info,penjelasan agan tentang frame artikel blog bagus gan,saya suka,terimakasih ilmu saya sudah bertambah

    BalasHapus