Membuat Navigasi Halaman Ala Wordpress

Membuat Navigasi Halaman sudah Saya tulis pada artikel berjudul Memasang Navigasi Halaman Pada Blog, namun itu hanya navigasi biasa. Oleh karena itu Saya akan berbagi navigasi halaman yang lebih keren dari sebelumnya yaitu Navigasi Halaman Ala Wordpress.

Tutorial ini Saya dapat dari blog Vietnam pada artikelnya yang berjudul Page Navigation với phong cách WP-PageNavi, disini Saya kan terjemahkan ke dalam Bahasa Indonesia agar para blogger Indonesia lebih memahaminya.

Cara Memasang Navigasi Halaman Ala Wordpress Pada Blog

1. Silakan Anda simpan kode CSS ini diatas kode ]]></b:skin> atau </style>



.pagenavi{clear:both;margin:20px 0 10px;text-align:center;font-weight:bold;color:#fff !important;text-transform:uppercase}
.pagenavi span,.pagenavi a{padding:5px 15px;margin-right:3px;display:inline-block;color:#fff !important;background-color:#3498db;}
.pagenavi .current{color:#fff !important;background-color:#555;}
.pagenavi .current,.pagenavi .pages,.pagenavi a:hover{color:#fff !important;background-color:#555;}
.pagenavi .pages {margin:0 -1px 0 0}

2. Kemudian Anda cari kode mirip seperti ini

<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'>

Lalu simpan kode dibawah ini dibawahnya

 <b:includable id='page-navi'>
<div class='pagenavi'>
<script type='text/javascript'>
var pageNaviConf = {
perPage: 5,
numPages: 5,
firstText: &quot;First&quot;,
lastText: &quot;Last&quot;,
nextText: &quot;Next&quot;,
prevText: &quot;Prev&quot;
}
</script>
<script type='text/javascript'>
//<![CDATA[
function pageNavi(o){var m=location.href,l=m.indexOf("/search/label/")!=-1,a=l?m.substr(m.indexOf("/search/label/")+14,m.length):"";a=a.indexOf("?")!=-1?a.substr(0,a.indexOf("?")):a;var g=l?"/search/label/"+a+"?updated-max=":"/search?updated-max=",k=o.feed.entry.length,e=Math.ceil(k/pageNaviConf.perPage);if(e<=1){return}var n=1,h=[""];l?h.push("/search/label/"+a+"?max-results="+pageNaviConf.perPage):h.push("/?max-results="+pageNaviConf.perPage);for(var d=2;d<=e;d++){var c=(d-1)*pageNaviConf.perPage-1,b=o.feed.entry[c].published.$t,f=b.substring(0,19)+b.substring(23,29);f=encodeURIComponent(f);if(m.indexOf(f)!=-1){n=d}h.push(g+f+"&max-results="+pageNaviConf.perPage)}pageNavi.show(h,n,e)}pageNavi.show=function(f,e,a){var d=Math.floor((pageNaviConf.numPages-1)/2),g=pageNaviConf.numPages-1-d,c=e-d;if(c<=0){c=1}endPage=e+g;if((endPage-c)<pageNaviConf.numPages){endPage=c+pageNaviConf.numPages-1}if(endPage>a){endPage=a;c=a-pageNaviConf.numPages+1}if(c<=0){c=1}var b='<span class="pages">Pages '+e+' of '+a+"</span> ";if(c>1){b+='<a href="'+f[1]+'">'+pageNaviConf.firstText+"</a>"}if(e>1){b+='<a href="'+f[e-1]+'">'+pageNaviConf.prevText+"</a>"}for(i=c;i<=endPage;++i){if(i==e){b+='<span class="current">'+i+"</span>"}else{b+='<a href="'+f[i]+'">'+i+"</a>"}}if(e<a){b+='<a href="'+f[e+1]+'">'+pageNaviConf.nextText+"</a>"}if(endPage<a){b+='<a href="'+f[a]+'">'+pageNaviConf.lastText+"</a>"}document.write(b)};(function(){var b=location.href;if(b.indexOf("?q=")!=-1||b.indexOf(".html")!=-1){return}var d=b.indexOf("/search/label/")+14;if(d!=13){var c=b.indexOf("?"),a=(c==-1)?b.substring(d):b.substring(d,c);document.write('<script type="text/javascript" src="/feeds/posts/summary/-/'+a+'?alt=json-in-script&callback=pageNavi&max-results=99999"><\/script>')}else{document.write('<script type="text/javascript" src="/feeds/posts/summary?alt=json-in-script&callback=pageNavi&max-results=99999"><\/script>')}})();
        //]]>
</script>
    </div>
    </b:includable>

3. Lalu cari kode <b:include name='nextprev'/> dan ganti dengan kode dibawah ini.

<b:if cond='data:blog.pageType == "index"'>
    <b:include name='page-navi' />
    <b:else/>
    <b:if cond='data:blog.pageType == "archive"'>
        <b:include name='page-navi' />
    </b:if>
</b:if>

4. Terakhir Anda Simpan

Pengaturan

Kode	Keterangan
perPage	Jumlah yang ingin ditampilkan pada satu halaman
numPages	Jumlah navigasi Halaman yang ingin ditampilkan
firstText	Teks halaman pertama
astText	Teks halaman terkahir
nextText	Teks untuk halaman selanjutnya
prevText	Teks untuk halaman sebelumnya

Evo Magz Responsive Blogger Template

Evo Magz Responsive Blogger Template

Demo

Buy IDR 100.000

Kali ini mas +Sugeng Riyadi mengeluarkan template premium terbarunya yaitu Evo Magz Responsive Blogger Template. Template ini hampir sama dengan template Fastest Magz Responsive Blogger Template yaitu mengusung tema magazine, tentunya sangat cocok bagi blog dengan tema berita atau pun yang lainnya.

Fitur Template

1. 100% Responsive
2. Custom Mobile
3. Auto Readmore
4. Fully Customizable
5. Font Awesome
6. Tab View Widget
7. Breadcrumbs
8. SEO Optimized
9. Dropdown Menu
10. Related Posts
11. Cool Threaded Comment
12. Share Button
13. Page Navigation
14. Recent Post Widget
15. Back to Top button
16. Custom Error Page
17. Ads Ready

Membuat Back To Top Unik Dengan Cacing

Back to top adalah suatu tombol untuk kembali ke atas website tanpa harus menggunakan scrollbar. Back to top ini fungsinya untuk memudahkan pengunjung untuk kembali ke kepala suatu website dengan cepat. Kita sering menjumpai tampilan back to top yang biasa saja, namun berbeda dengan yang satu ini.

Back To Top yang satu ini seolah - olah kita sedang memancing, jadi saat scrollbar digulung kebawah otomatis kail dengan cacing turun kebawah, saat scrollbar digulung ke atas kail naik lagi ke atas. Lalu saat kail dengan cacing di klik, scrollbar menggulung otomatis ke atas. Artikel ini pernah ditulis oleh +Beben Koben pada Make Attractive Back to Top Cacing Theme, oleh karena itu Saya tulis ulang di blog ini.

Cara Memasang Back To Top

1. Template Anda harus sudah terpasang jQuery Libary, jika belum pasang jQuery ini diatas kode </head>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

2. Simpan kode ini diatas kode ]]></b:skin> atau </style>

.cacing{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUzNbpUOGuYux671TTodnPMj6zwkDTkW_syQxsiuKUwwLgaUghq6ba9nDS26gHEsjkAZe6qLdMPAhj6G7gCuE6pQITZIgrdN6EV1QxXntEcrkF9uweTUlWkcKp80JmiHwEztOSyJcfLjYx/s1600/Cacing.png);background-repeat:no-repeat;position:relative}
#cacing{cursor:pointer;width:30px;height:530px;background-size:41px;position:fixed;top:-550px;left:7%;transition:all .7s ease-in-out;-webkit-transition:all .7s ease-in-out;z-index:21}
#cacing-bubble{background:#fff;border-radius:50px;color:#06f;display:block;font-size:12px;line-height:14px;opacity:0;overflow:visible;padding:5px;position:absolute;top:445px;left:20px;text-align:center;transition:all .3s ease-in-out;-webkit-transition:all .3s ease-in-out;visibility:hidden;width:60px;height:auto;z-index:99}
#cacing:hover > #cacing-bubble,#cacing:hover > #cacing-bubble:after{opacity:1;transition:all .3s ease-in-out;-webkit-transition:all .3s ease-in-out;visibility:visible}
#cacing-bubble:after{border-bottom:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #fff;border-left:5px solid #fff;content:"";display:block;position:absolute;top:96%;left:10px;width:0;height:0;z-index:98}

3. Kemudian simpan kode ini diatas kode </body>

<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function($) {
 $(window).on('scroll', false, function() {
  var windowTop = $(window).scrollTop();
  if (windowTop > 550) {
   $('#cacing').css('top', '0');
  } else {
   $('#cacing').css('top', windowTop - 550 + 'px');
  }
 });
 $('#cacing').unbind('click').click(function() {
  $('html,body').animate({
   scrollTop: $("#cacingTOP").offset().top
  }, 'slow');
 });
});

//]]>
</script>

4. Lalu simpan kode ini dibawah kode <body>

<div class="cacing" id="cacing">
<div id="cacing-bubble">Kembali ke atas!</div>
</div>
<div id="cacingTOP"></div>

Demo

Silakan Anda ganti tulisan yang Saya tandai sesuai dengan keinginan. Bagaimana unik bukan tentunya beda dari yang lain ;)

Alasan Komentar Di Blog Harus Relevan

Relevan adalah keterkaitan atau saling berhubungan, jadi komentar relevan adalah komentar yang sesuai dengan artikel yang Anda baca maksudnya tidak keluar dari topik atau lebih dikenal sebagai OOT. Adanya interaksi antara pengunjung dan author tentang artikel yang dibahas pada suatu blog.

Kualitas Artikel

Salah satu artikel berkualitas dinilai juga dari komentarnya, oleh karena itu jika artikel yang Anda tulis berkualitas tapi isi komentarnya hanya komentar SPAM sama saja percuma. Bukannya menaikan rangking blog Anda malahan artikel yang ditulis malah terpuruk dan lebih parahnya lagi dianggap SPAM oleh google.

Dengan artikel berkualitas dan komentar yang relevan bisa membuat artikel Anda berada di halaman pertama Google. Komentar yang relevan yang bagus adalah adanya interaksi tanya jawab antara pengunjung dan author. Berikut adalah contoh dari artikel yang memiliki komentar relevan dan mampu berada di halaman pertama google untuk keyword "Mengenal Author Rich Snippet".

Keyword

Dengan komentar relevan pada artikel yang Anda tulis akan menjadi boomerang untuk menjadi nomor satu di Google. Kenapa ? alasannya adalah komentar yang relevan bisa menjadi keyword sehingga memungkinkan pengunjung melirik artikel Anda, maka mulai dari sekarang jangan SEPELEKAN komentar. Untuk membuktikan isi komentar bisa menjadi keyword berikut adalah hasil riset yang Saya lakukan.

Link Pada Komentar

Matt Cutts mengeluarkan sebuah video tentang pembahasan link pada komentar. Matt Cutts mengatakan jika berkomentar pada sebuah blog hendaklah gunakan  Profil Google dan jangan gunakan link atau URL bila tidak ingin blog Anda dan yang dikomentari dianggap SPAM.

Bagaimana dengan menaruh link pada isi komentar ? Pasti semua orang sudah tahu dengan menautkan link aktif pada komentar adalah tindakan SPAM jadi wajib untuk dihapus. Untuk lebih lengkapnya silakan Anda baca artikel +Adhy Suryadi pada Matt Cutts Kembali Berbicara Tentang Komentar Pada Blog.

Jika terdapat sebuah blog dengan banyak outbound link yang datang dari komentar, ini akan berakibat buruk pada kesehatan blog. Dan lebih parahnya lagi blog akan disingkirkan dari SERP bahkan dibanned.

Cara Follow Blog Dengan Cepat

Mengikuti blog sebenarnya bisa dilakukan dengan menggunakan widget follower pada blogger, namun cara tersebut sangat tidak efektif. Oleh karena itu pada blogger juga sudah di sediakan alat untuk follow blog dengan cepat.

Alat ini ada pada bagian bawah dasbor blogger Anda, tepatnya pada bagian atas daftar bacaan. Pada bagian tersebut ada menu Tambahkan.

Cara Cepat Follow Blog

1. Silakan masuk pada akun blogger Anda di https://www.blogger.com/
2. Kemudian pilih menu Tambahkan untuk follow blog pada bagain bawah dasbor blogger Anda

3. Selanjutkan akan muncul window baru, silakan Anda Tambahkan dari URL dengan URL yang ingin Anda ikuti

4. Lalu klik Ikuti untuk mengikuti


Sekarang dengan Alat ini Anda bisa follow blog sesuka Anda ;)

Cara Menampilkan Menu Penghasilan Pada Blogger

Menu Penghasilan pada blogger adalah menu yang berisi pengaturan untuk iklan Google Adsense pada blog. Sebenarnya iklan PPC masih banyak selain Google Adsense, seperti IdBlogNetwork, Yllix Media, Chitika, Bidvertiser, Adsense Camp dan masih banyak lagi. Namun, dari PPC iklan tersebut iklan Google Adsense lah yang paling banyak digemari.

Oleh karena itu untuk mendaftarkan Google Adsense melalui blogger harus ada Menu Penghasilan untuk mendaftarkan blog Anda via Blogger. Maka, dalam artikel ini Saya akan memberikan cara menampilkan menu penghasilan pada blogger.

Menampilkan Menu Penghasilan/Earnings

1. Silakan masuk pada akun blogger Anda di https://www.blogger.com/
2. Kemudian masuk pada menu Setelan

3. Selanjutnya Anda pilih menu Bahasa dan Pemformatan untuk mengatur bahasa

4. Selanjutnya pilih pada menu Bahasa untuk merubahnya.

5. Rubah bahasa menjadi bahasa Inggris, silakan Anda pilih salah satu bahasa Inggris ( UK ) atau Inggris ( USA ).

6. Silakan Anda Simpan, selanjutnya muat ulang halaman tersebut
7. Setelah dimuat ulang makan akan muncul Menu Penghasilan seperti gambar dibawah ini

Sekarang Menu Penghasilan sudah muncul pada blog Anda, untuk mendaftar Google Adsense silakan pilih Mendaftar Adsense untuk mendaftar.

Cara Menghapus Akun Facebook Secara Permanen

Facebook adalah salah satu sosial media yang paling banyak digunakan selain twitter. Hampir semua kalangan dari mulai anak - anak , remaja sampai orang tua pun sudah memilik akun facebook. Namun bagaimana jika facebook yang Kita gunakan ingin dihapus karena ada sesuatu hal.

Oleh karena itu perlu bagi Kita untuk menghapus akun facebook Kita selamanya. Kita juga bisa menonaktifkan akun sementara pada pengaturan di facebook, namun bagaimana menghapus facebook secara permanen, baca ;)

Cara Menghapus Akun Facebook Selamanya

1. Silakan Anda masuk dahulu pada akun facebook di https://www.facebook.com/
2. Kemudian klik link Hapus Akun Facebook
3. Anda akan masuk pada halaman Facebook, klik Hapus Akun Saya.

4. Lalu Anda akan diperintahkan untuk mengisi verifikasi kata dan masukan password, silakan Anda isi sesuai dengan data yang ada.

5. Selanjutnya akan muncul notifikasi lagi, klik Oke untuk menghapus akun selamanya.

Sekarang akun Anda telah terhapus, tapi akun akan benar - benar terhapus secara permanen setelah 14 hari. Jadi selama waktu itu jangan lakukan perubahan apapun pada akun facebook yang akan dihapus ;)

Cara Cepat Menambah Follower Twitter

Twitter adalah salah satu Sosial Media yang paling banyak digemari. Berbeda dengan Facebook, Twitter memiliki gengsi lebih tinggi saat akun yang Anda punya memiliki follower yang banyak. Oleh karena itulah Saya menulis artikel ini, alat yang digunakan dinamakan Auto Follower.

Sebenarnya banyak sekali website penyedia auto follower, tak ada salahnya jika mencoba yang satu ini karena Saya rasa aman. Kelebihannya juga auto follower ini adalah saat akun Anda mendapat follower orang yang Anda ikuti juga tidak bertambah atau hanya sedikit :D. Untuk mempermudah aktivitas twitteran Anda silakan gunakan juga 28 Shortcut Keyboard Bagi Pecinta Twitter. ;)

Menambah Follower Twitter Dengan Auto Follower

1. Silakan masuk dahulu pada akun twitter Anda di https://twitter.com/
2. Selanjutnya Anda buka Auto Follower
3. Setelah Anda masuk pada website tersebut silakan klik tombol Sign In With Twitter.

4. Kemudian Anda akan masuk pada Authorize App untuk menyetujui penggunaan aplikasi, untuk menyetujuinya klik Sign In.

5. Kemudian Anda akan kembali pada website Auto Follower, pada website tersebut akan tampil data dari akun twitter Anda. Untuk mendapatkan follower silakan klik Dapatkan Follower.

6. Untuk mendapatkan follower lebih banyak lagi silakan Anda klik Dapatkan Follower  secara berulang - ulang, data follower twitter yang masuk akan muncul pada website tersebut.

28 Shortcut Keyboard Bagi Pecinta Twitter

Jika sebelumnya Saya menulis artikel tentang tombol share valid HTML5. Kali ini Saya akan berbagi tips dan trik cepat gunakan twitter bagi kalian para maniak twitter. Bagi kalian yang sudah biasa mungkin sudah tak asing lagi dengan shortcut keyboard twitter ini.

28 Shortcut Keyboard Pilihan Untuk Twitter

B Blokir Pengguna	M Pesan Langsung
F Favorite	N Menulis Tweet Baru
J Tweet Berikutnya	R Balas Retweet/Mention
K Tweet Sebelumnya	T Retweet
L Tutup Semua Tweet Yang Terbuka	U Buka Blokir Pengguna

.  Muat Tweet Baru	G + A Halaman Activity
/  Pencarian	G + C Halaman Connect
?  Muat Menu Shortcut	G + D Halaman Discover
Space Scroll Ke Bawah	G + F Halaman Favorite
Enter Buka Perincian Tweet	G + H Home Page

G + L Halaman List	G + S Halaman Setting
G + M Halaman Message	G + U Halaman Profile Tertentu
G + N Halaman Notifications	Ctrl + Enter Kirim Tweet
G + P Halaman Profile
G + R Halaman Mentions

Itulah 28 shortcut keyboard Twitter pilihan, semoga dapat membantu Anda untuk menghemat aktivas twitteran Anda dan menambah keasyikan ber tweet ria ;)

Menghilangkan Kode Captcha Pada Komentar Blogger

Captcha atau verifikasi kata adalah untuk menyatakan komentator manusia bukan sebagai robot. Salah satu tujuan dibuatnya Captcha untuk mengurangi spammer. Adanya verifikasi kata ini sangat mengganggu apabila ada yang ingin berkomentar pada sebuah blog. Oleh karena itu bagi Anda yang ingin menghilangkan verifikasi kata ini silakan di simak ;)

Cara Menghilangkan Kode Captcha Pada Komentar Blogger

Silakan Anda masuk pada akun Blogger Anda. Kemudian pilih blog yang ingin dihilangkan verfikasi kata, lalu pilih Setelan.

Selanjutnya pilih Pos dan Komentar

Lalu pada Tampilkan Verfikasi Kata, pilih Tidak.

Langkah terkahir silakan Simpan.

Cukup mudah bukan, mungkin artikel ini sangat mudah untuk Anda yang sudah hafal betul blogger ;)

Mengatasi Error 503 Pada Webmaster Tools

Sejenak dahulu Kita tinggal membahas tentang Validasi HTML5, kali ini Saya ingin berbagi tips sederhana bagi Kalian, yaitu Mengatasi Error 503 Pada Webmaster Tools. Error 503 di deteksi sebagai kesalahan server, untuk penyebab masalah tersebut Saya sendiri kurang tahu.

Solusi untuk mengatasi tersebut Saya hanya coba - coba saja, namun tak pernah Saya sangka ternyata cara tersebut berhasil.

Cara Mengatasinya

Terlebih dahulu silakan Anda buka akun Webmaster Tools Anda untuk mengetahui adanya error 503. Silakan buka situs pada akun Anda, kemudian pilih menu Perayapan > Kesalahan Perayapan.

Pada gambar diatas ada 1 URL yang diketahui error 503, untuk mengatasinya silakan Anda edit artikel tersebut pada blog Anda. Lakukan sedikit perubahan atau tidak juga tidak apa - apa kemudian perbaharui.

Setelah selesai menyunting artikel kemabali lagi ke Webmaster Tools, kemudian klik URL yang dianggap error tersebut. Klik Tandai sebagai telah diperbaiki.

Kesimpulan, setiap ada artikel yang mengalami error tersebut Anda sunting artikel itu dan perbaiki pada Webmaster Tools.

Membuat Tombol Facebook, Twitter dan Google Plus Valid HTML5

Sepertinya minggu ini masih membahas tentang Validasi HTML5. Ok kali ini Saya akan berbagi tips membuat tombol share valid HTML5, pada tombol suka Facebook biasanya akan di dapatkan iframe, seperti yang sudah Saya bahas sebelumnya bahwa iframe sangat tidak bagus untuk SEO.

Pada tombol share ini Saya mengubahnya menjadi Asyncron agar kinerjanya lebih cepat. Silakan Anda simak baik - baik.

Tombol Facebook

<div id='fb-root'/>
<span class='fb-like' data-layout='button_count' data-send='false' data-show-faces='false' expr:data-href='data:post.url'/>

Tombol Twitter

<a class='twitter-share-button' data-count='horizontal' expr:data-text='data:post.title' expr:data-url='data:post.url'>Tweet</a>

Tombol Google Plus

<div class='g-plusone' data-count='true' data-size='medium' expr:data-href='data:post.url'/>

JavaScript

Silakan Anda simpan JavaScript Asyncron ini diatas kode </body>.

<script type='text/javascript'>
//<![CDATA[
(function(){var fb1=document.createElement('script');fb1.type='text/javascript';fb1.async=true;fb1.src='http://connect.facebook.net/id_ID/all.js#xfbml=1','facebook-jssdk';var fb2=document.getElementsByTagName('script')[0];fb2.parentNode.insertBefore(fb1,fb2)})();(function(){var tw1=document.createElement('script');tw1.type='text/javascript';tw1.async=true;tw1.src='http://platform.twitter.com/widgets.js';var tw2=document.getElementsByTagName('script')[0];tw2.parentNode.insertBefore(tw1,tw2)})();(function(){var gp1=document.createElement('script');gp1.type='text/javascript';gp1.async=true;gp1.src='https://apis.google.com/js/plusone.js';var gp2=document.getElementsByTagName('script')[0];gp2.parentNode.insertBefore(gp1,gp2)})();
//]]>
</script>

Cara Memasangnya

Pertama silakan Anda simpan CSS ini diatas kode ]]></b:skin> atau </style>.

.share{display:block;padding:0;margin:0}

Untuk memasang Tombol Facebook, Twitter dan Google Plus pada blog silakan Anda cari dahulu kode seperti dibawah ini.

<b:includable id='post' var='post'>
<article class='post hentry' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
.....
<data:post.body/>
.....
 </article>
</b:includable>

Setelah ditemukan kode diatas silakan Anda simpan kode tombol share tersebut diatas kode <data:post.body/> bila ingin menyimpanya diatas artikel atau simpan dibawah kode <data:post.body/> bila ingin menyimpannya dibawah artikel. Sehingga menjadi kode dibawah ini, perhatikan kode yang Saya tandai.

<b:includable id='post' var='post'>
<article class='post hentry' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
.....
<data:post.body/>
<div class='share'>
<span style='float:left;margin-right:35px;font-weight:bold'>Bagikan :</span>
<div id='fb-root'/><span class='fb-like' data-layout='button_count' data-send='false' data-show-faces='false' expr:data-href='data:post.url' style='margin-right:40px;'/><a class='twitter-share-button' data-count='horizontal' expr:data-text='data:post.title' expr:data-url='data:post.url'>Tweet</a><div class='g-plusone' data-count='true' data-size='medium' expr:data-href='data:post.url'/>
  <div class='clear'/>
</div>
.....
 </article>
</b:includable>

Membuat Video Pada Blog Valid HTML5

Masih setia untuk membahas Validasi HTML5, kali ini yang jadi korban adalah video di blogger. Saat kita unggah video di blogger kode yang ditampilkan tidak Valid, oleh karena itu untuk mengatasinya silakan ikuti cara yang akan Saya gunakan. Sama halnya dengan Validasi Pada Gambar Blogger, ada beberapa kode yang perlu dirubah agar kode pada Video Blogger menjadi tidak error saat Validasi HTML5.

Cara Membuat Video Pada Blogger Valid HTML5

Saat kita unggah video di blogger kode yang ditampilkan akan tampak seperti kode dibawah ini.

<iframe width="650" height="456" src="//www.youtube.com/embed/Efdfxxxxx" frameborder="0" allowfullscreen></iframe>

Untuk membuat kode diatas Valid HTML5, Anda tinggal merubahnya menjadi kode seperti dibawah ini.

<iframe src="//www.youtube.com/embed/Efdfxxxxx" ></iframe>

Sedangkan untuk membuat kode Video menjadi SEO sialakan rubah menjadi kode seperti dibawah ini.

<object width="650" height="456" data="//www.youtube.com/embed/Efdfxxxxx"></object>

Pada kode diatas iframe dirubah menjadi object dan src dirubah menjadi data. Jika sebelumnya Saya mengatasi iframe menggantinya dengan jQuery pada artikel Saya berjudul Cara Membuat Flash Banner Valid HTML5.

Cara Membuat Iklan Bidvertiser Valid HTML5

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

Artikel ini dibuat untuk yang sudah mempunyai 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 bisa jadi referensi tentang ilmu Validasi HTML5.

Cara Mengatasi Error Validasi HTML5 Pada Iklan Bidvertiser

Silakan Anda salin dahulu kode iklan dari Bidvertiser, Saya beri contoh pada kode 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 agar Valid HTML5 silakan Anda rubah seperti kode dibawah ini.

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

Selanjutnya Anda hanya tinggal memasang kode iklan diatas pada blog Anda ;)

Cara Mendaftar Menjadi Publisher Bidvertiser

Bidvertiser bisa menjadi alternatif bagi Anda yang ingin mencari penghasilan dari blog. Salah satu Iklan PPC yang bisa dibilang lumayan besar. Menjadi publisher iklan bidvertiser Anda akan di untungkan dengan programnya.

Langsung saja bagaimana cara mendaftar menjadi publisher di bidvertiser. Silakan Anda ikuti langkah - langkah yang akan Saya berikan.

Cara Mendaftar Jadi Publisher Bidvertiser

1. Silakan Anda buka halaman ini Make money from your Website or Blog with BidVertiser. Anda akan masuk pada halaman Bidvertiser, klik Join Now untuk mendaftar.

2. Isi formulir pendaftaran sesuai dengan instruksi.

First Name : Isi dengan nama depan Kamu
Last Name : Isi dengan nama belakang Kamu
Phone :  Isi dengan nomor telephone Kamu
Email Address : Isi dengan Email Anda
Choose Your User Name : Isi dengan Username yang Anda inginkan
Choose Your Password : Isi dengan Password yang Anda inginkan
Confirm Password : Tulis ulang Password yang telah Anda masukan

3. Klik Get Activation Code untuk mendapatkan activation kode. Kemudian buka email Anda dan salin activation code yang didapat dari Bidvertiser pada kolom Activation Kode.
4. Centang pilihan pertama untuk menyetujui TOS Bidvertiser, untuk yang lainnya terserah Anda.
5. Klik Continue.

Kemudian Anda akan disuruh mengisi data Website yang akan di daftarkan. Silakan Anda isi sesuai instruksi.

Bidvertiser Title : Isi dengan judul website/blog Anda
URL For Website : Isi dengan URL website yang ingin di daftarkan
3rd Party and Server / URL Forward : Ini hanya opsional, isi bila Anda punya domain yang berbeda atau kalau tidak ada lewati saja.
Primary Language : Pilih bahasa blog Anda
Select Main Catergory : Pilih kategori blog Anda.
Sub Main Category : Pilih sub kategori blog Anda.

Sampai sini pendaftaran bidvertiser sudah selesai, namun Anda belum mengisi data pembayaran yang akan di lakukan. Anda klik Select Payment Method untuk memilih mode pembayaran.

Selanjutnya Anda pilih pembayaran yang diinginkan. Silakan pilih kemudian isi data sesuai instruksi lalu masukan password Anda pada kolom kemudian pilih Update.

Sampai sini pendaftaran untuk menjadi Publisher Bidvertiser telah selesai.

Cara Memasang Iklan Bidvertiser

Untuk memasang iklan bidvertiser pada blog silakan Anda pilih dahulu jenis template yang akan dipasang pada blog pada Choose Template. Selanjutnya pilih Get Ad Code untuk mendapatkan kode iklan. Kemudian Anda salin kode tersebut dan simpan pada gadget Anda HTML/JavaScript.

Membuat Gambar Valid HTML5 Pada Blogger

Jika sebelumnya Saya menulis artikel tentang Breadcrumbs SEO Friendly dan Valid HTML5. Kali ini Saya berbagi tips membuat gambar Valid HTML5. Artikel ini mirip dengan artikel Saya berjudul  Memasang Tag Alt Pada Gambar.

Seperti yang kita ketahui, saat kita unggah gambar di blogger kode gambar tersebut tidak Valid HTML5 atau lebih tepatnya seperti contoh pada kode dibawah ini.

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

Silakan Anda rubah kode diatas menjadi seperti kode dibawah ini agar Valid HTML5. Anda isi tag alt pada kode dibawah dengan nama gambar.

<div class="separator" style="clear: both; text-align: center;">
<img alt="Judul" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrg3qjitiFI0qb4aIB0szUhy8YY9MQ6DXEvDVlZajD6RqI4PyI-_ox84dfcB0pcJCdoHEN7r5z6paQRHSIc-niyiDGopBM8jIdghq7MGS699KS-cdp668qFNRqgP1rZzc81VFQOYysDn1R/s1600/BOX+HTML5.jpg" />
</div>

Breadcrumbs SEO Friendly dan Valid HTML5

Memasang Navigasi Breadcrumbs merupakan salah satu cara untuk optimasi SEO, dengan memasangnya akan memudahkan pengunjung dan Mesin Pencari dalam menjelajahi blog Anda. Navigasi Breadcrumbs sangat penting untuk sebuah blog, oleh karena itu Breadcrumbs ini harus SEO agar data dapat tampil pada mesin pencari.

Breadcrumbs adalah 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 dapat 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 kode dibawah ini diatas kode ]]></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 kode dibawah ini pada template Anda.

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

Kemudian Anda ganti dengan dengan kode 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.

Membatasi Jumlah Artikel Pada Label Blog

Jumlah label yang ditampilkan oleh blogger kadang tak menentu seperti yang kita inginkan. Oleh karena itu perlu untuk membatasi jumlah artikel yang ingin ditampilkan pada label.

Cara Pertama

Saya beri contoh pada url label berikut.

http://kang-mousir.blogspot.com/search/label/Tutorial%20Blogger

Diatas adalah contoh url label, untuk membatasi jumlah artikel yang diinginkan ketika label di klik tambahkan kode ?max-results=5 dibelakang url nya. Sehingga menjadi.

http://kang-mousir.blogspot.com/search/label/Tutorial%20Blogger?max-results=5

Silakan ganti angka lima menjadi jumlah artikel yang ingin Anda tampilkan.

Cara Kedua

Bagaimana caranya membatasi jumlah artikel pada label bawaan dari blogger. Ok, langsung saja silakan Anda cari kode dibawah ini pada template Anda.

expr:title='data:label.name'

Untuk membatasinya silakan Anda tambahkan kode ?max-results=5 di belakangnya. Sehingga menjadi seperti dibawah ini.

expr:href='data:label.url + "?max-results=6"'

Untuk mengatur jumlahnya silakan Anda ganti angka 5 dengan jumlah yang Anda inginkan.

Anda juga bisa menambahkan title tag pada label diatas dengan cara menambahkan kode title='Judul' atau baca artikel Saya berjdul Menambahkan Title Tag Pada Label. Namun, dengan cara diatas navigasi halaman menjadi tidak berfungsi pada pencarian label sehingga perlu di modifikasi kembali atau baca artikel Saya berjudul Menampilkan Navigasi Halaman Pada Pencarian Label.

Menambahkan Title Tag Pada Label

Label adalah jenis atau kategori dari suatu artikel. Oleh karena itu untuk memaksimalkan SEO untuk label tersebut Anda bisa menambahkan tag title, sama halnya seperti tag alt pada gambar. Ok, langsung saja cara menambahkan title tag pada label.

Langkah Pertama

Silakan Anda cari kode dibawah ini pada template Anda.

expr:href='data:label.url'

Kode diatas adalah kode untuk mengambil label pada artikel di blog.

Langkah Kedua

Selanjutnya Anda tambahkan kode dibawah ini pada kode diatas.

expr:title='data:label.name'

Secara lengkap url lengkapnya akan tampak seperti kode dibawah ini.

<a expr:href='data:label.url' expr:title='data:label.name'><data:label.name/></a>

Semoga artikel ini dapat Anda pahami dan bisa diperlajari lagi ;)

Menampilkan Navigasi Halaman Pada Pencarian Label

Sebelumnya Saya berbagi artikel tentang Memasang Navigasi Halaman Pada Blog. Namun setelah dicoba pada pencarian label navigasi halaman ini tidak muncul atau tidak berfungsi. Cara mengatasi masalah ini Saya dapat saat membaca artikel +Leony Li pada artikel berjudul Mengfungsikan Page Navigator Saat Label Diklik. Untuk mengatasi masalah tersebut silakan baca artikel ini. Selidik punya selidik penyebab masalah tersebut muncul pada kode dibawah ini.

?updated-max=2013-07-19T15:51:00%2B07:00&max-results=9

Cara Mengatasinya

Misalkan pada link berikut ini.

http://kang-mousir.blogspot.com/search/label/Tutorial%20Blogger?max-results=5

Anda tinggal menambahkan kode &. Karena menambahkan kode tersebut ada masalah pada Validasi HTML5, maka tambahkan amp; dibelakangnya atau baca juga artikel Saya berjudul Cara Mengatasi Error Ampersand Pada Validasi HTML5. Sehingga menjadi kode dibawah ini.

http://kang-mousir.blogspot.com/search/label/Tutorial%20Blogger?&max-results=5

Cara ini bisa digunakan pada link untuk menu atau yang lainnya.

Memasang Navigasi Halaman Pada Blog

Navigasi halaman adalah suatu daftar halaman pada blog dengan nomor - nomor halaman. Dengan memasang navigasi halaman tentunya akan memudahkan pengunjung dalam menjelajahi blog Anda.

Langkah Pertama

Simpan kode CSS dibawah ini diatas kode </head>..

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type="text/css">
.showpageNum a,.showpage a,.showpagePoint{margin-top:10px;margin-bottom:20px;background:#f35d5c;border:none;margin-left:5px;color:#FFF;font-size:15px;font-family:'Arial';font-weight:700;transition:all 0.3s ease-in-out;padding:10px 15px;box-shadow:0 1px 2px 0 rgba(0,0,0,0.1);}
.showpagePoint{background:#555;color:#fff;}
.showpageNum a:hover,.showpage a:hover{background:#555;color:#fff;}
</style>
</b:if>
</b:if>

Silakan Anda atur CSS nya untuk menyesuaikan dengan kebutuhan blog.

Langkah Kedua

Simpan kode dibawah ini diatas kode </body>.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=8;
var upPageWord =&#39;Prev &#39;;
var downPageWord =&#39; Next&#39;;
</script>
<script src='https://googledrive.com/host/0B8WEGGjyXlaMMWdabjB6Q3RhRjg/PageNavigation.js' type='text/javascript'></script>
</b:if>
</b:if>

Pengaturan

Opsi	Keterangan
pageCount	Jumlah per halaman
displayPageNum	Jumlah halaman yang ingin ditampilkan
upPageWord	Tombol sebelumnya
downPageWord	Tombol selanjutnya

Mas Sugeng 2014 Blogger Template

Mas Sugeng 2014 Blogger Template

Demo

Download

Template yang sangat fenomenal buatan +Sugeng Riyadi ini mampu menghipnotis para blogger. Dengan kelebihan template ini yaitu SEO Friendly, banyak para blogger yang sudah membuktikan keampuhan template blogger yang satu ini.

Fitur Template

1. Custom Mobile
2. Auto Readmore
3. Breadcrumbs
4. SEO Ready
5. Dropdown Menu
6. Related Articles
7. Cool Threaded Comment
8. Social Share
9. and more.