Tutorial Blog, Template Blog, Seo friendly, Responsive, Mobile friendly, New Cheat Point Blank

BroSense Blogger Template

Posted by Mr Xiulung Posted on 12:20:00 AM

BroSense Blogger Template

Template minimalis buatan +Sugeng Riyadi ini sangat cocok bagi Anda yang memasang Google Adsense, karena template ini dikhususkan untuk itu. Walaupun template ini tidak responsive, tetapi template ini memiliki fitur mobile.

Fitur Template

Custom Mobile
Auto Readmore
Breadcrumbs
SEO Ready
Ads Ready
Related Articles
Cool Threaded Comment
Social Share
and more.

Pengaturan Template

1. Menu Navigasi
Untuk mengatur menu pada template ini, silakan cari kode dibawah ini dan edit oleh Anda.
Versi Mobile

<div id='mobile-nav'>
  <span><a expr:href='data:blog.homepageUrl'>Beranda</a></span> &#183; 
  <span><a href='#'>Teknologi</a></span> &#183; 
  <span><a href='#'>Olahraga</a></span> &#183; 
  <span><a href='#'>Entertainment</a></span> &#183; 
  <span><a href='#'>Gaya Hidup</a></span>
 </div>

Versi Desktop

 <nav id='nav'>
    <ul id='menu'>
      <li><a href="/">Home</a></li>
      <li><a href="#">Menu 1</a>
  <ul>
            <li><a href="#">Sub Menu 1</a></li>
            <li><a href="#">Sub Menu 2</a></li>
            <li><a href="#">Sub Menu 3</a></li>
        </ul>
      </li>
      <li><a href="#">Menu 2</a>
  <ul>
            <li><a href="#">Sub Menu 1</a>
    <ul>
     <li><a href="#">Sub Menu 1</a></li>
     <li><a href="#">Sub Menu 2</a></li>
     <li><a href="#">Sub Menu 3</a></li>
     <li><a href="#">Sub Menu 4</a></li>
     <li><a href="#">Sub Menu 5</a></li>
     <li><a href="#">Sub Menu 6</a></li>
    </ul>  
   </li>
            <li><a href="#">Sub Menu 2</a></li>
            <li><a href="#">Sub Menu 3</a></li>
        </ul>
      </li>
   <li><a href="#">Menu 4</a></li>
   <li><a href="#">Menu 5</a></li>
   <li><a href="/www.evotemplates.net">Error Page</a></li>
   <li><a href="/p/lorem-ipsum-dolor-sit-amet-consectetur.html">Static Page</a></li>
 </ul>
 
 <form id="search-form" action="/search" style="display: inline;" method="get"><input onfocus="if(this.value==this.defaultValue)this.value='';" value="Search..." type="text" id="search-box" onblur="if(this.value=='')this.value=this.defaultValue;" vinput="" name="q"/> <input id="search-button" value="Go" type="submit"/></form>
 
  </nav>

2. Iklan Dibawah Judul
Template Ini memliki iklan dua versi yaitu mobile dan desktop, untuk menggantinya silakan edit kode dibawah ini.
Versi Mobile

   <!-- iklan bawah judul versi mobile -->
   <a target='_blank' href='http://www.evotemplates.net'><img alt='blogger templates' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg632AdGU3KK0kO65gUemX1uIBXY_z3_OLCPHYvYOrIkQzzZgZlMtRtRZXIvhDxHaM0sdzeWkWd0dRPni5wVBSVo4NiQsJbw4pouVD_A6x751u_Kb7iKmiLHhGetw8dK4Poi29VKzt2TAEi/s1600/bannernew.png'/></a>

Versi Desktop

   <!-- iklan bawah judul -->
  <a target='_blank' href='http://www.evotemplates.net'><img alt='blogger templates' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg632AdGU3KK0kO65gUemX1uIBXY_z3_OLCPHYvYOrIkQzzZgZlMtRtRZXIvhDxHaM0sdzeWkWd0dRPni5wVBSVo4NiQsJbw4pouVD_A6x751u_Kb7iKmiLHhGetw8dK4Poi29VKzt2TAEi/s1600/bannernew.png'/></a>

Mr Xiulung

Kompi Males Responsive Blogger Template

Posted by Mr Xiulung Posted on 11:54:00 PM

Kompi Males Responsive Blogger Template

Demo

Download

Kali ini Saya berbagi sebuah template gratis buatan salah satu blogger Indonesia yaitu +Adhy Suryadi. Template ini memiliki kelebihan dan kaya akan fitur. Walaupun template ini gratis, tetapi fitur - fitur pada template ini bisa dibilang premium. Sudah banyak blogger yang menggunakan template yang Satu ini.

Fitur Template

Responsive
Valid HTML5 ( Home Page and Post Page )
Valid CSS3
SEO Friendly
Full Title
Breadcrumbs
Page Navigation
Smooth Scroll To Comment Hash
Back To Top and Go To Down Button
Costumized Error Page
Cool Threaded Comment
Emoticon In Comment
Custom Pager In Post Page
Related Acticles
Social Icon Share
Sucscribe Form Email
Ads Ready
and more.

Pengaturan Template

Untuk mengganti url gambarnya silakan ganti url gambar pada kode dibawah ini.

<b:includable id='title'>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
<img alt='logo blog' height='90' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv199XE3F8L-qflhny15TuOf93YufT4msDyVM2TJxp1oopP9nTTbYxH4xxSNx9Cwm2sk_Lfi6Q9EAA_knD6OvWQa5H4yZBoE434yMwKVH6wXo9DT9V4DA05zPAvJ5ARSCepQKf-BbnY1g/s1600/titlekompimales.png' title='Kompi Males' width='212'/>
  <b:else/>
    <a expr:href='data:blog.homepageUrl' expr:title='data:title' itemprop='url'><span itemprop='name'><img alt='logo blog' height='90' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv199XE3F8L-qflhny15TuOf93YufT4msDyVM2TJxp1oopP9nTTbYxH4xxSNx9Cwm2sk_Lfi6Q9EAA_knD6OvWQa5H4yZBoE434yMwKVH6wXo9DT9V4DA05zPAvJ5ARSCepQKf-BbnY1g/s1600/titlekompimales.png' title='Kompi Males' width='212'/></span></a>
  </b:if>
</b:includable>

Mr Xiulung

Validasi HTML5 Link Google Font

Posted by Mr Xiulung Posted on 4:34:00 AM

Masih membahas tentang Validasi HTML5, artikel ini adalah artikel rangkuman dari artikel yang sudah dibahas oleh +Adhy Suryadi pada Link Font Di Head Blog Error Validasi HTML5 dan +Kang Ismet pada Validasi HTML5 Pada Link Google Font. Alasan link tersebut tidak valid, karena url pada link tersebut dianggap sebagai url ilegal.

Sepertinya ada perbaikan baru pada sistem HTML5. Untuk mengatasi masalah tersebut terdapat 3 pilihan untuk mengatasinya, oleh karena 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 kode pemisah | . Untuk mengatasinya Anda harus pisahkan kedua varian font tersebut menjadi dua link, seperti 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 kode 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 kode CSS yang akan dipasang. Dari kedua URL tersebut di dapat CSS seperti 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 kode tersebut diatas kode ]]></b:skin> atau kode </style>.

Cara Ketiga : Merubah Kode | Menjadi Kode %7

Perhatikan kode dibawah, ini adalah contoh 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 kode yang Saya tandai, agar membuat link tersebut Valid HTML5 silakan Anda ganti kode tersebut dengan kode %7.

Mr Xiulung

Cara Mengatasi Error Ampersand Pada Validasi HTML5

Posted by Mr Xiulung Posted on 10:01:00 AM

Artikel masih berhubungan dengan Validasi HTML5, kali ini Saya mencoba berbagi tips validasi HTML5 pada error ampersand. Error ampersand adalah error yang terjadi pada kode &. Untuk mengatasi error tersebut hanya tinggal menggantinya menjadi &. Pada error ini ada beberapa masalah yang muncul, oleh karena itu Saya akan jelaskan satu - per satu.

Error Ampersand Pertama

Biasanya error ini terjadi pada kode &. Untuk contohnya seperti dibawah ini.

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

Perhatikan kode yang Saya tandai, maka kita harus ganti kode tersebut & menjadi &. Maka akan menjadi seperti kode 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 kode tersebut ternyata masih error, oleh karena itu untuk mengatasinya tinggal menambahkan kode amp; di belakang kode &. Contohnya kode dibawah ini.

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

Perhatikan kode yang Saya tandai, Anda hanya tinggal menambahkan kode amp; di belakang kode & sehingga menajadi seperti kode 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 masalah error ketiga masih sama dengan mengatasi error kedua, Anda hanya tinggal menambahkan kode amp; di belakang kode & . Masalah ini akan muncul apabila cara mengatasi error pertama dan kedua masih gagal di lakukan.

Mr Xiulung

Gila +25.883 Dalam Satu Pos

Posted by Mr Xiulung Posted on 2:42:00 AM

Artikel ini telah usang, karena permasalah yang terjadi sudah selesai. Namun, untuk penyebab utama muncul masalah tersebut sampai saat ini belum di ketahui.

Artikel ini tidak hubungannya dengan tema yang Saya bahas pada blog ini. Ini hanya sebuah catatan Saya di blog ini. Kali ini Saya hanya ingin berbagi cerita unik dan aneh yang mengalami blog dummy Saya.

Pagi ini Saya membuka blog tersebut hanya sekedar untuk menyalurkan hobby desain template, hari ini Saya membuka halaman pos pada blog tersebut betapa terkejutnya Saya melihat salah satu pos dengan jumlah orang yang memberi +1 yaitu 25.883. Jumlah ini terus mengurang seiring dengan bertambahnya waktu.

Kemudian Saya selidiki dengan melihat pos tersebut langsung dan memang kenyataannya benar, dari data Google Plus Button tercatat orang yang memberi +1 adalah > 10.000. Saya inisiatif untuk mencari masalah tersebut di mesin pencari google, namun hasilnya tidak menemukan yang Saya harapkan.

Padahal Saya tidak pernah membagikan pos dalam blog tersebut ataupun menggunakan teknik bot google plus +1 semacam itu. Jumlah follower dan teman Google Plus Saya sendiri hanya 35 orang saat ini, jadi tidak mungkin sebagai penyumbang bom +1 tersebut. Muncul dalam benak Saya kenapa error ini tidak di alami pada blog Saya Kang Mousir, tentunya ini akan menjadi nilai plus untuk SEO dari blog ini. Dengan +1 sebanyak itu akan membuat blog ini berjaya di mesin pencari google :D.

Jadi, apakah ini memang kesalahan dari blogger atau penyebab lain ? Saya sendiri tidak tahu harus menjawab apa. Oleh karena itu Saya mengundang +Kang Ismet, +Adhy Suryadi dan Sobat blogger yang sekiranya dapat membantu permasalahan yang Saya alami.

Sampai sini Anda belum percaya ? Sebagai bukti bahwa Saya tidak berbohong, Saya sertakan dengan screenshoot.

Bagaimana ? Apa Anda masih belum percaya, Saya beri bukti kedua.

Mr Xiulung

Cara Membuat Flash Banner Valid HTML5

Posted by Mr Xiulung Posted on 6:49:00 PM

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.

Mr Xiulung

DroidPluss Responsive Blogger Template

Posted by Mr Xiulung Posted on 8:30:00 PM

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

Responsive
Valid HTML5 ( Home Page and Post Page )
Valid CSS3
SEO Friendly
Sticky Widget
Back To Top
Breadcrumbs
Page Navigation
Smooth Scroll To Comment Hash
Customized Deleted Comment
Costumized Error Page
Cool Threaded Comment
Emoticon In Comment
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'/>

Mr Xiulung

Cara Membuat Iklan IdBlogNetwork Valid HTML5

Posted by Mr Xiulung Posted on 7:09:00 AM

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