Tampilkan posting dengan label Tutorial Blog. Tampilkan semua posting
Tampilkan posting dengan label Tutorial Blog. Tampilkan semua posting
JQUERY LOGO
Belajar Jquery Untuk Pemula JQuery merupakan suatu framework (library) Javascript yang menekankan bagaimana interaksi antara Javascript dan HTML. JQuery pertama kali dirilis pada tahun 2006 oleh John Resig. Pada perkembangannya JQuery tidak sekedar sebagai framework Javascript, namun memiliki kehandalan dan kelebihan yang cukup banyak. Hal tersebut menyebabkan banyak developer web menggunakannya. JQuery memiliki slogan “Write less, do more” yang kurang lebih maksudnya adalah kesederhanaan dalam penulisan code, tapi dengan hasil yang lebih banyak.

Belajar Jquery Untuk Pemula
jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.
JQuery merupakan library open source dengan lisensi GNU General Public License dan MIT License. Dari sisi ukurannya, framework JQuery sungguh ramping, hanya sekitar 20 KB dan hanya terdiri dari satu file. Namun demikian, bagi yang menginginkan fungsi lebih, JQuery memungkinkan penambahan fungsionalitas dalam bentuk plugin. Saat ini tersedia ribuan plugin yang dapat diperoleh secara gratis di internet.

Apa yang bisa dilakukan dengan JQuery?

1. Mengakses bagian halaman tertentu dengan mudah.
Tanpa adanya library Javascript khusus, untuk mengakses suatu bagian tertentu dari halaman, harus mengikuti aturan Document Object Model (DOM) dan pengaksesan harus secara spesifik menyesuaikan dengan struktur HTML. Dengan kata lain, pengaksesan bagian tertentu dari halaman sangat tergantung pada struktur dari HTML. JQuery menawarkan cara yang mudah (bahkan sangat mudah) dalam mengakses bagian tertentu dari halaman. Pengaksesan juga tidak terlalu bergantung pada struktur HTML.
2. Mengubah tampilan bagian halaman tertentu.
CSS (Cascading Style Sheet) menawarkan metode yang cukup handal dalam mengatur dan mempercantik halaman web. Namun terkadang CSS punya kelemahan yang cukup mengganggu, yaitu beberapa perintah CSS tidak didukung oleh semua browser. Cukup merepotkan jika kita harus mendesign halaman web dengan beberapa CSS sekaligus. Sekali lagi JQuery menawarkan solusi untuk mengatasi hal tersebut. Dengan JQuery, “kesenjangan” yang terjadi antara browser dalam urusan CSS akan tertutup dengan baik.
3. Mengubah isi dari halaman.
Jaman dulu (baca:sebelum JQuery lahir) cukup sulit jika kita akan mengubah sebagian isi dari halaman. Mengubah disini dapat berarti mengganti teks, menambahkan teks atau gambar, mengurutkan suatu daftar (list), menghapus baris tabel dan sebagainya. Dengan JQuery, hal tersebut dapat dilakukan dengan hanya beberapa baris perintah.
4. Merespond interaksi user dalam halaman.
Website yang baik tidak cukup digambarkan dengan user-interface dan tampilan yang memukau. Namun lebih dari itu, bagaimana pengunjung dapat berinteraksi dengan website dan dapat mengatur tampilannya sendiri. Interaktivitas sangat bergantung bagaimana pemrograman yang dipakai dalam menangani event-handling. Javascript sendiri memiliki beberapa event-handling seperti onclick untuk menangani event saat terjadi click. Namun demikian, event handling pada Javascript terbatas pada object-object tertentu, dan jenisnya pun terbatas. JQuery melengkapi semuanya dengan tambahan penanganan event-handling yang semakin mudah.
5. Menambahkan animasi ke halaman.
Animasi seringkali disertakan dalam suatu halaman web untuk menambah kecantikannya. Saat ini animasi masih cukup digemari oleh para peselancar situs. Animasi dapat dibuat dalam berbagai gaya, ada yang menggunakan Flash, gambar bergerak (GIF), video, dan sebagainya. Masing-masing tentu memiliki kelebihan dan kekurangan masing-masing. JQuery sendiri menawarkan konsep animasi (walaupun masih sederhana) yang cukup apik namun ramah bandwidth alias ringan. Salah satu animasi yang bisa dibuat dengan JQuery adalah fading jika terdapat suatu bagian dari halaman ditambahkan atau dihilangkan.
6. Mengambil informasi dari server tanpa me-refresh seluruh halaman.
Mengambil informasi dari server tanpa refresh halaman merupakan salah satu konsep dasar dari yang namanya AJAX (Asynchronous Javascript and XML). Pada penerapannya, cukup ribet jika harus membangun website dengan konsep AJAX, saat ini banyak library khusus yang berusaha mempermudahnya. JQuery merupakan salah satunya.
7. Menyederhanakan penulisan Javascript biasa.
Semboyan JQuery adalah “Write less, do more” atau dengan kata lain kesederhanaan dalam penulisan code, tetapi menghasilnya tampilan yang lebih. Sebenarnya inilah yang menjadi daya tarik tersendiri buat para pengembang web untuk menggunakan JQuery.

Download JQuery

Situs resmi JQuery dapat diakses di http://jquery.com/. Dan library JQuery dapat didownload di alamat http://docs.jquery.com/Downloading_jQuery. Tersedia library jQuery dalam 2 (dua) jenis yaitu minified dan uncompressed. Minified jika kita ingin menggunakannya saja dalam website kita (ukuran 18 KB), sedangkan uncompressed jika kita berkeinginan turut serta mengembangkan code jQuery.

Contoh Sederhana JQuery

Contoh sederhana penggunaan JQuery
Contoh sederhana penggunaan JQuery
Penjelasan Program
1. Pertama, kita harus menyertakan (include) file library JQuery. Pastikan letak dari file library sudah benar.
2. Perintah-perintah JQuery.
  • Baris 8 merupakan perintah inisialisasi dimana saat halaman (dokumen) siap ditampilkan maka jalankan juga perintah yang ada di dalamnya. Hal ini mirip dengan event onLoad yang biasanya diletakkan di tag .
  • Baris 9-11 maksudnya adalah mendefinisikan action yang terjadi saat link dengan class=show ( $(‘a.show’) ) diklik (lihat link baris ke-22). Jadi jika link di-klik maka paragraf dengan nama class=jquery ( $(‘p.jquery’) ) akan tampil dengan durasi tampil “slow”. Paragraf yang akan ditampilkan adalah paragraf baris ke-24 sampai 27.
  • Baris 13-15 sebaliknya, akan menyembunyikan isi dari paragraf yang mengandung nama class=jquery.
3. Isi dari halaman. Perhatikan nama class dari masing-masing object.
Klik disini untuk melihat demo dari program di atas.
Belajar Jquery Untuk Pemula

Referensi

Membuat Slide Show Efek Jquery... Banyak sejumlah situs besar yang menyediakan plugin jquery berupa animasi slider untuk membuat konten menjadi lebih menarik dan interaktif. Kali ini saya menyediakan koleksi beberapa situs tersebut bagi Anda yang ingin belajar membuat konten slider dengan jquery.
Slidesjs

Nivo Slider

AviaSlider

Coin Slider

Easy Slider 1.5

Coda-Slider

jQuery Plugin – Feature List

Moving Boxes

jqFancyTransitions

jQuery Multimedia Portfolio

jQuery SerialScroll

AnythingSlider jQuery Plugin

Making A Slick Content Slider

Automatic Image Slider w/ CSS & jQuery

Read more : http://www.noupe.com/tutorial/more-on-jquery-slider-plugins-and-tutorials.html

Langkah 1
Login ke akun Blogger milik anda > Tata Letak > Edit HTML. Klik Download Full Template untuk membackup template blog Anda.

Beri tanda centang pada "Expand widget template" kemudian CoPas kode berikut ini di atas kode </head> (tekan Ctrl+F untuk mempermudah dalam pencarian kode)

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>

<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)

(C)2008 by Anhvo

visit http://en.vietwebguide.com to get more cool hacks
******************************************/
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Anda bisa memodifikasi kode berikut ini
var thumbnail_mode = "float";
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
Ganti angka summary_noimg untuk mengatur jumlah karakter yang tampil pada kutipan artikel tanpa gambar.
Ganti angka summary_img untuk mengatur jumlah karakter yang tampil pada kutipan artikel dengan gambar.

Ganti angka img_thumb_height untuk mengatur tinggi gambar yang tampil pada kutipan artikel.

Ganti angka img_thumb_width untuk mengatur lebar gambar yang tampil pada kutipan artikel.

Langkah 2
Cari kode <data:post.body/> lalu ganti dengan kode berikut ini

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Ganti kata yang berwarna biru dengan left untuk menampilkan link readmore di bagian kiri dan right untuk menampilkan link readmore di bagian kanan.

Ganti kata yang berwarna merah dengan kata yang Anda suka. Misalnya Baca Selengkapnya atau Baca Selanjutnya.

Langkah 3
Klik tombol Pratinjau untuk melihat hasil. Jika hasil sudah sesuai, klik tombol Simpan.
Menu drop down biasa menghiasi sebuah website yang mempunyai sub – sub menu dibagian navigasi atas. Dengan library jquery, menu drop down bisa dipermak menjadi lebih indah dan interaktif. Kali ini saya menyertakan beberapa tutorial bagaimana cara membuat menu drop down mengunakan librari jquery dan bahasa pemprograman lain yang tak bisa dipisahkan yaitu css ( cascading style sheet ) dan HyperText Markup Language (HTML) .

Jquery Menu Potato


Demo :
Demo and Documentation
Download :
Download Source Code

Dynamic Dropdown Menu


Demo :
Demo Page
Tutorial :
Tutorial Page
Download :
Download Source Code

Superfish Menu Jquery Plugin


Demo:
Demo Page
Download :
Download Page

Jquery dan CSS Dropdown Menu


Demo :
Demo Page
Tutorial :
Tutorial Page

The Fanciest Dropdown Menu


Demo :
Demo Page
Tutorial :
Tutorial Page
Download :
fancydropdown.zip

Sexy Drop Down Menu


Demo :
Demo Page
Tutorial :
Tutorial Page

Dropdown Nav Menu


Demo :
Demo Page
Tutorial
Tutorial Page
Download
Download Source Code

CSS3 Styles Jquery Dropdown


Demo :
Demo Page
Dokumentasi :
Documentation Page
Download :
Download Source Code

Simple Dropdown Menu


Demo :
Demo Page
Tutorial :
Tutorial Page
Download :
Download Source Code

Smooth Navigational Menu


Demo :
Demo Page
Dokumentasi :
Documentation Page
Download :
ddsmoothmenu.js
ddsmoothmenu.css
ddsmoothmenu-v.css
Ok. Semoga Bermanfaat.
( Image From Jqueryab.com )
sumber
Tampilan Handphone
Cara Membuat Blogspot Menjadi Mobile Handphone telah tersedia di layanan http://bloggertouch.sopili.net/, dengan menggunakan layanan ini, para blogger akan di mudahkan mengakses blognya melalui Handphone, dan sekarang ini orang lebih banyak mengakses internet melalui Handphone, dan terkadang jika kita ingin mengunjungi suatu blog milik orang lain ataupun milik sendiri selalu susah atau lama untuk mengaksesnya alias lola (Loading Lambat ) nah... dengan menggunakan  http://bloggertouch.sopili.net/ ini layanan akses blog kita akan secara otomatis menampilkan fitur mobile..jadi lebih ringan size dan kecepatan mengaksesnya pun tidak lama.. ok.. sepertinya udah ga sabar nich bikin Blogspot menjadi handphone friendly... begini caranya :


2. Klik judul posting  Mobile Edition Maker: create mobile edition/view di website tersebut
3.  Kemudian ada kolom yang mengharuskan mengisi alamat blogspot kita, dan isikan dengan alamat blogspot kamu kemudian klik "Go"
4.  Di Step 1, isikan alamat yang kamu inginkan atau dengan alamat blogspot kamu (tanpa "blogspot.com")
5.  Setelah itu klik [Check Availability] untuk mengetahui apakah masih ada space untuk nama yang akan kamu gunakan kemudian klik "next"
6.  Klik "View Code" terlebih dahulu untuk mengetahui kode yang akan di pasang di blog,copy paste kemudian masukan kode tersebut di blog kamu. jangan lupa di simpan terlebih dahulu
7.  setelah kode tadi terpasang di blog, klik "next" pada petunjuk yang tadi
8. secara otomatis akan ada pemberitahuan "done" dengan begitu.. blog kamu udah bisa di akses dengan mudah melalui hanphone..

nah..gimana ? gampang and seru kan ?
semoga tutorial ini bermanfaat... :D

 
Related Posts Plugin for WordPress, Blogger...