Slideshow Otomatis Blogger dengan SLIDES

Slideshow Otomatis Blogger dengan SLIDES

Saya menggunakan versi terakhir dari SLIDES yaitu pada 5 September 2011. Meskipun sebenarnya bagi Saya masih ada satu bug kecil saat Saya mencoba untuk berpindah tab halaman kemudian kembali lagi, saat itu durasi animasi menjadi sedikit berantakan sampai beberapa saat kemudian kembali normal. Nivo telah berhasil mengatasi ini dengan rilis kecilnya untuk mengatasi masalah yang hampir sama.

Lihat Demo

Tahap 1: Mengedit Template

Untuk membuatnya, pertama-tama masuklah ke menu Template kemudian klik Edit HTML dan klik Lanjutkan:

Edit HTML Blogger
Mengedit HTML


Temukan kode ini:

]]></b:skin>

Salin kode di bawah ini, kemudian letakkan di atasnya:

/*
 * Slides, A Slideshow Plugin for jQuery
 * Intructions: http://slidesjs.com
 * By: Nathan Searles, http://nathansearles.com
 * Version: 1.1.9
 * Updated: September 5th, 2011
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
*/

#slides-outer {
  width:570px;
  height:270px;
  position:relative;
  margin:30px auto 0px;
  background-color:#efefef;
}

/* Netralisasi gambar */
#slides-outer img {
  margin:0px 0px;
  padding:0px 0px !important;
  background:transparent !important;
  border:none !important;
  outline:none !important;
  -webkit-box-shadow:none;
  -moz-box-shadow:none;
  box-shadow:none;
}
#ribbon,
#frame,
#slides .next,
#slides .prev {opacity:1 !important;}
/* Stop di sini */

#ribbon {
  position:absolute;
  top:-3px;
  left:-15px;
  z-index:500;
}

#frame {
  position:absolute;
  z-index:0;
  width:739px;
  height:341px;
  top:-3px;
  left:-80px;
}

#slides {
  position:absolute;
  top:15px;
  left:4px;
  z-index:100;
  font:normal 12px Arial,Sans-Serif;
}

.slides_container {
  width:570px;
  overflow:hidden;
  position:relative;
  display:none;
}

.slides_container div.slide, .slides_container div.slide img {
  width:570px;
  height:270px;
  display:block;
  overflow:hidden;
}

.slides_container div.slide img {height:auto !important;}

#slides .next,
#slides .prev {
  position:absolute;
  top:107px;
  left:-39px;
  width:24px;
  height:43px;
  display:block;
  z-index:101;
}

#slides .next {
  left:585px;
}

.pagination {
  margin:26px auto 0;
  padding:0px 0px;
  width:auto;
  text-align:center;
}

.pagination li {
  display:inline-block;
  *display:inline;
  margin:0px 1px;
  padding:0px 0px;
  list-style:none;
}

.pagination li a {
  display:block;
  width:12px;
  height:0px;
  padding-top:12px;
  background-image:url('http://1.bp.blogspot.com/-kBxWiSmnR0U/T0pmXN_FqHI/AAAAAAAACOE/HgB4YfcCvgE/s1600/pagination.png');
  background-position:0 0;
  overflow:hidden;
}

.pagination li.current a {
  background-position:0 -12px;
}

#slides .caption {
  z-index:500;
  position:absolute;
  bottom:-35px;
  left:0;
  height:30px;
  padding:5px 20px 0 20px;
  background-color:#000;
  background-color:rgba(0,0,0,0.5);
  width:540px;
  font:normal 13px Helvetica,Arial,sans-serif;
  color:white;
  border-top:1px solid #000;
  text-shadow:none;
}

#slides .caption a {
text-decoration:none;
color:white;
}
#slides .caption a:hover {
text-decoration:underline;
}

/* End SLIDES */

Kemudian temukan kode ini:

</head>

Salin kode di bawah ini kemudian letakkan di atasnya:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script src='http://reader-download.googlecode.com/svn/trunk/slides.min.jquery.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
    $(function() {
        $('#slides').slides({
            generatePagination : true,
            preload            : true,
            preloadImage       : 'http://reader-download.googlecode.com/svn/trunk/images/slides-loader.gif',
            play               : 5000,
            pause              : 2500,
            hoverPause         : true,
            effect             : 'slide',
            fadeSpeed          : 350,
            fadeEasing         : '',
            crossfade          : true,
            slideSpeed         : 350,
            slideEasing        : '',
            // Kustomisasi fungsi untuk menyisipkan caption
            animationStart: function(current) {
                $('div.caption').animate({bottom:-35}, 100);
            },
            animationComplete: function(current) {
                $('div.caption').animate({bottom:0}, 200);
            },
            slidesLoaded: function() {
                $('div.caption').animate({bottom:0}, 200);
            }
        });
    });
//]]>
</script>

Klik Simpan Template.

Kode yang Saya beri garis bawah adalah JQuery. Jika template Anda sudah dilengkapi dengan JQuery, singkirkan kode tersebut!


Tahap 2: Meletakkan Slideshow

Masuklah ke menu Tata Letak kemudian tambahkan sebuah elemen halaman HTML/JavaScript yang terletak di bagian atas posting:

Menambahkan Widget
Menambahkan widget


Salin kode di bawah ini kemudian letakkan di dalam formulirnya:

<script type="text/javascript">
var showPostDate_g  = false,
    showComm_g      = false,
    slideOpenNewTab = false,
    idMode          = true,
    slidebyLabels   = false,
    slideLabelName  = "Mengenai",
    pBlank          = "http://2.bp.blogspot.com/-11FkySHGB5Y/TpZ6SSbsF2I/AAAAAAAAA94/zK10UaL7jgo/s1600/images.jpeg",
    text            = "Komentar",
    numposts_g      = 4,
    home_page       = "http://latitudu.blogspot.com/";
</script>
<div id="slides-outer">
    <img src="http://4.bp.blogspot.com/-NYp6Cx-vy6A/T0plh0PkkdI/AAAAAAAACNs/NFkZdqeP8hY/s1600/example-frame.png" width="739" height="341" alt="Example Frame" id="frame" />
    <img src="http://4.bp.blogspot.com/-T1K0fQGXHn8/T0pmUCTEjEI/AAAAAAAACN8/zJ1CEvvEzLo/s1600/new-ribbon.png" width="112" height="112" alt="New Ribbon" id="ribbon" />
    <div id="slides">
        <script src="http://reader-download.googlecode.com/svn/trunk/autoContent4SLIDES.js" type="text/javascript"></script>
        <a href="#" class="prev">
            <img src="http://4.bp.blogspot.com/-YBh6RVIP6rM/T0plXL_Z94I/AAAAAAAACNc/JYe-5VPD4Bs/s1600/arrow-prev.png" width="24" height="43" alt="Arrow Prev">
        </a>
        <a href="#" class="next">
            <img src="http://2.bp.blogspot.com/-bJqPep9dJZU/T0plVM2OuBI/AAAAAAAACNU/at-rT9KkcYw/s1600/arrow-next.png" width="24" height="43" alt="Arrow Next">
        </a>
    </div>
</div>

Ganti URL http://latitudu.blogspot.com/ dengan alamat blog Anda lalu simpan.


Konfigurasi Slideshow

Pengaturan slideshow ini dibagi menjadi dua, yaitu pengaturan JSON Blogger dan pengaturan plugin SLIDES itu sendiri.

Pengaturan JSON - Auto Content Slider

OpsiKeterangan
showPostDate_gJika bernilai true, bulan terbit artikel akan ditampilkan. Jika bernilai false, bulan terbit artikel akan disembunyikan.
slideOpenNewTabJika bernilai true, setiap link akan terbuka di tab/jendela baru. Jika bernilai false, setiap link akan terbuka di tab/jendela yang sama.
idModeJika bernilai true, sistem penanggalan akan berubah menjadi berbahasa Indonesia. Jika bernilai false, sistem penanggalan akan berubah menjadi berbahasa Inggris.
slidebyLabelsUbah nilainya menjadi true jika ingin menampilkan daftar slide artikel dengan label yang spesifik. Setelah itu tentukan nama label pada variabel slideLabelName.
slideLabelNameDigunakan untuk menentukan nama label yang spesifik setelah mengubah nilai slidebyLabels menjadi true.
pBlankAdalah gambar cadangan yang akan ditampilkan jika artikel tidak memiliki gambar.
textDigunakan untuk menentukan label jumlah komentar (contoh: 7 Komentar).
numposts_gDigunakan untuk menentukan jumlah slide.
home_pageURL blog Anda.

Pengaturan Plugin

Ada cukup banyak pengaturan pada plugin ini, tetapi Saya hanya akan menyisipkan beberapa pengaturan yang penting saja. Mengingat slideshow ini merupakan slideshow dengan konten otomatis, beberapa pengaturan menjadi sulit/gagal diterapkan. Misalnya randomize dan bigTarget yang sebenarnya tidak perlu kita atur pada slideshow ini:

OpsiNilaiKeterangan
generatePaginationtrueUbah nilainya menjadi false jika ingin menghilangkan navigasi berbentuk bulatan-bulatan di bagian bawah slideshow
false
preloadtrueUbah nilainya menjadi false jika tidak menginginkan animasi loading pada awal akses halaman.
false
preloadImageURL GambarTentukan URL gambar "loading" pada variabel ini.
play3000, 5000, 6000, ... (numerik)Digunakan untuk menentukan interval perpindahan slide.
pause1000, 2000, ... (numerik)Digunakan untuk menentukan lama berhentinya slide saat kita memutuskan untuk mengeklik navigasi next/prev atau navigasi bulat di bagian bawah (lama waktu berhenti slideshow setelah kita mengeklik navigasi jalan pintas sampai kemudian animasi berjalan lagi).
hoverPausetrueDigunakan untuk menentukan apakah slideshow akan berhenti berjalan saat pointer mouse berada di atasnya (true) atau tidak (false).
false
effect'slide'Digunakan untuk menentukan efek animasi slideshow. Umumnya slide atau fade, namun Anda juga bisa menerapkan keduanya sekaligus dengan memisahkannya menggunakan tanda koma. Dalam artian, efek pertama akan diterapkan pada navigasi next/prev sedangkan efek ke dua akan diterapkan pada navigasi bulatan.
'fade'
'slide, fade'
'fade, slide'
fadeSpeed200, 300, 'slow', ... (kecepatan valid JQuery)Digunakan untuk menentukan kecepatan fade saat Anda telah memilih efek fade.
fadeEasing'easeOutBounce', 'easeInBack' ... (nama Easing)Digunakan untuk mengaktifkan easing pada animasi fade (pelajari di sini).
crossfadetrueDigunakan untuk menentukan apakah efek perpindahan slide (efek fade) akan dilakukan dengan cara memudarkan slide yang tampil, kemudian pada saat yang bersamaan menampilkan slide setelahnya (true) atau dengan cara memudarkan slide yang tampil, menunggu sampai efek pemudaran berakhir, barulah slide berikutnya ditampilkan (false).
false
slideSpeed200, 300, 'slow', ... (kecepatan valid JQuery)Digunakan untuk menentukan kecepatan slide saat Anda telah memilih efek slide.
slideEasing'easeOutBounce', 'easeInBack' ... (nama Easing)Digunakan untuk mengaktifkan easing pada animasi slide (pelajari di sini).

Contoh Penerapan Efek Fade

//<![CDATA[
    $(function(){
        $('#slides').slides({
            generatePagination : true,
            preload            : true,
            preloadImage       : 'http://reader-download.googlecode.com/svn/trunk/images/slides-loader.gif',
            play               : 5000,
            pause              : 2500,
            hoverPause         : true,
            effect             : 'fade',
            fadeSpeed          : 350,
            fadeEasing         : '',
            crossfade          : true,
            // Kustomisasi fungsi untuk menyisipkan caption
            animationStart: function(current) {
                $('div.caption').animate({bottom:-35}, 100);
            },
            animationComplete: function(current) {
                $('div.caption').animate({bottom:0}, 200);
            },
            slidesLoaded: function() {
                $('div.caption').animate({bottom:0}, 200);
            }
        });
    });
//]]>

Lihat Demo :: Efek Fade

Contoh Penerapan Easing

//<![CDATA[
    $(function(){
        $('#slides').slides({
            generatePagination : true,
            preload            : true,
            preloadImage       : 'http://reader-download.googlecode.com/svn/trunk/images/slides-loader.gif',
            play               : 5000,
            pause              : 2500,
            hoverPause         : true,
            effect             : 'slide',
            slideSpeed         : 700,
            slideEasing        : 'easeInOutBack',
            // Kustomisasi fungsi untuk menyisipkan caption
            animationStart: function(current) {
                $('div.caption').animate({bottom:-35}, 100);
            },
            animationComplete: function(current) {
                $('div.caption').animate({bottom:0}, 200);
            },
            slidesLoaded: function() {
                $('div.caption').animate({bottom:0}, 200);
            }
        });
    });
//]]>

Lihat Demo :: Easing


Untuk Pengembang

var showPostDate_g = true,
    showComm_g = true,
    slideOpenNewTab = false,
    idMode = true,
    slidebyLabels = true,
    slideLabelName = "Mengenai",
    pBlank = "blank.jpg",
    text = "Komentar",
    numposts_g = 4,
    home_page = "http://yourblog.blogspot.com/";

function showgal(z) {
    var imgr = 0,
        j = 0,
        img = new Array();
    for (var o = 0; o < numposts_g; o++) {
        var w = z.feed.entry[o];
        var g = w.title.$t;
        var f;
        var p;
        if (o == z.feed.entry.length) {
            break
        }
        for (var l = 0; l < w.link.length; l++) {
            if (w.link[l].rel == "alternate") {
                p = w.link[l].href;
                break
            }
        }
        for (var l = 0; l < w.link.length; l++) {
            if (w.link[l].rel == "replies" && w.link[l].type == "text/html") {
                f = w.link[l].title.split(" ")[0];
                break
            }
        }
        if ("content" in w) {
            var r = w.content.$t
        } else {
            if ("summary" in w) {
                var r = w.summary.$t
            } else {
                var r = ""
            }
        }
        postdate = w.published.$t;
        if (j > imgr.length - 1) {
            j = 0
        }
        img[o] = imgr[j];
        s = r;
        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[o] = d
        } else {
            img[o] = pBlank
        }
        var cmtext = (showComm_g) ? f + ' ' + text : '';
        var q = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
        if (idMode) {
            var x = ["Jan", "Feb", "Mar", "Apr", "Mei", "Jun", "Jul", "Agt", "Sep", "Okt", "Nov", "Des"];
        } else {
            var x = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
        }
        var u = postdate.split("-")[2].substring(0, 2);
        var h = postdate.split("-")[1];
        var t = postdate.split("-")[0];
        for (var e = 0; e < q.length; e++) {
            if (parseInt(h) == q[e]) {
                h = x[e];
                break
            }
        }
        var n = (showPostDate_g) ? ' - ' + u + ' ' + h + ' ' + t + ' - ' : '';
        if (slideOpenNewTab) {
            document.write('<div class="slides_container"><div class="slide"><a href="' + p + '" target="_blank"><img src="' + img[o] + '" alt="" class="recent-thumb"/></a><div class="caption" style="bottom:0px;"><a href="' + p + '" class="recent-link" target="_blank">' + g + '</a>' + n + cmtext + '</div></div></div>');
        } else {
            document.write('<div class="slides_container"><div class="slide"><a href="' + p + '"><img src="' + img[o] + '" alt="" class="recent-thumb"/></a><div class="caption" style="bottom:0px;"><a href="' + p + '" class="recent-link">' + g + '</a>' + n + cmtext + '</div></div></div>');
        }
        j++
    }
}

if (slidebyLabels) {
    document.write('<script src="' + home_page + 'feeds/posts/default/-/' + slideLabelName + '?max-results=' + numposts_g + '&orderby=published&alt=json-in-script&callback=showgal"><\/script>');
} else {
    document.write('<script src="' + home_page + 'feeds/posts/default?max-results=' + numposts_g + '&orderby=published&alt=json-in-script&callback=showgal"><\/script>');
}

Komentar

Posting Komentar

Postingan populer dari blog ini

Demo for Blogger Customized Native Functional Threaded Commenting System

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum . Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica , quam nunc putamus parum claram, ant...
Baca selengkapnya

StackOverflow Like Pagination

Gambar
Some while ago, I built a pagination system in PHP to display a long list of pagination links. The pagination system showed at most 5 links at a time and additional links were represented by ellipsis (...). However, I was not able to deal with certain edge cases, so I drew some inspiration from the pagination system used on StackOverflow to tackle them. This is what the end result looked like: The first and last page links are always visible The previous and next page links (numeric ones) are always visible At most n page links excluding first and last page links are visible; rest are represented by ellipsis The pagination for first and last n - 1 pages is handled a bit differently Complete PHP source code below. DEMO DISINI Pagination Function <?php /** * Displays pagination links based on given parameters * * @param int $currentPage - current page * @param int $itemCount - number of items to paginate, used to calculate total number of pages * @param int $items...
Baca selengkapnya

AdSense Responsive Ads - Why Not?

Gambar
Google telah secara konstan menambahkan fitur-fitur baru ke AdSense, menawarkan penerbit lebih banyak kontrol atas bagaimana iklan ditampilkan di situs web mereka. Berikut adalah beberapa fitur yang terkait dengan penerapan kode iklan yang diluncurkan selama 12 bulan terakhir: Introduction of Asynchronous Ads — July 2013 Introduction of Responsive Ads — July 2013 Introduction of Custom-Sized Ads — December 2013 At this moment, publishers can choose from standard, responsive and custom-sized ad units when creating one. If you have not chosen the ad code implementation method or you are looking forward to change it, I suggest going for responsive ads. The Problem With Standard and Custom-Sized Ads Both standard and custom-sized ads are fixed size which means they do not adapt to fluid or responsive website layout. Web designers understand that fixed size ads influence the layout of a website; and likewise, the website layout dictates the ad sizes to display. For...
Baca selengkapnya