CSS
Catatan :
Untuk setelah Url, sebaiknya kalian tentukan sendiri atau diganti. Karena mungkin saja link di atas sudah tidak berlaku
2.Masukan kode Jquery dan Jquery-easing script berikut diatas atau sebelum </head>
Jquery
Catatan :
Ada dua JQuaery diatas. Apabila sudah menulis yang nomer (1) dengan jquery versi lain tidak apa-apa, maka lewati langkah ini.Tetapi untuk Jquery-easing (2) harus dipasang agar bisa berjalan.
3.Masih di bagian head, masukan kode JavaScript berikut diatas atau sebelum </head>
Javascript Slideshow minified
4.Selanjutnya, harap diperhatikan ada 2 metode untuk menerapkannya dalam HTML, yaitu metode manual dan otomatis publish posting.
Metode 1 Slideshow Manual
Masukan kode berikut disuatu tempat bagian HTML body, contohnya sebelum <div class="content-wrapper">
atau <div id="content-wrapper">
atau mungkin juga setelah <div class="outer-wrapper">
atau kira-kira posisi yang tepat, karena setiap blog memiliki nama yg berbeda-beda.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
<div class='box_skitter_clean'>
<div class='box_skitter'>
<ul>
<li><a href="...post-link 1.html"><img src="...image-link 1.jpg" class="block" ></img></a>
<div class="label_text"><a href='...post-link 1.html'>Post Title 1</a>
<p>Description 1</p>
</div>
</li>
<li><a href="...post-link 2.html"><img src="...image-link 2.jpg" class="cubeRandom" ></img></a>
<div class="label_text"><a href='...post-link 2.html'>Post Title 2</a>
<p>Description 2</p>
</div>
</li>
<li><a href="...post-link 3.html"><img src="...image-link 3.jpg" class="directionRight" ></img></a>
<div class="label_text"><a href='...post-link 3.html'>Post Title 3</a>
<p>Description 3</p>
</div>
</li>
<li><a href="...post-link 4.html"><img src="...image-link 4.jpg" class="cubeRandom" ></img></a>
<div class="label_text"><a href='...post-link 4.html'>Post Title 4</a>
<p>Description 4</p>
</div>
</li>
<li><a href="...post-link 5.html"><img src="...image-link 5.jpg" class="tube" ></img></a>
<div class="label_text"><a href='...post-link 5.html'>Post Title 5</a>
<p>Description 5</p>
</div>
</li>
</ul>
</div>
</div>
<script>
$(document).ready(function() {
$('.box_skitter').skitter({
theme: "clean", // minimalist, round, clean, square, untuk default baris ini dihilangkan
numbers_align: "center",
dots: false, // true, false
preview: true, // true, false
controls: true, // true, false
controls_position: "leftBottom", // center, leftTop, rightTop, leftBottom, rightBottom
progressbar: true, // true, false
enable_navigation_keys: true, // true, false
animation:"randomSmart", // cube, cubeRandom, block, cubeStop, cubeHide, cubeSize,
horizontal, showBars, showBarsRandom, tube, fade, fadeFour, paralell, blind, blindHeight,
blindWidth, directionTop, directionBottom, directionRight, directionLeft, cubeStopRandom,
cubeSpread, cubeJelly, glassCube, glassBlock, circles, circlesInside, circlesRotate, cubeShow,
upBars, downBars, hideBars, swapBars, swapBarsBack, swapBlocks, cut, random, randomSmart
labelAnimation: "slideUp", // Label animation type, slideUp, left, right, fixed
interval: 3000, // waktu transisi
});
});
</script>
|
Warna Biru adalah link posting,
ungu adalah judul posting,
pink adalah image link,
merah adalah untuk pengaturan animasi tersendiri per image,
Oranye adalah deskripsi posting.
Coklat adalah kostumisasi pengaturan.
Method 2 Slideshow Otomatis Publish
Jika menggunakan Platform Blogger, mungkin ingin publish posting secara
otomatis, sebenarnya bisa publish recent post, per label, atau random
post, berikut adalah otomatis publish artikel terbaru:
Masukan kode JavaScript berikut sebelum
</head>
di bagian head untuk recent posts.
Javascript Artikel Terbaru
Untuk
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEina8Y4FKHxU8xfETZiXGEBbf5kf2npdWN46_v7XV4rHv2ZBFLjl301Dcx8lzBu7sbeKOz95DsIsi3hVMTqS30FKB3hK6oBun62Tt972pHTFAJEYyI4j0Fr2l33bPkUObdjNH5XEN3F_m0/s1600/no+image.jpg dalah link image gambar, secara otomatis tampil jika pada posting tidak terdapat gambar, jangan lupa linknya, mungkin dimasa mendatang tidak berlaku
Masukan kode berikut disuatu tempat di bagian HTML body, contohnya setelah atau sebelum
<div class="content-wrapper">
atau
<div id="content-wrapper">
atau mungkin juga setelah
<div class="outer-wrapper">
atau yang similar (yang cocok tempatnya) seperti langkah manual diatas.
HTML dan JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='box_skitter_clean'>
<div class='box_skitter'>
<ul>
<script>
document.write(" <script src=\"/feeds/posts/default/?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script>
</ul>
</div>
</div>
<script>
$(document).ready(function() {
$('.box_skitter').skitter({
theme: "clean", // minimalist, round, clean, square, untuk default baris ini dihilangkan
numbers_align: "center",
dots: false, // true, false
preview: true, // true, false
controls: true, // true, false
controls_position: "rightBottom",
progressbar: true, // true, false
enable_navigation_keys: true, // true, false
animation:"randomSmart", // cube, cubeRandom, block, cubeStop, cubeHide, cubeSize, horizontal, showBars, showBarsRandom, tube, fade, fadeFour, paralell, blind, blindHeight, blindWidth, directionTop, directionBottom, directionRight, directionLeft, cubeStopRandom, cubeSpread, cubeJelly, glassCube, glassBlock, circles, circlesInside, circlesRotate, cubeShow, upBars, downBars, hideBars, swapBars, swapBarsBack, swapBlocks, cut, random, randomSmart
labelAnimation: "slideUp", // Label animation type, slideUp, left, right, fixed
interval: 3000, // waktu transisi
});
});
</script>
</b:if>
|
Oranye bisa dikostumisasi dengan banyak pilihan.
Warna Hijau
adalah baris kode pembuka dan penutup untuk menampilkan slider hanya di
homepage, pelajari lebih tentang trik menampilkan dan menyembunyikan
elemen
disini.
5.Save Template dan Lihat Hasilnya
No comments:
Post a Comment