Back to TopBack to Bottom

Menambahkan Element Baru

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.
Attention

ATTENTION PLEASE!

Untuk memperbaiki dan mengembangkan blog ini menjadi lebih baik, mari bersama - sama kita bangun, caranya? Apabila kamu menemukan link yang mati/sudah tidak berfungsi atau gambar yang sudah tidak muncul/expire, silahkan hubungi kami disini. Laporan anda sangat berpengaruh pada perkembangan blog ini. Terima kasih atas perhatiannya thanks

Trik menarik lainnya yang mungkin ingin anda baca :

24 comments

Pertamax..
Mantep dah...

Balas | January 01, 2010

tutorial mantap sob teruskan berkarya tatap semangat

Balas | January 01, 2010

Salam kenal sob

Balas | January 01, 2010

teruslah berkarya

Balas | January 01, 2010

teruslah berbagi sobat karena berbagi itu indah

Balas | January 01, 2010

singgah di rumah sahabat

Balas | January 01, 2010

perkenalkan blogku yg telah lama mati

Balas | January 01, 2010

salam dari blogger pemula

Balas | January 01, 2010

tips dasar membuat blog. makasih infonya ya..

Balas | January 02, 2010

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

Balas | January 02, 2010

Salam kenal bos...
Kunjungan persahabatan..

Balas | January 04, 2010

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

Balas | January 07, 2010

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

Balas | January 08, 2010

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

Balas | January 10, 2010

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??

Balas | February 01, 2010

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

Balas | February 03, 2010
Anonymous

Terima kasih kodenya. Sangat bermanfaat.

Balas | March 04, 2010

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

Balas | March 09, 2010

Klo cara menghapus elemen gmna????


Harlen Pardede

Balas | March 27, 2010

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

Balas | March 27, 2010

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

Balas | June 09, 2010

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

Balas | July 12, 2011

mntap gan,,,,

sungguh keren nya,,,,

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

Balas | November 18, 2011

salam kenal.
blogwalking sambil cari ilmu.

Balas | February 16, 2012

Post a Comment

Segera Laporkan apabila kamu menemukan Broken link (link rusak) atau ingin request dan bertanya, dengan meninggalkan pesan di bawah ini

 
Di Like sama Follow ya biar tambah Semangat >>