<body><script type="text/javascript"> function setAttributeOnload(object, attribute, val) { if(window.addEventListener) { window.addEventListener('load', function(){ object[attribute] = val; }, false); } else { window.attachEvent('onload', function(){ object[attribute] = val; }); } } </script> <div id="navbar-iframe-container"></div> <script type="text/javascript" src="https://apis.google.com/js/platform.js"></script> <script type="text/javascript"> gapi.load("gapi.iframes:gapi.iframes.style.bubble", function() { if (gapi.iframes && gapi.iframes.getContext) { gapi.iframes.getContext().openChild({ url: 'https://www.blogger.com/navbar.g?targetBlogID\x3d4041488050623816359\x26blogName\x3dJejak+Ikrar\x26publishMode\x3dPUBLISH_MODE_BLOGSPOT\x26navbarType\x3dBLUE\x26layoutType\x3dCLASSIC\x26searchRoot\x3dhttps://jejakikrar.blogspot.com/search\x26blogLocale\x3din\x26v\x3d2\x26homepageUrl\x3dhttp://jejakikrar.blogspot.com/\x26vt\x3d-932133294075626317', where: document.getElementById("navbar-iframe-container"), id: "navbar-iframe", messageHandlersFilter: gapi.iframes.CROSS_ORIGIN_IFRAMES_FILTER, messageHandlers: { 'blogger-ping': function() {} } }); } }); </script>

on action!

Cara Membuat Efek Gambar Berjalan Pada Blog

Selasa, 19 Juni 2012









Cara Membuat Efek Gambar Berjalan (marquee) - Ada yang bertanya dengan saya, mas ikrar gimana ya caranya supaya bisa membuat efek gambar berjalan di postingan blog kita?. rasanya tak adil bila saya tak membaginya ke Anda semua, oke deh tak perlu berbasa-basi lagi, kali ini ikrar akan membahasnya dan share tutorial blogging kepada kalian semua.

Supaya tampilan blog semakin keren dan cihuy ada baiknya diberi sedikit kreasi supaya tidak monoton dan membosankan, terlalu banyak memasukan gambar dalam satu postingan pun akan membuat performa blog menjadi kurang baik, metode ini adalah efek gambar berjalan, atau dalam bahasa kerennya disebut marquee.


marquee gambar ini akan menjadi sangat penting jika kita ingin menambahkan kreasi kita pada blog kita sendiri. lalu jika kita ingin meng-copy gambarnya bagaimana? .. Oh tenang saja cukup hover mouse pada gambar (meletakan kursor mouse) lalu gambar akan berhenti dan bisa di copy sesuai kehendak.
Hover Mouse >> Pilih Gambar yang Mau di copy/ Gambar Jika Orang Lain Ingin Copy >>  lalu Klik Kanan >> terakhir Copy Image, sederhana bukan?

code html untuk contoh gambar yang ikrar buat adalah:

<marquee align="center" direction="up" height="200" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="2" width="100%"><img height="130" src="https://encrypted-tbn2.google.com/images?q=tbn:ANd9GcQXiQVS90FjUgd-A6vmlQXpPwL4YXjZ0J52uAIAAIxk8-U_RAEo" width="190" />

<img height="130" src="https://encrypted-tbn3.google.com/images?q=tbn:ANd9GcR-ckpSfuD-qfvuX5aJa2Y_vhyi5TQEGOrY75ZuFl8R9R2rWuFf" width="190" /></marquee> 

Copy kode diatas lalu pindahkan terlebih dulu kedalam notepad, lalu untuk mengaplikasikannya ke dalam postingan blog caranya adalah:
1. Log in ke Blog
2. Lalu Pada Blog Sobat, masuk ke New Posting/ Entri baru (seperti halnya sobat hendak menulis artikel baru di blog)
3. Untuk menempatkan script code html/java script pada Entri/Posting, klik EDIT HTML lalu PASTE kode (marquee gambar) diatas didalamnya, setelah itu klik COMPOSE disebelah EDIT HTML untuk memulai menulis artikel.
4. Jika sudah di Pratinjau Posting Tersebut, klik Publish Posts/ Terbitkan entri
5. Selesai !
Nah, untuk mengganti  gambarnya, Anda tinggal mengganti teks yang berwarna merah pada kode diatas dengan link gambar yang Anda inginkan/punya. Mudah bukan? selamat mencoba!


Note:
- kode marquee gambar diatas dapat di gunakan pada template versi baru ataupun template klasik pada blogger.com.
- Menu Edit HTML hanya dapat digunakan untuk mengedit code html saja (Java Script)
hasilnya:








Label:


Bookmark this post to del.icio.us Digg this post! Bookmark this post to Yahoo! My Web Bookmark this post to Furl

Newer Posts | jejakikrar.blogspot.com Home | jejakikrar.blogspot.com Older Posts | jejakikrar.blogspot.com