gacerindo, 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 sebagaiOh 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 AMP
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 gacerindo.com - Blog yang membahas seputar blogging, technology dan kesehatan. </div>
</div>
Silahkan ganti tulisan yang disorot sesuai dengan teks yang kalian inginkan.
Cara Membuat Teks Berjalan Pada 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 gacerindo.com - Blog yang membahas seputar blogging, technology dan kesehatan.</span>
<span>Selamat Datang Di Blog gacerindo.com - Blog yang membahas seputar blogging, technology dan kesehatan.</span>
</div>
</div>
<div class="marquee-text on-768px">
<div>
<span>Selamat Datang Di Blog gacerindo.com - Blog yang membahas seputar blogging, technology dan kesehatan.</span>
<span>Selamat Datang Di Blog gacerindo.com - Blog yang membahas seputar blogging, technology dan kesehatan.</span>
</div>
</div>
<div class="marquee-text on-425px">
<div>
<span>Selamat Datang di Blog gacerindo.com</span>
<span>Selamat Datang di Blog gacerindo.com</span>
</div>
</div>
Ganti tulisannya sesuai keinginan sobat.
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.
