Header Ads

  • Cara Membuat Widget Blogger Jam Digital Spiderman



    Widget Jam Digital Blogger dengan gambar animasi Spiderman yang keren abis. Jam digital dengan gambar animasi spiderman ini menggunakan tema superhero spiderman dengan efek animasi warna yang super keren. Cocok sebagai widget yang eye catching untuk halaman web atau blog anda. Animasi warna menggunakan kode Javascript sehingga tidak memberatkan render halaman blog. Tampilan jam menggunakan jam digital yang dipadukan dengan animasi detik yang dinamis.

    Pemasangan widget Jam digital Super Unik ini cukup mudah dan ga pake ribet tinggal copy-paste kode pada kotak widget anda atau tekan tombol Add to Blogger untuk mempercepat pemasangan widget. Pemakaian widget pada blog bisa menambah daya tarik blog yang anda miliki.

    Sebagai contoh dari widget jam digital ini seperti yang terlihat di bawah ini. Gimana guys? keren dan unik khan... Pada contoh, tampilan dari widget ini menggunakan gradasi warna merah dan hitam. Widget ini menggunakan standar kode CSS3 dan Javascript JQuery sehingga kompatible dengan semua browser baik modern maupun lawas.

    Tampilan dari widget ini untuk warna dan gambar bisa diubah sesuaikan dengan mudah sehingga tampilan widget jam spiderman ini bisa sesuai dengan selera anda, jadi hasil akhir dari widget ini bisa tampil maksimal di halaman blog anda. Silakan disimak tutorial untuk cara pembuatan widget jam digital bertemakan super hero spiderman ini.

    Loading...
    • :
    • :

    Selain mudah widget ini juga memiliki beberapa parameter penyesuaian untuk menyesuaikan tampilan widget dengan tema blog yang anda pasang. Buat yang tertarik dengan widget Jam Digital Spiderman yang super unik ini silakan di baca tutorial pemasangannya.

    Informasi Singkat
    Jam waktu nyata (Real Time Clock [RTC]) adalah jam komputer (paling sering dalam bentuk sirkuit terintegrasi) yang melacak waktu saat ini. Meskipun istilah ini sering merujuk pada perangkat di komputer pribadi, server dan sistem embedded, RTC hadir di hampir semua perangkat elektronik yang perlu menjaga waktu akurat.

    Beberapa desain komputer lama seperti Novas dan PDP-8 menggunakan jam waktu nyata yang terkenal karena akurasi tinggi, kesederhanaan, fleksibilitas dan biaya rendah. Catu daya komputer menghasilkan detak (pulse) pada tegangan elektronik untuk setiap setengah-gelombang atau setiap nol persimpangan kabel listrik AC. Sebuah kawat membawa gelombang pada suatu proses instruksi. Perangkat lunak interrupt handler (proses instruksi) menghitung siklus, detik, dll. Dengan cara ini, komputer dapat menyediakan seluruh jam dan kalender.

    Jam juga biasanya membentuk dasar pengaturan waktu perangkat lunak komputer; misalnya biasanya timer digunakan untuk berganti instruksi dalam sistem operasi. Penghitung waktu yang digunakan pada komputer modern menyediakan fitur serupa pada tingkat presisi yang lebih rendah, dan dapat melacak persyaratan mereka untuk jenis jam ini. (mis. dalam PDP-8, jam berbasis listrik, model DK8EA, datang lebih dulu, dan kemudian diikuti oleh jam berbasis kristal, DK8EC.)

    Jam berbasis perangkat lunak harus disetel setiap kali komputer dihidupkan. Awalnya ini dilakukan oleh operator komputer. Ketika Internet menjadi hal yang biasa, protokol waktu jaringan digunakan untuk secara otomatis mengatur jam jenis ini.

    Di Eropa, Amerika Utara, dan beberapa jaringan lainnya, RTC ini berfungsi karena frekuensi listrik AC disesuaikan untuk memiliki akurasi frekuensi jangka panjang sebaik jam standar nasional. Artinya, dalam grid tersebut RTC ini lebih unggul dari jam kuarsa dan lebih murah.

    Desain RTC ini tidak praktis di komputer atau kisi portabel (mis. Di Asia Selatan) yang tidak mengatur frekuensi listrik AC. Mungkin juga dianggap tidak nyaman tanpa akses Internet untuk mengatur jam.
    Sumber : Wikipedia



    Cara Pemasangan Widget Jam Digital Spiderman 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.

    1. Login ke blogspot untuk masuk ke dashboard blog.
    2. Pilih Tata Letak kemudian pilih Tambahkan Gadget.


    3. Pilih HTML/Javascript

    4. Taruh kode pada kotak widget, setelah selesai tekan tombol Save


      <div id="SpideyClock" class="clock">
      <img class="hue" src="https://4.bp.blogspot.com/-V4dn-CjJxHw/W4e5-wemF6I/AAAAAAAAIec/pLLDzAVEWkwL8Q4pjLayB3OaN0aJN4fKACLcBGAs/s1600/SpidermanJump128.png" border="0"/>
      <div id="Date">Loading...</div>
      <ul>
      <li id="hours"> </li>
      <li id="point">:</li>
      <li id="min"> </li>
      <li id="point">:</li>
      <li id="sec"> </li>
      </ul>
      </div>

      <script>
      //<![CDATA[
      if (typeof(jQuery) == 'undefined') {
      document.write("<scr" + "ipt type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></scr" + "ipt>");
      }
      $(document).ready(function() {
      var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
      var dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]
      var newDate = new Date();
      newDate.setDate(newDate.getDate());
      $('#Date').html(dayNames[newDate.getDay()] + " " + newDate.getDate() + ' ' + monthNames[newDate.getMonth()] + ' ' + newDate.getFullYear());
      setInterval(function() {
      var seconds = new Date().getSeconds();
      $("#sec").html((seconds < 10 ? "0" : "") + seconds);
      }, 1000);
      setInterval(function() {
      var minutes = new Date().getMinutes();
      $("#min").html((minutes < 10 ? "0" : "") + minutes);
      }, 1000);
      setInterval(function() {
      var hours = new Date().getHours();
      $("#hours").html((hours < 10 ? "0" : "") + hours);
      }, 1000);
      });
      //]]>
      </script>

      <style>
      #SpideyClock {padding-top:15px;width:250px;height:250px;display:inline-block;box-sizing: border-box;background-image: url(https://3.bp.blogspot.com/-ShG7KmUXeBc/W4e5--BsdwI/AAAAAAAAIeY/0zuiceM_SnoeBlDrurJ5XaGPoXNf5-0-QCLcBGAs/s1600/SLogo.jpg);border:2px solid #780105;border-radius:8px;text-align: center;}
      #Date{padding-top:5px;color: #fff; text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: 14px; text-shadow: 0 0 5px #FF0000;}
      .clock ul{margin: 0px; padding: 0px; list-style: none;}
      .clock ul li{color: #fff; display: inline; font-size: 20px;font-weight: bold; font-family: Rationale,Arial, Helvetica, sans-serif; text-shadow: 0 0 5px #FF0000;}
      #point{position: relative; -moz-animation: mymove 1s ease infinite; -webkit-animation: mymove 1s ease infinite; padding-left: 10px; padding-right: 10px;}
      @-webkit-keyframes mymove{0%{opacity: 1.0; text-shadow: 0 0 20px #FF0000;}50%{opacity: 0; text-shadow: none;}100%{opacity: 1.0; text-shadow: 0 0 20px #00c6ff;}}
      @-moz-keyframes mymove{0%{opacity: 1.0; text-shadow: 0 0 20px #FF0000;}50%{opacity: 0; text-shadow: none;}100%{opacity: 1.0; text-shadow: 0 0 20px #FF0000;}}
      @-webkit-keyframes hue
      {
      0%, 100%  { -webkit-filter: hue-rotate(0deg); margin-top:0px;margin-left:-5px;margin-bottom:0px;}
      50% { -webkit-filter: hue-rotate(350deg); margin-top:10px;margin-bottom:-10px;margin-left:5px;}
      }
      .hue {-webkit-animation: hue 2s infinite;}
      .clock ul li:before,.clock ul li:after{content:"";}
      </style>

      KETERANGAN
      # Pada kode style :
      width:250px;
      Merupakan dimensi dari lebar sebesar 250 pixel, silakan anda sesuaikan jika dirasa lebar widget terlalu kebesaran atau kekecilan.

      height:250px;
      Merupakan dimensi dari tinggi sebesar 250 pixel, silakan anda sesuaikan jika dirasa tinggi widget terlalu tinggi atau kekecilan. Pastikan dimensi widget antara lebar dan tinggi memiliki dimensi yang sama.


    Demikian artikel tentang widget jam digital animasi spiderman, sekiranya ada pertanyaan, kritik ataupun saran silakan di tuliskan pada kotak komentar di bawah. Akhir kata semoga bisa memberikan manfaat.

    Incoming Search Term


    Bagaimana cara bikin jam digital spiderman menggunakan javascript, widget jam digital spiderman, widget blogger jam digital animasi spiderman, widget blog keren jam digital, cara buat jam digital, kode HTML buat jam digital widget di blogspot, cara pasang jam digital animasi superhero unik, cara menampilkan widget jam digital di blog, widget blogger jam spiderman

    No comments

    Post Top Ad

    Post Bottom Ad

    ©2010 - codeflare