HADI NUGROHO Blogs: Cara Membuat Image Slider/Slide Show dengan efek animasi (Slide show bagian 2)

Berikut ini cara membuat image slider dengan efek animasi:

1.Masukan kode CSS berikut diatas atau sebelum `]]></b:skin>` atau `</style>` di bagian head.

CSS

/* Skitter styles
----------------------------------------------- */
.box_skitter {
 position: relative;
 width:100%;
 max-width:1000px;
 height: 380px;
 background: #000;
}

.box_skitter img {
 min-width: 1000px;
 max-width: none;
 height:450px;
}

/* Tip for stildv */
.box_skitter ul {
 display: none;
}

.box_skitter .container_skitter {
 overflow: hidden;
 position: relative; 
 width:99%;
}

.box_skitter .image {
 overflow: hidden;
}

.box_skitter .image img {
 display: none;
}

/* Box clone
-------------------------------------------------------------- */
.box_skitter .box_clone {
 position: absolute;
 top: 0;
 left: 0;
 width: 100px;
 overflow: hidden;
 display: none;
 z-index: 20;
}

.box_skitter .box_clone img {
 position: absolute;
 top: 0;
 left: 0;
 z-index: 20; 
}

/* Navigation
-------------------------------------------------------------- */
.box_skitter .prev_button {
 position: absolute;
 top: 50%;
 left: 15px;
 z-index: 152;
 width: 42px;
 height: 42px;
 overflow: hidden;
 text-indent: -9999em;
 margin-top: -25px;
 -webkit-transition: all 0.2s;
 -moz-transition: all 0.2s;
 transition: all 0.2s; opacity:0.5!important;
}

.box_skitter .next_button {
 position: absolute;
 top: 50%;
 right: 15px;
 z-index: 152;
 width: 42px;
 height: 42px;
 overflow: hidden;
 text-indent: -9999em;
 margin-top: -25px;
 -webkit-transition: all 0.2s;
 -moz-transition: all 0.2s;
 transition: all 0.2s; opacity:0.5!important;
}

.box_skitter .prev_button:hover, .box_skitter .next_button:hover {
 opacity: 0.9 !important;
}

/* Numbers
-------------------------------------------------------------- */
.box_skitter .info_slide {
 position: absolute;
 top: 15px;
 left: 15px;
 z-index: 100;
 background: #000;
 color: #fff;
 font: bold 11px arial;
 padding: 5px 0 5px 5px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;
 opacity: 0.75;
}

.box_skitter .info_slide .image_number {
 background: #333;
 float: left;
 padding: 2px 10px;
 margin: 0 5px 0 0;
 cursor: pointer;
 -moz-border-radius: 2px;
 -webkit-border-radius: 2px;
 border-radius: 2px;
 -webkit-transition: all 0.2s;
 -moz-transition: all 0.2s;
 transition: all 0.2s;
}

.box_skitter .info_slide .image_number:hover {
 background: #000;
}

.box_skitter .info_slide .image_number_select, .box_skitter .info_slide .image_number_select:hover {
 background: #cc3333;
 float: left;
 padding: 2px 10px;
 margin: 0 5px 0 0;
}

/* Thumbs Change width and height to customization dimension thumb
-------------------------------------------------------------- */
.box_skitter .container_thumbs {
 position: relative;
 overflow: hidden;
 height: 50px;
}

.box_skitter .info_slide_thumb {
 height: 50px;
 -moz-border-radius: 0;
 -webkit-border-radius: 0;
 border-radius: 0;
 overflow: hidden;
 top: auto;
 top: 0;
 left: 0;
 padding: 0 !important;
 opacity: 1.0;
}

.box_skitter .info_slide_thumb .image_number {
 overflow: hidden;
 width: 100px;
 height: 50px;
 position: relative;
 margin: 0 !important;
 padding: 0 !important;
 -moz-border-radius: 0 !important;
 -webkit-border-radius: 0 !important;
 border-radius: 0 !important;
}

.box_skitter .info_slide_thumb .image_number img {
 position: absolute;
 top: -30px;
 left: -30px;
 height: 100px;
}

.box_skitter .box_scroll_thumbs {
 padding: 0;
}

.box_skitter .box_scroll_thumbs .scroll_thumbs {
 position: absolute;
 bottom: 60px;
 left: 50px;
 background: #ccc;
 background: -moz-linear-gradient(-90deg, #555, #fff);
 background: -webkit-gradient(linear, left top, left bottom, from(#555), to(#fff));
 width: 200px;
 height: 10px;
 overflow: hidden;
 text-indent: -9999em;
 z-index: 101;
 cursor: pointer;
 border: 0px solid #333;
}

/* Dots
-------------------------------------------------------------- */
.box_skitter .info_slide_dots {
 position: absolute;
 bottom: -30px;
 z-index: 151;
 padding: 5px 0 5px 5px;
 -moz-border-radius: 50px;
 -webkit-border-radius: 50px;
 border-radius: 50px;
}

.box_skitter .info_slide_dots .image_number {
 background: #333;
 float: left;
 margin: 0 5px 0 0;
 cursor: pointer;
 -moz-border-radius: 50px;
 -webkit-border-radius: 50px;
 border-radius: 50px;
 width: 18px;
 height: 18px;
 text-indent: -9999em;
 overflow: hidden;
 -webkit-transition: all 0.2s;
 -moz-transition: all 0.2s;
 transition: all 0.2s;
}

.box_skitter .info_slide_dots .image_number:hover {
 background: #000;
}

.box_skitter .info_slide_dots .image_number_select, .box_skitter .info_slide_dots .image_number_select:hover {
 background: #cc3333;
 float: left;
 margin: 0 5px 0 0;
}

/* Loading
-------------------------------------------------------------- */
.loading {
 position: absolute;
 top: 50%;
 right: 50%;
 z-index: 10000;
 margin: -16px -16px;
 color: #fff;
 text-indent: -9999em;
 overflow: hidden;
 background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXr9X-0-9GuR_8x2guvYbuytdG6dN5645KMWnFKZlvwchQHnLxSzupDwUMjHbmsf-HxbLY8zQYup-AbilpTiLcvKrSgihXxbS7Dx_nnDZqxNtGci0kAGC3kumAMdUO-1mvv0eGikn3C30/s1600/ajax-loader.gif") no-repeat left top;
 width: 32px;
 height: 32px;
}

/* Label
-------------------------------------------------------------- */

.box_skitter .label_skitter {
 z-index: 150;
 position: absolute;
 bottom: 10px;
 left: 0px;
 color: #fff;
 display: none;
 background: rgba(0,0,0,.6);
 padding: 5px;
 width: 80%!important;
}

.box_skitter .label_skitter a {
 padding-left: 10px;
 font: bold 16px 'arial narrow';
 text-transform: uppercase; 
 color: #00F5FF;
 display:inline-block;
}

.box_skitter .label_skitter a:hover {
 color: #F5FF00;
}

.box_skitter .label_skitter p {
 padding: 5px 10px;
 margin: 0;
 font: normal 13px tahoma;
}

.box_skitter .progressbar {
 background: #fff;
 position: absolute;
 top: 7px;
 left: 0px;
 height: 2px;
 width: 100%;
 z-index: 99;
}

/* Preview slide
-------------------------------------------------------------- */
.box_skitter .preview_slide {
 display: none;
 position: absolute;
 z-index: 152;
 bottom: 30px;
 left: -40px;
 width: 100px;
 height: 70px;
 background: none;
 border: 1px solid #222;
 -moz-box-shadow: rgba(0,0,0,0.7) 2px 2px 5px;
 -webkit-box-shadow: rgba(0,0,0,0.7) 2px 2px 5px;
 box-shadow: rgba(0,0,0,0.7) 2px 2px 5px;
 overflow: hidden;
}

.box_skitter .preview_slide ul {
 height: 70px !important;
 overflow: hidden !important;
 margin: 0 !important;
 list-style: none !important;
 display: block !important;
 position: absolute !important;
 top: 0;
 left: 0;
 padding:0;
}

.box_skitter .preview_slide ul li {
 width: 100px !important;
 height: 70px !important;
 overflow: hidden !important;
 float: left !important;
 margin: 0 !important;
 padding: 0 !important;
 position: relative !important;
 display: block !important;
}

.box_skitter .preview_slide ul li img {
 position: absolute !important;
 top: 0 !important;
 left: 0 !important;
 height: 70px !important;
 width: 100% !important;
}

/* Focus
-------------------------------------------------------------- */
#overlay_skitter {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 z-index: 9998;
 opacity: 1;
 background: #000;
}

.box_skitter .focus_button {
 position: absolute;
 top: 50%;
 z-index: 100;
 width: 42px;
 height: 42px;
 overflow: hidden;
 text-indent: -9999em;
 margin-top: -25px;
 opacity: 0;
 -webkit-transition: all 0.2s;
 -moz-transition: all 0.2s;
 transition: all 0.2s;
}

.box_skitter .play_pause_button {
 position: absolute;
 top: 50%;
 z-index: 151;
 width: 42px;
 height: 42px;
 overflow: hidden;
 text-indent: -9999em;
 margin-top: -25px;
 opacity: 0;
 -webkit-transition: all 0.2s;
 -moz-transition: all 0.2s;
 transition: all 0.2s;
}

.box_skitter .play_pause_button.play_button {
}

.box_skitter .play_pause_button:hover {
 opacity: 0.5 !important;
}

.box_skitter .focus_button:hover {
 opacity: 0.5 !important;
}

/* Example for dimenions
-------------------------------------------------------------- */
.box_skitter_clean {
 width: 100%;
 max-width: 1000px;
 height: 420px;
 margin:0 auto;
 margin-top: 20px;
 background: #fff
 margin-bottom: 10px;
}

/* Default theme
-------------------------------------------------------------- */
.box_skitter .focus_button, 
.box_skitter .next_button, 
.box_skitter .prev_button, 
.box_skitter .play_pause_button 
{
 display: block;
 background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWX_o_cr5gMOVSSmaebubfSqqCeBo68sES_b-L7yr-X5qGUNQTOYZGt1jej-_d8xoZxqzLeoBpwdjaWXNK6mwBJFaTMtj7Up2GGvoMBAobBb0bX2AUuvpR9Lri0hi__SppFjeha-XJwFg/s1600/sprite-default.png") no-repeat;
}

.box_skitter .next_button {
 background-position: -0px -42px;
 width: 42px;
 height: 42px;
}

.box_skitter .prev_button {
 background-position: -42px -42px;
 width: 42px;
 height: 42px;
}

.box_skitter .play_pause_button {
 background-position: -0px -0px;
 width: 42px;
 height: 42px;
}

.box_skitter .play_pause_button.play_button {
 background-position: -0px -84px;
 width: 42px;
 height: 42px;
}

.box_skitter .focus_button {
 background-position: -42px -0px;
 width: 42px;
 height: 42px;
}

/* Minimalist theme
-------------------------------------------------------------- */
.skitter-minimalist .prev_button, 
.skitter-minimalist .next_button, 
.skitter-minimalist .play_pause_button, 
.skitter-minimalist .focus_button 
{
 display: block;
 background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDElavrOWZLMLBz60HAmPJkH8IKfUfCcTOBVnAmTgBJMtGxNLksPfZTuXb3cAtYbqRbEaM3shSh1qdogby-Cn85MlzR7vSTG1lJYDSMai0eIcQR16mkLSo6wG7az5AcA96dURtQeDSyfs/s1600/sprite-minimalist.png") no-repeat !important;
}

.skitter-minimalist .prev_button {
 background-position: -0px -0px !important;
 width: 24px !important;
 height: 28px !important;
 left: 15px !important;
}

.skitter-minimalist .next_button {
 background-position: -0px -28px !important;
 width: 24px !important;
 height: 28px !important;
 right: 15px !important;
}

.skitter-minimalist .play_pause_button {
 background-position: -0px -74px !important;
 width: 18px !important;
 height: 18px !important;
}

.skitter-minimalist .play_pause_button.play_button {
 background-position: -0px -56px !important;
 width: 18px !important;
 height: 18px !important;
}

.skitter-minimalist .focus_button {
 background-position: -0px -92px !important;
 width: 18px !important;
 height: 18px !important;
}

.skitter-minimalist .info_slide {
 background: transparent;
}

.skitter-minimalist .info_slide .image_number {
 background: #000;
 box-shadow: rgba(255,255,255,0.2) 1px 1px 0;
 font-size: 12px;
 font-weight: normal;
}

.skitter-minimalist .info_slide .image_number:hover {
 background: #111;
}

.skitter-minimalist .info_slide .image_number_select, .skitter-minimalist .info_slide .image_number_select:hover {
 background: #cc3333;
}

.skitter-minimalist .info_slide_dots .image_number {
 width: 14px;
 height: 14px;
 box-shadow: rgba(255,255,255,0.2) 1px 1px 0;
}

/* Round theme
-------------------------------------------------------------- */
.skitter-round .prev_button, 
.skitter-round .next_button, 
.skitter-round .play_pause_button, 
.skitter-round .focus_button 
{
 display: block;
 background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnzFjBrnG0mNaKlD4iRdQguF-rY583qqYpR-ajLIjYwCDMK4jj79s7vwdsN6IvsQD8Mi7yRTu-ZmnYVQPSD9zjNpF5I0PHbREWGTevKr3XaELt7rJcbhfnTqw2Kmc2GFXe-9hHc4ZDviQ/s1600/sprite-round.png") no-repeat;
}

.skitter-round .prev_button {
 background-position: -0px -0px;
 width: 23px;
 height: 47px;
 left: -23px;
}

.skitter-round .next_button {
 background-position: -23px -0px;
 width: 23px;
 height: 47px;
 right: -23px;
}

.skitter-round .next_button:hover, .skitter-round .prev_button:hover {
 opacity: 0.5;
}

.skitter-round .play_pause_button {
 background-position: -0px -70px;
 width: 47px;
 height: 23px;
 top: 24px;
 left: 24px !important;
}

.skitter-round .play_pause_button.play_button {
 background-position: -0px -47px;
 width: 47px;
 height: 23px;
 top: 24px;
}

.skitter-round .focus_button {
 background-position: -0px -93px;
 width: 47px;
 height: 23px;
 top: 24px;
 left: 82px !important;
}

.skitter-round .info_slide {
 background: transparent;
}

.skitter-round .info_slide .image_number {
 background: #999;
 box-shadow: rgba(255,255,255,0.2) 1px 1px 0;
 font-size: 12px;
 font-weight: normal;
}

.skitter-round .info_slide .image_number:hover {
 background: #333;
}

.skitter-round .info_slide .image_number_select, .skitter-round .info_slide .image_number_select:hover {
 background: #111;
}

.skitter-round .info_slide_dots .image_number {
 width: 14px;
 height: 14px;
 box-shadow: rgba(255,255,255,0.2) 1px 1px 0;
 background: #999;
}

.skitter-round .info_slide_dots .image_number:hover {
 background: #333;
}

.skitter-round .info_slide_dots .image_number_select, .skitter-round .info_slide_dots .image_number_select:hover {
 background: #111;
}

.skitter-round .progressbar {
 top: -10px;
 left: 0px;
 background: #333;
 box-shadow: rgba(255,255,255,0.3) 1px 1px 0;
}

/* Clean theme
-------------------------------------------------------------- */
.skitter-clean .prev_button, 
.skitter-clean .next_button, 
.skitter-clean .play_pause_button, 
.skitter-clean .focus_button 
{
 display: block;
 background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUn2jpnleGZr2dRNOid6kMfaMoN4mV-1ur1FovfmfecGJAoxxK3BoHQ77iCKPbSFSa5PoITIiAwCKxY5NxE-JrfgsOfLXes5aBdNL4eRNvqreaECR6xhd8luxIE8JNFudAkw6MXkxuEZU/s1600/sprite-clean.png" no-repeat;
}

.skitter-clean .prev_button {
 background-position: 0px 0px;
 width: 47px;
 height: 46px; 
}

.skitter-clean .next_button {
 background-position: 0px -46px;
 width: 47px;
 height: 46px;
}

.skitter-clean .play_pause_button {
 background-position: -0px -133px;
 width: 41px;
 height: 41px;
}

.skitter-clean .play_pause_button.play_button {
 background-position: -0px -92px;
 width: 41px;
 height: 41px;
}

.skitter-clean .focus_button {
 background-position: -0px -174px;
 width: 41px;
 height: 41px;
}

.skitter-clean .info_slide {
 background: transparent;
}

.skitter-clean .info_slide .image_number {
 background: #fff;
 box-shadow: rgba(0,0,0,0.2) 1px 1px 0;
 font-size: 12px;
 font-weight: normal;
 color:#333;
}

.skitter-clean .info_slide .image_number:hover {
 background: #ccc;
}

.skitter-clean .info_slide .image_number_select, .skitter-clean .info_slide .image_number_select:hover {
 background: #111;
 color:#fff;
}

.skitter-clean .info_slide_dots {
 bottom: -30px;
 background: rgba(255,255,255,0.8);
 box-shadow: rgba(0,0,0,0.3) 1px 1px 0;
}

.skitter-clean .info_slide_dots .image_number {
 width: 14px;
 height: 14px;
 background: #999;
}

.skitter-clean .info_slide_dots .image_number:hover {
 background: #333;
}

.skitter-clean .info_slide_dots .image_number_select, .skitter-clean .info_slide_dots .image_number_select:hover {
 background: #111;
}

.skitter-clean .progressbar {
 top: 5px;
 left: 0px;
 background: #fff;
 box-shadow: rgba(0,0,0,0.5) 1px 1px 0;
}

/* Square theme
-------------------------------------------------------------- */

.skitter-square .play_pause_button, 
.skitter-square .next_button, 
.skitter-square .focus_button, 
.skitter-square .prev_button 
{
 display: block;
 background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs9ix89VyckDCLoAHszPm69YVloZGS8tDUVXWDIZmySIZDckesyUazISJqNF-o6nV-4EpeTj-FLZrhvaUuUTpoZtcQwRm3phVyynm_aG3KyGxNOa5Vc6p6GCrhKY3LHhr2dHG9urshv6A/s1600/sprite-square.png") no-repeat;
}

.skitter-square .play_pause_button {
 background-position: -55px -0px;
 width: 55px;
 height: 55px;
 top: 10px !important;
 left: 10px !important;
 bottom: auto !important;
 right: auto !important;
 margin-top:0;
}

.skitter-square .play_pause_button.play_button {
 background-position: -0px -0px;
 width: 55px;
 height: 55px;
}

.skitter-square .focus_button {
 background-position: -55px -55px;
 width: 55px;
 height: 55px;
 top: 10px !important;
 left: 65px !important;
 bottom: auto !important;
 right: auto !important;
 margin-top:0;
}

.skitter-square .next_button {
 background-position: -0px -55px;
 width: 55px;
 height: 55px;
 top: auto;
 left: auto;
 bottom: 10px;
 right: 10px;
}

.skitter-square .prev_button {
 background-position: -0px -110px;
 width: 55px;
 height: 55px;
 top: auto;
 left: auto;
 bottom: 10px;
 right: 65px;
}

.skitter-square .info_slide {
 background: transparent;
}

.skitter-square .info_slide .image_number {
 background: #fff;
 box-shadow: rgba(0,0,0,0.2) 1px 1px 0;
 font-size: 12px;
 font-weight: normal;
 color:#333;
}

.skitter-square .info_slide .image_number:hover {
 background: #ccc;
}

.skitter-square .info_slide .image_number_select, .skitter-square .info_slide .image_number_select:hover {
 background: #111;
 color:#fff;
}

.skitter-square .info_slide_dots .image_number {
 width: 14px;
 height: 14px;
 box-shadow: rgba(255,255,255,0.2) 1px 1px 0;
 background: #ccc;
}

.skitter-square .info_slide_dots .image_number:hover {
 background: #999;
}

.skitter-square .info_slide_dots .image_number_select, .skitter-square .info_slide_dots .image_number_select:hover {
 background: #555;
}

.skitter-square .progressbar {
 top:0 !important;
 left: 0 !important;
 width: 100%;
 background: #fff;
 border-radius: 0;
 height: 2px;
}

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.

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

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(&quot; &lt;script src=\&quot;/feeds/posts/default/?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
</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

Sumber

HADI NUGROHO Blogs

Pages

Wednesday, July 1, 2015

Cara Membuat Image Slider/Slide Show dengan efek animasi (Slide show bagian 2)

1.Masukan kode CSS berikut diatas atau sebelum `]]></b:skin>` atau `</style>` di bagian head.

2.Masukan kode Jquery dan Jquery-easing script berikut diatas atau sebelum `</head>`

3.Masih di bagian head, masukan kode JavaScript berikut diatas atau sebelum `</head>`

4.Selanjutnya, harap diperhatikan ada 2 metode untuk menerapkannya dalam HTML, yaitu metode manual dan otomatis publish posting.

5.Save Template dan Lihat Hasilnya

No comments:

Post a Comment

About Me

Pages

Wednesday, July 1, 2015

Cara Membuat Image Slider/Slide Show dengan efek animasi (Slide show bagian 2)

1.Masukan kode CSS berikut diatas atau sebelum ]]></b:skin> atau </style> di bagian head.

2.Masukan kode Jquery dan Jquery-easing script berikut diatas atau sebelum </head>

3.Masih di bagian head, masukan kode JavaScript berikut diatas atau sebelum </head>

4.Selanjutnya, harap diperhatikan ada 2 metode untuk menerapkannya dalam HTML, yaitu metode manual dan otomatis publish posting.

5.Save Template dan Lihat Hasilnya

No comments:

Post a Comment

1.Masukan kode CSS berikut diatas atau sebelum `]]></b:skin>` atau `</style>` di bagian head.

2.Masukan kode Jquery dan Jquery-easing script berikut diatas atau sebelum `</head>`

3.Masih di bagian head, masukan kode JavaScript berikut diatas atau sebelum `</head>`