Beginilah Accordion yang Dibentuk dengan jQuery Sederhana


Accordion Menu adalah menu yang umumnya berbentuk mini namun dibuat dengan beberapa efek animasi. Biasanya memiliki beberapa item (sub-menu) yang ketika diklik akan terbuka ataupun tertutup. Jika menu lainnya dibuka (diklik), maka menu sebelumnya yang terbuka akan otomatis tertutup.. begitu kira-kira. Baiklah, disini saya akan mengajarkan bagaimana membuat Accordion Menu dengan metode jQuery sederhana. Kita juga akan menggunakan sedikit efek untuk lebih menghidupkan Accordion tersebut.

Beginilah Accordion yang Dibentuk dengan jQuery Sederhana
Accordion yang kita ciptakan disini akan membutuhkan sedikit fungsi jQuery agar manfaatnya lebih maksimal. Dan jika anda mengikuti tutorial ini dengan benar, tentu Accordion yang anda dapatkan seharusnya persis seperti yang kita harapkan bersama. Berikut tutorial nya :

HTML
<div id="accordionxx">
<a href="#one" class="first">ARTIKEL TERAKHIR</a>
<div id="one"><i>Kolom untuk pembaharuan artikel baru...</i></div>
<a href="#two">KOMENTAR PENGUNJUNG</a>
<div id="two"><i>Kolom untuk semua komentar yang masuk...</i></div>
<a href="#three">DATA DAN STATISTIK HALAMAN</a>
<div id="three"><i>Kolom untuk informasi tambahan mengenai halaman...</i></div>
</div>
Pertama kita buat struktur HTML untuk menampilkan menu nya. Di dalam menu terdapat isi/konten yang akan ditampilkan. Konten dari menu dapat berupa tulisan, kode, gambar, dan sebagainya.
CSS
#accordionxx{margin-top:50px;border:thin solid #cecece;border-top:none;border-bottom:none;}
#accordionxx div{background:white;height:100px;line-height:100px;display:none;border-bottom:thin solid #cecece;padding-left:15px;}
a{display:block;width:483px;background:#f4f4f4;background-image:-webkit-linear-gradient(white,#ededed);background-image:-moz-linear-gradient(white,#ededed);background-image:-o-linear-gradient(white,#ededed);background-image:-ms-linear-gradient(white,#ededed);background-image:linear-gradient(white,#ededed);color:#959696;padding-left:15px;height:40px;line-height:40px;text-decoration:none;border-bottom:thin solid #cecece;font-family:Cambria;font-size:13px;font-weight:bold;text-shadow:0 1px 1px white}
.first{border-top:thin solid #cecece}
Saatnya mendekorasi Accordion Menu yang sudah mulai terbentuk dengan beberapa baris CSS. Perhatikan dalam berkas CSS di atas, meskipun kita hanya menggunakan kode-kode CSS sederhana, namun tampilannya akan selalu cocok pada berbagai template. Elemen -webkit, -moz, -o, dan -ms kita sertakan agar warna menu selalu konsisten di berbagai browser modern.
jQuery
$("#accordionxx div").first().css('display', 'block');
var link = $("#accordionxx a");
link.on('click', function(e) {
   e.preventDefault();
   var a = $(this).attr("href");
   $(a).slideDown('fast');
   //$(a).slideToggle('fast');
   $("#accordionxx div").not(a).slideUp('fast');
});
Setelah kerangka dasar dan CSS kita terapkan, waktunya membuat Accordion menjadi lebih hidup dengan jQuery sederhana. Kode jQuery inilah yang membuat Accordion menjadi berefek dan beranimasi ketika diklik (dibuka dan ditutup).


Kita telah selesai, anda dapat mencoba demonstrasi nya pada tautan di bawah ini. Demonstrasi nya saya buatkan persis seperti yang terlihat pada gambar di awal postingan ↓



Silahkan dicoba sendiri! ☺

Cara Terbaik Menyimpan Arsip Halaman Web di Internet Archive


Sudahkah anda memiliki tempat sebagai sarana penyimpan halaman-halaman web/situs anda secara online? Atau belum tahu bagaimana mengarsip keseluruhan halaman anda di satu tempat yang sama sehingga suatu saat bisa anda akses kembali dengan mudah? Kini anda tak perlu khawatir lagi, karena Internet Archive menyediakan solusi untuk mewujudkannya. Mungkin banyak diantara anda sudah pernah atau bahkan sering mengunjungi perpustakaan digital terbesar ini, tapi belum pernah menggunakan fitur penyimpan manual nya.

Cara Terbaik Menyimpan Arsip Halaman Web di Internet Archive
Baiklah, sedikit pengenalan tentang Internet Archive: Wayback Machine. Internet Archive merupakan perpustakaan digital non-profit yang diciptakan dengan misi sebagai "media akses universal untuk apapun". Apapun disini dapat berarti koleksi bahan digital, termasuk; laman situs, berkas musik, obyek/gambar bergerak, maupun buku-buku online. Mengapa Internet Archive diasumsikan menjadi perpustakaan digital terbaik? Karena pada faktanya website ini menyediakan tempat penyimpanan permanen sekaligus akses publik bebas kepada siapapun--dan kapanpun. Bukan hanya itu, anda juga dapat menyimpan apapun khususnya halaman web dengan gratis tanpa daftar--bahkan sekalipun dengan intensitas yang tak terbatas. Dan ekstrimnya lagi, halaman anda akan tetap tersimpan walaupun halaman yang sudah anda simpan sebelumnya ternyata sudah anda hapus.

Bagaimana caranya? Ikuti langkah-langkah mudah ini ↓



2. Masukkan url halaman yang anda mau di bagian "Save Page Now" di sebelah kanan bawah seperti yang ditunjukkan pada gambar berikut :

Cara Terbaik Menyimpan Arsip Halaman Web di Internet Archive
3. Kemudian tunggu sampai halaman anda benar-benar disimpan. Biasanya ada dua tahap; pertama > halaman anda akan di-render dan dirayapi | Kemudian kedua > proses bahwa halaman anda telah benar-benar disimpan.

4. Setelah itu anda boleh mengecek kembali url anda tersebut untuk memastikan apakah sudah masuk ke dalam Wayback Machine. // Anda bisa saja melakukannya berulang-ulang, sehingga cache anda akan semakin banyak dan mudah untuk anda cari.



Dapatkah anda bayangkan jika dari hari ke hari, bulan ke bulan, tahun ke tahun.. anda selalu rutin menyimpan halaman web anda di Internet Archive akan berapa banyak jumlahnya? Ho ho ho.. Lantas apa tujuan dan manfaatnya? Sederhana, ibaratkan anda sedang menyimpan ataupun menghibahkan buku di sebuah perpustakaan. Contoh lainnya; ibaratkan anda sedang mengkoleksi souvenir-souvenir anda di lemari anda. Dan contoh yang lebih konkrit; ibaratkan anda sedang menabung uang di celengan anda. Selamat mengumpulkan arsip anda! ☺

Membuat Triangle yang Responsif hanya Dengan Tag DIV dan CSS


Ada beberapa pendekatan yang dapat kita lakukan untuk menciptakan sebuah ataupun banyak triangle (segitiga) pada sebuah halaman. Sebagian orang membentuk nya dengan gambar, tetapi ada juga yang dengan menggunakan kode/script. Nah, pada postingan kali ini saya akan memperkenalkan sebuah metode yang mampu menciptakan bermacam triangle dengan serangkaian kode. Bahkan ini nantinya dipergunakan bukan hanya sekedar sebagai penunjang tampilan, tetapi ini juga akan sangat terkesan interaktif karena akan kita buat bersifat responsif pula. Semoga menjadi wawasan baru bagi yang belum pernah mengetahui nya.

Membuat Triangle yang Responsif hanya Dengan Tag DIV dan CSS
Yang kita butuhkan disini hanyalah tag DIV dan berkas CSS. Jadi tidak perlu repot-repot menggunakan JavaScript atau jQuery. Menetapkan ukuran triangle yang 'fixed' dengan CSS sebetulnya cukup mudah, karena kita hanya harus menentukan bagian batasan transparan dan bagian batasan berwarna nya dengan lebar = 0 dan elemen ketinggian = 0. Namun terkadang kesulitan nya adalah ketika kita ingin membentuk variabel untuk membuat ukuran triangle sedemikian rupa menjadi responsif. Untungnya saya telah mendapatkan solusi sederhana untuk mengatasi hal tersebut, mari kita pelajari bersama!

HTML Markup
<div class="triangle-up"></div>
<div class="triangle-right"></div>
<div class="triangle-down"></div>
<div class="triangle-left"></div>
<div class="triangle-up-right"></div>
<div class="triangle-down-right"></div>
<div class="triangle-down-left"></div>
<div class="triangle-up-left"></div>
Yap, supaya lebih komprehensif kita akan langsung membuat delapan triangle sekaligus dengan arah yang berbeda-beda. Perhatikan, kita menggunakan tag DIV di sesi ini.
CSS
div{float:left;margin:.5%}

.triangle-up{width:10%;height:0;padding-left:10%;padding-bottom:10%;overflow:hidden}
.triangle-up:after{content: "";display:block;width:0;height:0;margin-left:-500px;border-left:500px solid transparent;border-right:500px solid transparent;border-bottom:500px solid #4679BD}
.triangle-right{width:0;height:0;padding-top:5%;padding-bottom:5%;padding-left:5%;overflow:hidden}
.triangle-right:after{content: "";display:block;width:0;height:0;margin-top:-500px;margin-left: -500px;border-top: 500px solid transparent;border-bottom: 500px solid transparent;border-left:500px solid #4679BD}
.triangle-down{width:10%;height:0;padding-left:10%;padding-top:10%;overflow:hidden}
.triangle-down:after{content: "";display:block;width:0;height:0;margin-left:-500px;margin-top:-500px;border-left: 500px solid transparent;border-right: 500px solid transparent;border-top: 500px solid #4679BD}
.triangle-left{width:5%;height:0;padding-top:5%;padding-bottom:5%;overflow:hidden}
.triangle-left:after{content: "";display:block;width:0;height:0;margin-top:-500px;border-top: 500px solid transparent;border-bottom: 500px solid transparent;border-right: 500px solid #4679BD}
.triangle-up-right{width:0;height:0;padding-left:10%;padding-top:10%;overflow:hidden}
.triangle-up-right:after{content: "";display:block;width:0;height:0;margin-left:-500px;margin-top:-500px;border-left: 500px solid transparent;border-top: 500px solid #4679BD}
.triangle-down-right{width:10%;height:0;padding-top:10%;overflow:hidden}
.triangle-down-right:after{content: "";display:block;width:0;height:0;margin-top:-500px;border-top: 500px solid transparent;border-right: 500px solid #4679BD}
.triangle-down-left{width:10%;height:0;padding-bottom:10%;overflow:hidden}
.triangle-down-left:after{content: "";display:block;width:0;height:0;border-right: 500px solid transparent;border-bottom: 500px solid #4679BD}
.triangle-up-left{width:0;height:0;padding-bottom:10%;padding-left:10%;overflow:hidden}
.triangle-up-left:after{content: "";display:block;width:0;height:0;margin-left: -500px;border-bottom: 500px solid transparent;border-left: 500px solid #4679BD}
Untuk dapat memodifikasi berkas CSS di atas, yang diperlukan adalah memahami bagaimana cara mengatur proporsi dari tiap-tiap triangle. Height dan weight digunakan sebagai dasar penentuan rasio segitiga yang diinginkan. Sedangkan border-left, border-right, dan border-bottom seyogianya dipakai sebagai penentu panjang dan tinggi maksimum dari triangle yang responsif. Untuk padding dan margin nya.. pastikan anda menentukan nilai-nilai nya sesuai proporsi segitiga yang anda harapkan.


We've got it! ☺
Cukup dengan langkah-langkah sederhana di atas, kita sudah mendapatkan solusi jitu untuk membuat berbagai macam triangle/segitiga yang responsif. Dan kini anda sudah bisa dengan mudah menerapkannya di situs dan proyek-proyek anda lainnya. Sebagai demonstrasi untuk pembahasan ini, silahkan masuk ke tautan berikut ↓


Amati fleksibilitas dan kelebihan triangle nya. Selamat mencoba!

Konferensi Search Engine Strategies 2014 Akan Diadakan di Jakarta


Kabar baik bagi para pemerhati teknologi, pemasaran digital, media sosial, taktik analytics, dan mesin pencari.. karena sebentar lagi konferensi Search Engine Strategies (SES) di Indonesia yang terpusat di kota Jakarta akan dilaksanakan. Seperti yang tercantum pada jadwal SES 2014, konferensi besar ini sedang melakukan tour ke beberapa negara ASIA, termasuk Jakarta. Konferensi SES Jakarta akan dilaksanakan pada tanggal 19 Maret 2014. Dan ini merupakan acara internasional tentang Search Engine yang pertama kalinya diadakan di Indonesia. By the way, bagi yang belum pernah tahu apa itu SES (Search Engine Strategies) -- SES (Search Engine Strategies) merupakan serangkaian konferensi yang berfokus pada pemasaran dalam mesin pencari dan optimisasi mesin pencari. Konferensi ini dipelopori oleh Danny Sullivan.

Konferensi Search Engine Strategies 2014 Akan Diadakan di Jakarta
Konferensi Search Engine Strategies 2014 di Jakarta nanti akan menjadi titik pertemuan antar praktisi dan para professional yang bergelut di bidang-bidang tertentu. Anda dapat bergabung untuk mendapatkan materi; teknik pemasaran online terbaru, praktik terbaik memahami mesin pencari, teknologi-teknologi baru, sampai materi untuk membuat bagaimana bisnis anda tumbuh dan berkembang sesuai zaman.

Adapun poin-poin penting yang akan dibahas dalam konferensi tersebut, meliputi ↓

1 Mengenal Media Sosial
2 Twitter dan Otomasi
3 Taktik Pemasaran di Facebook
4 Mengenal Pemasaran Online
5 Konsep Perhitungan Pembayaran dari Pencarian
6 Pemasaran via Seluler
7 Metode Menggabungkan antara Objek Virtual dengan Objek Nyata
8 Dasar Analytics
9 PPC di luar Pencarian
10 Pengenalan SEO (Search Engine Optimization)

Selain hal-hal di atas, SES Jakarta 2014 juga akan mencakup area pameran sekaligus menyediakan ruang-ruang presentasi untuk studi kasus. Materi yang didiskusikan dalam studi kasus, yakni; manajemen PPC, penelitian kata kunci, optimisasi mesin pencari, media sosial, teknologi seluler, membangun link, email/surel, duplikat konten, optimisasi video, dan beberapa masalah situs lainnya. Konferensi ini akan sangat menarik karena dipastikan akan bertemu langsung dengan para ahli dan professional secara eksklusif. Dengan begitu akan lebih interaktif dan berpeluang memperluas jaringan peserta.

Anda dapat mengunggah brosur SES Jakarta 2014 dan menelusuri informasi detail nya pada tautan berikut ↓



Video Terkait ↓


dari : SESAsia

Contoh Penerapan Konsep Multi Direction Hover


Multi Direction Hover merupakan salah satu teknik yang kerap digunakan untuk tujuan mendapatkan efek hover dari arah yang berbeda-beda pada sebuah elemen atau obyek tertentu. Artinya dengan menggerakkan mouse (hover) dari atas, bawah, kiri, dan kanan ke sebuah obyek.. nantinya akan menghasilkan dorongan/overlay ke titik yang sama. Kita tidak membutuhkan jQuery disini, karena untuk membuat efek Multi Direction Hover, hanya menggunakan CSS dan beberapa HTML markup pun sudah bisa.

Contoh Penerapan Konsep Multi Direction Hover
Beda kasus apabila anda ingin menggunakan teknik yang sama ke banyak unsur sekaligus, jika begitu mungkin anda harus menggunakan elemen DOM dengan JavaScript untuk membuatnya. Baiklah untuk dapat memahami konsep Multi Direction Hover tadi, mari kita mulai dengan menggunakan contoh markup sederhana :

Markup Dasar
<p>↓</p>
<span>→ </span>
<div class="b-block">
  <div class="b-block__hoverer"></div>
  <div class="b-block__hoverer"></div>
  <div class="b-block__hoverer"></div>
  <div class="b-block__hoverer"></div>

  <div class="b-block__content">
   Hover disini!
  </div>
</div>
<span> ←</span>
<p>↑</p>
Ada 4 class (klasifikasi) yang mewakili arah hover yang berbeda-beda, yakni; atas, bawah, kiri, dan kanan. Dan ada satu class khusus yang mewakili konten.
CSS
.b-block{position:relative;display:inline-block;overflow:hidden;width:10em;height:10em;vertical-align:middle;-webkit-transform:translateZ(0)}

.b-block__hoverer{position:absolute;z-index:1;width:71%;height:71%;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}
.b-block__hoverer:nth-child(1){top:0;right:0;-webkit-transform-origin:100% 0;-moz-transform-origin:100% 0;-o-transform-origin:100% 0;transform-origin:100% 0}
.b-block__hoverer:nth-child(2){bottom:0;right:0;-webkit-transform-origin:100% 100%;-moz-transform-origin:100% 100%;-o-transform-origin:100% 100%;transform-origin:100% 100%}
.b-block__hoverer:nth-child(3){bottom:0;left:0;-webkit-transform-origin:0 100%;-moz-transform-origin:0 100%;-o-transform-origin:0 100%;transform-origin:0 100%}
.b-block__hoverer:nth-child(4){top:0;left:0;-webkit-transform-origin:0 0;-moz-transform-origin:0 0;-o-transform-origin:0 0;transform-origin:0 0}

.b-block__hoverer:hover{z-index:9;width:100%;height:100%;-webkit-transform:none;-moz-transform:none;-o-transform:none;transform:none}

.b-block__content{position:absolute;top:0;left:0;width:100%;height: 100%;text-align:center;line-height:10em;background:#333;color:#FFF;
-webkit-font-smoothing: subpixel-antialiased;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
-webkit-box-shadow: 0 -10em 0 0 red, 10em 0 0 0 blue, 0 10em 0 0 lime, -10em 0 0 0 orange; -moz-box-shadow: 0 -10em 0 0 red, 10em 0 0 0 blue, 0 10em 0 0 lime, -10em 0 0 0 orange; box-shadow: 0 -10em 0 0 red, 10em 0 0 0 blue, 0 10em 0 0 lime, -10em 0 0 0 orange; }

.b-block__hoverer:nth-child(1):hover ~ .b-block__content{-webkit-transform:translate(0, 100%);-moz-transform:translate(0, 100%);-o-transform:translate(0, 100%);transform:translate(0, 100%)}
.b-block__hoverer:nth-child(2):hover ~ .b-block__content{-webkit-transform:translate(-100%, 0);-moz-transform:translate(-100%, 0);-o-transform:translate(-100%, 0);transform:translate(-100%, 0)}
.b-block__hoverer:nth-child(3):hover ~ .b-block__content{-webkit-transform: translate(0, -100%);-moz-transform: translate(0, -100%);-o-transform: translate(0, -100%);transform: translate(0, -100%);}
.b-block__hoverer:nth-child(4):hover ~ .b-block__content{-webkit-transform: translate(100%, 0);-moz-transform: translate(100%, 0);-o-transform: translate(100%, 0);transform: translate(100%, 0)}
Agar setiap hover memiliki warna latar belakang yang berbeda, disini kita menggunakan nth selector. Tujuannya adalah untuk dapat membedakan indikasi hover dari arah manapun. Silahkan pelajari lebih lanjut tentang bagian-bagian yang ditandai berwarna pada berkas di atas.


Sebagai aplikasi nyata nya, silahkan coba demonstrasi di bawah ini ↓


Hover obyek ini dari arah yang berbeda-beda


Hover disini!



Fork me on jsFiddle



BEBERAPA PENGAMATAN ↓
1. Rentang gerakan mouse yang cepat sekalipun dari luar ke dalam obyek masih sangat memungkinkan untuk memicu transisi. Gerakan mouse yang cepat bisa jadi akan menghasilkan transisi ganda sesaat. Dari pengamatan ini bisa disimpulkan bahwasanya aksesibilitas nya masih bisa ditingkatkan.

2. Tentu saja anda sangat berpeluang untuk bereksperimen lebih jauh perihal konten yang ingin ditampilkan pada saat menggerakkan mouse (hover). Bahkan anda bisa saja mengisi konten yang berbeda pada arah hover yang berbeda pula sehingga obyek anda lebih terlihat menarik.