Trik Komputer: Gado-Gado Blogger

Dalam memberikan judul artikel Beben Koben si bloglang anu ganteng kalem tea suka sedikit kebelinger sob. Jadi ya asal jeplak saja kasih title sebuah postingan. Tapi bukan tidak berbobot loh isi artikelnya :D , dan beberapa postingan aneh yang mungkin saja mencengangkan isinya ;))
Kenapa Beben suka begitu!!! Karena dalam berwalking kesana kemari tak ayal ada saja yg dicomot tutorial lalu dikumpulkan dulu, jadi banyak end belon dipostingkan bro? Layaknya kali ini, mau share jejak² hasil comotan artikel dari web/blog yg entah dimana keberadaannya :D

Jurus-jurus kali ini tidak jauh kok sob, cara pemasangan standard, paling banter yaaa via Add a Gadget ► HTML/Javascript.

Javascript Watch

Jam dengan 11 negara berbeda. Gadget type method added.

<table border="0" width="200" cellspacing="0" cellpadding="3">
<form name="where">
<tr>
<td width="100%">
<select name="city" size="1" onchange="updateclock(this);">
<option value="" selected />Local time
<option value="0" />London GMT
<option value="1" />Rome
<option value="7" />Bangkok
<option value="8" />Hong Kong
<option value="9" />Tokyo
<option value="10" />Sydney
<option value="12" />Fiji
<option value="-10" />Hawaii
<option value="-8" />San Francisco
<option value="-5" />New York
<option value="-3" />Buenos Aires
</select>
</td>
</tr>

<tr>
<td width="100%">
<script language="JavaScript">
/*
Drop Down World Clock- By Learn iran
Portions of code by Kurt @ http://www.webloger.5u.com/
Repost by @ http://beben-koben.blogspot.com/
This credit notice must stay intact
*/

if (document.all||document.getElementById)
document.write('<span id="worldclock" style="font:bold 16px Arial;"></span><br>')

zone=0;
isitlocal=true;
ampm='';

function updateclock(z){
zone=z.options[z.selectedIndex].value;
isitlocal=(z.options[0].selected)?true:false;
}

function WorldClock(){
now=new Date();
ofst=now.getTimezoneOffset()/60;
secs=now.getSeconds();
sec=-1.57+Math.PI*secs/30;
mins=now.getMinutes();
min=-1.57+Math.PI*mins/30;
hr=(isitlocal)?now.getHours():(now.getHours() + parseInt(ofst)) + parseInt(zone);
hrs=-1.575+Math.PI*hr/6+Math.PI*parseInt(now.getMinutes())/360;
if (hr < 0) hr+=24;
if (hr > 23) hr-=24;
ampm = (hr > 11)?"PM":"AM";
statusampm = ampm.toLowerCase();

hr2 = hr;
if (hr2 == 0) hr2=12;
(hr2 < 13)?hr2:hr2 %= 12;
if (hr2<10) hr2="0"+hr2

var finaltime=hr2+':'+((mins < 10)?"0"+mins:mins)+':'+((secs < 10)?"0"+secs:secs)+' '+statusampm;
if (document.all)
worldclock.innerHTML=finaltime
else if (document.getElementById)
document.getElementById("worldclock").innerHTML=finaltime
else if (document.layers){
document.worldclockns.document.worldclockns2.document.write(finaltime)
document.worldclockns.document.worldclockns2.document.close()
}

setTimeout('WorldClock()',1000);
}

window.onload=WorldClock
//-->
</script>


<ilayer id="worldclockns" width=100% height=35><layer id="worldclockns2" width=100% height=35 left=0 top=0 style="font:bold 16px Arial;"></layer></ilayer>

</td>
</tr>
</form>
</table>

Kalo jam dan tanggal lokal begini kodenya Click here expand

<table><tbody>
<tr> <td><script type="text/javascript">

</script> | </td><td><div id="jam">
<script language="javascript">
function jam(){
var waktu = new Date();
var jam = waktu.getHours();
var menit = waktu.getMinutes();
var detik = waktu.getSeconds();
if (jam < 10){
jam = "0" + jam;
}
if (menit < 10){
menit = "0" + menit;
}
if (detik < 10){
detik = "0" + detik;
}
var jam_div = document.getElementById('jam');
jam_div.innerHTML = jam + ":" + menit + ":" + detik;
setTimeout("jam()", 1000);
}
jam();
</script></div>
</td>
</tr>
</tbody></table>

Random Post Widget

Menampilkan postingan secara acak.

<div id="RandomPost" style="text-align:center"></div>
<script type="text/javascript">
function showLucky(root){ var feed = root.feed; var entries = feed.entry || []; var entry = feed.entry[0]; for (var j = 0; j < entry.link.length; ++j){if (entry.link[j].rel == 'alternate'){window.location = entry.link[j].href;}}} function fetchLuck(luck){ script = document.createElement('script'); script.src = '/feeds/posts/summary?start-index='+luck+'&max-results=1&alt=json-in-script&callback=showLucky'; script.type = 'text/javascript'; document.getElementsByTagName('head')[0].appendChild(script); } function feelingLucky(root){ var feed = root.feed; var total = parseInt(feed.openSearch$totalResults.$t,10); var luckyNumber = Math.floor(Math.random()*total);luckyNumber++; a = document.createElement('a'); a.href = '#random'; a.rel = luckyNumber; a.onclick = function(){fetchLuck(this.rel);}; a.innerHTML = 'Get Try Random Post'; document.getElementById('RandomPost').appendChild(a); } </script>
<script src="/feeds/posts/summary?max-results=0&alt=json-in-script&callback=feelingLucky"></script>

Gantilah tulisan Get Try Random Post sesuai selera.

Float Javascript

Membuat satu tampilan yg dapat ditutup kembali dengan menggunakan javascript (Resource by: ) Disini Beben memasukan cbox yg ditampilinnya gan...

<style>
#float-X {
background-color: #555;
border: 3px solid #666;
top: 5px;
padding: 5px;
position: fixed;
right: 5px;
width: 275px;
z-index: 1;
}
#float-X a {
text-align:center;
display: block;
color: red;
font-weight: bold;
}
</style>

<div id="float-X">

<div id="cboxdiv" style="text-align: center; line-height: 0">
<iframe frameborder="0" width="275" height="305" src="http://www6.cbox.ws/box/?boxid=294584&amp;boxtag=7c3kfw&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain" id="cboxmain"></iframe><iframe frameborder="0" width="275" height="80" src="http://www6.cbox.ws/box/?boxid=294584&amp;boxtag=7c3kfw&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform" style="border:#ababab 1px solid;border-top:0px"></iframe>
</div>

<a href="javascript:void(0);" onclick="document.getElementById('float-X').style.display='none';">CLOSE</a>
</div>

Ganti cboxnya & sesuaikan deh lebar, tinggi, warna latar dll.

Show/Hide with jQuery Plugin

Sama dengan float javascript fungsinya, tapi ini menggunakan jQuery plugins.

<style>
#notification {
width: 350px;
height: 391px;
position: absolute;
top: 5px;
right: 5px;
padding:5px;
background: #debe94;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius: 10px;
display: none;
}

#notification #close {
display: block;
width: 30px;
height: 30px;
text-indent: -1000em;
background: url(http://dev.css-zibaldone.com/onwebdev/post/jquery-gmail/close.png) no-repeat 0 0;
position: absolute;
bottom: -3px;
left: -1px;
}
</style>


<div id="notification">
<a href="#" id="close">Close</a>

<iframe frameborder="0" width="350" height="305" src="http://www6.cbox.ws/box/?boxid=294584&amp;boxtag=7c3kfw&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain" id="cboxmain"></iframe>
<iframe frameborder="0" width="100%" height="80" src="http://www6.cbox.ws/box/?boxid=294584&amp;boxtag=7c3kfw&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform" style="border:#ababab 1px solid;border-top:0px"></iframe>

</div>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/></script>

<script type="text/javascript">
   $(function() {

       function notifyEmail() {

           var $notification = $('#notification');
           var $close = $('#close', '#notification');

           $close.click(function(event) {

               $notification.fadeOut(500);
               event.preventDefault();
           });

           $notification.fadeIn(500, function() {

           });


       }

       setTimeout(notifyEmail, 1000);


   });
</script>

Ganti frame cboxnya, hostingkan gambar close ke hosting sobat masing², script warna biru jika sudah ada jangan dipasang lagi, lebar, tinggi warna etc seting suka2.
Dah jangan banyak-banyak nanti muntah :-&
Happy gado-gado \m/

Trik Komputer

Kamis, 28 April 2011

Gado-Gado Blogger

Javascript Watch

Random Post Widget

Float Javascript

Show/Hide with jQuery Plugin

Tidak ada komentar:

Posting Komentar