İçeriğe git


Resim
- - - - -

Blue post eklemek


  • Please log in to reply
Bu konuya 3 yanıt gönderildi

#1 Ezekeel

Ezekeel

    Genel Yönetici

  • Executives
  • 9.313 İleti

Yazma tarihi: 20 Haziran 2013 - 10:05 ÖS

Blue post koyulacak olursa daha güzel gözükmesi için foruma blue post özelliği yapayım dedim. CSS ile MMO-Champion'dakinin aynısını yapmak kolay ama herkesin kullanabilmesi için BBCode'a dönüştürerek koymak gerekiyor ki bazı açılardan beni kısıtladı ve zorladı. Yine de fena olmadı diye düşünüyorum.

Örnek:

Blizzard'dan çeviri

Başlık
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tincidunt neque neque, nec ornare risus bibendum ac. Nullam laoreet augue varius, feugiat nisl in, placerat arcu. Sed hendrerit tincidunt augue et aliquam. Duis dignissim ipsum lorem, viverra sodales felis vehicula non. Sed ultrices egestas leo, in pellentesque ante ullamcorper sed. Pellentesque vitae ultricies erat. Etiam blandit sapien id odio viverra fringilla. Sed mollis dictum rhoncus. Suspendisse ac semper elit.
Not: Etiam ut feugiat erat, sed venenatis tellus. Mauris lacus tortor, convallis vitae pretium sed, interdum sit amet libero.


Nasıl yapılır?

En azından BBCode ile haşır neşir olduysanız büyük ihtimalle olayı hemen kapacaksınız(ve detaylı anlatımdan dolayı sıkılacaksınız, bu yüzden göz gezdirip bilmediğiniz kısımları okuyun). Tabii ben herkesin anlayabilmesi için olabildiğince açık anlatmaya çalışacağım.

Kod hali:

[bp][bpust]Blizzard'dan çeviri[/bpust]
[bpb]Başlık[/bpb]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tincidunt neque neque, nec ornare risus bibendum ac. Nullam laoreet augue varius, feugiat nisl in, placerat arcu. Sed hendrerit tincidunt augue et aliquam. Duis dignissim ipsum lorem, viverra sodales felis vehicula non. Sed ultrices egestas leo, in pellentesque ante ullamcorper sed. Pellentesque vitae ultricies erat. Etiam blandit sapien id odio viverra fringilla. Sed mollis dictum rhoncus. Suspendisse ac semper elit.
[bpi]Not: Etiam ut feugiat erat, sed venenatis tellus. Mauris lacus tortor, convallis vitae pretium sed, interdum sit amet libero.[/bpi]
[/bp]

Şimdi parçalara ayırarak inceleyelim:

Önce genel mantık:

BBCode da diğer dillerde olduğu gibi tagler kullanır ki aslında BBCode HTML'in forumlar için kısıtlanıp basitleştirilmiş hali gibi bir şeydir. Eğer bir yazıya bir özellik vermek istiyorsanız ilgili özelliğin taglerini ilgili yazının başına ve sonuna(açma ve kapama) koyarsınız. Örneğin ben bir yazıyı kalın yapmak istiyorsam şu şekilde yaparım:

hede [b]kalın olacak yazı[/b] hödö

Gördüğünüz gibi özellik vermek istediğimiz yazıyı tagler arasına sıkıştırdık. Bu şekilde kod başladığı yerden itibaren bitirilen yere kadar her şeyi kalın yazar. Mutlaka tagleri kapamalıyız, yoksa hatalar çıkar. Ayrıca gördüğünüz gibi kapama taginde fazladan bir "/" bulunuyor ki bu sayede onun kapama mı açma mı olduğunu anlıyoruz. Şimdi blue post kısmına gelelim.

Blue post wrapperı:

Kod:

Resmi ekleyen

Sonuç:


hede hödö



Gördüğünüz gibi "bp" ve "/bp" tagleri blue post içeriğini sarıp sarmalayarak her şeyi uçları yuvarlatılmış bir pencereye alıp yazı rengini otomatik olarak mavi yapıyor. Blue post koymak istiyorsanız bu tagleri kullanmanız zorunlu. Dammit'ten Blizz ikonunu editöre koymasını istedim, koyulursa tüm yazıyı seçip ikona basarak da aynı şeyi yapmış olacaksınız. Bu arada bu kodlar özel yaratılmış BBCode olduklarından görsel editörde de kodları gördüğünüz editörde de gözükürler ve ikisine de kod halini yazabilirsiniz, görsel halini görmek istiyorsanız önizlemesine bakabilirsiniz.

Edit: Evet, artık editörde alıntı ve twitter ikonlarının ortasında Blizz ikonu var(sığması için çok küçültmek zorunda kaldım, biraz büzüştü), orayı da kullanabilirsiniz.

Blue post üst kısmı:

Kod:

Resmi ekleyen

Sonuç:

Blizzard'dan çeviri
hede hödö


Gördüğünüz gibi yukarıdakinden farklı olarak bunda Blizz ikonlu bir üst kısım var. Sadece "bpust" tagleri arasına üst kısımda yazmasını istediğiniz şeyi yazın, geri kalan her şey zaten ayarlı. Burada önemli bir nokta var ki üst kısım mutlaka wrapper tagleri arasında olmalı. Ayrıca normalde taglerin aynı satırda olması bir şey ifade etmez ama BBCode'un bir sıkıntısı var, "bp", "bpust" ve üst kısımda yazmasını istediğiniz başlık mutlaka tek satırda olmalı, diğer türlü boşluklar oluşuyor. Kod kısmında "/bpust" tagi de aynı satırda ama o bir alt satırda olsa da sorun olmuyor.

Ha bu kısmı kullanmak zorunda da değilsiniz ama tabii daha iyi görünür, size kalmış bir şey. Aslında bu kısma default bir başlık verip "bp" tagi içine dahil edebilirdim, sonra o default yazı da isteğe göre değiştirildi. Neyse.

Blue post bold yazısı:

Kod:

Resmi ekleyen

Sonuç

Blizzard'dan çeviri

hede hödö


Bu şekilde istediğiniz yazıyı blue post tarzında kalın olarak yazabilirsiniz. Normalde yazının hem rengini hem de kalınlığını değiştirmeniz gerekir, tek tagle halletmiş olacaksınız.

Blue post italik yazısı:

Kod:

Resmi ekleyen

Sonuç:

Blizzard'dan çeviri

hede hödö


Burada da "bpi" tagi ile istediğimiz yazıyı blue post tarzı italik yapıyoruz. Hem yazıyı yatık yapmak hem de rengini değiştirmek yerine yine tek tagle işi hallediyoruz.

Link:

Linkleri blue post tarzı yapmak için ayrı tag yapmadım sorun çıkarıyordu ve istenen şekilde çalışmıyordu. Linklerinizin daha belirgin ve güzel gözükmesini istiyorsanız linkinizi seçip editörün renk paletinden beyaz yapabilirsiniz. Beyaz yapılan linkin kodda gözükecek şekli(sadece link kısmını yazıyorum):

...
[url="http://www.sanger.dk/"][color=#ffffff]Link[/color][/url]
...

Blue postun içine koyunca görüntüsü:



Ellemeseydiniz böyle olacaktı:



İpuçları

*Tagleri asla birbirinin içinde olacak şekilde yerleştirmeyin, tagler ya başka taglerden alakasızdır ya da onları sarmalar/onlar tarafından sarmalanır. Ayrıca tagleri yazarken neyin başlaması ve neyin bitmesi gerektiğini düşünerseniz daha kolay olur. Yanlış bir nesting örneği göstereyim:

[abc][xyz]hede[/abc][/xyz]

Olması gereken:

[abc][xyz]hede[/xyz][/abc]

Gördüğünüz gibi bir yazının birden fazla özelliği varsa bu özellikler mutlaka iç içe gözükecek şekilde olmalıdır. Kusura bakmayın, herkesin anlaması için bu temel kuralları da yazıyorum.

*Üst kısma koyacağınız başlık mümkünse bir satırı geçmesin. Sayfadan alıp başını gitmemesi için word-wrap koydum ama bir satırı geçtiği halde Blizz ikonu yukarıda kalıyor. CSS'teki kadar rahat hareket edemediğimden ve bir satırı geçecek başlık konacağını düşünmediğimden düzeltmeye çalışmadım. Üst kısımdaki başlık tek satır oldukça problem yok.

*Linki beyaz yapma olayını görsel editörden hallederseniz sorun çıkmayacaktır ancak kod editörünü açarak veya elinizle kodu girerseniz problem çıkabiliyor. Hatalı bir örnek:

[color=#ffffff][url="http://www.sanger.dk/"]Link[/url][/color]

Bu durumda link renginiz değişmeyecektir:



O yüzden renk kodu link kodunun daima içinde olmalıdır.

*Kodlar otomatik olarak yazıyı mavi yapsa da yazının rengini elle sonradan değiştirebilirsiniz. Örneğin sınıflarla ilgili bir şey yazılacağında aşağıdaki gibi başlık renkleri değiştirilerek daha zengin bir görünüm sağlanabilir:

5.4 değişiklikleri

Resmi ekleyen Death Knight
Icebound Fortitude artık Frost Rune harcamıyor.

Resmi ekleyen Druid
Growl artık hedefe karşı ürettiğiniz tehdit miktarını 3 saniyeliğine %200 arttırıyor.

vs.


Yukarıda olduğu gibi normalde ekleyebildiğiniz resimleri ve videoları aynı şekilde blue post wrapperı içine de ekleyebilirsiniz.

Bu kadar anlatınca karışık gibi gelmiş olabilir ama aslında göründüğünden çok daha kolay, zaten arkada çalışan CSS ve HTML ile uğraşmıyorsunuz hiç. Umarım hoşunuza gitmiştir, aklınıza takılan bir şey olursa sorabilir ve fikirlerinizi buraya yazabilirsiniz.

Not: Kod kısımlarında düzeltemediğim renklenmeler var ama bir işlevi yok onların, BBCode içine yazdıklarımı anlamlandırmaya çalıştığı ve elemanları renklendirdiği için oluyor.

#2 Xelbelsel

Xelbelsel

    Scout

  • Members
  • 650 İleti

Yazma tarihi: 20 Haziran 2013 - 11:43 ÖS

Ellerine sağlık faydalı olur umarım :)
  • 0
THE NORTH REMEMBERS!

#3 DasviDania

DasviDania

    Senior Sergeant

  • Members
  • 155 İleti

Yazma tarihi: 21 Haziran 2013 - 03:47 ÖÖ

ne diyeceğimi bilemedim, okuyamadım, beynim yetmedi :), neyse umarım birilerinin işine yarar o kadar emek harcamışsın :D
  • -1

Huntress is nothing without a hunt, you're nothing without me.

http://eu.battle.net...edesbyrd/simple

RETIRED !


#4 Egemeric39

Egemeric39

    Knight Lieutenant

  • Members
  • 591 İleti
  • LocationBatteground

Yazma tarihi: 21 Haziran 2013 - 03:53 ÖS

Ellerine sağlık işallah faydalı bir şey olur
  • 1

For The Scourge ! 





0 Kullanıcı konuyu okuyor

0 Kullanıcı, 0 Misafir, 0 Kayıtsız kullanıcı