Web Development Blog Shannenpio

Hal yang paling sulit adalah tentang bagaimana caranya menyisipkan URL posting ke dalam Imageflow , karena saat gambar diklik, yang terakses bukannya URL halaman, melainkan URL gambar itu sendiri. Meskipun Saya telah berhasil memanipulasinya menggunakan JQuery, yaitu dengan cara menyimpan URL posting ke dalam atribut rel pada gambar, sehingga Saya bisa mengakses URL tersebut dan menyisipkannya ke dalam perintah window.open() seperti ini: onclick = function() { window.open($(this).attr('rel')); } Tapi Saya pikir, menggunakan JQuery pada Imageflow merupakan sebuah pemborosan besar. Tidak efisien. Bahkan Imageflow bisa bekerja tanpa JQuery! Jadi Saya memutuskan untuk menggunakan ilmu sihir terakhir: Menyisipkan elemen <a> ke dalam atribut rel gambar (karena caption setiap slide diproduksi dari atribut alt pada gambar) seperti ini: document.write('<img src="' + img[o] + '" alt="&lt;a href=&#39;' + posturl + '&#39;&am

A letter from Arhan Tubar: Hello I like very much the automatic slideshow tutorial and I was wondering if you can help me with something. I would like to make the slideshow from this link: http://tympanus.net/codrops/2012/02/06/3d-gallery-with-css3-and-jquery/ ...to be automatic like in your tutorials. Can you help me with this request? Thank you in advance. My answer is, “Yes, why not. This is just about inserting images into 3D Gallery markup. A special post for you. Sorry about my bad English” :p View Demo Step 1: Edit Your Template First go to the Template menu and then click Edit HTML and click Continue / Proceed : Edit HTML Find this code: ]]></b:skin> Copy the code below and paste it above ]]></b:skin> : /* * Auto Content 4 3D Gallery by Taufik Nurrohman * Visit: http://hompimpaalaihumgambreng.blogspot.com */ .dg-container { width:100%; height:450px; position:relative; margin:0 auto; } .dg-wrapper { width:370px; height:300px; margin:0 auto;

Saya sempat kesulitan saat mencoba mengintegrasikan template JSON Blogger dengan JQuery AnythingSlider . Pada dasarnya masalahnya bukan mengarah kepada kesulitan di dalam membangun slideshow , tetapi lebih kepada masalah opsi-opsi dalam plugin ini. Beberapa opsi Saya rasa tidak begitu penting jika kita berhubungan dengan Blogger yang sederhana namun sangat cepat. Jadi, Saya telah meringkas beberapa opsinya untuk mempermudah konfigurasi: Lihat Demo Tahap 1: Mengedit Template Untuk membuatnya, pertama-tama masuklah ke menu Template kemudian klik Edit HTML dan klik Lanjutkan : Mengedit HTML Temukan kode ini: ]]></b:skin> Salin kode di bawah ini, kemudian letakkan di atasnya: /* ============================================================================ AnythingSlider v1.7+ Default (base) theme By Chris Coyier: http://css-tricks.com with major improvements by Doug Neiner: http://pixelgraphics.us/ based on work by Remy Sharp: http://jqueryfordesigners.com/ W

Saya menggunakan versi terakhir dari SLIDES yaitu pada 5 September 2011. Meskipun sebenarnya bagi Saya masih ada satu bug kecil saat Saya mencoba untuk berpindah tab halaman kemudian kembali lagi, saat itu durasi animasi menjadi sedikit berantakan sampai beberapa saat kemudian kembali normal. Nivo telah berhasil mengatasi ini dengan rilis kecilnya untuk mengatasi masalah yang hampir sama. Lihat Demo Tahap 1: Mengedit Template Untuk membuatnya, pertama-tama masuklah ke menu Template kemudian klik Edit HTML dan klik Lanjutkan : Mengedit HTML Temukan kode ini: ]]></b:skin> Salin kode di bawah ini, kemudian letakkan di atasnya: /* * Slides, A Slideshow Plugin for jQuery * Intructions: http://slidesjs.com * By: Nathan Searles, http://nathansearles.com * Version: 1.1.9 * Updated: September 5th, 2011 * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of

S3Slider , sebuah slideshow sederhana namun selalu memiliki kesan tegas dan kuat bagi Saya. Itulah yang dulu membuat Saya memilih ini sebagai slideshow pertama yang Saya terapkan di blog ini. Sampai pada akhirnya Saya memutuskan berpindah ke Nivo . Kali ini Saya akan mengintegrasikan S3Slider dengan JSON Blogger untuk memuat setiap slide secara otomatis berdasarkan artikel/posting terbaru yang diterbitkan: Lihat Demo Mengedit Template Untuk membuatnya, pertama-tama masuklah ke menu Template kemudian klik Edit HTML dan klik Lanjutkan : Mengedit HTML Temukan kode ini: ]]></b:skin> Salin kode di bawah ini, kemudian letakkan di atasnya: #slider, #sliderContent, #slider img { width:420px; /* Tentukan lebar slideshow */ height:270px; /* Tentukan tinggi slideshow */ } #slider { margin:0 auto 10px; border:2px solid white; background:#fff url('https://reader-download.googlecode.com/svn/trunk/images/nivo-loading.gif') no-repeat 50% 50%; position:relative; -w

Widget yang tampak berwarna hijau di atas adalah widget recent post /posting terbaru dengan begitu banyak pilihan. Anda bisa menyembunyikan gambar, komentar, bulan terbit dan ringkasan atau sebaliknya, menampilkannya. Menentukan apakah widget ini akan dianimasikan atau tidak juga bisa dilakukan. Cukup ikuti langkah-langkah di bawah ini dan pelajari tabel konfigurasinya: Lihat Demo Pertama-tama masuklah ke halaman tata letak dengan mengeklik menu Tata Letak : Masuk ke halaman Tata Letak Tambahkan sebuah elemen halaman HTML/JavaScript , kemudian salin semua kode ini dan letakkan di dalam formulirnya: <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script> <style type="text/css" scoped="scoped"> .spy-outer { border:2px solid white; -webkit-box-shadow:0 1px 3px rgba(0,0,0,.4); -moz-box-shadow:0 1px 3px rgba(0,0,0,.4); box-shadow:0 1px 3px rgba(0,0,0,.4); margin:0 auto; } .

Kali ini Saya akan memeprkenalkan widget daftar isi akordion berdasarkan label setelah sebelumnya Saya pernah menuliskan tentang widget daftar isi akordion berdasarkan bulan terbit : Lihat Demo Buat widget daftar isi ini dengan mengikuti langkah-langkah berikut: 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: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> <link rel="stylesheet" media="screen" href="http://reader-download.googlecode.com/svn/trunk/acc-toc-labelsort-default.css" type="text/css" /> <script type="text/javascript"> var showNew = true, accToc = true, openNewTab =