Menampilkan real time di blogspot

Trik ini saya dapatkan dari melihat hasil karya template suhu Herro,  sangat menarik sekali menurut saya karena ketika kita membuka blog akan terlihat hari kita mengaksesnya yang saya sebut real time , sehingga tampilan blog menjadi dinamis. Pemakaian real time dapat sobat lihat di blog ini, atau lihat screenshootnya di bawah ini :


Cara menampilkan realtime ini sangat mudah sekali, hanya membutuhkan kode javascript dan penempatan real timenya bisa menurut selera sobat blogger.
Langkah-langkah menampilakan real time di blogspot:
1. Login terlebih dahulu ke blogspot masuk ke Tata Letak > Edit HTML dan jangan lupa untuk membackup template sobat
2.  Jangan centang  ,  letakan script ini di bawah </head>

<script src='http://subagya.googlepages.com/tampil_tanggal.js' type='text/javascript'/> 

3. Kemudian untuk penempatan real time ini bisa di sesuaikan dengan keinginan sobat dengan menaruh kode di bawah ini ke dalam struktur template:

Hari ini : <script>tampiltanggal();</script>   

 4. Pada contoh ini saya menaruh kode tersebut di dalam header-wrapper yang sebelumnya saya tulis untuk code cssnya :

.realtime {
margin:10px;
text-align: left;
color:#ffffff;
float:right;
font-weight: bold;
}


Taruh kode tersebut di atas ]]></b:skin>


5. Langkah selanjutnya masukkan kode yang berwarna merah ke dalam struktur header-wrapper :

<div id='header-wrapper'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Thinking Out Of The Box (Header)' type='Header'/>
</b:section>
<div class='realtime'>
Hari ini : <script>tampiltanggal();</script>   
</div>
</div>

NB : Perhatikan kode header-wraper dan tag penutupnya </div>!!

6. Langkah terakhir adalah save hasil pekerjaan sobat

33 comments:

  1. Apakah blog kita akan jadi berat mas? Mengingat itu javascript..... ato, apakah javascriptnya itu ringan?

    Oh iya... lupa.... pertamax........

    ReplyDelete
  2. @ alam > yup sangat ringan sekali... hampir ga begitu penagruh

    ReplyDelete
  3. jamnya mana mas?????

    wah JS-nya oke punyaaa

    ReplyDelete
  4. @ anas > wekekekkekeek nanti tanya yang punyanya langsung

    ReplyDelete
  5. bagaimana caranya kang boleh dong aku ambil buat nambah berat blog aku....wuakekekekekekekek...berad banged blog ku, kang link aku masukin dong yang ini.....makasih yah kang

    ReplyDelete
  6. wew edit HTML yaks *ngeri*
    error
    yang kemaren belom ae teratasi. entar malah quad error

    ReplyDelete
  7. sip, menarik dan tertarik nih gw. ntar jika ada waktu pasti kubabat habis deh..he..he...*dah mulai aktif lagi khan?*

    ReplyDelete
  8. wehehehhehehe komennya tetep mochal is black eh salah mochal is back

    ReplyDelete
  9. chal..ama tampilin jam dung real time

    ReplyDelete
  10. @harry > seep kang
    @ diah > ya gitu degh :p
    @ eros > kan saya sudah kasih solusinya om
    @ cebong 1> calaaan
    @ cebong 2 > ya nanti di tanyakan sama yang punya wekekekekek

    ReplyDelete
  11. oke deh mas sip boleh juga di coba ntar

    ReplyDelete
  12. Kok jadi ga tau kamu kembali chal...

    ReplyDelete
  13. wah2 keren neh kang suhu..makin cantik blog dibuat, saya simpen dulu suhu, karena ini saangat bermanfaat

    ReplyDelete
  14. weleh2, kok namaku disebut2?? hehehe. bs aja suhu ini. cb pake yg ini http://herrolim.googlepages.com/tampil_tanggal_jam.js. cm masih tampilan statik, ga dinamik/berjalan jamnya. ubah sendiri yah. :D.
    ane ga pake yg ini lagi, pake kode yg lebih simple aja tapi agak berantakan. wekekeke.

    ReplyDelete
  15. wah.. ak lagi males utak atik blog... males liat kode2 dsb :(

    ReplyDelete
  16. Wah, mantap nie.. saya simpan dulu.. kapan2 dicoba..

    ReplyDelete
  17. berapaan jamnya bro? pengen juga dong jamnya :)

    ReplyDelete
  18. gimana kalau bikin realtime sekalian untuk bayaran dr masang adsense yak....hehehe

    ReplyDelete
  19. hahahha... gue cari2 semalam kemarin pake mbah google tidak nemu.. nyata ngga perlu jauh2 ada di sini...

    noh liat suhu.. dah sy pasang tuh.. thank berat neh tutornya...

    ReplyDelete
  20. @ gadankota > silahkan om
    @ indungg >wekekekkek miss me yak bro
    @ enhal > silahkan bro
    @ herro > ane udah punya trik yang baru bro jamnya dinamis ga statis
    @ lyla > mba istirahat aja dulu
    @ wendra > ok bro
    @ yoyo > free ambilnya di polsek wekekekke
    @ gus > wekekkekke bisa aja niee suhu gus
    @ jaloee > pohon memang ga jauh dari buahnya suhu wekekkekek....

    ReplyDelete
  21. hohoho, akhirnya suhu mochal keluar elmunya nehhh..huehehe

    sippp challl, wah dapet inspirasi dari kang herro neh..hehehe

    emang harus kompak tuh ;)

    ok chal sukses :)

    ReplyDelete
  22. Maaf kemaren blog abang tutup chal, tp masih bisa ngintip kan lewat jendela hue he he, skr dah dibuka chal

    ReplyDelete
  23. @ gdenarayana > yups suhu herro memang good
    @ abang > ya bang lagi maintenace yak

    ReplyDelete
  24. ini bikin blognya lewat fs yaw??? :)

    ReplyDelete
  25. @ acy > wekekekekek.... cuman intip aja codenya

    ReplyDelete
  26. Keren mas..

    Tapi mo nanya yg laen nih, ntu iklan GA bisa nongol gimana caranya?
    ngerobah script kah?

    ReplyDelete
  27. bagus-bagus info di blognya mas

    ReplyDelete
  28. kok tetep gak bisa ya,...yang muncul tetep codenya,..

    ReplyDelete
  29. Trik ini yg sy cari, tks infonya...

    ReplyDelete
  30. duh, kok masih gagal ya?
    salahnya di mana ya?

    ReplyDelete