MEMBUAT
TULISAN & GAMBAR BERJALAN
Embedded Files
Membuat TULISAN BERJALAN atau yang lebih dikenal dengan RUNNING TEXT adalah hal yang tidak mudah tetapi juga tidak sulit, asal kita mau berusaha untuk mencoba belajar dan mencari infonya di ENGKONG GOOGLE Browser insya allah bisa
Ketik di google browser "TULISAN BERJALAN WEBSITE" , Bapak/Ibu Guru Hebat akan diantarkan ke website teman2 yang mengajarkannya
http://pena.belajar.kemdikbud.go.id/2021/11/membuat-tulisan-berjalan-di-blog/
https://www.nesabamedia.com/cara-membuat-tulisan-berjalan-di-html/ .. ini menjelaskan secara detail teori / bahasa pemrogramannya
<marquee>
<marquee>
PEMROGRAMAN DASAR :
<marquee>teks yang akan disajikan</marquee>
Macam – macam marquee
Teks dasar
<marquee>Teks yang akan ditulis</marquee>
Teks Berjalan
Warna Background Marquee
<marquee bgcolor=green><font color="yellow"> Teks Berjalan dengan warna latar belakang kuning</marquee>
Teks Berjalan dengan warna latar belakang hijau
terserah Bapak/ibu mau mencoba yang mana, yang pasti <MERQUEE> inilah kata kuncinya. bahkan GAMBAR BERJALAN juga bisa kita buat
Untuk membuat TULISAAN BERJALAN di Website dengan Google Sites kita, langkah-langkahnya sebagai berikut :
Siapkan HTMLnya / Bahasa pemrogramanya
misalnya :
<marquee>Mari bersama belajar membuat TULISAN BERJALAN / RUNNING TEXT</marquee>
Klik kiri mouse 2X akan muncul gambar seperti diatas
atau klik sisipkan di menu kanan atas lalu pilih SEMATKAN <>
Pilih/Klik SEMATKAN CODE
copy HTMLnya dan Pastekan HTML tsb di kolom yang telah disediakan lalu klik BERIKUTNYA
JIka sudah muncul RUNNING TEXTnya klik SISIPKAN
GAMBAR BERJALAN
Untuk membuat GAMBAR BERJALAN di Website dengan Google Sites kita, hampir sama dengan TULISAN BERJALAN tetapi sedikit berfikir untuk menempelkan gambarnya agar bisa berjalan sesuai yang kita inginkan, langkah-langkahnya sebagai berikut :
Siapkan HTMLnya / Bahasa pemrograma dasarnya (bapak/ibu tinggal copy saja)
misalnya :
HTML GAMBAR BERJALAN :
!DOCTYPE html>
<html>
<head>
<title>Gambar di Tag Marquee</title>
</head>
<body>
<marquee width="500"><img src=""https://drive.google.com/uc?export=view&id=1JZQLrfOBfOej_pBst6GQ1569vk52K-qq" height="100">
<img src="Kimchi.jpg" height="100">
<img src="mandu.jpg" height="100">
</marquee>
</body>
</html>
Ini yang berwarna kuning dibawah ini adalah HTML KUNCINYA
<marquee width="500"><img src=""https://drive.google.com/uc?export=view&id=1JZQLrfOBfOej_pBst6GQ1569vk52K-qq" height="100">
<img src="Kimchi.jpg" height="100">
Note semua gambar (jpg) yang akan di tempelkan harus diletakkan di Google Drive
siapkan gambar yang akan dibuat menjadi gambar berjalan di google drive kita seperti gambar diatas
Pilih / klik kanan gambar yang akan di jadikan gambar berjalan lalu klik bagikan
klik -> Salin LINK
Tempelkan link kita salin tadi di TAB baru dan coba apakah gambar bisa terbuka
https://drive.google.com/file/d/1CDgFAQt3KP0G_zBWE32aor7Pck_dGQ3A/view?usp=sharing
https://drive.google.com/file/d/1CDgFAQt3KP0G_zBWE32aor7Pck_dGQ3A/view
Copy text / kode berwarna merah yang bercetak tebal (1CDgFAQt3KP0G_zBWE32aor7Pck_dGQ3A) dan letakkan di HTML
siapkan / copy HTML gambar diatas :
TI ANG LE CES F12mn
<html>
<head>
<title>Gambar di Tag Marquee</title>
</head>
<body>
<marquee width="500">
<img src="https://drive.google.com/uc?export=view&id=1CDgFAQt3KP0G_zBWE32aor7Pck_dGQ3A" height="100">
<img src="Kimchi.jpg" height="100">
<img src="mandu.jpg" height="100">
</marquee>
</body>
</html>
Ikuti Proses menyematkankannya seperti membuat RUNNING TEXT diatas
Dan masih banyak lagi HTML-2 untuk
Warna text, Background Text, arah gerakan dan lain-lain .. silahkan bapak/Ibu guru Hebat mencoba dan mengexplorenya
SALAM SUKSES SELALU
Tiada hari tanpa PRESTASI, Tiada Prestasi tanpa INOVASI
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
/* Make the image fully responsive */
.carousel-inner img {
width: 100%;
height: 100%;
}
</style>
</head>
<body class="bg-transparent">
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
<li data-target="#demo" data-slide-to="3"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src=" https://drive.google.com/uc?export=view&id=13ujl0jbJTG5UYKNfkWsKCO00PE2kozOP" alt="Slide 1" width="1100" height="500">
</div>
<div class="carousel-item">
<img src=" https://drive.google.com/uc?export=view&id=1cZnwXOGZECpXkDPVIwXljNZ8vxnsvW9w" alt="Slide 2" width="1100" height="500">
</div>
<div class="carousel-item">
<img src="https://drive.google.com/uc?export=view&id=1lVLhb632i3EzenzMZrAdzcsKVEDf3A7r" alt="silde 3" width="1100" height="500">
</div>
<div class="carousel-item">
<img src="https://drive.google.com/uc?export=view&id=1J5gVtqsj9daJMu7LDbumvENMvhhyT6gd" alt="silde 4" width="1100" height="500">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</body>
</html>
Page updated
Google Sites
Report abuse