Tutorial Blogspot

Tutorial Blogspot, SEO, HTML5, CSS3, Facebook, Twitter, Software, Game, Motivasi, Tips dan Trik

Select Menu
  • Home
  • Blogging
    • Tutorial Blogspot
    • CSS
    • jQuery
    • Widget
  • Tools
    • SEO
    • Template Blogger
    • HTML Encrypter
    • Code Color
    • Responsive Cek
  • Sitemap
  • About Me
  • Link Exchange
  • Pasang Iklan
  • Kontes SEO Template Premium
Home » jQuery » Slider with thumbnails For Blogger

Jumat, 05 September 2014

Slider with thumbnails For Blogger

Unknown
Add Comment
jQuery
Jumat, 05 September 2014



Ok sobat berikut ini adalah image slider lainnya yang dapat dibagikan oleh saya. Sebenarnya ada banyak macam slider seperti slider otomatis artikel terbaru yang sudah dibahas sebelumnya dan juga image slider dimana sobat harus memasukan gambar yang sobat inginkan ke dalam slider tersebut.

DEMO
( Di akhir Postingan )

Sobat dapat membuat tampilan template blog sobat menjadi lebih cantik dengan menggunakan slider-slider, ini untuk menambah daya tarik agar pengunjung tertarik untuk melihat gambar yang ditunjukan oleh slider tersebut.

jQuery Image Slider with Thumbnails

1. Blogger Dashboard > Layout > Add a Gadget
2. HTML/Javascript
3. Berikut adalah kodenya:

<style type="text/css">
.slider-box {
    background: none repeat scroll 0 0 #FAFAFA;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 0 3px #333333;
    margin: 0 auto;
    width: 675px;
overflow: hidden;
}
#slider-wrapper {
    margin: 0 auto;
    padding: 10px;
}
#jslider-container {
    border: 2px solid #FFFFFF;
    max-width: 550px;
    position: relative;
    text-align: left;
    z-index: 90;
}
</style>
<link href="http://project.dimpost.com/image-slider/wowslider/css/wow-slider.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="http://dimpost.googlecode.com/files/wow-slider.js"></script>
<div class="slider-box">
<div id="slider-wrapper">
<div id="jslider-container">
<div class="jslider_images">
      <ul>
<li><a href="http://templatepremium.blogspot.com/">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUrAUKLeJ9wTGBV1PYABwa8UEmSUPy6VtzM4JcO4ZyuuAtmKQgrlEyvVSDsOQoFHC_qgeUpBXWhnwDLPLcGSBfP6esw4b87QlocIS_W6iiz0SQK5i4yEcPjHqUptIaSN2RbUk1QN1RrvGI/s550/sample1.jpg" title="Sunset"/>
</a>A boat with beautiful sunset.</li>
<li><a href="#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCMV6JMLULWIBTJ6Lz08dNCBuGy5ZdKn6OLmFAsqObwa_kClIg-4La2-DpRRzv7V9nohinnAuagCkfJltSwH6XlJiQLFX5S0BGLMzxTH7PuyNmJvIOqPKTVMWed5z4MmC1ayezOJp7AR3R/s550/sample2.jpg" title="Rainbow"/>
</a></li>
<li><a href="#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1OPaAAdAEd61MZbPvHBnuhXdJ7T5izLd-jIm0N70KnbVk76IE1M16MXQ7PTZz7L6R4N16S7drWpri-xLta5Rp_M9zWRgEyqHvRJOqGqMnb-T01aQE1YnNo3hAKkh1LvFvRgg8Y-rnHs7f/s550/sample3.jpg" title="True Nature"/>
</a>Tree in field with blue sky.</li>
<li><a href="#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTWUfkHwjVCtPPATFWbk9PC8MY9OlafWHejgG8bo9G5ZTSmQTc5nwxBoXKOZk3Xi48ZzVp3ncdx2eUNr0a_pDa4f3KM_9rtA1XtgcMNvuXhAescWDMEl4DS_lhbdXhyphenhyphencusAtptdJaBWf8O/s550/sample4.jpg" title="Sunrise""/>
</a>Amaizing sunrise moment</li>
<li><a href="#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAhe89hJNvTpj26VmSBNlOwQw2MLx89zsTSiALwlN6WH7IDn_2IDXOXk_iFuAbiZr9pmWm4_xRHoF0IUqwMRch26DaQo_aqUki3g2Yomblq-WJfctADV6c64r_OZLkK9vIZS_vGQ-0Y8Df/s550/sample5.jpg" title="CAR in HDR Nature"/>
</a></li>
<li><a href="#">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOjRpnQrkNrHvUi1SUObA60QhIvs9UyuYVK7BUf6R660ZLXfXRJl3T75WJ7TF-LxpvzWI_pDnCH6rqlXH-ANI25bIXTD2tuZXWR2XXBf4EC4SDB2FIQF7q-BwpgUwQjgWo-AMZCxD4bvml/s550/sample6.jpg" title="Sunshine"/>
</a></li>
 </ul>
    </div>

<div class="jslider_thumbs">
        <div>
<a href="#" title="Sunset"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgj_tzIbIPjVTLOVTaVMvAd_uEY4FOPwIBW4vnq9bBLWaK3CQ18oKxuFbK0oGf1UZoNrh4EFcM2E4D8GheU17_teazxsq4iIxDtw10nN44ZaWhlp9xP2n_7IeifP6lnQ_F9mK9ardLXv2VM/s85/sample1.jpg"/></a>
<a href="#" title="Rainbow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZkFI3iBPIq5g7Nx641g5NuY9kGldow2xeqx-XsGMuYgpCAnh88q5J8RmU3P1eeLu2MzHy3AmEks_i8Ph_jHozDIdRxxxYMQDdi7Cxz3C7Ieqc9OnHGs8a3kvArJmhE78r3uGhiY-G4jUg/s85/sample2.jpg"/></a>
<a href="#" title="True Nature"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEip9AO__na0a4wlafLzAop6opyIs_6jNY9zYr2j0Uz4PnxJqLKVQN9mlekrijAMZ5jxHghcMvDxFX-pHzycGV-6t30U0kYMucpB92CjDu9ux4uNwIsOwm599tz5ja-eVo0kJkn_4Z0SBEFZ/s85/sample3.jpg"/></a>
<a href="#" title="Sunrise"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_oYvMqquYTxEGhN8tjA1erJANamZq47WEXYIR8fMv2CeWkCxb1KyS3b5fbCWKHboOJxUtYf7K7pJ3CzDT8VdIzDyLTGMqbkIeTA1x0nAKkVeYdFGtr882QJs9K_Q38dhKWBGda6TllTmE/s85/sample4.jpg"/></a>
<a href="#" title="CAR in HDR Nature"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFQEfLua5aruKgiayoQvtppQxkFId_oaZThToT4N8oV7TUu7qGwiK1efClrnO-cCqSSxok4CdnOetMqj1JHULYUBF8GU2t_8u1DT1CHvtXxJMtJztAnmEtP5IZsW5yWVkLc8LdGDtuXzCA/s85/sample5.jpg"/></a>
<a href="#" title="Sunshine"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUg_gWsk49wk46dr_vPnJM4rrmaaXfngjJN4mbkY3c-9wD4uQXTyCP2X3QPsbf_YF8C6wa9VM8o7gcl0gyPG43fyA3hzSzHWUdKEsTDcgbqhD5DWGWLsrwsmIaz5pqhe3_aaM-GQ4fS24n/s85/sample6.jpg"/></a>
        </div>
</div>

</div>
</div>
</div>


Simpan template dan lihat hasilnya di blog sobat. bagaimana sob? apakah sobat berhasil membuat slidernya? ok sob sekian untuk postingan saat ini dan jangan lupa lihat artikel terbaru http://templatepremium.blogspot.com/ yang lainnya. ok semoga bermanfaat.

LIVE DEMO :

  • A boat with beautiful sunset.
  • Tree in field with blue sky.
  • Amaizing sunrise moment
Suka Artikel? Bagikan: Facebook Twitter Google+

0 Comments

Berkomentarlah Dengan Sopan

Posting Lebih Baru Posting Lama Beranda
Langganan: Posting Komentar (Atom)

Statistik

Flag Counter

Label

  • Blogging
  • Css
  • jQuery
  • SEO
  • Template
  • Widget
Diberdayakan oleh Blogger.

Arsip Blog

  • ▼  2014 (41)
    • ▼  September (33)
      • Download Software Untuk Membuat Logo
      • Mengenal Google Sandbox dan Solusinya
      • Learning From Lost Link Opportunities
      • Cara Membuat Label Cloud Flat Keren
      • Responsive Jquery Modal Box
      • Google Tidak Menyukai Blog Spam dan Ini Cara Mengh...
      • 5 Cara Terbaik Membuat Pengunjung Berlama-lama di ...
      • Anizan Alternatif Google Adsense
      • Cara Menambahkan Tombol On Off Video Di Blogger
      • Template Blogger Thesisense SEO Friendly 2014
      • Jquery Image Crousel Slider For Blogger
      • Slider with thumbnails For Blogger
      • Cara membuat efek Rotasi + Shadow pada Gambar Blog
      • Tuama Minahasa Template Blogger Responsive
      • Sisense Blogger Template
      • Cara memasang Iklan Di Bawah Artikel/Postingan
      • Cara Proteksi CSS Menggunakan Base64
      • Daftar Peserta Kontes SEO TemplatePremium
      • Jenis Jenis Doctype
      • Template Minima Colored 2.1 Final
      • Cara Memasang Scroll Arsip/Archive Blog Dengan Mudah
      • Related Posts Blogger : 6 in 1
      • Auto ReadMore dengan Gambar tanpa Javascript
      • Membuat Demo JSFiddle di Blog dengan JQuery
      • Iklan Gambar ala Google AdSense
      • Jquery Image Tooltip
      • Banned Spammer di Komentar Blog
      • Random Post Fast Loading
      • Menampilkan Pesan Pada Jam Tertentu
      • Apa Itu Backlink
      • You Comment I Follow
      • Anime First Responsive Blogger Template
      • CSS Sprite
    • ►  Agustus (8)

Mengenai Saya

Unknown
Lihat profil lengkapku
Copyright 2014 Tutorial Blogspot - All Rights Reserved
Template by Dino Desain - Powered Blogger