Sedikit Info Seputar Slideshow Otomatis Blogger dengan TinyCarousel (Custom) Terbaru 2017 - Hay gaes kali ini team Free Template BLogspot.Com, kali ini akan membahas artikel dengan judul Slideshow Otomatis Blogger dengan TinyCarousel (Custom), kami selaku Team Free Template BLogspot.Com telah mempersiapkan artikel ini untuk sobat sobat yang menyukai Free Template BLogspot.Com. semoga isi postingan tentang Artikel Widget Blog, yang saya posting kali ini dapat dipahami dengan mudah serta memberi manfa'at bagi kalian semua, walaupun tidak sempurna setidaknya artikel kami memberi sedikit informasi kepada kalian semua. ok langsung simak aja sob
Judul: Berbagi Info Seputar Slideshow Otomatis Blogger dengan TinyCarousel (Custom) Terbaru
link: Slideshow Otomatis Blogger dengan TinyCarousel (Custom)

Berbagi Slideshow Otomatis Blogger dengan TinyCarousel (Custom) Terbaru dan Terlengkap 2017

Pembaharuan: 25 November 2013

Menjawab permintaan dari It's a Hardlife, Saya mencoba untuk memodifikasi JQuery Carousel yang sederhana karena slideshow versi Agile Carousel itu terlalu rumit. Saya mengambil TinyCarousel sebagai bahan utama, yang pada awalnya hanya berupa slideshow gambar biasa untuk dimodifikasi lagi sesuai dengan tata letak slideshow Agile Carousel sehingga setiap slide menjadi lebih kaya akan konten:

Lihat Demo

Tahap 1: Mengedit Templat

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

Temukan kode ini:

]]></b:skin>

Salin kode di bawah ini, kemudian letakkan di atasnya:

/*!
 * Custom TinyCarousel for Blogger by Taufik Nurrohman
 * Visit: http://www.dte.web.id
 */

.tinycarousel {
  overflow:hidden;
  font:normal normal 10px/12px Arial,Sans-Serif;
  color:#666;
  margin:0 auto;
}
.tinycarousel-viewport {
  overflow:hidden;
  position:relative;
  background-color:#eee;
  border:1px solid #ccc;
  margin:0 auto;
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
}
.tinycarousel-overview {
  list-style:none;
  margin:0;
  padding:0;
  position:absolute;
  left:0;
  top:0;
}
.tinycarousel-overview li {
  list-style:none;
  float:left;
  padding:0;
  height:auto;
  background-color:white;
  color:#666;
}
.tinycarousel-inner {
  padding:10px;
  border:1px solid #ccc;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  overflow:hidden;
  position:relative;
}
li .tinycarousel-inner {padding-bottom:48px}
.tinycarousel-image {
  display:block;
  width:100%;
  height:auto;
  border:none;
  outline:none;
  margin:0;
  padding:0;
  -webkit-box-shadow:none;
  -moz-box-shadow:none;
  box-shadow:none;
}
.tinycarousel-title {
  font:normal bold 11px/100% Verdana,Tahoma,Arial,Sans-Serif;
  color:#39f;
  margin:0 0 6px;
  padding:10px 0 0;
  background:none;
}
.tinycarousel-title a {
  color:inherit;
  text-decoration:none;
  border:none;
}
.tinycarousel-summary {
  margin:0;
  padding:0;
  overflow:hidden;
}
.tinycarousel-footer {
  color:#aaa;
  background-color:#333;
  background-image:-webkit-linear-gradient(#555,#333);
  background-image:-moz-linear-gradient(#555,#333);
  background-image:-ms-linear-gradient(#555,#333);
  background-image:-o-linear-gradient(#555,#333);
  background-image:linear-gradient(#555,#333);
  padding:0 10px;
  height:24px;
  line-height:24px;
  overflow:hidden;
  position:absolute;
  right:0;
  bottom:0;
  left:0;
}
.tinycarousel-footer-date {bottom:24px}
.tinycarousel-navigation {
  display:block;
  background-color:white;
  border:1px solid #ccc;
  margin:2px auto 0;
  overflow:hidden;
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
}
.tinycarousel-navigation .tinycarousel-inner {border:none}
.tinycarousel-button {
  background-color:#666;
  padding:2px 5px;
  overflow:hidden;
  position:relative;
  float:left;
  margin:0 2px 0 0;
  color:white;
  text-decoration:none;
  font-weight:bold;
  text-align:center;
}
.tinycarousel-navigation .disable {display:none}
.tinycarousel-button:active {background-color:#900}
.tinycarousel-total-posts {
  float:right;
  margin:2px 5px 0 0;
  font-weight:bold;
  font-size:120%;
}

/* Orientasi Vertikal */
.tinycarousel.vertical .tinycarousel-overview li {
  float:none;
  display:block;
}
.tinycarousel.vertical .tinycarousel-button,
.tinycarousel.vertical .tinycarousel-total-posts {
  float:none;
  display:block;
  margin:0 0 2px;
}
.tinycarousel.vertical .tinycarousel-button.disable {display:none}
.tinycarousel.vertical .tinycarousel-total-posts {
  text-align:center;
  margin-top:10px;
  margin-bottom:0;
}

Klik Simpan Template.

Tahap 2: Meletakkan Slideshow

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

Salin kode di bawah ini kemudian letakkan di dalam formulirnya:

<div id="tinycarousel-container" class="tinycarousel"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
var tinycarousel_config = {
    url: 'http://nama_blog.blogspot.com',
    numPosts: 12,
    labelName: null,
    containerId: 'tinycarousel-container',
    newTabLink: false,
    summaryLength: 100,
    monthArray: [
        "Januari",
        "Februari",
        "Maret",
        "April",
        "Mei",
        "Juni",
        "Juli",
        "Agustus",
        "September",
        "Oktober",
        "November",
        "Desember"
    ],
    noImage: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC',
    nav: {
        prevText: '&lt;',
        nextText: '&gt;',
        showText: 'Menampilkan {num} Posting'
    },
    carousel: {
        axis: "x",
        itemwidth: 200,
        itemheight: 370,
        itemmargin: 5,
        itempadding:10,
        visible: 4,
        display: 1,
        start: 1,
        interval: true,
        intervaltime: 3000,
        animation: true,
        duration: 1000,
        easing: "swing",
        callback: function() {}
    }
};
</script>
<script src="http://dte-project.googlecode.com/svn/trunk/blogger-tinycarousel.js"></script>

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

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

Konfigurasi Widget

Opsi	Keterangan
url	Ganti nilainya dengan URL blog Anda.
numPosts	Digunakan untuk menentukan jumlah posting yang ingin ditampilkan.
labelName	Ganti nilainya menjadi nama label untuk menampilkan posting dengan label yang spesifik. Misalnya, menentukan nilai `labelName: "Widget"` akan membuat widget ini menampilkan posting berlabel Widget saja.
containerId	ID kontainer penampung widget.
newTabLink	Ganti nilainya menjadi `true` untuk membuat semua tautan terbuka di tab/jendela baru secara otomatis.
summaryLength	Digunakan untuk menentukan panjang ringkasan posting.
monthArray	Daftar nama-nama bulan sesuai dengan sistem penanggalan di negaramu.
noImage	URL gambar thumbnailgambar kecil pengganti untuk posting yang tidak memiliki gambar.
nav => prevText	Teks navigasi mundur.
nav => nextText	Teks navigasi maju.
nav => showText	Teks indikator jumlah posting.
carousel => axis	Ganti nilainya menjadi `"y"` untuk menampilkan carousel vertikal.
carousel => itemwidth	Digunakan untuk menentukan lebar masing-masing item carousel.
carousel => itemheight	Digunakan untuk menentukan tinggi masing-masing item carousel.
carousel => itemmargin	Digunakan untuk menentukan `margin` masing-masing item carousel.
carousel => itempadding	Digunakan untuk menentukan `padding` masing-masing item carousel.
carousel => visible	Digunakan untuk menentukan jumlah item yang ingin ditampilkan dalam satu baris.
carousel => display	Digunakan untuk menentukan jumlah item yang akan tergeser dalam satu kali gerakan.
carousel => start	Digunakan untuk menentukan indeks permulaan item (normalnya dimulai dari indeks pertama).
carousel => interval	Ganti nilainya menjadi `false` untuk membuat animasi berjalan secara manual (dengan cara mengeklik tombol navigasi).
carousel => intervaltime	Digunakan untuk menentukan waktu interval animasi (hanya berlaku jika opsi `interval` bernilai `true`).
carousel => animation	Ganti nilainya menjadi `false` untuk mematikan efek animasi.
carousel => duration	Digunakan untuk menentukan kecepatan animasi.
carousel => easing	Digunakan untuk menentukan tipe easing animasi.
carousel => callback	Fungsi bebas yang bisa Anda terapkan pada widget ini yang akan bekerja setiap kali slide berganti.

Contoh Pengaturan Carousel Vertikal

Perhatikan pada bagian-bagian yang Saya tandai:

var tinycarousel_config = {
    ...
    nav: {
        prevText: '&#9650;',
        nextText: '&#9660;',
        showText: 'Menampilkan {num} Posting'
    },
    carousel: {
        axis: "y",
        itemwidth: 200,
        itemheight: 370,
        itemmargin: 5,
        itempadding:10,
        visible: 1,
        display: 1,
        start: 1,
        interval: true,
        intervaltime: 3000,
        animation: true,
        duration: 1000,
        easing: "swing",
        callback: function() {}
    }
};

Lihat Demo

Itulah sedikit Artikel Slideshow Otomatis Blogger dengan TinyCarousel (Custom) terbaru dari kami

Semoga artikel Slideshow Otomatis Blogger dengan TinyCarousel (Custom) yang saya posting kali ini, bisa memberi informasi untuk anda semua yang menyukai Free Template BLogspot.Com. jangan lupa baca juga artikel-artikel lain dari kami.

Terima kasih Anda baru saja membaca Slideshow Otomatis Blogger dengan TinyCarousel (Custom)

Free Template BLogspot.Com

Cara Download Slideshow Otomatis Blogger dengan TinyCarousel (Custom) Update Terbaru

Berbagi Slideshow Otomatis Blogger dengan TinyCarousel (Custom) Terbaru dan Terlengkap 2017

Tahap 1: Mengedit Templat

Tahap 2: Meletakkan Slideshow

Konfigurasi Widget

Contoh Pengaturan Carousel Vertikal

Itulah sedikit Artikel Slideshow Otomatis Blogger dengan TinyCarousel (Custom) terbaru dari kami

Share this

Related Articles :

Entri Populer