Slayt Tarzı Birden Fazla Sayfa Oluşturma

Bloglarınıza çağ atlatacak olan yepyeni bir blog eklentisi daha bloglarınız için burada. Bloglarınızda paylaşmış olduğunuz içeriklerin çok uzun olması ve birden fazla resimlerle yayınlarınızı daha açıklayıcı hale getimek için ve mobil uyumlu sitenize mobil yada tablet cihazlarında içeriklerin görselliğini artırmak ve yayınlarınızı birden fazla sayfalara bölerek yayınlamak artık mümkün.

Blog Yayınlarında Slayt Tarzı Bir Fazla Sayfa Nasıl Oluşturulur?

1. Blogger hesabınıza giriş yapın ve CTRL+F yardımıyla </head> kodunu bulun ve aşağıdaki CSS kodunu bulduğunuz kodun bir satır üzerine kopyalayıp yapıştırın.

/* Birden Fazla Sayfa Oluşturma (bloggereklentileri.blogspot.com) */
<link rel="stylesheet" type ="text/css" href="https://googledrive.com/host/0B8BpaUBh8VDrSGxQUkg5VVpOREU"/>

2. Yine CTRL+F yardımıyla </body> kodunu bulun ve birden fazla yayın oluşturmamızı sağlayacak olan slayt eklentisinin JQuery kodunu </body> kodunun bir satır üzerine kopyalayıp yapıştırın ve şablonun kaydet butonuna basarak şablonu kaydedin.

<script type='text/javascript'>
/* Birden Fazla Sayfa Oluşturma (bloggereklentileri.blogspot.com) */
//<![CDATA[
function updateBtnState(){0==index?$(".prever").hide():$(".prever").show(),index==maxIndex?$(".nexter").hide():$(".nexter").show()}var index=0,maxIndex=4;$(".nexter").on("click",function(e){if(index++,index>maxIndex)return void e.preverentDefault();updateBtnState();var n=$(this).parent().find(".slidecontentWrap"),t=100*-index+"%";n.animate({marginLeft:t},300)}),$(".prever").on("click",function(e){if(index--,0>index)return void e.preverentDefault();updateBtnState();var n=$(this).parent().find(".slidecontentWrap"),t=100*-index+"%";n.animate({marginLeft:t},300)}),updateBtnState();
//]]>
</script>

3. Oluşturmuş olduğunuz yeni yayınınızı aşağıdaki HTML kodu kullanarak ve HTML kod içerisinde belirtilen yerlere içeriğinizi yerleştirin.

<div class="next-wrap">
<div id="photocons" class="instruction">
<div class="slidecontentWrap">
<div class="slidecontent">
<div class="separator">
<img alt="Başlık kısmını buraya yazın" height="300" src="Buraya PNG resim URL'si" style="border: none;" title="Açıklama" width="500" />
<br/>
</div>
<br/>
</div>
<div class="slidecontent">
<div class="separator">
<img alt="Başlık kısmını buraya yazın" height="300" src="Buraya PNG resim URL'si" style="border: none;" title="Açıklama" width="500" />
<br/>
</div>
<br/>
</div>
<div class="slidecontent">
<div class="separator">
<img alt="Başlık kısmını buraya yazın" height="300" src="Buraya PNG resim URL'si" style="border: none;" title="Açıklama" width="500" />
<br/>
</div>
<br/>
</div>
<div class="slidecontent">
<div class="separator">
<img alt="Başlık kısmını buraya yazın" height="300" src="Buraya PNG resim URL'si" style="border: none;" title="Açıklama" width="500" />
<br/>
</div>
<br/>
</div>
<div class="slidecontent">
<div class="separator">
<img alt="Başlık kısmını buraya yazın" height="300" src="Buraya PNG resim URL'si" style="border: none;" title="Açıklama" width="500" />
<br/>
</div>
<br/>
</div>
</div>
</div>
<a class="movepg prever">GERİ</a>
<a class="movepg nexter">İLERİ</a>
</div>

Yukarıda HTML kod içerisinde belirtilen renkli yerleri nasıl kullanıyoruz?
Mavi renkli alan bizim yayınımızın sayfasını oluşturuyor. Yani alt alta gelen aynı kodların her biri bir sayfayı temsil etmektedir.

1. Başlık kısmını buraya yazın: Buraya oluşturmuş olduğunuz yayının başlığını yazın.
2. Buraya PNG resim URL'si: Blogunuza yüklemiş olduğunuz resimlerin hangi yazının üzerinde görünmesini istiyorsanız o resmin URL'sini buraya kopyalayıp yapıştırın.
3. Açıklama: Blogunuzda oluşturmuş olduğunuz yayınların açıklamasını buraya yazın.
4. Resimlerinizin boyutlarını da istediğiniz gibi belirleyebilirsiniz. Yukarıdaki kodda 500 - 300 olarak belirtilmiştir.

NOT: Blog sayfanızda oluşturmuş olduğunuz yayının yani 'Arama Açıklamasını' açıklama kısmına yazın.