Memasang Kode Javascript Iklan di Atas Samping Postingan

Memasang Kode Javascript Iklan di Atas Samping Postingan Pada artikel sebelumnya kita telah membuat image dan teks random berbasis Javascript. Script Javascript tersebut bisa digunakan untuk membuat iklan produk yang akan kita tawarkan. Iklan akan menampilkan gambar dan teks berserta judul yang berganti berbeda-beda setiap kali halaman situs direfresh.

Baca juga: Cara membuat iklan random image dan teks berbasis Javascript.




Sekarang saatnya memasukkan kode script tersebut ke blog agar muncul di setiap halaman blog.

1. Parse terlebih dahulu kode Javscript di HTML Escape

Memasang langsung kode Javascript ke template postingan blogspot akan menimbulkan error, karenanya kode Javascript harus diparse terlebih dahulu. Kopi kode Javascript random iklan dan pastekan di sana kemudian klik Escape.

2. Masuk ke akun blog, pilih Template > Edit HTML

3. Cari kode berikut. Sebaiknya gunakan fitur Searching (Ctrl F)

HTML

<data:post.body/>,

tepat di atas kode tersebut, sisipkan kode berikut ini

HTML

<div style="float:left; margin-right:15px;margin-bottom:15px">
.... 
...Kode Javascrit hasil parse...
... 
</div>

Catatan: ganti left dengan right bila iklan ingin dimunculkan di kanan postingan.

Membuat Situs Galeri Produk Kaos Ocean Seven dengan Blogspot

Judul menggunakan kata Ocean Seven karena tutorial ini membahas situs blogspot galeri produk dengan postingan instan langsung berupa 300 entri kaos Ocean Seven. Template blogspot bisa digunakan untuk galeri produk lainnya.



Catatan.
Kita akan memasukkan langsung postingan produk Ocean Seven setidaknya 300 produk. Kadang blogspot menganggap postingan dengan jumlah ratusan sekaligus sebagai autoblog. Kadang situs dianggap sebagai spam karena melakukan postingan jumlah ratusan dalam sekejap. Sehingga akun blogspot dibanned. Saya pribadi berkali-kali melakukan ini aman-aman saja. Untuk berjaga-jaga terhindar dari banned. Sebaiknya gunakan akun blogspot yang benar-benar baru. Bahkan kalau bisa buat gmail baru untuk keperluan eksperimen ini. Saya sudah memperingatkan. Use your own risk.

Baiklah kita mulai
1. Daftar Blogspot.
Daftar blogspot sangat mudah. Modalnya hanya akun Gmail. Tutorialnya banyak sekali. Tidak akan dibahas di sini.

2. Download Themes
Download Themes Galeri di sini
Themes Blogspot responsive (tampilan layar menyesuaikan perangkat yang digunakan untuk membuka situs)
Ekstrak themes hasil download. Gunakan WinZIP.



3 Install Themes Blogspot
Pilih Template > Backup Restore > telusuri file themes > Upload



4. Customize Themes
o. Baris 653 atau sekitarnya (kadang beda) ganti dengan alamat blogspot Agan
o. Baris 1938 atau sekitarnya ganti dengan alamat facebook fan page Agan
o. Baris 1939 atau sekitarnya dengan twitter Agan
o. baris 1940 atau sekitarnya dengan alamat google plus Agan
o. Bila Agan tidak mempunya alamat fb dll, ganti saja alamatnya dengan # (tanda pagar)



5. Atur Layout
Layout > Remove widget yang ada di bagian atas posting. Atur widget agar ditempatkan di bagian sidebar dan footer





6. Import Produk
o. Ini yang paling penting. Download file untuk postingannya di sini
o. Ekstrak gunakan WinZip
o. Setting > Other > Import Blog
o. Uncek pilihan langsung Publish. Posting produk akan masuk ke dalam halaman Draft. (lihat gambar)
o. Tunggu sebentar hingga proses import selesai.
o. Bila sudah selesai. Agan akan melihat postingan di halaman Draft. Untuk mempublish banyak postingan klik kotak di atas postingan kemudian klik publish. (lihat gambar)
o. Selesai. Agan sudah mempunyai situs galeri produk Ocean Seven dengan 300 Produk.

Beritahu link alamat situs ini ke konsumen agan. Agan bisa melakukan update prostingan berupa update produk baru dll di situs

One Column Responsive Free Template Blogspot

Template ini masih keturunan dari Johny Ribet miliknya Mas Kolis.

Kebetulan saya membutuhkan template blogspot dengan hanya satu kolom. Jadinya si Johny Ribet ini dimodifikasi dengan membuang sidebar dan menjadikan kolom artikel penuh.

Ada empat varian One Column Responsive Free Template Blogspot si Johny Ribet ini. Bila Agan membutuhkan untuk keperluan blogspot silakan download.

Sesuai dengan Johny Ribet aslinya, template ini telah Related Post with Thumbnail ready.

Johny Ribet SOKLAT

Download 

Johny Ribet RED-ON

Download

Johny Ribet BLACKOK

Download

Johny Ribet BULAO

Download

UPDATE Template Johny Ribet

Sok-sok-an sebenarnya bila saya menuliskan kata update setelah kata Johny Ribet. Template ini milik Mas Kolis. Template ini bagus. Selain responsive, template Johny Ribet ini juga fast loading dan tentunya menganut kaidah SEO.

Saya sudah kadung cinta pada template Johny Ribet ini. Namun beberapa bulan belakangan, link gambar pendukung template Johny RIbet ini broken link. Raib, entah ke mana. Gambar tersebut berganti gambar tanda seru gede-gede di halaman situs. Benar-benar mengganggu. Sepertinya akun google Mas Kolis tempat menyimpan gambar tersebut dibanned lagi.

Selama itu pun, belum ada update dari Mas Kolis. Mas Kolis sudah lama tidak muncul. Kicauan terakhir di Twitter-nya pun di bulan November 2013. Kemana ya Mas Kolis? Ada yang tahu?

Akhirnya saya nekad untuk memperbaiki template Johny Ribet ini. :P. Sesuai dengan namanya, Ribet, template ini buat nubi kayak saya banyak makan waktu untuk diperbaiki. Jadilah si Johny Ribet dimodifikasi dan menghasilkan beberapa varian.

Karena saya pribadi tidak ingin ribet, tampilan template si Johny ini disederhanakan. Tidak banyak menggunakan dropshadow juga background gambar. Memakai warna solid saja. Bagi yang ingin menggunakan template ini silakan downloadd linknya di bawah ini. Sesuai dengan Johny Ribet aslinya, template ini telah Related Post with Thumbnail ready.

Johny Ribet - OCEAN

Download

Johny Ribet - OREN

Download

Johny Ribet - PINKY

Download

Johny Ribet - REDORA

Download

Johny Ribet - LUXY

Download