Cara Membuat Gambar Slider di Blogger

Cara Membuat Gambar Slider


Hai semua, kali ini saya akan membahas tentang cara membuat gambar slider di Blogger. Untuk membuat blog yang menarik dan menarik perhatian pembaca, Anda perlu memperhatikan tampilan blog Anda. Salah satu cara terbaik untuk meningkatkan tampilan blog Anda adalah dengan menambahkan gambar slider dengan efek yang menarik.

Gambar slider adalah efek yang memungkinkan Anda untuk menampilkan beberapa gambar dalam satu area dengan cara yang menarik. Efek ini sangat populer di website dan blog modern karena memberikan cara yang mudah dan menarik untuk menampilkan banyak gambar dalam satu area. Dalam artikel ini, kami akan membahas cara membuat gambar slider di Blogger.


Manfaat Gambar Slider untuk Website atau Blog?

Jika anda belum paham, ketahui keuntungan atau benefit dalam memasang efek slider gambar di blog bisa memiliki beberapa manfaat, di antaranya:

  • Tampilan yang Menarik: Gambar slider dapat menambah nilai estetika pada tampilan blog, serta menjadikan tampilan lebih menarik.
  • Lebih Memudahkan Pengunjung: Dengan penggunaan gambar slider, sebuah blog dapat menampilkan lebih banyak gambar dan informasi pada halaman yang sama. 
  • Menyampaikan Informasi Secara Efektif: Gambar slider memungkinkan blog untuk menyampaikan berbagai informasi dan pesan melalui gambar dan teks yang terintegrasi.
  • Meningkatkan Engagement: Penggunaan gambar slider dapat membantu meningkatkan engagement dan interaksi pengunjung dengan blog, sehingga dapat meningkatkan jumlah penonton dan pembaca.
  • Memperlihatkan Portofolio: Dengan memasukkan gambar portofolio dalam slider, itu dapat dengan mudah membawa pengunjung untuk melihat produk atau layanan yang ditawarkan, tanpa perlu bergeser ke halaman yang berbeda.

Namun, perlu diingat bahwa penggunaan gambar slider harus disesuaikan dengan tujuan dan isi dari blog, serta mempertimbangkan aspek kecepatan loading halaman, agar pengguna dapat mengakses halaman blog dengan lancar dan nyaman.


Langkah-Langkah Membuat Gambar Slider di Blogger

  1. Masuk ke akun Blogger Anda dan buat postingan baru atau halaman di mana Anda ingin menambahkan gambar slider. Disini saya menggunakan postingan sebelumnya pada "Tutorial Membuat Galeri Foto di Blogger".

  2. Selanjutnya Salin kode script untuk membuat efek Slidernya dibawah ini.

    /* Image Slider by www.ferisp.com */

    .sliderBox .sliderContainer{display:flex;width:100%;white-space:nowrap;flex-direction:row;overflow:auto;scroll-behavior:smooth}

    .sliderBox .sliderContent img{margin-right:20px;border-radius:3px;max-width:720px;max-height:225px;scroll-snap-align:start;box-shadow:0 0 10px 0 rgba(0,0,0,.2)}

    @media screen and (max-width:500px){.sliderBox .sliderContent img{width:300px}}

    ::-webkit-scrollbar{height:8px}

    ::-webkit-scrollbar-thumb,::-webkit-scrollbar-thumb:hover{background:#ccc;border-radius:50px}

    /* Dark Mode */

    .drK ::-webkit-scrollbar-thumb,.drK ::-webkit-scrollbar-thumb:hover{background:#666}

    </style>


    <div class="sliderBox">

      <div class="sliderContainer">

        <!--Gambar 1-->

        <div class="sliderContent">

          <a href="#" target="_blank"><img alt="#" src="URL Gambar" title="#" /></a>

        </div>

        <!--Gambar 2-->

        <div class="sliderContent">

          <a href="#" target="_blank"><img alt="#" src="URL Gambar" title="#" /></a>

        </div>

        <!--Gambar 3-->

        <div class="sliderContent">

          <a href="#" target="_blank"><img alt="#" src="URL Gambar" title="#" /></a>

        </div>

       

        <!--Tambahan slider-->

      </div>

    </div>

  3. Kemudian beralih mode postingan ke "Tampilan HTML" dan Tempel kode script didalamnya.

  4. Silahkan letakkan kode sesuai kebutuhan, ganti teks bertuliskan "URL Gambar" untuk menampilkan gambar atau foto yang mau diberi efek slidernya.

  5. Anda bisa menambah jumlah gambar slider dengan menyalin kode seperti berikut.

    <!--Gambar 3-->

        <div class="sliderContent">

          <a href="#" target="_blank"><img alt="#" src="URL Gambar" title="#" /></a>

        </div>

  6. Jika sudah, klik Publikasikan dan lihat postingan blog Anda.
    Hasilnya: source code ferisp.com


Catatan: Setelah Anda menambahkan kode HTML ke postingan atau halaman Anda, Pritinjau atau lihat postingan yang Anda tambahkan gambar slider. Jika semuanya berfungsi dengan baik, Anda akan melihat gambar slider dengan efek yang menarik di halaman atau postingan Anda.

Selain itu Anda bisa membuat gambar slider menggunakan layanan pihak ketiga. Ada banyak layanan pihak ketiga yang dapat Anda gunakan untuk membuat gambar slider, seperti Slider Revolution, Smart Slider 3, atau Soliloquy. Anda dapat memilih layanan yang paling sesuai dengan kebutuhan Anda.


Akhir Kata

Membuat gambar slider di Blogger adalah cara yang mudah dan efektif untuk meningkatkan tampilan blog Anda. Dengan mengikuti langkah-langkah di atas, Anda dapat dengan mudah menambahkan gambar slider dengan efek yang menarik ke blog Anda. 

Jangan ragu untuk mencoba berbagai layanan yang menyediakan efek gambar slider untuk postingan blog Anda dan menyesuaikan tampilan gambar slider Anda untuk mencocokkan gaya blog Anda. Terima kasih sudah berkunjung dan Selamat mencoba!

Posting Komentar

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.