Membuat scroll image seperti Instagram story di blogger

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

Periksa

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