Vertical Image Slider : Auto Reverse

Vertical Image Slider bisa menjadi pilihan lain setelah di posting sebelumnya telah kita bahas pembuatan Image Slider dalam formasi horizontal. Kalau slider horizontal menggunakan jQuery sebagai pilar utama pembentuk slider, maka untuk kali ini kita hanya menggunakan sebuah javascript yang juga relatif tidak bermuatan besar. Sangat simple dan praktis untuk menerapkannya dalam blog. Dijamin dalam hitungan menit maka vertical slider ini sudah mampu terpampangkan dalam blog.

Kode CSS Vertical Image Slidder :

.newsslider{
        position:relative;
        overflow:hidden; 
        border-top:20px solid #666;
        border-left:2px solid #666;
        border-right:2px solid #666;
        border-bottom:2px solid #666;
        border-radius:15px; 
        height:377px;  
        width:190px; 
        background:#aaa url(https://sites.google.com/site/gubhugreyot/bgvert/bgBlackYellowGradV300H5.gif) top left repeat-x; 
        background: #d0d7e5;
        background:-moz-linear-gradient(top, #d0d7e5 0%, #60676d 14%, #7a8389 18%, #28343b 100%);
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#d0d7e5), color-stop(14%,#60676d), color-stop(18%,#7a8389), color-stop(100%,#28343b));
        background:-webkit-linear-gradient(top, #d0d7e5 0%,#60676d 14%,#7a8389 18%,#28343b 100%);
        background:-o-linear-gradient(top, #d0d7e5 0%,#60676d 14%,#7a8389 18%,#28343b 100%);
        background:-ms-linear-gradient(top, #d0d7e5 0%,#60676d 14%,#7a8389 18%,#28343b 100%);
        background:linear-gradient(top, #d0d7e5 0%,#60676d 14%,#7a8389 18%,#28343b 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0d7e5', endColorstr='#28343b',GradientType=0 );
        margin-bottom:20px;
        
} 
.newsslidercontent{
        position:absolute;
}
.newssection{
        padding:8px; 
        height:350px; 
        margin-bottom: 20px;
        color:#000;
        border:1px solid #aaa;
        font-family:Arial;
        font-size:11px;
        font-weight:normal;
}
.newssection h4{
        font-size:11px;;
        color:#900;
        margin:0;
        padding:0;
} 
.newssection img{
        height:200px;
        width:158px; 
        border:6px solid #222;
        padding:1px; 
        background:#999;
        margin:6px 0 2px 0;
}
.newssection p{
        margin:0 0 6px 0;
        padding:5px;
        display:block;
        width:160px;
        font-family:Arial 12px;
        color:#fff;
        font-weight:normal;
}
.newssection p a{
        color: #FFCC00;
        font-weight:bold;
        text-decoration:none;
}
.newssection p a:hover{
        color: #00CCFF;
}

Javascript-1 :

<script type="text/javascript">
//<![CDATA[
var SLIDETIMER = 2; /* lakukan setting ulang waktu di sini */
var SLIDESPEED = 4; /* lakukan setting ulang kec. slider di sini */
var SCROLLTIMER = 2; /* lakukan setting ulang waktu scroll di sini */
var SCROLLSPEED = 4; /* lakukan setting ulang kec. di sini */
var STARTINGOPACITY = 70; /* lakukan setting ulang opacity di sini */
function slideContent(id,prefix,timer) {
var div = document.getElementById(id);var slider = div.parentNode;
clearInterval(slider.timer);slider.section = parseInt(id.replace(/\D/g,''));
slider.target = div.offsetTop;slider.style.top = slider.style.top || '0px';
slider.current = slider.style.top.replace('px','');
slider.direction = (Math.abs(slider.current) > slider.target) ? 1 : -1;
slider.style.opacity = STARTINGOPACITY * .01;
slider.style.filter = 'alpha(opacity=' + STARTINGOPACITY + ')';
slider.timer = setInterval( function() { slideAnimate(slider,prefix,timer) }, SLIDETIMER);}
function slideAnimate(slider,prefix,timer) {var curr = Math.abs(slider.current);
var tar = Math.abs(slider.target);var dir = slider.direction;
if((tar - curr <= SLIDESPEED && dir == -1) || (curr - tar <= SLIDESPEED && dir == 1)) {
slider.style.top = (slider.target * -1) + 'px';slider.style.opacity = 1;
slider.style.filter = 'alpha(opacity=100)';clearInterval(slider.timer);
if(slider.autoscroll) {setTimeout( function() { autoScroll(slider.id,prefix,timer) }, timer * 1000);}
} else {var pos = (dir == 1) ? parseInt(slider.current) + SLIDESPEED : slider.current - SLIDESPEED;
slider.current = pos;slider.style.top = pos + 'px';}}
function scrollContent(id,dir) {var div = document.getElementById(id);clearInterval(div.timer);
var sections = div.getElementsByTagName('div');var length = sections.length;var limit;
if(dir == -1) {limit = 0;} else {if(length > 1) {limit = sections[length-1].offsetTop;
} else {limit = sections[length-1].offsetHeight - div.parentNode.offsetHeight + 20;}}
div.style.opacity = STARTINGOPACITY * .01;
div.style.filter = 'alpha(opacity=' + STARTINGOPACITY + ')';
div.timer = setInterval( function() { scrollAnimate(div,dir,limit) }, SCROLLTIMER);}
function scrollAnimate(div,dir,limit) {div.style.top = div.style.top || '0px';
var top = div.style.top.replace('px','');if(dir == 1) {if(limit - Math.abs(top) <= SCROLLSPEED) {
cancelScroll(div.id);div.style.top = '-' + limit + 'px';} else {
div.style.top = top - SCROLLSPEED + 'px';}
} else {if(Math.abs(top) - limit <= SCROLLSPEED) {cancelScroll(div.id);div.style.top = limit + 'px';
} else {div.style.top = parseInt(top) + SCROLLSPEED + 'px';}}}
function cancelScroll(id) {var div = document.getElementById(id);div.style.opacity = 1;
div.style.filter = 'alpha(opacity=100)';clearTimeout(div.timer);}
function autoScroll(id,prefix,timer,restart) {var div = document.getElementById(id);
div.autoscroll = (!div.autoscroll && !restart) ? false : true;if(div.autoscroll) {
var sections = div.getElementsByTagName('div');var length = sections.length;
div.section = (div.section && div.section < length) ? div.section + 1 : 1;
slideContent(prefix + '-' + div.section,prefix,timer);}}
function cancelAutoScroll(id) {var div = document.getElementById(id);div.autoscroll = false;}
//]]>
</script>

Javascript-2 :

<script type="text/javascript">
autoScroll('newsslider','newssection','3 ',true);
</script>

xHTML Vertical Image Slidder :

<div class="newsslider">
<div class="newsslidercontent" id="newsslider">
<div id="newssection-1" class="newssection upper"><h4>Judul-1</h4>Tuliskan teks di sini ! ...<img src="Image1.jpg" /><p><a href="Link-1">Read More...</a> Tuliskan teks di sini !</p>
</div>
<div id="newssection-2" class="newssection upper"><h4>Judul-2</h4> Tuliskan teks di sini !<img src="Image2.jpg" /><p><a href="Link-2">Read More...</a> Tuliskan teks di sini !</p></div>
<div id="newssection-3" class="newssection upper"><h4>Judul-3</h4> Tuliskan teks di sini !<img src="Image3.jpg" /><p><a href="Link-3">Read More...</a> Tuliskan teks di sini !</p>
</div>
<div id="newssection-4" class="newssection upper"><h4>Judul-4</h4> Tuliskan teks di sini !<img src="Image4.jpg" /><p><a href="Link-4">Read More</a> Tuliskan teks di sini !</p>
</div>
<div id="newssection-5" class="newssection upper"><h4>Judul-5</h4> Tuliskan teks di sini !<img src="Image5.jpg" /><p><a href="Link-5">Read More</a> Tuliskan teks di sini !</p>
</div>
<div id="newssection-6" class="newssection upper"><h4>Judul-6</h4> Tuliskan teks di sini !<img src="Image6.jpg" /><p><a href="Link-6">Read More</a> Tuliskan teks di sini !</p>
</div>
</div></div>

1. Login ke Blogger.
   
   • Upload javascript Rounded Corners dan buat dalam bentuk link seperti yang terlihat pada box ke-3.
   • Tuliskan "User Name" (gmail) atau tuliskan "Email Address" (non gmail).
   • Tuliskan Password.
   • Klik "Sign in"
2. Beberapa saat setelah klik sign in anda akan menjumpai halaman "Dasbor (Dasboard)".
   Klik "Rancangan (Design)".
3. Kembali halaman baru akan terbuka, klik "Edit HTML".
4. Sebuah halaman baru kembali kita jumpai. Halaman ini berisi 3 (tiga) bagian:
   
   • Backup/Restore Template » berisi fitur untuk melakukan backup template.
     Lakukan Backup template setiap kali akan melakukan penambahan atau pengurangan kode (xHTML, kode CSS dan javascript) melalui "Box Edit Template".
   • Edit Template » berisi sebuah box besar yang di dalamnya berisikan kode html penyusun blog.
   • Old Templates » berisi template lama blogger (Template Tata Letak & Template Klasik.
5. Cari kode ]]></b:skin> pada "Box Edit Template".
6. Copy kode CSS dan letakkan di atas ]]></b:skin>
7. Copy javascript-1 kemudian letakkan di bawah ]]></b:skin>
8. Cari kode </body>, kemudian copy dan pastekan javascript-2 di atasnya.
9. Klik "Simpan Template (Save Template)".
10. Gunakan xHTML saat posting atau manfaatkan melalui penambahan gadget.

Catatan/Keterangan :

1. Cara backup template, cara mencari kode dan cara menyimpan berbagai kode html dapat dibuka melalui Special Tutorials yang terletak pada menu sebelah kiri halaman.
2. Setting terhadap beberapa variable slider dapat dilakukan di javascript.

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini:

Update » Senen WAGE, Maret, 26, 2012

» Happy Blogging - gubhugreyot «