Blogunuza Yazılı ve Resimli Slideshow Yapma

Blogger da çoğu arkadaşımızın hoşuna giden ve bulmakta zorluk çektiği slideshow'u hazırlamak artık çok kolay. Şimdi varmı bilmiyorum ama google'a sorduğumda pek içimi açan bir cevap alamamıştım. Yandaki resimde görünen ve buradan örnek bir uygulamaya bakacağınız slideshow hakkında önce maddeler halinde biraz bilgi vereyim.

1. Boyutunu istediğiniz gibi ayarlayabilirsiniz. (Siz ona değil o size ayak uydursun :)) )
2. Show'u ister otomotik isterseniz manual olarak ayarlayabilirsiniz.
3. Otomotik ayarlarsanız gösterim süresini ayarlayabilirsiniz.
4. Çervesinden buttonuna kadar istediğiniz yerini değişebilirsiniz. vs. vs...

Yukarıda verilenleri elimden geldiği kadar sizlere açıklayacağım.
Hala okumaya devam ediyorsanız bundan sonrasına biraz daha dikkat ediniz. Klasik uyarımızı hemen yapalım. Lütfen şablonunuzun yedeğini alınız...
1.

• featuredcontentglider.css
  
• jquery-1.2.2.pack.js
• featuredcontentglider.js

Dosyalarını indirin. (Sağ click/Farklı kaydet) Hotlinkfiles google page veya varsa kendi bildiğiniz iyi bir host adresi ona upload edin.
2. Aşağıda verilen kodu Yerleşim---->HTML'yi Düzenle--->Widget Şablonlarını Genişlet diyerek ctrl+f ile aratıp bulun.

</head>

Bulduğumuz kodun hemen üst satırına aşağıdaki kod1'i ekleyin.

<script type="text/javascript" src="jquery-1.2.2.pack.js"></script>

<link rel="stylesheet" type="text/css" href="featuredcontentglider.css" />

<script type="text/javascript" src="featuredcontentglider.js">

</script>
<script type="text/javascript">

featuredcontentglider.init({
gliderid: "canadaprovinces", //ID of main glider container
contentclass: "glidecontent", //Shared CSS class name of each glider content
togglerid: "p-select", //ID of toggler container
remotecontent: "", //Get gliding contents from external file on server? "filename" or "" to disable
selected: 0, //Default selected content index (0=1st)
persiststate: false, //Remember last content shown within browser session (true/false)?
speed: 500, //Glide animation duration (in milliseconds)
direction: "downup", //set direction of glide: "updown", "downup", "leftright", or "rightleft"
autorotate: true, //Auto rotate contents (true/false)?
autorotateconfig: [3000, 2] //if auto rotate enabled, set [milliseconds_btw_rotations, cycles_before_stopping]
})

</script>

Kod1 deki koyu renkli yerlere upload ettiğimiz dosyaların url'sini adlarına göre yerleştirin.
3.Şimdi işin zor kısmına geldik. Aslında zor dememin sebebi bu işle pek uğraşmamış ama azimli arkadaşlar için biraz karışık olması. Nedir? bu karışık olan şey..
Zor olan tarafı slideshow'u bloğumuzun neresine ekleyeceğimiz olması. Aslında deneme yanılma yolu ile bulabiliriz. ancak dikkat etmemiz gereken birkaç husus var. Bunları kısaca yine maddeler halinde açıklayayım.

1. Bazı temalarda olduğu gibi post (yazlarımızın olduğu bölüm) bölümünün hemen üzerinde olmasını istiyorsak.(Benim yaptığım örnekteki gibi)

<div id="main-wrapper">

tanımlamasının hemen altında kod2'nin olması gerekir. temamızın enine tam oturması için en ve boy oranını yine temamıza göre ayarlamamız gerekiyor tabi... Bunu aşağıda vereceğim.

2.Sidebar(Yan menü) kısmının en üstüne ekleyecek olursak

<div id="sidebar-wrapper">

tanımlamasın hemen altından başlayacağız. Farklı bir yer için ise widgetlerin arasına koymayı unutmamak lazım.Gelelim bu üste verdiğimiz yerlere ekleyeceğimiz koda2 ye;

<div id="canadaprovinces" class="glidecontentwrapper">

<div class="glidecontent">
<img src="http://i11.tinypic.com/8efzmmf.jpg" style="float: left; padding: 5px" />
British Columbia is the westernmost of Canada's provinces and is famed for its natural beauty. It's capital is Victoria, located at the southeastern tip of Vancouver Island. BC's most populous city is Vancouver, located in southwest corner of the BC mainland called the Lower Mainland.
</div>

<div class="glidecontent">
<img src="http://i15.tinypic.com/72vilba.jpg" style="float: right; padding: 5px"/>
Ontario is a province located in the central part of Canada, the largest by population and second largest, after Quebec in total area. Toronto, the capital of Ontario, is the centre of Canada's financial services and banking industry.
</div>

<div class="glidecontent">
<img src="http://i17.tinypic.com/8bg0lkx.jpg" style="float: left; padding: 5px"/>
Yukon, still commonly referred to as "The Yukon Territory", is the westernmost of Canada's three northern territories. The Yukon's major appeal is its nearly pristine nature. Tourism relies heavily on this and there are many organised outfitters and guides available to hunters and anglers and nature lovers of all sorts.
</div>

</div>

<div id="p-select" class="glidecontenttoggler">
<a href="#" class="prev">Prev</a>
<a href="#" class="toc">Page 1</a> <a href="#" class="toc">Page 2</a> <a href="#" class="toc">Page 3</a>
<a href="#" class="next">Next</a>
</div>

Düzenleme Yapacağınız Bölümler

//--------------kod1 de değiştirebileceğiniz bölüm-----------
<script type="text/javascript">

featuredcontentglider.init({
gliderid: "canadaprovinces",
contentclass: "glidecontent",
togglerid: "p-select",
remotecontent: "",
selected: 0,
persiststate: false, //Remember last content shown within browser session (true/false)?
speed: 500, //Animasyon Süresi (Milisaniye)
direction: "downup", //yön için seçenekler: "updown", "downup", "leftright", or "rightleft"
autorotate: true, //Otomotik içerik döndürme (true/false)?
autorotateconfig: [3000, 2] //Otomotik etkin dödürme, set [milliseconds_btw_rotations, cycles_before_stopping]
})

</script>
//-------------------------Kod2 de değiştirebileceğiniz bölüm----------
<div id="canadaprovinces" class="glidecontentwrapper">

<div class="glidecontent">
Glide content 1 here
</div>

<div class="glidecontent">
Glide content 2 here
</div>

<div class="glidecontent">
Glide content 3 here
</div>

</div>

<div id="p-select" class="glidecontenttoggler">
<a href="#" class="prev">Prev</a>
<a href="#" class="toc">Page 1</a> <a href="#" class="toc">Page 2</a> <a href="#" class="toc">Page 3</a>
<a href="#" class="next">Next</a>
</div>

Yukarıda upload ettiğiniz featuredcontentglider.css dosyası içerisinden ise slideshow'un en boy oranını (width: 450px; , height: 30px; gibi) style v.b özelliklerini değiştirebilirsiniz. Button için ise aşağıdaki kodu kullanınız.

//</head> kodunun hemen üst satırına alttaki kodu yapıştırın....

//------------button için------//

<link href='/cssbuttonstoggler.css' rel='stylesheet' type='text/css'/>

daha sonra cssbuttonstoggler.css kendi adına ekleyiniz.

yukarıda eklediğimiz kod2 bölümünden;

<div id="p-select" class="glidecontenttoggler">
<a href="#" class="prev">Prev</a>
<a href="#" class="toc">Page 1</a> <a href="#" class="toc">Page 2</a> <a href="#" class="toc">Page 3</a>
<a href="#" class="next">Next</a>
</div>

kodunu çıkarıp yerine;

<div class='cssbuttonstoggler' id='p-select'>
<a class='toc' href='#'><span>1</span></a>
<a class='toc' href='#'><span>2</span></a>
<a class='toc' href='#'><span>3</span></a>
<a class='prev' href='#'><span>Back</span></a>
<a class='next' href='#'><span>Foward</span></a>
</div>

kodunu ekleyiniz. kolay gelsin...