Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

Image Effect-3 : Rotate

Sebuah efek pada image yang dibuat dengan javascript. Saat cursor bebrada di atas image, maka image akan berputar dengan sudut putar tertentu, kemudian ketika cursor meninggalkan image maka image akan berputar kembali dengan sudut tertentu pula. Susut putar yang digunakan sebesar 90, 180, 270(-90) dan 380 derajat dan bekerja berdasar fungsi "onmouseover" dan "onmouseout".

Kode CSS - Image Image Effect-3 :
#putar{ 
      border:4px solid #999; 
      padding:2px;
      background:#fff;
      margin:5px; 
      display:block;
}

Javascript - Image Image Effect-3 :
<script type="text/javascript">
//<![CDATA[
function rotate(p_deg) {
    if (document.getElementById('putar')) {
        var image = document.getElementById('image');
        var putar = document.getElementById('putar');
        var putarContext = putar.getContext('2d');
        switch (p_deg) {
        default:
        case 0:
            putar.setAttribute('width', image.width);
            putar.setAttribute('height', image.height);
            putarContext.rotate(p_deg * Math.PI / 180);
            putarContext.drawImage(image, 0, 0);
            break;
        case 90:
            putar.setAttribute('width', image.height);
            putar.setAttribute('height', image.width);
            putarContext.rotate(p_deg * Math.PI / 180);
            putarContext.drawImage(image, 0, -image.height);
            break;
        case 180:
            putar.setAttribute('width', image.width);
            putar.setAttribute('height', image.height);
            putarContext.rotate(p_deg * Math.PI / 180);
            putarContext.drawImage(image, -image.width, -image.height);
            break;
        case 270:
        case - 90 : putar.setAttribute('width', image.height);
            putar.setAttribute('height', image.width);
            putarContext.rotate(p_deg * Math.PI / 180);
            putarContext.drawImage(image, -image.width, 0);
            break;
        };
    } else {
        var image = document.getElementById('image');
        switch (p_deg) {
        default:
        case 0:
            image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=0)';
            break;
        case 90:
            image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=1)';
            break;
        case 180:
            image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=2)';
            break;
        case 270:
        case - 90 : image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=3)';
            break;
        };
    };
};
function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function () {
            if (oldonload) {
                oldonload();
            }
            func();
        }
    }
}
addLoadEvent(function () {
    var image = document.getElementById('image');
    var putar = document.getElementById('putar');
    if (putar.getContext) {
        image.style.visibility = 'hidden';
        image.style.position = 'absolute';
    } else {
        putar.parentNode.removeChild(putar);
    };
    rotate(0);
});
//]]>
</script>

xHTML - Image Image Effect-3
<a href="#" onmouseover="rotate(180);" onmouseout="rotate(90);"><img id="image" src="http://girlfriendi.com/th3/090.jpg" alt=""><canvas id="putar"></canvas></a>

  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> pada "Box Edit Template".
  6. Copy kode CSS dan letakkan di atas ]]></b:skin>
  7. Copy javascript dan letakkan di bawah ]]></b:skin>
  8. Klik "Simpan Template (Save Template)".
  9. Gunakan xHTML saat posting atau manfaatkan melalui penambahan gadget.
Catatan/Keterangan :
  1. Panduan cara backup template, mencari kode dan berbagai cara menyimpan kode css, javascript dan xHTML dapat dibuka di Special Tutorials yang terletak di menu sebelah kiri halaman.
  2. Untuk merubah sudut putar image, rubah kode yang berwarna kuning dengan nilai yang tersedia di javascript.

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 «

Bila tak pegal di tangan
silahkan tulis sebuah komentar!

gubhug reyot

 
GR | Edited by | gubhug reyot