Cara Membuat Animasi Gambar GIF di samping blogspot

Ahem, kembali posting nih sob, hehe. Kebetulan tadi kepikir ingin pasang animasi di samping blog nih gara-gara setelah memenangkan permainan standard windows 7 yaitu Spider Solitaire melihat animasi petasan yang bagus, hehe. Animasi gif nya bisa dilihat diatas ya :)

Saya mengambil animasinya menggunakan software perekam layar yang cukup bagus yaitu BlackBerry FlashBack, hasilnya cukup bagus kan? :)

Namun dalam postingan kali ini ane cuma ingin berbagi pengalaman saja bukan untuk share tips atau trik memasang animasi di blog ya, hehe.

Eh bercanda deh, soalnya ini sekalian aja ada cara yang mudah untuk memasang animasi di samping blog ini, yaitu dengan cara sbb:

• Login ke blogger kamu
• Copy kode berikut, dengan klik tombol Highlight All, Kemudian tekan CTRL+C di keyboard:

<style type="text/css"> #gbman{ position:fixed; bottom:0px; right:10px; z-index:+1000; } * html #gbman{position:relative;} .gbmancontent{ float:center; border:2px solid #000000; background:#ffffff; padding:10px; } </style> <script type="text/javascript">function showHideGBman(){ var gbman = document.getElementById("gbman"); var wman = gbman.offsetWidth; gbman.opened ? moveGBman(0, 30-wman) : moveGBman(20-wman, 0); gbman.opened = !gbman.opened; } function moveGBman(xman0, xfman){ var gbman = document.getElementById("gbman"); var dxman = Math.abs(xman0-xfman) > 10 ? 5 : 1; var dirman = xfman>xman0 ? 1 : -1; var xman = xman0 + dxman * dirman; gbman.style.top = xman.toString() + "px"; if(xman0!=xfman){setTimeout("moveGBman("+xman+", "+xfman+")", 10);} }</script> <div id="gbman"> <div class="gbmantab" onclick="showHideGBman()"> </div> <div class="gbmancontent"> <div style="text-align:right"> <a href="javascript:showHideGBman()"> [Tutup 2x]</a> </div> <blink>Selamat Berpuasa ya sobat, Semoga puasanya lancar :)<br />Marhaban yaa Ramadhan !!!</blink> <center> <a href="http://coretan-uman.blogspot.com/2013/07/hasil-gambar-gif-dari-blackberry.html" target="_blank"><img border="0" src="http://4.bp.blogspot.com/- PV2D4Ya7PcA/Ud4XAQEip1I/AAAAAAAAA4s/eFyzgGLDqAw/s320/Petasan.gif" title="Click to get more." /></a> </center> <p style=" margin-right:35px; font-size:10px;" > Powered By <a style=" font-size:10px; color:#3B78CD; text-decoration:none;" href="http://coretan- uman.blogspot.com/">Coretan Uman</a> and <a style=" font-size:10px; color:#3B78CD; text-decoration:none;" href="http://coretan-uman.blogspot.com/2013/07/hasil-gambar- gif-dari-blackberry.html">Get This Widget</a></p> <script type="text/javascript"> var gbman = document.getElementById("gbman"); gbman.style.center = (30-gbman.offsetWidth).toString() + "px"; </script></div> </div>

• Kemudian buka Tata Letak di blogger kamu dan tambah gadget HTML, Paste-kan kode yang dicopy tadi, tekan Simpan.
• Selesai !!!
• Selamat mencoba :)

Tips: Anda bisa mengganti gambar animasi gif nya dengan mengganti url: http://4.bp.blogspot.com/-PV2D4Ya7PcA/Ud4XAQEip1I/AAAAAAAAA4s/eFyzgGLDqAw/s320/Petasan.gif dengan url gambar gif kamu yang baru.

Jika ingin mengganti posisi gambarnya, bisa dengan mengubah kode berikut:

<div style="position: fixed; bottom: 0px; right: 10px;  blablabla........
Ganti Kode berwarna merah dengan kode dibawah ini.
  *>> fixed; bottom: 0px; right: << berarti berada di bawah kanan blog.
  *>> fixed; bottom: 0px; left: << berarti berada di bawah kiri blog.
  *>> fixed; top: 0px; right: << berarti berada di atas kanan blog.
  *>> fixed; top: 0px; left: << berarti berada di atas kiri blog.

Sekian Tips trik cara untuk memasang animasi gif di samping blogspot dengan mudah :) Semoga berhasil !!!

Cara Membuat Efek Telur Ceplok di Blog

Efek Telur Ceplok

Kebetulan karena ada waktu memposting artikel kali ini saya akan memberikan tips bagaimana cara membuat efek telur ceplok. Efek ini cukup mengganggu penampilan blog, tapi kalau ingin mencobanya gak ada salahnya.

Berikut Cara Membuatnya :

1. Login ke Blogger
2. Masuk ke Tata Letak / Rancangan
3. Tambah Gadget, Lalu pilih HTML / Javascript
4. Masukan Kode Berikut Ini :

<script language="javascript"> nd_mode="eggs"; nd_vAlign="bottom"; nd_hAlign="right"; nd_vMargin="10"; nd_hMargin="10"; nd_target="_blank"; </script> <script language="javascript" src="http://blogtrikdantips-blogspot.googlecode.com/files/efektelur.js"></script>

      
      5. Simpan.

Efek telur ini sangatlah ringan dan tidak mempengaruhi loading blog sobat, jika tertarik silahkan pasang widget keren ini.

Ayo eXpresikan Moment Lebaran ini Dengan Memasang Stiker Ini Di Sidebar/Widget Blog/Websitemu

•  
• Sticker Lebaran Ukuran 300×250 pixel
  
  
  
  
<a title="Indonesian Freebie Web and Graphic Designer Resources" href="http://designerlistic.net/pasang-stiker-free-download-vector-design-sticker-lebaran-versi-maafin-gua-dong-bro/" target="_blank"><img src="http://www.designerlistic.net/designerlistic-badge/sticker-lebaran-designerlistic-net-300x250.png" alt="Indonesian Freebie Web and Graphic Designer Resources" /></a>
• Sticker Lebaran Ukuran 125×125 pixel
  
  
  
  
<a title="Indonesian Freebie Web and Graphic Designer Resources" href="http://designerlistic.net/pasang-stiker-free-download-vector-design-sticker-lebaran-versi-maafin-gua-dong-bro/" target="_blank"><img src="http://www.designerlistic.net/designerlistic-badge/sticker-lebaran-designerlistic-net-125x125.png" alt="Indonesian Freebie Web and Graphic Designer Resources" /></a>

The Republic of Indonesian Blogger

•  

    BADGE STYLE 1 (125x125px)

  
  
  
  <a href="http://ngeblog.biz" target="_blank" title="The Republic of Indonesia Blogger"><img src="http://www.designerlistic.net/designerlistic-badge/the-republic-of-indonesian-blogger-badge-designerlistic.net-1.png" alt="The Republic of Indonesia Blogger" /></a>

• BADGE STYLE 1 (125x167px)

  
  
  
  <a href="http://ngeblog.biz" target="_blank" title="The Republic of Indonesia Blogger"><img src="http://www.designerlistic.net/designerlistic-badge/the-republic-of-indonesian-blogger-badge-designerlistic.net-2.png" alt="The Republic of Indonesia Blogger" /></a>

• BADGE STYLE 1 (210x67px)

  
  
  
  <a href="http://ngeblog.biz" target="_blank" title="The Republic of Indonesia Blogger"><img src="http://www.designerlistic.net/designerlistic-badge/the-republic-of-indonesian-blogger-badge-designerlistic.net-3.png" alt="The Republic of Indonesia Blogger" /></a>

• BADGE STYLE 1 (83x21px)

  
  
  
  <a href="http://ngeblog.biz" target="_blank" title="The Republic of Indonesia Blogger"><img src="http://www.designerlistic.net/designerlistic-badge/the-republic-of-indonesian-blogger-badge-designerlistic.net-4.png" alt="The Republic of Indonesia Blogger" /></a>

• BADGE STYLE 1 (300x300px)

  
  
  
  <a href="http://ngeblog.biz" target="_blank" title="The Republic of Indonesia Blogger"><img src="http://www.designerlistic.net/designerlistic-badge/the-republic-of-indonesian-blogger-badge-designerlistic.net-5.png" alt="The Republic of Indonesia Blogger" /></a>

Buktikan Bahwa “Aku Blogger Indonesia Sejati” dengan Pasang Badgenya

                
Kepada seluruh blogger yang telah turut mendedikasikan dan mendeklarasikan sebagai “AKU BLOGGER INDONESIA SEJATI” saya ucapkan terimakasih…

• BADGE STYLE 1

  
  
  
  <a href="http://designerlistic.net/buktikan-bahwa-aku-blogger-indonesia-sejati-dengan-copy-paste-code-badgebanner-ini-di-blog-mu/" target="_blank" title="Indonesian Freebie Web and Graphic Designer Resources"><img src="http://www.designerlistic.net/designerlistic-badge/aku-blogger-indonesia-sejati-badge-designerlistic.net-1.png" alt="Indonesian Freebie Web and Graphic Designer Resources" /></a>

• BADGE STYLE 2

  
  
  
  <a href="http://designerlistic.net/buktikan-bahwa-aku-blogger-indonesia-sejati-dengan-copy-paste-code-badgebanner-ini-di-blog-mu/" target="_blank" title="Indonesian Freebie Web and Graphic Designer Resources"><img src="http://www.designerlistic.net/designerlistic-badge/aku-blogger-indonesia-sejati-badge-designerlistic.net-2.png" alt="Indonesian Freebie Web and Graphic Designer Resources" /></a>

• BADGE STYLE 3

  
  
  
  <a href="http://designerlistic.net/buktikan-bahwa-aku-blogger-indonesia-sejati-dengan-copy-paste-code-badgebanner-ini-di-blog-mu/" target="_blank" title="Indonesian Freebie Web and Graphic Designer Resources"><img src="http://www.designerlistic.net/designerlistic-badge/aku-blogger-indonesia-sejati-badge-designerlistic.net-3.png" alt="Indonesian Freebie Web and Graphic Designer Resources" /></a>

• BADGE STYLE 4

  
  
  
  <a href="http://designerlistic.net/buktikan-bahwa-aku-blogger-indonesia-sejati-dengan-copy-paste-code-badgebanner-ini-di-blog-mu/" target="_blank" title="Indonesian Freebie Web and Graphic Designer Resources"><img src="http://www.designerlistic.net/designerlistic-badge/aku-blogger-indonesia-sejati-badge-designerlistic.net-4.png" alt="Indonesian Freebie Web and Graphic Designer Resources" /></a>

• BADGE STYLE 5

  
  
  
  <a href="http://designerlistic.net/buktikan-bahwa-aku-blogger-indonesia-sejati-dengan-copy-paste-code-badgebanner-ini-di-blog-mu/" target="_blank" title="Indonesian Freebie Web and Graphic Designer Resources"><img src="http://www.designerlistic.net/designerlistic-badge/aku-blogger-indonesia-sejati-badge-designerlistic.net-5.png" alt="Indonesian Freebie Web and Graphic Designer Resources" /></a>

• BADGE STYLE 6

  
  
  
  <a href="http://designerlistic.net/buktikan-bahwa-aku-blogger-indonesia-sejati-dengan-copy-paste-code-badgebanner-ini-di-blog-mu/" target="_blank" title="Indonesian Freebie Web and Graphic Designer Resources"><img src="http://www.designerlistic.net/designerlistic-badge/aku-blogger-indonesia-sejati-badge-designerlistic.net-6.png" alt="Indonesian Freebie Web and Graphic Designer Resources" /></a>

• BADGE STYLE 7

  
  
  
  <a href="http://designerlistic.net/buktikan-bahwa-aku-blogger-indonesia-sejati-dengan-copy-paste-code-badgebanner-ini-di-blog-mu/" target="_blank" title="Indonesian Freebie Web and Graphic Designer Resources"><img src="http://www.designerlistic.net/designerlistic-badge/aku-blogger-indonesia-sejati-badge-designerlistic.net-7.png" alt="Indonesian Freebie Web and Graphic Designer Resources" /></a>

• BADGE STYLE 8

  
  
  
  <a href="http://designerlistic.net/buktikan-bahwa-aku-blogger-indonesia-sejati-dengan-copy-paste-code-badgebanner-ini-di-blog-mu/" target="_blank" title="Indonesian Freebie Web and Graphic Designer Resources"><img src="http://www.designerlistic.net/designerlistic-badge/aku-blogger-indonesia-sejati-badge-designerlistic.net-8.png" alt="Indonesian Freebie Web and Graphic Designer Resources" /></a>

• BADGE STYLE 9

  
  
  
  <a href="http://designerlistic.net/buktikan-bahwa-aku-blogger-indonesia-sejati-dengan-copy-paste-code-badgebanner-ini-di-blog-mu/" target="_blank" title="Indonesian Freebie Web and Graphic Designer Resources"><img src="http://www.designerlistic.net/designerlistic-badge/aku-blogger-indonesia-sejati-badge-designerlistic.net-9.png" alt="Indonesian Freebie Web and Graphic Designer Resources" /></a>

Membuat Gambar Animasi Melayang

                    
Copy code berikut lalu pastekan ke mode html halaman/tulisan baru jika ingin memasangnya di halaman Anda saja dan untuk memasang di halaman utama anda harus memasang di widget teks di sidebar Anda.
Posisi bawah-kiri

<div style="display:scroll;position:fixed;bottom:0;left:0;"><a href="URL link yang dituju" terget="_blank">
<img src="URL gambar berada" />
</a></div>

Posisi bawah-kanan

<div style="display:scroll;position:fixed;bottom:0;right:0;"><a href="URL link yang dituju" target="_blank">
<img src="URL gambar berada" />
</a></div>

Posisi atas-kiri

<div style="display:scroll;position:fixed;top:0;left:0;"><a href="URL link yang dituju" target="_blank">
<img src="URL gambar berada" />
</a></div>

Posisi atas-kanan

<div style="display:scroll;position:fixed;top:0;right:0;"><a href="URL link yang dituju" terget="_blank">
<img src="URL gambar berada" />
</a></div>

Keterangan:
Tulisan yang saya warnai dengan warna merah itu link yang akan di klik atau di tuju, misalnya http://irfanhandi.wordpress.com/ nah kalau yang warna biru itu tempat url dimana letak gambar tersebut berada, misalnya: http://fitr4y.files.wordpress.com/2011/05/eagle2.gif
Demikian cara pasang floating images atau gambar melayang ini, jika kurang jelas mari kita sama-sama bahas.
Untuk Mas Andan yang sempat bingung, mungkin ini jawabannya.
Ternyata kalau dipasang di halaman scriptnya berubah menjadi sepert ini:
Unduh disini
Coba pastekan code diatas di halaman/tulisan baru di mode html kemudian lihat hasilnya di mode visual.
Semoga membantu.

Cara Memasang Animasi Melayang Pada Blog/Website

Tutorial kali ini kita akan membahas tentang cara bagaimana memasang sebuah animasi pada blog/website agar dia bisa melayang di depan halaman blog/website. Ok marilah kita ikuti persyaratannya sebagai berikut :

1. Tentunya kita harus sudah mempunya url file flash yang bisa dipanggil dari blog/website secara online. Klow belum tahu silahkan baca kembali postingan sebelumnya yang berjudul Cara Memasang Animasi Atau Game Flash Pada Blog Atau Website.

2. Bila telah mendapatkan url flash kita maka ada 3 posisi penyimpanan melayang yang akan kita coba yaitu :

    a. Penempatan SEBELAH BAWAH KIRI, kodenya yaitu :


<div style="position: fixed; bottom: 0px; left: 2px;"><embed pluginspage="http://www.macromedia.com/go/getflashplayer" width="150" height="320" src="https://sites.google.com/site/koreanwidget/Magician02.swf?attredirects=0" wmode="transparent" type="application/x-shockwave-flash" quality="high" title="Grab this widget @ animaxwidget.blogspot.com"></embed></div>

    b. Penempatan SEBELAH BAWAH KANAN, kodenya yaitu :

<div style="position: fixed; bottom: 0px; right: 2px;"><embed pluginspage="http://www.macromedia.com/go/getflashplayer" width="150" height="320" src="http://www.widgipedia.com/widgets/alfanetcell/Blog-Recepsionis-14059-8192_134217728.widget?__install_id=1332436723430&__view=preview" wmode="transparent" type="application/x-shockwave-flash" quality"high" title="Grab this widget @ animaxwidget.blogspot.com"></embed></div>


     c. Penempatan PADA SIDE BAR, kodenya yaitu :


<div style="text-align: center;"><embed pluginspage="http://www.macromedia.com/go/getflashplayer" width="150" height="320" src="http://www.widgipedia.com/widgets/alfanetcell/Blog-Recepsionis-14059-8192_134217728.widget?__install_id=1332436723430&__view=preview" wmode="transparent" type="application/x-shockwave-flash" quality="high" title="Grab this widget @ animaxwidget.blogspot.com"></embed></div>


keterangan : - 150 = lebar animasi, 320 = tinggi animasi
                   -  http://www.widgipedia.com/widgets/alfanetcell/Blog-Recepsionis-14059-8192_134217728.widget?__install_id=1332436723430&__view=preview = alamat url animasi pada webhosting

Sekian dan semoga bermanfaat walow tulisannya tidak karuan.....wasalam

Membuat animasi melayang di blog

                                   
Untuk bisa membuat gambar yang diem manis dipojok kiri seperti punya saya, sangat mudah caranya. Tapi pertama tama tentukan dulu gambar yang ingin dibikn, gambar yang gerak geraf atau versi gif juga boleh kok apa lagi gambar aku...hahahaha.. (uhuk). Terus tu gambar upload dulu di web yang menyediakan jasa bikin URL gt, kalo sih makenya flickr.com. Yang lain juga boleh seperti photobucket.com, imageshack.com, atau dll.

1. Login Acount blogger anda.
2. Masuk pada Pengaturan.
3. Pilih Tata letak.
4. Edit html.
5. Kemudian copy code dibawah ini dan paste di atas kode ]]></b:skin> ( biar mudah pake cntr F)
===================================================

#melayang {
position:fixed;_position:absolute;bottom:0px; left:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

================================================

Ket : Kode yang tercetak pink ( bottom dan left ) menunjukan letak gambar. Letak gambar dapat di ubah dengan mengganti kode tersebut (left=kiri, bottom=bawah, right=kanan, top=atas) sesuai dengan keinginan anda.

6. Berikutnya cari lagi di dalam template anda kode  </body>
Kemudian copy pastekan code berikut ini dan letakkan diatas kode tersebut.
==========================================================

<div id='melayang'>
<img src='http://i478.photobucket.com/albums/rr146/tovarossi/bird_ann.gif'/>
</div>

==========================================================
Ket : kode yang berwarna pink diganti dengan url tempat gambar anda disimpan.

7. Simpan, jadi deh...