Tapike.com

Cara Membuat Slider Otomatis Di Blog

Cara Membuat Slider Otomatis Di Blog
Cara Membuat Slider Otomatis Di Blog - Pada kali kita akan membahas cara membuat slider otomatis blog atau membuat slideshow postingan di blog. Membuat slider otomatis di blog berfungsi untuk menampilkan gambar beserta judul dan deskripsi dari setiap postingan secara otomatis. Kita juga bisa memilih untuk hanya memunculkan postingan terbaru atau hanya postingan tertentu berdasarkan label pada slider otomatis blog. Membuat slider otomatis di blog juga bisa membuat blog lebih kelihatan elegan dan profesional. Bagi yg ingin membuat slider otomatis di blog, simak langkah berikut.

Demo

CSS Membuat Slider Otomatis

  • Login ke blogger.
  • Klik menu template.
  • Edit html.
  • Pastekan css slider otomatis blog berikut diatas ]]></b:skin>.
.tapike_slider { overflow: hidden; position: relative; width: 100%; height: 350px; background: #eee; } .slider { position: absolute; top: 0; left: 0; } .slider img { float: left; width: 20%; height: 350px; } .tapike_page { background: none; position: absolute; right: 20px; padding:4px 0 2px; z-index: 100; display: none; } .tapike_page a { margin: 3px; background: #333; width: 10px; height:10px; display: inline-block; border: none; outline: none; } .tapike_page a.active { background: #FF5848; border: 1px solid #FF5848; } .tapike_page a:hover { background: #FF5848; border: 1px solid #FF5848; } .tapike_slider_title { display: none; position: absolute; bottom: 0; z-index: 101; background: rgba(0, 0, 0, 0.6); padding: 5px 15px; } .tapike_slider_title a { color: #FF5848; font: 14px sans-serif; text-transform: uppercase; font-weight: bold; } .tapike_slider_title p { color: #fff; font: 12px Arial; }

Javascript Membuat Slider Otomatis

  • Login akun blogger.
  • Kliktemplate.
  • Klik edit html.
  • Pastekan script slider otomatis blog berikut diatas kode </head>.

HTML Membuat Slider Otomatis Blog

  • Login ke akun blogger.
  • Klik tata letak.
  • Klik tambahkan element/add gadget.
  • Lalu pilih HTML/Javasript.
  • Kemudian pastekan html slider otomatis blog berikut.

Pengaturan

Slider otomatis blog diatas hanya memunculkan postingan terbaru (recent post). Untuk membuat slider otomatis memunculkan label tertentu, ubah script pada kode html diatas seperti ini /feeds/posts/default/-/NAMA_LABEL?max-results. Script slider otomatis blog diatas menggunakan Jquery. Jika di blog belum ada jquery, letakkan kode jquery diatas head.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js' type='text/javascript'/>
Demikianlah tutorial membuat slider otomatis di blog atau membuat slideshow postingan di blog. Semoga artikel ini dapat bermanfaat bagi kita semua. Jangan lupa like dan share.
0 Comments Blogger
Disqus


Join This SiteInstagram