Widget Animasi Ikan Hiu Pada Halaman Blog

---

Widget Animasi Ikan Hiu Pada Halaman Blog merupakan salah satu widget tentang animasi gambar yang menggunakan Javascript untuk memproses dalam menampilkan gambar animasi ikan hiu yang menggunakan format animasi gif. Fungsi dari penggunaan Javascript ini sendiri adalah agar animasi ikan hiu bisa bergerak di dalam viewport halaman blog. Animasi gambar ikan hiu seolah-olah berkeliaran pada halaman blog, untuk contoh seperti yang terlihat di didalam artikel ini, gimana keren-kan ??? (kalo belum kelihatan ikan hiunya silakan di refresh halaman artikel blog ini).

Widget animasi ikan hiu yang saya kembangkan ini merupakan widget lama yang sudah pernah saya buat di blog lama saya, kemudian saya coba tampilkan lagi dengan beberapa tambahan fitur dan modifikasi agar lebih bermanfaat ketika digunakan pada halaman blog.

Konsep utama dari pembuatan widget ini adalah untuk menampilkan link dengan cara yang unik dan menarik. Link yang dimaksud bisa link ke media sosial, link ke halaman tertentu atau link untuk membuka tampilan buku tamu. Agar link bisa terlihat unik dibutuhkan animasi dan gambar yang super aktif. Atas dasar itulah asal mula pembuatan widget animasi gambar pada halaman blog.

Berhubung judul artikel kali ini adalah Widget Animasi Ikan Hiu Pada Halaman Blog maka gambar utama yang saya tampilkan menggunakan gambar animasi gif dengan karakter ikan hiu. Widget ini bersifat fleksible dalam menampilkan gambar artinya anda bisa mengganti gambar ikan hiu ini dengan gambar nyang sesuai dengan keinginan anda. Widget Animasi Ikan Hiu Pada Halaman Blog menggunakan Javascript dan CSS3 sehingga kompatibel dengan semua browser kecuali browser Internet Explorer tipe lawas (lama).

Beberapa fitur tambahan dan modifikasi dari widget ini, yaitu :

• Fitur link untuk membuka halaman sosial media ketika gambar ikan hiu di klik.
• Dapat menggunakan gambar animasi lainnya tanpa harus ribet merubah kode script.
• Gambar animasi yang mengikuti arah kursor apabila mouse di klik pada viewport halaman.
• Bisa digunakan sebagai opener buku tamu atau opener widget anda lainnya.
• Mudah di implementasikan dan kompatibel dengan hampir semua browser modern termasuk mobile browser.
• Menambah daya tarik tampilan blog dan memberikan kesan dinamis pada halaman blog anda.

Widget animasi ini bisa juga menggunakan gambar animasi lain yang menggunakan format gif animated atau format png dengan latar belakang gambar yang transparan. Selain menarik menurut saya widget animasi ini sangat unik apabila digunakan pada blog yang memiliki tema travel, alam ataupun lainnya.

Informasi Singkat

---

Hiu adalah sekelompok (superordo Selachimorpha) ikan dengan kerangka tulang rawan yang lengkap dan tubuh yang ramping. Mereka bernapas dengan menggunakan lima liang insang (kadang-kadang enam atau tujuh, tergantung pada spesiesnya) di samping, atau dimulai sedikit di belakang, kepalanya. Hiu mempunyai tubuh yang dilapisi kulit dermal denticles untuk melindungi kulit mereka dari kerusakan, dari parasit, dan untuk menambah dinamika air. Mereka mempunyai beberapa deret gigi yang dapat digantikan.

Hiu mencakup spesies yang berukuran sebesar telapak tangan hiu pigmi, Euprotomicrus bispinatus, sebuah spesies dari laut dalam yang panjangnya hanya 22 cm, hingga hiu paus, Rhincodon typus, ikan terbesar, yang bertumbuh hingga sekitar 12 meter dan yang, seperti ikan paus, hanya memakan plankton melalui alat penyaring di mulutnya. Hiu banteng, Carcharhinus leucas, adalah yang paling terkenal dari beberapa spesies yang berenang di air laut maupun air tawar (jenis ini ditemukan di Danau Nikaragua, di Amerika Tengah) dan di delta-delta.

---

Sumber : Wikipedia

DAFTAR ISI

1. Cara Pemasangan Widget Pada Blogger
2. Beberapa Pilihan Gambar Animasi GIF
3. Modifikasi Script Gambar Animasi

#1 Cara Pemasangan Widget Pada Blogger

PERINGATAN

Perhatian ! sebelum melakukan perubahan pada kode HTML template blog, sebaiknya Anda melakukan backup kode HTML template blog terlebih dahulu, dikarenakan untuk menghindari hal-hal yang tidak diinginkan. Apabila terjadi kesalahan prosedur dalam melakukan perubahan kode HTML template blog, maka Anda dapat melakukan proses perbaikan dengan cepat dan mudah.

• Silakan login dahulu ke blog Anda.


• Klik tombol Tema untuk masuk ke tema editor.
  
  
  


• Klik tombol Edit Tema untuk menampilkan kode HTML Template Blog.
  
  
  


• Geser scrollbar ke posisi paling bawah.
  
  
  


• Letakan kode dibawah ini tepat diatas kode </body>.
  
  
  
  
  
  <script>
  var cfImgAnimSrc="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHE9usvzxFN0v9ehxIyAzB0s_2jxnAlx5RO9nUridpCBQUanmELeAmQQ530Urna5P3i26fPv-KQxk-UbqYbhk5waiZfqGwdtyYK6r4egTneh2JExE8LaLGYxH2uPaN5vlQbJfflbmlhIk/s1600/shark.gif";
  var cfImgAnimLink="";
  var cfImgAnimTitle="";
  var cfImgAnimSpeed=33;
  var cfImgAnimXmax=3;
  var cfImgAnimYmax=3;
  var cfImgAnimChgTimer=5000;
  </script>
  <script src="https://codeflareblogspot.github.io/code/cfImageAnimCode.js"></script>
  
  
  KETERANGAN
  

  • Pada kode :
    var cfImgAnimSrc="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHE9usvzxFN0v9ehxIyAzB0s_2jxnAlx5RO9nUridpCBQUanmELeAmQQ530Urna5P3i26fPv-KQxk-UbqYbhk5waiZfqGwdtyYK6r4egTneh2JExE8LaLGYxH2uPaN5vlQbJfflbmlhIk/s1600/shark.gif";
    Merupakan kode untuk URL gambar animasi yang digunakan.
  • Pada kode :
    var cfImgAnimLink="";
    Merupakan kode untuk URL tujuan (seperti: link media sosial, link halaman atau link javascript).
  • Pada kode :
    var cfImgAnimTitle="";
    Merupakan kode untuk judul link.
  • Pada kode :
    var cfImgAnimSpeed=33;
    Merupakan kode untuk kecepatan pergerakan animasi, secara default menggunakan 33 milidetik.
  • Pada kode :
    var cfImgAnimXmax=3;
    Merupakan kode untuk peningkatan nilai pergerakan animasi arah horizontal.
  • Pada kode :
    var cfImgAnimYmax=3;
    Merupakan kode untuk peningkatan nilai pergerakan animasi arah vertikal.
  • Pada kode :
    var cfImgAnimChgTimer=5000;
    Merupakan kode untuk waktu pergantian gerak antara arah kiri dan kanan.

#2 Beberapa Pilihan Gambar Animasi

Seperti yang sudah dijelaskan bahwasannya widget ini bisa menggunakan gambar selain gambar animasi ikan hiu. Berikut beberapa gambar animasi yang dapat anda gunakan sebagai pengganti gambar animasi ikan hiu.

• Ikan Hiu
  
  URL Link :
  
  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHE9usvzxFN0v9ehxIyAzB0s_2jxnAlx5RO9nUridpCBQUanmELeAmQQ530Urna5P3i26fPv-KQxk-UbqYbhk5waiZfqGwdtyYK6r4egTneh2JExE8LaLGYxH2uPaN5vlQbJfflbmlhIk/s1600/shark.gif


• Ikan Paus
  
  URL Link :
  
  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbpd5d6GOEj78JoBsqwm8kNBcD_rH407N0mnN8tr2SYr0m_vexTvrHGH2cLOE_Ktaz1-7csSTzccACnO5JiD6G5hOhJjO8tjnMDgabbAGt0q9Ixa6PhvgE0Az-8Z4uacChtjDxN0UzVAw/s1600/whale.gif


• Ikan Emas
  
  URL Link :
  
  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3Mv0s85t4aeeSC9dfkCkPfmYY1InTZt25FD0OvYPwuV7Bk5yK7TzdhBnKRBxYK2dTbwDqSFJO9AYWLgHvKZUo6zV0J8g93zFT55TCG5SFvBL0wxQSw6SIrHjskCK9EkHP4X3z80gEAa8/s1600/goldfish.gif


• Ikan Cupang
  
  URL Link :
  
  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUUPjT5-6_NpUrPjlmcGA0ZKc6FWHLPLI0NfT-bMwhCDnSg_f-SaGw0EoRHr6UkWA3h4QB8IBfFsrubXMJHWhcYyAlSANmFTmyM78Ult9Ni1UCHy_Z32UDa6oG0dZ0iXtae93CoAqX6vI/s1600/ikan_cupang.gif


• Putri Duyung
  
  URL Link :
  
  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNmvj0nk0LgmWZFjvx27nYZT3Qp1_HvajkJT07d-r-knQ24m-XSgM4t1jo2F_U8aknDQGsHV-J7V-_374ZBIPrq3kNivxHOqvEu7vg-rZCWrH9Dz9gtzGW3BAIRzXpqTb0WusHssV2y0w/s1600/mermaid.gif


• Lebah Lucu
  
  URL Link :
  
  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaMTRNHb3GhFwQYERKS1cxjltSl-PTmp3ckuqjnpY95FRRpfdPdVBYkYWGtuopI5yIjMZTfciGyuagWlLjitEdGejeHlNt0W-2DwZu9dCQ5am-NU2JEbzguOwlss6U5VFGz0cQsyd4GFM/s1600/love_bee.gif

Apabila ingin merubah gambar animasi ikan hiu, anda cukup mengganti variabel URL gambar ikan hiu dengan URL gambar yang akan anda gunakan. Pastikan URL gambar menggunakan protokol "https:" agar gambar animasi bisa ditampilkan pada browser modern.

#3 Modifikasi Script Gambar Animasi

Penggunaan Widget Animasi Gambar ini cukup fleksibel, selain sebagai hyperlink widget ini juga bisa digunakan sebagai penampil box widget, penampil box informasi, penampil box iklan dari sponsor anda (jangan digunakan untuk menampilkan iklan dari adsense karena metode ini melanggar aturan adsense), penampil buku tamu dan lain sebagainya.

Sebagai contoh pada bab ini yaitu modifikasi script untuk menampilkan buku tamu. Buku tamu biasanya menggunakan tombol (penampil) yang melayang pada batas kiri atau batas kanan viewport (layar monitor yang terlihat untuk halaman website). Agar penampil buku tamu halaman web atau blog anda terlihat unik silakan anda gunakan widget ini untuk penampil buku tamu anda. Berikut cara memodifikasinya:

Tambahkan kode script di bawah ini dan letakan di bawah kode script widget animasi gambar yang baru saja anda taruh pada kode template blog anda atau ditaruh pada kotak widget.

<div id="bukuTamuID" style="display:inline-block;position:fixed;top:0;left:-400px;background-color:#333;border:1px solid #ccc;color:#fff;border-radius:3px;box-sizing:border-box;padding:5px;z-index:+99999999999;">
<div style="cursor:pointer;color:#58ACFA;font-size:14px;font-weight:700;text-align:center;border-bottom:1px solid #ccc;padding-bottom:5px;">BUKU TAMU <div id="bukuTamuClose" onclick="showBukuTamu()" title="Close" style="cursor:pointer;color:#9A9AA1;font-size:14px;font-weight:700;float:right;">X</div></div>
<!-- Start Kode HTML Buku Tamu -->
Taruh kode HTML atau Javascript disini...
<!-- End Kode HTML Buku Tamu -->
</div>

<script>
function showBukuTamu(){
if(idShowDX == false){
/* Sesuaikan ID dan Lebar Elemen */
$("#bukuTamuID").animate({left: "+=400"}, 500);
/* ------------ */
stopImgAnimMove();
$("#cfImgAnimURL").hide();
idShowDX=true;
}else{
/* Sesuaikan ID dan Lebar Elemen */
$("#bukuTamuID").animate({left: "-=400"}, 500);
/* ------------ */
$("#cfImgAnimURL").show();
idShowDX=false;
setContinueImgAnim=true;
continueImgAnim();
}}
</script>

KETERANGAN

• Silakan anda taruh kode HTML atau Script di antara :
  
  <!-- Start Kode HTML Buku Tamu -->
  Taruh kode HTML atau Javascript disini...
  <!-- End Kode HTML Buku Tamu -->


• Pastikan anda sesuaikan lebar elemen buku tamu dengan lebar maksimal 400px (default). Jika elemen buku tamu anda melebihi 400px maka perlu disesuaikan pada kode CSS dan kode Javascript.
  
  Misalkan lebar elemen buku tamu 600px maka perlu disesuaikan kode berikut.
  # Pada Kode CSS :
  left:-400px;
  Silakan anda rubah angka 400 menjadi 600.
  
  # Pada Kode Javascript :
  animate({left: "+=400"} dan animate({left: "-=400"}
  Silakan anda rubah angka 400 menjadi 600.

Contoh Hasil Akhir Penerapan Kode :

<script>
var cfImgAnimSrc="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHE9usvzxFN0v9ehxIyAzB0s_2jxnAlx5RO9nUridpCBQUanmELeAmQQ530Urna5P3i26fPv-KQxk-UbqYbhk5waiZfqGwdtyYK6r4egTneh2JExE8LaLGYxH2uPaN5vlQbJfflbmlhIk/s1600/shark.gif";
var cfImgAnimLink="showBukuTamu()";
var cfImgAnimTitle="Lihat Buku Tamu !";
var cfImgAnimSpeed=33;
var cfImgAnimXmax=3;
var cfImgAnimYmax=3;
var cfImgAnimChgTimer=5000;
</script>
<script src="https://drive.google.com/uc?export=download&id=181tD29vKLR7rPH72CIwsm8_jPkvqdcDk"></script>

<div id="bukuTamuID" style="display:inline-block;position:fixed;top:0;left:-400px;background-color:#333;border:1px solid #ccc;color:#fff;border-radius:3px;box-sizing:border-box;padding:5px;z-index:+99999999999;">
<div style="cursor:pointer;color:#58ACFA;font-size:14px;font-weight:700;text-align:center;border-bottom:1px solid #ccc;padding-bottom:5px;">BUKU TAMU <div id="bukuTamuClose" onclick="showBukuTamu()" title="Close" style="cursor:pointer;color:#9A9AA1;font-size:14px;font-weight:700;float:right;">X</div></div>
<!-- Start Kode HTML Buku Tamu -->
<iframe frameborder="0" width="100%" height="100%" src="https://www6.cbox.ws/box/?boxid=123456&boxtag=XXXYYY&sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain2-undefined" style="border: 1px solid rgb(219, 226, 237); box-sizing: border-box; display: inline-block; height: 280px;" id="cboxmain2-undefined"></iframe>
<!-- End Kode HTML Buku Tamu -->
</div>

<script>
function showBukuTamu(){
if(idShowDX == false){
/* Sesuaikan ID dan Lebar Elemen */
$("#bukuTamuID").animate({left: "+=400"}, 500);
/* ------------ */
stopImgAnimMove();
$("#cfImgAnimURL").hide();
idShowDX=true;
}else{
/* Sesuaikan ID dan Lebar Elemen */
$("#bukuTamuID").animate({left: "-=400"}, 500);
/* ------------ */
$("#cfImgAnimURL").show();
idShowDX=false;
setContinueImgAnim=true;
continueImgAnim();
}}
</script>

Pada kode di atas merupakan contoh untuk penerapan kode animasi ikan hiu dalam menampilkan buku tamu. Silakan anda sesuaikan dan gunakan kode buku tamu anda sendiri.

Oke sobat blogger demikian artikel singkat mengenai Widget Animasi Ikan Hiu Pada Halaman Blog, apabila ada pertanyaan, kritik dan saran silakan anda tuliskan pada kotak komentar di bawah ini. Akhir kata semoga bisa memberikan manfaat.

Keyword

Blog, Blogger, Blogspot, Widget, Animated, Image, Script, Code, Javascript, HTML, CSS, Button, Link, Hyperlink, Tag a, Anchor, Tombol, Unik, Menarik, Animasi, Ikan, Fish, Hiu, Shark, Paus, Whale, Terbang, Halaman, Website, Artikel, Viewport, Float, Floating, Around, Element

Incoming Search Term

Widget Animasi Gambar GIF Pada Blog, Cara memasang tobol link yang unik dan menarik, Widget tombol link pada blogger, Widget gambar animasi bergerak pada halaman blog, Widget Shark Attack on Blogger, Cool widget button for blogspot, Animate link hover button, Tombol bergerak pada halaman blog, Widget gambar animasi ikan hiu, Tombol link super unik dan keren, Widget gambar ikan hiu, widget animasi ikan, widget informasi menggunakan animasi tombol

BUKU TAMU

X