-->
Headlines News :
Home » » cara membuat thumbnail slideshow horizontal diblog keren

cara membuat thumbnail slideshow horizontal diblog keren

Written By on Kamis, 27 Juni 2013 | 07.42

~sebenarnya banyak cara untuk meoptimalkan tampilan blog kita salah satunya yaitu memasang thumbnail recent post geser di blog kita. berikut langkah-langkah untuk memasang widgetnya.
Langkah-langkah yang harus kita kerjakan adalah sebagai berikut :
1. Login ke akun Blogger anda
2. Klik Rancangan kemudian klik Elemen halaman
3. Klik Tambah Gadget
4.  Pilih tamabah HTML/Javascript
5. stelah kotaknya terbuka, masukan kode dibawah ini dan simpan. kemudian Lihat hasilnya.!

<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/AVvXsEip3VO4IIdRu1wA0DBx4peBL0rtYg0vbpaeSDn_kfYZ4w_LpWmfu9N0JH9HFt2tMnwGQHvqMDcmzIGpDSknj32IgQskYHiAEr5Il3nmBhc2heIID7jagBhv_i0whyphenhyphen4_obtQ8M0nnTuDbZsc/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>

Informasi Scriptnya :

  1. Ganti kode warna Hijau dengan kode warna kesukaan anda
  2. Ganti tulisan berwarna Biru dengan URL OF THE PAGE milik anda
  3. Ganti URL yang berwarna Merah dengan URL gambar milik anda
  4. Ganti angka 5 yang berwarna Pink sesuai keinginan anda (angka 5 menunjukan jumlah gambar yang terlihat, tapi jumlah gambar yang akan tampil harus disesuaikan dengan lebar halam anda)
NB : Bagi blog yang sudah memiliki slide show recent post seperti thumbnail geser, maka widget ini tidak akan berfungsi.
Share this article :

Translate This Blog

Blogroll

PPC Iklan Blogger Indonesia

Blogger templates

PPC Iklan Blogger Indonesia

Follower

TRAFIC

planetittkj.blogspot.com Webutation
W3 Directory - the World Wide Web Directory

statistics

DMCA.com
INDONESIA BLOGGER
Protected by Copyscape Web Plagiarism Tool
PageRank for planetittkj.blogspot.com
My Ping in TotalPing.com
Google PageRank Checker

widgets
USA Backlinks Free Backlinks Service at USABacklinks.com!Auto Backlink Gratis Indonesia : Top Link IndoText Backlink Exchanges Backlink Gratis Berkualitas No.1 Indonesia

Page View

Sparkline 92660157
 
Support : Planet IT TKJ
Copyright © 2011. Planet IT TKJ - All Rights Reserved
Template Design by Muhammad Rafiansyah
Proudly powered by Blogger