Progress Bar Oluşturmak

Merhabalar.
Blogger Destek Merkezi üzerinde ilk yazım. Umarım faydalı ve güzel işler başarırız.
Bu yazıda size nasıl progress bar oluşturacağınızı anlatacağım. Her şey bittiğinde şöyle bir görüntü elde edebileceksiniz:

Peki bunu nerede kullanabiliriz? En basitinden makale yayınladığınız ya da derleme yaptığınız bloglarınızda mevcut projenizin durumunu gösterebilirsiniz. Fikir sizin.

Öncelikle şu kodları <head>...</head> arasına yerleştirelim.


<!-- Progess bar widget, by Matthew Harvey (matt at smallish.com) -->
<!-- Licensed under a Creative Commons Attribution-Share Alike 2.5
License (http://creativecommons.org/licenses/by-sa/2.5/) -->
<style type="text/css">
div.smallish-progress-wrapper
{
/* Don't change the following lines. */
position: relative;
border: 1px solid black;
}

div.smallish-progress-bar
{
/* Don't change the following lines. */
position: absolute;
top: 0; left: 0;
height: 100%;
}
div.smallish-progress-text
{
/* Don't change the following lines. */
text-align: center;
position: relative;
/* Add your customizations after this line. */
}
</style>
<script type="text/javascript">
function drawProgressBar(color, width, percent)
{
var pixels = width * (percent / 100);

document.write('<div class="smallish-progress-wrapper" style="width: ' + width + 'px">');
document.write('<div class="smallish-progress-bar" style="width: ' + pixels + 'px; background-color: ' + color + ';"></div>');
document.write('<div class="smallish-progress-text" style="width: ' + width + 'px">' + percent + '%</div>');
document.write('</div>');
}
</script>


Daha sonra progress barı nereye koyacağınıza karar verin ve şu kodları yapıştırın:

<script type="text/javascript">drawProgressBar('#987654', 200, 34);</script>

Buradaki değiştirebileceğiniz değerler:
200: Progress barın genişliği
#987654: Progress barın dolgu rengi
34: Progress barın % değeri

Kolay gelsin.

0 yorum:

 
 
OrtayiPisletenV1 - Copyrgiht 2013 - Tüm haklarımı annem kaldırdı - Tema Yapımcısı: TanerC.