Mungkin saja sobat merasa belum cukup tempat widget di Blog sobat dan ingin menambahkan widget baru tapi tidak ada lagi tempat add gadget di blog sobat. Nah, mungkin saja sobat ingin membuat element add gadget baru dan letaknya ada di bawah postingan.

Berikut ini admin akan berbagi tentang cara menambah satu dua elemen add gadget di bawah postingan. Untuk membuatnya akan ada penambahkan kode CSS Html juga kedalam template blog. Tutorial dibawah ini terdapat dua bagian yaitu Menambah dua elemen di bawah postingan dan cara menambah satu elemen dibawah postingan.

Elemen add Gadget

Cara Membuat Dua Elemen Tambahkan Gadget di bawah postingan


Di Blogger → Template → Edit HTML ( Sebelumnya backup template kamu agar bisa dikembalikan seperti semulah jika terjadi kesalahan, misalnya simpan template ke dalam notepad)

1. Carilah kode ]]></b:skin> atau </style> dan letakkan kode berikut sebelum kode ]]></b:skin> atau </style> ( tekan Ctrl + F untuk mempermudah pencaharian kode )
#magazine-left { width:48%; float:left; }
#magazine-right { width:48%; float:right; }
Knda masih bisa menambahkan kode CSS diatas, misalnya menambahkan border dll, bisa juga mengatur lebarnya jika merasa kurang pas ( width:48%; ).

2. Kemudian cari kode berikut atau yang serupa:
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog type='Blog'/>
</b:widget>
</b:section></div>
3. Jika sudah dapat letakkan kode berikut dibawah kode </b:section> sebelum kode </div>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:section id='magazine-left' class='magazine-left' showaddelement='yes'>
<b:widget id='Text51' locked='false' title='Column 1' type='Text'/>
</b:section>
<b:section id='magazine-right' class='magazine-right' showaddelement='yes'>
<b:widget id='Text52' locked='false' title='Column 2' type='Text'/>
</b:section>
<div style="clear: both;"></div>
</b:if>
Sampai pada point ini, kamu dapat melihat preview template atau pratinjau. Jika sudah sesuai dengan keinginan, selamat kamu berhasil.

Di atas adalah jika kamu ingin menambahkan dua elemen add gadget di bawah postingan, tapi jika hanya ingin menambahkan satu gadget saja kamu dapat mengedit kode di atas seperti tutorial di bawah ini!

Cara Membuat Satu Elemen Tambahkan Gadget di Bawah Postingan


Di Blogger → Template → Edit HTML ( Sebelumnya backup template kamu agar bisa dikembalikan seperti semulah jika terjadi kesalahan, misalnya simpan template ke dalam notepad)

1. Carilah kode ]]></b:skin> atau </style> dan letakkan kode berikut sebelum kode ]]></b:skin> atau </style> ( tekan Ctrl + F untuk mempermudah pencaharian kode )
#magazine { width:100%; float:center; }
Kamu masih bisa menambahkan kode lain pada CSS diatas, misalnya menambahkan border atau mengatur kembali lebarnya ( width:100%; )  dll.

2. Kemudian cari kode berikut atau yang serupa:
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog type='Blog'/>
</b:widget>
</b:section></div>
3. Jika sudah dapat letakkan kode berikut dibawah kode </b:section> sebelum kode </div>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:section id='magazine' class='magazine' showaddelement='yes'>
<b:widget id='Text51' locked='false' title='Column 1' type='Text'/>
</b:section>
</b:if>
Selanjutnya klik "Save Template" dan setelah tersimpan klik "Tata Letak" kemudian lihat hasilnya. Sampai pada point ini, kamu dapat melihat preview template atau pratinjau. Apakah sudah sesuai dengan keinginan atau belum.

Sekian semoga bermanfaat.
15 Komentar untuk "Cara Menambahkan Satu Dua Elemen Add Gadget di Bawah Postingan"

waduh mas makasih banyak atas postingannya...

kalo saya mau membuat widgetnya berjejer kesamping tapi latarnya tetap auto mesikipun berubah-ubah layar bagaimana ya ? maksud saya supaya bisa responsive. maap masih nubie soalnya :D

http://otakpemulung.blogspot.com
komen dan follow juga ya mas

Punya saya htmlnya tidak angkah nomr 2

Mohon Pencerahan ...bagaimana solusinya.....?

makasih banget ya mas sebelumnya memang saya sedang cari tutorial ini , Eh nyampe kesini dan memang setelah saya praktekan dan berhasil makasih dan semoga webnya tambah lancar.

kodenya bisa berbeda di templatenya agan, tergantung pembuat templatenya, itu hanya penamaannya saja. Untuk lebih mudah setidaknya sobat harus tahu bagian-bagian di templatenya sobat.

Coba saja di atas kode  </style>

ok mas, terimakasih juga telah berkunjung.

waduh, sama-sama semoga bermanfaat deh sob.

pusing juga nyari nya,
tp sudah ketemu kode serupa

THANK ... SANGAT MEMBANTU

kalau untuk menambah sidebar di kanan bagaimana om?

mas kok saya cari div id='main-wrapper' tapi nggk ada?