Cara Membuat Countdown Timer Tahun Baru 2017 Keren Di Blog

07:36:00
Cara Membuat Countdown Timer Tahun Baru 2017 Keren Di Blog


Selamat datang agan atau aganwati kali ini saya akan berbagi tentang tips blogging yaitu cara membuat widget countdown timer tahun baru 2017 di blog. Tidak terasa waktu cepat berlalu tahun 2016 dilalui dengan sangat singkat, bergantinya ke tahun yang baru dengan suasana yang baru pula. Tahun 2017 semoga menjadi suksesor tahun 2016 yang memberi banyak keberkahan bagi kita semua.



Langsung saja tidak panjang lebar kali ini kita akan belajar memasang countdownt timer tahun baru 2016 yang dapat dipasang di blog anda masing-masing. Widget ini akan menampilkan hitungan waktu untuk menuju ke tahun 2017. Berikut tutorialnya :


Langkah

1. Login pada blog anda masing-masing,

2. Pada menu dashboard pilih menu template, lalu pilih menu edit html,

3. Setelah itu cari kode ]]></b:skin> atau </style> dengan cara
Ctrl
+
F
,

4. Setelah itu copy script di bawah ini lalu paste tepat di atas kode ]]></b:skin> atau </style> tadi,

 #tahun2017 {
  background:none repeat scroll 0% 0% rgba(19,19,19,0.65);
  color:#FFC200;
  font-size:130%;
  text-transform:capitalize;
  text-align:center;
  padding:15px 0;
  font-weight:normal;
  border-radius:5px;
  line-height:1.8em;
  font-family:&
  quot;
  Roboto&
  quot;
  ,Arial;
  margin-bottom:15px;
}

.digit {
  color:white;
}

.juduls {
  color:#FFC200;
} 

Anda dapat menyesuaikan warna yang anda sukai dengan mengganti kode warna html #FFC200 dengan kode warna html yang anda sukai, anda dapat melihat kode warna html disini!


5. Lalu simpan,

6. Setelah itu kembali ke menu dashboard blog, pilih menu tata letak,

7. Pilih menu tambahkan widget lalu pilih menu html/javascript,

8. Setelah itu copy script di bawah ini lalu paste pada kolom html/javascript tersebut,

 <div id='tahun2017'>
<span id='countdown'>
</span></div>
<script type='text/javascript'> 
//<![CDATA[ 
var target_date = new Date("Jan 1, 2017").getTime();
var days, hours, minutes, seconds;
var countdown = document.getElementById("countdown");
setInterval(function () {
    var current_date = new Date().getTime();
    var seconds_left = (target_date - current_date) / 1000;
    days = parseInt(seconds_left / 86400);
    seconds_left = seconds_left % 86400;
    hours = parseInt(seconds_left / 3600);
    seconds_left = seconds_left % 3600;
    minutes = parseInt(seconds_left / 60);
    seconds = parseInt(seconds_left % 60);
    countdown.innerHTML = days + " <span class=\'digit\'>hari</span> " + hours + " <span class=\'digit\'>jam</span> " + minutes + " <span class=\'digit\'>menit</span> " + seconds + " <span class=\'digit\'>detik menuju <span class=\'juduls'>Tahun Baru 2017</span>";
}, 1000);
//]]>
</script> 

7. Setelah itu simpan.



Demo

Cara Membuat Countdown Timer Tahun Baru 2017 Keren Di Blog




Nah itu saja dari saya semoga bermanfaat, jangan lupa bagikan serta tinggalkan komentar anda, terima kasih.

Share this

I'm CEO & Founder in http://caritema.com & http://renaldyways.blogspot.com/


Artikel Menarik Lainnya

Next Article
Next Post
Previous Article
Previous Post
Cara style text di komentar Disqus dan Blogger:
  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.
  • Untuk menggunakan emoji di bawah ini cukup copy kode tersebut dan beri jarak 1 spasi untuk menampilkan emoji pada kolom komentar Blogger.
Parser Kode
FAQ
Emotikon

Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger
Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

0 Comments