 |
| Credit img: freepik.com |
Apakah anda ingin tampilan blog anda lebih menarik?
Bila anda ingin memasang atau membuat widget slide show secara horizontal agar membuat tampilan blog anda lebih menarik, Nah di sini tempat postingan yang paling tepat untuk membuat widget dengan efek slide show secara horizontal dengan menggunakan Thumbnail. Langsung saja ya saya berikan hasilnya nanti seperti ini :
Cara membuatnya cukup mudah yaitu:
Copy pastekan code di bawah ini di tambah gadget Html/ Java script
<style>
/* Elastislide Style */
.es-carousel-wrapper{ background: #101010; padding:10px 37px; -moz-border-radius: 10px;-webkit-border-radius: 10px; border-radius: 10px; position:relative;}
.es-carousel{ overflow:hidden; background:#000;}
.es-carousel ul{ display:none;}
.es-carousel ul li{ height:100%; float:left; display:block;}
.es-carousel ul li a{ display:block; border-style:solid; border-color:#222;}
.es-carousel ul li a img{ display:block; border:none; max-height:100%; max-width:100%;}
.es-nav span{ position:absolute; top:50%; left:12px; background:transparent url(http://3.bp.blogspot.com/-C2VgY35Z-Cg/T0pFL1jGQMI/AAAAAAAAAmw/OWe5BvaFDfA/s1600/nav.png) no-repeat top left; width:14px; height:26px; margin-top:-13px; text-indent:-9000px;
cursor:pointer; opacity:0.8;}
.es-nav span.es-nav-next{ right:12px; left:auto; background-position:top right;}
.es-nav span:hover{ opacity:1.0;}
</style>
<div class="es-carousel-wrapper" id="carousel">
<div class="es-carousel">
<ul>
<li>
<a href="URL OF THE PAGE">
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQQMZtVA650-zio2rkJH-738ZK40zi9yhnnXzyjzmyA7uFIYJZLg4OwhKm-t_W7zLlarb8HWllPRfQ5V5cL9JMMeiiSrtpRNgYkxtS5vPF2kWozEEGZdVCwuwVkOO9k7ywoTiSk-kQ3PFj/s1600/bubble-safari.jpg" style="margin-left: auto; margin-right: auto;" /></td></tr>
<tr style="color: white;"><td class="tr-caption" style="text-align: center;">Add caption</td></tr>
</tbody></table>
</a>
</li>
</ul>
</div></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript">
</script>
<script src="http://blogtipsntricks.googlecode.com/files/jquery.easing.1.3.js" type="text/javascript">
</script>
<script src="http://blogtipsntricks.googlecode.com/files/jquery.elastislide.js" type="text/javascript">
</script>
<script type="text/javascript">
$('#carousel').elastislide({
imageW : 180,
minItems : 5
});
</script>
Ganti kode yang berwarna biru sesuai dengan Url gambar anda, kode yang berwarna ungu ganti sesuai dengan warna kesukaan anda, untuk warna merah ganti dengan alamat Url yang ingin dituju dan yang berwarna hijau adalah jumlah post yang ingin ditampilkan.
Selanjutnya simpan.
