Cara dan Info Blogger

(21) X::pseudoElement

p::first-letter {
 float: left;
 font-size: 2em;
 font-weight: bold;
 font-family: cursive;
 padding-right: 2px;
}

p::first-line {
 font-weight: bold;
 font-size: 1.2em;
}

(22) X:nth-child(n)

li:nth-child(2) {
 color: red;
}

(23) X:nth-last-child(n)

li:nth-last-child(2) {
 color: red;
}

(24) X:nth-of-type(n)

ul:nth-of-type(2) {
 border: 1px solid black;
}

(25) X:nth-last-of-type(n)

ul:nth-last-of-type(2) {
 border: 1px solid black;
}

(26) X:first-child

ul li:first-child {
 border-top: none;
}

(27) X:last-child

li:last-child {
 border-bottom: none;
}

(28) X:only-child

div p:only-child {
 color: red;
}

(29) X:only-of-type

li:only-of-type {
 font-weight: bold;
}

(30) X:first-of-type

<div>
    <p>Solusi Pseudo Element :first-of-type</p>
    <ul>
        <li>List Item 1</li>
        <li>List Item 2</li>
    </ul>

    <ul>
        <li>List Item 3</li>
        <li>List Item 4</li>
    </ul>
</div>

ul:first-of-type > li:nth-child(2) {
    font-weight: bold;
}

• ul:first-of-type digunakan untuk menyeleksi ul pertama sesuai dengan tipenya
• Notasi > digunakan untuk memilih langsung turunan dari ul:first-of-type (lihat direct selector)
• li:nth-child(2) digunakan untuk menyeleksi child li ke-dua dihitung dari atas

p + ul li:last-child {
    font-weight: bold;
}

• p + ul digunakan untuk menyeleksi ul yang posisinya tepat dibawah p (lihat adjacent selector)
• li:last-child digunakan untuk menyeleksi li child terakhir

ul:first-of-type li:nth-last-child(1) {
    font-weight: bold;   
}

• ul:first-of-type digunakan untuk menyeleksi ul pertama sesuai dengan tipe-nya (jenisnya atau kelompoknya)
• li:nth-last-child(1) digunakan untuk menyeleksi ul terakhir diurutan pertama yang dihitung dari bawah

Kesimpulan

• The 30 CSS Selectors you Must Memorize - NetTuts+
• CSS Selector - W3
• CSS Selector - W3Schools

(11) X[href="foo"]

a[href="http://modification-blog.blogspot.com"] {
 color: red;
}

(12) X[href*="modif"]

a[href*="modif"] {
 color: red;
}

(13) X[href^="http"]

a[href^="http"] {
 background: url(external/icon.png) no-repeat;
 padding-left: 10px;
}

(14) X[href$=".jpg"]

a[href$=".jpg"] {
 color: red;
}

(15) X[data-*="foo"]

a[data-filetype="image"] {
 color: red;
}

a[href$=".jpg"],
a[href$=".jpeg"],
a[href$=".png"],
a[href$=".gif"] {
 color: red;
}

<a href="path/image.jpg" data-filetype="image">Image Link</a>
<a href="path/image.png" data-filetype="image">Image Link</a>

a[data-filetype="image"] {
 color: red;
}

(16) X[foo~="bar"]

a[data-info~="external"] {
 color: red;
}
a[data-info~="image"] {
 border: 1px solid black;
}

<a href="path/to/image.jpg" data-info="external image">Gambar Eksternal</a>

(17) X:checked

input[type=radio]:checked {
 border: 1px solid black;
}

(18) X:hover

div:hover {
 background: #e3e3e3;
}

a:hover {
 border-bottom: 1px solid green;
}

(19) X:after

.clearfix:after {
 content: "";
 display: block;
 clear: both;
 visibility: hidden;
 font-size: 0;
 height: 0;
}
.clearfix {
 *display: inline-block;
 _height: 1%;
}

(20) X:not(selector)

div:not(#container) {
 color: blue;
}

*:not(p) {
 color: green;
}

Kesimpulan

know:not(#understand){
 error: rewrite;
 often: successful;
}

• The 30 CSS Selectors you Must Memorize - NetTuts+
• CSS Selector - W3
• CSS Selector - W3Schools

(1) *

* {
 margin: 0;
 padding: 0;
}

#container * {
 border: 1px solid black;
}

(2) #X

#container {
 width: 960px;
 margin: auto;
 border: 1px solid #212121;
 background-color: #CCCCCC;
}

(3) .X

.error {
 color: red;
}
.warning {
 border: 1px solid #212121;
}

#container .error {
 color: red;
}
#container .warning {
 border: 1px solid #212121;
}

(4) X Y

li a {
 text-decoration: none;
}

(5) X

a {
 color: red;
}
ul {
 margin-left: 0;
}

a {
 color: red;
}
li a {
 color: blue;
}

(6) X:visited dan X:link

a:link {
 color: red;
}  
a:visited {
 color: blue;
}

(7) X + Y

ul + p {
 color: red;
}

(8) X > Y

#container > ul {
 border: 1px solid black;
}

(9) X ~ Y

ul ~ p {
 color: red;
}

(10) X[title]

a[title] {
 color: green;
}

Kesimpulan

• The 30 CSS Selectors you Must Memorize - NetTuts+
• CSS Selector - W3
• CSS Selector - W3Schools

Deskripsi

Konsep Authorship

Memahami Tag Rel

<a href="https://plus.google.com/12345" rel="author">Hendriono</a>

<a href="http://modification-blog.blogspot.com/" rel="me">Blogger Tune-Up</a>

Ketentuan Authorship

• Halaman blog harus memiliki link tautan menuju halaman Google Plus dengan menyisipkan tag rel="author" pada link tautan tersebut
• Halaman Google Plus harus memiliki link tautan menuju halaman blog dengan menyisipkan tag rel="me" pada link tautan tersebut
• Halaman blog dan halaman Google Plus harus melewati proses otentikasi dengan alamat email yang valid untuk mencegah klaim kepemilikan oleh pihak lain.

Integrasi Tag rel="author" pada Blog

<head>
...
</head>

<link href="https://plus.google.com/ID_Profile" rel="author"/>

Integrasi Tag rel="me" pada Google Plus

Verifikasi Email Author

Pemeriksaan Rich Snippets Authorship

• Photo Profile yang tampil sama dengan yang digunakan pada profile Google Plus yang disertai nama author
• Verified: Authorship markup is verified for this page. Yang berarti bahwa author telah terverifikasi dengan baik

Kesimpulan

• Microformats rel author
• Author information in search results

Deskripsi

Lokasi CDN jQuery

https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js

http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.js
http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js

http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js

http://code.jquery.com/jquery.min.js
http://code.jquery.com/jquery.js

http://yandex.st/jquery/1.7.2/jquery.js
http://yandex.st/jquery/1.7.2/jquery.min.js

• CDN Google rata-rata waktu load 228ms
• CDN jQuery rata-rata waktu load 439ms
• CDN-JS rata-rata waktu load 340ms
• CDN Yandex rata-rata waktu load 575ms
• CDN Microsoft rata-rata waktu load 334ms

Integrasi jQuery CDN Failover

Direct CDN Failover (CDN Failover Langsung)

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript"> 
if (jQuery) {  
 // jika jQuery berhasil di-load maka fungsi disini akan dijalankan...
} else {
 // jika jQuery gagal di-load, maka framework akan dialihkan ke lokal...
 document.write('script type="text/javascript" src="/local/jquery-1.7.2.min.js"><\/script>');
}
</script>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript"> 
if (typeof jQuery == 'undefined') {  
    // jika jQuery gagal di-load, maka framework akan dialihkan ke lokal...
 document.write('script type="text/javascript" src="/local/jquery-1.7.2.min.js"><\/script>'); 
} else {
    // jika jQuery berhasil di-load maka fungsi disini akan dijalankan...
}
</script>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">  
 if (typeof jQuery === 'undefined') {  
    var e = document.createElement('script');  
    e.src = '/local/jquery-1.7.2.min.js';  
    e.type='text/javascript';  
    document.getElementsByTagName("head")[0].appendChild(e);  
 }
</script>

Indirect CDN Failover (CDN Failover Tidak Langsung)

<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.5.3/modernizr.min.js"></script>
<script type="text/javascript">
Modernizr.load([
 {
  load: 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js',
  complete: function () {
   if (!window.jQuery) {
    Modernizr.load('/local/jquery-1.7.2.min.js');
   }
  }
 }
]);
</script>

<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.5.3/modernizr.min.js"></script>
<script type="text/javascript">
$LAB.script("http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js").wait(function () {
    if (typeof window.jQuery === "undefined") {
        $LAB.script("/local/jquery-1.7.2.min.js");
    }
});
</script>

Kesimpulan

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