Kotak Penelusuran dalam Simbol

Menciptakan elemen kotak penelusuran tersembunyi dengan JQuery. Saat keadaan normal, kotak penelusuran akan tampak sebagai ikon kaca pembesar, dan saat ikon tersebut diklik, itu akan memicu kotak penelusuran di dalamnya untuk tampil:

HTML

<form class="search-form" action="/search" method="get">
    <div class="input-wrapper">
        <input type="text" name="q" placeholder="Search...">
        <a title="Search" class="sc" href="/"></a>
    </div>
</form>

CSS

.input-wrapper {
  border:1px solid #B9E8FB;
  width:26px;
  height:26px;
  background-color:white;
  -webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.2);
  -moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.2);
  box-shadow:inset 0 1px 1px rgba(0,0,0,.2);
  -webkit-border-radius:30px;
  -moz-border-radius:30px;
  border-radius:30px;
  overflow:hidden;
  position:relative;
}

.input-wrapper input,
.input-wrapper input:focus {
  border:none;
  background:none;
  margin:0 0;
  padding:0 16px;
  display:block;
  width:200px;
  height:26px;
  font:italic bold 12px/26px Arial,Sans-Serif;
  color:#1C86AF;
  outline:none;
}

.input-wrapper.focus {
  background-color:#EAF7FC;
  border-color:#3EBFF0;
}

.input-wrapper .sc {
  display:block;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  background:white url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAGOSURBVDhPrZJPSwJRFMXPokD6BkFQyzaRQUGrKII21a5Vu9oHLVq07hNUSFSYWqOmwjSGY0aRQqsCXUQJlaXSaEZamI2mTnV7WguNMUR6cHiX98793fv+AP8+9gvd2P9cYuKZdPDQYH01/NSMPcWCYyIcVMjL4r13AT7S/A1yFZzM+J3sUZYZbByisojDEuCD4C4GGKRJHbIjj+DoxyjI2iqTmGuHq/AIt0JwFgdqAF4dcOUJvDynanDK8xCLBCHjrQF48WE3S9h+61A18C/97DiEnXRaHWBPiuDTBHtqQtXgSE1BkAm2pF8dYHuYheOJYE3kVQ3WRACOVGl/uvZLmOMxWO4JW9IFzLExcNFWcNIouNgJrGzdHCup+oKraJzUBlM4DovE7iJB5YqlmbsjbEYfsBXJwp5k8U1v7S6MEQ2MoRnob5/L3RhvMzCEFrDmb4H+ugebkSI2Qp8w3HTV9zt/u0yhIQbMwRjOw3De1xhkNTiM9eAHTFHC2mVnYxDdqRb6KwUrZ5ONASqyvgCU5N7E8iBBBAAAAABJRU5ErkJggg==') no-repeat 50% 50%;
  -webkit-border-radius:30px;
  -moz-border-radius:30px;
  border-radius:30px;
}

JQuery

$(function() {
    $('.search-form .sc').on("click", function() {
        $(this).hide()
            .parent().addClass('focus')
                .stop().animate({width:200}, 120, "swing")
                    .find('input').trigger("focus")
                        .on("focusout", function() {
            $(this).next().show()
                .parent().removeClass('focus')
                    .stop().animate({width:26}, 120, "swing");
        });
        return false;
    });
});

Demo

Widget Daftar Isi Tabulasi untuk Blogger

Pembaharuan 29 Maret 2013: Menambahkan opsi thumbSize, noThumb, sortAlphabetically, showNew dan newText

Berikut ini adalah sebuah widget daftar isi blog berbentuk tabulasi. Terdiri dari dua sisi berupa daftar kategori dan daftar posting. Setiap nama kategori akan menjadi tab, sedangkan daftar posting akan menjadi konten tab yang akan muncul setiap kali tab diklik:

Lihat Demo Unduh CSS Unduh JavaScript

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="http://reader-download.googlecode.com/svn/trunk/tabbed-toc-skin.css" type="text/css" media="screen" />
<div id="tabbed-toc"><span class="loading">Memuat...</span></div>
<a style="display:block;text-align:right;font:normal bold 8px Arial,Sans-Serif;text-decoration:none;margin:10px;" href="http://hompimpaalaihumgambreng.blogspot.com/2012/10/widget-daftar-isi-tabulasi-untuk-bogger.html" title="Tabbed TOC">DTE :]</a>
<script type="text/javascript">
var tabbedTOC = {
    blogUrl: "http://nama_blog.blogspot.com", // Blog URL
    containerId: "tabbed-toc", // Container ID
    activeTab: 1, // The default active tab index (default: the first tab)
    showDates: false, // `true` to show the post date
    showSummaries: false, // `true` to show the posts summaries
    numChars: 200, // Number of summary chars
    showThumbnails: false, // `true` to show the posts thumbnails (Not recommended)
    thumbSize: 40, // Thumbnail size
    noThumb: "http://3.bp.blogspot.com/-vpCFysMEZys/UOEhSGjkfnI/AAAAAAAAFwY/h1wuA5kfEhg/s72-c/grey.png", // A "no thumbnail" URL
    monthNames: [ // Array of month names
        "Januari",
        "Februari",
        "Maret",
        "April",
        "Mei",
        "Juni",
        "Juli",
        "Agustus",
        "September",
        "Oktober",
        "November",
        "Desember"
    ],
    newTabLink: true, // Open link in new window?
    maxResults: 99999, // Maximum post results
    preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload")
    sortAlphabetically: true, // `false` to sort posts by published date
    showNew: 7, // `false` to hide the "New!" mark in most recent posts, or define how many recent posts are to be marked
    newText: " - <em style='color:red;'>New!</em>" // HTML for the "New!" text
};
</script>
<script type="text/javascript" src="http://reader-download.googlecode.com/svn/trunk/tabbed-toc.js"></script>

Ganti URL yang Saya beri tanda dengan alamat blog Anda kemudian klik Publikasikan.

Pengaturan Lanjutan

Opsi	Keterangan
blogUrl	Ganti nilainya dengan alamat blog Anda.
containerId	ID elemen yang akan digunakan sebagai penampung JSON yang sudah diproses (abaikan jika tidak perlu).
activeTab	Digunakan untuk menentukan nomor urut tab yang aktif (nilai 1 akan membuat tab di urutan pertama menjadi aktif, begitu pula konten tab pertama juga akan terbuka saat pertama kali halaman diakses).
showDates	Ganti nilainya menjadi true untuk menampilkan waktu terbit posting.
showSummaries	Ganti nilainya menjadi true untuk menampilkan ringkasan posting.
showThumbnails	Ganti nilainya menjadi true untuk menampilkan thumbnail posting (tidak direkomendasikan karena akan membuat halaman lama termuat).
thumbSize	Digunakan untuk menentukan ukuran thumbnail.
noThumb	URL gambar cadangan untuk posting yang tidak memiliki gambar di dalamnya.
monthNames	Digunakan untuk menentukan nama-nama bulan sesuai dengan sistem penanggalan di negara tempat Anda tinggal.
newTabLink	Jika bernilai true, semua tautan akan membuka di tab/jendela baru saat diklik.
maxResults	Jumlah maksimal posting yang akan ditampilkan.
preload	Digunakan untuk menentukan waktu penundaan pemuatan JSON. Gunakan satuan milidetik atau cukup tuliskan "onload" agar widget ini memuat setelah keseluruhan halaman telah selesai termuat.
sortAlphabetically	false untuk menyortir posting secara normal berdasarkan bulan terbit, true untuk menyortir posting berdasarkan alfabet.
showNew	false untuk menyembunyikan tanda New!. Ganti dengan angka untuk menentukan berapa banyak posting terbaru yang ingin ditandai dengan label New!.
newText	Markup HTML bebas untuk membuat label New! pada posting-posting terbaru.

HoverTimeout, Plugin Kecil Seperti HoverIntent

Mungkin Anda pernah mendengar istilah JQuery HoverIntent. Ini adalah versi ringkasnya:

// JQuery hover event with timeout by Taufik Nurrohman
// https://plus.google.com/108949996304093815163/about
(function($) {
    $.fn.hoverTimeout = function(timeout1, fn1, timeout2, fn2) {
        return this.each(function() {
            var t = null, $this = $(this);
            $this.hover(function() {
                clearTimeout(t);
                t = setTimeout(function() {
                    fn1.call($this);
                }, timeout1);
            }, function() {
                clearTimeout(t);
                t = setTimeout(function() {
                    fn2.call($this);
                }, timeout2);
            });
        });
    };
})(jQuery);

Fungsinya adalah untuk menciptakan timeout pada event .hover() JQuery.

Harap dipahami bahwa timeout berbeda dengan delay.
.delay() dalam JQuery memang memiliki kemampuan untuk menahan animasi yang akan terjadi, namun dia tidak memiliki kemampuan untuk membatalkannya. .hoverTimeout() digunakan untuk mengatasi masalah ini. Untuk lebih jelasnya, pelajari halaman demo di bawah ini:

Lihat Demo

Cara menggunakannya sama dengan .hover(). Hanya saja, setiap fungsi harus diberi awalan berupa waktu penundaan animasi (bahkan plugin ini juga bekerja untuk efek non-animasi):

/* ---------------------------------------
  => Dasar pola event `hover()` JQuery

$('div').hover(function() {
    $(this).animate({width:200}, "slow");
}, function() {
    $(this).animate({width:100}, "slow");
});
   --------------------------------------- */

// Dengan `.hoverTimeout()`
$('div').hoverTimeout(1000, function() {
    $(this).animate({width:200}, "slow");
}, 500, function() {
    $(this).animate({width:100}, "slow");
});

1000 adalah waktu tunda animasi saat pointer memasuki elemen <div>. 500 adalah waktu tunda animasi saat pointer keluar dari elemen <div>.

JSON Blogger dengan Ajax JQuery

HTML

<div id="result">Loading...</div>

JQuery

// $.ajax({url:feedUrl,type:'get',dataType:'jsonp',success:function(json){ ... }});
$(function() {
    $.ajax({
        url: 'http://hompimpaalaihumgambreng.blogspot.com/feeds/posts/summary?alt=json-in-script',
        type: 'get',
        dataType: 'jsonp',
        success: function(data) {
            var link, title, skeleton = '',
                content = data.feed.entry;
            if (content !== undefined) {
                skeleton = "<ol>";
                for (var i = 0; i < content.length; i++) {
                    title = content[i].title.$t;
                    for (var j = 0; j < content[i].link.length; j++) {
                        if (content[i].link[j].rel == "alternate") {
                            link = content[i].link[j].href;
                            break;
                        }
                    }
                    skeleton += '<li><a href="' + link + '">' + title + '</a></li>';
                }
                skeleton += '</ol>';
                $('#result').html(skeleton);
            } else {
                $('#result').html('<span>No result!</span>');
            }
        },
        error: function() {
            $('#result').html('<strong>Error Loading Feed!</strong>');
        }
    });
});

Lihat Demo

Referensi: Blogger JSON Feed With JQuery Ajax

JQuery Tab

HTML

<div id="tab-outer">
    <ul id="tab-wrapper">
        <li><a href="#tab1">Tab 1</a></li>
        <li><a href="#tab2">Tab 2</a></li>
        <li><a href="#tab3">Tab 3</a></li>
        <li><a href="#tab4">Tab 4</a></li>
    </ul>
    <div id="tab-body">
        <div id="tab1">Konten...</div>
        <div id="tab2">Konten...</div>
        <div id="tab3">Konten...</div>
        <div id="tab4">Konten...</div>
    </div>
</div>

CSS

#tab-outer {
  position:relative;
  font:normal 12px Arial,Sans-Serif;
}

#tab-outer * {
  margin:0px 0px;
  padding:0px 0px;
}

#tab-wrapper {
  list-style:none;
  height:30px;
}

#tab-wrapper li {
  margin:0px 0px 0px 2px;
  float:left;
  font-weight:bold;
}

#tab-wrapper li a {
  display:block;
  padding:0px 15px;
  line-height:30px;
  text-decoration:none;
  color:white;
  background-color:#CD4A07;
}

#tab-wrapper li.active a {
  background-color:#A23E0D;
}

#tab-body > div {
  background-color:#A23E0D;
  color:white;
  padding:10px 15px;
  border-bottom:4px solid #CD4A07;
}

JQuery

$(function() {
    $('#tab-wrapper li:first').addClass('active'); // Tambahkan class='active' pada tab pertama
    $('#tab-body > div').hide(); // Sembunyikan konten tab
    $('#tab-body > div:first').show(); // Tapi tampilkan konten tab yang pertama
    // Saat tab diklik...
    $('#tab-wrapper a').click(function() {
        // Hilangkan kelas 'active' pada tab yang ditemukan
        $('#tab-wrapper li').removeClass('active');
        // Terapkan kelas 'active' pada tab yang diklik
        $(this).parent().addClass('active');
        var activeTab = $(this).attr('href'); // Dapatkan ID dari URL
        // Sembunyikan konten tab
        $('#tab-body > div:visible').hide();
        // Tampilkan konten tab dengan ID yang sama berdasarkan URL tab yang diklik
        $(activeTab).show();
        return false;
    });
});

Lihat Demo

Tag Kondisional Halaman Label dan Pencarian

Saya baru menyadari ternyata tag kondisional halaman label dan halaman pencarian bisa ditemukan melalui logika script Widget Manager yang terdapat di atas </body>. Untuk itu Saya bisa menyimpulkan hasilnya seperti ini:

Tag Kondisional Halaman Label Tertentu

<b:if cond='data:blog.searchLabel == &quot;Liburan&quot;'>
    Saya akan tampil di halaman label `Liburan`
</b:if>

Pola URL halaman label:

• http://nama_blog.blogspot.com/search/label/Liburan

Tag Kondisional Halaman Pencarian

<b:if cond='data:blog.searchQuery == &quot;css&quot;'>
    Saya akan tampil di halaman pencarian yang memiliki kata kunci `css`
</b:if>

Pola URL halaman pencarian:

• http://nama_blog.blogspot.com/search?q=css

Jump Link/Hash Tag Link dengan Jarak

h2[id]:before {
  display:block;
  content:"";
  height:50px;
  margin:-50px 0 0;
  visibility:hidden;
}

Referensi: Nicolas Gallagher - Jump Links and Viewport Positioning

Pembaharuan

Ternyata lebih efektif dan praktis yang ini, meskipun efeknya tidak begitu bagus jika Anda menambahkan warna latar pada setiap elemen heading:

/* Jarak atas diatur menjadi 30 piksel terhadap batas atas layar */
h1,h2,h3,h4,h5,h6 {
  padding-top:30px;
  margin-top:-30px;
}

Konsep Kotak Pencarian Tersembunyi di dalam Header

HTML

<header id='site-header'>
    <div class='inner'>
        <h1><a href='/'>Site Name</a></h1>
        <p>Lorem ipsum dolor sit amet...</p>
    </div>
    <div class='inner hidden'>
        <form action='/search' method='get'>
            <input type='text' name='q' placeholder='Search...'>
        </form>
    </div>
</header>

CSS

#site-header {
  background-color:#6A2E79;
  overflow:hidden;
  text-shadow:0 1px 0 rgba(0,0,0,.1);
  margin:0 0 20px;
  position:relative;
}

#site-header .inner {padding:20px 30px}

#site-header a {
  text-decoration:none;
  color:white;
}

#site-header a:hover {color:#E0FFED}

#site-header h1 {
  font-size:30px;
  text-transform:uppercase;
}

#site-header p {margin:10px 0 0}

#site-header form input {
  border:1px solid #743983;
  background-color:#3B2440;
  font:normal normal 12px Verdana,Arial,Sans-Serif;
  color:#95799B;
  padding:5px 5px;
  margin:0 auto;
  display:block;
  width:98%;
  -webkit-box-shadow:inset 0 1px 3px black;
  -moz-box-shadow:inset 0 1px 3px black;
  box-shadow:inset 0 1px 3px black;
}

#site-header .toggle-button {
  display:block;
  font-weight:bold;
  padding:10px 18px;
  text-align:right;
  border-top:1px solid #5D216C;
}

.hidden {display:none}

JQuery

$(function() {
    var $header = $('#site-header'),
        $panel = $header.find('.inner');
    // Insert a toggle button
    $header.append('<span class="toggle-button"><a href="/">Search</a></span>');
    // Click the toggle button to slide the panel
    $header.find('.toggle-button a').on("click", function() {
        if ($(this).html() == 'Search') {
            $(this).html('&times;');
        } else {
            $(this).html('Search');
        }
        $panel.slideToggle('slow');
        return false;
    });
});

Lihat Demo

Kompresor HTML

Sebuah alat kecil untuk mengompres kode HTML. Paste beberapa potong kode HTML kemudian klik tombol kompresi:

Coba Alat

Kalkulator CSS Grid

Kalkulator CSS Grid adalah alat kecil untuk merancang layout grid dengan cepat. Cara menggunakannya mudah. Cukup tentukan jumlah kolom dan jarak antar kolom, kemudian kode CSS dan markup HTML akan muncul di bawahnya:

Coba Alat