gubhugreyot : Demo & Tutorial: March 2012

Saturday, 31 March 2012

Friday, 30 March 2012

Monday, 26 March 2012

Create heading style with effect using CSS3

Lightbox demo dan tutorial

Link di atas adalah salah satu contoh penggunaan heading style with effect yang dimanfaatkan sebagai sebuah link. Jika anda mengarahkan cursor pada link di atas maka akan terlihat effek yang tercipta berupa opacity effect yang digabungkan dengan css3 transition. Pada dasarnya heading style with effect dapat digunakan tidak hanya sebagai sebuah pembentuk/box bagi judul/title sebuah paragraf saja namun bisa dimanfaatkan untuk banyak hal dalam blog. Termasuk di bawah ini, yang digunakan sebagai sebuah judul/title.

Kode CSS Heading Style with Effect

Kode CSS :

h4.GRheading{
        font-family:Times New Roman; 
        font-size:18px; 
        font-weight:bold; 
        padding:5px  0; 
        border-bottom:1px solid #aaa; 
        border-left:30px solid #aaa; 
        opacity:0.7;
        filter:alpha(opacity=70);
        border-top-left-radius:4px;
        border-bottom-left-radius:4px;
}
h4.GRheading:hover{
        opacity:1.0;
        filter:alpha(opacity=100);
        border-color:#900;
}
h4.GRheading,h4.GRheading span{
        transition:0.8s linear;
        -o-transition:0.8s linear;
        -moz-transition:0.8s linear;
        -webkit-transition:0.8s linear;
        -ms-transition:0.8s linear;
}
h4.GRheading span{
        border-top-right-radius:5px;
        padding:3px 10px;
        margin-left:3px;
        margin-top:-5px;
        display:block;
        color:#900;
        border-top:3px solid #888;
        border-right:2px silid #888;
        background:#555;
}
h4.GRheading:hover span{
        color:#orange;
        background:#aaa;
}

Tutorial :

Back to tutorial » Heading style with effect

Effek Hujan Dhuwit

Effek hujan uang sebenarnya merupakan pengembangan dari effek hujan salju atau snow effect. Untuk merubah salju menjadi bentuk uang anda hanya perlu membuat sebuah gambar baru berbentuk uang kemudian upload melalui boks posting blogger. Gunakan URL hasil upload tadi dengan menempatkannya di javascript. Anda dapat mengganti image dengan berbagai image yang lain dan sebutlah effeknya sesuka anda sesuai dengan image yang digunakan.

Tutorial :
Back to tutorial

Create body background using javascript

Umumnya, membuat atau menambah sebuah background image pada body dilakukan menggunakan kode CSS, namun kali ini kita akan membuatnya menggunakan javascript. Sangat simple dan amat mudah menggunakannya. Letakkan dan simpan javascript di atas kode </body> dan segera buka blog untuk melihat bagaimana javascript ini bekerja. Jika anda tak merubah image yang digunakan sebagai background pada javascript, maka halaman blog anda akan terlihat seperti di blog ini (lihat di sisi kanan dan kiri halaman yang background-nya terlihat seperti dari bahan serat kayu/wood.

Template Tata Letak :

Javascript :

<script type="text/javascript">
if (document.all||document.getElementById)
document.body.style.background="url('https://lh3.googleusercontent.com/-TsO62JV2VfU/T24gYRSDWOI/AAAAAAAAAgs/1R-WamNCKkU/s128/gubhugreyot_wood-01.gif') center repeat"
</script>

Blogger Template Designer :

Javascript :

<script type="text/javascript">
document.write("<style>.body-fauxcolumn-outer .cap-top{z-index:0;opacity:0.0;filter:alpha(opacity=0);</style>");
if (document.all||document.getElementById)
document.body.style.background="url('https://lh3.googleusercontent.com/-TsO62JV2VfU/T24gYRSDWOI/AAAAAAAAAgs/1R-WamNCKkU/s128/gubhugreyot_wood-01.gif') white center repeat"
</script>

Tutorial :
Back to tutorial

Display Menu Icon on hover with javascript & css3

Javascript berfungsi untuk menampilkan icon yang berkaitan dengan menu yang ditampilkan. Animasi yang terjadi ketika cursor diarahkan diatas link menu tercipta berkat digunakannya css3 transition. Sangat jarang menu yang didesain dengan menampilkan icon seperti dalam javascript ini sehingga mungkin saja ini bisa menjadi sebuah pilihan menarik buat anda! Gunakan icon dengan ukuran secukupnya agar daftar menu tetap selalu dapat terlihat dengan sempurna tanpa terganggu penggunaan menu icon.

Sunday, 25 March 2012

jQuery Auto Hide Box with Controll

jQuery auto hide box with controll merupakan sebuah desain yang berfungsi menampilkan box yang didalamnya berisi berbagai informasi dalam bentuk teks, image atau kode html. Box ini akan terlihat selama beberapa saat setelah blog dibuka. Lama waktu box terlihat serta posisi box dapat diatur melalui javascript, sedang ukuran box diatur dengan kode CSS. Jika dalam blog anda sudah menggunakan jQuery versi 1.3.2 hingga versi 1.7.1, maka anda cuma perlu menambah javascript dan kode css saja, karena dalam satu blog hanya memerlukan 1 buah jQuery. Untuk menghilangkan box dari halaman blog secara manual, jQuery auto hide box with controll dilengkapi dengan sebuah controll. Conroll tersebut terletak di ujung kanan-bawah box. Dengan sekali klik maka box akan menghilang tanpa perlu menunggu auto hide bekerja.

Tutorial :
Back to tutorial

Box ini akan menghilang setelah 50 detik, sesuai dengan hideafter yang disertakan senilai 50000 ( 50000 equivalen dengan 50 detik karena setiap 1000= 1 detik). Lama waktu bisa kamu ubah dengan merubah nilai hideafter. Semakin kecil nilainya maka box akan semakin cepat menghilang.
Apabila ingin menghilangkannya secara manual silahkan

gubhugreyot Auto Hide Box bisa di gunakan untuk menyampaikan pesan, iklan atau bentuk yang lain, dimana materi di dalamnya bisa berupa gabungan teks dan image.
Box akan menghilang setelah 40 detik. Apabila ingin menghilangkannya secara manual silahkan:

Friday, 23 March 2012

Image Slider with Fade Effect Transition

Image-1 Image-2 Image-3

Slider dengan fade effect transition ini menggunakan sebuah javascript yang sangat sederhana. Slider memuat 3 buah image dengan sebuah background image yang akan terlihat hanya di saat gallery dibuka. Background image ditampilkan dalam bentuk transparan melalui opacity effect. Dibalik background image disertakan juga satu background animasi gif yang berfungsi membuat efek terang-gelap hingga seakan yang memiliki effek terang gelap adalah image dalam slider.

Javascript :

<script type="text/javascript">
//<![CDATA[
function BGS_GR_blor(id, opacStart, opacEnd, millisec) {
    var speed = Math.round(millisec / 25);
    var timer = 0;
    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++;
        }
    }
}
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 + ")";
}
function BGS_GR_blor(divid, imageid, imagefile, millisec) {
    var speed = Math.round(millisec / 25);
    var timer = 0;
    document.getElementById(divid).style.backgroundImage = "url(" + document.getElementById(imageid).src + ")";
    changeOpac(0, imageid);
    document.getElementById(imageid).src = imagefile;
    for (i = 0; i <= 100; i++) {
        setTimeout("changeOpac(" + i + ",'" + imageid + "')", (timer * speed));
        timer++;
    }
}
//]]>
</script>

Kode CSS :

span.controllmu{width:60px;display:inline-block;padding:4px 6px;background:#333 url(http://www.abchoes.com/images/textbg.png);color:#f00;margin:0 0 6px 1px;border:2px solid #777;border-right:2px solid #888;text-align:center;}
span.controllmu:hover{background:#900;color:#fff;}

xHTML :

<div style="float:left;background:#333;padding:4px;margin:5px 15px 5px 0;border-radius:4px;">
<a href="javascript:BGS_GR_blor('pics','BGS_GR_blor', 'https://lh3.googleusercontent.com/-9w_Fiv-PJeQ/T20GncsIQgI/AAAAAAAAAfw/33z3Uc0Vwwg/h340/gubhugreyot_cah-ayu-14.jpg',500)"><span class="controllmu">Image-1</span></a><a href="javascript:BGS_GR_blor('pics','BGS_GR_blor', 'https://lh5.googleusercontent.com/-8xr4NI5qRSA/T20GlkCNnGI/AAAAAAAAAfo/_dDUGLuVXQc/h340/gubhugreyot_cah-ayu-13.jpg',500)"><span class="controllmu">Image-2</span></a><a href="javascript:BGS_GR_blor('pics','BGS_GR_blor', 'https://lh6.googleusercontent.com/-lHhUrUcz0ew/T20Gp3gV7WI/AAAAAAAAAf4/zQXIWpv4DQs/h420/gubhugreyot_cah-ayu-11.jpg',500)"><span class="controllmu">Image-3</span></a>
<div id="pics" style="background:url(https://lh4.googleusercontent.com/-Stz6oRyVlgA/T2z8v9rMwdI/AAAAAAAAAfg/LWZluvASP-8/h340/anima-80x10.gif);border:4px ridge orange;width:224px;">
<img style="filter:alpha(opacity=70);opacity:0.7;" id="BGS_GR_blor" src="https://lh3.googleusercontent.com/-z4E25hU20KU/T20GrTS8ytI/AAAAAAAAAgI/X9a3-tkr07k/h340/gubhugreyot_cah-ayu-10.jpg"/>
</div>
</div>

Cara membuat :

Login ke Blogger.
- Tuliskan "User Name" (gmail) atau tuliskan "Email Address" (non gmail).
- Tuliskan Password.
- Klik "Sign in"
Beberapa saat setelah klik sign in anda akan menjumpai halaman "Dasbor (Dasboard)".
Klik "Rancangan (Design)".
Kembali halaman baru akan terbuka, klik "Edit HTML".
Sebuah halaman baru kembali kita jumpai. Halaman ini berisi 3 (tiga) bagian:
- Backup/Restore Template » berisi fitur untuk melakukan backup template.
  Lakukan Backup template setiap kali akan melakukan penambahan atau pengurangan kode (xHTML, kode CSS dan javascript) melalui "Box Edit Template".
- Edit Template » berisi sebuah box besar yang di dalamnya berisikan kode html penyusun blog.
- Old Templates » berisi template lama blogger (Template Tata Letak & Template Klasik.
Cari kode ]]></b:skin> pada "Box Edit Template".
Copy javascript dan letakkan di bawah ]]></b:skin>
Copy kode CSS dan letakkan di atas ]]></b:skin>
Klik "Simpan Template (Save Template)".
Gunakan xHTML di box posting atau "Add a Gadget | HTML/Javascript".

Keterangan/Catatan :

Gunakan image dengan ukuran sama. Lebar image 224px.
Jika ingin merubah ukuran image, rubah pula lebar image pada xHTML:
width:224px;
Posisi image slider dapat diatur dengan merubah nilai margin pada xHTML :
margin:5px 15px 5px 0;

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

Posting » Jemuah LEGI, Maret, 23, 2012

» Happy Blogging - gubhugreyot «

Hover Image with Effect

CSS hover image dimaksudkan untuk membuat penggunaan image dalam blog bisa lebih diperkecil sehingga penataan posting juga menjadi lebih mudah. Dengan hover image with effect maka image hanya akan ditampilkan dalam bentuk thumbnail dengan tinggi 100px dan lebar secara otomatis menyesuaikan diri sebanding dengan ukuran image sesungguhnya. Image dalam ukuran lebih besar hanya akan ditampilkan ketika cursor diarahkan di atas thumbnail. Dengan memanfaatkan properti css3 transition, penampakan image akan berjalan melalui transisi waktu yang disertai effek opacity. Waktu transisi ini dapat diperbesar atau diperkecil dengan mengatur nilai (value) css3 transition property.

CSS3 hover image dapat diterapkan untuk membentuk sebuah image gallery sekaligus dapat juga digunakan gambar tunggal seperti yang biasa digunakan untuk posting. Untuk membuat fungsi seperti di atas, pengaturan/setting dilakukan melalui penggunaan floating position pada kode css.

D E M O :

Arahkan cursor di atas thumbnail untuk menampilkan image yang berukuran lebih besar.

Kode CSS :

.GRflying_gallery{
        margin:20px auto;
        width:98%;
        padding:1%;
        background:#fff;
        text-align:center;
}
a.GRflying,.GRflying_kiri,.GRflying_kanan{
        position:relative;
        cursor:pointer;
}
a.GRflying,a.GRflying span,a.GRflying_kiri,a.GRflying_kiri span,a.GRflying_kanan,a.GRflying_kanan span{
        transition:0.8s;
        -o-transition:0.8s;
        -moz-transition:0.8s;
        -webkit-transition:0.8s;
        -ms-transition:0.8s;
}
a.GRflying img,a.GRflying_kiri img,a.GRflying_kanan img{
        height:100px;
        width:auto;
        margin:2px;
        padding:4px;
        background:#666;
        border:2px solid #eee;
        border-radius:5px;
        box-shadow:0 0 6px #999;
        opacity:0.7;
        filter:alpha(opacity=70);
}
a.GRflying_kiri{margin:5px 12px 5px 0;float:left;}
a.GRflying_kanan{margin:5px 0 5px 12px;float:right;}
a.GRflying:hover img,a.GRflying_kiri:hover img,a.GRflying_kanan:hover img{
        opacity:1.0;
        filter:alpha(opacity=100);
}
a.GRflying span,a.GRflying_kiri span,a.GRflying_kanan span{
        display:block;
        position:absolute;
        top:-400px;
        z-index:-10;
        opacity:0;
        filter:alpha(opacity=0);
}
a.GRflying_kiri span,a.GRflying_kanan span{top:-300px;}
a.GRflying span{left:-90%;}
a.GRflying_kiri span{left:0;}
a.GRflying_kanan span{right:0;}
a.GRflying:hover span,a.GRflying_kiri:hover span,a.GRflying_kanan:hover span{
        z-index:999;
        opacity:1.0;
        filter:alpha(opacity=100);
}
a.GRflying span img,a.GRflying_kiri span img,a.GRflying_kanan span img{
        background:rgba(0,0,0,0.4);
}
a.GRflying:hover span img,a.GRflying_kiri:hover span img,a.GRflying_kanan:hover span img{
        width:auto;
        height:300px;
        box-shadow:4px 4px 4px #999;
        border-radius:12px;
}

Kode CSS image di sebelah kiri:

<a class="GRflying_kiri" href="URL"><img src="thumb.jpg" /><span><img src="image.jpg" /></span></a>

Kode CSS image di sebelah kanan:

<a class="GRflying_kanan" href="URL"><img src="thumb.jpg" /><span><img src="image.jpg" /></span></a>

Kode CSS Image Gallery:

<div class="GRflying_gallery">
<a class="GRflying" href="URL-1"><img src="thumb-1.jpg" /><span><img src="image-1.jpg" /></span></a>
<a class="GRflying" href="URL-2"><img src="thumb-2.jpg" /><span><img src="image-2.jpg" /></span></a>
<a class="GRflying" href="URL-3"><img src="thumb-3.jpg" /><span><img src="image-3.jpg" /></span></a>
<a class="GRflying" href="URL-4"><img src="thumb-4.jpg" /><span><img src="image-4.jpg" /></span></a>
</div>

Trick Buat Box Posting dg Background Transparan

Anda dapat menggunakan berbagai ukuran image sebagai background. Pengaturan dilakukan melalui properti css background position dan background repeat serta background size. Dengan dilibatkannya properti background size, bahkan anda dapat ememaksa sebuah image dengan ukuran yang tak sesuai dengan box bisa menjadi selebar box.

Background image with transparency effect for blog posts, dibuat menggunakan 3 buah tag DIV dalam posisi relatif dan absolute serta menyisipkan opacity effect untuk meghasilkan transparansi. Anda dapat mengatur tingkat transparansi dengan mengatur nilai opacity. Warna background juga dapat anda rubah, dimana perubahan juga harus disertai dengan perubahan warna font. Perubahan warna font bertujuan membuat teks dapat terbaca dengan mudah.

Kode CSS :

#GRkolomku{
        background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR06VVTTMwTKK_FZ0w9m9aI40uspbJlCkvhHYJqyErsH7ThGFP2NMLbwbtZfkVYcT6OynrMOI1JELT9EptVuAHZZ4Fyf-AT074DNrpf3G2GSw2suDyHvM115kZHesdUg223oSiYWQmECY/);
        background-position:top center; /* posisi background horizontal-vertical */
        background-repeat:repeat-y; /* berulang secara vertikal */
        background-size:100% auto; /* mengatur ukuran background */
        position:relative;
        width:100%; 
        padding:10px;
        margin:-10px;
}
.GRoverlayku{
        position:absolute;
        top:0; 
        left:0;
        height:100%;
        width:100%;
        background-color:#000; /* sesuaikan background color dengan warna teks */
        opacity:0.5;
        filter:alpha(opacity=50);
}
.GRartikelku{
        position:relative; 
        color:#eee; /* sesuaikan warna teks dengan background-color */
}

xHTML :

<div id="GRkolomku">
<div class="GRoverlayku"></div>
<div  class="GRartikelku">
Content here!
</div>
</div>
</div>

Cara Membuat :

Login ke Blogger.
- Tuliskan "User Name" (gmail) atau tuliskan "Email Address" (non gmail).
- Tuliskan Password.
- Klik "Sign in"
Beberapa saat setelah klik sign in anda akan menjumpai halaman "Dasbor (Dasboard)".
Klik "Rancangan (Design)".
Kembali halaman baru akan terbuka, klik "Edit HTML".
Sebuah halaman baru kembali kita jumpai. Halaman ini berisi 3 (tiga) bagian:
- Backup/Restore Template » berisi fitur untuk melakukan backup template.
  Lakukan Backup template setiap kali akan melakukan penambahan atau pengurangan kode (xHTML, kode CSS dan javascript) melalui "Box Edit Template".
- Edit Template » berisi sebuah box besar yang di dalamnya berisikan kode html penyusun blog.
- Old Templates » berisi template lama blogger (Template Tata Letak & Template Klasik.
Cari kode ]]></b:skin> pada "Box Edit Template".
Copy kode CSS dan letakkan di atas ]]></b:skin>
Klik "Simpan Template (Save Template)".
Buat posting dengan xHTML di atas kemudian buka blog untuk melihat hasilnya.

Catatan/Keterangan :

Sebagian keterangan sudah tertulis dalam kode CSS.
Jika menggunakan background image dengan ukuran kecil, rubah :
- background-size:100% auto; menjadi » background-size:(image-width)px auto;
- background-repeat:repeat-y; menjadi » background-repeat:repeat;
Warna background dan warna teks dapat diganti dengan merubah :
- background-color:#000;
- color:#eee;

Thursday, 22 March 2012

Gandam CSS3 Horizontal Dropdown Menu

Gandam css3 dropdown menu adalah sebuah horizontal dropdown menu yang dibuat secara khusus hanya menggunakan kode css dan css3. Sekalipun tanpa menggunakan javascript, penampilan animatif gandam css3 horizontal dropdown menu tidak sesederhana kodenya. Anda bisa melihat dan mencoba mengarahkan cursor ke "demo" di atas. Animasi dropdown yang disertai transparency effect tak ubahnya seperti sebuah menu yang dibuat menggunakan javascript yang cukup komplex, atau bahkan menggunakan jQuery. Permainan effek di atas hanyalah pengembangan dari css3 transition property, opacity effect serta height pada DIV.

CSS3 Vertical menu with Descriptions

Menu vertival yang dilengkapi dengan deskripsi menu ini dibuat hanya menggunakan kode css dan css3. beberapa kode css3 yang digunakan antara lain border radius (effek rounded corners), css3 text shadow serta css3 transition. CSS3 transition bekerja sebagai kode utama pencipta effek, baik pada link menu maupun ketika deskripsi menu ditampilkan. Anda bisa merubah tempo/durasi bekerjanya effek pada menu dengan merubah nilai css3 transition.

Menggunakan vertival menu with descriptions sangat mudah karena semua kode, baik kode css maupun xHTML dapat disimpan bersama-sama melalui "Add a Gadget". Penggunaan tag span dalam link menu yang berfungsi menciptakan deskripsi menu juga membuat anda dapat melibatkan satu atau beberapa image di dalamnya. Hal ini akan sangat bermanfaat karena deskripsi bisa lebih diperjelas melalui visualisasi dalam bentuk image.

Tutorial :
Back to tutorial » Vertical menu w Descriptions

Wednesday, 21 March 2012

Simple Larva Menu

Larva menu dengan script yang sangat sederhana ini dapat anda gunakan di blogger dengan menyimpan xHTML-nya melalui "Tambah Gadget (Add a Gadget)" yang dpat di akses melalui "Elemen Laman (Page Elemen)". Simpan xHTML pada elemen yang terletak di atas elemen "Blog Post" atau di bawah elemen "header blog". Sesuaikan lebar menu (dengan merubah width) agar menu terlihat rapi. Lebar menu berkaitan dengan jumlah menu yang ditampilkan dan jumlah teks setiap menu. Anda sebaiknya menggunakan nama menu (menu title) yang pendek agar menu yang tertampilkan lebih banyak. Untuk memperpendek setiap menu dapat juga melakukan perubahan pada jenis dan ukuran serta tebal font yang digunakan serta merapatkan spasi setiap menu.

Tutorial :
Back to tutorial

Monday, 19 March 2012

jQuery Scoll to top plus CSS3 Effects

jQuery Scroll to top Controll ini tak berbeda dengan yang selama ini sudah terpostingkan di banyak blog. Hampir semuanya bersumber dari dinamicdrive.com. Yang membedakan posting ini dengan semua posting lain tentang "jQuery Scroll to Top Controll" adalah pada penggunaan css3 yang berfungsi untuk menampilkan beberapa effek baru agar terlihat lebih dinamis. Jika scroll to top yang lain menggunakan bentuk "tips/tooltips" default browser, yang inipun berbeda juga karena melibatkan css2 yang dipadu dengan css3. Agar lebih jelas bagaimana "bentuk penampilan beda" dari jQuery scroll to top controll yang telah dipadukan dengan css3 ini silahkan anda coba dengan mengarahkan sekaligus klik scroll to top contoll di ujung kanan bawah halaman. Anda juga bisa mencobanya pada controll back to top yang berupa teks link di bawah kode css.

Javascript :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="http://gubhugreyotprojects.googlecode.com/svn/tools/jqGRscrolltop.js" type="text/javascript"></script>

Kode CSS :

.jqGRscrolltop{
        position:relative;
        font-weight:bold;
        padding:2px 4px;
        text-decoration:blink;
        color:#eee;
        background:#900;
        margin:20px;
        display:inline-block;
        opacity:0.5;
        filter:alpha(opacity=50);      
}
.jqGRscrolltop:hover{
        opacity:1.0;
        filter:alpha(opacity=100); 
}
.jqGRscrolltop:after{
        font-size:16px;
        font-weight:bold;
        font-family:Courier, monospace;
        text-align:center;
        position:absolute;
        right:-200px;
        top:-50px;
        content:"Scroll Back to Top";
        line-height:30px;
        width:30px;overflow:hidden;
        height:30px;
        background:#888;
        border-radius:4px;
        border:3px double #aaa;
        color:#eee;
        text-shadow:1px 1px 1px #000;
        opacity:0;
        filter:alpha(opacity=0);
        z-index:-10;
}
.GRscrolltop,.jqGRscrolltop:after{
        transition:0.6s linear;
        -o-transition:0.6s linear;
        -moz-transition:0.6s linear;
        -webkit-transition:0.6s linear;
        -ms-transition:0.6s linear;
}
.jqGRscrolltop:hover:after{
        width:190px;
        right:0;
        z-index:12;
        opacity:1.0;
        filter:alpha(opacity=100);
        box-shadow:2px 2px 4px #000;
}
.GRscrolltop{
        width:37px;
        height:40px;
        opacity:0.4;
        background:transparent url(https://lh6.googleusercontent.com/-EeYri7NMau0/T2eGKcLZY-I/AAAAAAAAAc0/u1yBzCHWtrw/h120/GRscrolltop.png) center no-repeat;
        background-size:35px 38px;
        filter:alpha(opacity=40);
        border:3px double transparent;
        padding:5px;
        border-radius:10%; 
} 
.GRscrolltop:hover{
        opacity:1.0;
        filter:alpha(opacity=100);
        background:rgba(0,0,0,.4) url(https://lh6.googleusercontent.com/-EeYri7NMau0/T2eGKcLZY-I/AAAAAAAAAc0/u1yBzCHWtrw/h120/GRscrolltop.png) center no-repeat;
        background-size:35px 38px;
        border:3px double #930;
        border-radius:50%;
}

Login ke Blogger.
Halaman Dasbor/Dasboard :
Klik "Rancangan/Design".
Klik "Edit HTML".
Lakukan Backup Template.
Cari Kode ]]></b:skin>
Copy javascript dan letakkan di bawah ]]></b:skin>
Copy kode CSS dan letakkan di atas ]]></b:skin>
Klik "Simpan Template/Save Template".

Jika anda ingin menggunakan sebuah ling controll untuk back to top seperti yang terletak di atas kode css, gunakan xHTML berikut:

xHTML link scroll to top controll :

<a class="jqGRscrolltop" href="#GRtop">Back to TOP</a>

Catatan/Keteoangan :

Untuk mengganti image yang digunakan sebagai contoll, ganti 2 background dengan alamat:
https://lh6.googleusercontent.com/-EeYri7NMau0/T2eGKcLZY-I/AAAAAAAAAc0/u1yBzCHWtrw/h120/GRscrolltop.png.
Jika ingin merubah ukuran image contoll, lakukan perubahan pada :
background-size:35px 38px;
Panduan lebih lengkap dengan kode css yang sedikit berbeda dapat anda buka di sini!

Sunday, 18 March 2012

CSS3 Hover Tabs with Transparency Effect

Transparency Effect dalam hover tabs css3 ini dibuat dengan memanfaatkan rgba color yang difungsikan sebagai background content tab pertama dan tab kedua. Sebuah image dipasang sebagai background box sehingga efek transparansi semakin nampak. Beberapa background image juga ditambahkan pada masing-masing tab untuk memberi efek berbeda.

Tutorial :
Ke Tutorial : Rainbow Tabs

First Tab

Tuliskan teks di sini ! Urip mono sing jelas kudu metu kringete! Ora sah sok ngondho tanggane, lan ora kakehan ngomong ning diakehi le tumindak! Eman-eman idune wong dudu idu geni koyo idune sing podho nganggo dasi lan sepatonan kinclong!!!

Menu Masakan Indonesia
Trik Belajar Hipnotis
Tutorial Blogdetik
Adobe Photoshop
Lightbox
Trik Tundukkan Wanita

Second Tab

Urip mono sing jelas kudu metu kringete! Ora sah sok ngondho tanggane, lan ora kakehan ngomong ning diakehi le tumindak! Eman-eman idune wong dudu idu geni koyo idune sing podho nganggo dasi lan sepatonan kinclong!!!

Nama Link2a
Nama Link2b
Nama Link2c
Nama Link2d
Nama Link2e
Nama Link2f
Nama Link2g
Nama Link2h
Nama Link2i
Nama Link2j

CSS Floating Menu with CSS3 Effects

Daftar menu tersembunyi yang dibuat dengan kode css ini mempunyai beberapa efek berkat penggunaan kode css3. Menu ditempatkan si sisi kiri halaman blog dan hanya memperlihatkan "sebuah sensor" yang digunakan "sebagai pentriger" menu agar ketika disentuh cursor seluruh bagian menu terlihat. Karena menggunakan css3 maka hanya kompatibel di browser yang sudah mendukung css3.

D E M O

Lihat menu sebelah kiri dan arahkan cursor di atasnya.

Cara membuat berikut kodenya bisa anda dapatkan di gubhugreyot.

Tutorial :
Back to tutorial : CSS Floating menu

Trick Membuat Effek Salju - Snow Effect di blog

Yang dimaksud dengan trik membuat effek salju sebenarnya hanyalah perkara sederhana, dimana hanya menyarankan anda untuk menggunakan javascript snow effect yang sudah terupload di file hosting. Dengan hanya memasang sebuah link javascript maka template anda menjadi lebih bersih alias tidak terlalu semrawut karena dijejali banyak javascript.

Di bawah ini sudah tersedia sebuah link javascript snow effect. Silahkan copy dan pastekan di atas tag </body>.

Javascript Efek Salju :

<script src="http://gubhugreyotprojects.googlecode.com/svn/effects/effek-salju.js" type="text/javascript"></script>

Cara pasang :

Login ke Blogger.
Halaman Dasbor/Dasboard :
Klik "Design/Rancangan".
Lanjutkan klik "Edit HTML".
Lakukan Backup Template".
Cari kode </body> dan letakkan link javascript tepat di atanya.
Klik "Simpan Template/Save Template".

Saturday, 17 March 2012

Trik Termudah Pasang Scroll Up & Scroll Down

Javascript scroll up sekaligus scroll down ini merupakan javascript paling sederhana sebagai sebuah auto scroller. Berfungsi sebagai penggulung ke atas dan ke bawah dengan pengaturan jarak (dalam pixel). Scroller dengan pengaturan jarak memberi keuntungan lebih karena memungkinkan kita memanfaatkan javascript ini dalam dua fungsi.

Sebagai auto scroller dengan jarak pendek/terbatas (lebih kecil dari tinggi halaman blog).
Anda dapat mengatur jarak up dan scroll down ini dalam radius kecil seperti misalnya 500px, 700px, 900px atau dengan nilai berbeda yang disesuaikan dengan kebutuhan (misalnya dari bab-1 ke bab-2).
Memfungsikan auto scroller sebagai scroll to top contoll dan scroll to bottom controll. Ketika digunakan untuk fungsi seperti ini kita hanya perlu mengatur jarak gulung auto scroller dengan nilai yang sangat besar yang kira-kira pasti akan lebih dari ketinggian halaman blog (misalnya 50000).

Kode CSS :

<style type="text/css">
.GRfixed_top,.GRfixed_bottom,.GRtop,.GRbottom{
        font:Arial 12px;
        font-weight:bold;
        background:#CCC;
        color:#900;
        text-shadow:2px 2px 2px #888;
        border:1px solid #888;
        padding:3px 4px;
        cursor:pointer;
        opacity:0.7;
        z-index:20;
        filter:alpha(opacity=70);
        transition:0.7s ease-out;
        -o-transition:0.7s ease-out;
        -moz-transition:0.7s ease-out;
        -webkit-transition:0.7s ease-out;
        -ms-transition:0.7s ease-out;
}
.GRtop,.GRbottom{
        display:block;
        margin:15px auto;
        text-align:center;
}
.GRfixed_top,.GRfixed_bottom{
        position:fixed; 
        bottom:0; 
        left:3px;   
}
.GRfixed_bottom{
        left:130px;
}
.GRfixed_top:hover,.GRfixed_bottom:hover,.GRtop:hover,.GRbottom:hover{
        background:#900;
        color:#ddd;
        opacity:1.0;
        filter:alpha(opacity=100); 
        z-index:99;
}
</style>

Javascript :

<script type="text/javascript">
//<[CDATA[
m = 50000
function fixedScrolldown(){
    for (GR = 1; GR <= m; GR++){
        parent.scroll(1,GR);
    }
}
function fixedScrollup(){
    for (GR = m; GR >= 1; GR--){
        parent.scroll(m,GR);
    }
}
n = 1000 /* atur range scroller */
function GRdown(){
    for (GR = 1; GR <= n; GR++){
        parent.scroll(1,GR);
    }
}
function GRup(){
    for (GR = n; GR >= 1; GR--){
        parent.scroll(n,GR);
    }
}
//]]>
</script>

xHTML-1:

<input class="GRfixed_top" type=button value="Scroll to Bottom" onClick="fixedScrolldown()"/>
<input class="GRfixed_bottom" type=button value="Back to Top" onClick="fixedScrollup()"/>

xHTML-2:

<input class="GRtop" type=button value="Ke Bab-2" onClick="GRdown()"/>
Bab-1
Sebelum membahas lebih lanjut tentang jenis-jenis anjing galak yang suka menggigit manusia, dalam bab pertama akan dibahas terlebih dahulu jenis anjing lokal yang paling dibenci orang karena suka makan uang haram. Anjing lokal pemakan uang haram lebih dikenali sebagai anjing koruptor. Mereka selalu berpakaian rapi dan berharga mahal dengan mulut setiap saat berbuih menyuarakan "perangi dan bersihkan korupsi". Masyarakat lebih banyak yang tertipu dengan penampilan anjing-anjing ini dan setiap pemilu datang akhirnya kembali memilih mereka sebagai anggota DPR atau pejabat negara lainnya seperti bupati, gubernur, presiden ... dan ...

Bab-2

Akhir posting/penutup
<input class="GRbottom" type=button value="Back to TOP" onClick="GRup()"/>

Cara membuat : Menggunakan script sebagai button scroll to top controll dan scroll to bottom controll:

Login ke Blogger.
Klik "Rancangan (Design)".
Klik salah satu "Add a Gadget (Tambah Gadget)".
Pilih dan klik "HTML/Javascript"
Simpan seluruh kode kecuali xHTML-2 dalam "Box HTML/Javascript".
Klik "SAVE/SIMPAN"
Buka Blog dan lihat hasilnya.

Menggunakan script sebagai scroller dengan controll jarak (range controll).

Gunakan saat posting dan gunakan seperti terlihat pada xHTML-2
Atur range auto scroller pada javascript (n = 1000) untuk mendapat jarak yang sesuai.

Cara Buat DivTab View dengan Javascript

Javascript tab view ini sangat simple dan dapat digunakan secara langsung di blog tanpa perlu menambah lagi dengan script yang lain. Anda juga tak perlu menyimpan di file hosting. Bersama beberapa kode css, javascript membentuk sebuah fungsi tab view. Tab view juga dibuat tanpa melibatkan satupun background image, sehingga beban loadingnya akan semakin cepat. Dalam desain ini digunakan 5 buah tab, namun demikian jika dikehendaki anda dapat menambah atau mengurangi.

D E M O Tab View:

Javascript-1 :

<script type="text/javascript">
//<[CDATA[
function GRtab_view_aux(m, k) {
    var l = document.getElementById(m);
    var n = l.firstChild;
    while (n.className != "tabs") {
        n = n.nextSibling
    }
    var i = n.firstChild;
    var o = 0;
    do {
        if (i.tagName == "A") {
            o++;
            i.href = "javascript:GRtab_view_switch('" + m + "', " + o + ");";
            i.className = (o == k) ? "Active": "";
            i.blur()
        }
    } while (i = i.nextSibling);
    var p = l.firstChild;
    while (p.className != "FTs") {
        p = p.nextSibling
    }
    var j = p.firstChild;
    var o = 0;
    do {
        if (j.className == "FT") {
            o++;
            if (p.offsetHeight) {
                j.style.height = (p.offsetHeight - 2) + "px"
            }
            j.style.overflow = "auto";
            j.style.display = (o == k) ? "block": "none"
        }
    } while (j = j.nextSibling)
}
function GRtab_view_switch(d, c) {
    GRtab_view_aux(d, c)
}
function GRtab_view_initialize(b) {
    GRtab_view_aux(b, 1)
};
//]]>
</script>

Javascript-2 :

<script type="text/javascript">
GRtab_view_initialize('GRtab_view');
</script>

Kode CSS :

.GRtab_view{
        margin:20px auto;
        text-align:center;
        float:none;
        background:#eee;
        width:356px;
}
div.GRtab_view div.tabs{
        cursor:pointer;
        height:30px;
        overflow:hidden;
        border:4px solid #999;
        float:left;
        width:350px;
        background:#666;
}
div.GRtab_view div.tabs a{
        float: left;
        display: block;
        text-align:center;
        padding:8px;
        vertical-align: middle;
        border: 1px solid #444;
        font-family:Arial;
        font-weight:700;
        font-size:11px;
        text-transform:uppercase;
        color:#eee;
        background:#666;
}
div.GRtab_view div.tabs a:hover{
        background:#900;
        color:#fff;
} 
div.GRtab_view div.tabs a.Active{
        background:#444;
        color:#FF0000;
}
div.GRtab_view div.tabs a.Active:hover{
        background:#555;
        color:#ffff99;
} 
div.GRtab_view div.FTs{
        clear: both;
        text-align:left;
        border:3px solid #888;
        border-bottom-width:10px;
        overflow: hidden;
        background:#888;
        width:350px;
        height:250px;
        margin-top:0;
        font-size:11px;
        font-family:verdana;
        color:#CCC;
        line-height:18px;
        padding:1px;
        background:rgba(0,0,0,0.1);
}
div.GRtab_view div.FTs ul{
        list-style-type:square;
        margin:0;
        padding:0;
        padding-left:15px;
}
div.GRtab_view div.FTs li p{
        margin:0 0 0 4px;
}
div.GRtab_view div.FTs div.FT{
        background:rgba(0,0,0,0.6);
        height:100%;
        padding:10px;
        overflow:hidden;
}
div.GRtab_view div.FTs div.FT div.Fs{}
div.GRtab_view a{
        cursor:pointer;
        color:#F90;
        text-decoration:none;
        padding:2px 4px;
        margin:0;
        text-shadow:1px 1px 1px #000;
}
div.GRtab_view a:hover{
        color:#6FF;
        text-decoration:none;
        background:#F90;
}
div.GRtab_view a.GRview_img img{padding:2px;background:#777;}
div.GRtab_view a.GRview_img:hover{background:none;}
div.GRtab_view a.GRview_img img:hover{
        background:#F90;
}

xHTML :

<div class="GRtab_view" id="GRtab_view">
    <div class="tabs">
        <a>CSS</a>
        <a>Javascript</a>
        <a>Animasi gif</a>
        <a>Music</a>
        <a>Gallery</a>
    </div>             
<!-- ======== Start content ========== -->
<div class="FTs">
    <div class="FT">
        <ul>
            <li><a href="http://gubhugreyot.blogspot.com/2010/01/tab-view.html" target="_blank">Drop Down Menu</a><p>Dropdown menu css3 ...</p></li>
            <li><a href="http://gubhugreyot.blogdetik.com" target="_blank">Tab View Script</a></li>
            <li><a href="http://tantytm.blogspot.com" target="_blank">Hoizontal Menu</a></li>
            <li><a href="http://lightbox-demo-tutorial.blogspot.com" target="_blank">Opacity Effect Script</a></li><a class="GRview_img" href="http://bgsgr.blogspot.com" target="_blank"><img class="opa" src="https://lh6.googleusercontent.com/-KBlhOxwhO24/T14I_GP8XvE/AAAAAAAAAXY/eMUM3EBaEBs/s144-c/12Maret2012.jpg" style="width:50px;margin:5px 0 5px 0;" /></a>
        </ul>
    </div>
    <div class="FT">
        <ul>
            <li><a href="http://gubhugreyot-demo-tutorial-blogger-2.blogspot.com/2012/03/hidden-text-sizer.htmlhtml" target="_blank">Hidden Tex Sizer/a></li>
            <li><a href="Link Text Animation.html" target="_blank">Text Animation</a></li>
            <li><a href="Link Top Bar Script.html" target="_blank">Top Bar Script</a></li>
        </ul>
    </div>
    <div class="FT">
        <ul>
            <li><a href="Link Memotong Gambar.html" target="_blank">Memotong Gambar</a></li>
            <li><a href="Link Photo dari Layar PC.html" target="_blank">Photo dari Layar PC</a></li>
        </ul>
    </div>
    <div class="FT">
        <ul>
            <li><a href="Link Mp3 Barat.html" target="_blank">Mp3 Barat</a></li>
            <li><a href="Link Mp3 Indonesia.html" target="_blank">Mp3 Indonesia</a></li>
            <li><a href="LinkReggae.html" target="_blank">Reggae</a></li>
        </ul>
    </div>
    <div class="FT">
        <ul>
            <li><a href="Link Photo Artis.html" target="_blank">Photo Artis Telanjang</a></li>
<a class="GRview_img" href="Link Photo Artis.html" target="_blank"><img src="https://lh6.googleusercontent.com/-KBlhOxwhO24/T14I_GP8XvE/AAAAAAAAAXY/eMUM3EBaEBs/s144-c/12Maret2012.jpg" style="width:50px;margin:5px 0 5px 0;" /></a>
            <li><a href="Link Photo Pemandangan.html" target="_blank">Photo Pemandangan </a></li>
            <li><a href="Link Pakaian Adat Afrika.html" target="_blank">3.Pakaian Adat Afrika</a></li>
        </ul>
    </div>
</div>
<!-- ======== End content ========== -->
</div>

Catatan/Keterangan :

Simpan kode css di atas ]]></b:skin>
Simpan Javascript-1 di bawah kode ]]></b:skin>
Simpan Javascript-2 di atas kode </body>
Gunakan xHTML melalui :
Dasboard » Design (Rancangan) » Page Elements (Elemen Laman) » Add a Gadget
Anda bisa juga menyimpan kode css dan javascript-1 di atas xHTML dan Javascript-2 di bawah xHTMl. Semua dilakukan melalui Add a Gadget.
Panduan lebih detail dapatkan di sini!

Top Navigation Bar

Saturday, 31 March 2012

Javascript dan xHTML Tagcloud Flash Animasi:

Friday, 30 March 2012

Kode CSS, Javascript dan xHTML :

Monday, 26 March 2012

Lightbox demo dan tutorial

Kode CSS Heading Style with Effect

Kode CSS :

Back to tutorial » Heading style with effect

Javascript :

Javascript :

Sunday, 25 March 2012

Friday, 23 March 2012

Javascript :

Kode CSS :

xHTML :

Kode CSS :

Kode CSS image di sebelah kiri:

Kode CSS image di sebelah kanan:

Kode CSS Image Gallery:

Kode CSS :

xHTML :

Thursday, 22 March 2012

Wednesday, 21 March 2012

Monday, 19 March 2012

Javascript :

Kode CSS :

xHTML link scroll to top controll :

Sunday, 18 March 2012

First Tab

Second Tab

Judul Menu Pertama

Judul Menu Kedua

Judul Menu Pertama

Judul Menu Kedua

Javascript Efek Salju :

Saturday, 17 March 2012

Kode CSS :

Javascript :

xHTML-1:

xHTML-2:

Javascript-1 :

Javascript-2 :

Kode CSS :

xHTML :

Total Pageviews