16 Mayıs 2009

Dün anlatmış olduğum Scarlett Başlık Alanı Düzeni, Üst Menü Düzenleme, Alt Menü Düzenleme konuların bu linkten görebilirsiniz. Bunlara ek olarak Scarlett temasında yapılması gereken değişiklikler şunlar;

4. Ana sayfada slâyt şov (Slayt Show / Slider) Düzenleme

Bu alan için kullanılacak olan resimlerin boyutları 100 piksel yükseklik ve 200 piksel genişliğe sahip olmalıdır. Aşağıda vereceğim kodları, sayfa öğelerinde Alt Kategori Menüsü (Category Menu) ve Üst Menü (Top Menu) isimli kısımların arasında kalan Slider ismiyle yer alan kısmın içine yapıştırmalısınız.

Slayt Şov (Slayt Show / Slider) Eklentisi İçi Gerekli olan Kodlar

Ana kod olarak alttaki kodu kullanabilirsiniz,

<div class="panel">

<a href="RESIM-SU-ADRESE-GITSIN"
rel="bookmark" title="RESME-BASLIK-VER"><img style="width
height:100px" src="RESIM-LINKINI-YAZ"
alt=""/></a>

<h2><a href="TANITIM-YAZISI-LINK-ADRESI"
rel="bookmark" title="BASLIK-TANITIM-YAZISI</a></h2>

</div>


Yukarıdaki kodda yapılması gereken değişiklikler;

RESIM-SU-ADRESE-GITSIN: Resmin üzerine tıklandığında görüntülenmesini istediğiniz internet adresini yazınız.
RESME-BASLIK-VER: Resmin üzerine fare sürüklendiğinde resim üzerinde çıkmasını istediğiniz tanıtıcı yazıyı yazınız.
RESIM-LINKINI-YAZ: Hangi bir yere yüklemiş olduğunuz resmin internet linkini yazınız.
TANITIM YAZISI: Resmin hemen yanında görüntülenecek olan tanıtım yazısıdır.
BASLIK: Tanıtım yazınızın üzerine fare sürüklendiğinde çıkmasını istediğiniz tanıtcı başlığınızı yazınız.
TANITIM-YAZISI-LINK-ADRESI: Resmin Sağında görüntülenmesini istediğiniz tanıtım yazısının link adresini yazınız.

Örnek isteyenler için Scarlett Temasını yüklediğim örnek blogundaki slayt şov kodları şöyle;

<div class="panel">
<img style="width:200px; height:100px" alt="" src=" http://1.bp.blogspot.com/_EM-O0UnGqZk/Sgwf5eZdD0I/AAAAAAAAAZ8/laWVizQthN8/s200/5.jpg"/>
<h2><a href="http://blogger-template-scarlett.blogspot.com/" rel="bookmark" title=" Tanıtım ">Scarlett</a></h2>
</div>

<div class="panel">
<img style="width:200px; height:100px" alt="" src="http://1.bp.blogspot.com/_EM-O0UnGqZk/Sgwf5Xr5HbI/AAAAAAAAAZ0/l-2FW8WwJ94/s200/4.jpg"/>
<h2><a href="http://blogger-template-scarlett.blogspot.com/" rel="bookmark" title=" Albüm Tanıtım"> ALBÜM TANITIM </a></h2>
</div>

<div class="panel">
<img style="width:200px; height:100px" alt="" src=" http://2.bp.blogspot.com/_EM-O0UnGqZk/Sgwf5YgCaWI/AAAAAAAAAZs/f4jBz4ckVgQ/s200/3.jpg"/>
<h2><a href="http://blogger-template-scarlett.blogspot.com/" rel="bookmark" title=" Tasarım"> TASARIM </a></h2>
</div>

<div class="panel">
<img style="width:200px; height:100px" alt="" src=" http://3.bp.blogspot.com/_EM-O0UnGqZk/Sgwf5DL83iI/AAAAAAAAAZk/YJXL8b-rqdM/s200/2.jpg"/>
<h2><a href="http://blogger-template-scarlett.blogspot.com/" rel="bookmark" title=" Neredesin"> NEREDESİN </a></h2>
</div>

<div class="panel">
<img style="width:200px; height:100px" alt="" src=" http://3.bp.blogspot.com/_EM-O0UnGqZk/SgwdbPrkslI/AAAAAAAAAY8/-VGw3D28M5E/s200/2.jpg"/>
<h2><a href="http://blogger-template-scarlett.blogspot.com/" rel="bookmark" title=" Banyo">Banyo</a></h2>
</div>

<div class="panel">
<img style="width:200px; height:100px" alt="" src=" http://3.bp.blogspot.com/_EM-O0UnGqZk/Sgwf5C9ofLI/AAAAAAAAAZc/wGMHFjfsL-w/s200/1.jpg"/>
<h2><a href="http://blogger-template-scarlett.blogspot.com/" rel="bookmark" title=" Güzellik"> PARFÜM </a></h2>
</div>
Bu ve benzeri kodları notepad, wordpad ve ya farklı bir şekilde kolaylıkla düzenleyebilirsiniz.

Birden Fazla Tanıtım Yapmak isteyenler için küçük bir uyarı yapmak isterim. Slayt Şovun verimli çalışabilmesi için en fazla 12 adet tanıtım ekleyebileceğinizi unutmayın.

Düzenlemelerinizi yaptıktan sonra kodları nasıl yerleştirebilirsiniz?

1. Sayfa Öğelerine gidin.
2.Alttaki örnek resimdeki görebileceğiniz Slider eklentisini düzenle kısmına basarak açın. Boş bir pencere karşınıza gelecektir. Bu boş sayfa içine kendinize özgü değişikler yapmış olduğunuz kodunuzu kopyalayıp yapıştırın. Kaydedin.

Tıkla büyüt.

Blogunuzu göz atın Slayt Şov’unuz hazır.

5. TABBED CONTENT (Sağ kolonda tek sekmede altında 3 adet eklenti) (SON YAZILAR, ETİKET BULUTU, VİDEO)



Yukarıdaki resimde görüldüğü gibi aynı yerde olup başlıklarına tıklandığında başlık altında görüntülenen Son Yazılar, Etiket Bulut ve Video kısmı yer alıyor. Bu kısımda yapılması gereken değişiklikler şöyle;

5.a. Son Yazılar Eklentisi

Blogunuzda son olarak yayınlamış olduğunuz yazıların bir listesini göstermeye yarayan bu eklenti için;

.js uzantılı dosyayı öncelikle indirin; son-iki.js

İndirmiş olduğunuz bu dosyayı, .js uzantılı dosya yüklemenize izin veren Rapidshare, Hotlinkfiles, Weebly, gibi sitelerden birine yükleyin. Farklı sitelerde buna izin veriyorsa yorumlar kısmında siteleri paylaşırsanız sevinirim.
(Weebly'e .js uzantılı dosya yüklemeniz için üye olun ve bir blog oluşturun. Daha sonra "Elements > Multimedia > File" yolunu izleyerek .js uzantılı dosyanızı yükleyebilirsiniz)

Dosyayı yükledikten sonra aşağıda verilen kodu kopyalayın;

<script src='JS-UZANTILI-DOSYANIN-ADRESINI'></script>
<script>var numposts = 10; var showpostdate = false; var showpostsummary = false; var numchars = 100; </script>
<script src='http://BLOG-ADRESI/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp'>
</script>

Yukarıdaki kodda yapılması gereken değişiklikler;

JS-UZANTILI-DOSYANIN-ADRESINI: Bir üst kısımda anlattığım şekilde yüklemiş olduğunuz .js uzantılı dosyanın yükleyici tarafından size verilen internet adresini yazınız.
Örnek; http://yukleyicisite.com/son-iki.js/

BLOG-ADRESI: Blogunuzun adını yazınız.
Örnek; blogadi.blogspot.com

Bu ve benzeri kodları notepad, wordpad ve ya farklı bir şekilde kolaylıkla düzenleyebilirsiniz.

Düzenlemelerinizi yaptıktan sonra;


Yukarıdaki örnek resimde görebileceğiniz gibi, sayfa öğelerinde yer alan bu ksıma gelinir ve Son Yazılar yazısına tıklanır. Altında HTML/JavaScript gadget penceresi görünecektir. Bu pencereni sağ altında yer alan düzenle kısmına tıklayın ve açılacak olan pencereye yukarıda anlatıldığı gibi düzenlemiş olduğunuz Son yazılar kodunu yapıştırın. Ve kaydedin. Son yazılarınızda hazır.

5.b. Etiket Bulutu Düzenlemesi
Konunun en kolay kısmındayız. Herhangi bir değişiklik yapmanıza gerek yok. Lüküs hayat!

5.c Video Eklentisi

Video eklentisi yüklemek istediğiniz videonun kodlarına ihtiyaç duymaktadır. Youtube, vimeo gibi sitelerden alınabilecek video kodları sayesinde videoyu blogunuza yükleyebilirsiniz.

Youtube, vimeo gibi video yükleyicisi sitelerden alınan kodda şu değişiklikler yapılmalıdır.
Videonun genişlik ve yüksekliklerini görüntüleneceği yerin boyutlarına uyarlanması için yükseklik değeri olan height 270 px, genişlik değeri olan width değeri ise 325 px şeklinde değiştirilmelidir. Örnek;

width="325"
height="270"


Örnek Video kodu;

<object width="325" height="270"><param value="true" name="allowfullscreen"/><param value="always" name="allowscriptaccess"/><param value="http://vimeo.com/moogaloop.swf?clip_id=1905622&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=00adef&amp;fullscreen=1" name="movie"/><embed allowscriptaccess="always" width="325" src="http://vimeo.com/moogaloop.swf?clip_id=1905622&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=00adef&amp;fullscreen=1" allowfullscreen="true" height="270" type="application/x-shockwave-flash"></embed></object>


Bu ve benzeri kodları notepad, wordpad ve ya farklı bir şekilde kolaylıkla düzenleyebilirsiniz.

Örnekteki gibi düzenlenmiş olan video kodu Sayfaögelrinde yer alan Video başlığına tıklanır ve altında açılan HTML/JavaScript kutucuktaki Düzenle yazısına tıklanır ve açılan boş pencereye yapıştırılır.


6. Rasgele Hareketli Tanıtım Alanı Düzenlemesi


Yazının en son kısmı olan bu tanıtım alanı için kullanmanız gereken kod aşağıdadır.

<ul class="spy">


<li>

<img style="width:100px; height:60px" alt="" src="RESIM-ADRESI"/>
<h2><a href="INTERNET-ADRESI" title="BASLIK">BASLIK</a></h2>
<div class="auth"> Yazan YAZAR-ADI</div>
</li>

</ul>


Bu kodda yapılması gereken değişiklikler;

RESIM-ADRESI: Resmin internet adresini yazın.
INTERNET-ADRESI: Yazının internet adresini yazın
BASLIK: Yazının başlığını yazın
YAZAR-ADI: Yazıyı yazan kişinin adını yazın.

Birden Fazla Tanıtım yazısı eklemek için alttaki kodu kullanabilirsiniz;

<ul class="spy">

<li>

<img style="width:100px; height:60px" alt="" src="RESIM-ADRESI"/>
<h2><a href="INTERNET-ADRESI" title="BASLIK">BASLIK</a></h2>
<div class="auth"> Yazan YAZAR-ADI</div>
</li>

<li>

<img style="width:100px; height:60px" alt="" src="RESIM-ADRESI"/>
<h2><a href="INTERNET-ADRESI" title="BASLIK">BASLIK</a></h2>
<div class="auth"> Yazan YAZAR-ADI</div>
</li>


<-- Yukarıdaki mavi ile renklendirilmiş kodu Kopyala yapıştır yaparak çoğaltabilirsiniz -->

</ul>


Yukarıdaki kodlarda resim linkleri ve internet linklerini değiştirdikten sonra bu kodu Sayfa öğelerindeki Post Link eklentisini sağ alt köşesinde yer alan Düzenle kısmına tıklayın ve açılan pencereye yapıştırın. Kaydedin. Artık Tanıtım Alanınızda hazır.

Son olarak örnek blogda tanıtım alanı için kullandığım kodları örnek olması ve daha iyi anlaşılması adına altta görebilirsiniz.

<ul class="spy">

<li><img style="width:100px; height:60px" alt="" src="http://lh4.ggpht.com/_EM-O0UnGqZk/Sgwm3RaO16I/AAAAAAAAAac/OtN1iUAFIb8/s400/sb4.JPG"/> <h2><a href="http://blogger-template-scarlett.blogspot.com/" title="Uzak"> Uzak </a></h2>
<div class="auth"> Yazan Sade </div> </li>

<li><img style="width:100px; height:60px" alt="" src="http://3.bp.blogspot.com/_EM-O0UnGqZk/Sgwm3OJchoI/AAAAAAAAAaM/8Vi6NpAZHEI/s400/sb2.JPG"/>
<h2><a href="http://blogger-template-scarlett.blogspot.com/"> Sende mi?</a></h2><div class="auth"> Yazan Sade </div> </li>

<li>
<a href="http://blogger-template-scarlett.blogspot.com" title="Ä°klimler"><img style="width:100px; height:60px" alt="" src="http://4.bp.blogspot.com/_EM-O0UnGqZk/Sgwm3AcFTpI/AAAAAAAAAaE/KoL7Ti6VEWg/s400/sb1.JPG"/> </a> <h2><a href="http://blogger-template-scarlett.blogspot.com/" title="Ä°klimler">Ä°klimler </a></h2>
<div class="auth"> Yazan Sade</div> </li>

<li>
<img style="width:100px; height:60px" alt="" src="http://1.bp.blogspot.com/_EM-O0UnGqZk/SgwpgE5uRTI/AAAAAAAAAak/wvR6nYWylIU/s400/sb5.JPG"/>
<h2><a href="http://blogger-template-scarlett.blogspot.com/" title="Mayıs Sıkıntısı"> Mayıs Sıkıntısı </a></h2> <div class="auth"> Yazan Sade </div> </li>

<li>
<img style="width:100px; height:60px" alt="" src="http://2.bp.blogspot.com/_EM-O0UnGqZk/Sgwm3a4-ltI/AAAAAAAAAaU/fImydkf4Rqk/s400/sb3.JPG"/>
<h2><a href="http://blogger-template-scarlett.blogspot.com/" title="4. aranıyor?"> 4.aranıyor </a></h2> <div class="auth"> Yazan Sade </div> </li>

</ul>


Tüm yapılması gerekenler bitti. Temanız hayırlı uğurlu olsun.

Umarım faydalı ve anlaşılabilir bir tema anlatım yazısı yazabilmişimdir. Lütfen, Tema hakkındaki olumlu ya da olumsuz görüşlerinizi, temayı kendi bloguna kurmak isteyenler için bir ön bilgi olması adına yorumlar kısmında belirtin.

Anlatımda anlaşılmayan kısımlar varsa bunları da yorumlarda belirtirseniz en kısa sürede cevaplandırmaya çalışacağım.

Son olarak bu temayı hazırlayan Chaya Biru’ye teşekkür ediyorum.
Yorum
Yasin dedi ki...
Güzel tema. Anlatım için ayrıca teşekkürler.

'Enlerin Günlüğü'
Footballer dedi ki...
Dostum her şeyi hallettim ancak slayt yerinde sadece 3 resim gözüküyor ve çalışmıyor :S
Sade dedi ki...
Evet, tüm temayı düzenlemişsin. Slay bölümü için; Scarlett Temasını yüklediğim örnek blogundaki slayt şov kodları ile denedin mi? denemeni tavsiye ederim eğer olursa kendine özgü düzenleyebilirsin.
Footballer dedi ki...
Olmuyor.. Başka bir yolu yok mu acaba
Sade dedi ki...
Blogunu ziyaret ettim harika görünüyor! sorunsuz şekilde çalışıyor.
Adsız dedi ki...
Sonradan hallettim :D teşekkürler ;)
yusuf mirza dedi ki...
kardeşim çok teşekkür ederim gece1 den beri ugrasyorum ve şükür bitti...tekrar sağol.bence harika bir tema www.yapyorum.blogspot.com adresime uyguladım bakalım zaman ne gösterir ama bu temadan cayılır mı ya hu :):)
Sade dedi ki...
Yusuf, uğraştığına değmiş doğrusu gayet başarılı bir şekilde temayı uygulamışsın. Umarım görsel açıdan çok başarılı olan bu tema bloguna şans getirir.:D
Hayalperest dedi ki...
çok saol arkadışım eline sağlık...
harun dedi ki...
Bu temaya ''Yazı Sonuna Resimli Benzer Yazı Ekleme'' yi başaramıyorum.
div class='post-footer-line post-footer-line-1
veya
p class='post-footer-line post-footer-line-1
bölümü yok. Tahmin ettiğim 4-5 yere ekledim ama olmuyor.

/head den önceki bölümü ekledim ama
Yazı Sonuna Resimli Benzer Yazı Ekleme | Kişiselleştirilebilir başlıklı yazınızdaki 4.adım kodu nereye eklenmeli?
Sade dedi ki...
Yazıların sonunda yer alan etiketlerin altına yerleştirebilirsin, bunun için <!-- backlinks --> kodunu bulun ve 4. adımda yer alan kodu hemen üzerine yapıştırın. Bu sorun çıkarsa yardımcı olmaya çalışırım.
harun dedi ki...
Hayır başaramadım. Javascript çakışması olabilir. Neyse şimdilik dursun bu işi en sona bırakayım. Benim templatede başka şeyleri düzenlemem 4-5 gün sürer. Sonra yeniden denerim baktım olmadı size dönerim.
Sade dedi ki...
Harun, senin için demo temamda denedim ve bir üstteki yorumda söylediğim yere kodu yerleştirdim. Sorunsuz çalıştı. İstersen örnek olarak demo temayada eklerim.

Ama dediğin gibi eğer sitende çok fazla .js uzantılı dosya varsa birbirlerinin çalışmalarını etkilemiş olabilirler.

Yardımcı olmak isterim. İstersen yerimi biliyorsun:D
H.EŞKAR dedi ki...
Teşekkür ederim hallettim(harun)
Sorun templateyi denediğim okuyuculara kapalı demo blogtan kaynaklanıyormuş sanırım. Daha öncede okuyucuya kapalı blogda yapılan denemelerin normal bloğumda farklı sonuçlar verdiğini görmüştüm. Sürekli kalacağına söz veremesemde borcumu linkle ödüyorum. Saygılar takipteyim.
Sade dedi ki...
sorunun çözülmesine sevindim. teşekkürler harun... görüşmek üzere...
yunus Emre dedi ki...
Merhaba,
Anlatımın için teşekkürler.
Ben birşey öğrenmek istiyorum bu nihayetinde hazır bir tema değil mi siz tekrar neden birşeyler ekleyip çıkarıyorsunuz?
Bilmediğimden soruyorum.
kadir dedi ki...
slm sayenizde güzel bir site yaptım teşekkürler
ama kafama takılan bir yer var şu etiket bulutu tıklamadan aktif olmuyor herzaman aktif olması için birşeyler yapabilir miyiz
birde eklemek istiyorum sizin sag üstte oldugu gibi baglantı şeklinde degilde simge şeklinde olmasını istiyorum biraz uzattım galiba tşk.

bloguma bakmak isterseniz
powersinema.blogspot .com
Sade dedi ki...
son yazılar, Etiket bulutu ve video kısmı tab menü şeklinde dizany edildiğinden ötürü tab menüde 2. kısıma tıklamak gerekir. Ancak etiket bulutunu 1.kısıma alırsanız ilk o gözükecektir.

O kastettiğiniz tür etiket gösterme henüz otomatik olarak yapılamıyor, bildiğim kadarı ile...

Sitenizi ziyaret ettim. Online film izleme siteleri arasındaki çetin geçecek savaşınızda size bol şanslar...
Elementx dedi ki...
Kayıt Olarak Sadece Son 3 Kayır listeleniyor daha fazla nasıl yapacagız.
gül dedi ki...
scarlett indir linki öldüğü için başka bir yerden indirdim ama onda da slider ve diğer üçlü son yazılar vs kısmı çıkmadı, şimdi sliderlı yeni scarlett arayacağım, eline sağlık çok başarılı bir yazı ve yardımın için çok sağol.
gül dedi ki...
2. defa scarlett teması yükledim, onda da category menü kısmı çıkmadı. 2 gündür pratik yapıp tema kurup bozuyorum biraz yorucu oldu. Sizin tema rapidshare linki hala çalışmıyor.

Sorularım olacaktı, bu temanın renkleri değiştiriliyor mu? Mesela gri yerler değiştilir mi?

Bir de şu üstte headerın üstünde siyah kısım var ya, o kısım komple kaldırılabilir mi? Sanırım kaldırılamaz ama yine de öğrenmek istiyorum. Yani temamız headerdan başlayamaz mı demek istiyorum. Öptüm.
gül dedi ki...
bu arada sağol.
sürgün dedi ki...
BLoğuma sizin yazılarınız sayesinde scarleti yükledim.Bunun için size teşekkür ederim.ama iki sorum olacak 1.si bir içerik açıldığında o içeriğin sonunda yani alt kısmında benzer içeriklerin olmasını istiyorum ama bunu bir türlü yapamıyorum .birde bloğumun altında daha önceki kayıtları göster yerine 1234 diye sayfa koymak istiyorum bunu nasıl yapabilirim yardımcı olursanız sevinirim.BU yazdıklarımı aynı temayı kullanan başka bir blogda görmüştüm onun için olabileceğine inindığım için soruyorum yardımlarınız için şimdiden teşekkürler.
Breaking News dedi ki...
çok güzel bir anlatım ve tema hazırlayana da anlatımı yapana da çok teşekkürler..