Membuat Slider yang Elegan dan Simple di Blogspot

BungMais.com
Des 24, 2021
Slider atau yang juga sering disebut slideshow adalah informasi yang berjalan atau sliding di blog atau website. Slider pada dasarnya untuk menampilkan informasi utama yang tertuang dalam sebuah konten blog.

Karena untuk kenyamanan pengunjung, tampilan slider juga menjadi penting diperhatikan. Jika menampilkan slider dengan asal-alasan bukan tidak mungkin akan merusak estetika sebuah website. Olehnya, dibutuhkan tema slider yang sesuai dengan template yang digunakan.

Pada tutorial kali ini, bloGoooblok akan memaparkan cara membuat slider yang elegan dan simple untuk blogspot. Lihat contohnya pada demo dibawah ini:

  • Membuat Popular Post di Blogspot Lebih Ramping)

    Slider ini memiliki fitur menampilkan gambar otomatis dengan efek geser dilengkapi judul dan deskripsi / keterangan, juga memiliki navigasi menggunakan persegi / titik untuk memberikan pada pengunjung agar dapat memilih konten lebih mudah dengan melompat langsung untuk setiap slide.

    Slider Geser akan berhenti secara otomatis ketika mouse hover dan ini dikonfigurasi dalam kode Script.

    Cara Membuat Slider yang Elegan dan Simple di Blogspot

    Slider ini dibuat dari beberapa baris HTML sederhana dan jika Anda memiliki pengetahuan dasar CSS, maka Anda dapat menyesuaikan atau memodifikasi seperti yang Anda inginkan, dan memang benar-benar dapat dimodifikasi sehingga terlihat lebih bagus.

    Jika tertarik untuk membuatnya, maka ikuti langkah-langkah berikut ini:
    • Pertama-tama masuk ke dasboard blogspot Anda, lalu pilih Template, Edit HTML. Cari kode ]]> atau  di bagian head template. Setelah ketemu (gunakan Ctrl F) copy lalu paste script berikut tepat diatasnya.
    .easyslider-wrapper { 
        width: auto; 
        float: left; 
        position: relative; 
        padding-right: 2%; 
        padding-top: 10px; 
        }
    .easyslider { 
        overflow: hidden; 
        position: relative; 
        width: 100%; 
        height: 350px; 
        background: #eee; 
        }
    .image_reel { 
        position: absolute; 
        top: 0; 
        left: 0; 
        }
    .image_reel img { 
        float: left; 
        width: 20%; 
        height: 350px;
        }
    .paging { 
        background: none; 
        position: absolute; 
        bottom: 15px; 
        right: 20px; 
        padding:4px 0 2px; 
        z-index: 100; 
        display: none; 
        }
    .paging a { 
        margin: 3px; 
        background: #fff; 
        width: 10px; 
        height:10px; 
        display: inline-block; 
        border: none; 
        outline: none;
        }
    .paging a.active { 
        background: #15E3FF; 
        border: 1px solid #15E3FF; 
        }
    .paging a:hover { }
    .easytitledes { 
        width:70%; 
        display: none; 
        position: absolute; 
        bottom: 20px; 
        left: 20px; 
        z-index: 101; 
        background: #000A3F;
        background: rgba(2, 0, 51, 0.6); 
        padding: 10px 15px; 
        }
    .easytitledes a { 
        color: #15E3FF; 
        font: 14px sans-serif; 
        text-transform: uppercase; 
        font-weight: bold; 
        }
    .easytitledes a:hover { 
        color:#29FF00 
        }
    .easytitledes p { 
        color: #fff; 
        font: 12px Arial; 
        }
    • Masih disekitar head, masukan kode Jquery berikut ini tepat diatas . Namun jika template Anda sudah pernah memasang Jquery dalam versi yang lain, baik itu versi lama, lupakan saja langkah ini. Langsung ke langkah selanjutnya
  • Untuk memasang kode HTML slider, ada cara yang bisa ditempuh. Secara manual atau otomatis. Manual artinya, isi slider nantinya akan diisi sendiri, sedangkan secara manual, isi slider akan ikut berdasarkan postingan terbaru.
    • Menggunakan Slider Secara Manual
Masukan kode berikut di bagian dalam HTML body blog Anda, contoh setelah atau dibawah kode
atau
atau baris kode yang sejenis atau mirip, karena struktur setiap Blog memiliki nama yang berbeda-beda.

Karena saya menggunakan template standar dari blogspot yang terbaru, kode itu saya tempatkan dibawah kode
. Itu karena saya ingin slider tersebut sejajar dengan kolom postingan. Jika Anda tertarik melakukan hal yang sama, letakkan kode berikut dibawah  
yang pertama.



   

...image1.jpg" />
...image2.jpg" />
...image3.jpg" />
..image4.jpg" />
...image5.jpg" />
   

   

Post-Title 1

Description / Caption 1


Post-Title 2

Description / Caption 2


Post-Title 3

Description / Caption 3


Post-Title 4

Description / Caption 4


Post-Title 5

Description / Caption 5


   

   






   



Catatan: 
Kode berwarna merah adalah untuk link image atau gambar, Biru untuk link Url posting atau artikel, Wanah hijau untuk Title atau Judul, dan Orange untuk deskripsi. Semuanya dimasukan satu persatu ke dalam baris kode HTML.
    • Menggunakan Slider dengan Otomatis Publish Artikel Terbaru
Jika Anda ingin menggunakan slider tanpa harus susah-susah mengisi link dan artikelnya secara manual, maka ikuti langkah-langkah memasang slider secara otomatis berikut ini:

Pertama-tama, tambahan kode JavaScript berikut ini sebelum atau diatas kode , kode inilah yang akan untuk menampilkan artikel terbaru secara otomatis.


Catatan: 
Kode warna Merah adalah link image/gambar yang tampil jika dalam suatu artikel tidak ada gambarnya, sebaiknya anda mengganti link ini dengan link image anda sendiri, supaya pemakaian tidak terbagi-bagi dengan orang lain.

Masukan kode berikut disuatu bagian dalam body template, contoh sesudah/dibawah
atau yang sejenis. Seperti diatas, saya memasang kode ini dibawah kode
yang pertama agar slider sejajar dengan postingan.
Kode yang diberi warna merah adalah baris kode pembuka dan penutup untuk menampilkan slider hanya di homepage saja. Jadi slider tidak akan tampil disemua halaman blog. Hanya ketika seseorang melihat homepage atau beranda, slider ini tampil

Mengenal dan Cara Membuat Layanan Subscribe)

Jika semua berjalan baik dan lancar maka, saat ini blog Anda sudah memiliki slider sederhana nan elegan. Mudah bukan!. Jika masih ada yang perlu ditanyakan, silahkan mengisi kolom komentar dibawah ini. Terima kasih, semoga bermanfaat.

BungMais.com

BungMais.com

BungMais.com adlah website yang membagikan informasi berkualitas baik dalam hal konten dan diskusi yang telah disiapkan oleh tim editorial kami seperti, Tutorial Blogspot, Tutorial Wordpress, Google Adsense, Youtube, SEO, Belajar HTML, Bisnis Online, Traveling, Bank Soal dan Blogger Untuk Pemula

Next Post Previous Post
No Comment
Add Comment
comment url