Agussalikur: widged

Showing posts with label widged. Show all posts

Countdown

December 22, 2021

Hai sobat Agussalikur berjumpa kembali ! Kali ini admin berbagi tips seputar blogger dalam topik Time Countdown, kebetulan admin contohkan mengenai menyambut Lebaran . Ikutin terus yo langsung saja.

Tahapannya :


1.Buka blogger edit tema cari </head> masukkan kode CSS dibawah ini
<style type="text/css" scoped="scoped">
#lebaran{background:#333;color:#37B185;font-family:Oswald, Arial, Sans-serif;font-size:18px;text-transform:uppercase;text-align:center;padding:10px 0;font-weight:normal;}
      .teks {color:white}
    </style>


2.  Cari kode <body> atau sebelum </body> masukan kode dibawah ini
<div id="lebaran">
    <span id="countdown">133
    <span class="teks">hari</span>23
    <span class="teks">jam</span>45 
    <span class="teks">menit</span> 40 
    <span class="teks">detik menuju Hari Raya Idul Fitri</span>1443 H / 2022 M</span>
    </div>


3. Cari footer masukan kode dibawah ini
<script type="text/javascript">
    //<![CDATA[
    // set the date we're counting down to
    var target_date = new Date("May 2, 2022").getTime();
    // variables for time units
    var days, hours, minutes, seconds;
    // get tag element
    var countdown = document.getElementById("countdown");
    // update the tag with id "countdown" every 1 second
    setInterval(function () {
        // find the amount of "seconds" between now and target
        var current_date = new Date().getTime();
        var seconds_left = (target_date - current_date) / 1000;
        // do some time calculations
        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);
   
        // format countdown string + set tag value
      countdown.innerHTML = days + " <span class=\'teks\'>hari</span> " + hours + " <span class=\'teks\'>jam</span> "
      + minutes + " <span class=\'teks\'>menit</span> " + seconds + " <span class=\'teks\'>detik menuju Hari Raya Idul Fitri</span> 1443 H / 2022 M";
    }, 1000);
    //]]>
    </script>

Widged Time blog

February 15, 2016



HTML 

<div class="clock">

<div id="Date"></div>

<ul>

<li id="hours"></li>

<li id="point">:</li>

<li id="min"></li>

<li id="point">:</li>

<li id="sec"></li>

</ul>

</div>



CSS 

<style>

.clock {width: 240px;margin: 0 auto;padding: 30px;

color: #FFF;background:#111211;}

.clock ul {width: 220px;margin: 0 auto;padding: 0;

list-style: none;text-align: center}

.clock ul li {display: inline;font-size: 2em;

text-align: center;

font-family: "Arial", Helvetica, sans-serif;}

#Date { font-family: 'Arial', Helvetica, sans-serif;

font-size: 16px;text-align: center;padding-bottom: 40px;}

#point {position: relative;

-moz-animation: mymove 1s ease infinite;

-webkit-animation: mymove 1s ease infinite;

padding-left: 10px;padding-right: 10px}



/* Animasi Detik Kedap - Kedip */

@-webkit-keyframes mymove 

{

0% {opacity:1.0; text-shadow:0 0 20px #00c6ff;}

50% {opacity:0; text-shadow:none; }

100% {opacity:1.0; text-shadow:0 0 20px #00c6ff; }}



@-moz-keyframes mymove 

{

0% {opacity:1.0; text-shadow:0 0 20px #00c6ff;}

50% {opacity:0; text-shadow:none; }

100% {opacity:1.0; text-shadow:0 0 20px #00c6ff; }}

</style>

Widged time blog



SCRIPT 
//http://agussalikur.blogspot.com
$(document).ready(function() {
  
// Making 2 variable month and day

var monthNames = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]; 

var dayNames= ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]



// make single object

var newDate = new Date();

// make current time

newDate.setDate(newDate.getDate());

// setting date and time

$('#Date').html(dayNames[newDate.getDay()] + " " + newDate.getDate() + ' ' + monthNames[newDate.getMonth()] + ' ' + newDate.getFullYear());





setInterval( function() {

// Create a newDate() object and extract the seconds of the current time 

var seconds = new Date().getSeconds();

// Add a leading zero to seconds value

$("#sec").html(( seconds < 10 ? "0" : "" ) + seconds);

},1000);



setInterval( function() {

// Create a newDate() object and extract the minutes of the current time 

var minutes = new Date().getMinutes();

// Add a leading zero to the minutes value

$("#min").html(( minutes < 10 ? "0" : "" ) + minutes);

},1000);



setInterval( function() {

// Create a newDate() object and extract the hours of the current time 

var hours = new Date().getHours();

// Add a leading zero to the hours value

$("#hours").html(( hours < 10 ? "0" : "" ) + hours);

}, 1000); 





$('#time').html(hours+":"+minutes);

$('#weekday').html(dayNames[newDate.getDay()]);

$('#monthday').html(newDate.getDate() + ' ' + monthNames[newDate.getMonth()]);

$('#year').html(newDate.getFullYear());



  $.simpleWeather({

    woeid: '2357536', //2357536

    location: 'jakarta, CO',

    unit: 'f',

    success: function(weather) {

      html = '<h2>'+weather.temp+'&deg;'+weather.units.temp+'</h2>';

      html += '<p>'+weather.currently+'</p>';

      html += '<p>wind: '+weather.wind.direction+' '+weather.wind.speed+'</p>';

      html += '<p>humidity: '+weather.humidity+'</p>';

      

      html+='<p>';

      //for(var i=0;i<weather.forecast.length;i++) {

          for(var i=0;i<3;i++) {

        html += weather.forecast[i].day+': '+weather.forecast[i].high+'&deg;'+'&nbsp;';

      }

  html+='</p>';

      $("#weather").html(html);

    },

    error: function(error) {

      $("#weather").html('<p>'+error+'</p>');

    }

  });  

  

  

});

Widged time blog

create-sleek-sliding-box-effect-with-jquery-sleek-sliding-box

October 25, 2015


<div id="containner">

<div id="top-left" class="wrap">

     <img src="back.jpg">

     <img style="top: 0px; left: 0px;" src="front.jpg" class="front">

</div>

<div id="top-center" class="wrap">

     <img src="back.jpg">

     <img style="top: 0px; left: 0px;" src="front.jpg" class="front">

</div>

<div id="bottom-center" class="wrap">

     <img src="back.jpg">

     <img style="top: 0px; left: 0px;" src="front.jpg" class="front">

</div>

<div id="left" class="wrap">

     <img src="back.jpg">

     <img src="front.jpg" class="front">

</div>

<div id="right" class="wrap">

     <img src="back.jpg">

     <img style="left: 0px; top: 0px;" src="front.jpg" class="front">

</div>

<div id="top-right" class="wrap">

     <img src="back.jpg">

     <img src="front.jpg" class="front">

</div>

<div id="return" class="wrap">

     <h3>This is the live demo</h3>

     <p><a href="http://www.agussalikur.blogspot.com/tutorials/sliding-boxes-with-jquery/">Return back to the tutorial</a> for a full explanation of what's going on!</p>

</div>



</div>



<script type="text/javascript">

            topbar_height =0;

            $(function(){

                topbar_height = $(".container").outerHeight()+6;

                resize();

                setInterval(resize,1000);

            });

            

            var body_height=0

            var resize=function(){

                if (body_height !=$(document).height())

                    {

                        body_height = $(document).height();

                        $("#demo").attr("height",(body_height-topbar_height)+"px");

                    }

            }

            

            function closeBanner(){

                $(".container").hide();

                $("#close").hide();

                $(".container").css('height','0px');

                body_height = $(document).height();

                topbar_height = 6;

                $("#demo").attr("height",(body_height-topbar_height)+"px");

            }

            

    </script>

<script type="text/javascript">google.load("jquery", "1.4.2");</script>





.wrap

{

     float:left;

     position:relative;

     width:300px;

     height:150px;

     margin:20px;

     overflow:hidden;

}

img

{

     top:0;

     left:0;

     position:absolute;

}

.back

{

     top:0;

     left:0;

     position:absolute;

     background-color:#dbc277;

     width:300px;

     height:150px;

}

#return

{

     background:#e2cd98;

     color:white;



}

#return h3

{

     margin-left:60px;

}

#return a

{ 

     color:#d4a42a; 

}

#return p

{

     width:200px;

     margin-left:50px;

}



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

Demo

Agussalikur

iklanbanner

Countdown

Widged Time blog

create-sleek-sliding-box-effect-with-jquery-sleek-sliding-box

Countdown