Buat Slideshow Background Untuk Blogger

Dalam posting sebelumnya kita melihat bagaimana membuat latar belakang blog mengisi layar terlepas dari resolusi monitor . Metode yang akan kita gunakan sekarang dengan jQuery adalah sebuah plugin yang disebutBackstretch yang juga memiliki pilihan untuk membuat slideshow gambar sebagai wallpaper blog tanpa kehilangan milik menyesuaikan diri dengan lebar dan tinggi layar. 

Apa yang akan kita lakukan dalam entri ini hanya ini, cobalah untuk membuat latar belakang blog untuk memiliki beberapa gambar yang berubah, semua dengan efek fade antara setiap transisi. 

Anda dapat melihat contoh dalam demo blog . 

Untuk menempatkan slide ini di latar belakang blog, hanya pergi ke Template - Edit HTML dan sebelum </ head> tambahkan kode berikut: 

 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
<script>
/ / <! [CDATA [
/ *
* JQuery Backstretch
* Versi 1.2.8
* Http://srobbin.com/jquery-plugins/jquery-backstretch/
* Tambahkan gambar latar belakang dinamis ukurannya ke halaman
* Copyright (c) 2012 Scott Robbin (srobbin.com)
* Izin dibawah lisensi MIT
* 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 . l && l ()})}) appendTo (c); 0 == a ("tubuh window && window.pageYOffset === 0 && window.scrollTo (0,1); q ()})}} function o, m, r, n, h, f, k, j; b && "objek" == typeof b && a.extend (g, b); b && "fungsi" == typeof b && (l = b), sebuah (document) . ready (function () {var Mobi \ / ([0-9] +) /), h =! G && g [1], i = d.match (/ MSIE ini}}) (jQuery);
/ /]]>
</ Script>

 <script>
/ / <! [CDATA [
gambar var = [
"URL Gambar",
"URL Gambar",
"URL Gambar",
"URL Gambar",
"URL Gambar",
];

$ (Gambar). Masing-masing (function () {
. $ ('<img/>') [0] src = ini;
});
Indeks var = 0;
. $ Backstretch (gambar [index], {speed: 1000});
var slideshow = setInterval (function () {
Indeks = (index> = images.length - 1)? 0: index + 1;
. $ Backstretch (gambar [index]);
}, 5000);
/ /]]>
</ Script>

Berikut menambahkan URL dari gambar yang akan menjadi latar belakang blog Anda. 
Jika Anda ingin menambahkan lebih banyak gambar, tambahkan saja setelah gambar var = [baris lain seperti ini:

 "URL Gambar",

Gambar akan berubah dalam urutan yang Anda telah menambahkan mereka, jika Anda ingin ini untuk muncul dalam urutan acak, kemudian mengubah bagian kedua dari kode dengan ini: 

 <script>
/ / <! [CDATA [
gambar var = new Array ();
gambar [1] = "URL Gambar";
gambar [2] = "URL Gambar";
gambar [3] = "URL Gambar";
gambar [4] = "URL Gambar";
gambar [5] = "URL Gambar";

Array.prototype.shuffle = function () {
var len = this.length;
var i = len;
while (i -) {
var p = parseInt (Math.random () * len);
var t = ini [i];
ini [i] = ini [p];
ini [p] = t;
}
};

images.shuffle ();
$ (Gambar). Masing-masing (function () {
. $ ('<img/>') [0] src = ini;
});
Indeks var = 0;
. $ Backstretch (gambar [index], {speed: 1000});
var slideshow = setInterval (function () {
Indeks = (index> = images.length - 1)? 0: index + 1;
. $ Backstretch (gambar [index]);
}, 5000);
/ /]]>
</ Script>

Anda juga dapat menambahkan lebih banyak gambar dengan menambahkan baris seperti ini: 

 gambar [6] = "URL Gambar";

Tapi Anda akan melihat bahwa dalam kasus ini ada beberapa nomor berturut-turut dengan warna biru, jadi jika Anda tambahkan lagi seperti 6, maka yang berikutnya harus 7, dll. 

Dalam kedua kasus, Anda dapat mengubah durasi masing-masing gambar yang di 5000 nilai yang pada akhir script. 
Keuntungan dari slide ini di latar belakang blog adalah bahwa gambar secara otomatis diubah ukurannya dengan ukuran monitor, sehingga, tidak peduli dari resolusi, seharusnya terlihat baik. 

Perlu diingat bahwa jika Anda menggunakan Scriptaculous, Anda harus membuat beberapa perubahan, dan jika Anda sudah menggunakan jQuery, harus meninggalkan hanya satu versi . 

Penulis halaman | Backstretch