Blogger Scarlett Teması Türkçe Anlatım # Bölüm 2

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=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitSHcn0pdLHkkPxtb-_DIZKizEJ4a5RPvsg-dbkcUers7bjAB6SySPgZu2ajrbOoW7qzHW4tpdRsAOwBdeuGhQ_9Cjp-Eo7hhKixtaIQ7dznt2tVYcgGsYcQSFznMA8EvSSLV2XJXg2vs/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEWoAx78UDWvVwlx6XkKuEB2Uy3H74slYJXWcPNxmQ9VridS3BvdmlZX69NC2UJYAn6C5kpb09eIbCOsW-IrzOqa4lkbeL_yhrio_gV_2mX5qwZBKuJY23fu6BR6AT8Aq1k3mEoraE6ko/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=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgXhEbtRRgUu245eyVtMcXTM65l9bkQvY2uZz3qz4oDdD1Rt1MypKemciSHAcBXIP3_1dslSalsFKG3AEZQPR9JGbTGE7s-UMaRpUKT1eyB4_1OSOzMm0LVT2mZJRwb3gaKtx0winE5x0/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=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJsgt1b8D0BvePgOZyAOb0RyPkbtOOOmiAPYMXg5dyIWP9qyJPNrGAR1PH0jiGQk046GbpBSr-J5RWAwgRjYorisCg7Uqt2xOBFugtfZKxz52NIypm8OWcMpv1jiDQKFRcGQWHTiAE9Mc/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=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzEvQ5hOd75xX9S8WrY2fVcTOCgf-BQ8997NUg2iW5abYvvDnoV0PzghOfl5Nm_19Qx-2KDJi6I8n5uYiEpSYtiwE79TkkJyHkIGAenhmQlUvDS6Nj5yfCdRa4mIMGSyeyJg6dsdyMt-c/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=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDLhPHOhCZ8txrm_mY7_D3GOkDIohUuOvxkzbQJSO8qzYyoxFayhgllEAyjzc1FB1yQfxYyoYxWhUcqeGuV7CsSbe2f3EexcnUzzp0VXob30_nEVRmejLH_xvPmHzR9ZpYVRDUeQALlek/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlma-OdCBMRbZKaVjgwoVPemsbbhUVnomhb08mdkNErWV-5AF5c17On94Mvs1SrjL0AWTcG_ueDDHKYlVuKQDbd_M3JkzMsyM6sPTfypLBU5cuSutcANDkdmDTMGa9s9n0CHJ7Bjy9V6pM/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKoLUZCr9QJRAkS5vGOHveRLfrKZKhIcmB_Cw9HT-6oDSDtryDEF-FJaL1-9QM0bNiM5OfWZYfmbkUe609-G6wHCAOW43PApqpuW8R_rY9sgBOWsD2YfcREiBr4MXncWiTk7Jms5lCFSi2/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm3JSc1O7f_5So9pnqLABfkduZMKteLwa5n7tcQsJe0JFRh2y52TlqVYwfju6NHkV70uV1uswfu3XVHXT2ENC72ONhh7Oengcp7WSO-dZtcCzdpWZaBonsVbuCdriyq-2hBANExcFBXBkK/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi89yZEqxbJJ6u0qrFFCWEWRZgVMHKkVC3aZrvocSKIGlBMMiBPl4-CLl2EPv7k6W7DrCikvas_yF3UV0irSVJum8zVhT8ymZDEpA8RRLS-sEQG8CiJNWIU238Us5vZA477mcnA8HLNKx0/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpYZcvXhpTlKhWVW0zDDHuNCXdB2mf3C9OzlXzBvPRKNoZ9BqfhOjD672gpnVqQw2RTMSGCfEHRtybrJEByAyHFWxakn_xZDMEScxB2gCq5-7-f0l4ZkmH-xoI99nwWotu5QSjV5M8QPYi/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.