Yıl boyunca bir sürü challenge'a katılıyoruz ve bir yerden sonra bu challengeları düzen içinde ilerletmek gerçekten zorlaşıyor. Şahsen ben blogumda eski challenge yazılarını güncellemeyi çoğu zaman unutuyorum. Öyle ki gözden ırak olan gönülden de ırak oluyor ve bazen challenge tamamen aklımdan çıkıp gidiyor.
İşte tam bu noktada imdadımıza ilerleme çubuğu imdadımıza koşuyor! Yabancı bloglarda hep gördüğüm bu ilerleme çubuğu aslında gayet basit birkaç koddan oluşuyormuş. Üşengeçliğimi yendim ve o kodları sizlerle paylaşmaya karar verdim.
İlerleme çubuğunun iki farklı versiyonu var. Biri yukarıda paylaştığım gibi resimli olan diğeri de resimsiz olan. Sidebarımda resimsiz olanı tercih ettim çünkü resimli hali oldukça fazla yer kaplıyor. O ay içinde neler okuduğumu, izlediğimi ve daha birçok şeyi paylaştığım Ay Sonu Raporu içinse tercihimi resimli olandan yana kullanacağım. Şimdi gelelim kodlara.
Resimli İlerleme Çubuğu Kodu
<a href="CHALLENGE LİNKİ"><img title="CHALLENGE'IN ADI" src="CHALLENGE RESMİNİN LİNKİ" width="190" /></a>
<div style="width: 185px; height: 15px; background: none repeat scroll 0% 0% rgb(255, 255, 255); border: 1px solid rgb(0, 0, 0);"><div style="width: 0%; height: 15px; background: none repeat scroll 0% 0% rgb(137, 197, 96); font-size: 8px; line-height: 8px;"></div></div>
0/12 books
Evet ana kodumuz bu. Sidebarınızda kullanmak istiyorsanız Yerleşim>Gadget Ekle>HTML/JavaScript'e tıklıyor ve açıklama kısmına kodumuzu yapıştırıyoruz.Şimdi kodu kendi blogumuza ve zekimize göre şekillendirelim.
- Yukarıdaki kodda kırmızıyla gösterdiğim Challenge Linki kısmına resme tıklandığında gidilmesi istenen yazının linkini yapıştırın. 2017 Reading Challenge Türkçe yazıma gidilmesini istediğim için http://periodiclibrary.blogspot.com.tr/2016/12/2017-popsugar-reading-challenge-turkce.html bunu yapıştırdım ben.
- Turuncuyla gösterdiğim Challenge'ın Adı kısmına da katıldığınız challenge'ın adını yazın. 2017 Reading Challenge Türkçe yazdım ben.
- Yeşille gösterdiğim Challenge Resminin Linki için katıldığınız challenge'ın resmine gelip sağ tık yaptıktan sonra resim adresini kopyalayıp yeşille gösterdiğim yere yapıştırabilirsiniz ya da bilgisayarınızda kayıtlı olan bir resmi eklemek için imgur'dan istediğiniz resmi yükleyip verilen linki yapıştırabilirsiniz. Ben imgurdan istediğim resmi yükledim ve verdiği şu linki http://i.imgur.com/Evdn7pf.png yeşil kısma yapıştırdım.
- Maviyle gösterdiğim ilerleme çubuğunun çerçevesinin rengi. RGB renk kodlarını kullanarak istediğiniz renk yapabilirsiniz çerçeveyi. Ben su yeşili yapmak istediğim için (0, 0, 0) yerine (127, 199, 175) yazdım. Siz de colorspire ile istediğiniz rengi seçip R, G ve B'nin karşılarındaki sayıları sırasıyla (0, 0, 0) yerine yazabilirsiniz.
- Sarıyla gösterdiğim kısımda biraz matematik yapmamız gerekecek. Yüzde kaç ilerlediğimizi hesaplayıp sıfır yerine yazıyoruz. 40 kitaptan birini okuduğum için benimki yüzde 2.5 oluyor. 2.5% şeklinde yazıyoruz.
- Morla gösterdiğim kısım da ilerlemenin hangi renk olduğunu belirleyen yer. Ben çerçevem ile ilerlemenin aynı renk olması için su yeşilinin kodunu ( (127, 199, 175) ) kullandım. Yukarıda anlattığım şekilde siz de istediğiniz rengi seçebilirsiniz.
- Pembeyle gösterdiğim son kısım da challengedaki hedefimizi ve bu hedefimizi ne kadar tamamladığımızı gösteren kısım. Ben 2017 Reading Challengeda 40 madde olduğu ve 1 tanesini tamamladığım için 1/40 yazdım.
Ta-da! Resimli ilerleme çubuğunuz hazır! Şimdi de resimsiz olana bakalım birlikte.
Resimsiz İlerleme Çubuğu Kodu
<a href="CHALLENGE LİNKİ">CHALLENGE'IN ADI</a>
<div style="width: 185px; height: 15px; background: none repeat scroll 0% 0% rgb(255, 255, 255); border: 1px solid rgb(127, 199, 175);"><div style="width: 2.5%; height: 15px; background: none repeat scroll 0% 0% rgb(127, 199, 175); font-size: 8px; line-height: 8px;"></div></div>
1/40 books
Yukarıda anlattığım şekilde renkli kısımları kendinize göre düzenledikten sonra resimsiz ilerleme çubuğunuz hazır olucak!
Eğer alt alta ilerleme çubuğu eklemek istiyorsanız aralarına <br> kodunu yapıştırmak şartıyla ilerleme çubuklarının kodlarını alt alta ekleyebilirsiniz.
İlk defa böyle bir yazı yazıyorum, umarım yeterince açıklayıcı olmuşumdur. Gereksiz yere uzattığım ya da gözümden kaçan noktalar varsa da affınıza sığınıyorum. Kafanıza takılan bir yer olursa çekinmeden sorabilirsiniz. Keyifli bloglamalar!^^
Eğer alt alta ilerleme çubuğu eklemek istiyorsanız aralarına <br> kodunu yapıştırmak şartıyla ilerleme çubuklarının kodlarını alt alta ekleyebilirsiniz.İlk defa böyle bir yazı yazıyorum, umarım yeterince açıklayıcı olmuşumdur. Gereksiz yere uzattığım ya da gözümden kaçan noktalar varsa da affınıza sığınıyorum. Kafanıza takılan bir yer olursa çekinmeden sorabilirsiniz. Keyifli bloglamalar!^^
