Cara Memasang Slider Gambar Otomatis Pada Blog

   Cara Memasang Slider Gambar Otomatis Pada Blog - Mungkin anda sudah bosan dengan cara menampilkan postingan itu-itu saja dan saat ini anda mencoba mencari sesuatu yang baru untuk mempercantik blog anda. Dalam berkarya kita memang diharuskan mencari inovasi baru agar kebosanan yang kita rasakan tidak ikut dirasakan oleh pengunjung.

   Ketika anda mencari sesuatu yang baru bagi perkembangan blog anda, secara tidak langsung kemampuan blogging anda akan terasah dengan sendirinya dan tentunya pengunjung merasakan juga hasil dari kemampuan anda tersebut. Pada postingan sebelumnya saya banyak memposting mengenai bagaimana cara menampilkan sekaligus mempromosikan artikel kita terhadap khalayak ramai baik itu melalui link sisipan pada suatu blog ataupun melalui media sosial. Setiap metode promosi yang kita pilih memiliki kelemahannya tersendiri.

   Sebelum saya memberikan tutorial kali ini saya ingin anda mengetahui kelemahan slider gambar terhadap blog anda. Anda mungkin sudah tahu bahwa semakin banyak gambar maka akan membuat loading blog anda bertambah lamban tapi di sisi lain kita bisa menghemat ruang blog agar lebih lenggang. Menurut saya terlalu banyak daftar postingan di blog kita akan membuat pengunjung semakin pusing terkecuali anda mampu menyusunnya dengan baik (tidak berantakan). Nilai positif lainnya adalah blog anda lebih terlihat atraktif dimata pengunjung. Anda tertarik memasang slider ini? baiklah buang sedikit nilai negatif untuk mendapatkan banyak nilai positif dari pemasangan slider gambar otomatis berikut.

Cara Memasang Slider Gambar Otomatis Pada Blog

1. Login ke akun Dasbor Blogger anda.

2. Masuk ke laman Edit Template.

3. Cari kode ]]></b:skin>

4. Letakkan Kode di bawah ini tepat di atas kode tersebut.

.s3slider { margin:0 auto 10px; border:3px solid black; background:#333 none no-repeat 50% 50%; -webkit-box-shadow:0 1px 3px rgba(0,0,0,.4),0 7px 10px -3px rgba(0,0,0,.4); -moz-box-shadow:0 1px 3px rgba(0,0,0,.4),0 7px 10px -3px rgba(0,0,0,.4); box-shadow:0 1px 3px rgba(0,0,0,.4),0 7px 10px -3px rgba(0,0,0,.4); position:relative; overflow:hidden;}.s3slider.loading { background-image:url(' '); text-indent:-9999px;}.s3slider-content,.s3slider-content li { position:absolute; top:0; right:0; bottom:0; left:0; margin:0; padding:0; list-style:none; overflow:hidden;}.s3slider-content li { position:static; display:none;}.s3slider-content img { display:block; width:100%; height:100%; max-width:none; max-height:none; border:none; outline:none; padding:0; margin:0;}.s3slider-caption { position:absolute; right:0; bottom:0; left:0; height:auto; font:normal normal 13px/normal Helmet,Freesans,Sans-Serif; color:white; background-color:black; opacity:.8; filter:alpha(opacity=80); padding:17px 20px 20px; display:none;}.s3slider-title,.s3slider-meta {display:block}.s3slider-title a { font-size:110%; font-weight:bold; color:white; text-decoration:none;}.s3slider-title a:focus,.s3slider-title a:hover {text-decoration:underline}.s3slider-meta-comment:before {content:" - "} Langkah selanjutnya, masuk ke menu "tata letak" dan masukan kode dibawah ini di widget HTML/JavaScript, pilih letak yang sesuai misalnya di atas postingan.

5. Simpan setelan Template lalu lanjut masuk ke laman Tata Letak.
6. Pilih tambahkan widget "Add Gadget".
7. Letakkan kode berikut didalamnya.

<div id="s3slider-container"> <div class="s3slider loading" style="width:420px;height:270px;"> Memuat... </div> </div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><script>var s3slider_config = { url: 'http://www.margopblogger.blogspot.co.id', numPost: 6, labelName: null, monthArray: [ "Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember" ], noImage: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC', newTabLink: false, containerId: 's3slider-container', slider: { width: 420, height: 270, timeOut: 5000 }};</script><script src="https://sites.google.com/site/jquerymargop/jquery-js/margopni.js"></script>

8. Simpan Setelan dan lihat hasilnya.


Note:

• Ganti kode url: 'http://www.margopblog.blogspot.com', dengan alamat anda sendiri.
• Atur Tinggi dan lebar pada property Height dan Width sesuai keinginan anda sendiri.

Sekian Tutorial singkat kali ini, jika ada yang ingin ditanyakan silahkan poskan di komentar Mudah-mudahan saya siap membantu.

Tweet

Postingan terkait:

Ditulis Unknown — Friday, April 29, 2016 — Add Comment — Tutorial Blog