gubhug reyot

Cara Membuat Horizontal Roll Menu

Posted by cah ndeso kluthuk

Roll Menu ini merupakan menu yang tersembunyi di atas navbar. Sebuah controll yang bertuliskan "Menu" dibuat dibagian atas-kanan halaman dan berfungsi untuk membuat menu yang tersembunyi meluncur ke bawah. Sebuah controll yang lain berfungsi membuat menu kembali meluncur menghilang. Contoll yang satu ini dibuat tak terlihat akan tetapi didesain mudah tersentuh cursor secara tak sengaja. Posisinya tepat di bawah garis terluar menu bagian bawah dengan ketinggian controll sebesar 30px. Untuk membuat roll menu diperlukan javascript, kode css, css3 dan xHTML.

Cara pembuatan Roll Menu

Overflow dan penggunaannya

Posted by cah ndeso kluthuk

Ada beberapa value overflow yang bisa kita pakai untuk kelengkapan blog. Masing-masing overflow mempunyai fungsi dan kegunaan yang berbeda. Di bawah ini merupakan pengenalan beberapa scroll box dan scroll box yang terbentuk berkaitan dengan penggunaan properti overflow.

Contoh-contoh Bentuk Overflow

Overflow visible

Pansus Hak Angket Bank Century memantapkan langkah untuk mengungkap skandal senilai Rp 6,7 triliun, meski Presiden SBY menolak imbauan mereka . Penolakan SBY, lanjutnya, sudah diperkirakan Pansus akan tetap fokus pada ...Pansus Hak Angket Bank Century

Overflow hidden

Pansus Hak Angket Bank Century memantapkan langkah untuk mengungkap skandal senilai Rp 6,7 triliun, meski Presiden SBY menolak imbauan mereka untuk menonaktifkan pejabat negara yang terlibat kasus Century. Pansus akan tetap fokus pada upaya untuk mengungkap skandal tersebut. Anggota Pansus dari Fraksi Partai Hanura, Akbar Faisal menyatakan pihaknya tidak mempersoalkan penolakan imbauan Pansus oleh Presiden SBY, sepanjang tidak ada upaya memperlambat pemeriksaan. Penolakan SBY, lanjutnya, sudah diperkirakan dan tidak akan menggangg ...

Overflow auto

Overflow scroll

Cara Penulisan kode HTML Overflow

Cara membuat Vertical Menu with Descriptions

Posted by cah ndeso kluthuk

Vertical menu ini mampu menghadirkan deskripsi menu dengan effek css3. Effek css3 akan terlihat saat cursor berada di atas link menu. Dengan digunakannya sebuah boks deskripsi menu dengan kapasitas cukup longgar, maka anda dapat menyampaikan beberapa hal terkait menu title yang diharapkan membuat pengunjung blog merasa penasaran sehingga tergelitik untuk mengetahui isi menu tersebut.

D E M O

Cara Membuat Drop Down Menu dengan Javascript

Posted by cah ndeso kluthuk

Drop down menu tetap menjadi satu menu terfavorit hingga saat ini

karena sangat effisien akan tempat dan mampu memuat atau dikembangkan menjadi anak menu hingga jumlah yang tidak terbatas. Disamping sangat effektif ruang, banyak inovasi yang dikembangkan dapat menciptakan drop down menu dengan penampilan menarik tanpa harus dipenuhi dengan javascript yang terlalu njelimet. Di bawah adalah salah satu dd menu yang di padukan dengan animasi gif yang membuat menu ini tampil sangat "keren" dan bergaya. (KLIK untuk melihat gambar dalam ukuran besar).

Lakukan penyimpanan javascript dan css di bagian head di atas KODE ]]></b:skin> atau javascript di bawah <head> sedang css di atas ]]></b:skin>

Javascript :

<script type="text/javascript">
var timeout = 100;
var closetimer = 0;
var ddmenuitem = 0;
function GRopen(id)
{ GRcancelclosetime(); if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
ddmenuitem = document.getElementById(id); ddmenuitem.style.visibility = 'visible'; }
function GRclose() { if(ddmenuitem) ddmenuitem.style.visibility = 'hidden'; }
function GRclosetime() { closetimer = window.setTimeout(GRclose, timeout); }
function GRcancelclosetime() { if(closetimer) { window.clearTimeout(closetimer);
closetimer = null; } } document.onclick = GRclose;
</script>

KODE CSS :

#bgsGR_sddmenu {
margin: 0;
padding: 0;
z-index: 30;
}
#bgsGR_sddmenu li {
background: #0000FF url(http://i45.tinypic.com/2ep4m1h.gif);
margin: 0; border-bottom: 2px solid #999999; border-top: 2px solid #999999;
padding: 0;
list-style: none;
float: left;
font-size: 14px; font-family: Cursive; font-weight: bold;
}
#bgsGR_sddmenu li a {
display: block;
margin: 0 1px 0 0;
padding: 7px 8px;
width: auto;
background: #FFFF33 url(http://i50.tinypic.com/1z3c5tx.png); /*bg tampilan */
color: #FFF;
text-align: center;
text-decoration: none;
}
#bgsGR_sddmenu li a:hover {
background: url(http://i49.tinypic.com/1079ef7.gif); color: #FF0000;
}
#bgsGR_sddmenu div {
position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: transparent;
border: 1px solid #5970B2;
}
#bgsGR_sddmenu div a {
border-bottom: 3px solid #999999;
border-left: 1px solid #999999;
border-right: 1px solid #999999;
top: 15px;
z-index:100;
position: relative;
display: block;
margin: 0;
padding: 5px 10px;
width: auto;
white-space: nowrap;
text-align: left;
text-decoration: none;
color: #2875DE;
font-size: 12px; font-family: verdana; font-weight:bold;
}
#bgsGR_sddmenu div a:hover {
background: #49A3FF url(http://i45.tinypic.com/2ep4m1h.gif);
color: #FFF;
}

Contoh HTML untuk menu :

<ul id="bgsGR_sddmenu">
<li><a href="#" onmouseover="GRopen('GR1')" onmouseout="GRclosetime()">Nama Pulau</a>
<div id="GR1" onmouseover="GRcancelclosetime()" onmouseout="GRclosetime()">
<a href="#">Sumatera</a>
<a href="#">Kalimantan</a>
<a href="#">Bali</a>
<a href="#">Lombok</a>
<a href="#">Sulawesi</a>
<a href="#">Jawa</a>
<a href="#">Nusakambangan</a>
<a href="#">Madura</a>
</div>
</li>
<li><a href="#" onmouseover="GRopen('GR2')" onmouseout="GRclosetime()">Nama Propinsi</a>

<div id="GR2" onmouseover="GRcancelclosetime()" onmouseout="GRclosetime()">
<a href="#">Kepulauan Riau</a>
<a href="#">Papua Barat</a>
<a href="#">Sulawesi Tenggara</a>
<a href="#">Nusa Tenggara Timur</a>
<a href="#">Jawa Timur</a>
<a href="#">Jogjakarta</a>
<a href="#">Daerah Istimewa Aceh D</a>
</div>
</li>

<li><a href="#" onmouseover="GRopen('GR3')" onmouseout="GRclosetime()">Nama Kabupaten/Kota</a>
<div id="GR3" onmouseover="GRcancelclosetime()" onmouseout="GRclosetime()">
<a href="#">Badung</a>
<a href="#">Kutai Kertanegara</a>
<a href="#">Magelang</a>
<a href="#">Mojokerto</a>
<a href="#">Cirebon</a>
<a href="#">Solok</a>
</div>
</li>
<li><a href="#" onmouseover="GRopen('GR4')" onmouseout="GRclosetime()">Nama Orang</a>

<div id="GR4" onmouseover="GRcancelclosetime()" onmouseout="GRclosetime()">
<a href="#">Kartodimejo</a>
<a href="#">Jambul</a>
<a href="#">Tlepong</a>
<a href="#">Nasution</a>
<a href="#">Ngabdul</a>
<a href="#">Tecuari</a>
</div>
</li>
<li><a href="#" onmouseover="GRopen('GR5')" onmouseout="GRclosetime()">Merk Mobil</a>
<div id="GR5" onmouseover="GRcancelclosetime()" onmouseout="GRclosetime()">

<a href="#">Toyota</a>
<a href="#">Honda</a>
<a href="#">Lamborgini</a>
<a href="#">Cadilac</a>
<a href="#">Izuzu</a>
<a href="#">Mercedes Benz</a>
</div>
</li>
</ul>
<div style="clear:both"></div>

<a href="#">Sumatera</a>

1. Tanda # adalah URL untuk Link Menu.
2. Sumatera adalah contoh nama menu.

Bentuk Sususnan Pemasangan Kode CSS dan xHTML

CSS Gallery Spesial

Posted by cah ndeso kluthuk

CSS Image Gallery didesain untuk memuat 10 buah image. Controll gallery berupa thumbnail serta button next dan previous. Untuk menampilkan setiap image dalam gallery dilakukan dengan meng-klik thumbnail contoll yang menampilkan 5 buah thumbnail dalam bentuk deret horizontal. Thumbnail controll sendiri sebenarnya berisikan 10 thumbnail, sehingga agar setiap thumbnail dapat terlihat maka pergeseran thumbnail dilakukan melalui button prev dan next.

Kolom Posting dg BackgroundTransparan

Posted by cah ndeso kluthuk

Untuk menciptakan dinamisasi halaman blog, mungkin kolom/boks transparan bisa menjadi salah satu alternatif. Boks dengan effek transparansi mempunyai sebuah background image yang tertutup oleh background color transparan hingga background image tetap terlihat secara samar-samar. Anda bisa memanfaatkan boks dengan background-nya sebagai boks posting. Akan lebih cantik jika setiap materi posting disesuaikan dengan background image yang digunakan. Sebagai contoh saat anda menuliskan sebuah artikel tentang mobil maka yang ditampilkan sebagai background dengan effek transparansi adalah sebuah gambar mobil atau sesuatu yang berkaitan dengan artikel tersebut.

D E M O

MouseOver with Simple CSS

Posted by cah ndeso kluthuk

Mouse over dengan css ini sebenarnya menggunakan prinsip rollover.Jadi gambar di bawah bukanlah sebuah sulap atau animasi gif tetapi merupakan gambar dengan dua obyek yang yang berdampingan. Melalui serangkaian css, maka ketika cursor berada di atas gambar, gambar akan bergeser secara cepat untuk menampilkan gambar di sisi kanan. Untuk mendapatkan effect yang sempurna atau dengan ukuran gambar berbeda hanya perlu dilakukan perubahan lebar (width) dan tinggi (height) pada KODE CSS dan obyek yang ditampilkan. Untul lebik jelasnya anda bisa mendownload gambar di bawah beserta KODE CSSnya.

Hover Image dari Gambar berbeda Langsung Nongol

Posted by cah ndeso kluthuk

Hover yang dibuat untuk memperlihatkan gambar berbeda dari gambar/image yang ada dihalaman posting biasanya tidak akan langsung muncul begitu saja meskipun cursor sudah di letakkan di atasnya. Hal ini disebabkan image baru yang di tugaskan sebagai hover masih harus menunggu loading terlebih dahulu. Kejadian seperti ini tentunya akan membuat harapan akan hover yang muncul seketika begitu cursor diatas obyek menjadi sirna.Di bawah ini ada sebuah trik yang mampu membuat sebuah hover image dari obyek berbeda akan spontan muncul ketika cursor menyentuh obyek yang ditampilkan.

Demo : Arahkan cursor pada gambar di atas!

Contoh KODE yang digunakan hover image :

Style font ringkas/praktis untuk posting

Posted by cah ndeso kluthuk

Saat melakukan posting, pembuatan style font atau huruf dan angka biasanya selalu menggunakan toolbars/fitur yang tersedia di box posting, baik untuk membuat font berwarna, font tebal, ataupun merubah besar . Ada trik spesial yang sebenarnya jarang sekali diungkap untuk membuat style-style font tertentu yang dapat kita gunakan untuk melakukan posting dimana ruang posting menjadi lebih ringkas/praktis dan tidak "nggedabyah" (bahasa Indonesia : tidak terlalu memenuhi ruang posting).

Dengan menyimpan beberapa KODE CSS di bagian head yang berkaitan dengan style font, maka kita dapat membuat berbagai macam style font/teks yang bahkan dalam beberapa hal tak mungkin dilakukan jika hanya mengandalkan toolbars yang tersedia, seperti misalnya membuat font dengan ukuran tertentu. Dengan metode ini maka dalam beberapa hal menjadi lebih simple dan sangat memudahkan blogger saat harus melakukan update ulang atau revisi beberapa kesalahan tulis di

Hover Melayang atau Fly Hover

Posted by cah ndeso kluthuk

Sebelum melangkah lebih lanjut untuk menggunakan KODE CSS hover melayang, perlu kita pahami bersama terlebih dahulu yang dimaksud dengan haver melayang atau fly hover ini.
Fly hover sebenarnya sama saja seperti bentuk hover yang lain yaitu memunculkan teks atau image saat cursor berada di atasnya. Pada hover biasa, desain hover dengan memperbesar ukuran obyek dari ukuran aslinya akan membuat posisi obyek di sekitarnya berubah sehingga akan mengganggu kenikmatan seseorang saat menikmati obyek-obyek yang ada karena posisi obyek yang lain menjadi berpindah tidak beraturan. Dengan menggunakan fly hover CSS ini, maka sebesar apapun obyek yang diciptakan sebagai hover tidak akan mengganggu atau merubah posisi obyek-obyek lain di halaman blog. Untuk lebih jelasnya kamu bisa membuka link demo di bawah ini.

D E M O

Keterangan tentang demo:

Dalam demo yang akan anda lihat merupakan desain yang sama namun menggunakan effek css3 transition. Fungsinya sama persis dengan seluruh kode dalam posting ini, hanya saja yang di posting ini tidak menggunakan effek css3. Perbedaan yang lain adalah posisi preview image saat thumbnail/image diposisikan di kiri dan kanan posting. Silahkan anda bisa mencoba dari kedua desain yang tersedia, baik di sini atau yang disertakan dalam demo.

KODE CSS dan xHTMLfly hover :

Scroller Bar with Color Properties

Posted by cah ndeso kluthuk

Scroller Bar with Color Properties merupakan scroller bar dengan modifikasi warna pada seluruh bagian scroller sehingga penampilannya benar-benar berbeda dari scroller bar yang biasa digunakan. Scroller bar ini akan tampil dengan sangat sempurna di Internet Explorer dan Opera (terbaru) sehingga tentunya akan membuat blog semakin menarik untuk dinikmati.

Gunakan KODE seperti di bawah ini untuk menampilkan scroller bar with Color Properties :

xHTML :

<div style="scrollbar-arrow-color:yellow;scrollbar-base-color:blue;scrollbar-darkshadow-color:black;scrollbar-highlightcolor:green;scrollbar-shadow-color:brown;background:#CCC;color:#000;border:8px double #930;border-radius:5px;padding:6px;width:300px;height: 200px;overflow:scroll"  cols="30" rows="5" wrap="off">
teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks teks
</div>

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini:

Update »Setu PAHING, Maret, 24, 2012

» Happy Blogging - gubhugreyot «

Berbagai kode Scrollbox untuk Posting

Posted by cah ndeso kluthuk

Pemanfaatan ruang posting mejadi satu faktor yang harus diperhatikan oleh blogger, terutama apabila posting artikel sangat panjang. Bentuk posting yang terlalu panjang selain tidak effektif dalam pemanfaatan halaman blog, dampak negatifnya adalah sering membuat pengunjung blog menjadi "malas" untuk melihat atau bahkan membaca hingga tuntas. Untuk mengatasi permasalahan seperti ini scrollbox menjadi satu solusi paling tepat. Sebenarnya scrollbox bisa dibuat dalam berbagai macam variasi, terutama berkaitan dengan imporovisasi warna, seperti halnya background, border, scrollbar-arrow-color, scrollbar-base-color, scrollbar-darkshadow-color, scrollbar-highlightcolor, scrollbar-shadow-color. Sayangnya untuk sementara ini hanya IE dan Opera yang sudah support terhadap css properti scroller bar. Apabila anda ingin menggunakan scrollbox yang kompatible untuk semua browser, KODE di bawah ini bisa anda manfaatkan saat membuat posting.

Scroller bar sederhana.

On Mouseover Alert

Posted by cah ndeso kluthuk

Yang dimaksud On mouseover alert pada posting ini berfungsi untuk menampilkan pesan pada saat pengunjung blog menggerakkan cursor di atas gambar. Bentuk KODE yang digunakan adalah sebuah javascript yang sangat sederhana. Script ini dapat ditampilkan pada blog dalam bentuk posting atau diletakkan pada di antara tag <body> dan </body>.

D E M O :

Arahkan cursor di atas image!

Cara membuat On Mouseover Alert :

Show Image/text on Mouseover with Javascript

Posted by cah ndeso kluthuk

Selain menggunakan CSS, efek transparansi gambar bisa juga dilakukan dengan menggunakan javascript. Sangat simple dan praktis untuk digunakan. Javascript ini berfungsi untuk menampilkan gambar saat cursor menyentuh gambar.

Javascript Show Image on Mouseover

Show and Hide Image With Effect

Posted by cah ndeso kluthuk

Show and Hide Image With Effect mampu meciptakan effect dengan mouseover dan mouseout serta cara KLIK pada mouse. Sekalipun hanya dengan sedikit javascript, effect yang mampu diciptakan sangat eksotis sekali.

Javascript Show and Hide Image With Effect

<script type="text/javascript">
/* gubhugreyot - bloggerstars1 */
function BGS_GR_blor(id, opacStart, opacEnd, millisec) {
//speed for each frame
var speed = Math.round(millisec / 10);
var timer = 0;
//determine the direction for the blending, if start and end are the same nothing happens
if(opacStart > opacEnd) {
for(i = opacStart; i >= opacEnd; i--) {
setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
timer++;
}
} else if(opacStart < opacEnd) {
for(i = opacStart; i <= opacEnd; i++)
{
setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
timer++;
}
}
}
//change the opacity for different browsers
function changeOpac(opacity, id) {
var object = document.getElementById(id).style;
object.opacity = (opacity / 100);
object.MozOpacity = (opacity / 100);
object.KhtmlOpacity = (opacity / 100);
object.filter = "alpha(opacity=" + opacity + ")";
}
</script>

Cara menggunakan javascript:

Image Selector dengan Effect Transisi Opacity

Posted by cah ndeso kluthuk

Bentuk penggabungan dari backckground image yang berupa animasi gif dipadukan dengan effect transisi gambar menggunakan javascript yang memanfaatkan opacity akhirnya menghasilkan sebuah effect yang fantantis dari sebuah image selector. Effect transisi setiap pergantian image juga bisa di atur sehingga bisa dilakukan perubahan oleh pengguna hanya melalui perubahan kecil yang dilakukan di ruang posting. Dengan kata lain ; tidak perlu repot-repot selalu mengobrak-abrik javascriptnya! Keuntungan penggunaan javascript "bgsGRmultifungsi.js" ini adalah bisa digunakan untuk menciptakan effect image dalam bentuk yang lain dengan tetap mengacu pada fungsi opacity.

D E M O

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 = 'Kamis, 31 Desember 2009'; remplaza_fecha('Kamis, 31 Desember 2009');

var ultimaFecha = 'Minggu, 20 Desember 2009'; remplaza_fecha('Minggu, 20 Desember 2009');

var ultimaFecha = 'Sabtu, 19 Desember 2009'; remplaza_fecha('Sabtu, 19 Desember 2009');

var ultimaFecha = 'Jumat, 18 Desember 2009'; remplaza_fecha('Jumat, 18 Desember 2009');

var ultimaFecha = 'Rabu, 16 Desember 2009'; remplaza_fecha('Rabu, 16 Desember 2009');

var ultimaFecha = 'Selasa, 15 Desember 2009'; remplaza_fecha('Selasa, 15 Desember 2009');

remplaza_fecha('');remplaza_fecha(ultimaFecha);

var ultimaFecha = 'Senin, 14 Desember 2009'; remplaza_fecha('Senin, 14 Desember 2009');

var ultimaFecha = 'Minggu, 13 Desember 2009'; remplaza_fecha('Minggu, 13 Desember 2009');

remplaza_fecha('');remplaza_fecha(ultimaFecha);

var ultimaFecha = 'Rabu, 02 Desember 2009'; remplaza_fecha('Rabu, 02 Desember 2009');

xHTML :

remplaza_fecha('');remplaza_fecha(ultimaFecha);

var ultimaFecha = 'Selasa, 01 Desember 2009'; remplaza_fecha('Selasa, 01 Desember 2009');

remplaza_fecha('');remplaza_fecha(ultimaFecha);

remplaza_fecha('');remplaza_fecha(ultimaFecha);

remplaza_fecha('');remplaza_fecha(ultimaFecha);