gubhug reyot

Vertical Scrollable with Effects

Posted by cah ndeso kluthuk

Vertical Scrollable sebenarnya hampir sama fungsinya dengan Vertical Slider. Keduanya berfungsi menampilkan teks atau gambar, atau sekaligus keduanya. Penggunaan Scrollable terutama dimaksudkan untuk effisiensi ruang. Beberapa bentuk gambar atau teks dapat sekaligus terwadahi dalam ruang tunggal dengan ukuran yang disesuaikan dengan ketersediaan ruang. tentu saja penggunaan scrollable juga sekaligus harus dimanfaatkan untuk menambah daya tarik blog. Scrollable yang satu ini sekalipun bentuknya mungil namun didesain untuk mampu menampilkan image dan beberapa variasi teks untuk lebih menajamkan setiap ungkapan yang disampaikan. Link yang tersedia berfungsi untuk memberi mengarahkan pembaca apabila menginginkan artikel lengkapnya.

Panduan:

JQuery Image Slider with Description

Posted by cah ndeso kluthuk

Deskripsi gambar dari slider ini berada di sebelah kanan gambar. Deskripsi berfungsi untuk menyampaikan informasi sekaligus memuat link yang berkaitan dengan gambar/image yang ditampilkan. Teks deskripsi gambar harus dibuat seminimal mungkin (seperlunya saja) karena daya tampung ruang yang memang sangat kecil. Anda bisa memasukkan link untuk deskripsi/penjelasan yang lebih detail sehingga pembaca akan terpuaskan.

Keterangan/Catatan:

Kecepatan slider dapat diatur dengan melakukan perubahan pada javascript (intervalObject --> countDown, 400: semakin besar semakin lama/lambat).
Anda dapat mengaturnya juga di var totalSec.
Untuk membuatnya lakukan pengamanan template terlebih dahulu. Caranya lihat di sini.
Setelah selesai mengamankan template lanjutkan dengan menyimpan KODE CSS di atas KODE ]]></b:skin>
Simpan JQuery.1.3.2.min.js dan javascript di bawah KODE <head> secara berurutan.
xHTML digunakan dibagian body atau di ruang posting.

Image Effect-3 : Rotate

Posted by cah ndeso kluthuk

Ringkasan ini tidak tersedia. Harap klik di sini untuk melihat postingan.

Image Effect-2

Posted by cah ndeso kluthuk

Entah mau dinamakan efek apa, yang jelas aku sendiri bingung mau memberi nama. Yang penting lihat dulu dan kamu mungkin bisa kasih sendiri nama efeknya. Image effect ini bekerja hanya berdasarkan kode css, dimana dua buah image diposisikan saling bertumpuk. Image pertama akan tertutup oleh image kedua yang menggunakan opacity effect sehingga membuat image pertama akan terlihat seperti bayangan dibelakang image kedua. Hover effect bekerja untuk menggeser image kedua ke sebelah kiri hingga kedua image terlihat secara sempurna. Silahkan anda coba dengan mengarahkan cursor di atas gambar!

jQuery Image Effect-1 - zoom effect

Posted by cah ndeso kluthuk

Image effect yang akan kita buat merupakan efek zoom dengan memanfaatkan fungsi jQuery.1.3.2.min.js yang di dalamnya memang ditanam berbagai fungsi yang dapat dikembangkan oleh penggunanya. Untuk menciptakan efek zoom ini kita perlu menambahkan sedikit javascript dan kode CSS sebagai pembangun dan pengendali. Anda dapat mengatur seberapa besar effek zoom bekerja dengan melakukan perubahan di javascript.

Vertical HTML Scroller

Posted by cah ndeso kluthuk

Untuk membuat scroller dengan file HTML kamu harus membuat isi scroller yang file-nya berbentuk file HTML. File ini harus di upload terlebih dahulu di file hosting untuk digunakan sebagai"isi" HTML scroller. Supaya bisa dilakukan dengan sempurna sebaiknya kamu cari file hosting atau free file hosting yang melayani penyimpanan file HTML. Pembuatan scroller type seperti ini melalui dua proses pembuatan :

Carousel Slide Show

Posted by cah ndeso kluthuk

Carousel slideshow dibuat menggunakan jQuery. Slideshow berisikan image, teks, link dan title. Link bisa digunakan sebagai readmore atau dalam bentuk yang lain. Penulisan teks juga harus dibatasi karena box slideshow juga ketinggiannya telah ditentukan. Anda bisa menggunakannya seperti ketika memasang readmore saat posting. Agar lebih jelas silahkan buka link demo yang ada di bawah ini:

D E M O

Cara membuat carousel slideshow

Vertical Image Slider : Auto Reverse

Posted by cah ndeso kluthuk

Vertical Image Slider bisa menjadi pilihan lain setelah di posting sebelumnya telah kita bahas pembuatan Image Slider dalam formasi horizontal. Kalau slider horizontal menggunakan jQuery sebagai pilar utama pembentuk slider, maka untuk kali ini kita hanya menggunakan sebuah javascript yang juga relatif tidak bermuatan besar. Sangat simple dan praktis untuk menerapkannya dalam blog. Dijamin dalam hitungan menit maka vertical slider ini sudah mampu terpampangkan dalam blog.

Cara membuat dan memasang Auto Reverse Image Slider

Posted by cah ndeso kluthuk

Slider spesial ini mampu secara otomatis memngulang kembali tampilan setiap gambar/image dengan membalik kembali posisi gambar seperti posisi awalnya. JQuery 1.3.2.min.js kembali kita manfaatkan dengan pertimbangan karena hampir bisa diyakini bahwa sebagian besar blogger memanfaatkannya sehingga kita tidak perlu lagi menambah javascript dengan kapasitas besar hanya untuk membuat sebuah slider dengan kwalitas sangat memenuhi standar dan layak ditampilkan sebagai pelengkap blog. Slider ini didesain untuk mengulang setiap 5 (lima image) dalam setiap periode dengan kecepatan rotasi yang dapat di atur. Image yang digunakan mempunyai ukuran 160px x 180px (width x height. Perubahan yang dilakukan terhadap ukuran gambar/image harus disertai dengan penyesuaian desain slider karena perubahan sekecil apapun (terutama width) akan sangat berpengaruh terhadap penampilan slider yang harus mempunyai kepresisian tinggi berkaitan dengan ketepatan setiap bagian slider terhadap image yang ditampilkan.

Cara membuat dan Memasang Tabel 4 Kolom: Panduan BloGGeR

Posted by cah ndeso kluthuk

Tabel 4 Kolom dimaksudkan untuk memaksimalkan ruang yang tersedia sehingga tidak terlalu banyak bagian ruang yang terbuang dengan sia-sia karena terlalu banyaknya spasi yang sering terjadi dengan terlalu luasnya ruang yang digunakan. Penggunaan tabel juga memberikan keuntungan dari sisi tampilan karena terlihat seperti 3D. Untuk membuat tabel 4 kolom ini hanya perlu dilakukan dengan menyimpan KODE CSS yang tersedia di atas KODE ]]></b:skin> dan menggunakan xHTML di bagian body atau di ruang posting.

Panduan Cara Membuat Scroll Box-2: Tutorial BloGGeR Scoller

Posted by cah ndeso kluthuk

Scroll box ini memang bykan scrollbox sederhana. Box didesain secara lengkap dengan penataan secara khusus untuk menampilkan sebuah artikel pendek lengkap dengan box title, boks teks serta box thumbnail (image berukuran kecil). Anda dapat menggunakannya untuk ringkasan posting, misalnya.

Cara membuat dan memasang Scroller Box-1: Panduan dan Tutorial BloGGeR

Posted by cah ndeso kluthuk

Membuat scroll box tidaklah susah, tetapi ada yang lebih penting dari mudahnya cara membuat scroller box. Membuatnya menjadi lebih menarik, atraktif, dilengakapi dengan penataan yang baik untuk memuat teks atau gambar dan nyaman untuk di aduk-aduk isi dalamnya. Ada beberapa cara membuat scroll box, untuk kali ini akan kita buat scroll box yang agak rumit dengan menggunakan tabel.

Cara membuat dan Memasang Javascript Tooltip-4: Image, Transparency and Fade Effect

Posted by cah ndeso kluthuk

Masih seperti sebelumnya, kali ini masih akan menampilkan tooltip dengan javascript "minimalis" untuk menjaga performa blog terutama pada saat loading. Dengan javascript yang tidak terlalu berkapasitas besar diharapkan beban blog tidak akan semakin bertambah berat. Meskipun demikian sebaiknya jangan terlalu pesimistis akan kemampuan scrip yang satu ini. Meskipun terhitung sederhana, javascript yang satu ini bisa di bilang punya kemampuan agak menakjubkan.

Untuk membuatnya silahkan simpan KODE CSS di atas kode </head> kemudian simpan javascript di atas kode </body>.

Cara Membuat dan Memasang Javascript Tooltip-3 Display inline: Panduan BloGGeR ToolTIP

Posted by cah ndeso kluthuk

Sangat jauh berbeda dila dibandingkan tooltip yang biasa dipergunakan. Tooltip ini akan menampilkan teks tooltip dalam baris teks di sebelah kanan nama link yang dipergunakan. Sangat sederhana dan sangat sedikit javascript serta KODE CSS yang dipergunakan. Seperti biasanya : simpan KODE CSS di atas KODE ]]></b:skin> , sedang javascript di letakkan di atas KODE </body> atau di bawah KODE ]]></b:skin> . xHTML digunakan untuk posting.

KODE CSS, Javascript dan xHTML - "Javascript GRinlinetips-3"

Cara Membuat dan Memasang Javascript Tooltip-2 : Display image in tooltip !

Posted by cah ndeso kluthuk

Javascript Tooltip-1 berbeda dengan CSS tooltip sebelumnya yang memfungsikan hover untuk menghasilkan tooltip. Dengan javascript ini, tooltip dimunculkan melalui "title" pada link yang kita gunakan. Tentu saja CSS masih juga diperlukan untuk pengaturan beberapa fungsi, seperti posisi (padding dan margin), warna, background, serta jenis, tebal dan ukuran teks/font.

Cara Membuat dan Memasang Javascipt Tooltip-1: Tutorial BloGGeR ToolTIP

Posted by cah ndeso kluthuk

Cara membuat dan memasang CSS Tooltip-3: Panduan BloGGeR ToolTIP

Posted by cah ndeso kluthuk

Desain CSS Tooltip-3 sudah ditambahkan dengan efek transparansi dan lebih sederhana dibandingkan CSS Tooltip-2. Cara pembuatan kedua tooltip ini sama persis, perbedaan yang ada hanyalah penggunaan xHTML pada saat posting dilakukan. Untuk mencobanya silahkan pelajari cara pembuatan CSS Tooltip-2.

KODE CSS Tooltip-3 :

Cara membuat dan Memasang CSS Tooltips-2: Tutorial BloGGeR ToolTIP

Posted by cah ndeso kluthuk

CSS tooltips yang ke-2 ini sangat jauh berbeda strukturnya bila dibandingkan dengan css tooltips sebelumnya. Jauh lebih bagus dan yang terpenting adalah : kompatibel dengan semua browser. Selain mampu menampilkan tips yang berupa teks, tooltips ini dapat mempreviewkan image dengan ukuran yang bisa diatur. Kode css sudah didesain sedemikian rupa sehingga tips yang tertampilkan membentuk tatanan yang sangat rapi dan menarik.

Screenshoot CSS Tooltip-2

Keterangan Penting

Cumulus swf - flash

Categories

Arsip...

Flag Counters

Pengikut

Recent Comments plus Kode CSS Box Gelap

Vertical Menu

Download Browser

Widget

CSS 3

Special Tutorials

Javascript-JQuery

Blog-Email-Modem

File Hosting

Promosi Blog

Adobe-Image-Animasi

Tutorial BlogDETIK

New BloGGER Templates

Panduan BloGGeR

Tutorial Blogger

Tips-Trik Blogger

Pengilon

Ge-eR

Sobat Ngeblogh

var ultimaFecha = 'Minggu, 28 Februari 2010'; remplaza_fecha('Minggu, 28 Februari 2010');

remplaza_fecha('');remplaza_fecha(ultimaFecha);

var ultimaFecha = 'Jumat, 26 Februari 2010'; remplaza_fecha('Jumat, 26 Februari 2010');

remplaza_fecha('');remplaza_fecha(ultimaFecha);

remplaza_fecha('');remplaza_fecha(ultimaFecha);

var ultimaFecha = 'Rabu, 24 Februari 2010'; remplaza_fecha('Rabu, 24 Februari 2010');

remplaza_fecha('');remplaza_fecha(ultimaFecha);

remplaza_fecha('');remplaza_fecha(ultimaFecha);

var ultimaFecha = 'Selasa, 23 Februari 2010'; remplaza_fecha('Selasa, 23 Februari 2010');

remplaza_fecha('');remplaza_fecha(ultimaFecha);

remplaza_fecha('');remplaza_fecha(ultimaFecha);

remplaza_fecha('');remplaza_fecha(ultimaFecha);

var ultimaFecha = 'Minggu, 21 Februari 2010'; remplaza_fecha('Minggu, 21 Februari 2010');

remplaza_fecha('');remplaza_fecha(ultimaFecha);

remplaza_fecha('');remplaza_fecha(ultimaFecha);

var ultimaFecha = 'Sabtu, 20 Februari 2010'; remplaza_fecha('Sabtu, 20 Februari 2010');

var ultimaFecha = 'Jumat, 19 Februari 2010'; remplaza_fecha('Jumat, 19 Februari 2010');

remplaza_fecha('');remplaza_fecha(ultimaFecha);