Apa itu Search Engine Optimization (SEO)

SEO (Search Engine Optimization) adalah praktek meningkatkan dan mempromosikan situs web untuk meningkatkan jumlah pengunjung situs yang diterima dari mesin pencari. Ada banyak aspek untuk SEO, dari kata-kata pada halaman web anda atau dengan cara link situs lain ke web anda. Terkadang SEO hanyalah masalah untuk memastikan situs anda terstruktur dengan rapi serta dipahami oleh mesin pencari.

Search Engine Optimization bukan hanya tentang "mesin" Ini tentang membuat situs. Panduan ini dirancang untuk menggambarkan semua bidang SEO - mulai dari penemuan istilah dan frase (kata kunci) yang menghasilkan lalu lintas (trafik), membangun link dan mempromosikan situs anda.

Mengapa website saya perlu SEO?

Mayoritas lalu lintas web didorong oleh mesin pencari komersial utama - Google, Bing dan Yahoo!. Meskipun media sosial dan jenis lain dari lalu lintas dapat menghasilkan kunjungan ke website Anda, mesin pencari adalah metode utama navigasi untuk sebagian besar pengguna Internet. Hal ini berlaku apakah situs Anda menyediakan konten, layanan, produk, informasi.

Search engine adalah sebagai alat penyedia lalu lintas bertarget bagi orang yang mencari apa yang Anda tawarkan. Search engine adalah jalan raya yang membuat hal ini terjadi. Jika situs Anda tidak dapat ditemukan oleh search engine atau konten Anda tidak dapat dimasukkan ke dalam database mereka, Anda kehilangan peluang yang luar biasa yang tersedia untuk website yang disediakan melalui pencarian.

Pengalaman menunjukkan bahwa lalu lintas mesin pencari dapat membuat kesuksesan suatu website. Target pengunjung ke sebuah website dapat memberikan publisitas, pendapatan. Investasi dalam SEO, baik melalui waktu atau keuangan, dapat memiliki tingkat pengembalian yang luar biasa dibandingkan dengan jenis lain pemasaran dan promosi.

Mengapa mesin pencari tidak dapat mengetahui situs saya tanpa SEO?

Search engine memang pintar, tetapi masih membutuhkan bantuan. Mesin utama selalu berupaya untuk memperbaiki teknologi-nya untuk menjelajah web lebih mendalam dan memberikan hasil yang lebih baik kepada pengguna. Namun, ada batas untuk bagaimana mesin pencari dapat beroperasi. Sedangkan penggunaan SEO yang tepat dapat menarik perhatian ribuan pengunjung, dan sebaliknya langkah yang salah dapat menyembunyikan atau mengubur situs Anda jauh di dalam hasil pencarian.

Selain membuat konten yang tersedia untuk mesin pencari, SEO juga membantu meningkatkan peringkat sehingga konten yang akan ditempatkan di mana pencari akan lebih mudah menemukannya. Internet menjadi semakin kompetitif, dan perusahaan-perusahaan yang melakukan SEO akan memiliki keuntungan memutuskan dalam pengunjung dan pelanggan.

Dapatkah saya melakukan SEO untuk website sendiri?

Dunia SEO sangat kompleks, tetapi kebanyakan orang dapat dengan mudah memahami dasar-dasar. Bahkan sebagian kecil pengetahuan dapat membuat perbedaan besar. Pada dasarnya pendidikan SEO adalah gratis dan tersedia di web, termasuk panduan seperti ini. Kombinasikan teori dengan sedikit praktek dan dan teruslah berlatih.

Dimulai dari komitmen waktu, kemauan untuk belajar, dan tetap fokus kepada permasalahan. Kalau semua dijalankan dengan sungguh-sungguh mungkin nanti anda akan menjadi seorang ahli seo.

Back to Top dengan Efek JQuery

Kadang kita sering melupakan tool kecil (back to top) yang dianggap sepele tapi sebenarnya sangat berperan banyak, terutama untuk postingan yang panjang kita tidak usah lagi mengulirkan mouse atau scroll ke bagian atas.

Dengan widget kecil ini semua masalah diatasi dengan mudah, disini saya akan mencoba share widget tersebut dengan sentuhan lembut (smooth scroll) yaitu Back To Top dengan Efek JQuery.

Bagaimana cara memasang di blog, ikutilah cara membuatnya di bawah ini:

1. Silahkan login di Blogger. Pilih Template > Edit HTML > klik Expand Widget Template
   Cari kode ]]></b:skin>  (gunakan CTRL+F)
   Copy kode dibawah ini dan Paste tepat diatas kode ]]></b:skin> 
  

/* Back to Top dengan Efek JQuery */
.button_up{
padding:7px; /* Distance between the border and the icon */
background-color:white;
border:1px solid #CCC; /* Border Color */
position:fixed;
background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVLipj7VsJ9wWJiHBxcEPtZ2nb3WxEHM-op1twhKDp2EFxNTXoKeuu3N6bqtR84nKs_mB8xlPHQOZ2bXnMZ93qZRl65HVkzVbEXHPGkhra_ca9MsHlv0rVOdoXo3FqsH5fUCKQsjqtFag/s16/arrow_up.png) no-repeat top left;
background-position:50% 50%;
width:20px; /* Button's width */
height:20px; /* Button's height */
bottom:280px; /* Distance from the bottom */
right:5px; /* Change right to left if you want the buttons on the left */
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
.button_down{
padding:7px; /* Distance between the border and the icon */
background-color:white;
border:1px solid #CCC; /* Border Color */
position:fixed;
background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi85rKx9yRMAk_-Pll__0rBYnuIKRz2dzWDHY7fmNpIOzkrMU_oS_Qr6-seykXDJGtEgzefLbMzON-hXuZOpGNsY4FioQAtMgxwtvpOQMdFRjYf43ZXYs9_ZUxNLeQRsGs_W7XaffXMmc8/s16/arrow_down.png) no-repeat top left;
background-position:50% 50%;
width:20px; /* Button's width */
height:20px; /* Button's height */
bottom:242px; /* Distance from the bottom */
right:5px; /* Change right to left if you want the buttons on the left */
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}

2. Kemudian cari kode </body>
   Copy lagi kode dibawah ini dan kemudian Paste tepat dibawah kode </body>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<div class='button_up' id='button_up' style='display:none;'/>
<div class='button_down' id='button_down' style='display:none;'/>
<script>
//<![CDATA[
(function(){var special=jQuery.event.special,uid1='D'+(+new Date()),uid2='D'+(+new Date()+1);special.scrollstart={setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}else{evt.type='scrollstart';jQuery.event.handle.apply(_self,_args)}timer=setTimeout(function(){timer=null},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid1,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid1))}};special.scrollstop={latency:300,setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}timer=setTimeout(function(){timer=null;evt.type='scrollstop';jQuery.event.handle.apply(_self,_args)},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid2,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid2))}}})();
$(function() {
var $elem = $('body');
$('#button_up').fadeIn('slow');
$('#button_down').fadeIn('slow');
$(window).bind('scrollstart', function(){
$('#button_up,#button_down').stop().animate({'opacity':'0.2'});
});
$(window).bind('scrollstop', function(){
$('#button_up,#button_down').stop().animate({'opacity':'1'});
});
$('#button_down').click(
function (e) {
$('html, body').animate({scrollTop: $elem.height()}, 800);
}};
$('#button_up').click(
function (e) {
$('html, body').animate({scrollTop: '0px'}, 800);
} );});
//]]>
</script>

3. Terakhir simpan template sobat dan tombol back to top sudah
   bisa dipakai

Catatan :

Jika scrip dibawah ini sudah ada

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

tidak usah dipasang lagi

3D Flipping Menu Menggunakan Widget

Sudah lama AjatShare tidak posting mengenai kode css, sekarang kita coba membuat 3D Flipping Menu Menggunakan Widget dengan memakai kode css.

Ilustrasi dari 3D Flipping Menu, dimana mouse didekatkan maka tulisan pada menu akan berputar dan kembali kesemula. Langsung saja kita praktek :

Seperti biasa bukan account blogger anda
Klik pada Template > Edit HTML > Proceed
Gunakan ctrl F cari kode ]]></b:skin>
dan copy paste kode di bawah ini tepat di atas kode ]]></b:skin>

.block-menu {
  display: block;
  background: #000;
}
.block-menu li {
  display: inline-block;
}
.block-menu li a {
  color: #fff;
  display: block;
  text-decoration: none;
  font-family: 'Passion One',Arial,sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  font-smoothing: antialiased;
  text-transform: uppercase;
  overflow: visible;
  line-height: 20px;
  font-size: 24px;
  padding: 15px 10px;
}

/* animasi */
.three-d {
  -webkit-perspective: 200px;
  -moz-perspective: 200px;
  perspective: 200px;
  -webkit-transition: all .07s linear;
  -moz-transition: all .07s linear;
  transition: all .07s linear;
  position: relative;
}
.three-d:not(.active):hover {
  cursor: pointer;
}
.three-d:not(.active):hover .three-d-box,
  .three-d:not(.active):focus .three-d-box {
  -moz-transform: translateZ(-25px) rotateX(90deg);
  -webkit-transform: translateZ(-25px) rotateX(90deg);
  -o-transform: translateZ(-25px) rotateX(90deg);
  transform: translateZ(-25px) rotateX(90deg);
}
.three-d-box {
  -webkit-transition: all .5s ease-out;
  -moz-transition: all .5s ease-out;
  -ms-transition: all .5s ease-out;
  -o-transition: all .5s ease-out;
  transition: all .5s ease-out;
  -webkit-transform: translatez(-25px);
  -moz-transform: translatez(-25px);
  -o-transform: translatez(-25px);
  transform: translatez(-25px);
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.front {
  -webkit-transform: rotatex(0deg) translatez(25px);
  -moz-transform: rotatex(0deg) translatez(25px);
  -o-transform: rotatex(0deg) translatez(25px);
  transform: rotatex(0deg) translatez(25px);
}
.back {
  -webkit-transform: rotatex(-90deg) translatez(25px);
  -moz-transform: rotatex(-90deg) translatez(25px);
  -o-transform: rotatex(-90deg) translatez(25px);
  transform: rotatex(-90deg) translatez(25px);
  color: #FFE7C4;
}
.front, .back {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: black;
  padding: 15px 10px;
  color: white;
  pointer-events: none;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

Save template


Masuk ke Layout > Add a widget (dibagian bawah header)
Pilih HTML/JavaScript dan paste kode di bawah ini

<ul class="block-menu">
  <li><a href="#" class="three-d">Home<span class="three-d-box"><span class="front">Home</span><span class="back">Home</span></span>
  </a></li>
  <li><a href="#" class="three-d">About<span class="three-d-box"><span class="front">About</span><span class="back">About</span></span>
  </a></li>
  <li><a href="#" class="three-d">Services<span class="three-d-box"><span class="front">Services</span><span class="back">Services</span></span>
  </a></li>
  <li><a href="#" class="three-d">Blogging<span class="three-d-box"><span class="front">Blogging</span><span class="back">Blogging</span></span>
  </a></li>
  <li><a href="#" class="three-d">Create this<span class="three-d-box"><span class="front">Create this</span><span class="back">Create this</span></span>
  </a></li>
</ul>

Simpan widget tanpa judul dan lihat hasilnya.

Cara Jitu Mempercepat Loading Blog

Mempunyai blog yang ringan dalam artian cepat proses loading-nya adalah impian hampir semua blogger, mereka beramai-ramai mencari tahu bagaimana agar blog mereka menjadi cepat pada saat loading page.

Untuk blogger pemula mungkin bertanya-tanya susahkah membuat blog agar proses loadingnya cepat, jawabannya tidaklah susah membuat blog kita agar ringan atau loadingnya cepat.

Silahkan ikuti terus Cara Jitu Mempercepat Blog :

1. Rubahlah kode Template blog anda ke HTML
2. Validasikan HTML menjadi valid HTML5
3. Bungkus semua kode css

   contoh :

   <style type='text/css'>
   .....kode css.....
   </style>

4. Validasikan CSS menjadi CSS3
5. Compress semua kode css dan javasript
6. Sisipkan script lazydog untuk mempercepat proses loading

<script charset='utf-8' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://k-blogger.googlecode.com/files/easy-loading.js' type='text/javascript'/>
<script charset='utf-8' type='text/javascript'>
$(function() {
$(&quot;img&quot;).lazyload({placeholder : &quot;http://bit.ly/Qv60g5&quot;,threshold : 200});
});
</script>

Artikel lengkapnya mengenai Cara Jitu Mempercapat Loading Blog, silahkan anda baca :

- Membuat Blog jadi Valid HTML5
- Membuat Blog jadi Valid CSS3
- Compress kode CSS
- Mempercepat Loading Halaman Page

Itulah 6 (enam) Cara Jitu Mempercepat Loading Blog, semoga bermanfaat.

Pengertian Optimasi On Page dan Off Page

Sebelumnya kita pernah membahas Cara Merampingkan Alexa dengan Cepat, dalam kesempatan kali ini kita akan membahas yang masih ada hubungannya dengan SEO dan Alexa yaitu Pengertian Optimasi On Page dan Off Page.

Kenapa kita harus mengerti dan tahu apa itu optimasi On page dan off page keduanya ibarat koin yang mempunyai dua sisi berbeda tapi keduanya mempunyai peranan yang sangat penting khususnya dimata google dan alexa, kenapa demikian..? Alasan nya sangat mudah karena dengan kita melakukan optimasi on page dan off page maka blog kita akan menjadi lebih seo friendly, nah kalau blog sudah seo friendly dengan sendiri nya blog kita akan banyak dikunjungi orang (trafik meningkat) dan kalau trafik kita meningkat sudah tentu nilai alexa rank kita pun semakin baik (nilai alexa menurun).

Nah itulah garis besar definisi dari Pengertian Optimasi On Page dan Off Page, sekarang kita berlanjut kepada pokok permasalahan di atas yaitu bagaimana melakukan optimasi on page dan off page.

Pengertian Optimasi On Page

Yang dimaksud Optimisasi SEO On Page kurang lebih yaitu optimisasi yang dilakukan dari dalam situs web/blog anda. Ada beberapa hal yang dapat anda lakukan, misalnya seperti :

1. Gunakanlah Template yang SEO Friendly, kalau memungkinkan pilih yang sudah responsive dan valid html5/css3 jika tidak juga gak apa-apa. Dalam memilih template yang harus kita ingat dan menjadi tujuan utama adalah kenyamanan pengunjung, meskipun blog kita sudah seo friendly tapi tampilan dan navigasi buruk sehingga kurang pengunjung buat apa. Jadi menurut hemat saya yang sama-sama sebagai blogger pemula lebih baik pilih dulu template yang kira-kira pengunjung tertarik baru kemudian template tersebut kita bedah agar seo friendly dan bisa ditambah jadi responsive serta valid html5/css3.

Jika anda kebingungan template mana yang harus dipilih saya sediakan untuk anda, bagi yang berminat silahkan baca SUPER SEO VALID HTML5 and FAST.

2. Pasang Meta Tags yang SEO Friendly. Ada banyak jenis meta tag yang sering digunakan. Antara lain meta description. Penggunaan meta description yang tepat dapat menambah kekuatan SEO blog di search engine. Meta description berfungsi memuat informasi yang mendeskripsikan halaman blog anda. Meta description muncul pada snippet deskripsi di hasil pencarian google. Selain meta description, ada pula meta keyword, meta author, dll.

Khusus buat anda saya rekomendasikan pula Cara Memasang Meta Tag SEO Friendly dan Valid HTML5, hanya tinggal pasang aja tanpa harus ada yang dirubah.

3. Pasang keyword pada title/judul blog. Judul adalah tempat yang sangat tepat untuk memasang keyword. Title/judul blog menggambarkan keseluruhan dari isi blog anda. Nah sebagian kunjungan yang terjadi datang dari pembaca yang tertarik akan judul blog yang anda pasang. Oleh karena itu maksimalkan penggunaan keyword yang ditargetkan pada title/judul blog.

4. Letakan judul postingan didepan judul blog. Coba anda lihat tab browser anda di atas. Apakah judul postingan sudah berada didepan (seperti blog ajatshare), kemudian disusul dengan nama blog anda? Begitu pula tampilan dalam query search engine. Biasanya, pada template yang belum di isi hack, nama blog berada didepan judul postingan. Pada hasil pencarian search engine hal ini dapat berakibat kurang baik, karena dapat memotong judul postingan dibagian belakang. Pengunjung pun jadi tidak bisa membaca judul postingan anda secara keseluruhan, terlebih jika judul postingannya panjang.

5. Maksimalkan keyword yang padat didalam postingan blog. Bukan berarti anda lalu memasang keyword sebanyak-banyaknya lho, karena hal tersebut malah dapat dianggap sebagai tindakan spam oleh search engine. Yang perlu anda lakukan adalah dengan mengatur letak posisi keyword serta memilih keyword dan frase yang tepat.

6. Percepat waktu loading blog anda. Jika waktu loading blog anda cepat, bukan hanya pengunjung anda saja yang senang, tapi spider crawl google juga senang. Pengunjung senang karena mereka tidak perlu berlama-lama untuk segera membaca artikel-artikel anda, apalagi bagi yang koneksinya lemot. Sedang google spider juga senang, karena saat crawling waktu yang dibutuhkan untuk mengumpulkan informasi menjadi lebih cepat. Efeknya artikel anda jadi lebih cepat terindex. Hindari penggunaan javascript (biasanya pada widget) dan hindari pemasangan gambar-gambar secara berlebihan agar waktu loading blog anda  menjadi lebih cepat.

Untuk memudahkan anda saya persiapkan script lazydog agar lebih cepat proses loading, selengkapnya silahkan baca Mempercepat Loading Halaman Page.

Pengertian Optimasi Off Page

Yang dimaksud Optimisasi SEO Off Page merupakan kebalikan dari Optimisasi On Page, yaitu optimisasi yang dilakukan dari luar situs web/blog anda. Yang perlu anda lakukan yaitu fokus membangun backlink. Memperbanyak inbound link (link dari situs web lain yang mengarah ke situs web anda). Semakin bermutu link yang mengarah ke web site anda, maka semakin baik pula reputasi web site anda dimata search engine. Melakukan link building dapat dilakukan dengan banyak cara, diantaranya dengan membuat reciprocal link baik dengan derektori/social bookmark ataupun bertukar link dengan blog/website lain, mendaftarkan blog dan artikel ke social bookmark/direktori, dan berkomentar di blog/website yang mempunyai page rank tinggi dan nilai alexa kecil, tapi komentarnya yang bermutu dan sesuai dengan konten.

Itulah beberapa hal pokok secara garis besar mengenai Pengertian Optimasi On Page dan Off Page. Semoga dapat bermanfaat.

Versi Lengkap Cara Membuat Blog Valid HTML5

Pada posting sebelumnya saya sudah membahas Membuat Blog Jadi Valid HTML5, ternyata masih banyak sobat kita yang masih merasa kesulitan menerapkan metode/cara yang saya berikan (mungkin bahasa saya acak-acakan yach...!).

Untuk alasan tersebut di atas maka saya mencoba memposting kembali materi yang sama tapi ini yang lebih komplit yang diberi judul Versi Lengkap Cara Membuat Blog Valid HTML5.

Sebelum melangkah lebih lanjut ada baiknya kita menengok ke belakang tentang posting saya hari kemarin mengenai Panduan Membuat Blog Agar Valid HTML5-CSS3,

agar sobat semua lebih mengerti lagi. Tidak perlu panjang lebar inilah tahapannya :

Tahap Pertama :

Mengedit HTML di dalam Post,
Agar gambar (image) bisa dibaca oleh search engine robots maka harus dilakukan perubahan

1. Pada bagian gambar (image) sebaiknya gunakan format .png
    Bungkus kode image dan berikan atrribut Tag />
    dengan menambahkan tag title="Titel Gambar" dan img alt="Kode Gambar"

    contoh :

<a href="URL Anda"><img alt="Titel Gambar" src="http://ajatshare.blogspot.com/blog-valid-html5.png" alt="Kode Gambar"/></a>

2. Hilangkan/hapus kode imageanchor="1" pada tag img.
    Hilangkan/hapus kode border="0" pada tag img.


Tahap Kedua :

Mengganti kode template lama
Sebelum melakukan perubahan pada template, backup dulu template anda beserta widgetnya.
Hal ini dilakukan agar tidak terjadi kesalahan pada saat di check oleh validator.

1. Ganti kode :

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html b:version='2' class='v2' expr:dir='data:blog.languageDirection'xmlns='http://www.w3.org/1999/xhtml'xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data'xmlns:expr='http://www.google.com/2005/gml/expr'>
<head> 

ganti dengan

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML>
<head>
<meta charset='utf-8'/>

2. Ganti kode :

<b:include name='nextprev'/>

    ganti dengan

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<!-- navigation -->
<b:include name='nextprev'/>
</b:if>

3. Ganti kode :

</html> dengan </HTML>

4. Ganti semua garis yang ada dalam kode css

/*-----Header------*/  menjadi seperti  /* Header */

5. Cari kode

<center>

   ganti dengan

<div style='text-align:center;'>

   dan pada penutup  elemennya  </center> ganti dengan </div>

6. Cari kode: onClick ganti dengan onclick (huruf C ditengah menjadi huruf kecil)

7. cari kode

<span class='post-icons'>
<!-- email post links -->
<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'><img alt='' class='icon-action' height='13' src='http://img1.blogblog.com/img/icon18_email.gif' width='18'/></a>
</span>
</b:if>
<!-- quickedit pencil -->
<b:include data='post' name='postQuickEdit'/>
</span> <div class='post-share-buttons'>
<b:include data='post' name='shareButtons'/>
</div> </div>

kemudian ganti dengan:

<span class='post-icons'>
<!-- email post links -->
<b:if cond='data:post.emailPostUrl'></b:if>
</span>
</div>

8. Jika dicek terjadi kesalahan duplikat ID,

   pada kode css : "#" ganti dengan "."   
   contoh :  #artigo ganti dengan .artigo

   pada kode html : <div id='artigo'> ganti dengan <div class='artigo'>

9. Mengganti kode pembuka dan penutup script dan style
   cari kode :

   <script>Kodescript </script>

   ganti dengan

   <script type='text/javascript'>Kode script</script>

   cari kode :

   <style>Kode CSS</style>

   ganti dengan

   <style type='text/css'>Kode CSS</style>

Tahap Ketiga :
Menghapus kode yang tidak valid HTML5 dalam template
1. Hapus kode ini:

   <div class='post-share-buttons goog-inline-block'>
   kode lain...
   </div>

2. Hapus Kode ini:

<b:includable id='postQuickEdit' var='post'>
  <b:if cond='data:post.editUrl'>
    <span expr:class='&quot;item-control &quot; + data:post.adminClass'>
      <a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
      <img alt='' class='icon-action' height='18' src='http://img2.blogblog.com /img/icon18_edit_allbkg.gif' width='18'/>
      </a>
     </span>
   </b:if>
</b:includable>

3. Hapus Kode ini:

   <body><div></div>

4. Hapus Kode ini:

   <b:include name='quickedit'/>
   <b:include data='blog' name='all-head-content'/>

5. Hapus kode ini:

   <a expr:name='data:post.id'/>

Tahap Keempat :

Hindari penggunaan widget berikut ini

1. Hindari Tag <center> jika pada Tahap Kedua poin (5) masih error.
2. Hindari pemasangan widget :
   - Google+ Followers
   - Pengikut
   - Share Button
   - Statistic (Penghitung jumlah pengunjung)


Tahap Kelima :

Jika masih ditemukan error setelah dilakukan empat tahapan di atas
Coba sekarang kita membungkus kode CSS nya.
Untuk lebih jelasnya silahkan baca Membuat Blog Jadi Valid CSS3.

Itulah 5 (lima) tahapan Versi Lengkap Cara Membuat Blog Valid HTML5, semoga berhasil

Catatan :
Check Validasi agar template valid HTML5 hanya untuk halaman utama (homepage) saja.
Dan tidak bisa dilakukan pada template yang homepage berisi halaman penuh artikel.

Panduan Membuat Blog Agar Valid HTML5-CSS3

Membuat blog kita menjadi valid html5-css3 tidaklah terlalu sulit, disini saya akan menjelaskan bagaimana caranya Membuat Blog Agar Valid HTML5-CSS3 dengan bahasa yang ringan agar mudah dimengerti khususnya untuk blogger pemula. Sebelum memulai perombakan pada template kita jangan lupa backup dulu templatenya untuk menjaga jika terjadi kesalahan. Untuk membuat blog agar valid html5-css3 dibutuhkan konsentrasi penuh dan harus tetap fokus.

Ikutilah langkah-langkah di bawah ini secara perlahan dan jangan ada yang terlewatkan dan baca sampai dengan akhir narasi dari isi artikel ini :

Membuat Blog Agar Valid HTML5

Tahapannya adalah sebagai berikut :

Tahap-1 :

Mengedit HTML di dalam Post

Untuk merubah semua/sebagian postingan agar valid html dibutuhkan waktu yang lama jika artikel yang dipublikasikan sudah banyak dan belum dioptimasi, tapi jangan menyerah dulu biasanya plafon blogspot tidak terlalu banyak yang harus dirubah hanya pada bagian gambar (image) yang harus kita perhatikan.

Tahap-2 :

- Buka account blogger anda

- Klik Template lalu pilih Backup/Restore untuk menyalin/backup template kita.

- Masih dalam kotak dialog Template lalu pilih Edit HTML untuk masuk ke halaman editor.

  Jika anda mengalami loading yang lama saat membuka halaman editor, dan agar cepat terbuka

  silahkan baca artikel Cara Membuka Edit HTML dengan Cepat.

Tahap-3 :

Mengganti kode template lama

Setelah halaman editor terbuka sempurna dan yang pertama kita rubah terlebih dahulu adalah bagian kepala/atas pada template.

Gantilah kode yang lama dengan kode baru, selengkapnya baca Membuat Blog Jadi Valid HTML5

Membuat Blog Agar Valid CSS3

Tahapannya adalah sebagai berikut :

Tahap-1

Pada bagian ini ketelitian anda sangat dibutuhkan dan tidak boleh salah sedikitpun, sekecil apapun keselahan yang kita buat akan berakibat fatal.

Jadi harap berhati-hati dan tetap fokus.

Tahap-2

- Buka account blogger anda

- Klik Template lalu pilih Backup/Restore untuk menyalin/backup template kita.

- Masih dalam kotak dialog Template lalu pilih Edit HTML untuk masuk ke halaman editor.

  Jika anda mengalami loading yang lama saat membuka halaman editor, dan agar cepat terbuka

  silahkan baca artikel Cara Membuka Edit HTML dengan Cepat.

Tahap-3

Menghapus kode yang tidak valid
cari kode dibawah ini yang berawalan:

-webkit- ; -moz- ; -ms- dan -o-

hapuslah kode-kode tersebut di atas secara hati-hati sampai batas semi colon (;), contoh :

#comments-block li, .comments .comments-content .comment-thread ol li, .comments .comments-content .comment:last-child {
background:#fff;
margin:10px 0;
padding:5px 10px;
border-top:1px solid #AD3000;
border-left:4px solid #AD3000;
border-bottom:1px solid #AD3000;
border-right:1px solid #AD3000;
-webkit-border-radius: 0px 0px 0px;
-moz-border-radius: 0px;
border-radius: 0px;
box-shadow:0 4px 6px rgba(0,0,0,0.1);-moz-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);-webkit-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);box-shadow:0 2px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3)}

perhatikan kode warna merah setelah dihapus menjadi

#comments-block li, .comments .comments-content .comment-thread ol li, .comments .comments-content .comment:last-child {
background:#fff;
margin:10px 0;
padding:5px 10px;
border-top:1px solid #AD3000;
border-left:4px solid #AD3000;
border-bottom:1px solid #AD3000;
border-right:1px solid #AD3000;
border-radius: 0px;
box-shadow:0 4px 6px rgba(0,0,0,0.1);box-shadow:0 2px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3)}

Simpan template

Tahap-4

Tahap selanjutnya bisa anda baca Membuat Blog Jadi Valid CSS3.

Itulah Panduan Membuat Blog Agar Valid HTML5 dari saya hari ini. Semoga bermanfaat

Cara Merampingkan Alexa dengan Cepat

Banyak yang bertanya pada saya, bagaimana Cara Merampingkan Alexa dengan Cepat jawabannya memang tidak semudah membalikkan telapak tangan boleh dibilang gampang-gampang tapi susah.

Menurut pengamatan dan pengalaman yang saya lakukan dari sekian banyak cara/metode untuk merampingkan nilai alexa salah satunya yang sudah saya terapkan adalah Tips Meningkatkan nilai Alexa Rank memang ada pengaruhnya walau hanya sedikit, Disini saya akan coba menjelaskan cara yang lebih efektif untuk merampingkan alexa dengan cepat adalah konsen melakukan Optimasi Seo On Page dan Off Page. Karena dengan melakukan optimasi seo on page dan off page kita mendapat dua keuntungan sekaligus, yaitu:

- Nilai alexa kita akan semakin kecil (ramping)

- Blog kita akan semakin seo friendly dan itu sangat disukai google

Dan terakhir yang tidak kalah pentingnya adalah mendaftarkan blog kita di directory terkemukan seperti Technoriti dan W3 Directory untuk meningkatkan trafik blog kita.

Semakin tinggi trafik blog kita maka semakin cepat pula nilai alexa kita menurun.

Jangan pernah mencoba melakukan software atau tool lain untuk merampingkan alexa karena akan berpengaruh buruk terhadapa blog kita. Gunakanlah cara alami seperti yang saya jelaskan di atas.

Tepat hari ini tanggal 23 Agustus 2013 blog AjatShare genap berusial 3 (tiga) bulan, dulu pertama kali mempublikasikan blog ini nilai alexa ranknya mencapai 20 juta lebih tapi coba lihat nilai alexa-nya sekarang sudah tidak kembung lagi alias ramping (he...he...he...pamer nich....) Itu hanya sekedar gambaran perbandingan untuk sobat semua, dan memang setelah melakukan metode cara di atas sangat efektif untuk merampingkan nilai alexa rank kita. Semoga bermanfaat

Animasi Posting terbaru untuk Blogger dengan Thumbnail

Recent post animasi adalah cara yang fantastis untuk menyajikan berita update untuk efek readers. Dan akan menampilkan tulisan anda paling baru dalam thumbnail kecil, tapi memiliki bonus tambahan menggunakan efek animasi yang bergerak lancar melalui posts. Ini adalah tutorial yang membahas tentang cara menambahkan Animasi Posting terbaru untuk Blogger dengan Thumbnail dan Spy Sederhana.

Cara Memasang animasi Posting terbaru untuk blogger dengan thumbnail

 

Sekarang kita mulai percobaannya ...

Langkah 1. Login ke Blogger Account anda. Lalu ke Blogger Dashboard.
Langkah 2. Setelah klik pada link Add a Gadget Sebuah kotak pop-up akan terbuka sekarang dengan banyak daftar gadget.
Langkah 3. Pilih 'HTML / Javascript' dan tambahkan salah satu kode yang diberikan di bawah ini.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script

<style type="text/css" media="screen">
#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb1tWKJTsd4emN6bC_tYp51TNDh6yRUqvAJktcjEvidJJl4NFdnez4qs3dp4Oq5Zq1YtRAslSk-XnSRAsZ48eLuF2XccvKEKGshQxHN51egaFxBNCyECDip_tJqKIyeXimf-VTP0BBQNZ-/s1600/24work-blogspot-com.jpg) repeat-x;
border:1px solid #ddd;
}
#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}
.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
} </style>

<a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a>

<script language='JavaScript'>
imgr = new Array(); imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihDw7LtUBzxkkRwfLtz0yxz3d3-PKrnBuAiMdISb-VBi5vAaTfy6tY_8zmbQpzcGBayctBcTMk3O6L7Pl-W8vSGcUcgExTkPwo1K5WtMm-WmIx05gfPJV07p6ZqBeJWFydo40mhXM2tYIb/s1600/noimage.png";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihDw7LtUBzxkkRwfLtz0yxz3d3-PKrnBuAiMdISb-VBi5vAaTfy6tY_8zmbQpzcGBayctBcTMk3O6L7Pl-W8vSGcUcgExTkPwo1K5WtMm-WmIx05gfPJV07p6ZqBeJWFydo40mhXM2tYIb/s1600/noimage.png";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihDw7LtUBzxkkRwfLtz0yxz3d3-PKrnBuAiMdISb-VBi5vAaTfy6tY_8zmbQpzcGBayctBcTMk3O6L7Pl-W8vSGcUcgExTkPwo1K5WtMm-WmIx05gfPJV07p6ZqBeJWFydo40mhXM2tYIb/s1600/noimage.png";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihDw7LtUBzxkkRwfLtz0yxz3d3-PKrnBuAiMdISb-VBi5vAaTfy6tY_8zmbQpzcGBayctBcTMk3O6L7Pl-W8vSGcUcgExTkPwo1K5WtMm-WmIx05gfPJV07p6ZqBeJWFydo40mhXM2tYIb/s1600/noimage.png";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihDw7LtUBzxkkRwfLtz0yxz3d3-PKrnBuAiMdISb-VBi5vAaTfy6tY_8zmbQpzcGBayctBcTMk3O6L7Pl-W8vSGcUcgExTkPwo1K5WtMm-WmIx05gfPJV07p6ZqBeJWFydo40mhXM2tYIb/s1600/noimage.png";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 70;
thumbheight = 70;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";numposts = 10;
home_page = "http://bdlab.blogspot.com/";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src='http://24work.webs.com/24work-blogspot/recent-posts/animated-recent-posts-ycode-1.js' type='text/javascript'></script>
</div>

Dan sekarang klik Save

Catatan: Jika template Anda sudah memiliki jquery, maka jquery di bawah ini tidak usah dipasang. Html dari atas beberapa hal bisa diganti:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"> </ script> 

width: 220px;
width: 208px:
menyesuaikan dasar pada template Anda

background: # fff repeat-x;
sesuaikan warna backuground

thumbwidth = 70;
thumbheight = 70;
ukuran gambar sesuai dengan kebutuhan Anda

numposts = 10;
berapa banyak posting yang akan menunjukkan


sumber: http://24work.blogspot.com/2011/12/animated-recent-posts-for-blogger.html

Template Full Responsive and Valid CSS3/HTML5

Hari ini adalah yang paling membahagia-kan saya, karena sudah berhasil merombak template ini menjadi Template Full Responsive and Valid CSS3/HTML5, meskipun belum 100% masih menyisakan satu warning pada HTML5 dan untuk CSS3 sudah Valid. Template ini saya persembahkan khusus buat sahabat AjatShare semua. Adapun cara untuk merubah template ini semuanya mengacu kepada tutorial yang pernah saya posting sebelumnya.

Setelah hampir sebulan lebih mengobrak-abrik template dan bertanya kesana kemari dengan ditemani oleh mbah google sebagai sahabat setia saya, akhirnya saya bisa merampungkan template ini. Template yang saya pakai ini adalah template hasil karya Kang Kapuk yang diberi judul : V6_Blue_Template_HTML5_Responsive

Template Full Responsive and Valid CSS3/HTML5
Fitur asli bawaan dari template ini adalah:

Fitur Asli

- SEO friendly
- Valid HTML5
- Simply and very elegant design xD
- Fast Loading
- Valid microdata (google richsnippet)
- Responsive design
- Easy navigation
- High quality home paga image thumbnail
- Mobile template

Template Full Responsive and Valid CSS3/HTML5
Penambahan fitur dari template ini by AjatShare:

Fitur Tambahan

- Super Seo Friendly
- Optimasi Seo On Page
- Super Fast Loading 0.5 ms dari GTMetrix
- Mendapat Nilai Great B dan A dari GTMetrix
- Pure Valid HTML5 validator.w3.org dan validator.nu
- Pure Valid CSS3 jigsaw.w3.org/css
- Minify HTML, kode html sudah di compress
- Minify CSS, kode css sudah di compress
- Menu DropDown dengan CSS
- Typogrphy Included
- Emoticon dalam posting dan kolom komentar
- Code and Pre Highlighter Code
- Halaman statis full page
- h2 to h1, judul posting jadi judul blog
- meta tag seo friendly valid html5
- meta heading h1 h2 h3
- Permalink seo friendly
- Future widget label

Catatan:
Template Full Responsive and Valid CSS3/HTML5 hanya valid di homepage saja, meskipun masih ada sedikit error pada bagian html5  dikarenakan adanya perubahan yang saya lakukan, dan hanya valid dihalaman utama saja. Selengkapnya artikel di atas bisa anda baca disini Template V6 Blue HTML5 CSS3 Versi AjatShare, sudah termasuk LiveDemo dan link Download.

Bagi sahabat AjatShare yang ingin merubah template blog kamu bisa tutorialnya bisa anda baca Masalah Mengatasi Not Valid HTML5 dan Membuat Blog jadi Valid HTML5 serta Membuat Blog jadi Valid CSS3 dan yang terakhir adalah Cara Compress Kode CSS dengan Cepat.

Mempercepat Loading Halaman Page

Dipagi yang cerah ini setelah saya mengganti template lama dengan yang sekarang, rasanya ingin berbagi ilmu dengan sobat AjatShare. Sewaktu bereksperimen dengan berbagai macam template saya menemukan salah satu cara untuk Mempercepat Loading Halaman Page yang simple namun cukup efektif yaitu dengan cara memasang script lazy load pada blog kita. Memang banyak cara untuk mempercepat loading blog kita, seperti dalam posting saya sebelumnya yaitu dengan mengkompress kode css atau dengan cara membuat blog menjadi valid html5 ataupun valid css3. Nah pada kesempatan ini saya akan membahas Lazy Load Script.

Lazy Load Script ini merupakan script yang membuat kinerja pemuatan blog berjalan secara efektif, dengan adanya Lazy load ini blog kita akan memuat element element penting dahulu , yang membuat elemet gambar akan dimuat terakhir, memang terlihat blog kita lebih cepat dengan memakai ini tetapi menurut saya sama saja namun jika kita memakai ini blog kita akan langsung terlihat (tidak lama blanknya).

Mempercepat Loading Halaman Page :

1. Masuk Ke Dasboard , Rancangan di pilih edit HTML
2. Centang Expand Template Widget, dan tunggu
3. setelah menunggu copy paste kode berikut diatas kode </head>

<script charset='utf-8' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> 
<script src='http://cuerosb.googlecode.com/files/cueros%20-lazyload.js' type='text/javascript'/> 
<script charset='utf-8' type='text/javascript'> 
$(function() { 
$(&quot;img&quot;).lazyload({placeholder : &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiweVe7tBKT1noJfUrdnYefhz253xc7cAF5hTOVMnaXxeqjcWdVWRR97aEO49ZH1P3gdXv5euA-0S0UBHQinTLGHi_smzlrBKJOQG9I_OSUnhrkIHA67fZ3zPcnBj_-1DvHiFtEqG0uGV8/&quot;,threshold : 200}); }); 
</script> 

   atau bisa juga dengan menggunakan kode script di bawah ini :

<script type='text/javascript'>
//<![CDATA[
(function(a){a.fn.lazyload=function(b){var c={threshold:0,failurelimit:0,event:"scroll",effect:"show",container:window};
if(b){a.extend(c,b)}var d=this;
if("scroll"==c.event){a(c.container).bind("scroll",function(b){var e=0;
d.each(function(){if(a.abovethetop(this,c)||a.leftofbegin(this,c)){}else if(!a.belowthefold(this,c)&&!a.rightoffold(this,c)){a(this).trigger("appear")}else{if(e++>
c.failurelimit){return false}}});
var f=a.grep(d,function(a){return!a.loaded});
d=a(f)})}this.each(function(){var b=this;
if(undefined==a(b).attr("original")){a(b).attr("original",a(b).attr("src"))}if("scroll"!=c.event||undefined==a(b).attr("src")||c.placeholder==a(b).attr("src")||a.abovethetop(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.rightoffold(b,c)){if(c.placeholder){a(b).attr("src",c.placeholder)}else{a(b).removeAttr("src")}b.loaded=false}else{b.loaded=true}a(b).one("appear",function(){if(!this.loaded){a("<img />").bind("load",function(){a(b).hide().attr("src",a(b).attr("original"))[c.effect](c.effectspeed);
b.loaded=true}).attr("src",a(b).attr("original"))}});
if("scroll"!=c.event){a(b).bind(c.event,function(c){if(!b.loaded){a(b).trigger("appear")}})}});
a(c.container).trigger(c.event);return this};
a.belowthefold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).height()+a(window).scrollTop()}else{var d=a(c.container).offset().top+a(c.container).height()}return d<=a(b).offset().top-c.threshold};
a.rightoffold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).width()+a(window).scrollLeft()}else{var d=a(c.container).offset().left+a(c.container).width()}return d<=a(b).offset().left-c.threshold};
a.abovethetop=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollTop()}else{var d=a(c.container).offset().top}return d>=a(b).offset().top+c.threshold+a(b).height()};
a.leftofbegin=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollLeft()}else{var d=a(c.container).offset().left}return d>=a(b).offset().left+c.threshold+a(b).width()};
a.extend(a.expr[":"],{"below-the-fold":"$.belowthefold(a, {threshold : 0, container: window})","above-the-fold":"!$.belowthefold(a, {threshold : 0, container: window})","right-of-fold":"$.rightoffold(a, {threshold : 0, container: window})","left-of-fold":"!$.rightoffold(a, {threshold : 0, container: window})"})})(jQuery);
$(function(){$("img").lazyload({placeholder:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOAGV7JdMiuzcrl0IwuXRdZoy-Qs6-1xX7YFNZMPl-CiG2P6QlLp9xXdTKjLHdBoB0tDbWIkDeGU3k_gHhVS4k81OyqsJLlLlsJsa7VaMUELoRER0Teih5ktsPi7fwiw8o70TMGzTEFZQ/s1600/truebloggertricks.blogspot.com.gif",effect:"fadeIn",threshold:"-50"})})
//]]></script>

4. Simpan Template

Cara Membuat Box Comment, Facebook, Twitter, G+ dan Tanggal

Selamat sahabat untuk semua sobat AjatShare, di kesempatan lain saya pernah membahas tentang pemasangan elemen widget yang berada dibawah posting seperti Cara Membuat Permalink Sederhana dan Cara Membuat Related Posts, nah dalam kesempatan kali ini saya mencoba memberikan tutorial bagaimana Cara Membuat Box Comment, Facebook, Twitter, Google Plus dan Tanggal pada blog khususnya blogger. Box ini diambil dari template baru nya mas sugeng yaitu Simple Faster yang sudah responsive. Box ini jika di sentuh akan mengembang (pada :hover) dan otomatis melacak tanpa ada yang harus diganti lagi.

Berikut tutorialnya :

Seperti biasanya buka dulu blog kamu dan masuk ke edit html
Lalu cari kode ]]></b:skin>
dan letakan kode dibawah ini tepat diatas kode ]]></b:skin>

.box {
text-align:center;
-webkit-transition:all 0.3s linear;
-moz-transition:all 0.3s linear;
-o-transition:all 0.3s linear;
transition:all 0.3s linear;
}
.box2 {
position:relative;
z-index:4;
border-radius:17px;
font-size:1.8em;
font-weight:bold;
background:#eee;
border:1px solid #ccc;
float:left;
line-height:34px;
height:34px;
width:34px;
padding:0px;
text-shadow:1px 1px #ccc;
}
.komentar {
width:auto;
min-width:34px;
max-width:80px;
}
.jam{
background:#eee url(http://2.bp.blogspot.com/-6f3YMV7Kv-U/UUxBe6vEd9I/AAAAAAAAAFI kCdm0LdV7Xo/s1600/jam.png) no-repeat 7px 7px;
}
.box a {
color:#333;
}
a.au:hover {
color:green;
}
a.fb:hover {
color:#3B5998;
}
a.tw:hover {
color:#1BB2E9;
}
a.gp:hover {
color:#CF4332;
}
span.plus {
position:relative;
top:-7px;
font-weight:normal;
font-size:13px;
}
span.google {
position:relative;
top:-3px;
font-family:serif;
}
.box3 {
position:relative;
left:-17px;
box-shadow:inset 0px 0px 13px #ddd;
-moz-box-shadow:inset 0px 0px 13px #ddd;
-webkit-box-shadow:inset 0px 0px 13px #ddd;
-webkit-transition:margin 0.6s linear,width 0.3s linear;
-moz-transition:margin 0.6s linear,width 0.3s linear;
-o-transition:margin 0.6s linear,width 0.3s linear;
transition:margin 0.6s linear,width 0.3s linear;
float:left;
background:#fff;
border-radius:0 17px 17px 0;
border:1px solid #ccc;
width:0px;
height:34px;
line-height:34px;
overflow:hidden;
margin:0 8px 0 0px;
}
.box3 span {
margin:0px;
}
.box2:hover {
border:1px solid #aaa;
}
.box:hover .box3 {
margin:0 -7px 0 0;
width:100px;
}
.box:hover .box3.panjang {
margin:0 -7px 0 0;
width:150px;
}

Berikutnya adalah menyisipan kode di bawah tepat di bawah <div class='post-footer'>

<b:if cond='data:blog.pageType != &quot;item&quot;'><div class='box'><b:if cond='data:post.allowComments'><a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><div class='box2 komentar'><b:if cond='data:post.numComments'><data:post.numComments/></b:if></div><div class='box3'><span>Komentar</span></div></a></b:if></div></b:if>
<div class='box'><a class='fb' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' rel='nofollow' target='_blank'><div class='box2'>f</div><div class='box3'><span>Share</span></div></a></div>
<div class='box'><a class='tw' expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:post.url + &quot;&amp;text=&quot; + data:post.title + &quot;&amp;via=blogmassugeng&amp;lang=id&quot;' rel='nofollow' target='_blank'><div class='box2'>t</div><div class='box3'><span>Tweet</span></div></a></div>
<div class='box'><a class='gp' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'><div class='box2'><span class='google'>g</span><span class='plus'>+</span></div><div class='box3'><span>Share</span></div></a></div>
<div class='box'><a class='au' expr:href='data:post.authorProfileUrl' target='_blank'><div class='box2'>?</div><div class='box3 panjang'><span class='vcard'><span class='fn'><data:post.author/></span></span></div></a></div>
<div class='box'><a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><div class='box2 jam'/><div class='box3'><span><abbr class='published updated' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></span></div></a></div>

Setelah selesai jangan lupa simpan templatenya

Pengertian Affiliate Marketing

Affiliate Marketing adalah salah bagian dari cabang internet marketing dan bisa dikategorikan bagian dari bisnis online, dimana tugasnya adalah memasarkan produk orang lain dan kita mendapatkan komisi jika produk yang kita promomosikan diminati oleh calon konsumen dan besarnya komisi sesuai dengan perjanjian yang telah ditentukan.

Biasanya produk yang dijual adalah website yang dimana website tersebut akan menjadi website replika membernya sendiri. Untuk sekarang ini, udah banyak banget orang2 yang berkecimpung di bidang affiliate marketing ini. Seperti salah satu contoh bisnis affiliate marketing yang bisa saya berikan adalah LinkFromBlog dan Dana Uang Hibah. Itu adalah beberapa contoh dari bisnis affiliate marketing dan masih banyak bisnis yang bertebaran di dunia maya lainnya.

Sistem kerja dari Affiliate Marketing secara global (selanjutnya disingkat AM) sebenarnya cukuplah mudah anda hanya cukup memperkenalkan bisnis anda tersebut atau dengan kata lain Job Description nya hanya untuk promosi, berpromosi, dan dipromosikan. Karena memang hanya dengan promosi saja kita dapat meningkatkan penjualan suatu produk khususnya untuk hal yang kita bahas kali ini, Affiliate Marketing.

Pada dasarnya, klo kita sudah menguasai apa yang namanya Internet Marketing, kita sudah dapat dengan mudah menjual suatu even produk dan bukan produk kita sendiri. Nah, untuk anda yang mau/baru terjun kedunia bisnis online, mungkin Affiliate Marketing adalah langkah awal yang baik yang dapat di coba untuk membuat pondasi pada diri kita untuk menjadi seorang internet marketer atau mungkin bahkan jadi Pebisnis Ulung di dunia maya.

List Program atau daftar situs penyedia layanan Affiliate Marketing yang saya tahu dan dapatkan, silahkan anda baca Kumpulan Job Online Affiliate sebagai bahan referensi untuk pemula yang mau terjun kedunia bisnis online.

Cara Memasang Meta Tag SEO Friendly dan Valid HTML5

Sebelumnya saya selaku admin Ajatshare Blogger ingin mengucapkan Minal Aidin Wal Faidin Mohon Maaf Lahir dan Batin, mudah-mudahan di hari yang fitri ini kita semua kembali ke fitrahnya. Amien....

Okey kita langsung saja ke posting saya hari ini yaitu mengenai Cara Memasang Meta Tag SEO Friendly dan Valid HTML5. Kenapa di dalam blog yang kita buat harus terkandung meta tag yang seo, benar karena dengan terpasangnya meta tag apalagi yang seo dan valid html5 akan memudahkan artikel yang kita muat bisa langsung terindeks oleh search engine google.

Begitu penting meta tag yang kita pasangkan di dalam blog karena sangat berpengaruh besar terhadap kwalitas dari blog yang kita buat, tapi kadang kita kurang memperhatikan hal ini dan khusus untuk blogger pemula ini sangatlah dianjurkan agar blog anda trafik nya cepat meningkat dan mendapat kunjungan dari visitor.

Dan inilah Cara Memasang Meta Tag SEO Friendly dan Valid HTML5 :

1. Login ke akun blogger
2. Klik "template"
3. Klik "Edit Html"
4. Cari kode <head>
    Letakan kode dibawah ini tepat di bawah kode <head>

<meta charset='utf-8'/>
<link href='http://nama-blog.blogspot.com' rel='canonical'/>
<b:if cond='data:blog.pageType == &quot;index&quot;'> <title><data:blog.pageTitle/> DESKRIPSI SINGKAT BLOG </title> <b:else/><title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>
<meta content='Description Blog Anda' name='description'/>
<meta content='keyword1,keyword2,keyword3' name='keywords'/>
<meta content='index, follow' name='robots'/>
<meta content='Kode Verifikasi Google' name='google-site-verification'/>
<meta content='Kode Verifikasi Bing' name='msvalidate.01'/>
<meta content='Kode Verifikasi Alexa' name='alexaVerifyID'/>
<meta content='2 days' name='revisit-after'/>
<meta content='general' name='rating'/>
<meta content='id' name='geo.country'/>
<meta content='Indonesia' name='geo.placename'/>
<meta content='Nama Author' name='author'/>
<meta content='all' name='Slurp'/>
<meta content='width=device-width' name='viewport'/>
<link href='http://nama-blog.blogspot.com/favicon.ico' rel='icon' type='image/x-icon'/>
<link href='http://nama-blog.blogspot.com/atom.xml' rel='alternate' title='Atom' type='application/atom+xml'/>
<link href='http://nama-blog.blogspot.com/feeds/posts/default' rel='alternate' title='RSS Feeds' type='application/atom+xml'/>
<link href='http://draft.blogger.com/openid-server.g' rel='openid.server'/>
<link href='http://nama-blog.blogspot.com' rel='openid.delegate'/>

5. Kemudian klik Template >> Edit HTML lalu paste kode tersebut diantara kode:

<head>
Disini letak kode diatas
<b:skin><![CDATA[

6. Kemudian simpan Template


Catatan:

- Tulisan berwarna biru ganti dengan URL Blog anda
- Tulisan berwarna merah ganti dengan Nama Anda / Nama Blog Anda
- Tulisan berwarna coklat ganti dengan Verified ID anda
- Tulisan berwarna ping ganti dengan descripsi dan keyword anda

Mengatur Heading Tag h1 h2 h3 Agar SEO

Tentu kita pengen blog yang dipakai mendukung SEO salah satunya adalah pengaturan heading tag agar seo friendly, untuk itulah posting hari tentang Mengatur Heading Tag h1 h2 h3 Agar SEO.
Pada saat kita memberi heading tag pada bagian tertentu pada teks di blog, itu sama saja dengan berkata kepada robot "Bagian ini yang terpenting, ini yang lebih penting, ini yang penting, dan ini yang agak penting".
Dengan cara ini, kita bisa memberi tahu robot bahwa bagian teks ini adalah yang terpenting atau tidak. Jadi, kita harus mengatur heading tag dengan benar.

Untuk memahaminya kita harus tahu dulu pengertian ataupun penjelasan tentang heading tag, di bawah akan saya uraikan sedit pengertian tentang heading tag tersebut beserta aturan yang harus dilakukan.

Aturan Heading tag :

-  h1 adalah yang paling penting dan h2-h6 adalah urutan selanjutnya.
-  h1 hanya boleh ada 1 untuk setiap halaman dan WAJIB ADA, sedangkan h2-h6 boleh lebih dari satu.
-  Semua heading sebaiknya mengandung kata kunci.
-  Jangan terlalu banyak pengulangan kata yang sama dalam satu heading tag.
-  Judul Postingan sebaiknya diberi tag h2.
-  Judul Widget sebaiknya diberi h3.
-  dan lain-lain 


Urutan heading tag :

Heading tag h1
Heading blog (nama blog)
Judul artikel di halaman artikel

Heading tag h2
Judul artikel pada halaman utama (homepage)
Heading (nama blog) pada halaman artikel
Disarankan untuk deskripsi blog

Heading tag h3
Disarankan untuk judul widget

Heading tag h4
Disarankan untuk judul widget
Jika ada, jumlah komentar pada blog (pada bagian komentar)

Heading tag h5
Nama pemberi komentar (pada bagian komentar)

Heading tag h6
Link credit, seperti powered by blogger.


Setelah anda mengetahui aturan dan urutan dalam heading tag, sekarang ikuti langkah langkah berikut ini yaitu mengatur judul artikel agar lebih seo.
Ikuti prosedur di bawah ini untuk mengubah judul artikel:

Masuk ke akun blogger anda, klik menu Template.
Klik Edit HTML, kemudian tekan Control + F pada keyboard komputer anda.

 Ganti Code HTML  

    Cari kode h3.post
    Kode seperti ini bisa lebih dari satu. Ubah semuanya menjadi
    h2.post
    Jika sudah, sekarang cari semua kode <h3 class='post
    Ubah semuanya menjadi <h2 class='post
    Ubah juga end tag pada kode tersebut, ubah </h3> menjadi
    </h2>
    Klik Simpan Template

Mengatur judul Widget menjadi H3

    Masuk ke EDIT HTML
    Cari kode HTML semua widget blog anda.
    Contoh kode widget popular posts:
    <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
    <b:includable id='main'>
    <b:if cond='data:title'>
    <h2><data:title/></h2>
    </b:if>

Ganti kode yang berwarna merah dengan kode

    <h3><data:title/></h3>
    Jika semua widget sudah anda atur, silahkan klik
    Klik Simpan Template

Mengatur deskripsi blog menjadi H2

    Cari kode <div class='descriptionwrapper'>
    Lihat kode setelah kode <div class='descriptionwrapper'>
    Kodenya seperti ini,                              
    <div class='descriptionwrapper'>
    <p class='description'><span><data:description/></span></p>

Kode diatas bisa saja berbeda dengan blog anda, tetapi tidak masalah, silahkan ikuti saja langkah-langkah nya. Gantilah kode yang ada dibawah kode <div class='descriptionwrapper'> yaitu yang berwarna merah    dengan kode di bawah ini :

    <h2 class='description'><span><data:description/></span></h2>

Klik Simpan Template



Catatan :

Cara mengatur heading tag pada editor entri yaitu pada Icon Editor artikel sudah ada pilihan untuk menentukan Heading Tag. Anda cukup memilih HEADING untuk H2, SUB HEADING untuk H3, dan MINOR HEADING untuk H4. Anda hanya tinggal menandai kata kunci yang penting atau kata kunci yang diincar di heading tag, dan pilih headingnya....

Nah, itulah cara mengatur Heading Tag h1 h2 h3 agar blog menjadi lebih SEO friendly. Tapi tetap saja, agar blog berada di halaman satu google, jangan hanya mengandalkan cara ini saja. Ini hanyalah salah satu cara dari beratus-ratus cara lainnya. Anda juga harus mengoptimalkan 2 teknik SEO yaitu ON-PAGE dan OFF-PAGE SEO.

Cara Compress Kode CSS dengan Cepat

Untuk mempercepat loading homepage blog kita adalah dengan Cara Compress Kode CSS dengan Cepat. Selain dapat meningkatkan kecepatan loading homepage, Compress CSS juga bisa menghemat bandwidth. Cara ini tentu sangat bagus untuk web atau blog kita yang mengalami masalah lamanya waktu loading, apalagi blog kita yang sudah padat berjejal kode CSS, javascript, jQuery atau muatan artikel, gambar, video ataupun yang lain. Silahkan anda bisa coba cara ini.

Caranya kita gunakan penyedia layanan tool gratis dari www.cssdrive.com. Hasil Compress CSS tergantung pada tiga tingkat kompresi yang bisa kita pilih.

Dan inilah langkah-langkah untuk compress kode css sbb:

• Login ke blogger anda.
• KLik tab Edit HTML.
• Sebelumnya silahkan anda copy kode diantara kode <b:skin> dan kode </b:skin> dan paste pada Notepad, lalu simpan di computer anda, agar lebih aman bila terjadi kesalahan.
• Setelah tersimpan, cut kode CSS diantara kode <b:skin> dan kode </b:skin> pada template tadi.
• Lalu tinggalkan sejenak, dan jangan ditutup.
• Silahkan buka www.cssdrive.com, atau KLIK DISINI.
• Pilih :

Compression mode : Normal.
Comments handling : Select Don't strip any comments.

Catatan :
Disarankan menggunakan mode Normal, agar kode CSS tetap bekerja dengan baik.
Bila meng-inginkan hasil kompresi yang lebih kecil, anda bisa coba mode lain. Tapi seperti saya ingatkan diatas, terlebih dulu anda copy dan simpan dicomputer anda, agar bila hasil tidak sesuai yang kita inginkan, kita bisa mengulang dengan Mode yang lain.

• Paste kode yang sudah di CUT tadi, pada area yang disediakan.
• Klik tombol "Compress-it!".
• Setelah proses compress selesai, dibagian bawah ada keterangan hasil compress.
• Klik tombol Highlight, Copy kode.
• Kembali ke Tenplate dan PASTE diantara kode <b:skin> dan kode </b:skin>
• Simpan Template, dan lihat hasilnya.

Nah itulah tips kali ini, semoga bermanfaat.

Membuat Blog jadi Valid CSS3

Beberapa hari ini saya disibukkan Optimasi Tampilan Blog agar lebih Seo dan valid saat di cek di Validasi Html5, nah berkaitan dengan tujuan di atas maka saya coba buat artikel Membuat Blog jadi Valid CSS3 tujuan nya adalah agar template kita lebih Seo dan artikel kita lebih mudah di telusuri oleh mesin pencari Google, Setelah beberapa waktu lalu sudah membahas cara Membuat Blog jadi Valid HTML5 dan berhasil saya terapkan, meskipun sudah Valid Html5 dan Scor Seonya sudah 100% tanpa meninggalkan link yang rusak ,ternyata itu belum selesai ,Saat blog kita cek di W3C Validasi Servis ,seakan tidak percaya blog yang kita anggap Valid Html5 dan Seo ternyata menyisakan banyak Error pada Kode CSS ,untuk membuktikan nya silahkan cek blog sobat di http://jigsaw.w3.org/css-validator/, sama halnya dengan blog saya ini ternyata Error code Css banyak terdapat pada kode bawaan blogger yang kita kita kenal css_bundle,mungkin kode ini secara kasat mata tidak dapat kita lihat karena menurut Bang Andy yang punya Kompi Ajaib kode ini disebut kode siluman, pada kesempatan ini AjatShare akan membasmi Kode siluman tsb agar blog kita berhasil dan valid Css3 ,berikut caranya:

1. Download Lengkap Template sebelum melakukan Trik ini
2. Coba cari kode ini <b:skin><![CDATA[ selanjutnya Cut (Ctrl + X) semua kode CSS di bawah nya ,
    ingat hanya kode css nya sampai pada kode ]]></b:skin> lalu paste pada NOTEPAD
    Sehingga nantinya setelah kode css nya kita pindahkan pada NOTEPAD akan menyisakan kode berikut

<b:skin><![CDATA[ ]]></b:skin>
Ganti kode <b:skin><![CDATA[ ]]></b:skin> dengan kode berikut ini :

&lt;style type=&quot;text/css&quot;&gt;
&lt;!-- /*<b:skin><![CDATA[*/]]></b:skin>

selanjutnya tepat dibawah nya pasang kode ini :

<style type='text/css'>
.....masukan kode css disini.....
</style>

    Sehingga nantinya kode menjadi seperti ini :

&lt;style type=&quot;text/css&quot;&gt;
&lt;!-- /*<b:skin><![CDATA[*/]]></b:skin>
<style type='text/css'>
.....masukan kode css disini.....
</style>

 3. Masih ingat dengan kode css yang di paste di notepad tadi silahkan copy dan Paste pada kata
      .....masukan kode css disini.....
4. Lakukan preview dahulu jika ternyata tidak ada Error Save template

Pada tahap ini sudah banyak kode error yang sudah teratasi silahkan cek kembali template sobat di Css Validasi Servis (linknya ada di atas bagian artikel ini )

Mudah-mudahan tips di atas dapat mengatasi Css yang tidak valid saya yakin masih banyak kode kode css yang lain yang tidak dapat saya sebutkan disini sebelum sobat mengeceknya di http://jigsaw.w3.org/css-validator/