Cara Membuat Flash Banner Valid HTML5

Mencoba untuk berbagi tips dan trik Validasi HTML5, kali ini Saya akan coba berbagi tips bagaimana cara membuat flash banner valid HTML5. Sebenarnya artikel mirip dengan artikel Saya berjudul Cara Membuat Iklan IdBlogNetwork Valid HTML5. Biasanya flash banner sering menggunakan iframe dan ini sangat tidak baik untuk SEO. Oleh karena itu Saya akan memberikan alternatif agar flash banner tersebut SEO Friendly dan tentunya Valid HTML5.

Mengambil URL Flash Banner

Silakan Anda ambil URL Flash Banner yang di inginkan. Contohnya seperti ini.

<iframe src="http://namadomain.com/Fbdevhxxxx.swf"/>

Anda ambil URL yang Saya tandai diatas.

Memasang jQuery

Kemudian tambahkan jQuery Libary dibawah ini dan simpab diatas kode </head>.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>

Lalu simpan jQuery ini diatas kode </body>.

<script type='text/javascript'>
//<![CDATA[
        $(this).replaceWith('<iframe class="banner loader" src="' + $(this).data('src') + '" allowfullscreen="allowfullscreen" width="738px" height="100px" marginwidth=0 marginheight=0 ></iframe>');
    });
//]]>
</script>

Memasang Banner

Selanjutnya simpan kode dibawah ini pada widget Anda HTML/JavaScript.

<div class="banner loader" data-src="URL Flash Banner"></div>

Itulah cara Cara Membuat Flash Banner Valid HTML5 .Semoga atrikel ini dapat membantu Anda mengatasi error Validasi HTML5 pada flash banner.

DroidPluss Responsive Blogger Template

DroidPluss Responsive Blogger Template

Demo

Download

Pada kesempatan kali ini Saya mencoba berbagi Template Blogger yang cukup fenomenal di tahun 2013 kemarin bahkan sampai sekarang. Template buatan salah satu blogger ternama Indonesia yaitu Kang Ismet ini dibagikan secara gratis, walaupun gratis fitur - fitur pada template ini bisa dibilang seperti Template Premium.

Fitur Template

1. Responsive
2. Valid HTML5 ( Home Page and Post Page )
3. Valid CSS3
4. SEO Friendly
5. Sticky Widget
6. Back To Top
7. Breadcrumbs
8. Page Navigation
9. Smooth Scroll To Comment Hash
10. Customized Deleted Comment
11. Costumized Error Page
12. Cool Threaded Comment
13. Emoticon In Comment
14. and more.

Pengaturan Template

Untuk merubah sticky widget ( Sosial media yang melayang ) silahkan cari kode seperti dibawah ini kemudian edit.

<div id='stickywidget'>
<h3>Sosial Media</h3>
.....
.....
.....
</div>

Untuk membuat widget Artikel Terbaru, tambah widget HTML/JavaScript dan simpan kode ini pada widget Anda.

<script type="text/javascript">
function showrecentposts(json){for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}posttitle=posttitle.link(posturl);if(standardstyling)document.write('<li>');document.write(posttitle)}if(standardstyling)document.write('</li>')}
</script>
<script type="text/javascript">var numposts = 5;var showpostdate = true;var showpostsummary = true;var numchars = 100;var standardstyling = true;</script><script type="text/javascript" src="http://droidpluss.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts"></script>

Silakan cari dan hapus kode dibawah ini agar blog Anda tetap Valid HTML5.

<b:include name='quickedit'/>

Cara Membuat Iklan IdBlogNetwork Valid HTML5

Sebelumnya Saya berbagi artikel tentang Cara Mendaftar IdBlogNetwork dan Cara Memasang Iklan IdBlogNetwork. Setelah Saya lihat ternyata script iklan dari IdBlogNetwork menggunakan iframe, perlu diketahui bahwa iframe sangat tidak bagus untuk SEO. Namun, pada iframe iklan IdBlogNetwork terdapat error untuk Validasi HTML5 yaitu pada nilai dari iframe.  Untuk mengatasinya kita bisa memanfaatkan jQuery untuk mengatasinya.

Ambil Script Iklan

Silakan ambil script iklan dari IdBlogNetwork, yang belum tahu baca Cara Memasang Iklan IdBlogNetwork. Ini adalah contoh script iklan.

<iframe frameborder="0" src="http://sebar.idblognetwork.com/psg_ppc_flash.php?b=12756&sz=300x250" width="310px" height="260px" marginwidth=0 marginheight=0 ></iframe>

Selanjutnya memasang jQuery sebagai alternatif, seperti berikut ini diatas kode </body>.

<script type='text/javascript'>
//<![CDATA[
setTimeout(function() {
        $(this).replaceWith('<iframe class="idblognetwork loader" src="' + $(this).data('src') + '" allowfullscreen="allowfullscreen" width="310px" height="260px" marginwidth=0 marginheight=0 ></iframe>');
    });
//]]>
</script>

Kemudian tambahkan jQuery Libary dibawah ini dan simpab diatas kode </head>.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>

Lalu tambahkan kode dibawah ini pada widget Anda.

<div class="idblognetwork loader" data-src="URL IKLAN"></div>

Pengaturan

Silakan ganti dan sesuai pengaturannya, agar lebih mudah Saya memberikan warna yang harus diganti, ganti dengan warna yang Sama. Bila menemukan kode & pada kode iklan rubah jadi & atau baca artikel Saya berjudul Cara Mengatasi Error Ampersand Pada Validasi HTML5

Tips ini aman untuk Anda gunakan, karena data klik masih berjalan normal. Oleh karena itu Anda bisa menggunakan tips ini agar blog Anda Valid HTM5 ;)

Cara Memasang Iklan IdBlogNetwork

Artikel ini adalah artikel lanjutan dari Cara Mendaftar IdBlogNetwork. Bagi Kalian yang sudah diterima menjadi publisher IdBlogNetwork ingin memasang iklan pada blog namun masih bingung, mungkin artikel ini dapat membantu.

Biasanya bagi blogger yang sudah diterima jadi publisher IdBlogNetwork akan diminta mengisi data diri, silakan Anda isi sesuai dengan keterangan yang ada. Yuk, langsung saja bagaimana cara memasangnya.

Pertama login ke akun IdBlogNetwork Anda tentunya, saat Anda masuk akan menemukan beberapa menu pilihan. Silakan pilih menu Script. Dalam menu terdapat beberapa pilihan iklan yang akan dipasang.

Jenis - Jenis Iklan IdBlogNetwork

1. PPC Static Banner
Iklan Pay Per Click, Anda akan dibayar apabila terjadi klik yang dilakukan pengunjung blog Anda. Iklan ini berbentuk gambar.

2. PPC Flash Banner
Iklan Pay Per Click, Anda akan dibayar apabila terjadi klik yang dilakukan pengunjung blog Anda. Iklan ini berbentuk flash animasi.

3. PPA Static Banner
Iklan berupa gambar, PPA atau Pay Per Action. Anda akan dibayar , jika iklan di klik dan ada aksi. Maksudnya Anda akan dibayar apabila pengunjung meng klik dan terjadi  action/registration user pada landing page advertiser.

4. PPL
Pay Per Lead dihitung apabila transaksi pembeli.

5. Video Banner
Anda akan dibayar apabila video ditonton oleh pengunjung dari awal sampai akhir.

6. PBR/PPR
Pay Per Browse/Pay Per Read, Anda akan dibayar apabila pengunjung blog melakukan klik dan membaca artikel selama kurang lebih 60 detik atau waktu yang ditentukan.

Langkah Memasang Iklan IdBlogNetwork

1. Silakan pilih jenis iklan.
2. Kemudian pilih ukuran iklan yang akan Anda pasang pada blog Anda kemudian klik iklan tersebut.
3. Setelah di klik Anda akan mendapatkan kode iklan.
4. Selanjutnya Anda hanya perlu salin kode tersebut dan simpan pada gadget atau Anda juga bisa menyimpan iklan tersebut dimana Anda mau.