Cara dan Info Blogger

Deskripsi

jQuery .submit()

<form id="target" action="tujuan.html">
 <input type="text" value="Ini hanya percobaan"/>
 <input type="submit" value="Kirim"/>
</form>
<div id="lain">
 Pemicu Lain
</div>

$('#target').submit(function() {
 alert('Handler untuk .submit() terpanggil');
 return false;
});

$('#lain').click(function() {
  $('#target').submit();
});

Mekanisme Kerja Google Custom Search Engine

jQuery Google Custom Search Engine

<form id="searchform" action="/p/pencarian.html">
 <input id="searchq" name="q" type="search" placeholder="Cari..."/>
 <input class="searchbutton" name="sa" type="submit" value="Go" />
</form>

google.load("search", "1", {
 language: "id",
 style : google.loader.themes.V2_DEFAULT
});
google.setOnLoadCallback(function () {
    var c = new google.search.CustomSearchControl("012345678901234567890:mdrcctmncrt", {});
    c.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
    var a = new google.search.DrawOptions;
    a.enableSearchResultsOnly();
    c.draw("cse", a);
    for (var a = {}, e = window.location.search.substr(1).split("&"), d = 0; d < e.length; d++) {
        var b = e[d].split("="),
            f = decodeURIComponent(b[0]);
        a[f] = b[1] ? decodeURIComponent(b[1].replace(/\+/g, " ")) : b[1]
    }
    a.q && c.execute(a.q, null, {
        oq: a.oq,
        aq: a.aq,
        aqi: a.aqi,
        aql: a.aql,
        gs_sm: a.gs_sm,
        gs_upl: a.gs_upl
    })
}, !0);

Hasil Perpaduan

$(function () {
    $("#searchform").submit(function () {
        var b = new google.search.CustomSearchControl("012345678901234567890:mdrcctmncrt", {});
        b.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
        var a = new google.search.DrawOptions;
        a.enableSearchResultsOnly();
        b.draw("cse", a);
        (a = $("#searchq").val()) && b.execute(a);
        return !1
    })
});

google.setOnLoadCallback

$("#searchform").submit

for (var a = {}, e = window.location.search.substr(1).split("&"), d = 0; d < e.length; d++) {
 var b = e[d].split("="),
  f = decodeURIComponent(b[0]);
 a[f] = b[1] ? decodeURIComponent(b[1].replace(/\+/g, " ")) : b[1]
}
a.q && c.execute(a.q, null, {
 oq: a.oq,
 aq: a.aq,
 aqi: a.aqi,
 aql: a.aql,
 gs_sm: a.gs_sm,
 gs_upl: a.gs_upl
})

(a = $("#searchq").val()) && b.execute(a);
return !1

Conditional Tag

<b:if cond='data:blog.url == &quot;/p/pencarian.html&quot;'>
... Script jQuery Google API CSE ...
</b:if>

Integrasi Pada Blog

</body>

<b:if cond='data:blog.url == &quot;/p/pencarian.html&quot;'>
<script type='text/javascript'>
//<![CDATA[
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
$(function () {
    $("#searchform").submit(function () {
        var b = new google.search.CustomSearchControl("012345678901234567890:mdrcctmncrt", {});
        b.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
        var a = new google.search.DrawOptions;
        a.enableSearchResultsOnly();
        b.draw("cse", a);
        (a = $("#searchq").val()) && b.execute(a);
        return !1
    })
});
//]]>
</script>
</b:if>

• Kode Google API CSE yang telah dimasukan sebelumnya jangan dibuang, karena kita membutuhkan loadernya.
• Ganti URL /p/pencarian.html sesuai dengan URL halaman hasil pencarian anda.
• Buang framwork jQuery jika blog anda telah memasang framework jQuery.
• Samakan atau ubah ID #searchform pada jQuery sesuai dengan ID Form Input anda (misal ID form input; <form id="searchform").
• Jangan lupa untuk mengganti 012345678901234567890:mdrcctmncrt sesuai dengan kode yang anda peroleh dari Google CSE.
• Samakan atau ubah ID #searchq pada jQuery sesuai dengan ID Input anda (misal ID Input; <input id="searchq" name="q")

Kesimpulan

Membuat Akun Google Custom Search Engine

• Nama: Isilah dengan dengan Google Custom Search Engine (rekomendasi; sesuaikan dengan nama blog anda)
• Deskripsi: Isi deskripsi mengenai fungsi mesin telusur yang anda buat, karena mesin telusur ini bersifat publik yang siapapun bisa menggunakannnya
• Bahasa: Pilihlah bahasa yang sesuai dengan kemampuan anda (sayangnya tidak ada bahasa Jawa. #LOL)
• Situs yang akan ditelusuri: Masukan alamat URL (tanpa http://) yang akan ditelusuri pada hasil pencarian. Jika khusus untuk blog pribadi, masukan satu URL alamat blog anda saja.
• Edisi: Jika punya uang, beli saja yang $100 per tahun. Kalau seperti saya, tidak ada pilihan lain kecuali Edisi Standar GRATIS!. Perbedaannya antara limited dan unlimited konfigurasi. Silahkan temukan sendiri perbedaannya.
• Jangan lupa checklist "Saya telah membaca dan menyetujui Persyaratan Layanan"

Integrasi Google Custom Search Engine pada Blogger

<div id="cse" style="width: 100%;">Tunggu Sebentar...</div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">//<![CDATA[
google.load("search", "1", {
 language: "id",
 style : google.loader.themes.V2_DEFAULT
});
google.setOnLoadCallback(function () {
    var c = new google.search.CustomSearchControl("012345678901234567890:mdrcctmncrt", {});
    c.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
    var a = new google.search.DrawOptions;
    a.enableSearchResultsOnly();
    c.draw("cse", a);
    for (var a = {}, e = window.location.search.substr(1).split("&"), d = 0; d < e.length; d++) {
        var b = e[d].split("="),
            f = decodeURIComponent(b[0]);
        a[f] = b[1] ? decodeURIComponent(b[1].replace(/\+/g, " ")) : b[1]
    }
    a.q && c.execute(a.q, null, {
        oq: a.oq,
        aq: a.aq,
        aqi: a.aqi,
        aql: a.aql,
        gs_sm: a.gs_sm,
        gs_upl: a.gs_upl
    })
}, !0);
//]]></script>

012345678901234567890:mdrcctmncrt

<form id="searchform" action="/p/pencarian.html">
 <input id="searchq" name="q" type="search" placeholder="Cari..."/>
 <input class="searchbutton" name="sa" type="submit" value="Go" />
</form>

• action="/p/pencarian.html": ganti /p/pencarian.html dengan URL halaman yang sudah anda buat tadi (lihat A. Halaman Hasil Pencarian)
• name="q": ini tidak bisa di tawar, karena mesin pencari akan menggunakan karakter unik "q" (query) untuk mengeksekusi kata kunci yang dimasukan pada input
• type="submit": ini juga tidak bisa di tawar (bagi yang belum paham form) karena berfungsi untuk mengirimkan kata kunci input pada halaman yang ada pada action
• Sedangkan untuk atribut lainnya silahkan sesuaikan

Template CSS Google Custom Search Engine

style : google.loader.themes.V2_DEFAULT

.gsc-control-cse {
 font-family: Arial, sans-serif;
 border-color: #FFFFFF;
 background-color: #FFFFFF;
}
.gsc-control-cse .gsc-table-result {
 font-family: Arial, sans-serif;
}
input.gsc-input, .gsc-input-box, .gsc-input-box-hover, .gsc-input-box-focus {
 border-color: #D9D9D9;
}
input.gsc-search-button, input.gsc-search-button:hover, input.gsc-search-button:focus {
 border-color: #802020;
 background-color: #660000;
 background-image: none;
}
.gsc-tabHeader.gsc-tabhInactive {
 border-color: #CCCCCC;
 background-color: #FFFFFF;
}
.gsc-tabHeader.gsc-tabhActive {
 border-color: #CCCCCC;
 border-bottom-color: #FFFFFF;
 background-color: #FFFFFF;
}
.gsc-tabsArea {
 border-color: #CCCCCC;
}
.gsc-webResult.gsc-result,
.gsc-results .gsc-imageResult {
 border-color: #FFFFFF;
 background-color: #FFFFFF;
}
.gsc-webResult.gsc-result:hover,
.gsc-imageResult:hover {
 border-color: #EEEEEE;
 background-color: #F9F9F9;
}
.gs-webResult.gs-result a.gs-title:link,
.gs-webResult.gs-result a.gs-title:link b,
.gs-imageResult a.gs-title:link,
.gs-imageResult a.gs-title:link b {
 color: #802020;
}
.gs-webResult.gs-result a.gs-title:visited,
.gs-webResult.gs-result a.gs-title:visited b,
.gs-imageResult a.gs-title:visited,
.gs-imageResult a.gs-title:visited b {
 color: #802020;
}
.gs-webResult.gs-result a.gs-title:hover,
.gs-webResult.gs-result a.gs-title:hover b,
.gs-imageResult a.gs-title:hover,
.gs-imageResult a.gs-title:hover b {
 color: #802020;
}
.gs-webResult.gs-result a.gs-title:active,
.gs-webResult.gs-result a.gs-title:active b,
.gs-imageResult a.gs-title:active,
.gs-imageResult a.gs-title:active b {
 color: #802020;
}
.gsc-cursor-page {
 color: #802020;
}
a.gsc-trailing-more-results:link {
 color: #802020;
}
.gs-webResult .gs-snippet,
.gs-imageResult .gs-snippet,
.gs-fileFormatType {
 color: #000000;
}
.gs-webResult div.gs-visibleUrl,
.gs-imageResult div.gs-visibleUrl {
 color: #666666;
}
.gs-webResult div.gs-visibleUrl-short {
 color: #666666;
}
.gs-webResult div.gs-visibleUrl-short {
 display: none;
}
.gs-webResult div.gs-visibleUrl-long {
 display: block;
}
.gs-promotion div.gs-visibleUrl-short {
 display: block;
}
.gs-promotion div.gs-visibleUrl-long {
 display: none;
}
.gsc-cursor-box {
 border-color: #FFFFFF;
}
.gsc-webResult.gsc-result.gsc-promotion {
 border-color: #F6F6F6;
 background-color: #F6F6F6;
}
.gsc-completion-title {
 color: #802020;
}
.gsc-completion-snippet {
 color: #000000;
}
.gs-promotion a.gs-title:link,
.gs-promotion a.gs-title:link *,
.gs-promotion .gs-snippet a:link {
 color: #1155CC;
}
.gs-promotion a.gs-title:visited,
.gs-promotion a.gs-title:visited *,
.gs-promotion .gs-snippet a:visited {
 color: #1155CC;
}
.gs-promotion a.gs-title:hover,
.gs-promotion a.gs-title:hover *,
.gs-promotion .gs-snippet a:hover {
 color: #1155CC;
}
.gs-promotion a.gs-title:active,
.gs-promotion a.gs-title:active *,
.gs-promotion .gs-snippet a:active {
 color: #1155CC;
}
.gs-promotion .gs-snippet,
.gs-promotion .gs-title .gs-promotion-title-right,
.gs-promotion .gs-title .gs-promotion-title-right *  {
 color: #666666;
}
.gs-promotion .gs-visibleUrl,
.gs-promotion .gs-visibleUrl-short {
 color: #009933;
}

Kesimpulan

• Membuat Mesin Penelusuran Khusus
• Custom Search Help
• Dokumentasi pengembang
• Google Custom Search Engine Blog
• Google Custom Search Engine TOS
• Video Introduction to Google Custom Search

Deskripsi

Mengaktifkan Meta Description

Memeriksa Ketersediaan Meta Description

<meta expr:content='data:blog.metaDescription' name='description'/>

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

<b:if cond='data:blog.metaDescription != &quot;&quot;'>
 <meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>

Memeriksa Meta Description

Video Penggunaan Meta Description

Kesimpulan

• Google Does Not Use Keywords Meta Tag in Web Ranking
• How To "Legally" Hide Words On Your Pages For Search Engines
• Serving Filters
• Meta Tags

Integrasi Widget Cumulus pada Blogger

http://henscripts.googlecode.com/svn/trunk/tag/cumulus.xml

Pengaturan

• Judul Label - Ubah sesuai dengan Judul Gadget.
• Tinggi - Ubahlah sesuai tinggi gadget.
• Tinggi Cloud - Ubah tinggi dalam satuan pixel, harus diperhatikan pula tinggi widget yang anda gunakan.
• Lebar Cloud - Ubah lebar dalam satuan pixel, harus diperhatikan pula lebar widget yang anda gunakan.
• Ukuran Huruf Min - Atur ukuran minimum font dari label, ini akan tampil sebagai label cloud terkecil pada widget.
• Ukuran Huruf Maks - Atur ukuran maksimum font dari label, ini akan tampil sebagai label cloud terbesar pada widget.
• Warna Label Min - Aturlah warna label ukuran terkecil. Warna ini akan mempengaruhi warna huruf terkecil saat rotasi pada widget.
• Warna Label Maks - Aturlah warna label ukuran terbesar. Warna ini akan mempengaruhi warna huruf terbesar saat rotasi pada widget.
• Warna Hover - Aturlah warna yang akan muncul saat mouse hover, warna ini mempengaruhi kotak, huruf dan angka label.
• Kecepatan Rotasi - Mengatur kecepatan perputaran awan.
• Warna Latar - Untuk mengatur warna latar belakang (background) label cloud.
• Mode Transparan - Menetapkan warna latara belakang label cloud yang transparan.
• Tampilkan Penanda - Menunjukkan jumlah label ketika Anda menggeser kursor mouse di atas label.

Kesimpulan

Apa dan Untuk Apa Rich Snippet?

• Tune-Up yang berhubungan dengan blog ini
• Tune-Up yang berhubungan dengan mesin
• Tune-Up yang berhubungan dengan aplikasi

• Rating
• Penulis Ulasan
• Harga
• Sistem Operasi
• Kategori Aplikasi

Manusia Pertama, Mesin Kedua

Kenapa Harus Menambahkan Rich Snippet?

Apa Microformat dan Microdata?

<dl class="vcard">
 <dt class="fn"><a href="http://modification-blog.blogspot.com" class="url">Hendriono</a></dt>
 <dd class="title">Web Desain</dd>
 <dd class="adr"><span class="locality">Ciamis</span>, <abbr title="Jawa Barat" class="region">JABAR</abbr> <span class="postal-code">46383</span></dd>
</dl>

<dl itemscope itemtype="http://schema.org/Person">
 <dt itemprop="name"><a href="http://modification-blog.blogspot.com" itemprop="url">Hendriono</a></dt>
 <dd itemprop="title">Web Desain</dd>
 <dd itemprop="address" itemscope itemtype="http://schema.org/Address">
  <span itemprop="locality">Ciamis</span>, <abbr title="Jawa Barat" itemprop="region">JABAR</abbr> <span itemprop="postal-code">46383</span>
 </dd>
</dl>

• Siapa namanya? Hendriono
• Apa hobinya? Web Desain
• Dimana alamatnya? (Nah, pada pertanyaan ini, kita akan membutuhkan banyak sekali item jawaban, misal; Kabupaten, Propinsi, Kode POS, Nomor Telephone dan lain sebagainya, maka dibutuhkan sebuah kosakata lagi)

<dl class="vcard" itemscope itemtype="http://data-vocabulary.org/Person">
 <dt class="fn" itemprop="name"><a href="http://modification-blog.blogspot.com" itemprop="url">Hendriono</a></dt>
 <dd class="title" itemprop="title">Web Desainer</dd>
 <dd class="adr" itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">
  <span class="locality" itemprop="locality">Ciamis</span>, <abbr title="Jawa Barat" class="region" itemprop="region">JABAR</abbr> <span class="postal-code" itemprop="postal-code">46383</span>
 </dd>
</dl>

Warning Microformat Google Webmaster Rich Snippets

<span class='post-author vcard'>
 <a class='url fn' expr:href='data:post.authorProfileUrl' rel='author' title='author profile'><data:post.author/></a>
</span>

<abbr class='updated published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr>

<h2 class='post-title entry-title'>

• Template baru menggunakan "main" untuk identifikasi global semua artikel (entri)
• Template baru menggunakan "post" untuk identifikasi masing-masing artikel blog
• Template baru menggunakn "post-title" untuk identifikasi judul artikel

Video Rich Snippet dari Google Webmaster

Kesimpulan

DUNIA BLOG kali ini akan berbagi pengetahuan seputar algoritma Google Penguin sebuah algoritma Google yang baru rilis tanggal 24 April 2012 lalu. Algoritma Google Penguin ini menurut pendapat kami (DUNIA BLOG) menjadi semakin ketat dalam hal penerapan ranking suatu blog/website/situs. Tak ayal lagi banyak website/blog yang telah menjadi korban karenanya, sebuah blog yang dahulunya berada di puncak hasil pencarian, sekarang terlempar jauh entah kemana.

• Lakukan update blog secara sistematis dan teratur sesuai dengan skema yang telah anda tetapkan pada bagian template blog.
• Buatlah artikel anda berbeda dengan artikel-artikel yang lainnya walaupun sebenarnya memiliki alur pemikiran yang sama (seandainya terpaksa melakukan copas).
• Jangan sekali-kali mempergunakan black hat seo, karena walau serapat apapun anda menyembunyikannya, pasti akan ketahuan.
• Jangan melakukan tindakan yang menjurus kepada over optimasi blog dan pencarian backlink, karena hal ini pasti akan berdampak tendangan maut oleh Google Penguin.
• Selalu upayakan untuk mendapatkan backlink yang berkualitas dari blog-blog dofollow, karena hal ini akan mempengaruhi posisi SERP blog anda.

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}