Cara Menciptakan Iklan Idblognetwork Valid Html5

Cara Menciptakan Iklan Idblognetwork Valid Html5

HTML5 Tutorial Blogger

Sebelumnya Saya membuatkan artikel wacana Cara Mendaftar IdBlogNetwork dan Cara Memasang Iklan IdBlogNetwork. Setelah Saya lihat ternyata script iklan dari IdBlogNetwork memakai iframe, perlu diketahui bahwa iframe sangat tidak anggun untuk SEO. Namun, pada iframe iklan IdBlogNetwork terdapat error untuk Validasi HTML5 yaitu pada nilai dari iframe.  Untuk mengatasinya kita sanggup memanfaatkan jQuery untuk mengatasinya.

Ambil Script Iklan

Silakan ambil script iklan dari IdBlogNetwork, yang belum tahu baca Cara Memasang Iklan IdBlogNetwork. Ini yaitu referensi 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, menyerupai berikut ini diatas instruksi </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 instruksi </head>.

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

Lalu tambahkan instruksi dibawah ini pada widget Anda.

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

Pengaturan

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

Tips ini kondusif untuk Anda gunakan, alasannya yaitu data klik masih berjalan normal. Oleh alasannya yaitu itu Anda sanggup memakai tips ini semoga blog Anda Valid HTM5 ;)

Sumber http://kang-mousir.blogspot.com

Cara Menciptakan Flash Banner Valid Html5

Cara Menciptakan Flash Banner Valid Html5

HTML5 Tutorial Blogger

Mencoba untuk membuatkan tips dan trik Validasi HTML5, kali ini Saya akan coba membuatkan tips bagaimana cara menciptakan flash banner valid HTML5. Sebenarnya artikel menyerupai dengan artikel Saya berjudul Cara Membuat Iklan IdBlogNetwork Valid HTML5. Biasanya flash banner sering memakai iframe dan ini sangat tidak baik untuk SEO. Oleh alasannya itu Saya akan menunjukkan alternatif biar flash banner tersebut SEO Friendly dan tentunya Valid HTML5.

Mengambil URL Flash Banner

Silakan Anda ambil URL Flash Banner yang di inginkan. Contohnya menyerupai 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 isyarat </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 isyarat </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 isyarat 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 sanggup membantu Anda mengatasi error Validasi HTML5 pada flash banner.
Sumber http://kang-mousir.blogspot.com

Cara Mengatasi Error Ampersand Pada Validasi Html5

Cara Mengatasi Error Ampersand Pada Validasi Html5

HTML5 Tutorial Blogger

Artikel masih berafiliasi dengan Validasi HTML5, kali ini Saya mencoba membuatkan tips validasi HTML5 pada error ampersand. Error ampersand yaitu error yang terjadi pada arahan &. Untuk mengatasi error tersebut hanya tinggal menggantinya menjadi &. Pada error ini ada beberapa dilema yang muncul, oleh alasannya itu Saya akan jelaskan satu - per satu.

Error Ampersand Pertama

Biasanya error ini terjadi pada arahan &. Untuk misalnya ibarat dibawah ini.

<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ></script>

Perhatikan arahan yang Saya tandai, maka kita harus ganti arahan tersebut & menjadi &. Maka akan menjadi ibarat arahan dibawah ini.

<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&amp;callback=showpageCount2&amp;max-results=99999" ></script>

Error Ampersand Kedua

Setelah mengganti arahan tersebut ternyata masih error, oleh alasannya itu untuk mengatasinya tinggal menambahkan arahan amp; di belakang arahan &. Contohnya arahan dibawah ini.

<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&amp;callback=showpageCount2&amp;max-results=99999" ></script>

Perhatikan arahan yang Saya tandai, Anda hanya tinggal menambahkan arahan amp; di belakang arahan & sehingga menajadi ibarat arahan dibawah ini.

<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&amp;amp;callback=showpageCount2&amp;amp;max-results=99999" ></script>

Error Ampersand Ketiga

Untuk dilema error ketiga masih sama dengan mengatasi error kedua, Anda hanya tinggal menambahkan arahan amp; di belakang arahan & . Masalah ini akan muncul apabila cara mengatasi error pertama dan kedua masih gagal di lakukan.
Sumber http://kang-mousir.blogspot.com

Validasi Html5 Link Google Font

Validasi Html5 Link Google Font

HTML5 Tutorial Blogger

Masih membahas perihal Validasi HTML5, artikel ini yakni artikel rangkuman dari artikel yang sudah dibahas oleh Link Font Di Head Blog Error Validasi HTML5 dan Validasi HTML5 Pada Link Google Font. Alasan link tersebut tidak valid, alasannya yakni url pada link tersebut dianggap sebagai url ilegal.

Sepertinya ada perbaikan gres pada sistem HTML5. Untuk mengatasi problem tersebut terdapat 3 pilihan untuk mengatasinya, oleh alasannya yakni itu silakan di simak.

Cara Pertama : Memisahkan Jenis Font

Contoh Error pada link font google.

<link href='http://fonts.googleapis.com/css?family=Roboto:700,400,300,300italic,400italic,700italic|Oswald' rel='stylesheet' type='text/css'/>

Dalam font diatas terdapat 2 jenis varian font antara lain jenis Roboto dan Oswald, kedua font tersebut digabungkan dalam satu link dengan instruksi pemisah | . Untuk mengatasinya Anda harus pisahkan kedua varian font tersebut menjadi dua link, menyerupai dibawah ini.

<link href='http://fonts.googleapis.com/css?family=Roboto:700,400,300,300italic,400italic,700italic' rel='stylesheet' type='text/css'/> <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>

Cara Kedua : Merubah Font Menjadi CSS

Silakan Anda buka link pada font google untuk melihat instruksi CSS yang akan dipasang.

<link href='http://fonts.googleapis.com/css?family=Roboto:700,400,300,300italic,400italic,700italic' rel='stylesheet' type='text/css'/> <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>

Perhatikan url yang Saya tandai, silakan Anda buka di browser Anda url tersebut. Anda akan menemukan instruksi CSS yang akan dipasang. Dari kedua URL tersebut di sanggup CSS menyerupai dibawah ini.

@font-face {   font-family:'Oswald';   font-style:normal;   font-weight:400;   src:local('Oswald Regular'),local('Oswald-Regular'),url(http://themes.googleusercontent.com/static/fonts/oswald/v8/-g5pDUSRgvxvOl5u-a_WHw.woff) format('woff'); }  @font-face {   font-family:'Roboto';   font-style:normal;   font-weight:300;   src:local('Roboto Light'),local('Roboto-Light'),url(http://themes.googleusercontent.com/static/fonts/roboto/v10/Hgo13k-tfSpn0qi1SFdUfT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff'); }  @font-face {   font-family:'Roboto';   font-style:normal;   font-weight:400;   src:local('Roboto Regular'),local('Roboto-Regular'),url(http://themes.googleusercontent.com/static/fonts/roboto/v10/2UX7WLTfW3W8TclTUvlFyQ.woff) format('woff'); }  @font-face {   font-family:'Roboto';   font-style:normal;   font-weight:700;   src:local('Roboto Bold'),local('Roboto-Bold'),url(http://themes.googleusercontent.com/static/fonts/roboto/v10/d-6IYplOFocCacKzxwXSOD8E0i7KZn-EPnyo3HZu7kw.woff) format('woff'); }  @font-face {   font-family:'Roboto';   font-style:italic;   font-weight:300;   src:local('Roboto Light Italic'),local('Roboto-LightItalic'),url(http://themes.googleusercontent.com/static/fonts/roboto/v10/7m8l7TlFO-S3VkhHuR0at4bN6UDyHWBl620a-IRfuBk.woff) format('woff'); }  @font-face {   font-family:'Roboto';   font-style:italic;   font-weight:400;   src:local('Roboto Italic'),local('Roboto-Italic'),url(http://themes.googleusercontent.com/static/fonts/roboto/v10/1pO9eUAp8pSF8VnRTP3xnvesZW2xOQ-xsNqO47m55DA.woff) format('woff'); }  @font-face {   font-family:'Roboto';   font-style:italic;   font-weight:700;   src:local('Roboto Bold Italic'),local('Roboto-BoldItalic'),url(http://themes.googleusercontent.com/static/fonts/roboto/v10/t6Nd4cfPRhZP44Q5QAjcC4bN6UDyHWBl620a-IRfuBk.woff) format('woff'); }

Selanjutnya silakan pasang instruksi tersebut diatas instruksi ]]></b:skin> atau instruksi </style>.

Cara Ketiga : Merubah Kode | Menjadi Kode %7

Perhatikan instruksi dibawah, ini yakni pola link google font yang tidak valid.

<link href='http://fonts.googleapis.com/css?family=Roboto:700,400,300,300italic,400italic,700italic|Oswald' rel='stylesheet' type='text/css'/>

Perhatikan instruksi yang Saya tandai, biar menciptakan link tersebut Valid HTML5 silakan Anda ganti instruksi tersebut dengan instruksi %7.
Sumber http://kang-mousir.blogspot.com

Breadcrumbs Seo Friendly Dan Valid Html5

Breadcrumbs Seo Friendly Dan Valid Html5

Belajar SEO HTML5 Tutorial Blogger

Memasang Navigasi Breadcrumbs merupakan salah satu cara untuk meningkatkan secara optimal SEO, dengan memasangnya akan memudahkan pengunjung dan Mesin Pencari dalam menjelajahi blog Anda. Navigasi Breadcrumbs sangat penting untuk sebuah blog, oleh alasannya yakni itu Breadcrumbs ini harus SEO biar data sanggup tampil pada mesin pencari.

Breadcrumbs yakni sebuah peta dimana dan di kategori apa artikel yang kita buat di publikasikan. Adanya navigasi breadcrumbs pada blog akan memudahkan pengunjung untuk menjelajahi blog Anda, dengan begitu pengunjung sanggup mengetahui dimana dan pada kategori apa artikel tersebut dipublikasikan.

Pada breadcrumbs ini sudah Saya tambahkan title tag pada labelnya sehingga lebih SEO. Untuk pemasangan navigasi breadcrumbs silakan disimak baik - baik :D

Langkah Pertama

Silakan Anda simpan isyarat dibawah ini diatas isyarat ]]></b:skin> atau </style>.

.breadcrumbs{padding:10px;margin-bottom:20px;margin-top:0px;font-size:12px;color:#5B5B5B;border-bottom:1px dotted #bbb;}

Langkah Kedua

Silakan Anda cari isyarat dibawah ini pada template Anda.

<b:includable id='main' var='top'>

Kemudian Anda ganti dengan dengan isyarat dibawah ini.

<b:includable id='breadcrumb' var='posts'> <b:if cond='data:blog.homepageUrl != data:blog.url'> <b:if cond='data:blog.pageType == &quot;static_page&quot;'> <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag' title='Beranda'>Beranda</a></span> &#187; <span><data:blog.pageName/></span></div> <b:else/> <b:if cond='data:blog.pageType == &quot;item&quot;'> <!-- Breadcrumb Untuk Halaman Pos --> <b:loop values='data:posts' var='post'> <b:if cond='data:post.labels'> <div class='breadcrumbs'> <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url' title='Beranda'><span itemprop='title'>Beranda</span></a></span> <b:loop values='data:post.labels' var='label'> &#187; <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url' expr:title='data:label.name' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span> </b:loop> &#187; <span><data:post.title/></span> </div> <b:else/> <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag' title='Beranda'>Beranda</a></span> &#187; <span>Tanpa Label</span> &#187; <span><data:post.title/></span></div> </b:if> </b:loop> <b:else/> <b:if cond='data:blog.pageType == &quot;archive&quot;'> <!-- Breadcrumb Untuk Label Search dan Search Pages --> <div class='breadcrumbs'> <span><a expr:href='data:blog.homepageUrl' title='Beranda'>Beranda</a></span> &#187; <span>Arsip untuk <data:blog.pageName/></span> </div> <b:else/> <b:if cond='data:blog.pageType == &quot;index&quot;'> <div class='breadcrumbs'> <b:if cond='data:blog.pageName == &quot;&quot;'> <span><a expr:href='data:blog.homepageUrl' title='Beranda'>Beranda</a></span> &#187; <span>Semua posting</span> <b:else/> <span><a expr:href='data:blog.homepageUrl' title='Beranda'>Beranda</a></span> &#187; <span>Penelusuran <data:blog.pageName/></span> </b:if> </div> </b:if> </b:if> </b:if> </b:if> </b:if> </b:includable> <b:includable id='main' var='top'> <b:include data='posts' name='breadcrumb'/>

Bagi Anda yang ingin membatasi jumlah artikel pada label breadcrumbs silakan baca artikel berjudul Membatasi Jumlah Artikel Pada Label Blog.
Sumber http://kang-mousir.blogspot.com

Membuat Gambar Valid Html5 Pada Blogger

Membuat Gambar Valid Html5 Pada Blogger

HTML5 Tutorial Blogger

Jika sebelumnya Saya menulis artikel perihal Breadcrumbs SEO Friendly dan Valid HTML5. Kali ini Saya menyebarkan tips menciptakan gambar Valid HTML5. Artikel ini ibarat dengan artikel Saya berjudul  Memasang Tag Alt Pada Gambar.

Seperti yang kita ketahui, ketika kita unggah gambar di blogger isyarat gambar tersebut tidak Valid HTML5 atau lebih tepatnya ibarat referensi pada isyarat dibawah ini.

<div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnOonoDmjBfKdSPbv8yx1322zMLoe247Ik0OodhWOsi-DjML7w8VlUqSOntXql-En_5VqQr0ZAucgpvTEWPaa_NXjG2aDvTVOHV_S2l99Hy4sTKnQNzbX-mTme21cCVJ3R3B0-BQgGO6aM/s1600/BOX+HTML5.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnOonoDmjBfKdSPbv8yx1322zMLoe247Ik0OodhWOsi-DjML7w8VlUqSOntXql-En_5VqQr0ZAucgpvTEWPaa_NXjG2aDvTVOHV_S2l99Hy4sTKnQNzbX-mTme21cCVJ3R3B0-BQgGO6aM/s1600/BOX+HTML5.jpg" /> </a> </div>

Silakan Anda rubah isyarat diatas menjadi ibarat isyarat dibawah ini biar Valid HTML5. Anda isi tag alt pada isyarat dibawah dengan nama gambar.

<div class="separator" style="clear: both; text-align: center;"> <img alt=" Jika sebelumnya Saya menulis artikel perihal  Membuat Gambar Valid HTML5 Pada Blogger" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnOonoDmjBfKdSPbv8yx1322zMLoe247Ik0OodhWOsi-DjML7w8VlUqSOntXql-En_5VqQr0ZAucgpvTEWPaa_NXjG2aDvTVOHV_S2l99Hy4sTKnQNzbX-mTme21cCVJ3R3B0-BQgGO6aM/s1600/BOX+HTML5.jpg" /> </div>

Sumber http://kang-mousir.blogspot.com

Cara Menciptakan Iklan Bidvertiser Valid Html5

Cara Menciptakan Iklan Bidvertiser Valid Html5

HTML5 Internet

Masih fokus untuk menulis perihal Validasi HTML5. Kali ini Saya akan menyebarkan tips Validasi HTML5 Pada Iklan Bidvertiser. Sebelumnya Saya juga pernah menciptakan artikel perihal Cara Membuat Iklan IdBlogNetwork Valid HTML5 dengan mengatasi error ampersand dan yang lainnya, namun pada cara ini berbeda.

Artikel ini dibentuk untuk yang sudah memiliki akun bidvertiser, bagi yang belum punya silakan daftar dahulu dan baca artikel Saya berjudul Cara Mendaftar Menjadi Publisher Bidvertiser. Kalau Anda juga tidak punya akun juga tidak apa - apa, artikel ini dapat jadi rujukan perihal ilmu Validasi HTML5.

Cara Mengatasi Error Validasi HTML5 Pada Iklan Bidvertiser

Silakan Anda salin dahulu aba-aba iklan dari Bidvertiser, Saya beri pola pada aba-aba iklan dari Bidvertiser dibawah ini.

 <!-- Begin BidVertiser code --> <SCRIPT LANGUAGE="JavaScript1.1" SRC="http://bdv.bidvertiser.com/BidVertiser.dbm?pid=592294%26bid=1479054" type="text/javascript"></SCRIPT> <noscript><a href="http://www.bidvertiser.com">marketing</a></noscript> <!-- End BidVertiser code --> 

Untuk merubahnya semoga Valid HTML5 silakan Anda rubah menyerupai aba-aba dibawah ini.

<script src="http://bdv.bidvertiser.com/BidVertiser.dbm?pid=592294%26bid=1479054" type="text/javascript"></script> 

Selanjutnya Anda hanya tinggal memasang aba-aba iklan diatas pada blog Anda ;)
Sumber http://kang-mousir.blogspot.com