Cara Membuat Slideshow Latar Belakang Blog

Cara Membuat Slideshow Latar Belakang Blog yaitu gambar Background Blogger benar-benar akan berubah berulang-ulang dan itu menarik perhatian pengunjung dengan uniknya blog sobat. Sudah banyak situs yang menawarkan template gratis dengan latar belakang beragam namun terkadang tidak sesuai selera kita. Tapi apakah sobat pernah berpikir untuk menambahkan Slideshow Blogger menjadi latar belakang? Itu mungkin dengan jQuery plug-in yang dikenal sebagai Backstretch membantu Anda membuat latar belakang slideshow tanpa kehilangan dimensi layar blog sobat.
Sobat dapat memeriksa jQuery plug-in ini, Backstretch beraksi sebagai demo live ini, klik: Demo Blog dan melihat menyelinap dan mengintip dari hasilnya.

Sedikit melewati Gambar Hidup dalam Demo tersebut, mari kita memahami bagaimana animasi itu harus dilihat dalam blog sobat. Juga jangan lupa untuk melihat beberapa gambar yang berubah dengan dampak memudar melibatkan setiap transisi tunggalnya.
-Masuk Dashboard »Template
-Backup Blogger Template sebelum Anda menyesuaikan
-Klik tab Edit HTML
-Tekan Ctrl + F dan cari kode </ head>
-Copypaste kode di bawah tepat di atas / sebelum </ head> [menggunakan Ctrl + F untuk menemukan kode].

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/> <script> //<![CDATA[ /* * jQuery Backstretch * Version 1.2.8 * http://srobbin.com/jquery-plugins/jquery-backstretch/ * Add a dynamically-resized background image to the page * Copyright (c) 2012 Scott Robbin (srobbin.com) * Licensed under the MIT license * https://raw.github.com/srobbin/jquery-backstretch/master/LICENSE.txt */ ;(function(a) { a.backstretch=function(p,b,l){function s(){if(p){var b;0==c.length?c=a("<div /> ").attr("id","backstretch").css({left: 0,top:0,position:m?"fixed":"absolute",overflow:"hidden",zIndex:-999999,margin:0,padding:0,height:"100%",width:"100%"; }):c.find("img").addClass("deleteable");b=a("<img />").css( { position: "absolute",display:"none",margin:0,padding:0,border:"none",zIndex:-999999,maxWidth:"none"; }).bind("load",function(d) { var b=a(this),e;b.css({width: "auto",height:"auto"; }); e=this.width||a(d.target).width();d=this.height||a(d.target).height();n=e/d;q();b.fadeIn(g.speed,function() { c.find(".deleteable").remove();"function"==typeof l&&l(); })}).appendTo(c);0==a("body #backstretch").length&&(0===a(window).scrollTop()&&window.scrollTo(0,0),a("body").append(c));c.data("settings",g);b.attr("src",p);a(window).unbind("resize.backstretch").bind("resize.backstretch",function() { "onorientationchange" in window&&window.pageYOffset===0&&window.scrollTo(0,1);q(); })}} function q() { try{j={left: 0,top:0; },rootWidth=h=o.width(),rootHeight=r?window.innerHeight:o.height(),f=h/n,f>=rootHeight?(k=(f-rootHeight)/2,g.centeredY&&(j.top="-"+k+"px")):(f=rootHeight,h=f*n,k=(h-rootWidth)/2,g.centeredX&&(j.left="-"+k+"px")),c.css( { width: rootWidth,height:rootHeight; }).find("img:not(.deleteable)").css( { width: h,height:f; }).css(j); } catch(a) { }} var t= { centeredX: !0,centeredY:!0,speed:0; },c=a("#backstretch"),g=c.data("settings")||t;c.data("settings");var o,m,r,n,h,f,k,j;b&&"object"==typeof b&&a.extend(g,b);b&&"function"==typeof b&&(l=b);a(document).ready(function() { var b=window,d=navigator.userAgent,c=navigator.platform,e=d.match(/AppleWebKit\/([0-9]+)/),e=!!e&&e[1],f=d.match(/Fennec\/([0-9]+)/),f=!!f&&f[1],g=d.match(/Opera Mobi\/([0-9]+)/),h=!!g&&g[1],i=d.match(/MSIE ([0-9]+)/),i=!!i&&i[1];o=(m=!((-1<c.indexOf("iPhone")||-1<c.indexOf("iPad")||-1<c.indexOf("iPod"))&&e&&534>e||b.operamini&&"[object OperaMini]"==={ } .toString.call(b.operamini)||g&&7458>h||-1<d.indexOf("Android")&&e&&533>e||f&&6>f||"palmGetResource"in window&&e&&534>e||-1<d.indexOf("MeeGo")&&-1<d.indexOf("NokiaBrowser/8.5.0")||i&&6>=i))?a(window):a(document);r=m&&window.innerHeight;s(); }); return this; }})(jQuery); //]]> </script>

Dan

<script> //<![CDATA[ var images = [ "Image Link URL", "Image Link URL", "Image Link URL", "Image Link URL", "Image Link URL", ]; $(images).each(function() { $('<img/>')[0].src = this; }); var index = 0; $.backstretch(images[index], { speed: 1000; }); var slideshow = setInterval(function() { index = (index >= images.length - 1) ? 0: index + 1; $.backstretch(images[index]); },5000); //]]> </script>

Image Link URL: Tambahkan URL dari gambar yang Anda sukai untuk menjadi latar belakang blog Anda. Anda juga dapat menambahkan lebih banyak gambar yang Anda menuntut hanya setelah gambar var = [baris lain seperti ini: "Image Link URL",

Harap dicatat: Gambar yang telah Anda tambahkan ke slide tidak dilihat secara acak dan jika Anda punya preferensi untuk urutan acak, cukup mengganti bagian kode di atas dengan potongan kode berikut ini.

<script> //<![CDATA[ var images=new Array(); images[ 1 ]="Image link URL"; images[ 2 ]="Image link URL"; images[ 3 ]="Image Link URL"; images[ 4 ]="Image Link URL"; images[ 5 ]="Image Link URL"; Array.prototype.shuffle = function() { var len = this.length; var i = len; while (i--) { var p = parseInt(Math.random()*len); var t = this[i]; this[i] = this[p]; this[p] = t; } }; images.shuffle(); $(images).each(function() { $('<img/>')[0].src = this; }); var index = 0; $.backstretch(images[index], { speed: 1000; }); var slideshow = setInterval(function() { index = (index >= images.length - 1) ? 0: index + 1; $.backstretch(images[index]); },5000); //]]> </script>

Sebuah LSO Anda dapat menambahkan lebih banyak gambar seperti gambar [6] = "URL Gambar Link"; gambar [7] = "link URL Gambar"; gambar [8] = "Image Link URL"; dll ... Hanya peduli nomor berturut-turut. Dan 5000 mengacu pada durasi setiap gambar pada akhir script.
Somoga bermanfat untuk mempercantik blog sobat.

Sumber: labstrikes.blogspot.co.id