Slideshow Otomatis Blogger dengan AnythingSlider

Slideshow Otomatis Blogger dengan Anythingslider

Saya sempat kesulitan saat mencoba mengintegrasikan template JSON Blogger dengan JQuery AnythingSlider. Pada dasarnya masalahnya bukan mengarah kepada kesulitan di dalam membangun slideshow, tetapi lebih kepada masalah opsi-opsi dalam plugin ini. Beberapa opsi Saya rasa tidak begitu penting jika kita berhubungan dengan Blogger yang sederhana namun sangat cepat. Jadi, Saya telah meringkas beberapa opsinya untuk mempermudah konfigurasi:

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:

/*
============================================================================
    AnythingSlider v1.7+ Default (base) theme
    By Chris Coyier: http://css-tricks.com
    with major improvements by Doug Neiner: http://pixelgraphics.us/
    based on work by Remy Sharp: http://jqueryfordesigners.com/
    With some awesome touches by Taufik Nurrohman
    to create a very very very very very cool shiny effect :)
============================================================================
*/

#any-slider {
  width:645px; /* Atau bisa juga ditentukan sendiri */
  height:390px;
  list-style:none;
  overflow-y:auto;
  overflow-x:hidden;
  font:normal 12px Georgia,Serif;
  color:#666;
  position:relative;
  text-align:left;
}

#any-slider ul,
#any-slider li {
  list-style:none !important;
  margin:0px 0px 0px 0px;
  padding:0px 0px 0px 0px;
  border:none;
  outline:none;
}

.anythingBase {max-width:32766px;}

div.anythingSlider .anythingWindow {
  border-top:3px solid #7C9127;
  border-bottom:3px solid #7C9127;
}

div.anythingSlider .anythingControls ul a.cur,
div.anythingSlider .anythingControls ul a {
  background:#777;
  color:#000;
}

div.anythingSlider.activeSlider .anythingControls ul a.cur,
div.anythingSlider.activeSlider .anythingControls ul a {
  background-color:#7C9127;
}

div.anythingSlider {
  display:block;
  margin:0 auto;
  overflow:visible !important;
  position:relative;
  padding:0 45px 7px 45px;
  background-color:white;
}

div.anythingSlider .anythingWindow {
  overflow:hidden;
  position:relative;
  width:100%;
  height:100%;
}

.anythingBase {
  background:transparent;
  list-style:none !important;
  position:absolute;
  overflow:visible !important;
  top:0;
  left:0;
  margin:0 0 0 0;
  padding:0 0 0 0;
}

.anythingBase .panel {
  background:transparent;
  display:block;
  overflow:hidden;
  float:left;
  padding:0;
  margin:0;
  position:relative;
}

.anythingBase .panel.vertical {
  float:none;
}

div.anythingSlider .arrow {
  top:48%;
  position:absolute;
  display:block;
}

div.anythingSlider .arrow a {
  display:block;
  height:140px;
  margin:-70px 0 0 0;
  width:45px;
  text-align:center;
  outline:0;
  background:transparent url('http://4.bp.blogspot.com/-EWKg7vqmSzo/T0xn-3WMxLI/AAAAAAAACOk/BwxTXwA53M8/s1600/default.png') no-repeat;
}

div.anythingSlider .arrow a span {display:block;text-indent:-9999px;}

div.anythingSlider .back             {left:0;}
div.anythingSlider .back a           {background-position:left top;}
div.anythingSlider .back a:hover,
div.anythingSlider .back a.hover     {background-position:left -140px;}
div.anythingSlider .back.disabled    {display:none;}

div.anythingSlider .forward          {right:0;}
div.anythingSlider .forward a        {background-position:right top;}
div.anythingSlider .forward a:hover,
div.anythingSlider .forward a.hover  {background-position:right -140px;}
div.anythingSlider .forward.disabled {display:none;}


div.anythingSlider .anythingControls {outline:0;display:none;}

div.anythingSlider .anythingControls ul {
  margin:-4px 0px 0px 0px;
  padding:0;
  position:absolute;
  top:100%;
  left:45px;
}

div.anythingSlider .anythingControls ul li {
  display:inline;
  list-style:none;
  margin:0 0 0 0;
  padding:0 0 0 0;
  border:none;
}

div.anythingSlider .anythingControls ul a {
  width:30px;
  font:normal 10px Georgia,Serif;
  display:inline-block;
  text-decoration:none;
  text-shadow:0px 1px 0px rgba(255,255,255,0.2);
  padding:3px 0px 4px;
  margin:0px 2px 0px 0px;
  text-align:center;
  color:#222;
  outline:0;
  background-image:url('http://4.bp.blogspot.com/-EWKg7vqmSzo/T0xn-3WMxLI/AAAAAAAACOk/BwxTXwA53M8/s1600/default.png');
  background-position:center -288px;
  background-color:#7C9127;
  -webkit-border-radius:0px 0px 5px 5px;
  -moz-border-radius:0px 0px 5px 5px;
  border-radius:0px 0px 5px 5px;
}

div.anythingSlider .anythingControls ul a:hover {
  background-color:#677621;
}

div.anythingSlider .anythingControls .anythingNavWindow {overflow:hidden;float:left;}

/* Orientasi Right to Left - Biasanya untuk tema Arab */
div.anythingSlider.rtl .anythingControls ul a {float:right;}
div.anythingSlider.rtl .anythingControls ul {float:left;}
div.anythingSlider.rtl .anythingWindow {
  direction:ltr;
  unicode-bidi:bidi-override;
}

div.anythingSlider .start-stop {
  font:normal 10px Georgia,Serif;
  background-color:#3B740F;
  background-image:url('http://4.bp.blogspot.com/-EWKg7vqmSzo/T0xn-3WMxLI/AAAAAAAACOk/BwxTXwA53M8/s1600/default.png');
  background-position:center -288px;
  padding:3px 5px;
  width:60px;
  text-align:center;
  text-decoration:none;
  text-shadow:0px 1px 0px rgba(0,0,0,0.2);
  color:white;
  float:right;
  z-index:100;
  outline:0;
  -webkit-border-radius:0 0 5px 5px;
  -moz-border-radius:0 0 5px 5px;
  border-radius:0 0 5px 5px;
}

div.anythingSlider .start-stop.playing {
  background-color:#800;
}

div.anythingSlider,
div.anythingSlider .anythingWindow,
div.anythingSlider .anythingControls ul a,
div.anythingSlider .arrow a,
div.anythingSlider .start-stop {
  -webkit-transition-duration:0;
  -moz-transition-duration:0;
  -ms-transition-duration:0;
  -o-transition-duration:0;
  transition-duration:0;
}

div.anythingSlider .container {
  font:normal 11px Arial,Sans-Serif;
  font-style:italic;
  color:#666;
  margin:10px 15px;
  padding:0 0;
  border:none;
}

div.anythingSlider h2, div.anythingSlider h2 a {
  margin:0px 0px;
  padding:0px 0px;
  font:bold italic 16px Georgia,Serif;
  color:#666;
  text-decoration:none;
}

div.anythingSlider h2 {margin-bottom:10px;}

div.anythingSlider .container img {
  display:block;
  width:47% !important;
  height:auto !important;
  float:right;
  margin:0px 0px 5px 10px;
  border:1px solid #dcdcdc;
  background-color:#fafafa;
  padding:4px;
  -webkit-box-shadow:none;
  -moz-box-shadow:none;
  box-shadow:none;
}

div.anythingSlider .container span {
  display:block !important;
  margin-top:10px;
  border-top:1px dotted #ccc;
  padding:10px 0px 0px;
  font:bold 12px Georgia,Serif;
  color:green;
  overflow:hidden;
}

div.anythingSlider .container span a {
  float:right;
  background-color:#768927;
  font:bold italic 11px Arial,Sans-Serif;
  color:white;
  text-decoration:none;
  padding:2px 7px 3px;
  border:2px solid #eee;
  -webkit-box-shadow:inset 0px 1px 2px rgba(0,0,0,0.4);
  -moz-box-shadow:inset 0px 1px 2px rgba(0,0,0,0.4);
  box-shadow:inset 0px 1px 2px rgba(0,0,0,0.4);
  -webkit-border-radius:15px;
  -moz-border-radius:15px;
  border-radius:15px;
}

div.anythingSlider .container span a:hover {
  background-color:#626415;
}

.clear {clear:both;}

/*
=======================================================================
    End AnythingSlider Horray!
=======================================================================
*/

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 type='text/javascript' src='http://reader-download.googlecode.com/svn/trunk/jquery.anythingslider.min.js'></script>
<script type='text/javascript'>
//<![CDATA[
    $(function() {

        $('#any-slider').anythingSlider({
            resizeContents  : false,
            expand          : false,
            vertical        : false,
            easing          : "swing",

            buildArrows     : true,
            buildNavigation : true,
            buildStartStop  : true,

            toggleArrows    : false,
            toggleControls  : false,

            startText       : "Mulai",
            stopText        : "Berhenti",
            enableKeyboard  : true,

            startPanel      : 1,
            hashTags        : true,
            infiniteSlides  : true,

            autoPlay        : false,
            pauseOnHover    : true,
            stopAtEnd       : false,
            playRtl         : false,

            delay           : 3000,
            animationTime   : 600
        });

    });
//]]>
</script>

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

Berikutnya cari baris kode yang tampak kurang lebih seperti ini:

<div id='header-wrapper'>
    <b:section class='header' id='header' maxwidgets='2' showaddelement='no'>
        <b:widget id='Header1' locked='true' title='Life is Be U to Full (Header)' type='Header'/>
    </b:section>
</div>

Salin kode ini kemudian letakkan di bawahnya:

<script type="text/javascript">
//<![CDATA[
var showPostDate_g  = true,
    showComm_g      = true,
    slideOpenNewTab = true,
    idMode          = true,
    slidebyLabels   = false,
    slideLabelName  = "Mengenai",
    pBlank          = "http://2.bp.blogspot.com/-11FkySHGB5Y/TpZ6SSbsF2I/AAAAAAAAA94/zK10UaL7jgo/s1600/images.jpeg",
    text            = "Komentar",
    numposts_g      = 12,
    numchars_g      = 600,
    rmore           = "Selengkapnya",
    home_page       = "http://latitudu.blogspot.com/";
//]]>
</script>
<script type="text/javascript" src="http://reader-download.googlecode.com/svn/trunk/autoContent4anythingSlider.js"></script>

Ganti URL http://latitudu.blogspot.com/ dengan alamat blog Anda lalu klik Simpan Template.

Atau untuk versi template baru biasanya sedikit lebih rumit. Temukan saja kode yang tampak seperti ini:

    <div id='wrap-main'>
      <div class='helvetica' id='main'>
        <b:section class='left-09col' id='primary' role='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
<b:widget id='Feed1' locked='false' title='Blogger Templates' type='Feed'/>
</b:section>
...
...

Letakkan kode yang baru saja Anda salin tepat di atasnya.


Konfigurasi Slideshow - JSON & AnythingSlider

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

Pengaturan JSON - Auto Content Slider

Kurang lebihnya sama seperti pengaturan slideshow yang lain:

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.
numchars_gDigunakan untuk menentukan jumlah karakter ringkasan artikel.
rmoreDigunakan untuk menentukan teks link menuju posting sesungguhnya (contoh: Baca Selengkapnya/Read More).
home_pageURL blog Anda.

Pengaturan Plugin

Saya telah menyederhanakan opsi-opsi pada plugin ini. Untuk mempelajari opsi selengkapnya bisa Anda baca di sini:

OpsiNilaiKeterangan
resizeContentstrueSebenarnya opsi ini digunakan untuk dominasi konten berupa gambar. Saya sarankan Anda untuk tetap mempertahankan nilainya sebagai false agar tampilannya tidak berantakan.
false
expandtrueJika bernilai true, lebar slideshow akan menyesuaikan diri berdasarkan lebar elemen induk sehingga opsi ini sangat cocok untuk blog bertema responsif.
false
verticaltrueSecara normal slideshow ini akan bergerak secara horizontal. Tapi, dengan mengubah nilai opsi ini menjadi true, orientasi animasi slideshow akan berubah menjadi orientasi vertikal.
false
easing'swing', 'easeInOutBack', ... (nama easing)Digunakan untuk mengaktifkan easing pada animasi slideshow (pelajari di sini).
buildArrowstrueJika bernilai false navigasi next/previous akan menghilang.
false
buildNavigationtrueJika bernilai false navigasi 1, 2, 3, ... akan menghilang.
false
buildStartStoptrueJika bernilai false navigasi Mulai/Berhenti akan menghilang.
false

Navigasi default AnythingSlider
Navigasi default AnythingSlider


toggleArrowstrueJika bernilai true navigasi next/previous akan disembunyikan, hingga saat pointer mouse mendekati slideshow, navigasi tersebut akan ditampilkan dengan efek animasi.
false
toggleControlstrueJika bernilai true navigasi 1, 2, 3, ... dan Mulai/Berhenti akan disembunyikan, hingga saat pointer mouse mendekati slideshow, navigasi tersebut akan ditampilkan dengan efek animasi. Begitu pula saat animasi perpindahan setiap slide telah selesai.
false
startText"Start", "Mulai", ... (teks)Digunakan untuk menentukan label navigasi Mulai (default:"Start").
stopText"Stop", "Berhenti", ... (teks)Digunakan untuk menentukan label navigasi Berhenti (default:"Stop").
enableKeyboardtrueJika bernilai false fasilitas navigasi menggunakan tombol panah pada keyboard akan dinonaktifkan.
false
startPanel1, 2, 3, ... (nomor urut)Digunakan untuk menentukan slide urutan ke berapa yang akan terlihat lebih dulu (default:1).
hashtagtrueJika bernilai true saat Anda mengeklik navigasi jalan pintas, itu akan mengubah hash yang ada pada address bar. Kelihatannya memang sepele, tetapi ini bisa digunakan untuk berbagi URL halaman yang di dalamnya terdapat slideshow ini, dimana Anda ingin menampilkan slide pada urutan tertentu saat link berbagi tersebut diakses.
false

Hash pada URL
Hash pada URL


infiniteSlidestrueSecara normal, slideshow ini akan bergerak dari kanan ke kiri secara terus-menerus meskipun slide telah mencapai akhir. Jika Anda mengubah nilai opsi ini menjadi false, maka saat animasi slideshow berakhir, slideshow akan bergerak menuju arah sebaliknya dengan cepat untuk menuju kepada slide pertama dan memulai animasi kembali.
false
autoPlaytrueJika bernilai true slideshow akan bergerak dengan sendirinya tanpa diperintah saat pertama kali halaman diakses. Untuk alasan kenyamanan, lebih baik set sebagai false sehingga pengunjung bisa mengaktifkan animasi otomatis dengan cara menekan tombol Mulai. Karena jika tidak, halaman blogmu bisa naik turun hehe...
false
pauseOnHovertrueJika bernilai true slideshow akan berhenti bergerak saat pointer mouse sedang berada di atasnya.
false
stopAtEndtrueJika bernilai true slideshow akan berhenti saat telah mencapai slide terakhir.
false
playRtltrueJika bernilai true slideshow akan bergerak secara terbalik, termasuk orientasi navigasi angkanya (dari kanan ke kiri). Biasanya ini untuk slideshow bertema/berbahasa Arab.
false

Slideshow Terbalik
Slideshow Terbalik


delay1000, 2000, ... (milidetik)Digunakan untuk menentukan seberapa lama slide akan berhenti sebelum akhirnya berpindah menuju slide berikutnya.
animationTime1000, 2000, ... (milidetik)Digunakan untuk menentukan kecepatan transisi slide.


Contoh Penerapan Slideshow Orientasi Vertikal

//<![CDATA[
    $(function() {

        $('#any-slider').anythingSlider({
            resizeContents  : false,
            expand          : false,
            vertical        : true,
            startText       : "Mulai",
            stopText        : "Berhenti",
            enableKeyboard  : true,
            autoPlay        : false,
            pauseOnHover    : true,
            playRtl         : false,
            delay           : 3000,
            animationTime   : 600
        });

    });
//]]>

Lihat Demo :: Orientasi Vertikal

Contoh Penerapan Efek Animasi dengan Easing

Di sini Saya memakai tipe easing eseInOutBack:

//<![CDATA[
    $(function() {

        $('#any-slider').anythingSlider({
            resizeContents  : false,
            expand          : false,
            easing          : "easeInOutBack",
            startText       : "Mulai",
            stopText        : "Berhenti",
            delay           : 3000,
            animationTime   : 600
        });

    });
//]]>

Lihat Demo :: Modifikasi Easing

Autohide Navigasi

//<![CDATA[
    $(function() {

        $('#any-slider').anythingSlider({
            resizeContents  : false,
            expand          : false,
            vertical        : false,
            easing          : "easeInOutExpo",
            toggleArrows    : true,
            toggleControls  : false,
            startText       : "Mulai",
            stopText        : "Berhenti",
            enableKeyboard  : true
        });

    });
//]]>

Lihat Demo :: Toggle Arrows

Hal yang sama juga bisa dilakukan untuk navigasi 1, 2, 3, ...

toggleArrows : true,
toggleControls : true

Seringkali slideshow ini akan tampak berantakan pada template-template yang rumit. Jika ingin menghasilkan tampilan yang maksimal, lebih baik gunakan template dengan tampilan sesederhana mungkin dan kode CSS sesedikit mungkin.


Untuk Pengembang

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

function showgal(z) {

    document.write('<ul id="any-slider">');

    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 re = /<\S[^>]*>/g;
        r = r.replace(re, "");
        if (r.length > numchars_g) {
            r = r.substring(0, numchars_g) + '...';
        }

        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('<li><div class="container"><a href="' + p + '" target="_blank"><img src="' + img[o] + '" alt="" class="recent-thumb"/></a><h2><a href="' + p + '" class="recent-link" target="_blank">' + g + '</a></h2>' + r + '<div class="clear"></div><span>' + n + cmtext + '<a href="' + p + '" target="_blank">' + rmore + '</a></span></div></li>');
        } else {
            document.write('<li><div class="container"><a href="' + p + '"><img src="' + img[o] + '" alt="" class="recent-thumb"/></a><h2><a href="' + p + '" class="recent-link">' + g + '</a></h2>' + r + '<div class="clear"></div><span>' + n + cmtext + '<a href="' + p + '">' + rmore + '</a></span></div></li>');
        }
        j++
    }

    document.write('</ul>');
}

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