Cara Membuat Horizontal Scroll Image di Blogger Pure CSS

Posted by Aditya Januardi

June 10, 2020

Tutorial

Hai teman-teman, pada artikel kali ini gw mau ngeshare cara membuat horizontal scroll image di blog kamu. Untuk previwnya silahkan lihat di akhir artikel. Yuk langsung aja ke tutorialnya!

1. Pertama, buka blog kamu kemudian masuk ke menu Tema - Edit HTML
2. Cari tag </head> kemudian pastekan kode ini tepat di atasnya

<style type='text/css'>
/* HORIZONTAL SCROLL */
.scroll-container{
  overflow: auto;
  white-space: nowrap;
  padding: 5px 70px 5px 20px;
  background: transparent;
  height: 100%;
  border-radius:15px;
}

.gridscroll{
  display:inline-block;
}

.gridscroll img {
  margin-right:22px;
}

</style>  

3. Setelah itu klik SAVE
4. Untuk menggunakannya, kamu tinggal pastekan kode ini di postingan kamu dalam mode HTML

<div class="scroll-container">
<div class="gridscroll">
<!-- PLACE YOUR IMG URL HERE -->
      <img src="LINK GAMBARMU" />
      <img src="LINK GAMBARMU" />
      <img src="LINK GAMBARMU" />
      <img src="LINK GAMBARMU" />
  </div>
</div> 

Silahkan ganti LINK GAMBAR dengan url gambarmu.
5. Silahkan publish dan liat hasilnya

Untuk demo nya kamu bisa lihat di bawah.

Sekian artikel kali ini, semoga bermanfaat. Jika ada pertanyaan silahkan tanyakan di komentar di bawah, jangan lupa tingggalkan like share dan komentar! Thanks!