Pages

DonkeyMails.com: No Minimum Payout
Server : Channel :
Use List | DalNet Commands (Open) | Help

Saturday, October 18, 2014

Widget Moon Phase


Widget Bumi dan Fase Bulan adalah script untuk melihat bentuk bulan yang terkena cahaya matahari pada malam hari. Widget ini berdasarkan perhitungan matematis untuk menunjukkan fase saat posisi Bumi dan Bulan sedang berhadapan pada malam hari seperti contoh di postingan artikel ini. Widget Bumi dan Fase Bulan ini otomatis update setiap hari menyesuaikan tanggal bulan dan tahun. Oke sobat blogger buat yang ingin memasang informasi tambahan di blognya tentang fase bulan ini monggo langsung ke TKP.

Widget Bumi dan Fase Bulan sudah saya modifikasi sedikit supaya terlihat menarik. Apabila sobat blogger ingin merubah tampilannya silakan utak-atik sendiri kode CSSnya yaa....

Cara Pemasangan :
  • Login ke blog sobat...
  • Klik "More Options" selector box kemudian klik "Template" setelah itu pilih "Edit HTML".
  • Tekan tombol keyboard Ctrl+F dan cari kode berikut: </Head>
  • Apabila anda belum menggunakan kode JQuery silakan anda pasang kode JQuery dibawah ini tepat di atas Kode </Head>.
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
    
  • Cari kode </Body> kemudian letakan kode berikut ini tepat di atas kode </Body>.
    <!-- Begin MonozCore Earth-Moon Phase embed -->
    <!--[if lte IE 8]>
    <style>#earth {behavior:url(border-radius-ie8.htc)}</style>
    <![endif]-->
    <style>
    #earthwrapper {margin:0 auto;text-align:center}
    #moon {margin:0 auto;text-align:right;height:65px;width:180px}
    #earth {margin:0 auto;text-align:center;width:180px;height:180px;border:0 transparent;-moz-border-radius:90px;-webkit-border-radius:90px;-khtml-border-radius:90px;-o-border-radius:90px;-ms-border-radius:90px;border-radius:90px;background:transparent url(http://www.fourmilab.ch/cgi-bin/Earth?di=356E03D2765A9857FC0A779661EB0BBC876B76512B150D3EF53F8E7EA4DAE68683E065092765048BBDE38D6335880D2FABA55F2194B98921AE8D79EC37AECD9121EA4A9589F5) top left no-repeat}
    #footer, #footer a {color:#666;font-size:10px}
    #moonBTN {
    cursor: help;
    font-family: "Times New Roman", Times, serif;
    font-size:18px;
    position:fixed;
    top: 0;left:0px;
    padding:5px;
    overflow:hidden;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    background-color:#619bb9;background: -moz-linear-gradient(top, rgba(50, 123, 165, 0.75), rgba(46, 75, 90, 0.75) 50%, rgba(92, 176, 220, 0.75));
    background: -webkit-gradient(linear, center top, center bottom, from(#327aa4),color-stop(45%, #2e4b5a), to(#5cb0dc));
    border:2px solid skyblue;
    }
    #moonBTN:hover{border:2px solid yellow;}
    #moonBox {
    position:fixed;
    top:-300px;right:5px;
    padding:5px;
    overflow:hidden;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    background-color:#619bb9;background: -moz-linear-gradient(top, rgba(50, 123, 165, 0.75), rgba(46, 75, 90, 0.75) 50%, rgba(92, 176, 220, 0.75));
    background: -webkit-gradient(linear, center top, center bottom, from(#327aa4),color-stop(45%, #2e4b5a), to(#5cb0dc));
    }
    </style>
    <div id="moonBox">
    <div id="moon" style="background:white;border-radius:4px 4px 0 0;">
    <script>
    var pastdate;
    var pastyear=2002;
    var pastmonth=5;
    var pastday=11;
    var nowdate;
    var c;
    var moonday;
    var i_mooncycle=1;
    var mooncycle=29.530589;
    pastdate=new Date(pastyear,pastmonth,pastday,0,0,0);
    nowdate=new Date()
    resultdays=(Date.parse(nowdate)-Date.parse(pastdate))/1000/60/60/24
    moonday=resultdays/mooncycle
    moonday=(resultdays/mooncycle)-(Math.floor(resultdays/mooncycle))
    moonday=Math.round(mooncycle*moonday)
    document.write('<img width="64" height="64" src="http://www.albinoblacksheep.com/image/moon/64/moon'+moonday+'.png" alt="moon phase" title="Just like outside, the moon looks like this tonight." \/>')  
    </script></div>
    <div id="earthwrapper" style="background:white;border-radius:0 0 4px 4px;"><div id="earth"></div></div>
    <div align="center" style="text-decoration:none;font-family:Arial;font-size:9px;color:grey;">Powered by <a target="_blank" href="http://monozcore.blogspot.com/2014/10/widget-moon-phase.html" style="text-decoration:none;color:grey;" title="Get this widget">MonozCore</a></div>
    </div>
    <div id="moonBTN" title="Click to see moon phase"><img src="http://2.bp.blogspot.com/-QKso88SMqu0/VABKBJh8nZI/AAAAAAAAEMg/CbTma0vD_jE/s1600/MonozCore_Moon_Phase.png" style="vertical-align:middle;width:32px;height:32px;"/></div>
    <script>
    var windowHeight = ($(window).height())/2;
    var windowBtnHeight = (windowHeight)-(($('#moonBTN').height())/2);
    $('#moonBTN').animate({ top: '+='+windowBtnHeight}, 1000);
    $(function() {
      $('#moonBTN').toggle(function() {
        $('#moonBox').animate({ top: '+=305' }, 1000);
      }, function() {
        $('#moonBox').animate({ top: '-=305' }, 1000);
      });
    });
    </script>
    <!-- End MonozCore Earth-Moon Phase embed -->
    

  • Klik "Save" dan lihat hasilnya...
Oke sobat monozcore jangan lupa kritik dan sarannya yaa biar postingan berikutnya semakin unik dan menarik.. Buat yang masih bingung dengan pemasangan widget ini.. monggo ditanyakan lewat kotak komentar, email, facebook ataupun twitter monozcore... happy blogging...

.: Semoga Bermanfaat :.

Powered by MonozCore
DMCAProtected by CopyscapeMyFreeCopyright.com Registered & Protected
Share :
Comments
0 Comments

No comments:

Post a Comment