Cara Memasang Dan Menciptakan Jam Keren Sendiri Di Blog - Hallo sahabat TIPS TUTORIAL ANDROID, Pada Artikel yang anda baca kali ini dengan judul Cara Memasang Dan Menciptakan Jam Keren Sendiri Di Blog, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Blogger, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Cara Memasang Dan Menciptakan Jam Keren Sendiri Di Blog
link : Cara Memasang Dan Menciptakan Jam Keren Sendiri Di Blog

Cara Memasang Dan Menciptakan Jam Keren Sendiri Di Blog

Sebelumnya saya melihat-lihat dahulu wacana cara memasang widget jam yang bisa dipasang di sidebar dari blogger dan memang sudah sangat banyak blog yang berkategori tutorial yang membahasnya. Tetapi meskipun begitu kebanyakan dari tutorial tersebut menyarankan orang yang ingin memasang widget ini di suruh untuk membuatnya di situs pihak ketiga, dan secara pribadi dampaknya akan terasa terhadap page speed loading blog itu sendiri alasannya ialah akan menambah undangan http dari luar.

Sementara itu timbul inspirasi untuk menciptakan widget jam hasil karya sendiri tanpa plug in dari situs pihak ketiga, dan hasil bermain selama beberapa menit karenanya widget ini telah jadi saya buat dan tampilannya tidak mengecewakan bergaya, lebih kreatif, cepat, higienis dan tentunya dengan sentuhan cinta CSS3.

Saya menamakan widget ini dengan nama "Me & My Clock", karna dari tampilan yang memang bisa anda tambahkan Foto, Nama, Lokasi, Hobi dan tentunya menampilkan waktu dari jenis jam digital. Saya mengambil format waktu 24 jam alasannya ialah kebanyakan masyarakat di indonesia memakai jenis format waktu tersebut sementara itu waktu yang akan ditampilkan didalam widget ini sendiri akan sesuai dengan waktu dari jam yang telah diatur di komputer pembaca blog. untuk selengkapnya silahkan lihat demo di bawah ini.

---

Demo

Riad Supriadin

Bandung, Indonesia

Belajar keras menyulap web graphic dengan CSS3.

---

Persiapan :

---

1) Salin Semua isyarat dibawah ini kedalam notepad

Klik ganda untuk menyalin

 <center> <div id="kotak"> <div id="jam"></div> <div class="avatar"></div> <div class="nama">Nama Saya</div> <div class="lokasi">Lokasi Saya</div> <div class="kemampuan">Keterangan Saya</div></center> <style type="text/css" > /* Me and the Clock Widget */ #kotak {   width: 300px;   height: 230px;   background: rgb(8,156,149);   display: block;   font-family: &amp;#39;Arial&amp;#39;;   background-size: 120px 120px;   box-shadow: 0 5px rgb(140,227,223);   -moz-border-radius: 20px;   -webkit-border-radius: 23px;   border-radius: 20px; } #jam {   display: inline-block;   font-size: 2em;   color: #b7e5e3;   padding: 10px;   float: right;   margin-right: 10px; } .avatar {   float: left;   position: relative;   margin-top: 15px;   margin-left: 12px;   margin-bottom: 8px;   margin-right: 5px;   height: 100px;   width: 100px;   border-radius: 50%;   background: #999 url(URL AVATAR ANDA) 80% 0%;   background-size: 120px 120px;   box-shadow: 0 0 0 5px rgba(44, 244, 234, 0.3); } .avatar:hover {   top: -2px; } .nama {   font-weight: bold;   margin-left: 5px;   margin-top: 5px;   font-size: 23px;   float: left;   color: #fdfdfd;   display: inline-block; } .lokasi {   font-weight: bold;   margin-left: 1px;   font-size: .8em;   margin-top: 1px;   float: left;   margin-left: 5px;   color: rgb(222,237,92);   display: inline-block;   padding-top: 2px;   position: relative; } .kemampuan {   font-family: &amp;#39;Arial&amp;#39;;   font-weight: normal;   display: inline-block;   font-size: 12px;   float: left;   padding: 3px;   color: white; } </style> <script type="text/javascript" /> (function(b){var a=function(c){if(!c){throw new Error("")}if(!c.kotak||!c.kotak instanceof HTMLElement){throw new Error("")}if(!c.jam||!c.jam instanceof HTMLElement){throw new Error("")}this.kotak=c.kotak;this.jam=c.jam};a.prototype={constructor:a,init:function(){window.setInterval(this.update.bind(this),1000);this.update()},update:function(){var k,f,d,e,j,i,c;Date.prototype.setTime(Date.now());k=Date.prototype;f=k.getHours().toString();d=k.getMinutes().toString();e=k.getSeconds().toString();if(f.length==1){f="0"+f}if(d.length==1){d="0"+d}if(e.length==1){e="0"+e}this.jam.textContent=f+" : "+d+" : "+e;j=Math.floor(f*256/24).toString();i=Math.floor(d*256/60).toString();c=Math.floor(e*256/60).toString();this.bg.style.background="rgb("+j+","+i+","+c+")"}};a.options={kotak:null,jam:null};b.jam=a}(this));var $kotak,$jam,jam;$kotak=document.getElementById("kotak");$jam=document.getElementById("jam");jam=new jam({kotak:$kotak,jam:$jam});jam.init(); </script> 

2) Gantilah :
Nama Saya dengan nama anda.
Lokasi Saya dengan daerah tinggal anda.
Keterangan Saya dengan Keterangan dari diri anda.
URL Avatar Anda dengan URL foto anda (lihat selector avatar sempurna pada value dari property background)

Jika sudah selesai salin kembali semua isyarat yang ada didalam notepad tersebut.

---

Langkah-langkah :

---

1) Masuk ke akun blogger anda kemudian klik Tata Letak

2) Klik Add Gadget kemudian pilih HTML/JavaScript

3) Pastekan semua isyarat yang telah anda salin tadi kedalam widget tersebut

4) Klik Simpan

Sekarang coba anda lihat salah satu halaman blog maka jam digital pun telah terpasang yang ditambah avatar yang membuatnya terlihat lebih kreatif. Semoga anda menyukainya. Enjoy & Happy Coding!

Demikianlah Artikel Cara Memasang Dan Menciptakan Jam Keren Sendiri Di Blog

Sekianlah artikel Cara Memasang Dan Menciptakan Jam Keren Sendiri Di Blog kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Cara Memasang Dan Menciptakan Jam Keren Sendiri Di Blog dengan alamat link https://tipstutorial-android.blogspot.com/2021/04/cara-memasang-dan-menciptakan-jam-keren.html