Challengelardaki Başarınızı Göstermek İçin Blogunuza Şık İlerleme Çubuğu Ekleyin!
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!^^
20 yorum
Çok güzel ve faydalı bir yazı olmuş, şahsen ben böyle şeyler olduğunu bilmiyordum, çok hoşuma gitti :):) Kodlarla ilgili şeyler gözümü hep korkutmuştur, bunda da biraz o tereddütü yaşadım ama çok güzel ve açık anlatmışsın, sanırım bir ara cesaretimi toplayıp deneyeceğim :):) Sevgilerle :)
YanıtlaSilTeşekkür ederim beğenmene çok sevindim :')) Benim de çoğu zaman gözümü korkutuyorlar ama adım adım gidince o kadar da korkunç olmadıkları ortaya çıkıyor :D
SilAaa bak ben ilk defa görüyorum bu sistemi! Oldukça işe yarar görünüyor. Deneyeceğim. Teşekkürler :)
YanıtlaSilUmarım işine yarar :')) Maratonlarda da kullanılabilir sanki :>
SilDenedim maraton için zaten :D güzel oldu valla. Ben onaylıyorum! :P
SilMaraton yazısını merakla bekliyorum o halde :D
SilOnayı da kaptım tutmayın beni :D
Vaaaay supermis bu Eslem! Doner donmez ayarlayacagim ben de! Cok tesekkur ederim kendi adima, harikasin ^.^
YanıtlaSilYaa çok teşekkürler Gözde :')) Hoşuna gittiğine sevindim, rica ederim!^^
Silİyi günlerde kullan tatlış <3
Çok güzle ve detaylı anlatmışsınız teşekkürler. Bloga eklenti düşünüyorum :)
YanıtlaSilRica ederim :)) İşine yararsa ne mutlu bana ^___^
SilBence çok faydalı bir yazı olmuş. ellerine sağlık. İlerleyen zamanlarda katıldığım çelınçlarda kullanabilirim. :-)
YanıtlaSilÇok teşekkürler Şule :)) En kısa sürede birinin challenge başlatmasını diliyorum o halde :D Şimdiden güle güle kullan :)
SilÇok güzelmis. Ben okuma challenge i yapamasam da baska yerde kullanabilirim belki.
YanıtlaSilÇok teşekkürler :)) Birçok şeye uyarlanabilir diye düşünüyorum :))
SilKodlarla aram iyi olmasa da, bunu yapabilirim sanıyorum :)) Çok teşekkür ederiiz :))
YanıtlaSilTakıldığınız herhangi bir yer olursa seve seve yardımcı olmaya çalışırım :))
SilRica ederim, güle güle kullanın ^___^
Çok ayrıntılı açıklamışsın, dahası aşırı hoş ve zarif duruyor Rin. ^^
YanıtlaSilhatta kodlarla arası sıfıra yakın ben bile, yapabileceğimi hissettim.
Bloğa el atmışken deneyeceğim. Çok teşekkürler. :)
Çok teşekkürler Riv, beğendiğine sevindim :')
SilYa ben yaptıysam herkes yapar gibi geliyor bana :D Rica ederim, güle güle kullan <3
Guzel ve faydalı bi ryazı olmus :D
YanıtlaSilBeğenmene sevindim, teşekkürler ^____^
SilBir merhaba, iyi günler ya da sağlıcakla kalın da kafi!