Obesity Strike: Slide Responsive untuk Blogspot dengan Skitter JQuery Slideshow

Update 6 Februari 2015

Skitter Slider ini dibuat menggunakan JQuery yang saya temukan di Skitter , dan kali ini saya akan memberikan slideshow nya dengan tampilan yang sudah dimodifikasi dan dapat dipasang di blogspot.

Demo

Slideshow akan bekerja jika blog anda sudah dilengkapi dengan JQuery.

Menampilkan add Gadged diatas Posting Blog

Jika blog anda belum ada kotak add gadged diatas blog post, ikuti langkah dibawah ini :

1. Masuk dashboard pilih Template lalu Edit HTML
2. Cari kode <b:section class='main' id='main' showaddelement='no'> lalu ganti 'no' menjadi 'yes'
3. Simpan Template

Menambahkan CSS

1. Masih pada Edit HTML Tempate , Sekarang cari kode </head>

2. Salin CSS dibawah ini dan letakkan diatasnya

<link href="http://obs-project.googlecode.com/svn/trunk/slide_skitt.css" rel="stylesheet" type="text/css"></link>

3. Sekarang cari kode </body>

4. Salin kode dibawah ini dan letakkan diatasnya

<script src="http://obs-project.googlecode.com/svn/trunk/slide.js" type="text/javascript"></script>

5. Pada dashbord pilih Layout/Tata Letak kemudian klik tulisan Add Gadget diatas Blog Post Area

6. Letakkan Kode dibawah ini didalam kotak Add Gadget yang telah anda buat tadi

<div id='skitterslideshow'></div>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
    pengaturan({
        blogURL: 'http://nama_blog_anda.blogspot.com',
        MaxPost: 5,
        RandompostActive: false,
        ImageSize: 620,
        NumCharacter: 150,
        idcontaint: "#skitterslideshow",
        cmtext: "Komentar",
        NoCmtext: "No Comment",
        pBlank: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHQS3BMfVYopXM6cJQ5n2a2Gq8Hy4pzxWc1IFn-PDq-0Lf7Hel3BbBhfPqTT_veTxcBi50E-Zr502VNWuI7Hdi_uFg4sdxEwuk00lGtAMAfOI89IlJ32lo6uYcD_PQ5I6FhBhcN5NmMNA/s1600/noimage.jpg",
        tagName: false
    });
});
//]]>
</script>

Membungkus HTML dengan Tag Kondisional

Karena kita akan memunculkan Slideshownya hanya pada homepage/ halaman utama, maka kita perlu membungkus HTML slideshownya dengan Tag Kondisional

1. Dasboard -> Template -> Edit HTML

2. Cari kode <b:section class='main' id='main' showaddelement='yes'>

3. Karena tadi sudah menambahkan Widget baru diatas Blog Post, maka akan muncul kode seperti dibawah ini, ini hanya sebagai contoh saja karena id widget bisa berbeda, misal id widget anda HTML2 dan lain lain

<b:widget id='HTML1' locked='false' title='' type='HTML'>
<b:includable id='main'> 
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
</b:includable>
</b:widget>

4. Tambahkan tag kondisonal <b:if cond='data:blog.url == data:blog.homepageUrl'> dibawah <b:includable id='main'> dan tag penutup </b:if> diatas </b:includable>

5. Maka hasilnya akan seperti dibawah ini

<b:widget id='HTML1' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'> 
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Silahkan Ganti url yang saya mark http://nama_blog_anda.blogspot.com dengan url blog anda

Opsi	Nilai	Keterangan
RandompostActive	false	Ganti nilainya menjadi true jika Anda ingin menampilkan Slideshow secara acak.
	true
tagName	nama label	Jika ingin menampilkan artikel berdasarkan tag/label, misalnya tag blogger maka ditulis seperti ini : tagName:"blogger"
	false
MaxPost	"JavaScript", "Widget", ... (maximum post)	Tentukan nama jumlah post pada slideshow.
ImageSize	"Gambar", ... (teks)	Tentukan ukuran gambar slideshow.
NumCharacter	"Jumlah Karakter", ... (teks)	Digunakan untuk mengatur Jumlah karakter yang ingin ditampilkan pada ringkasan
cmtext	"1 Komentar", ... (teks)	Tulisan jika terdapat komentar
NoCmtext	"0 Komentar", ... (teks)	Tulisan jika tidak terdapat komentar.
pBlank	(URL Gambar)	Backup gambar, jika post tidak memiliki gambar