Showing posts with label tip blog. Show all posts
Showing posts with label tip blog. Show all posts

Countdown

Countdown

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>

Letak, CSS, JavaScript, jQuery, HTML

Letak, CSS, JavaScript, jQuery, HTML
Letak, CSS, JavaScript, jQuery, HTML

Hal yang paling mendasar sebagai seorang modifikator template khususnya blogspot adalah mengetahui struktur dasar template itu sendiri. Setelah mengetahui struktur template dengan sendirinya akan diketahui letak dimana kode-kode CSS, JavaScript, HTML, atau bahkan jQuery itu berada.

Letak Kode CSS :
<b:skin><![CDATA[
Kode CSS disini letaknya
</b:skin>

Agar lebih gampang dalam mencari, tekan Ctrl+f pada keyboard komputer dan masukkan salah satu kode yang ingin dicari.

Letak Kode JavaScript Dan JQuery :
</b:skin>
Kode JavaScript dan Jquery disini letaknya
</head>

Kalau ada kode css lainnya didalam, letakan dibawah kode CSS tersebut. Contoh:
</b:skin>
<style type='text/css'>
.....
.....
</style>
Letakkan disini
</head>
Perlu diingat, kode JQuery Library atau induk JQuery harus selalu berada diatas kode JavaScript dan anak JQuery lainnya.
Contoh induk JQuery seperti ini :
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' />


Letak Kode HTML :
<body>
Kode HTML disini letaknya
</body>

Kode HTML adalah kode yang menentukan berada diposisi mana suatu objek tersebut akan tampil, jika tidak dengan manipulasi kode CSS. Jika ingin meletakkan dikolom tepi, maka harus mengetahui kode HTML kolom tepi kemudian letakkan di dalamnya.

TULISAN BERJALAN DIBLOG

TULISAN BERJALAN DIBLOG
Kita mungkin pernah melihat teks/tulisan berjalan, mungkin pada siaran tv dll. Salikur berbagi trikny tetapi pada blog. Lihat gambar dibawah.:

1. Tulisan berjalan diblog dari kanan ke kiri.

<marquee direction="left" scrollamount="2" align="center"> Tulisan Berjalan</marquee>
Demo 1
Tulisan Berjalan
 
2. Tulisan berjalan diblog dari kiri ke kanan
<marquee direction="right" scrollamount="2" align="center"> Tulisan Berjalan </marquee>
Demo 2
Tulisan Berjalan
 
3. Tulisan berjalan diblog bolak balik ( mondar - mandir ) dari kiri ke kanan
<marquee direction="left" scrollamount="2" align="center" behavior="alternate"> Tulisan Berjalan </marquee>
Demo 3
Tulisan Berjalan

4. Tulisan berjalan diblog bolak balik ( mondar - mandir ) dari kanan ke kiri
<marquee direction="right" scrollamount="2" align="center" behavior="alternate"> Tulisan Berjalan </marquee>
Demo 4 :
Tulisan Berjalan

5. Tulisan berjalan diblog dari atas ke bawah
<marquee direction="down" scrollamount="2" align="center"> Tulisan Berjalan </marquee>
Demo 5
Tulisan Berjalan

6. Tulisan berjalan diblog dari bawah ke atas
<marquee direction="up" scrollamount="2" align="center"> Tulisan Berjalan </marquee>
Demo 7

7.Tulisan berjalan diblog berhenti jika dilintasi mouse
Teks bergerak dari bawah ke atas
<marquee direction="left"onmouseover="this.stop()" onmouseout="this.start()">TEKS BERGERAK KE KIRI DAN AKAN BERHENTI JIKA DILINTASI MOUSE</marquee>

 Jadi itulah, beberapa macam variasi kode Marquee. Semoga bermanfaat untuk anda. Dan terima kasih sudah mau berkunjung ke blog ini.
Tulisan Berjalan

 Cara memasang :
1. Login ke akun blog sobat.
2. Klik rancangan --> Elemen laman --> Tambah gadget --> HTML/Javascript
3. Masukkan kode marquee dari salah satu tulisan berjalan diatas
4. Klik save dan lihat hasilnya.

tambahan :
Untuk mendapatkan kode warna kunjingi http:marqueetextlive.com
Direction : untuk mengatur pola gerakan teks (left, right, up dan down)
Scrollamount : untuk mengatur kecepatan gerakan teks. Naikkan angkanya ( dari 2 menjadi 3 ) untuk mempercepat gerakan dan sebaliknya.
Behavior ( scroll/slide/alternate ): untuk mengatur prilaku gerakan.
Untuk menambahkan background, padding, border, color, dll pada marquee, silahkan sisipkan  kode marquee antara kode berikut :

<div style="background: #000000; border: 2px solid #0000ff; color: blue; font-size: 20px; font-weight: bold; letter-spacing: 0.5em; padding: 15px;">
<marquee direction="left" scrollamount="6" align="center">Tulisan Berjalan</marquee>
Demo :
Tulisan Berjalan

Countdown

Hai sobat Agussalikur berjumpa kembali ! Kali ini admin berbagi tips seputar blogger dalam topik Time Countdown, kebetulan admin contohkan m...