Cara Membuat 2 kolom widget dibawah postingan

Salam sukses selalu buat sobat semua, Belajar Komputer Melalui Internet saat ini akan sedikit membahas tentang Cara Membuat 2 kolom widget dibawah postingan dan semoga artikel ini bermanfaat.

---

Cara Membuat 2 kolom widget dibawah postingan ini saya share buat sobat yang mungkin saat ini lagi mencari tutorial ini atau bisa juga buat sobat yang belum membuat cara ini setelah mampir dan membaca tutorial ini jadi kepikiran buat memasang cara ini.

Dalam membuat 2 kolom widget dibawah postingan ini saya akan sampikan dengan 2 cara yang dimana kedua cara ini tujuannya sama namun terdapat dalam perbedaan dan kelebihan satu sama lain. untuk lebih jelasnya kita bahas satu-satu cara pembuatannya.

Membuat 2 Kolom widget dibawah postingan yang pertama

Pada cara pembuatan 2 kolom ini kodenya dimasukan secara langsung pada halaman edit HTML sehingga kode yang akan dimasukan pada kolom inipun harus memasangnya dengan cara membuka halaman edit HTML arau tidak bisa melalui pada halaman tata letak dengan menambahkan gadget. mungkin itu kekurangan dari cara ini. berikut lebih lengkapnya cara ini;

• Seperti biasa saja login ke blogger
• klik rancangan/template jangan lupa setiap mau ngedit HTML download lengkap dulu ya sobat, buat jaga-jaga aja. kalau ada salah tinggal ngembaliin, alasannya.
• Klik edit HTML klik lanjutkan centang Expand Template Widget kemudian cari kode ]]></b:skin> setelah ketemu letakan kode dibawah ini tepat diatas kode tersebut.

#bawahpost{text-shadow:none;padding:0px;margin:0 0 0px;color:#000;border-right:1px solid #000;} 
#bawahpost .kiri{height:180px;width:45%;float:left;color:#a6a6a6;border-right:1px solid #000;}
#bawahpost .kanan{height:180px;width:54.2%;float:right;} 
.clearfixed:after{content : ".";display:block;height:0;clear:both;visibility:hidden}
.clearfixed  {display : inline-block;}

• Selanjutnya sobat cari kode <data:post.body/> setelah ketemu letakan kode dibawah ini setelah kode <data:post.body/> tersebut. kalau sobat menemukan kode tersebut lebih dari satu maka simpan kode dibawah ini setelah kode  <data:post.body/> yang kedua.

<div class='clearfixed' id='bawahpost'>
<div class='kiri'>
Letakan  Widget disini (kiri)
</div>
<div class='kanan'>
Letakan Widget disini (kanan)
</div>
</div>

• Selanjutnya sobat tinggal pasang widget yang mau dipasang dengan meletakannya pada tulisan yang berwarna biru atau mengganti tulisan warna biru dengan widget sobat.
• Tinggal simpan dan lihat hasilnya

Untuk menyesuaikan tampilannya sobat tinggal mengatur pada kode CSSnya. baik itu menambahkan background , mengatur tinggi widget dan pengaturan lainnya. kalau mau memasang efek bayangan seperti pada blog ini tinggal menambahkan kodenya saja sobat lihat kode disini Membuat efek Bayangan / shadow dengan CSS. Apabila sobat menginginkan tinggi widget sesuai dengan tinggi widget yang dipasang maka kode heightnya dihapus saja. Nah itu cara menambah 2 kolom widget dibawah postingan yang pertama Untuk cara yang kedua tunggu pada postingan berikutnya.

Mungkin sampai disini dulu Belajar Komputer Melalui Internet tentang Cara Membuat 2 kolom widget dibawah postingan kali ini, semoga bermanfaat bagi Anda.

DAPATKAN ARTIKEL VIA EMAIL

Masukan Alamat Email Sobat:

Delivered

BACA JUGA ARTIKEL TERKAIT LAINNYA

Dipublish oleh : Abdul Kohar - Jatinangor Rating 5 Belajar Komputer Melalui Internet, Updated at: 19:45