Don't Show Again Yes, I would!

Cara Membuat Tulisan Berjalan Di Blog AMP

Cara Membuat Tulisan Berjalan Di Blog AMP

Mangaip, pada kesempatan kali ini saya akan membahas mengenai cara membuat tulisan berjalan di blog amp. Memang sebelumnya teks berjalan ini bisa menggunakan kode marquee untuk membuat teks menjadi bergulir.

Akan tetapi kode marquee yang masih berfungsi ini, kini bakal tidak disupport oleh web browser karena tidak valid HTML 5. Lalu bagaimana solusinya? Maka sebagai gantinya, kita bisa menggunakan css animation. Kode ini bisa digunakan di blog amp maupun non-amp.

Oh, iya sebelumnya, saya pun telah memberikan panduan cara membuat gambar slide pada blog amp. Fungsinya pun sama seperti membuat tulisan berjalan pada blog, yaitu untuk mempercantik blog.

Untuk membuat teks berjalan pada blog AMP HTML, silahkan ikuti panduannya dibawah ini.

Cara Membuat Tulisan Berjalan Di Blog Non AMP

cara membuat tulisan berjalan di blog

1. Masuk pada dashboard blogger kalian.

2. Pilih Tema, kemudian pilih kembali Edit HTML.

3. Masukan kode CSS dibawah ini setelah kode <style amp-custom> atau sebelum </style>

.marquee-text {
  height: 30px;
  display: block;
  line-height: 30px;
  overflow: hidden;
  position: relative;
  background: #ddd;
}<

.marquee-text:before,
.marquee-text:after {
  content: '';
  position: absolute;
  width: 5px;<
  height: 100%;
  background: #ddd;
  top: 0;
  z-index: 2;
}

.marquee-text:before {
  left: 0;
}<

.marquee-text:after {
  right: 0;
}

.marquee-text div {
  height: 30px;<
  line-height: 30px;
  font-size: 16px;
  white-space: nowrap;
  color: #555;
  z-index: 1;
  animation: marquee 15s linear infinite;
}

.marquee-text:hover div {
  animation-play-state: paused
}

@keyframes marquee {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

4. Berikut adalah kode untuk membuat teks berjalan. Letakan kode tersebut dimana saja sesuai keinginan kalian.

<div class="marquee-text">
  <div>Selamat Datang Di Blog Mangaip.com - Blog yang membahas seputar blogging, technology dan kesehatan.

</div>
</div>

Silahkan ganti tulisan yang disorot sesuai dengan teks yang kalian inginkan. Berikut Hasilnya

Cara Membuat Teks Berjalan Pada Blog AMP

cara membuat tulisan berjalan di blog amp

Berikut adalah kode HTML kedua yang bisa sobat terapkan pada blog amp. Caranya hampir sama dengan cara diatas.

Silahkan gunakan CSS dibawah ini setelah kode <style amp-custom>.

.marquee-text {
  height: 30px;<
  display: block;
  line-height: 30px;
  overflow: hidden;
  position: relative;
  background: #ddd;
}
.marquee-text:before,
.marquee-text:after {
  content: '';
  position: absolute;
  width: 5px;
  height: 100%;
  background: #ddd;
  top: 0;
  z-index: 2;
}
.marquee-text:before {
  left: 0;
}
.marquee-text:after {
  right: 0;
}
.marquee-text div {
  display: block;
  width: 200%;
  height: 30px;
  line-height: 30px;
  position: absolute;
  overflow: hidden;
  font-size: 16px;
  color: #555;
  z-index: 1;
  animation: marquee 15s linear infinite;
}
.marquee-text span {
  float: left;
  width: 50%;
}
.marquee-text:hover div {
  animation-play-state: paused
}
@keyframes marquee {
  0% {
    left: 0;
  }
  100% {
    left: -100%;
  }
}
.on-768px,.on-425px {
  display: none;
}
@media screen and (max-width: 1024px) {
  .marquee-text div {
animation: marquee 10s linear infinite;
}
}
@media screen and (max-width: 768px) {
.marquee-text div {
animation: marquee 8s linear infinite;
}
.on-768px {
display: block;
}
.on-425px,.on-1440px {
display: none;
}
}
@media screen and (max-width: 425px) {
.marquee-text div {
animation: marquee 5s linear infinite;
}
.on-425px {
display: block;
}
.on-768px,.on-1440px {
display: none;
}
}

Kemudian gunakan kode HTML dibawah ini, untuk membuat tulisan bersambung dengan jarak yang tidak terlalu jauh.

<div class="marquee-text on-1440px">
   <div>
   <span>Selamat Datang Di Blog Mangaip.com - Blog yang membahas seputar blogging, technology dan kesehatan.</span>
   <span>Selamat Datang Di Blog Mangaip.com - Blog yang membahas seputar blogging, technology dan kesehatan.</span>
   </div>
</div>

<div class="marquee-text on-768px">
   <div>
   <span>Selamat Datang Di Blog Mangaip.com - Blog yang membahas seputar blogging, technology dan kesehatan.</span>
   <span>Selamat Datang Di Blog Mangaip.com - Blog yang membahas seputar blogging, technology dan kesehatan.</span>
   </div>
</div>

<div class="marquee-text on-425px">
   <div>
   <span>Selamat Datang di Blog Mangaip.com</span>
   <span>Selamat Datang di Blog Mangaip.com</span>
  </div>
</div>

Ganti tulisannya sesuai keinginan sobat. Berikut Hasilnya

Penutup

Bagi sobat yang masih menggunakan kode marquee pada blog anda, silahkan ganti dengan kode animation diatas. Karena memang penggunaan marquee akan distop dalam kurun waktu dekat ini.

Itulah panduan mengenai cara membuat tulisan berjalan di blog amp. Semoga bermanfaat, apabila ada yang mau ditanyakan, silahkan luangkan waktunya di kolom komentar.

 

Share:

Mangaip

Halo perkenalkan nama saya Mangaip. Saya merupakan konten kreator, influencer, dan penulis di blog ini. Jangan lupa ikuti kami di Google News. Gabung juga ke channel Telegram untuk mendapatkan terbaru Gabung Telegram ya Bestie!

Leave a Reply

Your email address will not be published. Required fields are marked *