Tooltip Kustom Otomatis untuk Semua Tautan

<script>
//<![CDATA[
// Pure JavaScript Nested Tooltip Replacement for all Anchor Tag
// https://plus.google.com/108949996304093815163/about
(function() {

    var a = document.getElementsByTagName('a');
    var t = document.createElement('span');
        t.id = "tt";
        t.style.position = "absolute";
        t.style.zIndex = 999;
        t.style.backgroundColor = "#FFE13F";
        t.style.border = "1px solid #BC5F05";
        t.style.font = "bold 11px Tahoma,Arial,Sans-Serif";
        t.style.boxShadow = "0 1px 3px rgba(0,0,0,0.4)";
        t.style.padding = "5px 10px";
        t.style.color = "#000";
        t.style.maxWidth = "170px";
        t.style.wordWrap = "break-word";
        t.style.display = "none";
    document.body.appendChild(t);
    var tooltip = document.getElementById('tt');

    function over(e) {
        tooltip.style.display = "block";
        tooltip.innerHTML = this.title;
        tooltip.style.top = (e.pageY + 25) + 'px';
        tooltip.style.left = e.pageX + 'px';
        this.setAttribute('original', this.title);
        this.title = "";

    }

    function out() {
        tooltip.innerHTML = "";
        tooltip.style.display = "none";
        this.title = this.getAttribute('original');
        this.removeAttribute('original');
    }

    for (var i = 0; i < a.length; i++) {
        if (a[i].title) {
            a[i].onmouseover = over;
            a[i].onmouseout = out;
        }
    }

})();
//]]>
</script>

Salin kodenya dan letakkan di atas tag </body>

Demo

CSS3 Kolom

Sebelum CSS3, kita biasanya membuat layout kolom dengan bantuan CSS Float atau sistem grid. Tapi saat ini kita bisa menggunakan CSS untuk membelah paragraf menjadi kolom-kolom. Meskipun fiturnya masih terbatas, yaitu hanya bisa membelah, menentukan jarak antar kolom dan memberi garis pemisah, tapi secara keseluruhan, CSS kolom sudah bisa dikatakan sangat membantu terutama karena kemampuannya dalam mengisi setiap kolom dengan jumlah teks yang sama rata.

Sintaks CSS Kolom

p {
  -webkit-column-count:3; /* Chrome & Safari */
  -moz-column-count:3; /* Firefox */
  column-count:3; /* Standar CSS3 & Opera */
}

Kode di atas akan membelah paragraf menjadi tiga buah kolom sama besar.

Properti CSS kolom pada peramban Opera sudah mengikuti standar CSS3 dan tidak memerlukan prefiks -o- seperti pada umumnya. Sampai saat ini Internet Explorer masih belum mendukung CSS Kolom.

Lihat Demo

Jarak dan Pembatas

Selain menentukan jumlah kolom, CSS kolom juga bisa menentukan jarak antar kolom dan juga mengatur garis pembatas antar kolom. Berikut ini adalah contoh cara menentukan jarak antar kolom sebesar 100px:

p {
  -webkit-column-gap:100px;
  -moz-column-gap:100px;
  column-gap:100px;
}

Lihat Demo

Untuk menciptakan garis pembatas antar kolom, kita menggunakan properti column-rule yang pada dasarnya memiliki cara kerja sama persis dengan properti border:

p {
  -webkit-column-rule:5px solid #ccc;
  -moz-column-rule:5px solid #ccc;
  column-rule:5px solid #ccc;
}

Dan seperti halnya properti border, mereka juga bisa dibagi kembali menjadi tiga properti yang terpisah:

/* column-rule:column-rule-width column-rule-style column-rule-color; */
p {
  -webkit-column-rule-width:5px;
  -moz-column-rule-width:5px;
  column-rule-width:5px;
  -webkit-column-rule-style:solid;
  -moz-column-rule-style:solid;
  column-rule-style:solid;
  -webkit-column-rule-color:#ccc;
  -moz-column-rule-color:#ccc;
  column-rule-color:#ccc;
}

Lihat Demo

Membuatnya Menjadi Responsif

Meskipun CSS Kolom akan secara otomatis menyesuaikan lebar masing-masing kolom dengan ukuran lebar elemen pembungkus seperti halnya saat kita menggunakan satuan persentase, tapi saat ukuran layar menyempit, kolom-kolom di dalamnya juga akan ikut menyempit dan membuat kalimat-kalimat di dalamnya menjadi sulit untuk dibaca. Untuk menyiasatinya, kita bisa menggunakan media queries dan mengurangi jumlah kolom ketika ukuran layar sedang berada pada ukuran lebar tertentu:

/* Ubah jumlah kolom menjadi 2 saat lebar layar maksimal berada pada 800 piksel */
@media screen and (max-width:800px) {
  p {
    -webkit-column-count:2;
    -moz-column-count:2;
    column-count:2;
  }
}

/* Satukan semua kolom saat lebar layar maksimal berada pada 600 piksel */
@media screen and (max-width:600px) {
  p {
    -webkit-column-count:auto;
    -moz-column-count:auto;
    column-count:auto;
  }
}

Lihat Demo

Lebar Kolom Tetap

CSS Kolom juga memungkinkan Anda untuk menciptakan kolom-kolom dengan lebar yang tetap, yaitu dengan menggunakan properti column-width:

p {
  -webkit-column-width:150px;
  -moz-column-width:150px;
  column-width:150px;
}

Cara kerja properti ini adalah dia akan menciptakan kolom sebanyak mungkin dengan lebar masing-masing kolom sebesar 150 piksel (berdasarkan contoh di atas) selama masih ada ruang yang tersisa di sebelahnya.

Anda tidak perlu mendeklarasikan properti column-count jika Anda telah menggunakan properti ini. Jumlah kolom akan menyesuaikan diri terhadap lebar area yang tersisa. Untuk penerapan yang lebih mendetail bisa Anda baca di halaman ini ⇒ Efek Masonry Hanya dengan CSS

Pure CSS3 Toggle Checkbox

Terinspirasi dari karya UmbrUI oleh Simurai. Yang ini adalah versi cross browser:

HTML

<span class="toggle">
    <input type="checkbox">
    <label data-off="&#10006;" data-on="&#10004;"></label>
</span>

<span class="toggle">
    <input type="checkbox">
    <label data-off="&#9724;" data-on="&#9654;"></label>
</span>

<span class="toggle">
    <input type="checkbox">
    <label data-off="Stop" data-on="Play"></label>
</span>

CSS

.toggle {
  position:relative;
  display:inline-block;
  width:40px;
  height:60px;
  background-color:#bbb;
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
  text-align:center;
}

.toggle input {
  width:100%;
  height:100%;
  margin:0 0;
  padding:0 0;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:2;
  cursor:pointer;
  opacity:0;
}

.toggle label {
  display:block;
  position:absolute;
  top:1px;
  right:1px;
  bottom:1px;
  left:1px;
  background-image:-webkit-linear-gradient(top,#fff 0%,#ddd 50%,#fff 50%,#eee 100%);
  background-image:-moz-linear-gradient(top,#fff 0%,#ddd 50%,#fff 50%,#eee 100%);
  background-image:-ms-linear-gradient(top,#fff 0%,#ddd 50%,#fff 50%,#eee 100%);
  background-image:-o-linear-gradient(top,#fff 0%,#ddd 50%,#fff 50%,#eee 100%);
  background-image:linear-gradient(top,#fff 0%,#ddd 50%,#fff 50%,#eee 100%);
  -webkit-box-shadow:0 2px 3px rgba(0,0,0,0.4),
    inset 0 -1px 1px #888,
    inset 0 -5px 1px #bbb,
    inset 0 -6px 0 white;
  -moz-box-shadow:0 2px 3px rgba(0,0,0,0.4),
    inset 0 -1px 1px #888,
    inset 0 -5px 1px #bbb,
    inset 0 -6px 0 white;
  box-shadow:0 2px 3px rgba(0,0,0,0.4),
    inset 0 -1px 1px #888,
    inset 0 -5px 1px #bbb,
    inset 0 -6px 0 white;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
  font:normal 11px Arial,Sans-Serif;
  color:#666;
  text-shadow:0 1px 0 white;
  cursor:text;
}

.toggle label:before {
  content:attr(data-off);
  position:absolute;
  top:6px;
  right:0;
  left:0;
  z-index:4;
}

.toggle label:after {
  content:attr(data-on);
  position:absolute;
  right:0;
  bottom:11px;
  left:0;
  color:#666;
  text-shadow:0 -1px 0 #eee;
}

.toggle input:checked + label {
  background-image:-webkit-linear-gradient(top,#eee 0%,#ccc 50%,#fff 50%,#eee 100%);
  background-image:-moz-linear-gradient(top,#eee 0%,#ccc 50%,#fff 50%,#eee 100%);
  background-image:-ms-linear-gradient(top,#eee 0%,#ccc 50%,#fff 50%,#eee 100%);
  background-image:-o-linear-gradient(top,#eee 0%,#ccc 50%,#fff 50%,#eee 100%);
  background-image:linear-gradient(top,#eee 0%,#ccc 50%,#fff 50%,#eee 100%);
  -webkit-box-shadow:0 0 1px rgba(0,0,0,0.4),
    inset 0 1px 7px -1px #ccc,
    inset 0 5px 1px #fafafa,
    inset 0 6px 0 white;
  -moz-box-shadow:0 0 1px rgba(0,0,0,0.4),
    inset 0 1px 7px -1px #ccc,
    inset 0 5px 1px #fafafa,
    inset 0 6px 0 white;
  box-shadow:0 0 1px rgba(0,0,0,0.4),
    inset 0 1px 7px -1px #ccc,
    inset 0 5px 1px #fafafa,
    inset 0 6px 0 white;
}

.toggle input:checked:hover + label {
  -webkit-box-shadow:0 1px 3px rgba(0,0,0,0.4),
    inset 0 1px 7px -1px #ccc,
    inset 0 5px 1px #fafafa,
    inset 0 6px 0 white;
  -moz-box-shadow:0 1px 3px rgba(0,0,0,0.4),
    inset 0 1px 7px -1px #ccc,
    inset 0 5px 1px #fafafa,
    inset 0 6px 0 white;
  box-shadow:0 1px 3px rgba(0,0,0,0.4),
    inset 0 1px 7px -1px #ccc,
    inset 0 5px 1px #fafafa,
    inset 0 6px 0 white;
}

.toggle input:checked + label:before {
  z-index:1;
  top:11px;
}

.toggle input:checked + label:after {
  bottom:9px;
  color:#aaa;
  text-shadow:none;
  z-index:4;
}

Demo

Membuat Komentar Slide Panel pada Template Blogspot

Menerapkan jQuery Slide Panel pada Komentar Blogger

Meskipun sudah cukup banyak tutorial mengenai ini, tapi Saya hanya ingin menunjukkan bahwa ada satu cara yang lebih mudah untuk melakukan ini. Anda tidak perlu membongkar struktur template secara keseluruhan hanya untuk menambahkan elemen lain, biarkan jQuery yang mencarinya dan menyisipkan elemen-elemen yang kita butuhkan (dalam hal ini adalah tombol/pemicu panel):

Lihat Demo

Pertama-tama masuklah ke halaman editor HTML templat Anda kemudian temukan kode ini:

]]></b:skin>

Salin kode ini dan letakkan di atasnya:

a.openpanel {
  display:block;
  clear:both;
  width:auto;
  padding:0;
  margin:0;
  text-align:center;
  font-weight:bold;
  line-height:32px;
  background-color:#39f;
  color:white;
  text-decoration:none;
  -webkit-box-shadow:0 1px 1px rgba(0,0,0,.2);
  -moz-box-shadow:0 1px 1px rgba(0,0,0,.2);
  box-shadow:0 1px 1px rgba(0,0,0,.2);
  position:relative;
}

a.openpanel em {
  display:block;
  width:0;
  height:0;
  position:absolute;
  top:15px;
  right:15px;
  border:6px solid transparent;
  border-top-color:white;
}

a.openpanel.active {background-color:#900}

a.openpanel.active em {
  top:6px;
  border-color:transparent transparent white transparent;
}

div.paneline {
  height:0;
  border-bottom:4px solid #39b;
}

div.hompiPanel {
  padding:10px 20px 20px;
  -webkit-box-shadow:inset 0 1px 7px rgba(0,0,0,.2);
  -moz-box-shadow:inset 0 1px 7px rgba(0,0,0,.2);
  box-shadow:inset 0 1px 7px rgba(0,0,0,.2);
  margin:0 !important;
}

Kemudian temukan kode ini:

</head>

Salin kode ini dan letakkan di atasnya:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script><script>
//<![CDATA[
var panelSelector = '#comments',
    openPanelText = "Poskan Komentar",
    closePanelText = "Tutup Komentar",
    slideDownPanelSpeed = 600,
    slideUpPanelSpeed = 400;
//]]>
</script>
<script src='http://dte-project.googlecode.com/svn/trunk/blogger-slide-panel-comments.js'></script>

Ingat, kode yang Saya beri garis bawah adalah jQuery. Jika templat Anda sudah dilengkapi dengan jQuery, singkirkan kode tersebut!

Klik Simpan Template.

Sudah, begitu saja.

---

Lebih Jauh Lagi

Berikut ini adalah isi dari skrip blogger-slide-panel-comments.js:

jQuery(function() {
    jQuery(panelSelector).hide()
        .addClass('hompiPanel')
            .before('<a class="openpanel" href="#">' + openPanelText + '<em></em></a>')
                .after('<div class="paneline"></div>');
    jQuery('a.openpanel').toggle(function() {
        jQuery(this).addClass('active').html(closePanelText + '<em></em>');
        jQuery('div.hompiPanel').slideDown(slideDownPanelSpeed);
        return false;
    }, function() {
        jQuery(this).removeClass('active').html(openPanelText + '<em></em>');
        jQuery('div.hompiPanel').slideUp(slideUpPanelSpeed);
        return false;
    });
});

Isinya sangat sedikit. Karena fungsi dari skrip ini memang hanya untuk mencari elemen #comments, kemudian setelah jQuery menemukannya maka dia akan menyisipkan elemen a.openpanel sebelum #comments dan elemen div.paneline setelah #comments:

jQuery(panelSelector).hide() // Menyembunyikan elemen panelSelector (dalam hal ini adalah "#comments")
    // Tambahkan class="hompiPanel" (untuk membuatnya menjadi lebih spesifik)
    .addClass('hompiPanel')
        // Sisipkan elemen a.openpanel sebelum panelSelector
        .before('<a class="openpanel" href="#">' + openPanelText + '<em></em></a>')
            // Sisipkan elemen div.paneline setelah panelSelector (sekedar hiasan saja)
            .after('<div class="paneline"></div>');

Setelah itu barulah aksi animasi bisa dilakukan. Di sini Saya menggunakan event .toggle() (pelajari di sini):

jQuery('a.openpanel').toggle(function() {
    jQuery(this).addClass('active').html(closePanelText + '<em></em>');
    jQuery('div.hompiPanel').slideDown(slideDownPanelSpeed);
    return false;
}, function() {
    jQuery(this).removeClass('active').text(openPanelText + '<em></em>');
    jQuery('div.hompiPanel').slideUp(slideUpPanelSpeed);
    return false;
});

Tentukan label tombol pada saat panel tertutup pada variabel openPanelText, lalu tentukan juga label tombol saat panel sedang terbuka pada variabel closePanelText.

Tentukan kecepatan efek .slideDown() pada variabel slideDownPanelSpeed dan kecepatan efek .slideUp() pada variabel slideUpPanelSpeed.

panelSelector adalah variabel untuk menentukan target yang akan dijadikan elemen panel. Sekali-kali cobalah untuk mengubah nilai "#comments" menjadi "#comment-editor" atau "div.post" dan lihat apa yang akan terjadi!

Menambahkan Nomor Urut pada Daftar Komentar

Di antara beberapa kelebihan yang terdapat di dalam fitur komentar Blogger versi sekarang sebenarnya masih ada satu kekurangan besar, yaitu hilangnya keleluasaan kita dalam mengedit kode, berbeda dengan fitur komentar versi lama yang bisa diedit sesuka hati. Berikut ini adalah kode XML dalam fitur komentar Blogger versi sekarang:

<div class='comments-content'>
  <b:if cond='data:post.embedCommentForm'>
    <b:include data='post' name='threaded_comment_js'/>
  </b:if>
  <div id='comment-holder'><data:post.commentHtml/>  </div>
</div>

Kode yang Saya beri tanda adalah paket kerangka daftar komentar versi sekarang. Itu adalah tag khusus untuk mewakili semua konten komentar di dalamnya, yang merupakan baris-baris elemen <ol> dan <li>. Sangat ringkas dan tidak bisa diedit. Tidak bisa memodifikasi avatar, tidak bisa memodifikasi komentar admin dan lain-lain. Termasuk menambahkan nomor urut komentator dengan JavaScript yang dulu bisa kita lakukan dengan mudah, sekarang sudah tidak lagi bisa kita lakukan.

Saat ini kita tidak bisa menggunakan JavaScript untuk memodifikasi ini. Jadi kita akan menggunakan CSS Counter.

Salin kode ini dan letakkan di atas ]]></b:skin> atau </style>:

/*!
 * Menambahkan nomor urut pada thread comment blogspot versi baru
 * https://plus.google.com/108949996304093815163/about
 */

.comments {counter-reset:number}

.comments .comment {
  position:relative;
  counter-increment:number;
}

.comments .comment-content {margin-right:50px !important}

.comments .comment:after {
  content:counter(number);
  display:block;
  width:40px;
  height:40px;
  text-align:center;
  font:italic normal 20px/40px "Times New Roman",Times,Serif;
  color:#ccc;
  position:absolute;
  top:10px;
  right:10px;
  -webkit-border-radius:100%;
  -moz-border-radius:100%;
  border-radius:100%;
  border:4px solid #3c3c3c;
  background-color:#333;
  -webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.7);
  -moz-box-shadow:inset 0 1px 2px rgba(0,0,0,.7);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.7);
}

.comments .comment .comment-thread.inline-thread {counter-reset:number}

.comments .comment .comment-thread.inline-thread .comment:after {
  font-size:18px;
  line-height:30px;
  width:30px;
  height:30px;
}

.comments .comment:hover:after {
  background-color:#600;
  border-color:#900;
  color:white;
}

Klik Simpan Template.

Lihat Demo

Beberapa Pola Regex Bermanfaat

// email:
    /^([^0-9\.\+])([\w.\+])+\@(([\w\-])+\.)+[a-zA-Z0-9]{2,}/
// url:
    /^(http:\/\/)([\w]+\.){1,}[A-Z]{2,}\b/gi
// creditcard:
    /^[0-9]{16}$/gi
// ccspecial:
    /^[0-9]{12}$/gi
// cvv:
    /^[0-9]{3,4}$/gi
// phone:
    /^[0-9]{10}$/gi
// postcode:
    /^[0-9]{4}$/gi
// numeric:
    /^[0-9]+$/gi
// alphanumeric:
    /^[0-9a-f\-\s]+$/gi
// dob:
    /^([0-9]{1,2}[\/]){2}[0-9]{4}$/g
// macAddress:
    /^([0-9a-fA-F]{2}[:-]){5}[0-9a-fA-F]{2}$/gi
// username:
    /^[a-z0-9\-_\.]{6,12}$/gi
// names:
    /^[a-z\.\-\s\']{1,}$/gi
// nonalpha:
    /[^A-Za-z]+/g
// nonalphanumeric:
    /[^A-Za-z0-9]+/g
// nonnumeric:
    /[^0-9\-\.]/g
// nonnumericExplicit:
    /[^0-9]/g

Sumber: Snipt – Some JS Regexes

Widget Recent Post dengan Preloader

Widget Recent Post dengan Preloader

Memperkenalkan widget recent post dengan konsep preloader untuk menangani proses pemuatan halaman yang terlalu berat. Secara teknis, widget ini hanya akan memulai pemuatan konten setelah mencapai waktu yang telah ditentukan:

Lihat Demo

Tambahkan sebuah elemen halaman HTML/JavaScript, kemudian salin kode ini dan letakkan di dalam formulirnya:

<style scoped="scoped">
#dte_recent-post {
  font:normal normal 11px/normal Helmet,Freesans,Sans-Serif;
  color:#333;
  margin:0 auto;
  padding:0;
  min-height:100px;
  background:white url('data:image/gif;base64,R0lGODlhEAAQAPYAAP///wAAANTU1JSUlGBgYEBAQERERG5ubqKiotzc3KSkpCQkJCgoKDAwMDY2Nj4+Pmpqarq6uhwcHHJycuzs7O7u7sLCwoqKilBQUF5eXr6+vtDQ0Do6OhYWFoyMjKqqqlxcXHx8fOLi4oaGhg4ODmhoaJycnGZmZra2tkZGRgoKCrCwsJaWlhgYGAYGBujo6PT09Hh4eISEhPb29oKCgqioqPr6+vz8/MDAwMrKyvj4+NbW1q6urvDw8NLS0uTk5N7e3s7OzsbGxry8vODg4NjY2PLy8tra2np6erS0tLKyskxMTFJSUlpaWmJiYkJCQjw8PMTExHZ2djIyMurq6ioqKo6OjlhYWCwsLB4eHqCgoE5OThISEoiIiGRkZDQ0NMjIyMzMzObm5ri4uH5+fpKSkp6enlZWVpCQkEpKSkhISCIiIqamphAQEAwMDKysrAQEBJqamiYmJhQUFDg4OHR0dC4uLggICHBwcCAgIFRUVGxsbICAgAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAAHjYAAgoOEhYUbIykthoUIHCQqLoI2OjeFCgsdJSsvgjcwPTaDAgYSHoY2FBSWAAMLE4wAPT89ggQMEbEzQD+CBQ0UsQA7RYIGDhWxN0E+ggcPFrEUQjuCCAYXsT5DRIIJEBgfhjsrFkaDERkgJhswMwk4CDzdhBohJwcxNB4sPAmMIlCwkOGhRo5gwhIGAgAh+QQJCgAAACwAAAAAEAAQAAAHjIAAgoOEhYU7A1dYDFtdG4YAPBhVC1ktXCRfJoVKT1NIERRUSl4qXIRHBFCbhTKFCgYjkII3g0hLUbMAOjaCBEw9ukZGgidNxLMUFYIXTkGzOmLLAEkQCLNUQMEAPxdSGoYvAkS9gjkyNEkJOjovRWAb04NBJlYsWh9KQ2FUkFQ5SWqsEJIAhq6DAAIBACH5BAkKAAAALAAAAAAQABAAAAeJgACCg4SFhQkKE2kGXiwChgBDB0sGDw4NDGpshTheZ2hRFRVDUmsMCIMiZE48hmgtUBuCYxBmkAAQbV2CLBM+t0puaoIySDC3VC4tgh40M7eFNRdH0IRgZUO3NjqDFB9mv4U6Pc+DRzUfQVQ3NzAULxU2hUBDKENCQTtAL9yGRgkbcvggEq9atUAAIfkECQoAAAAsAAAAABAAEAAAB4+AAIKDhIWFPygeEE4hbEeGADkXBycZZ1tqTkqFQSNIbBtGPUJdD088g1QmMjiGZl9MO4I5ViiQAEgMA4JKLAm3EWtXgmxmOrcUElWCb2zHkFQdcoIWPGK3Sm1LgkcoPrdOKiOCRmA4IpBwDUGDL2A5IjCCN/QAcYUURQIJIlQ9MzZu6aAgRgwFGAFvKRwUCAAh+QQJCgAAACwAAAAAEAAQAAAHjIAAgoOEhYUUYW9lHiYRP4YACStxZRc0SBMyFoVEPAoWQDMzAgolEBqDRjg8O4ZKIBNAgkBjG5AAZVtsgj44VLdCanWCYUI3txUPS7xBx5AVDgazAjC3Q3ZeghUJv5B1cgOCNmI/1YUeWSkCgzNUFDODKydzCwqFNkYwOoIubnQIt244MzDC1q2DggIBACH5BAkKAAAALAAAAAAQABAAAAeJgACCg4SFhTBAOSgrEUEUhgBUQThjSh8IcQo+hRUbYEdUNjoiGlZWQYM2QD4vhkI0ZWKCPQmtkG9SEYJURDOQAD4HaLuyv0ZeB4IVj8ZNJ4IwRje/QkxkgjYz05BdamyDN9uFJg9OR4YEK1RUYzFTT0qGdnduXC1Zchg8kEEjaQsMzpTZ8avgoEAAIfkECQoAAAAsAAAAABAAEAAAB4iAAIKDhIWFNz0/Oz47IjCGADpURAkCQUI4USKFNhUvFTMANxU7KElAhDA9OoZHH0oVgjczrJBRZkGyNpCCRCw8vIUzHmXBhDM0HoIGLsCQAjEmgjIqXrxaBxGCGw5cF4Y8TnybglprLXhjFBUWVnpeOIUIT3lydg4PantDz2UZDwYOIEhgzFggACH5BAkKAAAALAAAAAAQABAAAAeLgACCg4SFhjc6RhUVRjaGgzYzRhRiREQ9hSaGOhRFOxSDQQ0uj1RBPjOCIypOjwAJFkSCSyQrrhRDOYILXFSuNkpjggwtvo86H7YAZ1korkRaEYJlC3WuESxBggJLWHGGFhcIxgBvUHQyUT1GQWwhFxuFKyBPakxNXgceYY9HCDEZTlxA8cOVwUGBAAA7AAAAAAAAAAAA') no-repeat 50% 50%;
}

#dte_recent-post li {
  list-style:none;
  margin:0;
  padding:7px;
  background-color:white;
  border-bottom:1px solid #ddd;
}

#dte_recent-post li a img {
  float:left;
  margin:0 10px 0 0;
  padding:0;
  border:none;
  background:none;
  outline:none;
}

#dte_recent-post li a.title {
  display:block;
  font-size:12px;
  text-decoration:none;
  color:#1155CC;
}

#dte_recent-post li a.title:hover {
  text-decoration:underline;
}

#dte_recent-post li span.foot {
  clear:both;
  display:block;
  color:#ccc;
  margin-top:7px;
  font-size:10px;
}
</style>
<ul id="dte_recent-post"></ul>
<script>
//<![CDATA[
var rp_homePage = "http://nama_blog.blogspot.com", // Your blog homepage
    rp_numPosts = 5, // How many posts?
    rp_thumbWidth = 72, // Thumbnail width. Change to 0 if you want to disable the post thumbnail
    rp_numChars = 100, // Number of posts summary
    rp_sortByLabel = false, // Replace `false` with your specific label name to display posts by specific label
                            // Example: rp_sortByLabel = "jQuery", to sort posts by label "jQuery"
    rp_noImage = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC", // A 'no-image' image
    rp_monthNames = [
        "Januari",
        "Februari",
        "Maret",
        "April",
        "Mei",
        "Juni",
        "Juli",
        "Agustus",
        "September",
        "Oktober",
        "November",
        "Desember"
    ],
    rp_newTabLink = true, // If true, then all the widget links will automatically opens in new window/new tab
    rp_loadTimer = "onload"; // "onload" || time in milliseconds (e.g: 3000, 4000, ...)
//]]>
</script>
<script src="//tovic.github.io/dte-project/blogger-recent-post-with-preloader.js"></script>

Konfigurasi Widget

Opsi	Keterangan
rp_homePage	Ganti dengan URL blog Anda.
rp_numPosts	Digunakan untuk menentukan jumlah posting yang akan ditampilkan.
rp_thumbWidth	Digunakan untuk menentukan lebar thumbnail. Ubah lebarnya menjadi 0 untuk menghilangkan thumbnail.
rp_numChars	Digunakan untuk menentukan jumlah karakter ringkasan posting.
rp_sortByLabel	Ganti nilai false menjadi nama label untuk menampilkan posting berdasarkan label yang spesifik. Contoh: rp_sortByLabel = "jQuery" akan menampilkan semua posting dengan label jQuery.
rp_noImage	Thumbnail cadangan jika posting yang tampil dalam widget tidak memiliki gambar.
rp_monthNames	Tentukan nama-nama bulan sesuai dengan sistem penanggalan di negara Anda.
rp_newTabLink	Jika bernilai true, maka semua tautan dalam widget akan terbuka di tab/jendela baru saat diklik.
rp_loadTimer	Digunakan untuk menentukan seberapa lama widget akan menunda proses pemuatan sebelum akhirnya mulai memuat. Secara normal bernilai "onload". Artinya bahwa widget akan memuat setelah semua elemen halaman telah berhasil termuat. Anda juga bisa mengganti nilainya dengan satuan waktu milidetik untuk menunda waktu pemuatan selama beberapa detik ke depan. Contoh: rp_loadTimer = 3000 akan menunda pemuatan JSON selama 3 detik.

Plugin jQuery Paralaks Sederhana

Plugin Parallax Sederhana

Terbiasa menggunakan plugin paralax dari luar untuk menciptakan efek paralax? Jangan terlalu bergantung dengan itu, terutama jika proyek yang sedang Anda kerjakan hanya berupa proyek pembuatan efek paralaks kecil, misalnya seperti di header situs GitHub atau sekedar ingin menciptakan efek tiga dimensi dengan JavaScript. Saya sudah membuat versi plugin yang paling sederhana. Semoga bermanfaat:

// Simple parallax plugin by Taufik Nurrohman
// https://plus.google.com/108949996304093815163/about
(function($) {
    $.fn.paralax = function(container, speed) {
        var $window = container,
            t = speed || 1,
            $object = this;
        return $window.on("mousemove resize", function(e) {
            $object.css({
                top: -(e.pageY-$window.height()/2-$window.offset().top)*t+$window.height()/2,
                left: -(e.pageX-$window.width()/2-$window.offset().left)*t+$window.width()/2
            });
        });
    };
})(jQuery);

Penggunaan

Setiap elemen paralaks setidaknya memerlukan satu buah elemen kontainer dan beberapa layer di dalamnya:

<div id="container">
    <div id="layer-1">Konten...</div>
    <div id="layer-2">Konten...</div>
    <div id="layer-3">Konten...</div>
</div>

Untuk menciptakan efek yang bagus, usahakan agar layer-layer yang berada di dalamnya memiliki ukuran yang lebih luas dibandingkan kontainernya, dan setiap layer setidaknya harus memiliki deklarasi CSS posisi relatif atau absolut. Posisikan layer-layer di dalamnya agar tepat berada di tengah kontainer. Caranya? Pelajari di sini.

#container {
  display:block;
  width:80%;
  height:100%;
  background-color:black;
  margin:0 auto;
  position:relative;
  overflow:hidden;
}

/* Posisi elemen di tengah secara vertikal dan horizontal: pelajari di sini! */
#container div {
  width:1000px;
  height:1000px;
  position:absolute;
  top:50%;
  left:50%;
  margin-top:-500px;
  margin-left:-500px;
  text-align:center;
  cursor:default;
}

#layer-1 {}
#layer-2 {}
#layer-3 {}

Eksekusi Plugin

Seleksi setiap layer di dalam kontainer dengan jQuery kemudian terapkan method .paralax(). Tentukan kontainer dan kecepatannya di dalam:

// $(layer).paralax($(container), speed);
$('#layer-1').paralax($('#container'), 1);

Kecepatan normalnya adalah 1. Perbesar nilainya untuk mempercepat gerakan. Sebagai contoh, di sini Saya menerapkan beberapa layer dengan kecepatan yang berbeda-beda untuk menciptakan efek tiga dimensi:

var area = $('#container');
$('#layer-1').paralax(area, 1);
$('#layer-2').paralax(area, 2);
$('#layer-3').paralax(area, 3);

Lihat Demo

Update 20 February 2013: LOL. It should be “parallax”, not “paralax” :D

Auto Rotating Slideshow

<style>
#slideshow {
  width:200px;
  height:100px;
  background-color:#222;
  margin:0 auto;
}

#slideshow img {display:block;}
</style>
<div id="slideshow"></div>
<script>
//<![CDATA[
(function() {
    var container = document.getElementById('slideshow');
    var slide = [
        "images/slide-1.jpg",
        "images/slide-2.jpg",
        "images/slide-3.jpg",
        "images/slide-4.jpg"
		// dst...
        ];
    var count = 0;
    setInterval(function() {
        container.innerHTML = "<img src='"+slide[count]+"' alt='Slide "+(count+1)+"'>";
        count++;
        if (count == slide.length) {
            count = 0;
        }
    }, 3000); // Tiga detik sekali...
})();
//]]>
</script>

Demo

CSS3 Accordion

Kerangka dasar untuk menciptakan elemen akordion dan panel toggle hanya dengan CSS:

HTML

<div class="accordion">
    <input type="checkbox">
    <label>Lorem Ipsum</label>
    <div>Content...</div>
    <input type="checkbox">
    <label>Lorem Ipsum</label>
    <div>Content...</div>
    <input type="checkbox">
    <label>Lorem Ipsum</label>
    <div>Content...</div>
    <input type="checkbox">
    <label>Lorem Ipsum</label>
    <div>Content...</div>
</div>

<div class="accordion">
    <input type="radio" name="a" checked="true">
    <label>Lorem Ipsum</label>
    <div>Content...</div>
    <input type="radio" name="a">
    <label>Lorem Ipsum</label>
    <div>Content...</div>
    <input type="radio" name="a">
    <label>Lorem Ipsum</label>
    <div>Content...</div>
    <input type="radio" name="a">
    <label>Lorem Ipsum</label>
    <div>Content...</div>
</div>

CSS

.accordion {
  position:relative;
  background-color:white;
}

.accordion > input {
  display:block;
  margin:0 0;
  width:100%;
  height:30px;
  position:relative;
  cursor:pointer;
  opacity:0;
  filter:alpha(opacity=0);
}

.accordion > label {
  display:block;
  font:normal bold 12px/30px Arial,Sans-Serif;
  background-color:black;
  color:white;
  margin:-30px 0 0 0;
  padding:0 15px;
}

.accordion > div {
  padding:10px 15px;
  display:none;
}

.accordion > input:checked + label {
  background-color:darkblue;
}

.accordion > input:checked + label + div {
  display:block;
}

Demo

Lihat Demo

Memberi Tanda Pada Menu Berdasarkan Halaman yang Sedang Aktif

Menu berubah warna pada halaman About.

Dulu Saya pernah menuliskan potongan kode untuk menandai menu berdasarkan URL pada address bar dengan jQuery atau JavaScript di sini, kali ini Saya akan menggunakan tag kodisional untuk menandai menu berdasarkan persamaan URL halaman atau katakan saja pada halaman yang sedang aktif. Dengan begitu, saat Anda sedang berada pada halaman Tentang, maka menu navigasi Tentang akan berubah warna sesuai dengan pengaturan tampilan menu aktif yang Anda buat. Sebagai contoh.

Anggaplah Anda sudah memiliki menu navigasi di dalam template dengan kerangka seperti ini:

<nav id='nav'>
  <ul>
    <li><a href='http://test.blogspot.com'>Beranda</a></li>
    <li><a href='http://test.blogspot.com/p/about.html'>Tentang</a></li>
    <li><a href='http://test.blogspot.com/p/archive.html'>Arsip</a></li>
    <li><a href='http://test.blogspot.com/p/contact.html'>Kontak</a></li>
  </ul>
</nav>

Tambahkan masing-masing item menu dengan ID yang spesifik, misalnya home, about, archive dan sebagainya, sehingga hasilnya akan menjadi seperti ini:

<nav id='nav'>
  <ul>
    <li id='home'><a href='http://test.blogspot.com'>Beranda</a></li>
    <li id='about'><a href='http://test.blogspot.com/p/about.html'>Tentang</a></li>
    <li id='archive'><a href='http://test.blogspot.com/p/archive.html'>Arsip</a></li>
    <li id='contact'><a href='http://test.blogspot.com/p/contact.html'>Kontak</a></li>
  </ul>
</nav>

Setelah itu temukan kode </head> dan tambahkan kode-kode CSS yang berisi semua ID menu di atas. Isi selektor-selektor tersebut dengan deklarasi yang sama. Sebagai contoh, di sini Saya menuliskan warna latar hijau dan warna teks putih untuk menu yang sedang aktif:

<style>
#home    a {background-color:#0A7936;color:white;}
#about   a {background-color:#0A7936;color:white;}
#archive a {background-color:#0A7936;color:white;}
#contact a {background-color:#0A7936;color:white;}
</style>

Letakkan kode di atas tepat di atas tag </head>

Mengatur Warna Menu dengan Tag Kondisional

Pada intinya kita hanya akan memecah semua selektor di atas menjadi kode CSS tunggal yang akan tampil hanya jika halaman yang sedang aktif merupakan halaman yang memiliki URL sama dengan URL pada menu. Jadi kita bisa menggunakan tag kodisional halaman khusus untuk kasus ini:

<b:if cond='data:blog.url == &quot;URL HALAMAN&quot;'>

Pisahkan semua selektor item menu di atas menjadi seperti ini:

<style>
  <b:if cond='data:blog.url == &quot;URL HALAMAN&quot;'>
  #home a {background-color:#0A7936;color:white;}
  </b:if>
  <b:if cond='data:blog.url == &quot;URL HALAMAN&quot;'>
  #about a {background-color:#0A7936;color:white;}
  </b:if>
  <b:if cond='data:blog.url == &quot;URL HALAMAN&quot;'>
  #archive a {background-color:#0A7936;color:white;}
  </b:if>
  <b:if cond='data:blog.url == &quot;URL HALAMAN&quot;'>
  #contact a {background-color:#0A7936;color:white;}
  </b:if>
</style>

Ganti kode URL HALAMAN dengan URL halaman pada menu yang terkait dengan ID menu dalam selektor CSS. Dalam contoh menu yang Saya ilustrasikan di atas, seharusnya kodenya akan menjadi seperti ini:

<style>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
  #home a {background-color:#0A7936;color:white;}
  </b:if>
  <b:if cond='data:blog.url == &quot;http://test.blogspot.com/p/about.html&quot;'>
  #about a {background-color:#0A7936;color:white;}
  </b:if>
  <b:if cond='data:blog.url == &quot;http://test.blogspot.com/p/archive.html&quot;'>
  #archive a {background-color:#0A7936;color:white;}
  </b:if>
  <b:if cond='data:blog.url == &quot;http://test.blogspot.com/p/contact.html&quot;'>
  #contact a {background-color:#0A7936;color:white;}
  </b:if>
</style>

Catatan: data:blog.homepageUrl setara dengan "http://test.blogspot.com/" menurut sampel alamat blog di atas, dan juga setara dengan window.location.hostname dalam JavaScript.

Klik Simpan Template.

Alternatif Lain

Tanpa Tag Kondisional

Kita bisa membuat manipulasi ini tanpa tag kondisional, diantaranya adalah dengan cara menerapkan manipulasi JavaScript atau jQuery (baca di sini) yang lebih praktis. Tapi metode ini memiliki satu kekurangan yaitu efek tidak akan bekerja jika JavaScript dimatikan. Atau kita juga bisa menggunakan metode yang jauh lebih sederhana lagi, yaitu dengan cara menyisipkan kode CSS secara langsung ke dalam posting, sama seperti saat kita membuat posting Blogazine.

Hal yang paling penting dalam pembuatan manipulasi efek aktif pada menu sebenarnya hanya ada pada modifikasi ID atau kelas item menu agar mereka menjadi lebih spesifik/berbeda satu sama lain.

Dengan Widget Daftar Halaman (Page List)

Blogger memiliki widget bernama Daftar Laman. Dulu sebenarnya widget tersebut digunakan untuk menampilkan semua daftar tautan khusus untuk halaman statis, tapi saat ini widget tersebut sudah berkembang dan bisa ditambahi dengan tautan-tautan non-halaman statis. Dalam widget tersebut sudah terdapat peraturan kondisi tersendiri yaitu <b:if cond='data:link.isCurrentPage'> yang memiliki kemampuan untuk menambahkan kelas atau keadaan yang berbeda pada item menu jika halaman yang sedang aktif adalah halaman yang memiliki URL sama dengan URL pada menu tersebut:

<b:widget id='PageList1' locked='false' title='Laman' type='PageList'>
<b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content'>
    <b:if cond='data:mobile'>
      <select expr:id='data:widget.instanceId + &quot;_select&quot;'>
        <b:loop values='data:links' var='link'>
          <b:if cond='data:link.isCurrentPage'>
            <option expr:value='data:link.href' selected='selected'><data:link.title/></option>
          <b:else/>
            <option expr:value='data:link.href'><data:link.title/></option>
          </b:if>
        </b:loop>
      </select>
      <span class='pagelist-arrow'>&amp;#9660;</span>

    <b:else/>
      <ul>
        <b:loop values='data:links' var='link'>
          <b:if cond='data:link.isCurrentPage'>
            <li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li>
          <b:else/>
            <li><a expr:href='data:link.href'><data:link.title/></a></li>
          </b:if>
        </b:loop>
      </ul>
    </b:if>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

Untuk menerapkan efek aktif pada menu, cukup gunakan CSS ini:

/* Versi daftar menu */
.PageList li.selected a {
  background-color:#0A7936;
  color:white;
}

/* Versi selectbox */
.PageList option[selected] {
  font-weight:bold;
}

Kekurangan manipulasi tampilan menu aktif pada widget Daftar Laman adalah kita tidak memiliki kemampuan untuk menambahkan sub-sub menu baru sebagai anak menu utama.

Tema Vanila untuk Tag PRE

Tema Vanila untuk Tag PRE

HTML

<pre data-title="HTML"> ... </pre>
<pre data-title="CSS"> ... </pre>
<pre data-title="JavaScript"> ... </pre>
<pre data-title="jQuery"> ... </pre>
<pre data-title="PHP"> ... </pre>
<pre data-title="XML"> ... </pre>

CSS

pre {
  background-color:white;
  background-image:-webkit-linear-gradient(top, #f5f5f5 50%, white 50%);
  background-image:-moz-linear-gradient(top, #f5f5f5 50%, white 50%);
  background-image:-ms-linear-gradient(top, #f5f5f5 50%, white 50%);
  background-image:-o-linear-gradient(top, #f5f5f5 50%, white 50%);
  background-image:linear-gradient(top, #f5f5f5 50%, white 50%);
  -webkit-background-size:30px 30px;
  -moz-background-size:30px 30px;
  -ms-background-size:30px 30px;
  -o-background-size:30px 30px;
  background-size:30px 30px;
  background-repeat:repeat;
  font:normal bold 12px/15px "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
  color:#333;
  border:2px solid #666;
  position:relative;
  padding:0 7px;
  margin:10px 0;
  overflow:auto;
  word-wrap:normal;
  white-space:pre;
  -webkit-box-shadow:0 1px 2px rgba(0,0,0,0.2);
  -moz-box-shadow:0 1px 2px rgba(0,0,0,0.2);
  box-shadow:0 1px 2px rgba(0,0,0,0.2);
  position:relative;
}

pre[data-title] {
  padding:29px 1em 7px 1em;
}

pre[data-title]::before {
  content:attr(data-title);
  display:block;
  position:absolute;
  top:0;
  right:0;
  left:0;
  background-color:#666;
  padding:0 7px;
  font:bold 11px/20px Arial,Sans-Serif;
  color:white;
}

pre[data-title="HTML"] {border-color:#0B7E88;color:#08464B;}
pre[data-title="CSS"] {border-color:#7B990C;color:#4B5D08;}
pre[data-title="JavaScript"] {border-color:#545448;color:#1F2E24;}
pre[data-title="jQuery"] {border-color:#395540;color:#2E2E27;}
pre[data-title="PHP"] {border-color:#FF9900;color:#865003;}
pre[data-title="XML"] {border-color:#FF0C39;color:#790015;}

pre[data-title="HTML"]::before {background-color:#0B7E88;}
pre[data-title="CSS"]::before {background-color:#7B990C;}
pre[data-title="JavaScript"]:before {background-color:#545448;}
pre[data-title="jQuery"]::before {background-color:#395540;}
pre[data-title="PHP"]::before {background-color:#FF9900;}
pre[data-title="XML"]::before {background-color:#FF0C39;}

Lihat Demo

Pure CSS3 Metal Checkbox

HTML

<span class="checkbox">
    <input type="checkbox">
    <label data-on="ON" data-off="OFF"></label>
</span>

CSS

.checkbox {
  display:inline-block;
  position:relative;
  text-align:left;
  width:60px;
  height:30px;
  background-color:#222;
  overflow:hidden;
  -webkit-box-shadow:inset 0 1px 2px black,0 1px 0 rgba(255,255,255,0.1);
  -moz-box-shadow:inset 0 1px 2px black,0 1px 0 rgba(255,255,255,0.1);
  box-shadow:inset 0 1px 2px black,0 1px 0 rgba(255,255,255,0.1);
  -webkit-border-radius:6px;
  -moz-border-radius:6px;
  border-radius:6px;
}

.checkbox input {
  display:block;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  width:100%;
  height:100%;
  margin:0 0;
  cursor:pointer;
  opacity:0;
  filter:alpha(opacity=0);
  z-index:2;
}

.checkbox label {
  background-color:#3c3c3c;
  background-image:-webkit-linear-gradient(-40deg,rgba(0,0,0,0),rgba(255,255,255,0.1),rgba(0,0,0,0.2));
  background-image:-moz-linear-gradient(-40deg,rgba(0,0,0,0),rgba(255,255,255,0.1),rgba(0,0,0,0.2));
  background-image:-ms-linear-gradient(-40deg,rgba(0,0,0,0),rgba(255,255,255,0.1),rgba(0,0,0,0.2));
  background-image:-o-linear-gradient(-40deg,rgba(0,0,0,0),rgba(255,255,255,0.1),rgba(0,0,0,0.2));
  background-image:linear-gradient(-40deg,rgba(0,0,0,0),rgba(255,255,255,0.1),rgba(0,0,0,0.2));
  -webkit-box-shadow:0 0 0 1px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.7);
  -moz-box-shadow:0 0 0 1px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.7);
  box-shadow:0 0 0 1px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.7);
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  display:inline-block;
  width:40px;
  text-align:center;
  font:bold 11px/28px Arial,Sans-Serif;
  color:#999;
  text-shadow:0 -1px 0 rgba(0,0,0,0.7);
  -webkit-transition:margin-left 0.2s ease-in-out;
  -moz-transition:margin-left 0.2s ease-in-out;
  -ms-transition:margin-left 0.2s ease-in-out;
  -o-transition:margin-left 0.2s ease-in-out;
  transition:margin-left 0.2s ease-in-out;
  margin:1px;
}

.checkbox label:before {
  content:attr(data-off);
}

.checkbox input:checked + label {
  margin-left:19px;
  background-color:#034B78;
  color:white;
}

.checkbox input:checked + label:before {
  content:attr(data-on);
}

Demo

Teknik CSS Hack Checkbox & Radio

Barusan Saya mencoba melebarkan elemen checkbox selebar-lebarnya. Saya tidak berharap bahwa tampilannya akan berubah, tapi Saya harap Saya bisa menemukan sesuatu yang lain.

Pada umumnya, saat kita ingin menciptakan efek toggle hanya dengan CSS kita akan menggunakan elemen checkbox dan radio untuk menciptakan efek toggle sederhana. Tapi yang jadi masalah adalah, elemen checkbox dan radio tidak bisa dimodifikasi tampilannya dengan CSS (kecuali untuk peramban webkit). Hal yang biasa kita lakukan adalah menambahkan elemen label dengan atribut for bernilai ID dari elemen checkbox atau radio terkait, sehingga saat elemen label tersebut diklik, maka elemen checkbox atau radio terkait bisa ikut terpengaruh:

<input type="checkbox" id="check-1"><label for="check-1">Tombol 1</label>
<input type="checkbox" id="check-2"><label for="check-2">Tombol 2</label>
<input type="checkbox" id="check-3"><label for="check-3">Tombol 3</label>

Lihat Demo

Dengan cara itu kita bisa menerapkan CSS3 :checked terhadap elemen checkbox berdasarkan apa yang kita lakukan terhadap elemen label:

input[type="checkbox"]:checked + label {
  background-color:pink;
}

input[type="checkbox"]:checked ~ button {
  font-weight:bold;
  font-size:20px;
}

Elemen label masih bisa mempengaruhi checkbox, jadi kita bisa menggunakan label untuk menjalankan checkbox sekaligus sebagai pengganti checkbox yang bisa kita atur tampilannya sesuka hati. Kemudian kita bisa menyembunyikan elemen checkbox karena elemen label bisa menjadi perantara untuk mengubah sikap checkbox:

/* Buat tampilan elemen label agar tampak seperti tombol */
label {
  cursor:pointer;
  display:inline-block;
  background-color:cyan;
  padding:2px 5px;
  margin:0 0 2px;
}

label:hover {
  text-decoration:underline;
}

/* Jalankan tugas elemen checkbox! */
input[type="checkbox"]:checked + label {
  background-color:pink;
}

input[type="checkbox"]:checked ~ button {
  font-weight:bold;
  font-size:20px;
}

/* Sembunyikan checkbox */
input[type="checkbox"] {display:none;}

Lihat Demo

---

Yang Satu Ini Agak Berbeda!

Hack checkbox yang satu ini agak berbeda dengan versi di atas, mengingat ternyata kita bisa melebarkan clickable-area pada elemen checkbox, maka kita tidak perlu lagi direpotkan oleh atribut id dan for yang harus kita buat berbeda-beda pada setiap elemen checkbox, radio dan label. Kita bisa menggunakan elemen checkbox itu sendiri sebagai tombol palsu:

Sampel Kerangka

<div>
    <input type="checkbox">
    <label>Toggle Button</label>
</div>

CSS

div {
  position:relative; /* Kita butuh ini untuk memposisikan anak elemen menjadi absolut terhadap induknya */
}

/* Buat tampilan elemen label agar tampak seperti tombol */
div label {
  display:block;
  padding:0 15px;
  line-height:30px;
  background-color:black;
  color:white;
}

/* Perluas clickable-area checkbox selebar-lebarnya terhadap elemen induk */
div input {
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  width:100%;
  height:100%;
  z-index:2;
  /* Seperti tautan yang bisa diklik */
  cursor:pointer;
 /* Sembunyikan checkbox, namun pastikan tetap aksesibel */
  opacity:0;
  filter:alpha(opacity=0);
}

/* Saat checkbox dicek, ubah tampilan latar elemen label di sebelahnya menjadi merah */
div input:checked + label {
  background-color:red;
}

Lihat Demo - Dengan Checkbox Lihat Demo - Dengan Radio

Lebih Detail

Saya mencoba membuat drop down menu sederhana menggunakan metode yang ke dua, meski tanpa id dan for, tapi teknik ini bisa bekerja dengan baik:

HTML

<div class="dropdown">
    <input type="checkbox">
    <label data-default="Normal State" data-active="Active State"></label>
    <ul>
        <li><a href="#">Lorem</a></li>
        <li><a href="#">Ipsum</a></li>
        <li><a href="#">Dolor Sit</a></li>
        <li><a href="#">Amet</a></li>
    </ul>
</div>

CSS

.dropdown {
  position:relative;
  width:170px;
  height:30px;
  background-color:black;
  margin:0 0 10px;
  display:inline-block;
}

.dropdown * {
  list-style:none;
  margin:0 0;
  padding:0 0;
}

.dropdown ul {
  position:absolute;
  top:100%;
  right:0;
  left:0;
  z-index:99;
  background-color:black;
  display:none;
}

.dropdown a {
  display:block;
  padding:5px 15px;
  color:white;
  text-decoration:none;
}

.dropdown a:hover {
  background-color:blue;
}

.dropdown input {
  display:block;
  /* Expand the checkbox */
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:2;
  /* Hide the ckeckbox elements without losing our pointer access */
  opacity:0;
  filter:alpha(opacity=0);
  cursor:pointer; /* Behave like a link */
}

.dropdown label {
  display:block;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  line-height:30px;
  padding:0 15px;
  color:white;
}

.dropdown label:before {
  content:attr(data-default); /* Show the text of the default state */
}

.dropdown input:checked + label {
  background-color:red; /* Active state background-color */
}

.dropdown input:checked + label:before {
  content:attr(data-active); /* Show the text of the active state */
}

.dropdown input:checked ~ ul {
  display:block; /* Show the drop down list when checkbox is checked! */
}

Demo

Animasi Blog Roll

var $ul = $('#blog-roll'),
    roll = function() {
        $ul.find('li').first().slideUp('slow', function() {
            $(this).appendTo($(this).parent()).fadeIn();
        });
    }, anim = setInterval(roll, 3000);

// Pause on hover...
$ul.hover(function() {
    clearInterval(anim);
}, function() {
    anim = setInterval(roll, 3000);
});

Demo

http://jsfiddle.net/tovic/5gd3U/embedded/result,js,html/

Memperbesar/Mengubah Ukuran Thumbnail Posting

Pertanyaan Al-Firouz: Tentang bagaimana cara memperbesar thumbnail pada posting auto read-more tanpa JavaScript dengan jQuery:

Dalam pesan Facebook

Pertama-tama, Saya tidak akan memberikan metode mengubah ukuran thumbnail Picasa dengan jQuery terlebih dahulu karena ada cara sederhana yang bisa dilakukan dengan mudah menggunakan JavaScript mentah. Pada intinya, kita hanya mencoba mengubah ukuran thumbnail kecil dari path-nya seperti yang pernah Saya ulas dengan cukup jelas di artikel Optimasi Thumbnail pada Posting Auto Read-More dan Widget Blogger, yaitu dengan cara mengubah ukuran standar thumbnail 72 × 72 piksel s72-c menjadi ukuran yang lain, misalnya s200-c.

Metode 1: Menggunakan JavaScript Murni

Salin kode ini dan letakkan di atas tag </body>:

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script>
//<![CDATA[
function resizeThumb(parentID, size) {
    var parent = document.getElementById(parentID),
        image = parent.getElementsByTagName('img');
    for (var i = 0; i < image.length; i++) {
        image[i].src = image[i].src.replace(/\/s72\-c/, "/s" + size + "-c");
        image[i].width = size;
        image[i].height = size;
    }
}
resizeThumb('main-wrapper', 200);
//]]>
</script>
</b:if>
</b:if>

Fungsi dieksekusi pada bagian ini:

resizeThumb('main-wrapper', 200);

main-wrapper adalah ID kolom posting, dan 200 adalah ukuran thumbnail baru. Kode di atas akan mengubah ukuran thumbnail dari 72 × 72 piksel menjadi 200 × 200 piksel.

Ganti juga ukuran width dan height thumbnail posting dalam kode CSS ini:

.post-thumbnail {
  width:72px;
  height:72px;
  float:left;
  margin:0 10px 0 0;
}

… menjadi berukuran sama dengan ukuran pembesaran thumbnail. Menyesuaikan contoh di atas, maka ukuran lebar dan tinggi thumbnail harus diubah menjadi 200px.

Simpan semua perubahan dan lihat hasilnya.

Lihat Sampel

Metode 2: Menggunakan jQuery

Pada intinya cara kerjanya sama, hanya metodenya saja yang berbeda. Salin kode ini dan letakkan di atas kode </head> atau </body>:

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script>
//<![CDATA[
function resizeThumb(el, from, to) {
    $(el).each(function() {
        $(this).attr({
            'src': $(this).attr('src').replace('/s'+from+'-c/', '/s'+to+'-c/'),
            'width': to, 'height': to
        });
    });
}
$(function() {
    resizeThumb('.post-thumbnail', '72', '200'); // Ubah ukuran thumbnail dari 72 menjadi 200
});
//]]>
</script>
</b:if>
</b:if>

Di sini Saya menggunakan selektor $('.post-thumbnail') untuk menargetkan thumbnail posting secara langsung. Anda bisa saja mengubah selektornya menjadi $('#main-wrapper img') atau $('.post img:first') atau bahkan yang lainnya jika template Anda memiliki struktur elemen yang unik. Pada intinya, targetkan gambarnya! Alasan Saya tidak menggunakan nama kelas thumbnail pada versi manipulasi JavaScript adalah karena Saya tidak ingin mengambil resiko mengingat document.getElementsByClassName tidak didukung oleh beberapa peramban tua - When can I use getElementsByClassName?

Lihat Sampel

Thumbnail Lain?

Bukan hanya thumbnail pada posting saja yang bisa diubah ukurannya, tapi juga thumbnail-thumbnail pada widget lain, misalnya pada widget Posting Populer yang caranya juga pernah dituliskan oleh MS-Potilas di artikelnya (Kebetulan Saya mendapatkan ide JavaScript mentahnya dari sana). Di sini Saya hanya mengonversi kodenya menjadi plugin. Asalkan thumbnail tersebut diunggah pada direktori Picasa, maka kita bisa menemukan ciri khususnya dalam path lokasi gambar seperti s72-c, s200, s1600 dan lain sebagainya. Dari kunci itulah kita bisa mengubah ukuran-ukuran gambar menggunakan JavaScript dengan cara mengganti besarannya. berikut ini adalah contoh sederhana bagaimana cara memperbesar thumbnail pada widget Posting Populer:

Versi JavaScript

<script>
//<![CDATA[
function resizeThumb(parentID, size) {
    var parent = document.getElementById(parentID),
        image = parent.getElementsByTagName('img');
    for (var i = 0; i < image.length; i++) {
        image[i].src = image[i].src.replace(/\/s72\-c/, "/s" + size + "-c");
        image[i].width = size;
        image[i].height = size;
    }
}
// Mengubah ukuran thumbnail widget Posting Populer
resizeThumb('PopularPosts1', 200);
//]]>
</script>

Versi jQuery

<script>
//<![CDATA[
function resizeThumb(el, from, to) {
    $(el).each(function() {
        $(this).attr({
            'src': $(this).attr('src').replace('/s'+from+'-c/', '/s'+to+'-c/'),
            'width': to, 'height': to
        });
    });
}
// Mengubah ukuran thumbnail widget Posting Populer
$(function() {
    resizeThumb('#PopularPosts1 img', '72', '200');
});
//]]>
</script>

Tag kondisional bisa dilepaskan jika tujuan kita adalah untuk mengubah ukuran thumbnail widget, karena umumnya widget muncul pada semua tipe halaman.

Catatan Tambahan: Saya melihat beberapa pembaca yang mendeklarasikan fungsi resizeThumb() berkali-kali pada tempat yang berbeda. Padahal fungsi ini cukup dinyatakan satu kali saja (Saya sarankan untuk meletakkannya di area <head>):

function resizeThumb(parentID, size) { ... }

Setelah itu Anda bisa menggunakan fungsi tersebut sebanyak yang Anda mau pada elemen mana saja:

resizeThumb('Blog1', 300);
resizeThumb('PopularPosts1', 200);
resizeThumb('Widget1', 50);
...

Plugin Daftar Konten Otomatis Sederhana (1 Level)

(function($) {
    $.fn.toc = function(o, p) {
        p = $.extend({title: "Table of Content"}, p);
        this.prepend('<div id="toc-list"><strong>' + p.title + '</strong><ol></ol></div>').children(o).each(function(i) {
            i = i + 1;
            $(this).attr('id', 'section-' + i).nextUntil(o).after('<a href="#toc-list">Top &uArr;</a>');
            $('<li><a href="#section-' + i + '">' + $(this).text() + '</a></li>').appendTo('#toc-list ol');
        });
    };
})(jQuery);

Penggunaan

$('#parent').toc('h3', {title: "Tabel Konten:"});

Demo

Lihat Demo

Menambahkan Efek Animasi

Kode ini berada di luar plugin, dan memiliki cara kerja yang tidak jauh berbeda dengan animasi tombol back to top:

$('#toc-list a, a[href="#toc-list"]').on("click", function() {
    var hash = this.hash;
    $('html, body').animate({scrollTop:$(hash).offset().top}, 600, function() {
        window.location.hash = hash;
    });
    return false;
});

Lihat Demo Edit di Sini

No Live Links · Mencegah Tautan Aktif Masuk ke dalam Komentar

function blockLinks(parentID, children) {
    var parent = document.getElementById(parentID), content;
    if (!parent) return;
    content = parent.getElementsByTagName(children);
    for (var i = 0, len = content.length; i < len; ++i) {
        if (content[i].innerHTML.indexOf('</a>') !== -1) {
            content[i].innerHTML = '<mark>No live link!!!</mark> Dilarang nyepam di sini!';
            content[i].className += ' spammer-detected';
        }
    }
}

// Jalankan fungsi!
// Seleksi elemen induk dengan id='comment-holder' ...
// dan periksa semua konten paragraf di dalamnya!
blockLinks('comment-holder', 'p');

Fungsi sederhana untuk mencegah hadirnya tautan aktif dalam daftar komentar. Cara kerjanya, JavaScript akan menyeleksi sebuah elemen induk dengan ID tertentu (dalam hal ini: #comment-holder), kemudian akan melihat semua item di dalamnya (dalam hal ini <p>). Jika setidaknya sebuah tautan ditemukan, dengan sekejap ganti semua konten item tersebut dengan pesan larangan tertentu.

Demo

Lihat Demo

Box Shadow, DTE Logo

body:before {
    content:"";
    display:block;
    width:5px;
    height:5px;
    background-color:transparent;
    -webkit-box-shadow:
        /* Black lines... */
        0 5px 0 black,
        0 10px 0 black,
        0 15px 0 black,
        0 20px 0 black,
        0 25px 0 black,
        0 30px 0 black,
        0 35px 0 black,
        0 40px 0 black,
        0 45px 0 black,
        50px 5px 0 black,
        50px 10px 0 black,
        50px 15px 0 black,
        50px 20px 0 black,
        50px 25px 0 black,
        50px 30px 0 black,
        50px 35px 0 black,
        50px 40px 0 black,
        50px 45px 0 black,
        
        5px 0 0 black,
        10px 0 0 black,
        15px 0 0 black,
        20px 0 0 black,
        25px 0 0 black,
        30px 0 0 black,
        35px 0 0 black,
        40px 0 0 black,
        45px 0 0 black,
        5px 50px 0 black,
        10px 50px 0 black,
        15px 50px 0 black,
        20px 50px 0 black,
        25px 50px 0 black,
        30px 50px 0 black,
        35px 50px 0 black,
        40px 50px 0 black,
        45px 50px 0 black,
        
        15px 15px 0 black,
        35px 15px 0 black,
        15px 35px 0 black,
        35px 35px 0 black,
        20px 40px 0 black,
        30px 40px 0 black,
        10px 30px 0 black,
        40px 30px 0 black,
        10px 25px 0 black,
        40px 25px 0 black,
        
        25px 40px 0 black,
        
        /* Filling... */
        5px 5px 0 red,
        10px 5px 0 red,
        15px 5px 0 red,
        20px 5px 0 red,
        25px 5px 0 red,
        30px 5px 0 red,
        35px 5px 0 red,
        40px 5px 0 red,
        45px 5px 0 red,
        
        5px 10px 0 red,
        10px 10px 0 red,
        15px 10px 0 red,
        20px 10px 0 red,
        25px 10px 0 red,
        30px 10px 0 red,
        35px 10px 0 red,
        40px 10px 0 red,
        45px 10px 0 red,
        
        5px 15px 0 red,
        10px 15px 0 red,
        20px 15px 0 red,
        25px 15px 0 red,
        30px 15px 0 red,
        40px 15px 0 red,
        45px 15px 0 red,
        
        5px 20px 0 red,
        10px 20px 0 red,
        15px 20px 0 red,
        20px 20px 0 red,
        25px 20px 0 red,
        30px 20px 0 red,
        35px 20px 0 red,
        40px 20px 0 red,
        45px 20px 0 red,
        
        5px 25px 0 red,
        15px 25px 0 red,
        20px 25px 0 red,
        25px 25px 0 red,
        30px 25px 0 red,
        35px 25px 0 red,
        45px 25px 0 red,
        
        5px 30px 0 red,
        15px 30px 0 red,
        20px 30px 0 red,
        25px 30px 0 red,
        30px 30px 0 red,
        35px 30px 0 red,
        45px 30px 0 red,
        
        5px 35px 0 red,
        10px 35px 0 red,
        20px 35px 0 red,
        25px 35px 0 red,
        30px 35px 0 red,
        40px 35px 0 red,
        45px 35px 0 red,
        
        5px 40px 0 red,
        10px 40px 0 red,
        15px 40px 0 red,
        35px 40px 0 red,
        40px 40px 0 red,
        45px 40px 0 red,
        
        5px 45px 0 red,
        10px 45px 0 red,
        15px 45px 0 red,
        20px 45px 0 red,
        25px 45px 0 red,
        30px 45px 0 red,
        35px 45px 0 red,
        40px 45px 0 red,
        45px 45px 0 red;    
    -moz-box-shadow:
        /* Black lines... */
        0 5px 0 black,
        0 10px 0 black,
        0 15px 0 black,
        0 20px 0 black,
        0 25px 0 black,
        0 30px 0 black,
        0 35px 0 black,
        0 40px 0 black,
        0 45px 0 black,
        50px 5px 0 black,
        50px 10px 0 black,
        50px 15px 0 black,
        50px 20px 0 black,
        50px 25px 0 black,
        50px 30px 0 black,
        50px 35px 0 black,
        50px 40px 0 black,
        50px 45px 0 black,
        
        5px 0 0 black,
        10px 0 0 black,
        15px 0 0 black,
        20px 0 0 black,
        25px 0 0 black,
        30px 0 0 black,
        35px 0 0 black,
        40px 0 0 black,
        45px 0 0 black,
        5px 50px 0 black,
        10px 50px 0 black,
        15px 50px 0 black,
        20px 50px 0 black,
        25px 50px 0 black,
        30px 50px 0 black,
        35px 50px 0 black,
        40px 50px 0 black,
        45px 50px 0 black,
        
        15px 15px 0 black,
        35px 15px 0 black,
        15px 35px 0 black,
        35px 35px 0 black,
        20px 40px 0 black,
        30px 40px 0 black,
        10px 30px 0 black,
        40px 30px 0 black,
        10px 25px 0 black,
        40px 25px 0 black,
        
        25px 40px 0 black,
        
        /* Filling... */
        5px 5px 0 red,
        10px 5px 0 red,
        15px 5px 0 red,
        20px 5px 0 red,
        25px 5px 0 red,
        30px 5px 0 red,
        35px 5px 0 red,
        40px 5px 0 red,
        45px 5px 0 red,
        
        5px 10px 0 red,
        10px 10px 0 red,
        15px 10px 0 red,
        20px 10px 0 red,
        25px 10px 0 red,
        30px 10px 0 red,
        35px 10px 0 red,
        40px 10px 0 red,
        45px 10px 0 red,
        
        5px 15px 0 red,
        10px 15px 0 red,
        20px 15px 0 red,
        25px 15px 0 red,
        30px 15px 0 red,
        40px 15px 0 red,
        45px 15px 0 red,
        
        5px 20px 0 red,
        10px 20px 0 red,
        15px 20px 0 red,
        20px 20px 0 red,
        25px 20px 0 red,
        30px 20px 0 red,
        35px 20px 0 red,
        40px 20px 0 red,
        45px 20px 0 red,
        
        5px 25px 0 red,
        15px 25px 0 red,
        20px 25px 0 red,
        25px 25px 0 red,
        30px 25px 0 red,
        35px 25px 0 red,
        45px 25px 0 red,
        
        5px 30px 0 red,
        15px 30px 0 red,
        20px 30px 0 red,
        25px 30px 0 red,
        30px 30px 0 red,
        35px 30px 0 red,
        45px 30px 0 red,
        
        5px 35px 0 red,
        10px 35px 0 red,
        20px 35px 0 red,
        25px 35px 0 red,
        30px 35px 0 red,
        40px 35px 0 red,
        45px 35px 0 red,
        
        5px 40px 0 red,
        10px 40px 0 red,
        15px 40px 0 red,
        35px 40px 0 red,
        40px 40px 0 red,
        45px 40px 0 red,
        
        5px 45px 0 red,
        10px 45px 0 red,
        15px 45px 0 red,
        20px 45px 0 red,
        25px 45px 0 red,
        30px 45px 0 red,
        35px 45px 0 red,
        40px 45px 0 red,
        45px 45px 0 red;    
    box-shadow:
        /* Black lines... */
        0 5px 0 black,
        0 10px 0 black,
        0 15px 0 black,
        0 20px 0 black,
        0 25px 0 black,
        0 30px 0 black,
        0 35px 0 black,
        0 40px 0 black,
        0 45px 0 black,
        50px 5px 0 black,
        50px 10px 0 black,
        50px 15px 0 black,
        50px 20px 0 black,
        50px 25px 0 black,
        50px 30px 0 black,
        50px 35px 0 black,
        50px 40px 0 black,
        50px 45px 0 black,
        
        5px 0 0 black,
        10px 0 0 black,
        15px 0 0 black,
        20px 0 0 black,
        25px 0 0 black,
        30px 0 0 black,
        35px 0 0 black,
        40px 0 0 black,
        45px 0 0 black,
        5px 50px 0 black,
        10px 50px 0 black,
        15px 50px 0 black,
        20px 50px 0 black,
        25px 50px 0 black,
        30px 50px 0 black,
        35px 50px 0 black,
        40px 50px 0 black,
        45px 50px 0 black,
        
        15px 15px 0 black,
        35px 15px 0 black,
        15px 35px 0 black,
        35px 35px 0 black,
        20px 40px 0 black,
        30px 40px 0 black,
        10px 30px 0 black,
        40px 30px 0 black,
        10px 25px 0 black,
        40px 25px 0 black,
        
        25px 40px 0 black,
        
        /* Filling... */
        5px 5px 0 red,
        10px 5px 0 red,
        15px 5px 0 red,
        20px 5px 0 red,
        25px 5px 0 red,
        30px 5px 0 red,
        35px 5px 0 red,
        40px 5px 0 red,
        45px 5px 0 red,
        
        5px 10px 0 red,
        10px 10px 0 red,
        15px 10px 0 red,
        20px 10px 0 red,
        25px 10px 0 red,
        30px 10px 0 red,
        35px 10px 0 red,
        40px 10px 0 red,
        45px 10px 0 red,
        
        5px 15px 0 red,
        10px 15px 0 red,
        20px 15px 0 red,
        25px 15px 0 red,
        30px 15px 0 red,
        40px 15px 0 red,
        45px 15px 0 red,
        
        5px 20px 0 red,
        10px 20px 0 red,
        15px 20px 0 red,
        20px 20px 0 red,
        25px 20px 0 red,
        30px 20px 0 red,
        35px 20px 0 red,
        40px 20px 0 red,
        45px 20px 0 red,
        
        5px 25px 0 red,
        15px 25px 0 red,
        20px 25px 0 red,
        25px 25px 0 red,
        30px 25px 0 red,
        35px 25px 0 red,
        45px 25px 0 red,
        
        5px 30px 0 red,
        15px 30px 0 red,
        20px 30px 0 red,
        25px 30px 0 red,
        30px 30px 0 red,
        35px 30px 0 red,
        45px 30px 0 red,
        
        5px 35px 0 red,
        10px 35px 0 red,
        20px 35px 0 red,
        25px 35px 0 red,
        30px 35px 0 red,
        40px 35px 0 red,
        45px 35px 0 red,
        
        5px 40px 0 red,
        10px 40px 0 red,
        15px 40px 0 red,
        35px 40px 0 red,
        40px 40px 0 red,
        45px 40px 0 red,
        
        5px 45px 0 red,
        10px 45px 0 red,
        15px 45px 0 red,
        20px 45px 0 red,
        25px 45px 0 red,
        30px 45px 0 red,
        35px 45px 0 red,
        40px 45px 0 red,
        45px 45px 0 red;

}

Demo

Galleria V2 · Widget Masonry untuk Blogger

Pembaharuan 26 Mei 2013: Terjadi perubahan besar pada penulisan variabel-variabel di dalam widget ini. Saya terpaksa melakukannya demi pengembangan dan perbaikan widget yang lebih leluasa ke depannya agar tidak mengganggu para pemakai widget ini. Bagi Anda yang sudah memakai widget ini sebelum tanggal 26 Mei 2013, Anda akan mendapatkan teks peringatan bahwa widget Anda harus segera diperbaharui.

Perubahan fitur: (1) Opsi showThumbnails ditiadakan (2) Menambahkan fitur Infinite Scroll (3) Mengganti parameter indeks feed dari window.location.search menjadi window.location.hash dengan bantuan event hashchange, sehingga pengguna tidak perlu memuat ulang halaman secara keseluruhan hanya untuk mengubah window.location.search pada address bar.

Sebelum ini Saya telah membuat widget Galleria versi pertama, kali ini Saya membuat versi yang ke dua dengan dua macam pilihan layout dan konfigurasi yang lebih lengkap.

Masalah besar yang terjadi pada versi pertama adalah dia menampilkan semua feed begitu saja sehingga proses muat widget menjadi begitu lama. Kita tidak memiliki kemampuan untuk memotong proses pemuatan feed kecuali dengan cara menambahkan fitur navigasi. Inilah kabar baiknya:

Lihat Demo

Widget ini dilengkapi dengan navigasi halaman. Setiap kali halaman berganti, itu akan mengubah nilai window.location.search pada address bar. Saya menggunakan angka-angka itu sebagai parameter untuk menentukan nilai start-index pada widget ini Widget ini dilengkapi dengan navigasi halaman. Setiap kali tombol navigasi diklik, itu akan mengubah nilai window.location.hash pada address bar. Saya menggunakan angka-angka itu sebagai parameter untuk menentukan nilai start-index pada widget ini:

Integrasi Widget ke Blogger

Pertama-tama klik menu Laman pada sidebar. Kemudian, pada menu Laman Baru pilihlah Laman Kosong:

Menambahkan halaman statis baru

Setelah itu Anda akan melihat formulir halaman statis seperti ini. Klik mode HTML:

Pilih mode HTML

Salin kode di bawah ini kemudian letakkan di dalam formulirnya:

<link rel="stylesheet" href="//tovic.github.io/hompimpa/Blogger-Masonry-Widget/theme/light.min.css"/>
<div id="dte-masonry-container"></div><script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><script src="//tovic.github.io/hompimpa/Blogger-Masonry-Widget/js/jquery.masonry.min.js"></script>
<script src="//tovic.github.io/hompimpa/Blogger-Masonry-Widget/js/post.brick.min.js"></script>
<script>
//<![CDATA[
$('#dte-masonry-container').bloggerMasonry({

    // JSON Configuration
    viewMode: "summary", // Widget mode? "summary" || "thumbnail"
    homePage: "http://nama_blog.blogspot.com", // Your blog homepage
    numPosts: 10, // Number of posts to display per request
    numChars: 270, // Length of summary post
    squareImage: false, // Set thumbnail mode to square
    newTabLink: false, // Auto open links in new window/tab?
    columnWidth: 200, // Width of the image (also will resize the brick item width)
    subHeaderText: ["Diposting oleh ", "<br>pada "], // `Diposkan oleh FOO pada BAR`
    monthNames: [ // Month array
        "Januari",
        "Februari",
        "Maret",
        "April",
        "Mei",
        "Juni",
        "Juli",
        "Agustus",
        "September",
        "Oktober",
        "November",
        "Desember"
    ],
    commentLabel: "&nbsp;", // Label text after total comments
    navText: {
        prev: "Sebelumnya", // Previous navigation label
        next: "Berikutnya", // Next navigation label
        disabled: "&times;", // Disabled navigation label
        data: ["Halaman ", " dari "] // `Halaman # dari #`
    },
    postCategory: null, // Change to a label name to sort posts by specific label
    fallbackThumb: "img/meee.png", // Fallback thumbnail for posts without images
    loadingText: "Loading...", // `Loading...` text for loading indicator
    loadedText: "Loaded.", // `Loaded.` text for loading indicator
    infiniteScroll: false, // Enable infinite scroll?
    bottomTolerance: 30, // Bottom tolerance for the end of page indicator in infinite scroll

    // Shortcuts for Masonry Plugin Configuration (And Some Local Configuration)
    masonryConfig: {
        itemSelector: '.json_post',
        fadeSpeed: 400, // Speed of thumbnail fading effect
        resizeSpeed: 1000, // Speed of thumbnail resizing effect
        isAnimated: false,
        animateWithTransition: true, // Animate each brick with CSS transition instead of jQuery `.animate()`?
        animationOptions: {
            queue: false,
            duration: 1000,
            easing: null
        },
        isFitWidth: true,
        gutterWidth: 0,
        isRTL: false
    }

});
//]]>
</script>

Ganti kode yang Saya beri tanda dengan URL blog Anda. Klik Simpan dan Terbitkan.

Kode yang Saya garis bawahi adalah jQuery. Jika template Anda sudah dilengkapi dengan jQuery, singkirkan kode tersebut!

---

Pengaturan Lanjutan

Pengaturan widget ini dibagi menjadi dua, yaitu pengaturan JSON Blogger dan pengaturan Plugin Masonry:

Pengaturan JSON Blogger

Opsi	Keterangan
viewMode	Digunakan untuk menentukan tipe tampilan widget. Nilainya ada dua macam: "summary" untuk menampilkan galeri berupa daftar gambar beserta ringkasannya, "thumbnail" untuk menampilkan galeri berupa foto saja
homePage	Digunakan untuk menentukan URL blog sumber feed
numPosts	Digunakan untuk menentukan jumlah posting yang akan dipanggil setiap satu kali permintaan
numChars	Digunakan untuk menentukan jumlah karakter ringkasan/paragraf jika mode widget berupa "summary"
squareImage	Jika bernilai true semua gambar dalam widget akan dikonversi menjadi berbentuk kotak persegi. Ini adalah versi kompresi Picasa versi path gambar s72-c, hanya saja di sini Saya buat lebih fleksibel (ukurannya bisa diperbesar/diperkecil) - Tentang metode kompresi gambar Picasa
newTabLink	Jika bernilai true, semua tautan dalam widget akan terbuka di tab/jendela baru
columnWidth	Digunakan untuk menentukan lebar setiap kolom/item posting. Menentukan lebar pada opsi ini juga akan mengubah resolusi gambar
subHeaderText	Digunakan untuk mengatur teks deskripsi kecil di bawah header pada mode "summary" (Misal: Diposting oleh Taufik di 21 April 2012)
monthNames	Ini adalah daftar variabel nama-nama bulan. Ganti namanya sesuka hati sesuai dengan sistem penanggalan di negara Anda
commentLabel	Abaikan saja. Jika nilainya diganti, maka label komentar di bawah item posting akan berubah. Misalnya: 10 Komentar dari Pembaca akan tampil jika opsi commentLabel bernilai "Komentar dari Pembaca". Jika dikosongkan, label akan menyesuaikan diri berdasarkan format bahasa dalam pengaturan blog Anda
navText	prev digunakan untuk menentukan label navigasi mundur
	next digunakan untuk menentukan label navigasi maju
	disabled digunakan untuk menentukan label navigasi tak aktif
	data digunakan untuk menentukan label deskripsi posisi halaman dan jumlah total halaman
postCategory	Secara normal bernilai null. Ganti nilainya dengan nama label yang spesifik untuk menyortir item feed berdasarkan kategori khusus. Misal: postCategory: "jQuery" akan membuat widget ini menampilkan posting-posting yang memiliki label jQuery
fallbackThumb	Gambar cadangan jika posting yang tampil tidak memiliki gambar
loadingText	Deskripsi indikator sedang memuat saat sedang memuat
loadedText	Deskripsi indikator sedang memuat saat semua item telah selesai dimuat
infiniteScroll	Jika bernilai true, navigasi halaman tidak berfungsi lagi. Widget akan secara otomatis memuat item-item posting baru di bawah item-item posting yang sudah ada setiap kali gulungan layar telah mencapai jarak yang diinginkan (dalam hal ini, mencapai posisi navigasi widget terdekat terhadap bagian bawah layar)
bottomTolerance	Digunakan untuk menentukan toleransi jarak bawah infinite scroll untuk mengurangi kalkulasi posisi navigasi widget terdekat terhadap bagian bawah layar.

Konfigurasi Plugin Masonry

Opsi	Keterangan
fadeSpeed	Digunakan untuk menentukan kecepatan fade pada gambar
resizeSpeed	Digunakan untuk menentukan kecepatan perubahan ukuran kontainer gambar pada mode widget "thumbnail"
isAnimated	Jalan penghubung untuk opsi isAnimated pada plugin Masonry. Jika bernilai true efek animasi akan diterapkan dengan bantuan jQuery .animate(). Saat jendela peramban diperkecil/diperbesar, setiap item akan berubah posisi dengan efek animasi
animateWithTransition	Alternatif lain untuk menganimasikan widget. Set opsi isAnimated menjadi false, kemudian set opsi animateWithTransition menjadi true untuk menganimasikan masonry brick dengan CSS Transisi. Ini berhubungan dengan performa plugin. Menugaskan plugin untuk melakukan perhitungan posisi sekaligus menganimasikannya terkadang menjadi sesuatu yang berat bagi peramban. Jadi kita bisa memanfaatkan CSS Transisi —yang merupakan fitur bawaan pada peramban-peramban moderen— untuk menganimasikannya agar kerja peramban tidak terlalu berat dalam menangani JavaScript. Tentang metode animasi dengan CSS Transisi pada plugin Masonry bisa dibaca di sini
animationOptions	Jalan penghubung untuk opsi animationOptions pada plugin Masonry. Digunakan untuk mengonfigurasikan efek animasi JavaScript (isAnimated:true)
isFitWidth	Jalan penghubung untuk opsi isFitWidth pada plugin Masonry. Jika bernilai true, kontainer akan menyusut sesuai dengan kalkulasi jumlah semua item dalam satu baris, sehingga widget Masonry bisa berada tepat di tengah-tengah halaman - Selengkapnya tentang isFitWidth
gutterWidth	Jalan penghubung untuk opsi gutterWidth pada plugin Masonry. Digunakan untuk menentukan gutter/kerenggangan antaritem pada sisi dalam. Tidak terlalu penting - Selengkapnya tentang gutterWidth
isRTL	Jalan penghubung untuk opsi isRTL pada plugin Masonry. Jika bernilai true, plugin akan menganimasikan item dari kanan ke kiri (RTL = Right To Left) - Selengkapnya tentang isRTL

Lebih Banyak Demo:

• Demo Galleria Mode Thumbnail
• Demo Galleria Mode Thumbnail Kotak
• Demo Galleria Sortir Posting Berdasarkan Label Spesifik
• Demo Galleria dengan Fitur Infinite Scroll

Pengembangan Widget

Proyek ini Saya hosting di GitHub: https://github.com/tovic/hompimpa/tree/master/Blogger-Masonry-Widget Jika Anda berminat untuk mengembangkan widget ini, Saya sudah menyimpan semuanya di sana.

jQuery Masonry Widget for Blogger JSON by Taufik Nurrohman is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License

Toggle Sidebar dengan jQuery

Pembaharuan 13 April 2013: Menyatukan JavaScript Cookie ke dalam plugin sebagai satu kesatuan.

Toggle Sidebar dengan jQuery

Karena banyak yang meminta jadi Saya membuatnya. Plugin ini digunakan untuk megubah sidebar blog menjadi toggle. Bisa ditampilkan dan bisa disembunyikan berdasarkan perintah. Demonya bisa dilihat di sini:

Lihat Demo

Sebagai catatan, Saya tidak bisa menjamin bahwa blog demo di atas akan terus Saya lengkapi dengan plugin ini, jadi jangan heran jika suatu saat nanti blog di atas tidak bekerja. Tapi pada intinya Saya sudah mengetes plugin ini pada template yang sesungguhnya.

Integrasi Plugin ke dalam Template

Pertama-tama masuk ke halaman editor HTML Template Anda:

Mengedit HTML

Temukan kode ini:

]]></b:skin>

Salin kode CSS di bawah ini dan letakkan di atasnya. Ini digunakan untuk mengatur dimensi tombol toggle:

#sidebar-toggler-wrapper {
  clear:both;
  position:relative;
}

#sidebar-toggler-wrapper a.sidebar-toggler {
  color:white;
  font:normal bold 11px/100% Arial,Sans-Serif;
  text-decoration:none;
  margin:0 0;
  padding:4px 10px;
  background-color:#123;
  border-left:4px solid #789;
  outline:none;
  position:absolute;
  bottom:0;
  right:0;
}

#sidebar-toggler-wrapper a.active {
  color:black;
  background-color:#789;
  border-left-color:#123;
}

Setelah itu temukan kode ini:

</head>

Salin kode ini dan letakkan di atasnya:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script><script src='http://dte-project.googlecode.com/svn/trunk/jquery-toggle-sidebar.min.js'></script>
<script>
//<![CDATA[
$(function() {
    $('#sidebar-wrapper').toggleSidebar({
        expand: "#main-wrapper"
    });
});
//]]>
</script>

Kode yang Saya garis bawahi adalah jQuery. Jika template Anda sudah dilengkapi dengan jQuery, singkirkan kode tersebut! Minimal versi 1.7, karena di sini (dan mulai saat ini) Saya tidak lagi memakai event .click() melainkan .on("click") Jika versi jQuery yang sedang Anda pakai berada di bawah itu, lebih baik ganti jQuery Anda dengan kode yang Saya garis bawahi di atas.

Klik Simpan Template.

Selektor #sidebar-wrapper adalah ID yang diambil dari sidebar yang akan muncul dan tampil berdasarkan perintah, sedangkan selektor #main-wrapper adalah elemen kolom yang akan melebar dan menyempit untuk menutupi kekosongan karena hilangnya sidebar. Saya rasa sampai di sini bisa dipahami. Jika belum, Saya beri gambaran mudahnya seperti ini:

Lihat Sampel

Bagian kiri adalah #main-wrapper yaitu kolom artikel/posting (sebut saja begitu) dan bagian kanan adalah #sidebar-wrapper yaitu sidebar blog.Kolom artikel & kolom sidebar = #main-wrapper & #sidebar-wrapper. Kesimpulannya:

$('#sidebar-wrapper').toggleSidebar({expand:"#main-wrapper"});

Begitu saja. Jika sudah berhasil, kita bisa memasuki konfigurasi lanjutan yang lebih mendalam. Tapi jika belum, mungkin ID kolom artikel dan sidebar blog Anda bukan berupa #main-wrapper dan #sidebar-wrapper. Sebagai contoh, template blog yang Saya gunakan memiliki dua kolom dengan masing-masing ID berupa #leftcol dan #rightcol:

Umumnya sebuah template memiliki ID kolom utama berupa #main-wrapper dan kolom sisi berupa #sidebar-wrapper. Tapi dalam beberapa template tidak begitu.

---

Pengaturan Lanjutan

Ada cukup banyak konfigurasi yang bisa dilakukan pada plugin ini. Termasuk pengaturan sesi kuki. Jadi, script cookie.js yang Saya sertakan di atas jquery-toggle-sidebar.js sebenarnya tidak perlu disertakan/bisa dibuang jika Anda menonaktifkan fitur sesi toggle pada sidebar:

$('#sidebar-wrapper').toggleSidebar({
    expand: "#main-wrapper",
    hideText: "⇒ Hide Sidebar",
    showText: "⇐ Show Sidebar",
    animated: false,
    animateSpeed: 400,
    easingType: null,
    extraWidth: 0,
    enableCookie: false,
    defaultHidden: false
});

Opsi	Keterangan
expand	Elemen yang akan melebar dan menyempit untuk mengisi kekosongan karena hilangnya sidebar
hideText	Label tombol saat sidebar sedang tampil
showText	Label tombol saat sidebar sedang tersembunyi
animated	Jika bernilai true maka efek animasi akan diterapkan pada saat proses muncul/hilangnya sidebar
animateSpeed	Digunakan untuk menentukan kecepatan animasi jika opsi animated bernilai true
extraWidth	Digunakan untuk menentukan lebar ekstra pada kolom artikel. Pada dasarnya, saat sidebar menghilang, lebar kolom artikel akan berubah berdasarkan perhitungan lebar dirinya sendiri ditambah dengan lebar sidebar yang disembunyikan. Opsi ini tidak terlalu penting dan hanya digunakan jika kolom artikel tidak melebar dengan lebar yang tepat. Nilai bisa berupa angka positif ataupun negatif. Positif akan menambah standar lebar kolom, sedangkan negatif akan mengurangi stardar lebar kolom saat sidebar sedang tersembunyi
easingType	Digunakan untuk menentukan tipe easing animasi jika opsi animated bernilai true
enableCookie	Jika true, sesi toggle pada sidebar akan diingat oleh peramban. Sehingga sesi sidebar tidak akan berubah ke sesi awal meskipun Anda berpindah-pindah halaman. Saya menggunakan JavaScript cookie yang cara kerjanya sudah pernah Saya jelaskan di sini
defaultHidden	Jika true sidebar akan disembunyikan saat keadaan normal.

jQuery Toggle Sidebar jQuery Toggle Sidebar Minified