Cara Membuat Grid Scroll Image di Blogger dengan CSS
 |
| Dribbble Shot from Nakul Dhaka — https://dribbble.com/shots/4901594-Horizontal-Vertical-Scroll |
Halo Sahabat, pada kesempatan ini, saya akan membagikan artikel yang saya lansir dari blog blogadityajanuardi.blogspot.com, tentang cara membuat horizontal grid scroll image di postingan blog kamu agar tampilan postingan blog kamu semakin menarik, untuk demo preview, silahkan cek pada akhir artikel ini ya, kuy simak tutorialnya......
- Hal Pertama, buka blog kamu kemudian klik masuk ke menu Tema - Edit HTML
- Cari tag </head> lalu pastekan kode di bawah ini di atas tag </head>
- Setelah itu klik SAVE untuk menyimpan setingan kamu
- Untuk mengaplikasikan, tinggal pastekan kode dibawah ini pada postingan kamu dalam mode postingan HTML
- Silahkan klik publish dan liat hasilnya
<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>
<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>
Untuk preview kode, kamu bisa cek di bawah.
Sekian, semoga bermanfaat. jangan lupa tingggalkan like share dan komentar! Terimakasih
Sumber:
Posting Komentar