Blog Tutorial

Tutorial Blog, Cheat Games, Tutorial Ponsel, Tutorial Komputer, Tutorial Browser

Jumat, 01 Januari 2010

Menambahkan Element Baru

Kategori :
Penjelasan Tentang Page Element sudah saya tulis di artikel tentang Mengenal Page Element Di Blogspot jadi apabila masih bertanya-tanya tentang Page Element itu apa? baca saja artikel saya yang Mengenal Page Element Di Blogspot

Menambahkan Element Baru

Nah kalau maksud dari judul Menambahkan Element Baru adalah disini saya akan memberikan trik untuk menambah element yang berguna untuk menambah widget, baik itu di bawah header atau pun di footer yang jelas penambahannya hanya 3 kolom saja dan satu kolom di atasnya.

Penambahan element berguna untuk menambahkan widget-widget yang berguna untuk blog sobat., di sini saya hanya memberikan cara/trik tentang Menambahkan Element Baru. mungkin trik ini berguna untuk sobat yang templatenya hanya 2 kolom saja atau sedikit mempunyai kolom, nah apabila sobat ingin menambahkan element silahkan ikuti langkah di bawah ini :
  1. seperti biasa login ke blogger 
  2. untuk yang ini menambahkan element di bawah header terlebih dahulu
  3. Masuk ke Tata Letak ==>> Edit HTML
  4. Jangan lupa untuk membackup template terlebih dahulu
  5. sekarang cari kode ]]></b:skin> lalu taruh kode di bawah ini tepat di atasnya


    #box-main-container {
    clear:both;
    }
    .box-column {
    padding:0px 10px 10px 10px;
    border:1px dotted $bordercolor;
    }


  6. setelah itu cari kode ini <div id='content-wrapper'> dan letakkan kode di bawah ini tepat di bawahnya :


    <div id='crosscol-wrapper' style='text-align:center'>
    <b:section class='crosscol' id='crosscol'>
    <b:widget id='HTML3' locked='false' title='==&amp;gt;&amp;gt; Prikitiw &amp;lt;&amp;lt;==' type='HTML'/>
    </b:section>
    <div id='box-main-container'>
    <div id='box1' style='width: 30%; float: left; margin:0; text-align: left;'>
    <b:section class='box-column' id='oke1' preferred='yes' style='float:left;'/>
    </div>
    <div id='box2' style='width: 40%; float: left; margin:0; text-align: left;'>
    <b:section class='box-column' id='oke2' preferred='yes' style='float:left;'/>
    </div>
    <div id='box3' style='width: 30%; float: right; margin:0; text-align: left;'>
    <b:section class='box-column' id='oke3' preferred='yes' style='float:right;'/>
    </div>
    <div style='clear:both;'/>
    </div>
    </div>


    maka gambarnya akan seperti ini



  7. nah untuk penambahan element di bawah header sudah selesai sekarang di footer
  8. cari kode ]]></b:skin>lalu taruh kode di bawah ini tepat di atasnya


    #footer-column-container {
    clear:both;
    }

    .footer-column {
    padding: 10px;
    }


  9. setelah itu cari kode ini <b:section class='footer' id='footer'/>lalu ganti dengan kode di bawah ini


    <div id='footer-column-container'>
    <div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>
    <b:section class='footer' id='col-bottom' preferred='yes'>
    <b:widget id='Text2' locked='false' title='==&amp;gt;&amp;gt; Uye-uye &amp;lt;&amp;lt;==' type='Text'/>
    </b:section>
    </div>
    <p>
    <hr align='center' color='#5d5d54' width='90%'/></p>
    <div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>
    <b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
    </div>
    <div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
    <b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
    </div>
    <div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>
    <b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
    </div>
    <div style='clear:both;'/>
    </div>


    maka tampilannya akan seperti ini



  10. setelah itu simpan dan untuk melihat hasilnya sobat bisa masuk ke element halaman.

Nah mudah bukan Menambahkan Element Baru pada Blogger, kalau blog saya yang ini memakai footer 3 kolom saja. Nah, kalau sobat mau pakai Header 3 kolom atau footer 3 kolom?? mungkin hanya sekian dulu dari saya, Terima Kasih.
Bagikan Artikel : Facebook Twitter Google+ Linkedin Technorati Digg

27 Komentar untuk Menambahkan Element Baru

Pertamax..
Mantep dah...

tutorial mantap sob teruskan berkarya tatap semangat

teruslah berbagi sobat karena berbagi itu indah

singgah di rumah sahabat

perkenalkan blogku yg telah lama mati

tips dasar membuat blog. makasih infonya ya..

Selamat tahun baru... Tahun baru element baru... siap dicoba...

Salam kenal bos...
Kunjungan persahabatan..

Tutorialnya sangat bermanfaat sobat..
Teruslah berbagi untuk kemajuan bersama..
Thanks bro

salam...
Tutorial yang menarik. Kita memang harus selalu berbagai info menarik ttg blog, biar jagad perbloggeran di indonesia tambah menggeliat

:x jalan jalan kemari wh ga taunya gudang ilmu laghi.. thx sob postingnnya...

Makasih ya sobat infonya...Aku pengen tambah headerku biar jadi 3 kolom gitu....tapi ga ngerti caranya...Aku cuma copy kode yang sobat kasih ya??Ada yang perlu aku ganti ga kodenya??

@Bisnis Simple di Internet ==>> g ada sob yang perlu di ganti...

Terima kasih kodenya. Sangat bermanfaat.

Makasyiihhh infonya... tar q cobaaa aaahhh... sukses yaaaa, mas...

Klo cara menghapus elemen gmna????


Harlen Pardede

@HARLEN => kunjungin ini sob http://oketrik.blogspot.com/2010/03/menghapus-elemen.html

Thanks kawan
http://freedom-ninjasaga.blogspot.com

jadi kecanduan nyedot ilmunya nich..!!!!!!

mntap gan,,,,

sungguh keren nya,,,,

trima kasih gan atas ilmu yg angan berikan,,,
ane udah mulai mengerti tutorial nya,,,,

salam kenal.
blogwalking sambil cari ilmu.

Info bermanfat untuk pengembangan blog...

menambah element baru buat nempatin iklan ane sob biar strategis n mudah dapat klik,.,makasih atas tutornya,,sangat bermanfaat sob...teruslah berkarya