Menampilkan Profil Pengunjung dg Hover Effect

Hoo... ho.... sobat2 blogger tercinta. Kali ini kita akan bermain dengan kode css. Beberapa properti css akan kita manfaatkan dalam sebuah efek hover. Efek yang akan kita dapat cukup mengejutkan sekaligus menghibur, Javascript tidak kita butuhkan, hanya kode css saja bersama beberapa xHTML. Pada intinya, melalui hover effect kita mencoba mengubah atau menukar sebuah image agar ditampilkan sebuah image berbeda. Ya ... ini sangat menarik dan pasti membuat kalian suka atau mungkin saja tertawa sambil geleng-geleng kepala. Ya ... mungkin saja ... atau he ... he ... bisa jadi kalian justru malahan mengumpat nggak karuan. Yahh ... memang bisa2 saja karena segala kemungkinan bisa terjadi.

Sebelum lihat demo berikut kode css dan xhtml serta satu sampel xhtml yang sudah lengkap dengan imagenya, sebaiknya persiapkan dulu cara menyimpan kode css atau xhtml-nya dengan membuka Spesial Tutorials yang terletak disebelah kiri halaman. Anda bisa mempelajari cara backup template, cara cepat cari kode html ataupun berbagai cara menyimpan kode di template. O ... ya ..., setelah buka demo dan mencoba hover effeknya, sampeyan jangan kaget jika image profil sampeyan terpampang dengan cantiknya di halaman blog. Yaaahh... pokoknya jangan marah klo lihat photo sampeyan hilang satu gara-gara tercuri dan tiba-tiba saja bisa muncul melalui efek hover. He ... jangan marah, ya?! Ha.... ha .... ha ...

D E M O

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

Posting » Kamis    KLIWON, Maret, 08, 2012

» Happy Blogging - gubhugreyot «

08.11 | 0 komentar | Read More

Trik Percantik Image Posting dg CSS3 Border Radius Property

Ini benar-benar trik sungguhan. He... Sungguh, lhoh! Tak banyak blogger yang tahu cara ini. Yah ...mungkin saja baru di gubhugreyot saja yang ada (uhuiii...Sombong dikit boleh, khan?!). Bener! Sungguh! Hui ... katanya suruh banyak posting yang original! Yang jelas aku sudah coba browsing dan tak ketemukan satupun yang sama dengan "teknik & trik" yang coba aku gunakan. Tapi .., ya .. itu, nggak tahu klo browsingnya ada nyang kelewat. Oi ... namanya juga manusia, broer..., mas... mbak , bu..., mbah, kek..., ... mbuh sopo maneh... sik rung tak sebut!

Dengan cara baru ini semua menjadi terasa gampang, cepat dan bisa dilakukan siapa saja. Sebenarnya,sih, ada cara lain yang sangat-sangat simpel kode html-nya, tapi sayang di opera nggak support seperti di Safari, Crhome atau mozilla ... Yah ...tak apalah, sementara kita gunakan cara yang ini dulu. Yang penting sampeyan semua jadi lebih bisa berimprovisasi dengan gambar-gambar di blog (gambar posting dan yg lain).

D E M O

Gambar di atas dan yang di bawah ini salah satu contoh image yang dibuat menggunakan css3 border radius (rounded corners) dengan memainkan border radius dalam nilai persen (%). Dalam tutorial ini juga tak disertakan xHTMLnya karena semua kode tersedia di halaman demo.



Silahkan lihat contoh gambar lainnya melalui link demo di bawah ini:

DEMO: Klik untuk lihat demo lain beserta xHTML-nya!

Kode CSS

.GRphotokuL,.GRphotokuR,.GRphotoku{
      padding:1%; /* code by: gubhugreyot */
      background:#eee;
      box-shadow:0 0 10px #555;
}
.GRphotokuL{
      float:left;
      margin:5px 15px 5px 0;
}
.GRphotokuR{
      float:right;
      margin:5px 0 5px 15px;
}
.GRphotoku{
      margin:15px auto;
      display:block;
      text-align:center;
}

Cara menggunakan:

1. Simpan kode css di atas kode ]]></b:skin>
2. Untuk menampilkan image/gambar di blog gunakan kode html seperti yang terlihat di demo.
3. Untuk gambar di sebelah kiri (float:left;} gunakan class="GRphotokuL"
4. Untuk gambar di sebelah kanan (float:right;} gunakan class="GRphotokuR"
5. Untuk gambar di tengah gunakan class="GRphotoku"
6. Untuk merubah berbagai bentuk lengkungan image beserta sudut lengkungnya, rubah nilai border-radius dengan memperbesar atau memperkecil (dalam %).
7. Nilai persen (%) harus dengan kelipatan 10 karena diluar nilai tersebut tak akan bekerja (10%, 20%, 30% ... s/d 100%).
8. Jika background berwarna gelap, lakukan beberapa perubahan warna pada box-shadow, background dan border.
9. Panduan menyimpan kode css dapat anda buka di deret menu sebelah kiri blog (Special Tutorials).

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

Update » Kemis WAGE, February, 29, 2012

» Happy Blogging - gubhugreyot «

03.36 | 0 komentar | Read More

jQuery Simple Image Zoomer

Yang ini sangat praktis membuatnya. Jquery simple image zoomer hanya menggunakan jQuery-1.3.2.js atau jQuery lain yang fungsinya setara dengan jQuery-1.3.2.js. Jika misalnya ada yang selama ini seudah menggunakan jQuery-1.3.2.js, jQuery-1.3.2.min.js atau bahkan mungkin jQuery-1.4.2.js hingga jQuery-1.7.2.js, maka tinggal tambahkan saja simple-image-zoomer.js kemudian gunakan untuk menampilkan gambar/image di halaman posting.

Sekalipun sebenarnya tanpa bantuan kode CSS simple image zoomer sudah bisa bekerja secara maksimal, namun kita akan coba seddikit menambahkan kode CSS yang digabungkan dengan css3 agar image terlihat lebih cantik.

D E M O

D E M O

D E M O

Javascript Simple Image Zoomer

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="http://gubhugreyot-simple-zoomer.googlecode.com/files/gubhugreyot-simple-zoomer.pack.js" type="text/javascript"></script>

xHTML Simple Image Zoomer

<img class="gRzoom" src="https://sites.google.com/site/gubhugreyotprojects/jan-2012/images/img_gubhugreyot-gadisku-001.jpg" width="150" height="225" />

<img class="gRzoom" src="https://sites.google.com/site/gubhugreyotprojects/jan-2012/images/img_gubhugreyot-gadisku-002.jpg" style="width:200px;height:auto;" />   

<img class="gRzoom" data-gRzoomto="700"    src="https://sites.google.com/site/gubhugreyotprojects/jan-2012/images/img_gubhugreyot-gadisku-003.jpg" width="150" height="130" />

Cara menggunakan Simple Image Zoomer

1. Login ke blogger.
2. Halaman Dasbor (Dasboard).
3. Klik Rancangan (Design).
4. Klik Edit HTML.
5. Lakukan pengamanan terhadap template atau Backup Template. Panduanya bisa dibaca di Special Tutorials yang ada di menu sebelah kiri.
6. Cari kode <head>. Gunakan Ctrl + F untuk memudahkan pencarian kode. Jika menginginkan panduan cara cepat cari kode html dalam template buka Special Tutorials yang terletak di menu vertikal sebelah kiri.
7. Copy dan pastekan javascript di bawah kode <head>.
8. Jika ingin menggunakan tambahan kode CSS agar image terlihat seperti dalam DEMO, Cari kode ]]></b:skin>.
9. Copy dan pastekan kode CSS di atas kode ]]></b:skin>.
10. Klik Simpan Template (Save Template).
11. Gunakan xHTML untuk melakukan posting.
12. Buka halaman posting untuk melihat hasilnya.

Kode CSS Simple Image Zoomer

.gRzoom{
        border:2px solid #eee;
        margin:6px;
        background:#aaa;
        border-radius:10px;
        padding:10px;
        box-shadow:0 0 8px #000;
}

Keterangan/Catatan

• Gunakan image dengan ukuran width dan/atau height lebih dari 300px agar efek zoom lebih terlihat.
• Width dan height yang disertakan pada kode html posting sebaiknya berukuran di bawah 250px agar tidak terlalu memenuhi halaman posting.
• Ukuran width dan height pada kode HTML menggunakan perbandingan sesuai dengan image sesungguhnya. Jika image berukuran width=800, height=400 maka pada kode html bisa menggunakan ukuran width=200 dan height=100
• Jika dalam kode html ditambahkan tag style (seperti contoh kode ke-3), maka bisa dituliskan width="..px; height:auto;
• Besaran zoom bisa diatur dengan menambahkan kode data-gRzoomto="700". Nilai 700 dalam satuan pixel (width).
• Kode CSS hanya dimaksudkan untuk memperindah image bebas untuk digunakan ataupun tidak.

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

» Happy Blogging - gubhugreyot «

00.50 | 0 komentar | Read More

Cara Membuat Efek Raster pada Gambar: Panduan BloGGeR Efek

Banyak sekali hal sederhana ternyata mampu memberikan suatu hasil yang tidak terduga. Efek raster adalah salah satunya. Hanya dengan memanfaatkan sebuah gambar berbentuk raster yang dipadukan dengan obyek gambar utama yang justru dijadikan sebagai background, maka jadilah sebuah obyek baru dengan bentuk gambar raster.

Contoh di bawah ini adalah sebuah obyek gambar yang diberi efek raster :

Cara membuat efek raster :

Gunakan KODE berikut saat melakukan posting dalam bentuk gambar !

<img src="Raster.gif" style="background:#000 url(Image.jpg);width:390px;height:377px;border:4px solid #666;"/>

Keterangan/Catatan :

1. Raster.gif adalah gambar berbentuk raster (berlobang-lobang).
2. Image.jpg adalah gambar utama yang akan ditampilkan.
3. Berikan ukuran width dan height sesuai ukuran gambar utama (image.jpg).
4. Di bawah ini adalah contoh KODE yang dilengkapi gambar raster dan obyeknya yang juga saya sertakan beberapa link raster dengan ukuran berbeda yang mungkin diperlukan. Silahkan untuk dicoba.
   
   • Contoh KODE yang dilengkapi link raster dan obyek :

   <img src="https://sites.google.com/site/gubhugreyotprojects/image-effects/raster-effect/bgsGR_blackRaster-2.400.gif" style="background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGAwl0tvAIJsfuwybfpGilirGA9Uzr9ZW3HRUn1CzMYNyFFpODzCcooNox9OHC6IfO6KVwd2wt2aweVzYEvxsNfwpuP03synwK8bckHLqOwv0mvHrChqhrv38fgFbf_3XTtUvYLHFObkA/s400/gadisku.jpg);height:387px;width:400px;"/>

   • Raster dengan ukuran 150px x 150px :

   https://sites.google.com/site/gubhugreyotprojects/image-effects/raster-effect/bgsGR_blackRaster-2.150.gif

   • Raster dengan ukuran 200px x 200px :

   https://sites.google.com/site/gubhugreyotprojects/image-effects/raster-effect/bgsGR_blackRaster-2.200.gif

   • Raster tipis dengan ukuran 180px x 240px :

   https://sites.google.com/site/gubhugreyotprojects/image-effects/raster-effect/bgsGR_blackRaster-1.180.240.gif.

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

» Happy Blogging - gubhugreyot «

22.58 | 0 komentar | Read More

Attractive Animated Image Borders : Panduan BloGGeR Cara membuat Animasi Bingkai Gambar

Contoh Gambar dengan Animasi Pada Border

Animasi Border gambar/image merupakan hasil pemanfaatan fungsi padding dan background animasi. Pemberian padding memberikan ruang bagi gambar sehingga seolah-olah tampak sebagai border. Bila kamu menginginkan background image yang lain untuk dimanfaatkan sebagai pembentuk border, kamu bisa menggunakan background animasi yang ada di posting sebelumnya (Flashing Link Animation).

KODE yang digunakan untuk membuat Image Borders Animation :

Gunakan KODE seperti di bawah ini ketika melakukan posting gambar !

<img src="Image.jpg" style=";border:2px solid #666; background:#222 url(https://3288785158770787760-a-1802744773732722657-s-sites.googlegroups.com/site/gubhugreyotprojects/bg-effects/flash-link-effect/images/th_bgsGR_RedFlashingLink.gif);padding:12px;border-radius:10px;" />

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

» Happy Blogging - gubhugreyot «

20.21 | 0 komentar | Read More

Image Effect-3 : Rotate

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

14.26 | 0 komentar | Read More

Image Effect-2

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!

CSS - Image Effect-2 :

Kode CSS :

.GRpansus{
      float:left;
      margin:5px 12px 5px 0;
      position:relative;
      width:303px;
      height:228px;
      padding:5px;
      background:#ccc;
      border:3px solid #444;
}
.GRpansus a img{
      border:2px solid #eee;
      width:300px;
      height:225px;
      box-shadow:0 0 0 #fff;
      padding:0;
}
.GRpansus a span{
      position:absolute;
      left:5px;
      top:5px;
      opacity:0.7;
      filter:alpha(opacity=70);
}
.GRpansus a span{
      opacity:1.0;
      filter:alpha(opacity=100);
}
.GRpansus a span img{
      width:300px;
      height:225px;
      margin:0;
      padding:0;
      box-shadow:0 0 0 #fff;
      border:2px solid #555;
      opacity:0.85;
}
.GRpansus a span:hover img{
      opacity:100;
}
.GRpansus:hover a span{
      left:-305px;
      z-index:999;
}

xHTML :

<div class="GRpansus">
<a href="http://lightbox-demo-tutorial.blogspot.com/" target="_blank" title="Gambar pertama"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigxBUIEbZGwduG1AEo_i_oM9a_4_0h9V1dDRlgHk5jAHD4s39xrmTafeucKVzhcj6A13HF4GL-2GnVhHRnPDI8KWd8pj-Rc8PhvQsvJdUh0ZBC-IPmRcs8zen8riRfMS792SQGySJ_Z8E/s225/th_titanic800.jpg" /></a><a href="http://gubhugreyot-demo-tutorial-blogger-1.blogspot.com/" target="_blank" title="Gambar kedua"><span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfpXQY1uQ1tbU8x4MassCpkmvUnOfPCJ3zt7eg0czK3eqaSXeW3OxpOFEAqKyyJN_YPUB_lu31LrJ_32KXl7XAF63IF-o__YwkoqLzdMVC3a_crBF8zUDpWGcX2KYXmB5DEvrFt9uSzhQ/s225/penelopecruz_003.jpg" /></span></a>
</div>Tuliskan teks di sini ! 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!

1. Login ke Blogger.
   
   • Upload javascript Rounded Corners dan buat dalam bentuk link seperti yang terlihat pada box ke-3.
   • Tuliskan "User Name" (gmail) atau tuliskan "Email Address" (non gmail).
   • Tuliskan Password.
   • Klik "Sign in"
2. Beberapa saat setelah klik sign in anda akan menjumpai halaman "Dasbor (Dasboard)".
   Klik "Rancangan (Design)".
3. Kembali halaman baru akan terbuka, klik "Edit HTML".
4. 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.
5. Cari kode ]]></b:skin>.
6. Copy kode CSS dan letakkan di atas ]]></b:skin>
7. Klik "Simpan Template (Save Template)".
8. Gunakan xHTML saat posting atau manfaatkan melalui penambahan gadget.

Catatan/Keterangan :

1. Panduan backup template, cara mencari kode dan beberapa cara menyimpan kode css, javascript dan xHTML dapat dibuka di Special Tutorials pada vertical menu sebelah kiri halaman.
2. Gunakan image dengan ukuran 225 x 300 pixel/px (width x height).
3. Untuk merubah ukuran image lakukan perubahan pada width dan height di kode css.

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

Update » Senen WAGE, Maret, 26, 2012

» Happy Blogging - gubhugreyot «

12.14 | 0 komentar | Read More

jQuery Image Effect-1 - zoom effect

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.

Kode CSS Image Effect-1

.epek{
      float:left;
      list-style:none;
      margin:0;
      padding:0;
}
.epek li{
      margin:0 3px 3px 0; 
      padding:0;
      float:left;
      position:relative;
      width:118px; 
      height:158px;
}
.epek li img.zoom{
      width:100px; 
      height:140px;
      border:4px solid #ddd;
      padding:5px;
      background:#666;
      position:absolute;
      -ms-interpolation-mode:bicubic; 
}
.epek li img.zoom:hover{
      background:#999;
      border:4px double #333; 
}

Javascript - Image Effect-1 :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
//<![CDATA[ 
$(document).ready(function () {
    $(".epek li").hover(function () {
        $(this).css({
            'z-index': '10'
        });
        $(this).find('img').addClass("hover").stop().animate({
            marginTop: '-110px',
            marginLeft: '-110px',
            top: '10%', /* pengatur posisi scr vertical saat zoom bekerja */
            left: '50%', /* pengatur posisi scr horizontal saat zoom bekerja */
            width: '250px', /* ukuran width pada image saat zoo bekerja */
            height: '350px', /* ukuran height pada image saat zoo bekerja */
            padding: '10px'
        },
        1500);
    },
    function () {
        $(this).css({
            'z-index': '0'
        });
        $(this).find('img').removeClass("hover").stop().animate({
            marginTop: '0',
            marginLeft: '0',
            top: '0',
            left: '0',
            width: '100px', /* harus sama dengan width pada kode css */
            height: '140px', /* harus sama dengan height pada kode css */
            padding: '5px'
        },
        1000);
    });
    $(".epek li a").click(function () {
        var mainImage = $(this).attr("href");
        $("#main_view img").attr({
            src: mainImage
        });
        return false;
    });
});
//]]>
</script>

xHTML :

<ul class="epek">
    <li><a id="main_view" href="image-01.jpg"><img class="zoom" src="image-zoom-01.jpg" /></a></li>
    <li><a id="main_view" href="image-02.jpg"><img class="zoom" src="image-zoom-02.jpg" /></a></li>
    <li><a id="main_view" href="image-03.jpg"><img class="zoom" src="image-zoom-03.jpg" /></a></li>
    <li><a id="main_view" href="image-04.jpg"><img class="zoom" src="image-zoom-04.jpg" /></a></li>
</ul>

1. Login ke Blogger.
   
   • Upload javascript Rounded Corners dan buat dalam bentuk link seperti yang terlihat pada box ke-3.
   • Tuliskan "User Name" (gmail) atau tuliskan "Email Address" (non gmail).
   • Tuliskan Password.
   • Klik "Sign in"
2. Beberapa saat setelah klik sign in anda akan menjumpai halaman "Dasbor (Dasboard)".
   Klik "Rancangan (Design)".
3. Kembali halaman baru akan terbuka, klik "Edit HTML".
4. 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.
5. Cari kode <head>
6. Copy dan paste-kan jQuery dan javascript di bawah <head>
7. Cari kode ]]></b:skin>.
8. Copy kode CSS dan letakkan di atas ]]></b:skin>
9. Klik "Simpan Template (Save Template)".
10. Gunakan xHTML saat posting atau manfaatkan melalui penambahan gadget.

Catatan/Keterangan :

1. Panduan backup template, cara mencari kode dan beberapa cara menyimpan kode css, javascript dan xHTML dapat dibuka di Special Tutorials pada vertical menu sebelah kiri halaman.
2. Beberapa pengaturan/setting sudah tertulis di javascript. Silahkan dicermati.
3. image-zoom-01.jpg s/d image-zoom-04.jpg adalah image yang akan bekerja dengan zoom effect.
4. image-01.jpg s/d image-04.jpg akan ditampilkan ketika "klik" dilakukan pada image-zoom-01.jpg s/d image-zoom-04.jpg.
5. Untuk merubah kecepatan efek zoom-nya silahkan rubah variable kecepatan pada javascript berhuruf tebal warna kuning. Semakin besar maka akan semakin lambat.
6. Untuk merubah ukuran image harus dilakukan perubahan secara bersama-sama antara variable width dan height pada javascript dan yang terdapat pada kode CSS. Perubahan dilakukan dengan memperhatikan selisih nilai ukuran yang sudah disediakan sebagai perbandingan.
7. Variable width:'250px' dan height:'320px' (pada javascript) merupaka ukuran image dengan efek zoom. Bila diperlukan lakukanlah perubahan !

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

Update » Senen WAGE, Maret, 26, 2012

» Happy Blogging - gubhugreyot «

00.24 | 0 komentar | Read More

Flashing Border Script

Seperti lampu Natal yang berkelap-kelip, yang dimaksud dengan flashing border di sini juga mampu berkedip seperti halnya lampu natal. Dua warna ternyata sudah mampu memberikan penampilan berbeda dan bisa membuat pengunjung penasaran. Menampilkan border dengan 2 warna berbeda yang terlihat secara bergantian dilakukan dengan menempatkan sebuah javascript di dalam template.

D E M O

Cara Membuat Flashing Border

1. Login ke Blogger.
2. Setelah login, beberapa saat kemudian halaman dasbor akan terlihat.
   Klik "Rancangan (Design)".
3. Halaman baru kembali terbuka. Klik "Edit HTML".
4. Lakukan "Backup Template" Terlebih dahulu.
5. Cari kode </body>, kemudian letakkan javascript di atasnya.
6. Klik "Simpan Template (Save Template)".

Javascript :

<script type="text/javascript">
/* animated border */ //<![CDATA[
var speed = 2000;
function byarpet() {
    var kelapkelip = document.getElementById ? document.getElementById("GRbyarpet") : document.all ? document.all.GRbyarpet: "";
    if (kelapkelip) {
        if (kelapkelip.style.borderColor.indexOf("red") != -1) {
            kelapkelip.style.borderColor = "blue"
        } else {
            kelapkelip.style.borderColor = "red"
        }
    }
}
setInterval("byarpet()", speed);
//]]>
</script>

Keterangan :

1. Untuk mengganti warna border ganti kode yang berwarna merah dan biru.
2. Panduan tentang cara Backup Template, cara mencari kode html dan berbagai cara menyimpan kode css, javascript dan xHTML dapat dibuka di Special Tutorials pada deret menu sebelah kiri.
3. Agar flashing border berfungsi, gunakan xHTML seperti dibawah ini, baik di halaman posting atau bagian yang lain.
4. Gunakan id="GRbyarpet" pada tag yang menggunakan flashing border.
5. Beberpa tag yang dapat digunakan misalnya "div", "span", "p", "a" dan "img".

xHTML Flashing Border :

<img id="GRbyarpet" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7ayWVr1W0PjeXLqCxcnW5p1z8DQAYsi2K_uRdYGdxLnEcHTxA9ha0hNornpRaabhbrjBpcQpadDErdbeXLqhNQxrMbNI4ctk3jn1_MGWzWAa8kVce2iCEw6l9R4mJsMSyLCk6viVmXws/s128/th_gubhugreyot-kuda-laut.jpg" style="float:left;width:200px;height:150px;border:5px double;padding:5px;border-radius:6px;background:#999;margin:5px 12px 5px 0;box-shadow:0 0 5px #666;" />

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

Update » Jemuah    WAGE, Maret, 16, 2012

» Happy Blogging - gubhugreyot «

01.01 | 0 komentar | Read More

Star Effects

Kalau anda mengamati blog ini, akan terlihat bintang-bintang bertebaran menghiasi latar blog yang berupa alam di temaram senja. Cukup dengan copy paste javascript di bawah ini dan simpan di bagian body di atas KODE </body> (Maaf, udah ganti background ma javascriptnya dah terhapus!)

Javascript :

<script language="JavaScript1.2">
//<![CDATA[
/* bloggerstuars/gubhugreyot.blogspot.com -- stareffect.js  */
var ns=document.layers?1:0
var ie4=document.all?1:0
var ns6=document.getElementById&&!document.all?1:0
amount=14;
if (ns){
for (i=0; i < amount; i++)
document.write("<LAYER NAME='nsstars"+i+"' LEFT=0 TOP=0 BGCOLOR='#FFFFF0' CLIP='0,0,1,1'></LAYER>");
}
else if (ie4||ns6){
document.write("<div id='ieCov' style='position:absolute;top:0px;left:0px'>");
document.write("<div style='position:relative'>");
for (i=0; i < amount; i++)
document.write("<div id='iestars"+i+"' style='position:absolute;top:0px;left:0px;width:1;height:1;background:#ffffff;font-size:1;z-index:10'></div>");
document.write("</div></div>");
}
Clrs=new Array('ff0000','00ff00','ffffff','ff00ff','ffa500','ffff00','00ff00','ffffff','ff00ff')
sClrs=new Array('ffa500','00ff00','FFAAFF','fff000','fffffF')
Xpos=300;
Ypos=150;
initialStarColor='00ff00';
step=5;
currStep=0;
explosionSize=120;
function Fireworks(){
var WinHeight=(ns||ns6)?window.innerHeight-100:window.document.body.clientHeight-100;
var WinWidth=(ns||ns6)?window.innerWidth-100:window.document.body.clientWidth-100;
var Yscroll=(ns||ns6)?window.pageYOffset:document.body.scrollTop;
for (i=0; i < amount; i++){
if (ie4||ns6)
var layer=ns6?document.getElementById("iestars"+i).style : eval("iestars"+i).style;
else if (ns)
var layer=document.layers["nsstars"+i]
var randCol=Math.round(Math.random()*8);
var randSz=Math.round(Math.random()*2);
layer.top = Ypos + explosionSize*Math.sin((currStep+i*5)/3)*Math.sin(currStep/100)
layer.left= Xpos + explosionSize*Math.cos((currStep+i*5)/3)*Math.sin(currStep/100)
if (currStep < 110){
if (ns){layer.bgColor=initialStarColor;layer.clip.width=1;layer.clip.height=1}
else{layer.background=initialStarColor;layer.width=1;layer.height=1;layer.fontSize=1}
}
else{
if (ns){layer.bgColor=Clrs[randCol];layer.clip.width=randSz;layer.clip.height=randSz}
else{layer.background=Clrs[randCol];layer.width=randSz;layer.height=randSz;layer.fontSize=randSz}
}
}
if (currStep > 220) 
{
currStep=0;
Ypos = 50+Math.round(Math.random()*WinHeight)+Yscroll;
Xpos = 50+Math.round(Math.random()*WinWidth);
for (i=0; i < sClrs.length; i++)
{
var newIcol=Math.round(Math.random()*i);
}
initialStarColor=sClrs[newIcol];
explosionSize=Math.round(80*Math.random()+100);
}
currStep+=step;
setTimeout("Fireworks()",20);
}
Fireworks();
//]]>
</script>

Catatan :
Supaya script lebih ringkas saat digunakan, sebaiknya Upload javascript di file hosting kemudian gunakan kode
<script="text/javascript" src="http://starEffects.js"></script>
untuk di simpan di atas </body>
Star Effect hanya kompatibel di opera dan Internet Explorer!

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

Update »Ngahad PON, Maret, 25, 2012

» Happy Blogging - gubhugreyot «

07.26 | 0 komentar | Read More

Zoom Image

Zoom Image sangat bagus dan effektif untuk menciptakan effisiensi halaman blog. Dengan mengatur ukuran gambar, kita dapat memilih ukuran gambar yang ingin kita tampilkan di halaman blog hingga ukuran terkecil yang diinginkan. Sentuhan cursor pada gambar membuat gambar orisinil akan terpampangkan dihalaman blog sesuai dengan ukuran aslinya.

D E M O

Klik link demo di bawah ini untuk melihat bagaimana image zoom bekerja dan membuat posting bertambah cantik.

DEMO: Image zoom

Kode CSS

.GRzoombox{
       position:relative;
       float:left;
       width:224px;
       height:174px;
       margin:5px 15px 5px 0;
}
.GRzoombox .GRzoom{
       position:absolute;
       left:0;
       top:0;
       padding:0;
       margin:0;
       border:12px ridge #663333;
       border-radius:8px;
       width:200px;
       height:150px;
}
.GRzoombox .GRzoom:hover{
       z-index:99999;
}

Javascript:

<script src="http://gubhugreyotprojects.googlecode.com/svn/GRzoom.js" type="text/javascript"></script>

xHTML Posting Image Zoom

<div class="GRzoombox">
<img class="GRzoom" src="image.jpg" />
</div>Tuliskan teks atau kalimat anda di sini! Jika teks jumlahnya tak terlalu banyak dan anda ingin menggunakan image zoom lagi di bawahnya maka setelah teks terakhir tambahkan kode <div style="clear:both;"></div> 
Gunakan image (image.jpg dengan ukuran selebar halaman posting atau lebih kecil. Jika image terlalu besar maka ketika zoom image bekerja gambar akan melewati halaman posting hingga ke sidebar kanan.

Cara Menyimpan Kode CSS dan javascript

1. Login ke Blogger
2. Setelah halaman Dasbor (dasboard) terlihat, klik Design (Rancangan)
3. Lanjutkan dengan klik "Edit HTML"
4. Lakukan Backup Template. Caranya bisa anda buka di Special Tutorials yang ada di menu sebelah kiri.
5. Cari kode ]]></b:skin> kemudian letakkan kode CSS di atasnya.
6. Cari kode <head>. Letakkan javascript di atasnya.
7. Klik "Simpan Template (Save Template)"
8. Gunakan xHTML untuk posting seperti yang terlihat dlam box xHTML.
9. Selesai dan selamat posting ... selamat ngelembur!!!!!

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

Update » Setu LEGI, Maret, 03, 2012

» Happy Blogging - gubhugreyot «

05.04 | 0 komentar | Read More

MouseOver with Simple CSS

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.

Cara menggunakan KODE css mouseover effect

Simpan KODE CSS berikut di dalam template pada bagian head atara di antara <head> dan </head>

Kode CSS :

#mouseover a{
       text-decoration : none; 
       display:block; height:167px; 
       width:179px; overflow:hidden; 
       opacity:0.5;
       filter:alpha(opacity=50);
}
#mouseover a:hover{ 
       text-decoration : none; 
       display:block; 
       text-indent:-179px; 
       opacity:1.0;
       filter:alpha(opacity=100);
}

2. Gunakan KODE berikut di bagian body atau saat melakukan posting.

<div id="mouseover" align="center"><a href="http://..../image.jpg"><img  title="mouse rollover" src="http://..../image.jpg"/></a></div>

Keterangan :

1. KODE untuk transparansi gambar (opacity) disertakan hanyalah supaya hasil akhir yang didapatkan sama persis dengan contoh di atas. Apabila tidak di kehendaki maka KODE opacity bisa di hilangkan.
2. Apabila menginginkan gambar dengan ukuran berbeda perlu dilakukan penyesuaian pada height:167px; width:179px;dan text-indent:-179px;

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

Posting » Rabo    KLIWON, Maret, 07, 2012

» Happy Blogging - gubhugreyot «

23.13 | 0 komentar | Read More

Hover Image dari Gambar berbeda Langsung Nongol

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 :

xHTML :

<a href onMouseOver="document.GR1.src='http://.../image.hover1.jpg';" onMouseOut="document.GR1.src='http://.../image1.jpg';"><img src="http://.../image1.jpg" name="GR1" /></a>
<img src="http://.../image.hover1.jpg" style="display:none;padding:0;box-shadow:0 0 0 #fff;border:0 solid;"/>

<a href onMouseOver="document.GR2.src='http://.../image.hover2.jpg';" onMouseOut= "document.GR2.src='http://.../image2.jpg';"><img src="http://.../image2.jpg" name="GR2" /></a>
<img src="http://.../image.hover2.jpg" style="display:none;padding:0;box-shadow:0 0 0 #fff;border:0 solid;"/>

<a href onMouseOver="document.GR3.src='http://.../image.hover3.jpg';" onMouseOut="document.GR3.src='http://.../image3.jpg';"><img src="http://.../image3.jpg" name="GR3" /></a>
<img src="http://.../image.hover3.jpg" style="display:none;padding:0;box-shadow:0 0 0 #fff;border:0 solid;"/>

<a href onMouseOver="document.GR4.src='http://.../image.hover4.jpg';" onMouseOut="document.GR4.src='http://.../image4.jpg';"><img src="http://.../image4.jpg" name="GR4" /></a>
<img src="http://.../image.hover4.jpg" style="display:none;padding:0;box-shadow:0 0 0 #fff;border:0 solid;"/>

Catatan/Keterangan :

• Setiap gambar diberi identitas yang berbeda seperti GR1 s/d GR4
• http://.../image1.jpg s/d http://.../image4.jpg = URL gambar yang ditampilkan/terlihat
• http://.../image.hover1.jpg s/d http://.../image.hover4.jpg = URL gambar yang akan digunakan sebagai hover
• <img src="http://.../image.hover1.jpg" style="display:none;padding:0;box-shadow:0 0 0 #fff;border:0 solid;"/>
  --> style="display:none;padding:0;box-shadow:0 0 0 #fff;border:0 solid;"
  --> berfungsi untuk membuat gambar hover agar terloading bersamaan dengan gambar utama/primer (yang ditampilkan/terlihat), sehingga ketika mouse bearada di atas image maka gambar sekunder langsung nongol tanpa harus loading terlebih dahulu.

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

Update » Jemuah LEGI, Maret, 23, 2012

» Happy Blogging - gubhugreyot «

18.20 | 0 komentar | Read More

Hover Melayang atau Fly Hover

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 :

Kode CSS :

.GRflying_gallery{
        margin:20px auto;
        width:98%;
        padding:1%;
        background:#fff;
        text-align:center;
}
a.GRflying{
        position:relative;
        cursor:pointer;
}
a.GRflying 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:hover img{
        opacity:1.0;
        filter:alpha(opacity=100);
}
a.GRflying span{
        display:none;
        position:absolute;
}
a.GRflying:hover span{
        display:block;
        z-index:999;
}
a.GRflying span img{
        background:rgba(0,0,0,0.6);
}
a.GRflying:hover span img{
        width:auto;
        height:400px;
        box-shadow:4px 4px 4px #999;
        border-radius:12px;
}
a.GRkiri{margin:5px 12px 5px 0;float:left;}
a.GRkanan{margin:5px 0 5px 12px;float:right;}
a.GRflying span{right:-80%;bottom:150px;}
a.GRkiri span,a.GRkanan span{bottom:-200px;}
a.GRkiri span{left:100px;}
a.GRkanan span{right:100px;}

Penggunaan :

Anda dapat menggunakan fungsi hover image untuk posting biasa dengan gabar/image di posisi sebelah kiri dan kanan serta untuk membangun image gallery.

xHTML Image di Kiri:

<a class="GRflying GRkiri" href="http://gubhugreyot.blogdetik.com/"><img src="thumb.jpg" /><span><img src="image.jpg" /></span></a>

xHTML Image di Kanan:

<a class="GRflying GRkanan" href="http://gubhugreyot.blogdetik.com/"><img src="thumb.jpg" /><span><img src="image.jpg" /></span></a>

xHTML Image Image Gallery:

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

Catatan/Keterangan :

• thumbnail.jpg, thumbnail-1.jpg s/d thumbnail-4.jpg adalah image berukuran kecil.
• image.jpg, image-1.jpg s/d image-4.jpg adalah image dengan ukuran besar
• Jika thumnail dan image yang akan ditampilkan berupa gambar yang sama (serupa), anda bisa mengganti thumbnail.jpg dengan image.jpg dan thumbnail-1.jpg s/d thumbnail-4.jpg dengan image-1.jpg s/d image-4.jpg
• Gunakan image dengan height=400px dan width=tak ditentukan.
• Panduan yang lebih lengkap tentang cara backup template, cara mencari kode dan berbagai cara menyimpan kode css di template dapat dibuka di Special Tutorials yang terletak di menu sebelah kiri.

Cara menggunakan :

1. Login ke Blogger.
   
   • Tuliskan "User Name" (gmail) atau tuliskan "Email Address" (non gmail).
   • Tuliskan Password.
   • Klik "Sign in"
2. Beberapa saat setelah klik sign in anda akan menjumpai halaman "Dasbor (Dasboard)".
   Klik "Rancangan (Design)".
3. Kembali halaman baru akan terbuka, klik "Edit HTML".
4. 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.
5. Cari kode ]]></b:skin> pada "Box Edit Template".
6. Copy kode CSS kemudian letakkan di atas ]]></b:skin>.
7. Klik "Simpan Template (Save Template)".
8. Gunakan xHTML saat posting.

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 «

12.21 | 0 komentar | Read More

Membuat Effect Blur dengan Opacity

Nilai opacity sebenarnya merupakan nilai yang menunjukkan tingkat transparansi sebuah object. Setiap browser menggunakan standar nilai serta bentuk KODE yang berbeda. Nilai transparansi untuk IE menggunakan nilai diantara 0 s/d 100, sedang untuk Mozilla, Opera, Safari, Google Chrome, SeaMonkey serta beberapa browser lain menggunakan standar nilai 0 s/d 1.0. Apabila nilai terendah digunakan (0=nol), maka gambar akan ditampilkan dalam bentuk transparan. Jadi semakin kecil nilai opacity, maka gambar menjadi semakin transparan hingga menjadi tak terlihat. Dalam penggunaannya, opacity property dapat di aplikasikan melalui kode css tau langsung dalam tag html. Penempatan yang bersifat permanen dilakukan pada bagian head dalam bentuk kode css, sedang penggunaan pada bagian body bersifat temporer. Sifat opacity yang mampu menciptakan banyak fungsi membuatnya banyak digunakan untuk menciptakan effect-effect yang atraktif dan dinamis sehingga tampilan blog menjadi semakin variatif dan menarik.

KODE-KODE di bawah ini merupakan contoh pemanfaatan opacity untuk menciptakan effect blur pada gambar :

1. Penggunaan opacity di bagian head. KODE ini bisa ditempatkan di atas ]]></b:skin>

Kode CSS :

.GRblur img{
        filter:alpha(opacity=20);
        opacity:0.2;border:0;
}
.GRblur:hover img{
        filter:alpha(opacity=100);
        opacity:1.0;
}

xHTML :

<a href="URL" class="GRblur"><img src="image.jpg" border="0" width=".." height=".." /></a>

<a href="http://gubhugreyot.blogspot.com" class="GRblur"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY7aaWE5aRe1nhFtgnmGCJJJ1AUwMiJx6B9Mc_K6Oc6of210fxmi8WDb00sz_qA8L_IH5vmJunYH8zp9G0ewChvjiWqZxdy3Xuxnw7bvFlaJse-IzpTFUl0BUKZMgcX7XFirH-cGyBhJI/s250/img_gubhugreyot_gadisku-06b.jpg" border="0" width="250" height="250"/></a>

2. Penggunaan opacity di bagian body (di ruang posting) yang bersifat temporer:

xHTML :

<a href="http://gubhugreyot.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY7aaWE5aRe1nhFtgnmGCJJJ1AUwMiJx6B9Mc_K6Oc6of210fxmi8WDb00sz_qA8L_IH5vmJunYH8zp9G0ewChvjiWqZxdy3Xuxnw7bvFlaJse-IzpTFUl0BUKZMgcX7XFirH-cGyBhJI/s250/img_gubhugreyot_gadisku-06b.jpg" style="filter:alpha(opacity=40);opacity:0.2;" width="250" height="250" border="0" /></a>

Catatan/Keterangan :

1. Menggunakan opacity property dalam bentuk kode css yang disimpan di atas kode ]]></b:skin> , membuat posting lebih irit kode karana tak perlu menuliskan opacity property dalam tag html. Kode yang ditambahkan hanya berupa class atau id.
2. Semakin besar opacity maka gambar semakin jelas (transparansi berkurang).
3. Panduan cara backup template, cari kode dan cara menyimpan kode dapat dibaca di "Special Tutorials" disebelah kiri halaman.

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 «

15.36 | 0 komentar | Read More

Original Size Image on Mouseover

Tidak harus menggunakan javascript untuk menciptakan sebuah effect pada sebuah gambar atau photo. Original Size Image on Mouseover menjadi salah satu bukti penciptaan effect yang sangat menarik meskipun murni hanya menggunakan KODE CSS. Gambar atau photo akan ditampilkan dalam bentuk yang lebih kecil, namun ketika cursor menyentuhnya maka gambar dengan ukuran aslinya akan spontan ditampilkan di halaman blog. Penggunaan CSS yang yang relatif kecil ini tentu saja akan sangat bermanfaat kala diterapkan dalam blog karena loading menjadi relatif tidak terpengaruh.

Cara menggunakan Original Size Image on Mouseover :

1. Login ke Blogger.
   
   • Tuliskan "User Name" (gmail) atau tuliskan "Email Address" (non gmail).
   • Tuliskan Password.
   • Klik "Sign in"
2. Beberapa saat setelah klik sign in anda akan menjumpai halaman "Dasbor (Dasboard)".
   Klik "Rancangan (Design)".
3. Kembali halaman baru akan terbuka, klik "Edit HTML".
4. 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.
5. Cari kode ]]></b:skin> pada "Box Edit Template".
6. Copy kode CSS dan letakkan di atas ]]></b:skin>.
7. Klik "Simpan Template (Save Template)"

Kode CSS :

.GRzoomer_css{
        float:left;
        clear:left;
        padding-bottom:5px;
        padding-right:5px;
}
.GRzoomer_css a{
        display:block;
        text-decoration:none;
}
.GRzoomer_css a:hover{
        position:relative;
}
.GRzoomer_css span img{
        border:8px ridge #fff;
        margin-bottom:8px;
}
.GRzoomer_css a span{
        position:absolute;
        display:none;
        width:auto;
        color:#ffcc00; /* warna caption */
        text-decoration:none;
        font-family:"MS Serif", "New York", serif;
        font-size:14px; /* ukuran teks caption */
        background:rgba(0,0,0,0.5);
        font-weight:bold;
        padding:6px 4px;
}
.GRzoomer_css a:hover span{
        border:4px solid #930;
        border-radius:10px;
        display:block;
        position:absolute;
        left:30px;
        top:-150px;
        z-index:100;
}
.GRzoomer_css a:hover span img{
        border-radius:6px;
}
.GRzoomer_css_thumb{
        width:100px;
        margin:5px 12px 5px 0;
        padding:5px;
        background:#ddd;
        border:1px solid #06C;
        border-radius:4px;
        height:auto;
        opacity:0.65;
        filter:alpha(opacity=65);
}
.GRzoomer_css_thumb:hover{
        opacity:1.0;
        filter:alpha(opacity=100);
  z-index:999; 
}

xHTML :

<div class="GRzoomer_css">
<a href="URL-1"><img src="image-1.jpg" class="GRzoomer_css_thumb" /><span><img src="image-1.jpg" />Tambahkan teks di sini !Tambahkan teks di sini !Tambahkan teks di sini !Tambahkan teks di sini !</span></a>
</div>
<div class="GRzoomer_css">
<a href="http://har-bloggerstars.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5hNz1_sbQxrNQAEXguEITDnNfnc8c2r_Fs6mn2wN0wIFLCVmAxfpcZ_YXa1qr9IsK0tYKhmOGT2tDmBoPcPwl60mufCh04vp0QDtYo1nKO5O5dIX2KAsCxgfZ40iuA9RPTvduE6kXXuM/s1600/gbr3.jpg" class="GRzoomer_css_thumb"/> <span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5hNz1_sbQxrNQAEXguEITDnNfnc8c2r_Fs6mn2wN0wIFLCVmAxfpcZ_YXa1qr9IsK0tYKhmOGT2tDmBoPcPwl60mufCh04vp0QDtYo1nKO5O5dIX2KAsCxgfZ40iuA9RPTvduE6kXXuM/s1600/gbr3.jpg" />Tambahkan teks di sini !Tambahkan teks di sini !Tambahkan teks di sini !Tambahkan teks di sini !</span></a>
</div>
<div class="GRzoomer_css">
<a href="URL-3"><img src="image-3.jpg" class="GRzoomer_css_thumb" /><span><img src="image-3.jpg" />Tambahkan teks di sini !Tambahkan teks di sini !</span></a>
</div>

Cara menggunakan xHTML :

1. Gunakan xHTML untuk posting.
2. URL-1 & URL-3 ...dst » dapat diisi dengan alamat web/blog, image, posting dll.
3. image-1.jpg & image-3.jpg ...dst » URL image.
4. Tambahkan teks ... dst » caption yang menerangkan tentang image atau yang berkaitan dengan URL.
5. Gunakan image dengan ukuran yang tak terlalu besar hingga semua bagian image tetap berada di halaman blog.
6. Hal yang belum jelas tentang backup template, cara cari kode dan cara menyimpan kode dapat dibaca di Special Tutorials pada menu di kolom sebelah kiri.

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

Update » Jemuah LEGI, Maret, 23, 2012

» Happy Blogging - gubhugreyot «

08.37 | 0 komentar | Read More