Verifikasi Blog ke Akun Pinterest

Bismillah. Alhamdulillah. Pada tanggal 24 Oktober 2012, pihak Pinterest mengumumkan penambahan fasilitas terbarunya yaitu verifikasi website yang ditulis pada halaman support.pinterest.com. Jika diterjemahkan secara bebas pengumuman itu berbunyi "Akun dengan situs terverifikasi berarti telah mengkonfirmasi kepemilikan situs web mereka menggunakan proses verifikasi otomatis yang kami sediakan. Situs terverifikasi menetapkan hubungan antara situs web dengan akun di Pinterest. Akun dengan situs terverifikasi ditandai dengan tanda centang yang ditampilkan disamping alamat situs web di halaman profil mereka dan di bawah nama mereka dalam hasil pencarian."

Kesulitan Verfikasi Pengguna Blogger

Bagi para pengguna hosting berbayar, proses verifikasi blog atau situs ke akun Pinterest tidaklah terlalu sulit. Namun bagi para pengguna blog gratisan terutama pengguna Blogger (a.k.a Blog*spot) hal ini cukuplah rumit. Karena ada beberapa kesulitan dan persyaratan untuk melakukan verifikasi blog ke akun Pinterest, diantaranya:

• Pinterest tidak menyediakan teknik verifikasi melalui meta tag tetapi menggunakan file tersendiri yang disediakan pihak Pinterest.
• File verfikasi harus diupload pada root dan bukan pada subfolder (subdirectory) di halaman blog atau situs yang anda kelola.
• Link atau URL halaman verifikasi dari pihak Pinterest yang telah diupload pada blog harus dapat diakses dengan lokasi seperti ini "http://www.contoh.com/pinterest-45776.html" dan tidak boleh dalam lokasi lain, misal "http://www.contoh.com/p/pinterest-45776.html" atau "http://www.contoh.com/blog/pinterest-45776.html"

Namun bukan berarti tidak ada jalan untuk melakukan proses verifikasi blog ke akun Pinterest, seperti pepatah "Banyak jalan menuju ke Roma". Sedankan bagi para pengguna hosting berbayar, silahkan mengikuti petunjuk yang telah disediakan pihak Pinterest pada artikel mereka berjudul "How do I verify my website?".

Verifikasi Pinterest untuk Pengguna Blogger

Kenapa pihak Pinterest menggunakan satu metode saja dalam melakukan verifikasi blog? Dan kenapa tidak menggunakan metode sisipan Meta Tag seperti halnya pihak-pihak lain? Entahlah, itu semua kebijakan mereka. Kita hanya pengguna yang cukup senang dengan layanan gratis Pinterest. Bagi para pengguna blog gratisan terutama pengguna Blogger, silahkan ikuti langkah dibawah ini dalam melakukan proses verifikasi blog ke akun Pinterest.

Langkah 1
Login ke Pinterest
Langkah 2
Masuk ke menu Setting Profile

Langkah 3

Scroll halaman sampai ditemukan lokasi Website. Isi dengan alamat blog anda, kemudian klik tombol "Verify Website"

Langkah 4

Sebuah halaman proses verifikasi terbuka, kemudian cari link pada bagian "Can I verify?" kemudian klik link pada kalimat "click here for instructions"

Langkah 5

Sebuah informasi langkah verfikasi terbuka, yang terdiri dari 3 langkah. Klik link "Download the HTML verification file" kemudian simpan file tersebut pada komputer anda

Langkah 6
Buka file hasil unduhan (misal; pinterest-45776.html) menggunakan native text editor (misal; notepad)
Langkah 7
Login ke Blogger
Langkah 8
Masuk ke dasbor blog dan pilih menu "Laman"
Langkah 9
Klik menu "Laman Baru" dan klik "Laman kosong" untuk membuat sebuah halaman baru pada blog

Langkah 10

Teks Editor Blogger terbuka. Isi judul halaman sesuai dengan nama file hasil unduhan dari Pinterest (misal; pinterest-45776). Hati-hati! Jangan disertakan ekstensi file-nya, misal; jangan diberi judul "pinterest-45776.html", cukup "pinterest-45776". (Nama file berbeda-beda sesuai dengan pemberian dari pihak Pinterest)

Langkah 11

Pindahkah mode teks editor blog ke mode HTML, jangan di mode Compose. Copy file unduhan yang telah dibuka menggunakan notepad tadi, dan paste pada isi halaman di teks editor blog.

Langkah 12
Klik tombol "Publikasikan"
Langkah 13
Buka blog anda pada tab baru dan pastikan halaman yang baru saja diterbitkan tersedia. misal;

http://contoh.blogspot.com/p/pinterest-45776.html

Langkah 14

Jika halaman yang baru saja diterbitkan sudah tersedia, kembali ke dasbor blog. Pilih menu "Setelan" dan pilih submenu "Preferensi penelusuran"

Langkah 15
Masuk ke bagian "Kesalahan dan Pengalihan" kemudian klik link "Edit" pada bagian "Pengalihan Khusus"

Langkah 16
Tambahkah link pengalihan. Misal:

Dari: /pinterest-45776.html

Kepada: /p/pinterest-45776.html

Proses pengalihan ini ditujukan agar Pinterest tidak menuju kehalaman yang salah. Jika halaman tidak dialihkan, maka Pinterest akan menampilkan "error 404" yang berarti halaman tidak ditemukan.

Langkah 17
Klik link "Simpan" dan klik tombol "Simpan perubahan"
Langkah 18
Buka halaman baru pada blog anda dengan menuliskan alamat URL sesuai dengan pengalihan, misal;

http://contoh.blogspot.com/pinterest-45776.html

Maka halaman harus dialihkan menuju ke:

http://contoh.blogspot.com/p/pinterest-45776.html

Langkah 19

Jika halaman verifikasi tersebut sudah terbuka pada blog anda, scroll halaman hingga ditemukan tombol merah "Go To Pinterest" dan kemudian klik tombol tersebut

Langkah 20

Halaman verifikasi seperti sebelumnya akan terbuka kembali, kemudian klik link "Click here to complete the process"

Langkah 21

Tunggu sebentar karena Pinterest sedang melakukan proses verifikasi pada blog kita. Jika proses verifikasi berhasil maka akan muncul keterangan "We successfully verified your website!". Hal ini berarti proses verifikasi blogger pada ke akun Pinterest berhasil.

Langkah 22

Klik link "Go to your profile" untuk memastikan bahwa tanda centang (checklist) telah tampil disamping URL blog pada halaman profile Pinterest anda.

Langkah 23

Pastikan lagi bahwa tanda cheklist tampil disamping URL blog anda dibawah photo profile dengan melakukan pencarian dengan kata kunci nama anda pada halaman Pinterest

Langkah 24

Jika tampil berarti anda telah berhasil. Waktunya untuk ngopi sinambi leyeh-leyeh ngrungokno ladrang jowo...

Kesimpulan

Proses verifikasi blog ke akun Pinterest telah berhasil dan mudah-mudahan berhasil. Jika sudah berhasil waktunya kita memikirkan "Untuk apa proses verifikasi ini? Apakah berpengaruh terhadap posisi blog kita dimata mesin pencari?" Entahlah... Kita hanya menikmati dan menjalani proses sebagai seorang penulis dan pengelola blog, mengenai manfaat jelas ada namun mungkin belum kita rasakan...

Selamat mencoba dan semoga berhasil. Happy blogging :)

Read More

Bersihkan Website dari Badware-Malware

Pernahkah anda melihat sebuah peringatan yang berisi "Mengunjungi situs ini dapat membahayakan komputer anda!" pada saat anda berkunjung ke sebuah blog atau situs? Sungguh sangat menyebalkan ketika blog kita kemudian terdeteksi sebagai situs yang membahayakan, padahal kita tidak pernah melakukan atau bertindak sebagai badware. Hal ini terjadi karena ulah Badware. Badware adalah perangkat lunak yang memiliki prinsip dasar mengabaikan kenyamanan pengguna tentang bagaimana menggunakan komputer atau koneksi jaringan^[1]. Badware memang dirancang khusus untuk tujuan kriminal, politik, dan/atau tujuan nakal. Tujuan-tujuan tersebut mungkin mencakup:

• mencuri nomor rekening keuangan, password, rahasia dagang perusahaan, atau informasi rahasia lainnya;
• menipu pengguna untuk membeli sesuatu yang tidak perlu;
• mengirim email sampah (spam);
• menyerang komputer lain atau jaringan;
• mendistribusikan ulang badware.

Jenis badware sering disebut sebagai malware, dan termasuk didalamnya virus, trojan, rootkit, spam bot, dan varian lainnya.

Metode Distribusi Badware

Sebuah situs web badware memfasilitasi distribusi badware, baik karena kesengajaan atau karena disusupi. Banyak atau bahkan mungkin sebagian besar situs badware telah mendistribusikan badware tanpa sepengetahuan pemilik situs. Ada beberapa metode yang digunakan badware untuk menginfeksi targetnya, diantaranya:

1. Drive-by download merupakan metode yang paling sering dilakukan badware dalam menginfeksi target. Sebuah perangkat lunak akan secara otomatis terunduh dan ter-install pada komputer secara diam-diam pada saat target sedang mengunjungi sebuah situs badware. Serangan ini biasanya memanfaatkan kerentanan (vulnerability) atau celah (bug) pada browser, plugin browser, atau perangkat lunak lainnya pada komputer yang sedang mengakses situs badware.
2. Social engineering attack merupakan metode lainnya yang memanfaatkan keuntungan dari kelemahan sifat manusia (human error) dengan menipunya untuk menginstall badware pada komputer target. Manusia bersifat tertarik dengan sesuatu yang menurutnya menarik untuk ditelusuri, hal ini dimanfaatkan oleh badware, misal dengan menampilkan sebuah link yang menarik perhatian, ketika di klik maka badware akan terinstall didalam komputernya. Ada juga badware yang bisa menampilkan scan virus palsu dengan menampilkan informasi bahwa komputer terinfeksi sehingga mendorong pengguna untuk mengunduh atau membeli perangkat lunak pembersih komputer yang terinfeksi. Cara lain yang lebih menarik dan umum yaitu menampilkan kotak dialog berisi tawaran sebuah video yang hanya bisa tampil ketika pengguna telah menginstal sebuah plugin atau codec yang telah disediakan, padahal pengguna diarahkan untuk menginstall badware.

Situs Web Terdeteksi Badware

Sebuah situs web di anggap situs web badware jika diketahui menyediakan dan atau mendistribusikan badware serta tidak memenuhi kategori situs pengecualian untuk sebuah situs web badware. Dibawah ini cakupan suatu situs web dianggap dan terdeteksi sebagai situs web badware, diantaranya:

1. Menjadi pemilik atau pendistribusi badware secara langsung dari situs mereka;
2. Secara otomatis mengalihkan (redirect) ke alamat situs web pemilik atau pendistribusi badware;
3. Terkait ke file executable yang mengandung badware, baik ke situs web pemilik atau situs web pendistribusi badware;
4. Terkait ke website lain yang secara otomatis mencoba untuk menginstal badware dengan mengeksploitasi ke komputer pengguna;
5. Menyebabkan browser secara otomatis memuat kode dari situs lain yang kemudian mencoba untuk menginstal badware pada komputer pengguna;
6. Berisi link substansial (baik itu bawaan atau penerbitan) ke website lain yang berfungsi sebagai penyedia atau pendistribusi badware.

Namun ada juga pengecualian situs web yang mengandung badware namun tidak dideteksi sebagai situs web badware dengan syarat:

1. Penyedia unduhan repositori dengan tujuan pembelajaran tentang bagaimana mendeteksi dan menghapus entri badware;
2. Situs atau halaman yang secara sah terlibat dalam penelitian nirlaba atau pendidikan badware;
3. Peng-indeks-an situs yang otomatis dan komprehensif (misal; mesin pencari).

Bersihkan Situs Web (Khusus Blogger)

Jika Google mendeteksi bahwa situs telah diganggu atau disusupi badware, Google akan memberitahu tentang hal itu melalui Alat Webmaster (untuk memperoleh pemberitahuan secepatnya, kita dapat menggunakan pusat pesan agar diteruskan ke account email kita). Jika situs web disusupi malware, Google akan mengidentifikasi dan menambahkan informasi situs yang telah terinfeksi pada hasil pencarian untuk melindungi pengguna lainnya.

Jika situs telah di-hack atau terinfeksi malware, kita harus bertindak cepat untuk memperbaiki kerusakan. Unduh e-book "What to Do If Your Website Has Been Hacked by Phishers" yang telah ditulis dan disediakan gratis oleh organisasi antiphishing.org.

Dibawah ini langkah-langkah untuk membersihkan situs web yang terinfeksi badware/malware:

1. Karantina Situs Web

Ini adalah tindakan awal agar malware tidak menyebar dengan cepat dan menginfeksi lebih banyak lagi komputer. Tutup blog anda agar hanya anda saja yang mampu membuka halaman blog. Segera ubah password untuk mencegah login illegal ke dalam dasbor blog anda.

2. Identifikasi Kerusakan

Setelah situs web anda di karantina, lakukan identifikasi cakupan dan skala kerusakan yang telah ditimbulkan. Berikut langkah-langkah identifikasi situs web yang terinfeksi badware:

a) Google SafeBrowsing

Kunjungi Laman Google SafeBrowsing untuk mendiagnosa situs (http://www.google.com/safebrowsing/diagnostic?site=modification-blog.blogspot.com) (ganti modification-blog.blogspot.com dengan URL situs Anda sendiri) dan untuk melihat informasi lengkap yang telah ditemukan oleh scanner otomatis Google (Lihat Gambar 1).

b) Scan Komputer

Scan komputer menggunakan program scanning yang up-to-date untuk mengidentifikasi kode berbahaya yang telah di tambahkan oleh badware. Pastikan untuk memindai semua konten, bukan hanya file berbasis teks, karena ada beberapa konten berbahaya yang dapat tertanam pada file gambar.

c) Periksa Malware

Jika situs telah terinfeksi malware, periksa halaman melalui Alat Webmaster. (Pada dashboard situs, klik Blog anda, klik Diagnostik dan kemudian klik Program jahat. Lihat Gambar 2) Halaman daftar URL dari situs Anda yang telah diidentifikasi mengandung kode berbahaya akan ditampilkan. Terkadang badware juga akan menambahkan URL baru ke situs Anda untuk tujuan jahat mereka.

d) Hapur URL Terinfeksi

Gunakan alat Penghapusan URL di Alat Webmaster untuk meminta penghapusan halaman atau URL yang terinfeksi. Ini akan mencegah halaman yang terinfeksi agar tidak tersajikan lagi kepada pengguna (Lihat Gambar 3). Klik Konfigurasi Situs, klik Akses Perayap kemudian klik tab Hapus URL. Klik tombol Buat permintaan penghapusan baru, masukan URL, klik tombol Terus, kemudian klik tombol Kirim Permintaan (Lihat Gambar 4).

e) Ambil Googlebot

Laporkan laman phishing ke tim Google Safe Browsing.
Gunakan alat Ambil sebagai Googlebot pada Alat Webmaster untuk mendeteksi malware yang mungkin tersembunyi dari browser pengguna, sekaligus berfungsi untuk crawler (index ulang) mesin pencari Google (Lihat Gambar 5).

f) Baca Artikel Terbaru

Buka halaman antiphishing.org jika anda berurusan dengan situs yang terkena hack.

g) Periksa Silang Situs Lainnya
Jika anda memiliki situs lainnya, periksa untuk melihat apakah blog lainnya juga telah terinfeksi.

3. Bersihkan Situs Web

Bersihkan konten, hapus halaman atau gadget, periksa kata kunci yang mengarah pada kata-kata badware (misal; viagra, sex dan sebagainya), hapus spam, dan kode-kode mencurigakan yang telah teridentifikasi oleh virus scanner atau Diagnotstik Program jahat pada Alat Webmaster. Hati-hatilah menggunakan script-script dari pihak ke tiga terutama blog yang tidak anda percayai. Pastikan menggunakan script dari blog atau situs yang benar-benar anda kenal dan sudah di kenal dengan baik oleh blogger lain. Periksa ulang seperti langkah-langan Identifikasi Kerusakan untuk memastikan bahwa situs web anda benar-benar bersih.

Selamat bersih-bersih, semoga artikel ini bisa membantu anda. Happy Blogging :)

Pranala Luar:

1. Stop Badware
2. Results labeled This site may harm your computer!
3. About malware and hacked sites
4. Cleaning your site

Read More

jQuery Animation - Hover Image Caption

Artikel kali ini kita akan membahas cara memberikan caption atau deskripsi pada gambar dengan bantuan jQuery untuk memberikan efek animasinya. Ketika kita mengarahkan pinter mouse (hover) diatas gambar maka caption yang tadinya disembunyikan akan dimunculkan dengan efek slideup. Pergeseran caption juga akan menggeser posisi gambar keatas. Dan ketika pointer mouse di geser menjauh dari gambar maka caption akan kembali turun dengan efek slidedown hingga tersembunyi, sedangkan gambar akan kembali turun pada posisi semula. Demikian sekilas gambaran cara kerja jQuery Animation - Hover Image Caption, namun harus diperhatikan bahwa script jQuery ini tidak bekerja dengan baik pada framework jQuery versi 1.7.1. Silahkan lihat demo dibawah ini untuk melihat hasil akhirnya.

Demo jQuery Animation Hover Image Caption

Skenario HTML

Skenario kode HTML dibawah ini silahkan sesuaikan saja dengan kebutuhan. Hal terpenting adalah class figure-caption dan class figure-caption-text.

<div class="figure-caption">
 <a href="http://modification-blog.blogspot.com/" title="Blogger Tune-Up" target="_blank">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuQCzb8LOyS5YcHS6aCY4e7xPYaxo3jpb5yFqKBFWFLqBFDlBZHjq7aZpZGMCNodMhuyhgvRLJX0wUEVemL1A1RQ57mcqJAqDP3gu2OUgy7t1b6I6wXuOM2I4pAOUuil1sToHQRs4FQIY/s380/003.jpg"/>
 </a>
 <p class="figure-caption-text">
  Blogger Tune-Up adalah teknologi blog populer yang dipelihara oleh Dede Hendriono. Topik fokus pada web design, tutorial, blogger hack dan sumber inspirasi.
 </p>
</div>

Update! Skenario HTML 5

Terima kasih untuk sahabat blogger Taufik Nurrohman yang telah menambahkan skenario HTML untuk versi 5. Bagi anda yang sudah menerapkan template Blogger versi HTML5 atau bagi penggunan non Blogger yang sudah menggunakan HTML 5, skenario HTML5 dibawah ini cocok bagi yang sangat memperhatikan HTML Typography.

<figure class="figure-caption">
 <a href="http://modification-blog.blogspot.com/" title="Blogger Tune-Up" target="_blank">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuQCzb8LOyS5YcHS6aCY4e7xPYaxo3jpb5yFqKBFWFLqBFDlBZHjq7aZpZGMCNodMhuyhgvRLJX0wUEVemL1A1RQ57mcqJAqDP3gu2OUgy7t1b6I6wXuOM2I4pAOUuil1sToHQRs4FQIY/s380/003.jpg"/>
 </a>
 <figcaption class="figure-caption-text">
  Blogger Tune-Up adalah teknologi blog populer yang dipelihara oleh Dede Hendriono. Topik fokus pada web design, tutorial, blogger hack dan sumber inspirasi.
 </figcaption>
</figure>

Skenario CSS

Skenario kode CSS dibawah ini silahkan sesuaikan dengan kebutuhan anda, dari mulai warna, tebal garis, lebar bingkai dan lain sebagainya. Hal terpenting adalah "position: relative" karena gambar akan di geser ke atas dengan margin negatif. Selain itu "overflow: hidden" digunakan untuk menghilangkan caption pada saat pointer mouse belum masuk ke area gambar. Sedangkan "width: 380px" silahkan disesuaikan dengan kebutuhan.

.figure-caption {
 position: relative;
 margin: 10px auto;
 border: 3px solid #999999;
 overflow: hidden;
 -moz-border-radius: 2px;
 -khtml-border-radius: 2px;
 -webkit-border-radius: 2px;
 border-radius: 2px;
 width: 380px;
}

.figure-caption-text {
 padding: 5px 10px;
 background-color: #333333;
 color: #eeeeee;
 border-top: 1px solid #666666;
 margin-top:-3px;
}

Skenario jQuery

Perhatikan script jQuery dibawah ini dengan seksama, namun sebelum itu jangan lupa memastikan bahwa framework jQuery telah terpasang pada halaman tersebut.

jQuery(document).ready(function($) {
 $('div.figure-caption').each(function(i) {
  var gambar_ = $('img', this);
  var tinggi_gambar = gambar_.attr('height');
  var tinggi_caption = $('p', this).outerHeight();
  $(this).height(tinggi_gambar);
  $(this).hover(function() {
   gambar_.animate({marginTop : -tinggi_caption}, 500);
  }, function() {
   gambar_.animate({marginTop : '0'}, 500);
  });
 });
});

Fungsi each() digunakan untuk mengumpulkan keterangan gambar pada halaman yang sedang diakses. Setelah itu, ketinggian gambar dan deskripsi gambar akan disimpan. Selanjutnya, ketingian div.figure-caption akan ditetapkan sesuai dengan ketinggian gambar, sehingga deskripsi akan disembunyikan dan tidak akan terlihat.

Fungsi hover() diakses ketika kita memindahkan pointer mouse diatas sebuah gambar, gambar tersebut akan diubah margin atasnya menjadi negatif yang sesuai dengan ketinggian deskripsi (caption), sehingga gambar akan bergerak keatas dan terpotong setinggi deskripsi. Deskripsi (caption) gambar akan set margin atasnya pada posisi 0. Dan semua pergerakan tersebut, baik itu gambar ataupun deksripsi di tentukan oleh jQuery fungsi animate().

Unduh jQuery Animation Hover Image Caption

Framewok jQuery

Ini adalah hal wajib jika anda ingin menggunakan fungsi-fungsi jQuery.

<head>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>

Selamat mencoba dan semoga berhasil. Happy Blogging :)

Read More

jQuery Menu Malu

Bismillah. Alhamdulillah. Sebelum menulis artikel ini, aku sudah "lemes" tertawa sendiri. Seperti tidak ada judul lain saja menggunakan nama "jQuery Menu Malu". Penamaan ini sebenarnya spontanitas ketika melihat hasil akhir dari efek menu tersebut. Kronologi kejadiannya itu tadi malam, karena tidur terlalu sore (sekitar jam 10) maka terbangun masih dini hari (sekitar jam 3), mata langsung segar dan bingung mau melakukan apa. Buka-buka buku menemukan naskah pidato Bacharudin Jusuf Habibie waktu di kampus UI sebanyak lima halaman. Begitu selesai otak justru menjadi "njlimet" antara mengerti dan tidak mengerti dengan isi pidato tersebut. Akhirnya buka laptop dan cari-cari inspirasi, mata tiba-tiba tertuju pada suatu gambar background berwarna gelap (yang nanti akan kita gunakan), maka lahirlah inspirasi untuk menulis kode jQuery. Menulis kode jQuery-nya juga cukup lama, hampir satu jam karena berganti-ganti ide dan efek yang digunakan. Dan akhirnya efek yang digunakan adalah on-hover, un-hover, slideUp dan slideDown seperti demo dibawah ini.

Demo jQuery Menu Malu

Deskripsi jQuery Menu Malu

jQuery Menu Malu pada mulanya disembunyikan, kemudian ditampilkan saat awal halaman di-load, beberapa saat kemudian menu kembali disembunyikan. Ketika mouse berada pada wilayah menu (on-hover) maka menu akan memanjang sendiri tanpa di klik dan menu pun akan ditampilkan. Ketika mouse meninggalkan area menu (un-hover) maka menu akan memendek sendiri tanpa di klik dan menu pun disembunyikan. Pada saat menu membuka efek slide dibuat lambat (slow) dan ketika menu menutup efek slide dibuat cepat jadi seakan-akan seperti malu-malu. Makanya kemudian di beri nama jQuery Menu Malu. Menu ini harus di sentuh baru membuka dan menutup jika di tinggalkan.

Skenario HTML jQuery Menu Malu

Dibawah ini adalah susunan kode HTML yang digunakan untuk membuat jQuery Menu Malu:

<div id="menumalu">
 <div id="topi"></div>
 <div id="isimenu">
  <ul>
   <li><a href="http://URL_1">Menu 1</a></li>
   <li><a href="http://URL_2">Menu 2</a></li>
   <li><a href="http://URL_3">Menu 3</a></li>
   <li><a href="http://URL_4">Menu 4</a></li>
   <li><a href="http://URL_5">Menu 5</a></li>
  </ul>
 </div>
 <div class="sepatu"><span class="panwah">&nbsp;</span></div>
</div>

Penjelasan:

• Jika diperhatikan maka menu ini terdiri dari satu wadah (container) utama yaitu <div id="menumalu">. Didalam container utama terdiri dari 3 bagian yaitu; <div id="topi"> (topi berarti bagian atas), <div id="isimenu"> (berisi menu-menu, sebenarnya bebas mau diisi apa saja), dan <div class="sepatu"> (sepatu berarti bagian bawah).
• Pada bagian '"sepatu" memiliki sebuah "span" yang nantinya akan digunakan untuk container anak panah. Jika menu terbuka maka anak panah menunjukan arah ke atas, jika menu tertutup maka anak panah menunjukan arah ke bawah. Inilah fungsi "span" pada bagian sepatu.
• Sedangkan untuk menu-menu yang ada didalamnya (didalam "isimenu") silahkan sesuaikan saja dengan kebutuhan.

Skenario CSS jQuery Menu Malu

Dibawah ini adalah susunan kode CSS yang akan digunakan untuk mempengaruhi tampilan HTML dan fungsi jQuery:

#menumalu{
 top: .4em;
 left:2em;
 width:230px;
 position: fixed;
 z-index: 200;
}
#topi {
 margin:0 ;
 padding:0;
 height:55px;
 background:url(malusprite.png) no-repeat 0 0;
 border-bottom:1px solid #000;
}
#isimenu{
 margin:0 ;
 padding:0;
 width:230px;
 background:url(malubg.png) repeat-y;
}
.sepatu{
 margin:0;
 padding:0;
 height:78px;
 background:url(malusprite.png) no-repeat 0 -80px;
 display:block;
 border-top:1px solid #302F2F;
}
span.panwah,span.pantas{
 width:27px;
 height:26px;
 display:block;
 margin-left:103px;
 margin-top:35px;
}
span.panwah{
 background:url(malusprite.png) no-repeat 0 -158px;
}
span.pantas{
 background:url(malusprite.png) no-repeat -27px -158px;
}

Penjelasan:

Kode CSS ini tidak akan di jelaskan satu persatu, jadi (ma'af) silahkan dipelajari sendiri. Hanya bagian pentingnya saja yang akan dijabarkan. Perhatikan kode CSS diatas sepeti ditulis ulang dibawah ini:

#menumalu{
 top: .4em;
 left:2em;
 width:230px;
 position: fixed;
 z-index: 200;
}

Kode ini digunakan untuk menempatkan posisi menu, seperti:

• top: .4em; digunakan untuk menentukan jarak dari bagian atas halaman ke menu. Ubah nilai .4em sesuai keinginan, jika tidak menemukan posisi tepat silahkan ganti satuannya. Gunakan satuan pixel agar lebih mudah dalam mengatur posisinya (misal; .4em diubah menjadi 4px).
• left:2em; digunakan untuk menentukan jarak dari sisi sebelah kiri halaman ke menu. Silahkan ubah nilainya atau ganti satuannya dengan pixel (misal; 2em diubah menjadi 20px). Jika anda ingin memposisikan menu pada sebelah kanan halaman, ubah "left" menjadi "right" maka menu akan berpindah pada sebelah kanan.
• width:230px; Nilai ini jangan diubah karena sudah disesuaikan dengan lebar gambar yang digunakan. Kecuali jika ingin mengganti gambarnya.
• position: fixed; Ini digunakan untuk menempatkan posisi menu dimana saja tanpa terpengaruh oleh elemen lain. Ini juga tidak perlu diubah.
• z-index: 200; Ini digunakan untuk menempatkan posisi menu terhadap elemen lain. Jika menu ini berada dibelakang menu lain, ubah nilai 200 menjadi lebih besar.

Skenario jQuery jQuery Menu Malu

(Nek urung kroso mumet, monggo di lajeng. Nanging ojo mekso... Ngunjuk tuyo kopi benter rumiyen sinambi ngeses...)
Di bawah ini adalah kode jQuery yang digunakan untuk memberikan efek pada menu:

$(document).ready(function () {

    jQuery('#isimenu').hide();
    jQuery(window).load(function () {
        jQuery('#isimenu').slideDown(1500, function () {
            jQuery('#isimenu').slideUp(200, function () {});
        });
    });
    jQuery('#menumalu').mouseenter(function () {
        jQuery('#isimenu').slideDown(1000, function () {
            jQuery('.sepatu span').removeClass('panwah').addClass('pantas');
        });
    });
    jQuery('#menumalu').mouseleave(function () {
        jQuery('#isimenu').slideUp(200, function () {
            jQuery('.sepatu span').removeClass('pantas').addClass('panwah');
        });
    });

});

Penjelasan:

$(document).ready(function () {

Kode di atas adalah kode wajib dalam menulis kode-kode jQuery

jQuery('#isimenu').hide();

Saat pertama kali halaman dipanggil #isimenu akan disembunyikan

jQuery(window).load(function () {

Pada saat halaman di load fungsi akan dimulai

jQuery('#isimenu').slideDown(1500, function () {

#isimenu akan ditampilkan dengan efek slide ke bawah pada kecepatan 1500 milidetik dan fungsi lain dimulai...

jQuery(this).slideUp(200);

#isimenu kemudian akan ditutup lagi dengan efek slide keatas pada kecepatan 200 milidetik

});

Efek slide ditutup

});

Fungsi load halaman di tutup

jQuery('#menumalu').mouseenter(function () {

Pada saat pointer mouse berada di area #menumalu maka fungsi dimulai...

jQuery('#isimenu').slideDown(1000, function () {

#isimenu akan ditampilkan dengan efek slide ke bawah pada kecepatan 1000 milidetik dan fungsi lain dimulai...

jQuery('.sepatu span').removeClass('panwah').addClass('pantas');

'class' dengan nama "panwah" pada span di bagian sepatu akan dibuang dan ditambahkan 'class' dengan nama "pantas"

});

Fungsi menampilkan #isimenu akan ditutup

});

Fungsi pointer mouse pada area menu akan ditutup

jQuery('#menumalu').mouseleave(function () {

Pada saat pointer mouse meninggalkan area #menumalu maka fungsi dimulai...

jQuery('#isimenu').slideUp(200, function () {

#isimenu akan ditutup dengan efek slide ke atas pada kecepatan 200 milidetik dan fungsi lain dimulai...

jQuery('.sepatu span').removeClass('pantas').addClass('panwah');

'class' dengan nama "pantas" pada span di bagian sepatu akan dibuang dan ditambahkan 'class' dengan nama "panwah"

});

Fungsi menutup #isimenu akan ditutup

});

Fungsi pointer mouse meninggalkan area menu akan ditutup

});

Fungsi jQuery ditutup

Unduh jQuery Menu Malu

Selamat mencoba dan semoga berhasil. Happy Blogging :)

Read More

Link Kredit Efek jQuery Ease Out Bounce

Bismillah. Alhamdulillah... Kali ini kita akan membahas proses pembuatan suatu efek Ease Out Bounce yang di terapkan pada link kredit yang biasanya terdapat pada bagian bawah halaman blog. Mungkin sebagian blogger menyebutnya sebagai tooltips namun sebenarnya lebih dari sekedar tooltips dan saya lebih cocok menyebutnya sebagai Credits Ease Out Bounce. Kata Ease Out Bounce sendiri di ambil dari efek yang dihasilkan dari sebuah plugin jQuery Easing yang dibuat oleh George McGinley Smith. Penekanan pada artikel ini lebih ke pemahanan tentang pemanfaatan plugin jQuery Easing sehingga setelah artikel ini anda baca, pembaca bisa mengembangkannya sesuai dengan imajinasinya sendiri. Artikel ini tidaklah bersifat copy paste dan langsung dapat digunakan namun hanya berupa pancingan mengenai indahnya menulis script jQuery. Mari mulai bermain-main dengan jQuery...

Efek jQuery Ease Out Bounce

Skenario Efek

Ketika pointer mouse (hover) berada diatas link kredit maka seketika sebuah kotak kecil akan muncul dengan efek melebar hingga mencapai ukuran yang telah ditentukan dan kemudin di ikuti oleh sebuah kotak kecil lainnya yang ditempatkan diatas kotak awal yang muncul dengan efek meninggi hingga mencapai ukuran tertentu. Setelah kedua kotak ini tampil maka di ikuti tampilnya informasi yang berada di dalam kotak tersebut dengan efek fade.

Ketika pointer mouse meninggalkan link kredit maka kotak kecil paling atas akan menutup dengan efek layaknya slide down sehingga informasi yang ada di dalam kotak akan tertutup dan menghilang, sedangkan kotak kecil paling bawah juga akan tertutup dengan efek memendek hingga menghilang.

Skenario HTML

Dibawah ini skenario yang akan digunakan untuk membuat Link Kredit Efek jQuery Ease Out Bounce:

<div id="kredit">
<div id="latarkredit"></div>
<div id="latarlinkredit"></div>
<div id="kotakredit">
<p>Hendriono is a blogger and web designers especially as jQuery, CSS and HTML.</p>
<ul>
<li id="alamat"><a href="http://www.hendriono.web.id/">Read more Hendriono Online</a></li>
<li id="facebook"><a href="http://www.twitter.com/dedehendriono">Follow Dede Hendriono on Twitter</a></li>
<li id="twitter"><a href="http://www.facebook.com/dede.hendriono">Follow Dede Hendriono on Facebook</a></li>
<li id="rss"><a href="http://www.facebook.com/dede.hendriono">Follow Dede Hendriono on Facebook</a></li>
</ul>
</div>
<p id="urlkredit"><a href="http://modification-blog.blogspot.com/">Website kindly created by <span>henstudio</span></a></p>
</div>

Penjelasan skenario kode HTML:

• Jika diperhatikan kode HTML diatas maka akan diketahui bahwa kita akan melibatkan 4 buah container yaitu <div id="kredit"><div id="latarkredit"><div id="latarlinkredit"> dan <div id="kotakredit">
• <div id="kredit"> adalah container utama yang mewadahi 3 container lainnya.
• <div id="latarkredit"> adalah container paling atas
• <div id="latarlinkredit"> adalah container paling bawah
• <div id="kotakredit"> adalah container yang berisi informasi-informasi yang akan kita masukan

Skenario CSS

Dibawah ini merupakan kode CSS yang membentuk kotak-kotak kecil dan beberapa informasi yang ada didalamnya:

#kredit { position:relative; float:right; margin:-5em 2em 0 0; width:28em; height:13em; }
#kredit a { text-decoration:none; }
#latarkredit { display:none; position:absolute; bottom:3.5em; width:28em; height:0; border:1px solid #555759; border-bottom:0; background:#040607; opacity:0.95; border-top-right-radius:5px; border-top-left-radius:5px; -moz-border-top-right-radius:5px; -moz-border-top-left-radius:5px; z-index:10; }
#latarlinkredit { display:none; position:relative; z-index:10; width:0; margin:0 auto; top:9.5em; height:3.5em; background:#16191b; border:1px solid #555759; border-bottom-right-radius:5px; border-bottom-left-radius:5px; -moz-border-bottom-right-radius:5px; -moz-border-bottom-left-radius:5px; }
#urlkredit { position:absolute; bottom:0; left:0; width:28em; height:3.5em; z-index:20;  }
#urlkredit a { display:block; width:28em; height:3.5em; text-align:center; color:#a0a1a1; line-height:3.5em; vertical-align:middle; border:0; }
#urlkredit a span { text-indent:-9999em; display:inline-block; width:75px; margin:0 2px 1.35em; height:12px; line-height:3.5em; vertical-align:bottom; background:url('logohens.png') no-repeat; }
#urlkredit a:hover span, #urlkredit a.active span { background-position:0 -12px; }
#kotakredit { display:none; position:absolute; width:28em; height:9.5em; z-index:15; top:0em; }
#kotakredit p { position:relative; top:0; left:0; margin:1em; }
#kotakredit p a { color:#a0a1a1; font-size:1.1em; font-family:"DroidSerifRegular", Georgia, Times New Roman, serif; }
#kotakredit ul { list-style-type:none; position:relative; margin:0; }
#kotakredit ul li { border:0; display:inline-block; margin:0; padding:0; }
#kotakredit ul li#alamat, #kotakredit ul li#facebook, #kotakredit ul li#twitter, #kotakredit ul li#rss { height:34px; line-height:34px; vertical-align:middle; }
#kotakredit ul li#facebook, #kotakredit ul li#twitter { width:45px; }
#kotakredit ul li#alamat { padding:0 1em 0 1em; }
#kotakredit ul li#alamat a { color:#bbb; text-decoration:underline; font-size:1.1em; }
#kotakredit ul li#alamat a:hover { color:#fff; }
#kotakredit ul li#facebook a, #kotakredit ul li#twitter a, #kotakredit ul li#rss a { width:45px; padding:0; height:34px; display:block; text-indent:-9999em; background:url('followus.png') no-repeat 0 -34px; }
#kotakredit ul li#facebook a:hover { background-position:0 0;}
#kotakredit ul li#twitter a { width:45px; height:34px; background-position:-45px -34px; }
#kotakredit ul li#twitter a:hover { background-position:-45px 0; }
#kotakredit ul li#rss a { width:45px; height:34px; background-position:-90px -34px; }
#kotakredit ul li#rss a:hover { background-position:-90px 0; }

Perhatikan gambar dibawah ini:

Penjelasan kode CSS hanya membahas tentang kunci dari efek saja, selebihnya silahkan jabarkan sendiri. Berikut penjelasannya :

• Kode CSS pada #kredit hanya menentukan lebar (width) sebesar 28em dan tinggi (height) sebesar 13em dengan posisi (position) relative
• Kode CSS pada #latarkredit justru menentukan tingginya (height) sebesar 0. Dengan nilai 0 ini berarti kotak tidak memiliki tinggi. Tinggi #latarkredit kemudian akan ditentukan pada kode jQuery pada bagian bawah.
• Kode CSS pada #latarlinkredit juga menentukan lebar (width) sebesar 0, itu artinya kotak tidak memiliki lebar. Lebar #latarlinkredit kemudian akan ditentukan pada kode jQuery.
• Jika diperhatikan kode CSS diatas maka #latarkredit harus meninggi sebesar 9.5em karena tinggi #latarlinkredit sudah ditentukan sebesar 3.5em. Jadi #latarkredit 9.5em + #latarlinkredit 3.5em = 13em. Nilai 13em sama dengan yang telah ditentukan pada tinggi (height) #kredit sebesar 13em. Maka efek jQuery harus diberi nilai tinggi untuk #latarkredit sebesar 9.5em. (Catat #latarkredit height : 9.5em)
• Sedangkan #latarlinkredit belum ditentukan lebarnya (width). Jika merujuk pada kode #kredit maka lebarnya adalah 28em, maka #latarlinkredit juga harus diberi nilai sama yaitu 28em. (Catat #latarlinkredit width : 28em)

Skenario jQuery

(Ngaso rumiyen nek kroso mumet, monggo di unjuk kopi benter sampean sinambi ngeses... sueger!!!)
Dibawah ini adalah kode jQuery yang akan kita gunakan:

<script src='http://yandex.st/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
<script src='http://yandex.st/jquery/easing/1.3/jquery.easing.min.js' type='text/javascript'/>
<script type="text/javascript">//<![CDATA[
$(document).ready(function() {

$('#urlkredit > a').mouseenter(function() {
$('#latarlinkredit').show().stop().animate({width: '28em'}, 400, 'easeOutBounce', function() {
$(this).css("border-top","0");
$('#latarkredit').show().stop().animate({height: '9.5em'}, 400, 'easeOutBounce', function() {
$('#kotakredit').fadeIn(100);
});
});
});

$('#kredit').mouseleave(function() {
$('#kotakredit').stop().fadeOut(100);
$('#latarkredit').stop().animate({height: '0'}, 200, function() {
$(this).hide();
$('#latarlinkredit').stop().animate({width: '0'}, 200, function() {
$(this).hide();
$(this).css("border-top","1px solid #555759");
});
});
});

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

Framework, Plugin dan Aturan Dasar
Ini adalah hal penting yang tidak boleh tertinggal dan hukumnya wajib untuk diikutsertakan dalam setiap menulis kode jQuery. Terdiri dari 3 bagian secara berurutan, yaitu framework jQuery, Plugin jQuery Easing dan aturan dasar penulisan kode jQuery.

<script src='http://yandex.st/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
<script src='http://yandex.st/jquery/easing/1.3/jquery.easing.min.js' type='text/javascript'/>
<script type="text/javascript">//<![CDATA[
$(document).ready(function() {
<!-- tulis kode jQuery disini -->
});
//]]></script>

Ketika mouse berada diatas Link (mouseenter)
Perhatikan penjelasan kode berikut :

$('#urlkredit > a').mouseenter(function() {

Ketika mouse masuk kedalam link #urlkredit maka...

$('#latarlinkredit').show().stop().animate({width: '28em'}, 400, 'easeOutBounce', function() {

#latarlinkredit akan ditampilkan dan dihentikan dengan animasi melebar 28em selama 400 milidetik dengan efek pantul melebar (easeOutBounce) dan...

$(this).css("border-top","0");

Border top #latarlinkredit akan dihilangkan dengan nilai 0 dan dilanjutkan...

$('#latarkredit').show().stop().animate({height: '9.5em'}, 400, 'easeOutBounce', function() {

#latarkredit akan ditampilkan dan dihentikan dengan animasi meninggi 9.5em selama 400 milidetik dengan efek pantul meninggi (easeOutBounce) dan...

$('#kotakredit').fadeIn(100);

#kotakredit akan ditampilkan dengan efek fadeIn selama selama 100 milidetik

});

efek pada #latarkredit di tutup

});

efek pada #latarlinkredit di tutup

});

efek ketika mouse masuk ditutup

(Maem duren dese ah, ono tonggo panen duren, kecipratan 2 beton... trus ngeses karo ngopi... muantap...)

Ketika mouse meninggalkan link (mouseleave)
Perhatikan penjelasan kode berikut :

$('#kredit').mouseleave(function() {

Ketika mouse meninggalkan container #kredit maka...

$('#kotakredit').stop().fadeOut(100);

#kotakredit akan dihilangkan dengan efek fadeOut selama 100 milidetik kemudian...

$('#latarkredit').stop().animate({height: '0'}, 200, function() {

#latarkredit akan dihentikan dengan animasi menutup slidedown hingga tidak memiliki tinggi (height : 0) kemudian...

$(this).hide();

#latarkredit disembunyikan

$('#latarlinkredit').stop().animate({width: '0'}, 200, function() {

#latarlinkredit juga akan dihentikan dengan animasi memendek hingga lebarnya 0 (width : 0) kemudian...

$(this).hide();

#latarlinkredit disembunyikan kemudian...

$(this).css("border-top","1px solid #555759");

#latarlinkredit akan ditambahkan border-top sebesar 1px sebelum akhinya menghilang...

});

Animasi pada #latarlinkredit ditutup

});

Animasi pada #latarkredit ditutup

});

Animasi pada saat mouse meninggalkan container #kredit ditutup...

Demo Efek jQuery Ease Out Bounce

Demikian penjelasan panjang lebarnya. Mudah-mudahan bermanfaat dan selamat mencoba, semoga berhasil. Happy Blogging :)

Read More

Menyisipkan Kode atau Script pada Artikel Blog

Bismillah. Sebenarnya artikel tentang insert script code into blogger post atau menyisipkan kode-kode atau script kedalam artikel blog pernah dibahas pada artikel sebelumnya dengan memanfaatkan fasilitas plugin SyntaxHighlighter yang dikembangkan oleh Alex Gorbatchev. Dua artikel sekaligus telah di tulis untuk menjelaskan tentang Integrasi SyntaxHighlighter pada Blogger dan Konfigurasi SyntaxHighlighter pada Blogger. Namun pada artikel kali ini kita akan memanfaatkan fasilitas dari pihak ketiga tanpa menggunakan plugin. Pihak ketiga penyedia layanan insert code sebenarnya banyak, namun kali ini kita akan memanfaatkan fasilitas dari pastebin.com karena situs ini sudah cukup lama dan paling banyak digunakan oleh para blogger.

Kenapa memilih Pastebin?

Beberapa alasan berikut bisa menjadi pertimbangan kenapa memilih fasilitas dari Pastebin:

• Mendukung banyak bahasa pemrograman
• Tanpa perlu melakukan perubahan kode pada template
• Bukan merupakan plugin bagi blog sehingga lebih ringan bagi blog (namun dipengaruhi kecepatan server Pastebin)
• Pastebin menggunakan software syntax highlighting GeSHi yang telah mendapat penghargaan "Innovation Award" sebagai salah satu software dengan kualitas terbaik.
• Kode/Script yang telah dibuat pada Pastebin akan tersimpan dengan baik sehingga lebih aman dan mudah jika suatu hari akan dilakukan perubahan/perbaikan kode/script.
• Disediakan software pendukung untuk membuat dan mengelola kode/script yang telah kita buat pada Pastebin. Software Pastebin ini mendukung banyak platform, baik untuk Windows, iPhone, iPad, Android, Mac OS X, dan lain-lain.
• Didukung pengembangan dengan API dan setiap pengguna memiliki API Key unik tersendiri.

Membuat kode pada Pastebin

Melalui Situs Pastebin
Langkah 1
Buatlah akun Pastebin, ikuti aturan pendaftaran.

Langkah 2
Login ke Pastebin dengan akun yang baru saja dibuat.

Langkah 3
Klik link "Create New Paste"

Langkah 4
Halaman "New Paste" terbuka dan masukan kode/script yang akan dibuat.

Langkah 5
Tentukan bahasa pemrograman yang digunakan pada "Optional Paste Settings". Contoh dibawah menggunakan bahasa JavaScript

Optional Paste Settings:
Syntax Highlighting : untuk menentukan bahasa pemrograman yang sesuai dengan kode/script yang dibuat
Paste Expiration : untuk menentukan batas ketersediaan kode di Pastebin
Paste Exposure : untuk menentukan ketersediaan secara umum (Public) atau pribadi (Private)
Paste Name / Title : untuk memberikan nama kode/script yang kita buat.
Setelah selesai menuliskan kode/script dan yakin, klik tombol "Submit"
Langkah 6

Jika kode/script yang kita buat ternyata mencurigakan maka Pastebin akan menampilkan "Spam Detection For Pastebin", jika anda yakin kode/script yang dibuat bukanlah untuk tujuan spam maka isikan "Enter Captcha" sesuai dengan yang tampil pada "Captcha Image" kemudian klik tombol "Submit"

Langkah 7

Sebuah jendela yang menampilkan dua kotak, kotak atas adalah kode yang sudah diberi sentuhan highlight sedangkan kotak bawah bersifat RAW untuk melakukan perubahan pada kode jika dianggap masih ada kekurangan.

Langkah 8
Klik link "EMBED" untuk menampilkan kode yang akan disisipkan pada artikel.

Langkah 9

Halaman "Embed Codes For Paste" terbukan dan kita diberikan dua metode penyisipan kode, pilih salah satunya. Apakah akan menggunakan "JavaScript Embedding" atau menggunakan 'Iframe Embedding". Metode yang paling aman adalah menggunakan yang kedua, namun yang paling sederhana menggunakan metode ke satu.

Langkah 10
Copy paste kode penyisipan pada artikel blog.

Melalui Software Pastebin
Langkah 1

Unduh (Download) software "Pastebin Desktop for Windows" karena kebetulan saya menggunakan sistem operasi Windows. Sesuaikan saja dengan sistem operasi anda.

Langkah 2
Install Software Pastebin

Langkah 3
Buka software Pastebin dan Login sesuai dengan akun yang telah kita buat sebelumnya.

Langkah 4
Sebuah jendela "New Paste" akan terbuka. Tentukan nama kode/script yang akan kita buat dan tuliskan kodenya.

Langkah 5

Untuk menentukan bahasa pemrograman yang kita gunakan, klik link "My Setting" dan sebuah jendela akan terbuka. Klik tombol "Save" jika setting-an sudah sesuai kebiasaan kita.

Ada beberapa option tambahan untuk versi software ini yaitu:

• Link type : untuk menentukan link yang akan dibuat secara otomatis pada saat kita meng-klik tombol "Submit"
• Quick paste key combination : untuk menentukan kombinasi tombol keyboard dalam membuat link baru
• Copy the link to the clipboard automatically : untuk meng-copy link secara otomatis pada clipboard
• Open the link in the browser automatically : untuk membuka link secara otomatis pada saat proses pembuatan kode telah selesai
• Automatically start program when Windows starts : untuk mengaktifkan software secara otomatis pada saat sistem operasi diaktifkan pertama kali

Klik tombol "Submit" jika kode/script telah selesai dibuat.
Langkah 6
Sebuah link akan diberikan secara otomatis. Bukalah situs Pastebin dan carilah link "EMBED"

Langkah 7
Lakukan hal sama seperti yang kita lakukan (Lihat langkah 8 Melalui Situs Pastebin)

Menyisipkan Kode/Script pada Artikel Blog

Langkah 1
Login ke Blogger
Langkah 2
Buatlah sebuah artikel dan pindahkan pada mode "Edit HTML"

Langkah 3
Sisipkan (copy paste) script yang telah diberikan oleh Pastebin (lihat langkah 9 Melalui Situs Pastebin)
Langkah 4
Terbitkan artikel anda dan lihatlah hasilnya...
Langkah 5
Ambil makanan ringan dan duduk manis sambil menunggu pembaca budiman berkomentar...

Contoh kode dari Pastebin

Kode JavaScript Save The Environment

Kode CSS Save The Environment

Selamat mencoba dan semoga berhasil. Happy Blogging :)

Read More

Aktikan dan Non Aktifkan Fitur Lightbox Blogger

Akhirnya Blogger menambahkan menu untuk mengaktifkan dan menonaktifkan fitur lightbox. Lightbox menurut keterangan Blogger yaitu "Saat diklik, gambar Anda akan terbuka dalam hamparan di bagian atas blog. Jika pos Anda memiliki beberapa gambar, gambar tersebut akan muncul sebagai thumbnail di sepanjang bagian bawah."

Sebenarnya fitur ini sangat bermanfaat bagi para pengguna Blogger yang menerima fasilitas bawaan Blogger, namun bagi para pecinta custom code hal ini sangat mengganggu eksperimen code-code image slideshow. Dengan beberapa alasan Blogger Tune-Up lebih senang untuk menonaktifkan fasilitas Lightbox. Alasan tersebut misal; tampilannya kurang menarik. Namun bagi anda yang tidak ingin pusing dengan permainan kode, Lightbox default Blogger sudah sangat bagus, selain ringan, tidak perlu dilakukan perubahan kode, karena otomatis Lightbox akan mendeteksi file gambar yang terdapat pada postingan blog.

Bagaimana mengaktifkan dan menonaktifkan fitur lighbox bawaan Blogger?

Langkah 1
Login ke Blogger
Langkah 2
Untuk antar muka lama:
Masuk ke "Setelan - Format"

Untuk antar muka baru:
Masuk ke "Buka daftar Entri - Setelan"

Langkah 3
Untuk antar muka lama:
Scroll ke bawah dan cari menu "Tampilkan gambar dengan Lightbox" seperti gambar dibawah ini:

Untuk antar muka baru:
Scroll ke bawah dan cari menu "Setelan", kemudian pilih "Pos dan komentar". Cari menu "Tampilkan gambar dengan Lightbox" seperti gambar dibawah ini:

Langkah 4
Pilih "Ya" untuk mengaktifkan fitur Lightbox dan pilih "Tidak" untuk menonaktifkan fitur Lightbox
Langkah 5
Klik tombol "Simpan Setelan" dan preview blog anda...

Selamat mencoba. Happy Blogging :)

Read More

Menambahkan Widget Page Loading Time

Kali ini kita akan membuat script Page Loading Time. Page Loading Time atau Waktu Pemuatan Halaman merupakan perangkat bantu untuk mengetahui waktu yang dibutuhkan untuk memanggil keseluruhan halaman dari suatu halaman situs atau blog. Dengan widget ini kita bisa mengetahui kecepatan load halaman blog, ini akan memicu pengelola blog untuk mengoptimasi blognya agar lebih cepat. Langkah-langkah untuk mengoptimasi blog akan dibahas pada artikel berikutnya. Satuan yang akan digunakan adalah milidetik jadi jika anda ingin menggunakan satuan waktu menit kira-kira bagaimana ya? Mari kita coba memasang script page loading time.

Memasang Script Page Loading Time

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML"
Langkah 3
Cari kode dibawah ini:

</head>

Langkah 4
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 3:

<script type='text/javascript'>//<![CDATA[
var now = new Date();
window.onload = function() {
document.getElementById("waktuload").style.display = "block"; 
document.getElementById("milidetik").innerHTML = (new Date()).getTime() - now.getTime();  
}
//]]></script>

Langkah 5
Cari kode dibawah ini:

<body>

Langkah 6
Sisipkan kode dibawah ini:

id="waktuload"

pada kode langkah 5, sehingga menjadi seperti dibawah ini:

<body id="waktuload">

Langkah 7
Tempatkan kode dibawah ini dimana saja sesuai dengan keinginan anda

Loading time <span id='milidetik'/> ms

Perhatian : Kode diatas akan menampilkan waktu pemuatan halaman yang sedang anda lihat.
Langkah 8
Simpan template dan preview blog anda....

Selamat mencoba dan semoga berhasil. Happy Blogging :)

Read More

jQuery Auto Resize & Image Frame

Bismillah. Alhamdulillah. Berawal dari malasnya melakukan pengeditan style gambar yang disertakan pada Blogger, maka Blogger Tune-Up pun melakukan manipulasi style pada gambar yang diberikan secara default oleh Blogger. Pada saat kita mengunggah suatu file gambar pada artikel blog maka secara default Blogger memberikan style otomatis berupa lebar (width), tinggi (height), dan alamat thumbnail gambar dengan resolusi rendah. Hal ini terkadang membuat artikel justru kurang menarik dilihat dan kurang nyaman jika gambar yang ditampilkan memiliki kualitas rendah dengan ukuran tidak sesuai dengan lebar artikel. Berawal dari hal inilah kemudian Blogger Tune-Up membuat script jQuery Auto Resize & Image Frame untuk menyempurnakan style yang diberikan oleh Blogger, walaupun sebenarnya script ini bisa dipergunakan untuk pengguna non Blogger.

Demo jQuery Auto Resize & Image Frame

Fasilitas jQuery Auto Resize & Image Frame

• Otomatis mengganti link gambar berkualitas rendah (thumbnail image) dengan link gambar berkualitas tinggi sehingga gambar yang ditampilkan merupakan gambar berkualitas aslinya
• Ditambahkan frame (bingkai) otomatis pada gambar yang ditampilkan sehingga lebih menarik
• Melindungi link asli gambar dengan teknik overlay sehingga cocok bagi yang ingin melindungi gambarnya dari pembajakan
• Ukuran gambar yang ditampilkan akan selalu dalam ukuran tetap dengan lebar 572px dan tinggi 290px

Kekurangan jQuery Auto Resize & Image Frame

• Ukuran gambar tidak boleh kurang dari 572px x 290px agar frame (bingkai terisi penuh)
• Frame (bingkai) kaku, ukurannya tidak dapat berubah sesuai besar gambar sehingga bagi para blogger yang memiliki lebar area artikel kurang dari 570 bingkai ini akan keluar dari area artikel
• Bug berikutnya belum diketahui, laporkan bug pada komentar

Integrasi jQuery Auto Resize & Image Frame pada Template Blogger

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke Rancangan - Edit HTML
Langkah 3
Cari kode dibawah ini:

]]></b:skin>

Langkah 4
Masukan (copy paste) kode CSS dibawah ini diatas kode pada langkah 3:

#boxoverlay {
margin:10px 0;
padding:0;
position:relative;
height:290px;
z-index:200;
}
#boxoverlay div {
width:572px;
height:290px;
border:1px solid #4f4f4f;
overflow:hidden;
left:8px;
position:absolute;
top:0;
z-index:209;
}
#boxoverlay span {
position:absolute;
top:-8px;
left:0;
z-index:210;
}
#boxoverlay img {
padding:0;
margin:0;
border:none;
}

Langkah 5
Cari kode dibawah ini:

</head>

Langkah 6
Masukan (copy paste) kode jQuery dibawah diatas kode pada langkah 5:

<script type="text/javascript">//<![CDATA[
$(document).ready(function () {
//remove style and replace image with big resolution for blogger user
$('a.boxoverlay img').removeAttr('style').each(function () {
var img_src = $(this).attr('src').replace('s400', 's800');
$(this).attr('src', img_src);
});
//auto insert image box overlay
$('a.boxoverlay').each(function () {
$(this).wrap('<div id="boxoverlay"></div>');
$(this).parent().append('<span><img src="https://lh4.googleusercontent.com/-5Xi2yovn8hw/TiKoCKjBi6I/AAAAAAAABOo/BogbisWIruw/s800/overlay-image.png" alt="" /></span>');
$(this).wrap('<div></div>');
});
});
//]]></script>

Perhatian! Pastikan template anda sudah terintegrasi framework jQuery
Langkah 7
Simpan Template

Menyisipkan jQuery Auto Resize & Image Frame pada Gambar Artikel

Langkah 8
Buatlah sebuah artikel kemudian upload sebuah gambar pada artikel
Langkah 9
Pindahkan editor artikel pada mode Edit/HTML
Langkah 10
Cari kode gambar, misal seperti dibawah ini:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW9SfR39vtaCzqZlZBpZ6rGEYikrsrLRd4NyNyAHnRhnTCENgOGEPmChGRzHUVvcaqxM8Dr0084mDK_yooSiva8sbP6vL7Bsz0WU67m62e1cEQRe7UFK3gQKOBNEek3P9dJwOUWDe-AbG6/s800/content_pic1.jpg">
<img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 700px; height: 320px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW9SfR39vtaCzqZlZBpZ6rGEYikrsrLRd4NyNyAHnRhnTCENgOGEPmChGRzHUVvcaqxM8Dr0084mDK_yooSiva8sbP6vL7Bsz0WU67m62e1cEQRe7UFK3gQKOBNEek3P9dJwOUWDe-AbG6/s800/content_pic1.jpg" border="0" alt="" />
</a>

Langkah 11
Sisipkan kode pada gambar, menjadi seperti dibawah ini (kode sisipan yang diblok):

<a class="boxoverlay" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW9SfR39vtaCzqZlZBpZ6rGEYikrsrLRd4NyNyAHnRhnTCENgOGEPmChGRzHUVvcaqxM8Dr0084mDK_yooSiva8sbP6vL7Bsz0WU67m62e1cEQRe7UFK3gQKOBNEek3P9dJwOUWDe-AbG6/s800/content_pic1.jpg">
<img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 700px; height: 320px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW9SfR39vtaCzqZlZBpZ6rGEYikrsrLRd4NyNyAHnRhnTCENgOGEPmChGRzHUVvcaqxM8Dr0084mDK_yooSiva8sbP6vL7Bsz0WU67m62e1cEQRe7UFK3gQKOBNEek3P9dJwOUWDe-AbG6/s800/content_pic1.jpg" border="0" alt="" />
</a>

Langkah 12
Terbitkan artikel

Unduh jQuery Auto Resize & Image Frame

Selamat mencoba dan semoga berhasil...

Read More

10 Website Pengguna JavaScript Mengagumkan

Bismillah. Alhamdulillah. Sejak diperkenalkannya framework JavaScript seperti jQuery, Mootools, Prototype dan lain sebagainya, banyak sekali para web desainer yang beralih dalam menyusun website-nya dari konten berbasis flash menjadi konten berbasis JavaSript. Efek-efek yang dibuat pada website sudah hampir meninggalkan basis flash, mereka berbondong-bondong beralih ke basis JavaScript, selain dapat memperingan load website, juga proses penulisan script yang lebih mudah dari pada menggunakan flash namun tentunya dengan hasil akhir yang tetap memukau.

Dibawah ini adalah kumpulan website yang Blogger Tune-Up bookmark sebagai bahan referensi saat kehilangan ide untuk membuat berbagai efek-efek JavaScript. Website-website ini menggunakan framework yang sangat mudah dipelajari dan sebagian merupakan plugin framework yang murni ditulis sendiri. Selain sebagai referensi juga sebagai pembangkit motivasi diri disaat mengalami kejenuhan coding script.

Krieasi - http://www.kriesi.at/

Aviary - http://aviary.com/

Toolani - http://www.toolani.de/

Podcasttuneup – http://www.podcast-tuneup.com/

We are Sofa - http://www.madebysofa.com/

Monofactor - http://www.monofactor.com/

Alex Buga - http://www.alexbuga.com/

Coda - http://www.panic.com/coda/

Kobe - http://www.arcinspirations.com/kobe/

Dibusoft mmdv - http://www.dibusoft.com/

Read More