Pasang Widget 2 Kolom Di Bawah Posting

Pada posting terdahulu yang berjudul Membuat widget Dibawah Posting telah di tulis bagaimana cara membuat widget di bawah posting pada template blogger, namun pada tutorial tersebut hanya membuat berupa satu kolom saja. Rupanya ada yang penasaran dan menanyakan tentang bagaimana membuat widget dibawah posting agar bisa menjadi dua kolom? Yuk kita bahas.

Prinsip dasar yang harus diingat adalah anda membuat satu kolom utama yang ukuran lebarnya sama dengan lebar kolom posting seperti yang telah di terangkan sebelumnya, kemudian kita membuat lagi dua buah kolom di dalamnya, yang satu diatur agar berada disebelah kiri dan kolom yang satu lagi berada disebelah kanan. Berikut ilustrasinya :

kolom

 

Dari ilustrasi di atas terlihat ada 3 buah kolom, dalam kenyataannya kolom tersebut bisa memakai garis pinggir agar terlihat kolom-kolomnya atau bisa juga tidak ditampilkan sehingga tidak akan terlihat bahwa disitu adalah merupakan gabungan dari 3 buah kolom.

Bagaimana cara mengatur tata letak kolom-kolom tersebut? jawabnya yaitu dengan kode CSS. Dengan CSS kita dapat mengatur semua itu, baik lebar kolom, warna dasar kolom dan lain-lain. Sebagai contoh, kolom utama akan dinamakan .bawahpost kolom kiri akan dinamakan .bawahkiri, kolom kanan akan dinamakan .bawahkanan. CSS class nya akan seperti ini :

 

.bawahpost {     

}

.bawahkiri {

}

.bawahkanan {

}

 

Yang harus anda perhitungkan pertama kali adalah anda harus mengetahui berapa ukuran lebar kolom posting anda, sehingga nanti bisa menentukan berapa lebar kolom kiri serta kolom kanan. Sebagai contoh misalkan kolom posting adalah sebsar 550px, maka kolom kiri dan kanan tinggal di bagi dua, namun anda juga harus memperhitungkan besarnya padding serta margin, maka sebagai contoh kolom kiri akan kita jadikan 265px dan kolom kanan sebesar 265px. Contoh kode CSS nya seperti ini :

 

.bawahpost {
margin:15px 0px 10px 0px;
padding:5px 0;
clear:both;
}

.bawahkiri {
float:left;
width:265px;
margin-right:15px;
}

.bawahkanan {
float:right;
width:265px;
}

 

Untuk contoh kode CSS sudah beres, selanjutnya tinggal kode HTML untuk memanggil fungsi CSS tadi. Karena dalam kode tadi yang dipakai adalah tanda titik ( . ) maka ini adalah fungsi class, sehingga contoh kode HTML nya seperti ini :

 

<b:if cond='data:blog.pageType == &quot;item&quot;'>

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

 

Sebagai contoh sederhana, berikut cara-cara mengimplementasikan kode diatas pada template anda :

 

* Login ke blogger dengan ID anda

* Klik Tata Letak

* Klik Tab Edit HTML

* Silahkan backup dulu sebelum melakukan editting template dengan klik Download Template Lengkap.

* Klik kotak kecil disamping tulisan Expand Widget Template.

expand

* Carilah kode ]]></b:skin>, lalu copy paste kode di bawah ini persis diatasnya :

 

.bawahpost {
margin:15px 0px 10px 0px;
padding:5px 0;
clear:both;
}

.bawahkiri {
float:left;
width:265px;
margin-right:15px;
}

.bawahkanan {
float:right;
width:265px;
}

 

* Lalu carilah kode berikut :

 

<data:post.body/>

 

* Kemudian copy paste kode di bawah ini persis di bawahnya :

 

<b:if cond='data:blog.pageType == &quot;item&quot;'>

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

 

* Klik tombol SIMPAN TEMPLATE.

* Selesai.

 

Langkah diatas hanya sebagai contoh, dan mudah-mudahan anda memperoleh sebuah gambaran prinsip dasar. Karena jika anda sudah faham akan prinsip dasarnya, membuat berbagai variasi pun akan sangat mudah. Satu sebagai tambahan, jika anda menginginkan lebar kolom yang leboh dinamis, anda bisa menggunakan satuan persen ( % ) bukan memakai satuan pixel ( px )

Selamat mencoba.

Membuat widget Dibawah Posting

Banyak yang mengirimkan pesan melalui email menanyakan perihal cara membuat widget di bawah posting, semisal untuk memasang iklan google adsense, form berlangganan, Artikel terkait dan lain sebagainya.

Untuk memasang kode google adsense dibawah posting sebenarnya sudah pernah di bahas pada artikel  Pasang Iklan Google Adsense di Bawah Posting, namun karena umur posting tersebut telah lama dan telah banyak perubahan pada template blogger semisal fungsi read more yang telah di dukung oleh blogger, maka sekarang artukel tersebut tidak lagi lagi relevan.

Untuk posting ini, kang Rohman lebih menekankan terhadap bagaimana cara membuat tempat atau kotak di bawah posting agar bisa dipasang berbagai widget yang diinginkan.

widget bawah post

 

Prinsip awal yang perlu di ingat adalah anda harus mengetahui kode posting blogger, dan kodenya adalah sebagai berikut :


<data:post.body/>



 


Secara logika, jika anda ingin menyimpan sesuatu katakanlah Iklan, maka anda tidak usah pusing, simpan saja kode iklannya di bawah kode tadi, misal ilustrasinya seperti ini :


<data:post.body/>


< simpan kode iklan anda disini >




Sangat sederhana bukan? namun itu belum sempurna. Kondisi yang kurang nyaman adalah iklan anda akan muncul setelah posting, namun iklannya akan terlihat juga di halaman depan sehingga pemandangan kurang sedap terhadap blog anda. Solusi yang sederhana adalah anda harus menambahkan sedikit kode tambahan seperti ini :


 


<data:post.body/>


<b:if cond='data:blog.pageType == &quot;item&quot;'>


< simpan kode iklan anda  disini >


</b:if>


 


Kode tambahan yang dicetak hijau akan membuat iklan anda tidak akan muncul di halaman depan dan hanya akan muncul pada halaman penuh artikel saja. Sampai disini sebenarnya sudah selesai, namun untuk menambah keindahan misalkan widget yang dipasang mempunyai warna background atau dengan gambar, maka anda bisa menggunakan kode div class, misal seperti ini :


 


<data:post.body/>


<b:if cond='data:blog.pageType == &quot;item&quot;'>


<div class=’bawahpost’>


< simpan kode iklan anda  disini >


</div>


</b:if>



Dari contoh diatas, class yang digunakan di beri nama bawahpost, dari sini kita bisa mengatur berbagai tampilan yang berada diantara div dengan menambahkan berbagai property didalam CSS :


 


.bawahpost{


tambahkan berbagai property disini


}


 


Misalkan tampilan yang diinginkan adalah mempunyai warna latar biru dan pinggirnya mempunyai garis border serta tulisan didalamnya tidak ingin rapat dengan dinding luar, maka contoh CSS yang di buat seperti ini :


 


.bawahpost{
padding:10px;
margin:10px 0px;
background:#e1f2ff;
border:1px solid #ddd;
line-height:1.6em;


}


Kode yang berwarna merah bisa anda kreasikan sesuai dengan imajinasi anda, namun tentu saja anda harus sedikit menguasai dasar-dasar CSS. Lalu dimana kode tersebut disimpan? cara mudah adalah anda meletakkannya di atas kode ]]></b:skin> karena kode tersebut adalah kode penutup CSS pada template blogger.


 

.bawahpost{
    padding:10px;
    margin:10px 0px;
    background:#e1f2ff;
    border:1px solid #ddd;
    line-height:1.6em;
}

]]></b:skin>



Sebagai contoh sederhana, berikut cara-cara mengimplementasikan kode diatas pada template anda :


 


* Login ke blogger dengan ID anda


* Klik Tata Letak


* Klik Tab Edit HTML


* Silahkan backup dulu sebelum melakukan editting template dengan klik Download Template Lengkap.


* Klik kotak kecil disamping tulisan Expand Widget Template.


expand


* Carilah kode ]]></b:skin>, lalu copy paste kode di bawah ini persis diatasnya :


 

.bawahpost{
padding:10px;
margin:10px 0px;
background:#e1f2ff;
border:1px solid #ddd;
line-height:1.6em;
}


* Lalu carilah kode berikut :


 


<data:post.body/>


 


* Kemudian copy paste kode di bawah ini persis di bawahnya :


 


<b:if cond='data:blog.pageType == &quot;item&quot;'>


<div class='bawahpost'>
Bagi yang ingin belajar <strong>PHP / HTML / MySQL</strong> dengan sangat mudah sambil langsung praktek, kang Rohman rekomendasikan anda belajar <a href='http://www.kursus-online.com/?id=rohman' rel='nofollow' target='_blank'><strong>di sini</strong></a> &#160;&#160;<strong>&#171;&#171;</strong>&#160;sok atuh di klik biar situsnya keluar.
</div>
</b:if>


* Klik tombol SIMPAN TEMPLATE.


* Selesai.


 


Langkah diatas hanyalah sebagai contoh saja, kata-kata yang berwarna merah tentu saja bisa diganti sesuai keperluan anda. Hasilnya nanti adalah akan terlihat sebuah kotak berwarna biru pada setiap akhir posting anda.


widget


Hasilnya adalah widget dibawah post satu kolom, jika ingin membuat dua kolom berdampingan diperlukan sedikit variasi pada kode CSS nya. Semoga dapat sedikit difahami.

Alamat Blogku yang di hapus

Semalam iseng-iseng baca komentar dari posting kemaren lusa tentang hati-hati blogger sedang gencar hapus blog. Rupanya ada yang mengingatkan saya melalui komentar, namun sayang kenapa harus bersembunyi dibalik anonim padahal komentarnya sangat bermutu. berikut kutipannya :




Awalnya saya simpatik dengan Anda dan Blog Anda, tetapi karena postingan Anda yang satu ini (hati-hati blogger sedang gencar hapus blog), Saya jadi tidak simpatik lagi dengan Anda dan blog Anda.



Saya punya ± Ada 100 blogger dalam satu Account/Gmail, yang saya buat hanya untuk contoh templates (Blog Pasif) sejak 2 tahun yang lalu, dan sampai saat ini, TAK ADA SATU-PUN YANG DIHAPUS OLEH BLOGGER. So...



¤ Apa yang Anda tulis merupakan FITNAH terhadap blogger,

¤ Apa yang Anda tulis memang sudah ada di TOS Blogger

---> http://www.blogger.com/terms.g

¤ Apa yang Anda tulis adalah cara PICIK Anda berpromosi,



Jika memang Blogger/Google akan menghapus blogger² yang pasif (bukan yang melanggar TOS), pastinya Saya yakin akan memberikan informasinya, salah satunya di http://buzz.blogger.com/.



Jika memang teman Anda blog-nya dihapus oleh pihak Blogger,

¤ Buktikan dimana alamat blog kawan Anda,

¤ Buktikan siapa kawan Anda itu,

¤ Buktikan jika memang pihak Blogger yang menghapusnya,

¤ Buktikan JANGAN CUMAN NGOMONG, karna kalo cuman ngomong burung Beo-pun bisa. Thanks.



"Silahkan Anda hapus komentar Saya jika anda tidak bisa membuktikan kebenaran apa yang Anda tulis atau jika Anda tidak ingin diketahui oleh semua blogger kalau Anda PICIK 'N BANCI". Thanks.



Rgrd,

Yang Dulu Simpatik Dengan Anda Tetapi Sekarang Tidak Lagi.

Thinking Membaca komentar ini saya jadi di ingatkan bahwa menulis artikel itu memang harus bisa dipertanggung jawabkan.



Dengan tidak bermaksud membela diri, namun hanya sekedar meluruskan saja dan agar tidak menjadi FITNAH seperti yang dikatakan oleh anonim, berikut alamat blog kang Rohman yang dihapus isinya oleh blogger :



http://creditloancentre.com



creditloan



Sudah coba klik Restore dan berharap isinya bisa kembali, namun tetap tidak bisa kembali. Tadinya blog ini adalah demo template dari Magazine Template R.1.4, silahkan di cek disini atau disini serta disini, kebetulan sampai saat ini saya belum mengubah link demo template tersebut.



Untuk teman kang Rohman yang dihapus accountnya adalah pemilik dari http://www.kangnoval.com, silahkan ngobrol dengan pemiliknya, tanyakan kebenaran tentang yang saya tulis.apakah benar atau memang sebuah kebohongan.



Beberapa blog teman yang isinya telah di hapus oleh blogger :




  • http://ndyteen.com

  • http://articlesforbusiness.blogspot.com

  • http://agnoe-dollcollection.blogspot.com


Disini saya tidak bermaksud memuat sebuah artikel provokasi, namun hanya saling mengingatkan saja agar lebih berhati-hati dan sebaiknya jangan melanggar TOS blogger seperti telah di tulis pada artikel sebelumnya. Jika anda menganggap ini adalah artikel sampah, silahkan abaikan saja.



Untuk akhir tulisan yang bersifat promosi, mohon maaf jika hal tersebut mengganggu anda.