membuat jam dengan javascript di blog

yah.., akhhirnya bisa posting lagi, setelah beberapa bulan gak posting, alexa rank turun drastis, laptop rusak dll, pada kesempatan yang bagus ini saya akan berbagi tentang cara membuat jam pada blog dengan menggunakan javascript. yeeah, mungkin kebanyakan para pengguna internet khususnya blogger pasti sudah tahu tentang java script
javascript adalah sebuah language atau bahasa yang digunakan pada web untuk menyisipkan animasi / aplikasi dll pada blog, javascript pola codenya hampir sama persis dengan SQL, visual basic, C++ dan lain lain.
langsung kepada intinya pada postingan kali ini, tepat dengan judulnya yaitu membuat jam sederhana pada web/ blog dengan javascript seperti dibawah ini

kode javascript

<div id="clock"> </div> <script type="text/javascript"> <!-- function showTime() { var a_p = ""; var today = new Date(); var curr_hour = today.getHours(); var curr_minute = today.getMinutes(); var curr_second = today.getSeconds(); if (curr_hour < 12) { a_p = "AM"; } else { a_p = "PM"; } if (curr_hour == 0) { curr_hour = 12; } if (curr_hour > 12) { curr_hour = curr_hour - 12; } curr_hour = checkTime(curr_hour); curr_minute = checkTime(curr_minute); curr_second = checkTime(curr_second); document.getElementById('clock').innerHTML=curr_hour + ":" + curr_minute + ":" + curr_second + " " + a_p; } function checkTime(i) { if (i < 10) { i = "0" + i; } return i; } setInterval(showTime, 500); //--> </script>

Kode html

<div id="clock"> </div>

secara keseluruhan :


<div id="clock"> </div> <script type="text/javascript"> <!-- function showTime() { var a_p = ""; var today = new Date(); var curr_hour = today.getHours(); var curr_minute = today.getMinutes(); var curr_second = today.getSeconds(); if (curr_hour < 12) { a_p = "AM"; } else { a_p = "PM"; } if (curr_hour == 0) { curr_hour = 12; } if (curr_hour > 12) { curr_hour = curr_hour - 12; } curr_hour = checkTime(curr_hour); curr_minute = checkTime(curr_minute); curr_second = checkTime(curr_second); document.getElementById('clock').innerHTML=curr_hour + ":" + curr_minute + ":" + curr_second + " " + a_p; } function checkTime(i) { if (i < 10) { i = "0" + i; } return i; } setInterval(showTime, 500); //--> </script> <div id="clock" style='font-size:18pt'> </div>
 maka hasilnya

kode secara keseluruhan diatas dapat ditaruh / dicopas di Tata letak >> tambah gadget >> HTML/javascript.
bila mungkin anda bingung silakan contact melalui Facebook : http://www.facebook.com/badar.3128

Read More

fungsi transition pada css

ahh, hari yang indah dengan cuaca yang merdu dan disertai koneksi internet setelah laptop rusak, dan akhirnya bisa posting lagi, kali ini kita akan membahas tentang transition yang terdapat pada cascading style sheet, transition adalah sebuah kode css untuk menampilkan animasi saat adanya perubahan visual, atau jelasnya seperti gambar disamping, gambar disamping menunjukkan link yang belum tersorot berwarna biru dan setelah disorot (hover) berwarna merah, "mmm, merah atau kuning ya?" hehehe sudah sudah.

Read More

notepad++ software mungil untuk coding

saat kita membuat sebuah file program, pastilah didalamnya ada yang namanya source code atau kumpulan kode kode dengan bahasa pemrograman tertentu dan format file tertentu yang menghasilkan sebuah program.
untuk menuliskan source kode ini diperlukan software yang dapat membuat file dengan format tertentu, seperti notepad bawaan windows
namun kita juga perlu teliti dalam menuliskan source code mungkin salah sedikit saja dapat fatal, sehingga kita sulit mencari kesalahannya yaa sangking banyaknya,sementara di Linux Anda dapat memakai Bluefish.
Bluefish juga terdapat untuk versi Windows dengan menggunakan
emulator.

Read More

membuat efek shadow dengan CSS

css sudah tenar dalam pemrograman web diseluruh dunia, css lagi css lagi, memang yang terbanyak saya ketahui adalah css , css juga lebih baik untuk menghias tampilan web, naah kali ini kang badar membagikan cara untuk membuat efek shadow dengan css
mungkin bagi sebagian blogger cara ini sudah tak asing lagi, ya namun bagi seperti blogger yang masih pemula seperi saya cara ini mungkin dibutuhkan
ya langsung saja ke tutorialnya :

Read More

cara membuat sudut melengkung dengan CSS

disetiap waktu kita jika membuat border pasti hasilnya menjadi persegi ataupun persegi panjang, namun jika kita lihat blog atau website yang mempunyai border dengan sudut yang kelihatan tumpul, atau contohnya seperti gambar disamping.
dengan sudut yang tumpul juga memberi variasi dalam design yang kita buat, sudut melengkung ini juga disebut juga dengan border radius..
naah kali ini saya akan membahas cara membuat border radius dengan CSS, langsung saja tutor nya :

Read More

cara menangani consider replacing your battery

consider replacing your battery, kenal kan.? , mungkin kenal bagi yang laptopnya mudah habis (terapas), consider replacing your battery adalah sebuah pesan dari windows 7 yang menandakan performa baterai laptop yang anda gunakan sudah berkurang,laptop saya juga seperti itu
biasanya considered replacing your battery terdapat pada windows 7, namun windows 7 juga mempunyai kesalahan dalam mendeteksi baterai
anda tidak perlu panik buka dompet, pecahin celengan dll cari uang buat beli baterai laptop baru

Read More

Cara membuat tombol social media pada blog

Assalamualaikum, sobat blogger dah lama saya gak ngepost, kali ini saya akan share cara membuat tombol sosial media di blog, nah pasti sobat pasti mengenal apa itu sosial media

sosial media adalah media online dengan para penggunanya bisa dengan mudah berpatisipasi berbagi dan menciptakan isi meliputi blog, forum dan jejaring sosial

widget ini mungkin jadi bermanfaat bagi anda, dengan widget ini anda dapat mengunfang visitor untuk tergabung atau terlibat dalam jejaring sosial anda, membuat visitor lebih akrab dengan anda, dan dapat meningkatkan reputasi blog anda, tombol sosial media ini di lengkapi dengan efek hover pada tombol tersebut

berikut langkah-langkahnya :

• login ke dashboard blogger sobat
• masuk tata letak /layout
• pilih HTML/Java Script
• masukkan kode dibawah ini

<style> #tbisose{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;} #tbisose a{text-decoration:none; font-family:trebuchet ms,sans-serif;} #tbisose li{position:relative; height:38px; cursor:pointer; padding: 0 !important;} #tbisose .facebook, .googleplus, .pinterest, .rss, .twitter{position:relative; z-index:5; display:block; float:none; margin:10px 0 0; width:210px; height:38px; border-radius:5px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaor-SryFqognWf1jfnajM9y71vu7OJzzQ2p_14UVZuiLos98-T5njDFyxsQEFAe4JeKOyMJqEMydcl7x8Ppv5Quq9JRVMXxvC32r0DnRNa3VJhHUYvLeSFgXh0oHDw4Y6JMBVx8xR1MI/s800/sprites.png) no-repeat; background-color:rgba(217,30,118,.42); -webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px; -moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px; box-shadow:rgba(0,0,0,.28) 0 2px 3px; color:#141414; text-align:left; text-indent:50px; text-shadow:#333 0 1px 0; white-space:nowrap; line-height:32px; -webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out; -moz-transition:width .25s ease-in-out,background-color .25s ease-in-out; -ms-transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-transition:width .25s ease-in-out,background-color .25s ease-in-out; transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;} #tbisose li:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#141414; content:attr(data-alt); line-height:32px;} #tbisose .icon{overflow:hidden; color:#fafafa;} #tbisose .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;} #tbisose .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;} #tbisose .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;} #tbisose .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;} #tbisose .rss{ width:32px; height:32px; background-color:rgba(255,102,0,0.42); background-position:-3px -126px;} #tbisose li:hover .icon, .touch #tbisose li .icon{width:210px;} .touch #tbisose li .facebook, #tbisose li:hover .facebook{background-color:rgba(59,89,152,1);} .touch #tbisose li .twitter, #tbisose li:hover .twitter{background-color:rgba(64,153,255,1);} .touch #tbisose li .googleplus, #tbisose li:hover .googleplus{background-color:rgba(228,69,36,1);} .touch #tbisose li .pinterest, #tbisose li:hover .pinterest{background-color:rgba(174,45,39,1);} .touch #tbisose li .rss, #tbisose li:hover .rss{background-color:rgba(255,102,0,1);} </style> <ul id="tbisose"> <li data-alt="Follow us on Facebook"><a class="icon facebook" href="URL">Follow us on Facebook</a></li> <li data-alt="Follow us on Twitter"><a class="icon twitter" href="URL">Follow us on Twitter</a></li> <li data-alt="Follow us on Google+"><a class="icon googleplus" href="URL">Follow us on Google+</a></li> <li data-alt="Follow us on Pinterest"><a class="icon pinterest" href="URL">Follow us on Pinterest</a></li> <li data-alt="Subscribe with RSS"><a class="icon rss" href="URL">Subscribe with RSS</a></li> </ul> <small><div style="font-size:80%; text-align:right; text-shadow:2px 2px 2px #adadad;"> <a href="http://badarclan.blogspot.com/2013/03/cara-membuat-tombol-social-media-pada.html" target="_blank" title="Widget Follow Us">+ Get This Widget Here</a></div> </small>

•  Ganti kata URL dengan masing masing alamat social media
  

Read More