Cara Menambah Elemen add Gadget Di Bawah Postingan. Berikut ini seocips.com akan membahas tentang Cara Menambah Elemen Di bawah Postingan. Untuk membuatnya anda akan sedikit menambahkan kode CSS ke dalam tamplate blog dan 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 Menambah dua elemen di bawah postingan

Login ke akun anda >> pada dasbor klik >> Template >> Edit HTML. ( Sebelum lanjut sebaiknya backup template anda agar bisa di kembalikan seperti semulah jika nantinya terjadi kesalahan. Misalnya simpan template anda 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; }
Anda masih bisa menambahkan kode CSS diatas, misalnya menambahkan border dll. Anda bisa juga mengaturl 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, Anda dapat melihat preview template atau pratinjau. Jika sudah sesuai  dengan keinginan anda, selamat anda berhasil tapi jika belum mungkin anda dapat mencoba trik yang lain di artikel bagaimana membuat dua kolom add gadget dibawah postingan.

Diatas adalah jika anda ingin menambahkan dua elemen add gadget dibawah postingan. Tapi jika anda hanya ingin menambahkan satu gadget saja anda dapat mengedit kode di atas seperti tutorial di bawah ini!

cara menambah satu elemen dibawah postingan

Login ke akun anda >> pada dasbor klik >> Template >> Edit HTML. ( sebelumnya backup template anda agar bisa di kembalikan seperti semulah jika terjadi kesalahan. Misalnya simpan template anda 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; }
Anda 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, Anda dapat melihat preview template atau pratinjau. Jika sudah sesuai dengan keinginan anda atau belum.

Sebagai tambahan anda juga dapat mencoba menambahkan elemen add gadget diatas postingan blog. atau menambahkan add gadget footer 3 kolom di blog. Nah bagaimana? mudah-mudahan sobat semuanya berhasil menambahkan elemen di blog sobat.
15 Komentar untuk "Cara Menambah 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?