Cara membuat 2 elemen di bawah maupun di atas postingan

Dalam postingan kali ini saya akan sedikit membagikan rahasia penambahan elemen letak gedget pada blog anada, sehingga dalam blog anda bisa anda beri tambahan letak geddget, kali ini letaknya ada di atas postingan yang gunanya bisa untuk memasang gadget" iklan ada di elemen tersebut. Langsung saja ikuti langkah-langkahnya di bawah ini.

Sebelum kamu melakukan proses pengeditan template anda di sarankan membackup html anda, kemudian silahkan di eksekusi langkah-langkahnya

1. Login Blogger, Pilih Template lalu Edit HTML.
2. Di html baru tidak perlu mencetang langsung saja klik CTRL + F
3. Cari kode ]]></b:skin>
4. Copy Paste script CSS berikut ini diatas ]]></b:skin> :

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

5. Kemudian carilah bro kode

•   <div id='main-wrapper'>

     jika sudah ketemu dan didapat atau hampir sama dengan kode diatas, letakkan kode HTML di bawah ini di Atas  atau di bawah salah satu kode tadi. Itu sesuai dengan penempatan Anda mau diatas atau dibawah. Contoh diatas <div id='main-wrapper'>

<div id='box-main-container'>
<div id='box1' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='Mediablogger1' preferred='yes' style='float:left;'/>
</div>
<div id='box2' style='width: 50%; float: right; margin:0; text-align: left;'>
<b:section class='box-column' id='Mediablogger2' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

Jangan lupa klik save ya..

Mungkin itu saja yang bisa saya bagikan untuk anda, Untuk Tutorial lain silahkan di cari di Pilihan tutorial di bawah. semoga bermanfaat

1. Buka akun Blogger Anda
2. Masuk ke menu Template > Edit HTML > Proceed > centang Expand Template Widget
3. Dan cari kode dibawah ini :

]]></b:skin>

 4.  Pastekan kode dibawah ini, diatas pada kode diatas :

.bawahpost {
margin:15px 0px 10px 0px;
padding:5px 0;
clear:both;
}
.bawahkiri {
float:left;
width:265px;
margin-right:15px;
}
.bawahkanan {
float:right;
width:265px;
}

  5.  Lalu cari lagi kode dibawah ini :

<data:post.body/>

Biasanya kode diatas ada 3-4, coba letakkan kode dibawah pada kode yang kedua.

      6.  Pastekan kode dibawah ini, dibawah pada kode diatas :

    <b:if cond='data:blog.pageType == "item"'>
    <div class='bawahpost'>
               <div class='bawahkiri'>
                Kode Iklan anda yang ingin ada di sebelah kiri disini
               </div>
              <div class='bawahkanan'>
              Kode Iklan anda yang ingin ada di sebelah kanan disini
               </div>
    </div>
    </b:if>

 Nah Selesai sudah masalah Cara Menambah Gadget Di bawah Posting Blog , di preview dulu ya jika sudah selsai semua sobat tinggal Klik Save saja mudahkan - See more at: http://djal-destar.blogspot.com/2013/04/menambah-2-kolom-widget-di-bawah.html#chitika_close_button

 UNTUK YANG DI BAWAH SILAHKAN DI IKUTI LANGKAHNYA

• Masuk ke bagian Design - Edit HTML
• Lakukan backup template dengan cara Download Full Template untuk menjaga terjadinya kesalahan dalam pengeditan.
• Cari kode ]]></b:skin> dan letakan kode css dibawah ini diatas kode ]]></b:skin>

  #postleft, #postright {word-wrap: break-word; overflow: hidden; padding: 0;margin: 0;}
  #postleft {float: left;}
  #postright {float:right;}
  #postL {margin:20px 5px 15px 0; padding:5px;}
  #postR {margin:20px 0 15px 5px; padding:5px;}
  #postL .widget, #postR .widget {margin:0; padding:0;}
  #postL .widget {width:200px;}
  #postR .widget {width:200px;}

  Kemudian carilah kode seperti dibawah ini :
  
  
  
  <b:section class='main' id='main' preferred='no'>
  <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
  </b:section></div> 

  • Menu
    • RSS
    • Contact
    • Home

  Situseo Blog
  • Category
  • Sample
  • Color Tools
  • Parse

  Februari 05, 2012

  Membuat Dua Element Tambahan Dibawah Post Kanan Kiri

  Situseo Blog : Membuat dua element baru dibawah post kanan kiri akan sangat bermanfaat untuk menempatkan widget-widget tambahan jika dibagian sidebar sudah penuh dengan widget, selain menambah bentuk tampilan dalam susunan widgetnya, tampilan blog pun akan berbeda.
  
  Tambahan element baru dibawah post ini kita dapat disesuaikan ukurannya antara ukuran bagian kanan dan bagian kiri. Untuk membuat 2 element tambahan dibawah post, kalian bisa mengikuti caranya seperti dibawah ini :
  
• Masuk ke bagian Design - Edit HTML
• Lakukan backup template dengan cara Download Full Template untuk menjaga terjadinya kesalahan dalam pengeditan.
• Cari kode ]]></b:skin> dan letakan kode css dibawah ini diatas kode ]]></b:skin>

#postleft, #postright {word-wrap: break-word; overflow: hidden; padding: 0;margin: 0;} #postleft {float: left;} #postright {float:right;} #postL {margin:20px 5px 15px 0; padding:5px;} #postR {margin:20px 0 15px 5px; padding:5px;} #postL .widget, #postR .widget {margin:0; padding:0;} #postL .widget {width:200px;} #postR .widget {width:200px;}
Selanjutnya meletakan kode HTML pemanggil untuk menampilkan dua elemen baru tersebut, carilah kode seperti dibawah ini :

<b:section class='main' id='main' preferred='no'> <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/> </b:section></div>
Sebagai patokan untuk mencari kode tersebut, carilah kode yang berwarna biru, setelah ketemu letakan kode dibawah ini dibawah kode </b:section>

<div id='postleft'> <b:section class='postL' id='postL' showaddelement='yes'/> </div> <div id='postright'> <b:section class='postR' id='postR' showaddelement='yes'/> </div>

Save template kalian, dan kalian sudah bisa menggunakan tambahan 2 element tersebut untuk menambah beberapa widget.
Terima kasih

Share: