Sabtu, 28 Juli 2012

Tooltip Kustom Otomatis untuk Semua Tautan 

<script type="text/javascript">
//<![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

Diposting oleh di Tidak ada komentar:
Label: , , ,

Jumat, 27 Juli 2012

CSS3 Kolom

CSS3 Column-Count

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

Diposting oleh di Tidak ada komentar:
Label: ,

Minggu, 22 Juli 2012

Pure CSS3 Toggle Checkbox

Pure CSS3 Toggle Button

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

Diposting oleh di Tidak ada komentar:
Label: ,

Membuat Komentar Slide Panel pada Template Blogspot

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 template 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' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
var panelSelector = '#comments',
    openPanelText = "Poskan Komentar",
    closePanelText = "Tutup Komentar",
    slideDownPanelSpeed = 600,
    slideUpPanelSpeed = 400;
//]]>
</script>
<script src='http://reader-download.googlecode.com/svn/trunk/blogger-slide-panel-comments.js' type='text/javascript'></script>

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

Klik Simpan Template.

Sudah, begitu saja.

Lebih Jauh Lagi

Berikut ini adalah isi dari script 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 script 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!

Diposting oleh di Tidak ada komentar:
Label: , ,

Sabtu, 21 Juli 2012

Menambahkan Nomor Urut pada Daftar Komentar

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
Diposting oleh di Tidak ada komentar:
Label: , , , ,

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

Diposting oleh di Tidak ada komentar:
Label: , ,

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 Unduh JavaScript

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

<style type="text/css">
#dte_recent-post {
  margin:0 0;
  padding:0 0;
  font:normal 11px Arial,Sans-Serif;
  color:#333;
  margin:0 auto;
  min-height:100px;
  background:white url('http://reader-download.googlecode.com/svn/trunk/images/nivo-loading.gif') no-repeat 50% 50%;
}

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

#dte_recent-post li a img {
  float:left;
  margin:0 10px 0 0;
  padding:0 0;
  border:none;
  background:transparent;
  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 type="text/javascript">
//<![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     = "http://reader-download.googlecode.com/svn/trunk/images/meee-44x44.png", // 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 type="text/javascript" src="http://reader-download.googlecode.com/svn/trunk/blogger-recent-post-with-preloader.js"></script>

Konfigurasi Widget

OpsiKeterangan
rp_homePageGanti dengan URL blog Anda
rp_numPostsDigunakan untuk menentukan jumlah posting yang akan ditampilkan
rp_thumbWidthDigunakan untuk menentukan lebar thumbnail. Ubah lebarnya menjadi 0 untuk menghilangkan thumbnail
rp_numCharsDigunakan untuk menentukan jumlah karakter ringkasan posting
rp_sortByLabelGanti nilai false menjadi nama label untuk menampilkan posting berdasarkan label yang spesifik. Contoh: rp_sortByLabel = "JQuery" akan menampilkan semua posting dengan label JQuery
rp_noImageThumbnail cadangan jika posting yang tampil dalam widget tidak memiliki gambar
rp_monthNamesTentukan nama-nama bulan sesuai dengan sistem penanggalan di negara Anda
rp_newTabLinkJika bernilai true, maka semua tautan dalam widget akan terbuka di tab/jendela baru saat diklik
rp_loadTimerDigunakan 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.
Diposting oleh di Tidak ada komentar:
Label: , , ,

Jumat, 20 Juli 2012

Plugin JQuery Paralaks Sederhana

jquery paralax plugin
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 : LOL. It should be “parallax”, not “paralax” :D

Diposting oleh di Tidak ada komentar:
Label: , ,

Kamis, 19 Juli 2012

Auto Rotating Slideshow 

<style type="text/css">
#slideshow {
  width:200px;
  height:100px;
  background-color:#222;
  margin:0 auto;
}

#slideshow img {display:block;}
</style>
<div id="slideshow"></div>
<script type="text/javascript">
//<![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

Diposting oleh di Tidak ada komentar:
Label: , , ,

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: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

Diposting oleh di Tidak ada komentar:
Label: ,

Rabu, 18 Juli 2012

Memberi Tanda Pada Menu Berdasarkan Halaman yang Sedang Aktif

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 type='text/css'>
    #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 type='text/css'>
    <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 type='text/css'>
    <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 &quot;http://test.blogspot.com/&quot; 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;
}
Widget Halaman Statis

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

Diposting oleh di Tidak ada komentar:
Label: , , , , ,

Tema Vanila untuk Tag PRE

Tema Vanila untuk Tag PRE
Tema Vanila untuk Tag PRE

HTML

<pre data-codetype="HTML"> ... </pre>
<pre data-codetype="CSS"> ... </pre>
<pre data-codetype="JavaScript"> ... </pre>
<pre data-codetype="JQuery"> ... </pre>
<pre data-codetype="PHP"> ... </pre>
<pre data-codetype="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-codetype] {
  padding:29px 1em 7px 1em;
}

pre[data-codetype]:before {
  content:attr(data-codetype);
  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-codetype="HTML"] {border-color:#0B7E88;color:#08464B;}
pre[data-codetype="CSS"] {border-color:#7B990C;color:#4B5D08;}
pre[data-codetype="JavaScript"] {border-color:#545448;color:#1F2E24;}
pre[data-codetype="JQuery"] {border-color:#395540;color:#2E2E27;}
pre[data-codetype="PHP"] {border-color:#FF9900;color:#865003;}
pre[data-codetype="XML"] {border-color:#FF0C39;color:#790015;}

pre[data-codetype="HTML"]:before {background-color:#0B7E88;}
pre[data-codetype="CSS"]:before {background-color:#7B990C;}
pre[data-codetype="JavaScript"]:before {background-color:#545448;}
pre[data-codetype="JQuery"]:before {background-color:#395540;}
pre[data-codetype="PHP"]:before {background-color:#FF9900;}
pre[data-codetype="XML"]:before {background-color:#FF0C39;}
Lihat Demo
Diposting oleh di Tidak ada komentar:
Label: , ,

Selasa, 17 Juli 2012

Pure CSS3 Metal Checkbox

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

Diposting oleh di Tidak ada komentar:
Label: , ,

Senin, 16 Juli 2012

Teknik CSS Hack Checkbox & Radio

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

Diposting oleh di Tidak ada komentar:
Label: , ,

Minggu, 15 Juli 2012

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/
Diposting oleh di Tidak ada komentar:
Label: , , , , ,

Memperbesar/Mengubah Ukuran Thumbnail Posting

Memperbesar Thumbnail Posting

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

Pertanyaan Al-Firouz: Tentang bagaimana cara memperbesar thumbnail
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 type='text/javascript'>
//<![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:0px 10px 0px 0px;
}

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 type='text/javascript'>
//<![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 type='text/javascript'>
//<![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 type='text/javascript'>
//<![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>

bisa dilepaskan jika tujuan kita adalah untuk mengubah ukuran thumbnail widget, karena umumnya widget muncul pada semua tipe halaman.
Diposting oleh di Tidak ada komentar:
Label: , , , , ,

Jumat, 13 Juli 2012

Plugin Daftar Konten Otomatis Sederhana (1 Level)

Simple Auto Table of Content Plugin (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
Diposting oleh di Tidak ada komentar:
Label: , ,

Kamis, 12 Juli 2012

No Live Links - Mencegah Tautan Aktif Masuk ke dalam Komentar 

function blockLinks(parentID, children) {
    if (!document.getElementById(parentID)) return;
    var parent = document.getElementById(parentID),
        content = parent.getElementsByTagName(children);
    for (var i = 0; i < content.length; i++) {
        // Saya menggunakan pengukur berupa tag penutup, karena tag pembuka tidak tegas
        // Tag <a> tidak selalu diawali dengan atribut 'href',
        // sehingga mengecek indeks dengan menuliskan content[i].indexOf('<a href=\"') menjadi kurang akurat
        // Lebih baik gunakan tag penutup sebagai penanda adanya tautan di dalam konten
        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
Diposting oleh di Tidak ada komentar:
Label: , , , ,

Rabu, 11 Juli 2012

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

Diposting oleh di Tidak ada komentar:
Label: ,

Selasa, 10 Juli 2012

Rilis: 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 , 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.

Rilis: Galleria V2 - Widget Masonry untuk Blogger

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:

Blogger Post Editor
Menambahkan halaman statis baru

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

Blogger Post Editor
Pilih mode HTML

Salin kode di bawah ini kemudian letakkan di dalam formulirnya:

<link rel="stylesheet" type="text/css" href="http://hompimpa.googlecode.com/svn/trunk/Blogger-Masonry-Widget/theme/light.min.css"/>
<div id="dte-masonry-container"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="http://hompimpa.googlecode.com/svn/trunk/Blogger-Masonry-Widget/js/jquery.masonry.min.js" type="text/javascript"></script>
<script src="http://hompimpa.googlecode.com/svn/trunk/Blogger-Masonry-Widget/js/post.brick.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<![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: "http://hompimpa.googlecode.com/svn/trunk/Blogger-Masonry-Widget/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

OpsiKeterangan
viewModeDigunakan 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
homePageDigunakan untuk menentukan URL blog sumber feed
numPostsDigunakan untuk menentukan jumlah posting yang akan dipanggil setiap satu kali permintaan
numCharsDigunakan untuk menentukan jumlah karakter ringkasan/paragraf jika mode widget berupa "summary"
squareImageJika 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
newTabLinkJika bernilai true, semua tautan dalam widget akan terbuka di tab/jendela baru
columnWidthDigunakan untuk menentukan lebar setiap kolom/item posting. Menentukan lebar pada opsi ini juga akan mengubah resolusi gambar
subHeaderTextDigunakan untuk mengatur teks deskripsi kecil di bawah header pada mode "summary" (Misal: Diposting oleh Taufik di 21 April 2012)
monthNamesIni adalah daftar variabel nama-nama bulan. Ganti namanya sesuka hati sesuai dengan sistem penanggalan di negara Anda
commentLabelAbaikan 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
navTextprev 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
postCategorySecara 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
fallbackThumbGambar cadangan jika posting yang tampil tidak memiliki gambar
loadingTextDeskripsi indikator sedang memuat saat sedang memuat
loadedTextDeskripsi indikator sedang memuat saat semua item telah selesai dimuat
infiniteScrollJika 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)
bottomToleranceDigunakan untuk menentukan toleransi jarak bawah infinite scroll untuk mengurangi kalkulasi posisi navigasi widget terdekat terhadap bagian bawah layar.

Konfigurasi Plugin Masonry

OpsiKeterangan
fadeSpeedDigunakan untuk menentukan kecepatan fade pada gambar
resizeSpeedDigunakan untuk menentukan kecepatan perubahan ukuran kontainer gambar pada mode widget "thumbnail"
isAnimatedJalan 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
animateWithTransitionAlternatif 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
animationOptionsJalan penghubung untuk opsi animationOptions pada plugin Masonry. Digunakan untuk mengonfigurasikan efek animasi JavaScript (isAnimated:true)
isFitWidthJalan 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
gutterWidthJalan penghubung untuk opsi gutterWidth pada plugin Masonry. Digunakan untuk menentukan gutter/kerenggangan antaritem pada sisi dalam. Tidak terlalu penting - Selengkapnya tentang gutterWidth
isRTLJalan 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:

Pengembangan Widget

Proyek ini Saya hosting di Google Code: http://code.google.com/p/hompimpa/source/browse/trunk/Blogger-Masonry-Widget/ Jika Anda berminat untuk mengembangkan widget ini, Saya sudah menyimpan semuanya di sana.

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

Diposting oleh di Tidak ada komentar:
Label: , , , ,
Langganan: Postingan (Atom)