Hello sobat ICloudzer kali ini admin bakalan menjabarkan mengenai bagaimana caranya membuat scroll image seperti Instagram story
Info: Oke jika kamu sudah penasaran dengan pembahasan kita kali ini yuk langsung aja kita bahas bersama sama
Scroll Image
Apa itu scroll image? scroll image yang memiliki arti gambar bergeser merupakan suatu tampilan dari beberapa gambar yang di sertai caption atau text di bawah nya seperti layaknya intstagram story namun memiliki fungsi yang berbeda dan memiliki tampilan yang sama
Instagram story
Kamu pengguna Instagram pasti mengetahui mengenai instagram story, nah scroll image ini nantinya akan memiliki tampilan yang sama layaknya instagram story namun khusus bagi pengguna blogger kamu bisa menjadikan scroll image yang mirip instagram story tersebut untuk menyematkan link label atau link postingan sesuai keinginan kamu aja
Menggunakan CSS
Untuk membuat tampilan menu navigasi scroll image yang mirip Instagram story tersebut di buat menggunakan kode CSS saja tanpa menggunakan unsur kode javascript di dalamnya sehingga mmbuat tampilan semakin responsif dan juga tidak menghambat performa blog anda
Contoh Tampilan
Baiklah sobat ICloudzer jika kamu penasaran dengan bagaimana kah contoh tampilan dari scroll image yang mirip instagramstory tersebut, silahkan periksa menggunakan tombol di bawah ini oke
Info: Bagaimana sobat dengan contoh tampilannya keren sekali yak, pastilah keren 🥰
Cara pembuatan
Baiklah sobat ICloudzer sekarang saatnya admin bakalan menjabarkan mengenai bagaimana kah caranya membuat scroll image di blogger, silahkan baca dan ikuti setiap arahan yang admin jabarkan di bawah ini
Kode CSS
Langkah pertama seperti biasanya, silahkan salin kode CSS di bawah ini kemudian kamu bisa meletakkan di atas kode ]]></b:skin>
.rahScrl{margin-top:14px;padding:0 10px;white-space:nowrap;overflow-x:auto;overflow-y:scroll;scrollbar-width:none;-ms-overflow-style:none}.rahScrl p{margin:0;padding:0}.rahScrl::-webkit-scrollbar{width:0;height:0}.rahScrlW{display:inline-block}.rahScrlimg{display:inline-block;border-radius:50%;border:1px solid#d8d8d8;padding:3px;position:relative;left:50%;transform:translatex(-50%);margin-right:12px}.rahScrlimgIn{border-radius:50%;border:1px solid#d8d8d8;width:60px;height:60px;background:center/cover no-repeat}.rahScrlT,.rahScrlT a{text-align:center;font-size:14px;margin-top:2px;color:#444}Info: Atau sobat bisa menggunakan tag kode style untuk meletakkan kode CSS yang admin berikan di atas
Kode HTML
Labgkah selanjutnya yang bisa kamu lakukan adalah menyalin lagi kode HTML di bawah ini, kemudian letakkan di mana kamu ingin tampilan scroll image tersebut muncul
<section class='rahScrl'>
<div class='rahScrlW'>
<div class='rahScrlimg'>
<div class='rahScrlimgIn' style='background-image: url("");'></div>
</div>
<p class='rahScrlT'><a href=''>Game On</a></p>
</div>
<div class='rahScrlW'>
<div class='rahScrlimg'>
<div class='rahScrlimgIn' style='background-image: url("");'></div>
</div>
<p class='rahScrlT'><a href=''>Take a Stand</a></p>
</div>
<div class='rahScrlW'>
<div class='rahScrlimg'>
<div class='rahScrlimgIn' style='background-image: url("");'></div>
</div>
<p class='rahScrlT'><a href=''>You got this</a></p>
</div>
<div class='rahScrlW'>
<div class='rahScrlimg'>
<div class='rahScrlimgIn' style='background-image: url("");'></div>
</div>
<p class='rahScrlT'><a href=''>#skater girl</a></p>
</div>
<div class='rahScrlW'>
<div class='rahScrlimg'>
<div class='rahScrlimgIn' style='background-image: url("");'></div>
</div>
<p class='rahScrlT'><a href=''>Game On</a></p>
</div>
<div class='rahScrlW'>
<div class='rahScrlimg'>
<div class='rahScrlimgIn' style='background-image: url("");'></div>
</div>
<p class='rahScrlT'><a href=''>Take a Stand</a></p>
</div>
<div class='rahScrlW'>
<div class='rahScrlimg'>
<div class='rahScrlimgIn' style='background-image: url("");'></div>
</div>
<p class='rahScrlT'><a href=''>You got this</a></p>
</div>
<div class='rahScrlW'>
<div class='rahScrlimg'>
<div class='rahScrlimgIn' style='background-image: url("");'></div>
</div>
<p class='rahScrlT'><a href=''>#skater girl</a></p>
</div>
</section>Info: Kamu bisa mengubah atau mengedit kode HTML di atas sesuai keperluan kamu aja
Penjelasan
Untuk membuat tampilan scroll image di blogger yang mirip Instagram story tersebut tidak menggunakan source kode widget blogger, maka secara simplenya, firur scroll image tersebut tidak support menu layout atau menu tata letak dan untuk mengedinya kamu harus melalui source kode langsung yang admin berikan diatas