Cara Membuat Slideshow di Blogger Keren - Slideshow biasanya di gunakan untuk menampilkan beberapa gambar dan keterangan sebuah informasi. Sebuah slideshow di blog biasanya akan menampilkan beberapa artikel dan gambar dari artikel tersebut. Pada tutorial kali ini, ane akan menunjukkan cara menciptakan slideshow di blogger dan pastinya keren.
Cara Membuat Slideshow di Blogger Keren
Slideshow ini dapat kita atur secara manual dan otomatis, bila Anda ingin secara manual, Anda harus memasukan beberapa link biar postingan dan tampilan gambar dapat muncul secara maksimal. Namun bila Anda ingin menampilkan slideshow ini secara otomatis Anda hanya harus memasukan script code saja.
- Langkah pertama masuk ke akun Blogger
- Pilih sajian Tema, pilih Edit HTML
- Terus cari arahan ]]></b:skin> atau </style> letakkan arahan dibawah diatas arahan tersebut.
.easyslider-wrapper {
width: auto;
float: left;
position: relative;
padding-right: 2%;
padding-top: 10px;
}
.easyslider {
overflow: hidden;
position: relative;
width: 98%;
height: 290px;
background: #eee;
}
.image_reel {
position: absolute;
top: 0;
left: 0;
}
.image_reel img {
float: left;
width: 20%;
height: 350px;
}
.paging {
background: none;
position: absolute;
bottom: 15px;
right: 20px;
padding:4px 0 2px;
z-index: 100;
display: none;
}
.paging a {
margin: 3px;
width: 10px;
height:10px;
display: inline-block;
border: none;
outline: none;
border: 2px solid #fff;
border-radius: 10px;
}
.paging a.active {
background: #0b84cb;
border: 2px solid #fff;
border-radius: 10px;
}
.paging a:hover { }
.easytitledes {
width: 70%;
display: none;
position: absolute;
bottom: 20px;
left: 20px;
z-index: 101;
background: #000A3F;
background:rgba(0,0,0,0.7);
padding: 10px 15px;
border-radius: 10px;
}
.easytitledes a {
color: #fff;
font: 20px open sans;
text-transform: uppercase;
font-weight: bold;
}
.easytitledes a:hover {
color:#0b84cb;
}
.easytitledes p {
color: #fff;
font: 12px Arial;
}
- Cari arahan </head> masukin arahan di bawah ini di atasnya.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
- Kode </head>, masukin arahan di bawah ini pas di atasnya.
<script type="text/javascript">
$(document).ready(function() {
$(".paging").show();
$(".paging a:first").addClass("active");
var imageWidth = $(".easyslider").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;
$(".image_reel").css({'width' : imageReelWidth});
rotate = function(){ var triggerID = $active.attr("rel") - 1;
var image_reelPosition = triggerID * imageWidth;
$(".paging a").removeClass('active');
$active.addClass('active');
$(".easytitledes").stop(true,true).slideUp('slow');
$(".easytitledes").eq(
$('.paging a.active').attr("rel") - 1 ).slideDown("slow");
$(".image_reel").animate({left: -image_reelPosition}, 400 );
};
rotateSwitch = function(){
$(".easytitledes").eq( $('.paging a.active').attr("rel") - 1 ).slideDown("slow");
play = setInterval(function(){
$active = $('.paging a.active').next();
if ( $active.length === 0) {
$active = $('.paging a:first'); } rotate(); }, 4000); };
rotateSwitch(); $(".image_reel a, .easytitledes a").hover(function() {
clearInterval(play); }, function() { rotateSwitch();
});
$(".paging a").click(function() { $active = $(this);
clearInterval(play); rotate(); rotateSwitch(); return false;
});
});
</script>
- Langkah selanjutnya masih ada 2 cara pemasangan, mau manual atau otomatis terserah Anda.
Cara Memasang Manual - Anda cari arahan <div id='post-wrapper'>. Jika tidak ada coba Anda cari arahan <div class="main-wrapper"> atau <div id="main-wrapper">, Atau Anda cari arahan <div class='blog-posts hfeed'> terus masukin arahan di bawah ini pas di bawahnya.
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='easyslider'><div class='image_reel'>
<a href="#"><img src="Masukin-URL-gambar-disini.jpg" /></a>
<a href="#"><img src="Masukin-URL-gambar-disini.jpg" /></a>
<a href="#"><img src="Masukin-URL-gambar-disini.jpg" /></a>
<a href="#"><img src="Masukin-URL-gambar-disini.jpg" /></a>
<a href="#"><img src="Masukin-URL-gambar-disini.jpg" /></a>
</div><div class='descriptionslider'>
<div class="easytitledes"><a href='URL.html'>Judul</a><p>Deskripsi</p></div>
<div class="easytitledes"><a href='URL.html'>Judul</a><p>Deskripsi</p></div>
<div class="easytitledes"><a href='URL.html'>Judul</a><p>Deskripsi</p></div>
<div class="easytitledes"><a href='URL.html'>Judul</a><p>Deskripsi</p></div>
<div class="easytitledes"><a href='URL.html'>Judul</a><p>Deskripsi</p></div>
</div>
<div class='paging'>
<a class='' href='#' rel='1'/><a class='' href='#' rel='2'/>
<a class='' href='#' rel='3'/><a class='' href='#' rel='4'/>
<a class='' href='#' rel='5'/>
</div>
</div>
</b:if>
Keterangan: - Masukin-URL-gambar-disini.jpg: Masukin URL gambar Anda disini.
- URL.html: Masukin URL artikel blog Anda disini.
- Judul: Masukin judul artikelnya disini.
- Deskripsi: Masukin deskripsi artikel Anda disni.
- Simpan Tema
Cara Memasang Otomatis - Cari arahan </head>, terus masukin arahan di bawah pas di atasnya.
<script type='text/javascript'>//<![CDATA[
imgr = new Array();imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoGd-VC1ufJV9UEWKmVEl4pztU8JSZH7_TtaL_9dPxk9NDCG3oxa9Zg_4kTRfRKIBttYyQxWvJMgyJGAbkv9OCSpBkdPc4CIxWKIxbZ1VKvyMQkWRrBaoZ9tZaQ0rNpHbONbK1ElJdA1w/s1600/no+image.jpg";showRandomImg = true;aBold = true;summaryPost1 = 150;summaryTitle = 20;numposts1 = 5;
function removeHtmlTag(strx,chop){var s = strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);}}s = s.join("");s = s.substring(0,chop-1);return s;}
function showrecentposts1(json) {j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0; img = new Array(); for (var i = 0; i < numposts1; i++) {var entry = json.feed.entry[i];var posttitle = entry.title.$t; var pcm; var posturl; if (i == json.feed.entry.length) break; for (var k = 0; k < entry.link.length; k++) {if (entry.link[k].rel == 'alternate') {posturl = entry.link[k].href; break; }}
for (var k = 0; k < entry.link.length; k++) {if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {pcm = entry.link[k].title.split(" ")[0]; break; }} if ("content" in entry) {var postcontent = entry.content.$t;} else if ("summary" in entry) { var postcontent = entry.summary.$t;} else var postcontent = ""; var trtd = '<div class="easytitledes"><a href="'+posturl+'">'+posttitle+'</a><p>'+removeHtmlTag(postcontent,summaryPost1)+'... </p></div>'; document.write(trtd); j++;}}
function showrecentposts2(json) { j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0; img = new Array(); for (var i = 0; i < numposts1 ; i++) { var entry = json.feed.entry[i]; var posttitle = entry.title.$t; var pcm; var posturl; if (i == json.feed.entry.length) break; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { posturl = entry.link[k].href; break; }}for (var k = 0; k < entry.link.length; k++) {if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') { pcm = entry.link[k].title.split(" ")[0]; break; }} if ("content" in entry) {var postcontent = entry.content.$t;}; if(j>imgr.length-1) j=0; img[i] = imgr[j]; s = postcontent ; 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!="")) img[i] = d; var trtd = '<a href="'+posturl+'"><img src="'+img[i]+'"/></a>'; document.write(trtd); j++;}}
//]]></script>
Keterangan: - Silahkan ganti URL gambar https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoGd-VC1ufJV9UEWKmVEl4pztU8JSZH7_TtaL_9dPxk9NDCG3oxa9Zg_4kTRfRKIBttYyQxWvJMgyJGAbkv9OCSpBkdPc4CIxWKIxbZ1VKvyMQkWRrBaoZ9tZaQ0rNpHbONbK1ElJdA1w/s1600/no+image.jpg dengan URL gambar yang Anda mau.
- Anda cari arahan <div id='post-wrapper'>. Jika tidak ada coba Anda cari arahan <div class="main-wrapper"> atau <div id="main-wrapper">, Atau Anda cari arahan <div class='blog-posts hfeed'> terus masukin arahan di bawah ini pas di bawahnya.
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='easyslider'>
<div class='image_reel'>
<script>
document.write("<script src=\"/feeds/posts/default?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts2\"><\/script>");
</script>
</div>
<div class='descriptionslider'>
<script>
document.write("<script src=\"/feeds/posts/default?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
</script>
</div>
<div class='paging'>
<a class='' href='#' rel='1'/>
<a class='' href='#' rel='2'/>
<a class='' href='#' rel='3'/>
<a class='' href='#' rel='4'/>
<a class='' href='#' rel='5'/>
</div>
</div>
</b:if><b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='easyslider'>
<div class='image_reel'>
<script>
document.write("<script src=\"/feeds/posts/default?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts2\"><\/script>");
</script>
</div>
<div class='descriptionslider'>
<script>
document.write("<script src=\"/feeds/posts/default?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
</script>
</div>
<div class='paging'>
<a class='' href='#' rel='1'/>
<a class='' href='#' rel='2'/>
<a class='' href='#' rel='3'/>
<a class='' href='#' rel='4'/>
<a class='' href='#' rel='5'/>
</div>
</div>
</b:if>
- Simpan tema
Demikian info perihal
Cara Membuat Slideshow di Blogger Keren. Maaf bila ada kekurangan, silahkan tambahkan beberapa kekurangan pada artikel di kolom komentar. Saya harap info ini bermanfaat.
Tidak ada komentar:
Posting Komentar