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

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