Recent Post Slider Thumbnail Responsive Horizontal

Blogger Slider sering merupakan widget yang berkaitan dengan blogger yang akan menampilkan posting terbaru Anda dari blog yang diinginkan masing-masing Anda memiliki antarmuka yang hebat dan indah. widget revisi ini secara rutin dan ada ada persyaratan untuk mengedit widget ini dan membuat gambar, judul dan juga deskripsi berulang kali. Anda hanya perlu menambahkan URL Anda dengan semua blog dan setup Anda akan menjadi lengkap. <! --more ->

Sekarang ada beberapa satu hanya tersedia dan tidak fitur yang ok untuk bekerja dengan mereka karena Anda perlu diwaspadai waktu pembukaan Anda sendiri juga jadi berpikir cermat sebelum menggunakan kode di web Anda yang akan membuat waktu pembukaan Anda tinggi konsekuensi SEO buruk. Tapi ini yang pertama adalah ringan dan memiliki untuk sekelompok melibatkan kode. Semua adalah sebagai berikut Anda Anda juga tidak perlu memukul salah URL orang. Sekarang melakukannya dan pakaian kode untuk bekerja dengannya.

Fitur:

1.) Pure JavaScript JQuery Ditambahkan.
2.) JQuery Berkas Ditambahkan.
3.) CSS Ditambahkan.
4.) Sederhana Dan Cepat Loading Code.
5.) Bisa Bekerja Dengan Any Browser.
6.) Bekerja Dengan Setiap Blogger Domain.
7.) Bisa Set The Post Hitung Too.
8.) Gaya Dalam Desain.
9.) Memuat Icon.
10.) Pilih Gambar, Text, Judul.

Cara Tambah Di Blogspot?

1.) Pergi Untuk Anda www.blogger.com
2.) Buka Keinginan Anda "Blog".
3.) Pergi Untuk "Layout".
4.) Klik "Add A Gadget" Di mana Anda Ingin Tambah Ini.
5.) Sekarang Gulir Untuk "HTML-JAVASCRIPT"
6.) Klik "+" Icon Tambah Ini.
7.) Sekarang "Copy" The bawah Kode Dan "Paste" It To Ada.
8.) Tinggalkan The "Judul" Empty.
9.) Klik "Simpan", Sekarang Anda Apakah Selesai.

CSS:

<style type="text/css">
#thumbnail-scroller {
 height:110px;
 position:relative;
 overflow:auto; width:90%; margin:0 auto;
}
#thumbnail-scroller:before,
#thumbnail-scroller:after {
 content:"";
 display:block;
 position:absolute;
 left:-4px;
 width:4px;
 height:100%;
 box-shadow:0 0 4px #000;
 z-index:10;
}#thumbnail-scroller:after {
 left:auto;
 right:-4px;
}
#thumbnail-scroller .container {
 width:300%;
 height:100px;
 position:absolute;
}
#thumbnail-scroller figure {
 display:block;
 float:left;
 width:100px;
 height:100px;
 position:relative;
 overflow:hidden;margin:0 5px 0 0;
}
#thumbnail-scroller figure img {
 display:block;
 border:none;
 width:100px;
 height:100px;
}
</style>

HTML:

<div id="thumbnail-scroller">
 <script type="text/javascript">
 //<![CDATA[
 var thumbnails = 30; 
 function showThumbs(json) {
 var entry = json.feed.entry,
 title, url;
 document.write('<div class="container">');
 for (var i = 0; i < thumbnails; i++) {
 for (var j = 0; j < entry[i].link.length; j++) {
 if (entry[i].link[j].rel == 'alternate') {
 url = entry[i].link[j].href;
 break;
 }
 }
 title = entry[i].title.$t;
 if ("media$thumbnail" in entry[i]) {
 img = entry[i].media$thumbnail.url.replace(/\/s72\-c/, "/s100-c");
 } else {
 img = "http://reader-download.googlecode.com/svn/trunk/images/no-image-72x72.png";
 }
 document.write('<figure><a href="' + url + '" title="' + title + '"><img src="' + img + '" alt="" /></a></figure>');
 }
 document.write('</div>');
 }
 //]]>
 </script>
 <script type="text/javascript" src="http://blogsmanado.blogspot.com/feeds/posts/summary?alt=json-in-script&callback=showThumbs"></script>
</div>

JavaScript:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
(function($) {
var config = {
 itemMargins: 5 // Distance between the thumbnails
 };
var $thumbnailScroller = $('#thumbnail-scroller'),
 $container = $thumbnailScroller.find('.container'),
 $item = $container.find('figure'),
 item_length = $item.length,
 item_width = $item.outerWidth(),
 item_margin = config.itemMargins,
 total_width = (item_width + item_margin) * item_length,
 $window = $(window);
$thumbnailScroller.css('overflow', 'hidden');
 $container.css('width', total_width);
$window.on("resize", function() {
 var o_l = $thumbnailScroller.offset().left,
 t_w = $thumbnailScroller.width(),
 c_w = total_width;
 $thumbnailScroller.on("mousemove", function(e) {
 if ($(this).width() < $container.width()) {
 $container.css('left', -((e.pageX - o_l) * (c_w - t_w) / t_w));
 }
 });
 }).trigger("resize");
})(jQuery);
</script>

1.) Mengedit HTML Anda & CSS Per Kebutuhan Anda. Jika Kurang memahami ikuti saja caranya disini.