Kategori

Monday, May 23, 2016

Featured Image Slider Otomatis For Blogger

 


Slider Image akan muncul otomatis dari Posting Terbaru. Jadi, pastikan gambar ilustrasi posting terbaru Anda "pas" dengan "content area" di halaman depan:

demo

Cara Memasang Featured Image Slider Otomatis For Blogger 1

1. Template > Edit HTML
2. Copas kode berikut ini di atas kode </head>

<!-- Automatic Latest/Recent Post Slider For Blogger Start-->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/>
<script src='http://accordion-template.googlecode.com/svn/trunk/easySlider1.7.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$("#slider").easySlider({
auto: true,
continuous: true
});
});
//]]>
</script>
<script style='text/javascript'>
//<![CDATA[
var showpostthumbnails_gal  = true;
var showpostsummary_gal   = true;
var random_posts       = false;
var numchars_gal = 150;
var numposts_gal = 10;
var img_width    = 550;
var img_height    = 250;
function showgalleryposts(json) {
 var numPosts = json.feed.openSearch$totalResults.$t;
 var indexPosts = new Array();
 document.write('<ul>');
 for (var i = 0; i < numPosts; ++i) {
 indexPosts[i] = i
 }
 if (random_posts == true) {
 indexPosts.sort(function() {
 return 0.5 - Math.random()
 })
 }
 if (numposts_gal > numPosts) {
 numposts_gal = numPosts
 }
 for (i = 0; i < numposts_gal; ++i) {
 var entry_gal = json.feed.entry[indexPosts[i]];
 var posttitle_gal = entry_gal.title.$t;
 for (var k = 0; k < entry_gal.link.length; k++) {
 if (entry_gal.link[k].rel == 'alternate') {
 posturl_gal = entry_gal.link[k].href;
 break
 }
 }
 if ("content" in entry_gal) {
 var postcontent_gal = entry_gal.content.$t
 }
 s = postcontent_gal;
 a = s.indexOf("<img");
 b = s.indexOf("src=\"",a);
 c=s.indexOf("\"", b + 5);
 d = s.substr(b + 5, c - b - 5);
 if ((a != -1) && (b != -1) && (c != -1) && (d != "")) {
 var thumburl_gal = d
 } else var thumburl_gal = 'http://i1133.photobucket.com/albums/m596/abu-farhan/Images_no_image.gif';
 document.write('<li><div id="slide-container"><span class="slide-desc"><a href="' + posturl_gal + '"><h2 style="margin:10px 0px;">');
 document.write(posttitle_gal + '</h2></a>');
 var re = /<S[^>]*>/g;
 postcontent_gal = postcontent_gal.replace(re, "");
 if (showpostsummary_gal == true) {
 if (postcontent_gal.length < numchars_gal) {
 document.write(postcontent_gal);
 document.write('</span>')
 } else {
 postcontent_gal = postcontent_gal.substring(0, numchars_gal);
 var quoteEnd_gal = postcontent_gal.lastIndexOf(" ");
 postcontent_gal = postcontent_gal.substring(0, quoteEnd_gal);
 document.write(postcontent_gal + '...');
 document.write('</span>')
 }
 }
 document.write('<a href="' + posturl_gal + '"><img src="' + thumburl_gal + '" width="' + img_width + '" height="' + img_height + '"/></a></div>');
 document.write('</li>')
 }
 document.write('</ul>')
}
//]]>
</script>
<style type='text/css'>
#slide-container {position: relative;height: 250px;width: 550px;font-family: calibri;}
.slide-desc {background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi19Xs8-G5IOxX-lxtkAEWyrPZ6wcPz96EqcTLzox4veoJztBDAICpQtUoxNHg6OLdeA5zngUwnec7dqNNlL8UUP6zChn4f6j8tPpTaQufCNDQMfTcdiOjY2uLah-hvnEIoVKpKHTwoDA/s5/darkbg.png) repeat scroll 0 0;color: #FFFFFF;padding: 5px;position: absolute;text-align: left;bottom: 0px;z-index: 99999;line-height:20px;}
.slide-desc h2 {display: block;}
#slider li {width: 550px;height: 250px;overflow: hidden;margin: 0;padding: 0;list-style: none;}
#prevBtn, #nextBtn {display: block;width: 30px;height: 77px;position: relative;left: -30px;text-indent: -9999px;top: -150px;z-index: 99999999;}
#nextBtn{left: 550px !important;top: -225px;}
#prevBtn a, #nextBtn a {display: block;position: relative;width: 30px;height: 77px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP_aQYVoBg0Vzgz-H-YFwRhKi5niRNm9dhQmtDSQWkmJKH4-2ch7qrfx7L_aaHfIseNlM1W6gQikyhNswDWFCJcq9eeFqc0igUN6DxdKEydtCBtWlDk6A5nWYUokVvGhHUWsZsP9lwgQ/s30/Left-Double-Black-Arrow.png) no-repeat 0 0;}
#nextBtn a {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh85Ubj9Xjjqk6ADbKsupkh-xFAA9Y3CLvDZVepQq34MO7FNsw75j55hga1QRckFwVXuE94uuTouoer3EE2LXoIs5WVonCoRJ4JQU1ZECDD_3mnHnNqGYRzeQzCNBZ2X2oKO9G7UeYdHg/s30/Right-Double-Black-Arrow.png) no-repeat 0 0;}
</style>
<!-- Automatic Latest/Recent Post Slider For Blogger End-->

3. Save Template!
4. Layout > Add a Gadget > pilih HTML/Javascript
5. Copas kode berikut ini:

<!-- Automatic Latest/Recent Post Slider For Blogger Start -->
<div id="slider"><script src="http://blogsmanado.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script></div>
<!-- Automatic Latest/Recent Post Slider For Blogger Start -->

6. Url http://blogsmanado.blogspot.com Ganti alamat blognya dan save dan lihat hasilnya.

Cara Memasang Featured Image Slider Otomatis For Blogger 2


 Yang dimaksud otomatis adalah kita gak perlu pasang satu per satu gambar, link, dan judul di widget ini. Gambar plus link dan judul akan muncul otomatis, bisa posting terbaru, bisa juga per label (kategori tertentu).
demo

 1. Template > Edit HTML

2. Copas kode berikut ini di atas kode </head>

 <!-- Automatic Latest/Recent Post Slider For Blogger Start-->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/>
<script src='http://accordion-template.googlecode.com/svn/trunk/easySlider1.7.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$("#slider").easySlider({
auto: true,
continuous: true
});
});
//]]>
</script>
<script style='text/javascript'>
//<![CDATA[
var showpostthumbnails_gal  = true;
var showpostsummary_gal   = true;
var random_posts       = false;
var numchars_gal = 150;
var numposts_gal = 10;
var img_width    = 550;
var img_height    = 250;
function showgalleryposts(json) {
 var numPosts = json.feed.openSearch$totalResults.$t;
 var indexPosts = new Array();
 document.write('<ul>');
 for (var i = 0; i < numPosts; ++i) {
 indexPosts[i] = i
 }
 if (random_posts == true) {
 indexPosts.sort(function() {
 return 0.5 - Math.random()
 })
 }
 if (numposts_gal > numPosts) {
 numposts_gal = numPosts
 }
 for (i = 0; i < numposts_gal; ++i) {
 var entry_gal = json.feed.entry[indexPosts[i]];
 var posttitle_gal = entry_gal.title.$t;
 for (var k = 0; k < entry_gal.link.length; k++) {
 if (entry_gal.link[k].rel == 'alternate') {
 posturl_gal = entry_gal.link[k].href;
 break
 }
 }
 if ("content" in entry_gal) {
 var postcontent_gal = entry_gal.content.$t
 }
 s = postcontent_gal;
 a = s.indexOf("<img");
 b = s.indexOf("src=\"",a);
 c=s.indexOf("\"", b + 5);
 d = s.substr(b + 5, c - b - 5);
 if ((a != -1) && (b != -1) && (c != -1) && (d != "")) {
 var thumburl_gal = d
 } else var thumburl_gal = 'http://i1133.photobucket.com/albums/m596/abu-farhan/Images_no_image.gif';
 document.write('<li><div id="slide-container"><span class="slide-desc"><a href="' + posturl_gal + '"><h2 style="margin:10px 0px;">');
 document.write(posttitle_gal + '</h2></a>');
 var re = /<S[^>]*>/g;
 postcontent_gal = postcontent_gal.replace(re, "");
 if (showpostsummary_gal == true) {
 if (postcontent_gal.length < numchars_gal) {
 document.write(postcontent_gal);
 document.write('</span>')
 } else {
 postcontent_gal = postcontent_gal.substring(0, numchars_gal);
 var quoteEnd_gal = postcontent_gal.lastIndexOf(" ");
 postcontent_gal = postcontent_gal.substring(0, quoteEnd_gal);
 document.write(postcontent_gal + '...');
 document.write('</span>')
 }
 }
 document.write('<a href="' + posturl_gal + '"><img src="' + thumburl_gal + '" width="' + img_width + '" height="' + img_height + '"/></a></div>');
 document.write('</li>')
 }
 document.write('</ul>')
}
//]]>
</script>
<style type='text/css'>
#slide-container {position: relative;height: 250px;width: 550px;font-family: calibri;}
.slide-desc {background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi19Xs8-G5IOxX-lxtkAEWyrPZ6wcPz96EqcTLzox4veoJztBDAICpQtUoxNHg6OLdeA5zngUwnec7dqNNlL8UUP6zChn4f6j8tPpTaQufCNDQMfTcdiOjY2uLah-hvnEIoVKpKHTwoDA/s5/darkbg.png) repeat scroll 0 0;color: #FFFFFF;padding: 5px;position: absolute;text-align: left;bottom: 0px;z-index: 99999;line-height:20px;}
.slide-desc h2 {display: block;}
#slider li {width: 550px;height: 250px;overflow: hidden;margin: 0;padding: 0;list-style: none;}
#prevBtn, #nextBtn {display: block;width: 30px;height: 77px;position: relative;left: -30px;text-indent: -9999px;top: -150px;z-index: 99999999;}
#nextBtn{left: 550px !important;top: -225px;}
#prevBtn a, #nextBtn a {display: block;position: relative;width: 30px;height: 77px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP_aQYVoBg0Vzgz-H-YFwRhKi5niRNm9dhQmtDSQWkmJKH4-2ch7qrfx7L_aaHfIseNlM1W6gQikyhNswDWFCJcq9eeFqc0igUN6DxdKEydtCBtWlDk6A5nWYUokVvGhHUWsZsP9lwgQ/s30/Left-Double-Black-Arrow.png) no-repeat 0 0;}
#nextBtn a {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh85Ubj9Xjjqk6ADbKsupkh-xFAA9Y3CLvDZVepQq34MO7FNsw75j55hga1QRckFwVXuE94uuTouoer3EE2LXoIs5WVonCoRJ4JQU1ZECDD_3mnHnNqGYRzeQzCNBZ2X2oKO9G7UeYdHg/s30/Right-Double-Black-Arrow.png) no-repeat 0 0;}
</style>

<!-- Automatic Latest/Recent Post Slider For Blogger End-->

 3. Save Template!
4. Layout > Add a Gadget > pilih HTML/Javascript

5. Copas kode berikut ini:

 <!-- Automatic Latest/Recent Post Slider For Blogger Start -->
<div id="slider"><script src="http://blogsmanado.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script></div>

<!-- Automatic Latest/Recent Post Slider For Blogger Start -->

 6. Url http://blogsmanado.blogspot.com Ganti alamat blognya dan save dan lihat hasilnya.

Berikutnya
Sebelumnya
Sebelumnya
Berikutnya
Unknown

Penulis: Unknown

Bagi Teman-teman Blog Manado: Tutorial Web Design yang ingin komentari artikel saya, diharapkan tidak disertai banyak link. Jika ada yang melakukan komentar disertai Link yang banyak, saya tidak akan mempublikasikan komentar tersebut. Terima Kasih Sudah berkunjung.

No comments:
Write komentar

Dapatkan update dalam kotak email Anda

Lengkapi formulir di bawah ini, dan kami akan mengirimkan update artikel terbaru.

Memberikan via FeedBurner
© Copyright 2016. Blog Manado : Tutorial Web Design