Cara Membuat Efek Loading Digital Clock

Cara Membuat Efek Loading Digital Clock. Sobat Histutor, kali ini akan berbagi tentang Cara Membuat Efek Loading Digital Clock sebagai background di blog kesayangan sobat, Sebagaimana yang sering sobat temukan ketika mengunjungi sebuah website atau blog terkadang ada sebuah efek loading yang tampil ketika kita mengklik laman dari website atau blog tersebut.

Nah sobat Histutor, untuk membuat sebuah efek loading di blog sebenarnya sangat banyak cara dan modelnya tampilannya, dari hanya yang menampilkan animasi loading saja sampai dengan dilengkapi oleh jam digittal sebagai latar belakangnya.

Pada Tutorial kali ini special buat sobat Histutor yang ingin memasang Efek Loading Digital Clock sebagai latar belakangnya di blog milik sobat akan saya jelaskan car4a pemasangannya.

Oh ya sebagai bahan pertimbangan Efek loading yang akan saya jelaskan dibawah tidak akan membuat loading blog sobat menjadi lambat melainkan akan menambah speed dari loading blog milik sobat. Tidak percaya? silakan dicoba dulu sob dan buktikan sendiri.

Cara Membuat Efek Loading Digital Clock

Berikut Langkah-langkah Memasang Efek Loading Digital Clock

1. Login ke akun blogger anda

2. Klik Template » Edit HTML

3. Gunakan Ctrl+F  untuk menemukan kode ]]></b:skin> atau </style>

4. Setelah ketemu letakan kode CSS script diatas kode ]]></b:skin> atau </style>
 

#clockdate-full { position:fixed!important;top:0px;left:0px;width:100%;height:100%;background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIev7AfT_cNl8Q9eSZZt94mRazTo7MrJIzTz9zrGYa8W21DGKgOceapJOIdAXjj7wL7714WInG9yZr34J1x7j1gNokql4kHJ4thCL-tBB7VLbzyxYFeqzZnKr9KPhsc6m1h82xk4_CFq0/s1600/loading-gif.gif) no-repeat center 85%; z-index:+100000; cursor:default; display:none; } .wrapper-clockdate { padding:25px; max-width:600px; width:100%; text-align:center; -webkit-border-radius:3px; border-radius:3px; margin:0 auto; margin-top:15%; -webkit-box-shadow:inset 0px 0px 10px #222; box-shadow:inset 0px 0px 10px #222; -webkit-border-radius:5px; border-radius:5px; background-color:#2f2f2f; } #clock-large { font-family:Orbitron, sans-serif; font-size:60px; text-shadow:0px 0px 1px #fff; color:#fff; } #clock-large span { color:#888; text-shadow:0px 0px 1px #333;font-size:30px;position:relative;top:-27px;left:-10px; } #date-large { letter-spacing:15px; font-size:14px; font-family:arial,sans-serif; color:#fff; }

5. Tambahkan jQuery/Javascript dibawah ini tepat sebelum kode </body>

<script type='text/javascript'>
//<![CDATA[
function get_random_color() {
 var letters = '0123456789ABCDEF'.split('');
 var color = '#';
 for (var i = 0; i < 6; i++) {
 color += letters[Math.round(Math.random() * 14)];
 }
 return color;
}
$(function () {
 $(".postthumb").each(function () {
 $(this).css("background", get_random_color());
 });
});
//]]>
</script>

Klik Simpan dan lihat hasilnya.

Copy Link and Paste kan pada bar di browser anda tekan enter ! kemudian klik salah satu link di blog tersebut. Demolution LINK : http://video-com.blogspot.co.id/

Silahkan tinggalkan komentar jika anda menemui kedala dalam pemasangan Efek Loading Digital Clock ini, mari kita bahas bersama! 

Demikian sedikit penjelasan tentang Cara Membuat Efek Loading Digital Clock , jika ada kesalahan dalam penulisan saya mohon maaf dan semoga bermanfaat. Saya akan sangat senang dan berterimakasih jika sobat berkenan untuk berkomentar di blog ini.