Tutorial memainkan slide dalam artikel dengan JQuery

Salam persahabatan
Sekarang kita akan membuat artikel kita menjadi atraktif dengan jquery. Yaitu menyembunyikan dan memunculkannya kembali. Di sini sobat bisa berkreasi bukan hanya artikel tetapi juga dengan gambar maupun iklan.
Sebenarnya artikel ini akan membahas tehnik dasar dari slide saja namun kebanyakan di terapkan dalam gambar, dalam tutorial ini saya akan mencoba menerapkan dalam artikel atau postingan, saya akan menggantinya hanya dua artikel karena hanya sebagai contoh, sobat bisa berkreasi sampai tiga artikel bahkan lebih secara bergantian. Seperti artikel saya sebelumnya yang saya praktekan "silahkan di cari".
Okeh..kita langsung saja ke pengkodean, silahkan copas kode di bawah di dalam postingan sobat, setelah itu baru kita menyelidikinya agar kita bisa berkreasi.

javascript:void(0)

INI ADALAH ARTIKEL PERTAMA YANG AKAN DI MUNCULKAN

INI ADALAH ARTIKEL KEDUA YANG AKAN DI MUNCULKAN

Jika sobat perhatikan kode di atas sangat simple, yaitu pemakaian dan pemanggilan kode jquery 1.3.2

Kode di atas menjelaskan bahwa kita akan membuat class agar bisa di panggil dalam html dan css misalkan saya membuat class dengan .keluar dan .masuk sedangkan id adalah standard yaitu #up dan #down ini untuk button "ingat! #up dan #down untuk button". Maka dengan jelas HTML yang di berikan adalah:

INI ADALAH ARTIKEL PERTAMA YANG AKAN DI MUNCULKAN

INI ADALAH ARTIKEL KEDUA YANG AKAN DI MUNCULKAN

Mudah-mudahan sampai di sini sudah paham, nah..sekarang kita akan buat kode CSS yang hanya memerintahkan ingin di tampilkan atau tidaknya dengan class yang telah kita buat:

.masuk{display:none;}.keluar{display:none;}

Siip..semoga dapat di mengerti, sederhana bukan? atau mungkin terlalu rumit? jika rumit silahkan langsung kopas aja kodenya, ga usah di ambil pusing sobat. Okeh..semoga berguna dan bermanfaat jika ingin melihat contohnya silahkan klik tombol di bawah.

jQuery adalah pustaka JavaScript kecil bersumber terbuka yang menekankan pada interaksi antara JavaScript dan HTML. Pustaka ini dirilis pada Januari 2006 di BarCamp NYC oleh John Resig dan berlisensi ganda di bawah Lisensi MIT dan GPL.


sumber : Hendro prayitno

Tutorial Blogger

Assalamualaikum
Untuk melengkapi kategory CSS3 tutorial Pada kesempatan kali ini saya ingin membahas tentang cara membuat postingan bergaya multi-coloumn dengan menggunakan CSS3  tanpa mengganggu css yang ada di template akan tetapi bisa langsung di masukan ke dalam postingan.

Cara membuat multi-coloumn yang mengunakan css3 ini sebenarnya sudah banyak di bahas saya di sini akan mengkreasikan sedikit dengan transform dan bagaimana menerapkannya di postingan, untuk multi-coloumn css3 ini tergantung dari narablog itu sendiri apakah cocok di tampilkan dalam postingan untuk artikel kita? apakah pembaca merasa nyaman membaca artikel kita dengan multi-coloumn ini? atau hanya sekedar pemanis ruangan artikel yang dapat bernilai seni seperti majalah dan koran? Mungkin!! semua adalah tergantung penilaian dan ketertarikan dari sahabat blogger, multi-coloumn yang akan di berikan di sini kita akan menggunakan sistem css3 yang gambarannya seperi ini:




DI SINI ADALAH POSTINGAN YANG AKAN KITA BUAT

Keterangan:
• Langkah awal
Kita tidak perlu menambahkan kode CSS3 di atas ]]> Sobat hanya perlu menaruh di postingan sehingga tidak mengganggu CSS template kita
• -moz-column-count:2
ini untuk menentukan berapa kolom yang ingin kita berikan ini adalah kode untuk mozila yang di mana bisa suport di browser tersebut sedangkan untuk chrome dan safari menggunakan webkit
• -webkit-column-count: 2
Untuk nilai valuenya juga sama berapa yang ingin kita berikan
• -moz-column-gap: 1em;
Coloumn-gap ini berfungsi untuk jarak batas antara kolom yang satu dengan yang lainnya
• -moz-column-rule: 1px solid black;
Sedangkan column-rule berfungsi untuk garis batas bisa solid (garis), dotted (Titik), dashed(garis putus-putus) dan bisa di berikan warna pembatasnya misalkan saya memberikan pembatas merah (red) dengan garis 2px putus-putus(dashed) tiga kolom dan gap:1 em maka hasilnya adalah sebagai berikut:

DI SINI ADALAH POSTINGAN YANG AKAN KITA BUAT

MULTI KOLOM: Dalam kasus yang paling sederhana elemen multi-coloumn akan berisi hanya satu baris kolom, dan tinggi setiap kolom akan setara dengan tinggi digunakan elemen yang isi kotak multi kolom. kasus paling sederhana berisi satu baris kolom, dan tinggi setiap dengan tinggi digunakan-elemen kolom.Jika kolom-elemen multi paginasi maka tinggi setiap baris dibatasi oleh halaman, dan isi terus di baris baru kotak kolom pada halaman berikutnya, kotak kolom pernah membelah di halaman. Kolom-elemen paginasi, setiap dan isi pada berikutnya, halaman. Efek yang sama terjadi ketika sebuah unsur mencakup membagi elemen multi-coloumn: "kolom sebelum elemen mencakup seimbang dan disingkat untuk menyesuaikan konten mereka". yang sama ketika sebuah multi-kolom: "sebelum untuk menyesuaikan konten mereka". Konten setelah elemen mencakup kemudian mengalir ke dalam baris baru kotak kolom. kemudian mengalir ke dalam baris baru kolom. Hal ini tidak mungkin untuk mengatur properti / nilai pada kotak kolom. Misalnya, latar belakang kotak kolom tertentu tidak dapat diatur dan kotak kolom tidak memiliki konsep padding, margin atau batas.latar belakang tertentu tidak dapat diatur tidak memiliki padding, margin atau batas. So..tinggal sobat yang mengambil keputusan sumber:http://www.w3.org/TR/css3-multicol/

Adapun apabila ingin mengkreasikan CSS3 multi-coloumn ini bisa di tambahkan dengan fungsi transform juga bisa di tambahkan text shadow agar telihat menarik atau pusing..hehehehe,,pliss dech jangan pucing!!

• -webkit-transform: skewY(30deg);-moz-transform: skewY(30deg);
• text-shadow: -1px -2px 0px #000;

Apabila ingin lebih full lagi kodenya seperti ini:

Masukan postingan di sini

MULTI-COLOUMN USING CSS3 : Column gaps and rules are placed between columns in the same multicol element.The length of the column gaps and column rules is equal to the length of the columns. Column gaps take up space. That is, column gaps will push apart content in adjacent columns(within the same multicol element). A column rule is drawn in the middle of the column gap with the endpoints at opposing content edges of the multicol element. Column rules do not take up space That is, the presence or thickness of a column rule will not alter the placement of anything else. If a column rule is wider than its gap, the column rule will overlap adjacent column boxes. Column rules are painted just above the background of the multicol element. This allows child elements with ‘z-index’ values to be on top of column rules. Column rules are only drawn between two columns that both have content. When content is laid out in multiple columns, the user agent must determine where column breaks are placed. The problem of breaking content into columns is similar to breaking content into pages. sumber:http://www.w3.org/TR/css3-multicol/

Kita juga dapat memberikan Rotate, skew, translate dan sebagainya agar terlihat lebih atraktif untuk keterangan tentang rotate, skew dan lainnya sobat bisa membacanya di artikel tehnik animasi css3

CSS3 CSS3 multi-column multi column bizarre 3d transform CSS3 CSS3 multi-column multi column using CSS3 CSS3 multi-column multi column crazy weirdness learn to make multi column CSS3 CSS3 multi-column ga outdated IE can use to multi-column in IE is a browser that is the most idiotic CSS3 future multi-column make silly IE CSS3 multi-column is only temporary multi-column 2 column 3 column using CSS3 is not feasible to use IE in the multi-chrome safari opera columns which can support multi-column 3d CSS3 multi-column can not be supported IE berita untuk negri multi coloumn CSS3

Apabila sobat tertarik seperti postingan di atas sobat bisa langsung masukan di postingan edit HTML dan gambarannya seperti ini:

DI SINI ADALAH LETAK POSTINGAN YANG SOBAT MAU BUAT

Okeh...seperti itu cara membuat multi-coloumn css3 di dalam postingan untuk cocok atau tidak cocoknya itu tergantung dari sang pengelola, akhir kata, Selamat mencoba, semoga berguna dan bermanfaat. Tak lupa juga Salam tiga jari!!!

sumber: Hendro Prayitno