Dikey Minimal Slayt

Geçtiğimiz günlerde yatay minimal slayt eklentisini paylaşmış ve dikey versiyonunu da paylaşacağımı söylemiştim. O gün bugün :)

 

 

Eklenti hakkında fazla şey yazmaya gerek yok. Yatay versiyonu blogun altına ve üstüne ekleyebiliyorken bu versiyonu blogunuzun sağ veya sol kenar çubuğuna ekleyebiliyorsunuz. Bunun dışında tüm özellikleri aynı.

 

Blogda nasıl durduğunu ve nasıl çalıştığını görmek için aşağıdaki videoyu izleyebilirsiniz.

 

 

Eklentiyi blogunuzu eklemek için Şablon > HTML’yi Düzenle > Devam Et yolunu izleyin ve Ctrl +F tuş kombinasyonunun yardımıyla  </head> kodunu bulun. Hemen üzerine şu kodları ekleyin.

 

<link href='https://dl.dropbox.com/u/60346665/BlogHocam-MinimalSlayt/css/elastislide.css' rel='stylesheet' type='text/css'/>
        <script src='https://dl.dropbox.com/u/60346665/BlogHocam-MinimalSlayt/js/modernizr.custom.17475.js'/>

 

 

ikinci olarak yine şablondan </body> kodunu bulun ve hemen üzerine şu kodları ekleyin.

 

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script src='https://dl.dropbox.com/u/60346665/BlogHocam-MinimalSlayt/js/jquerypp.custom.js' type='text/javascript'/>
<script src='https://dl.dropbox.com/u/60346665/BlogHocam-MinimalSlayt/js/jquery.elastislide.js' type='text/javascript'/>
        <script type='text/javascript'>
           
            $( &#39;#carousel&#39; ).elastislide( {
                orientation : &#39;vertical&#39;
            } );
           
        </script>

 

Son olarak Yerleşim sekmesini açın ve burada kenar sidebar alanındaki  Gadget ekleme yerine HTML/JavaScript olarak şu kodları ekleyin.

 

<!-- Blog Hocam Minimal Dikey Foto Galeri Eklentisi -->
                <ul id="carousel" class="elastislide-list">
                    <li><a href="#"><img src="https://dl.dropbox.com/u/60346665/BlogHocam-MinimalSlayt/images/small/1.jpg" alt="image01" /></a></li>
                    <li><a href="#"><img src="https://dl.dropbox.com/u/60346665/BlogHocam-MinimalSlayt/images/small/2.jpg" alt="image02" /></a></li>
                    <li><a href="#"><img src="https://dl.dropbox.com/u/60346665/BlogHocam-MinimalSlayt/images/small/3.jpg" alt="image03" /></a></li>
                    <li><a href="#"><img src="https://dl.dropbox.com/u/60346665/BlogHocam-MinimalSlayt/images/small/4.jpg" alt="image04" /></a></li>
                    <li><a href="#"><img src="https://dl.dropbox.com/u/60346665/BlogHocam-MinimalSlayt/images/small/5.jpg" alt="image05" /></a></li>
                    <li><a href="#"><img src="https://dl.dropbox.com/u/60346665/BlogHocam-MinimalSlayt/images/small/6.jpg" alt="image06" /></a></li>
                    <li><a href="#"><img src="https://dl.dropbox.com/u/60346665/BlogHocam-MinimalSlayt/images/small/7.jpg" alt="image07" /></a></li>
                    <li><a href="#"><img src="https://dl.dropbox.com/u/60346665/BlogHocam-MinimalSlayt/images/small/8.jpg" alt="image08" /></a></li>
                    <li><a href="#"><img src="https://dl.dropbox.com/u/60346665/BlogHocam-MinimalSlayt/images/small/9.jpg" alt="image09" /></a></li>
                    <li><a href="#"><img src="https://dl.dropbox.com/u/60346665/BlogHocam-MinimalSlayt/images/small/10.jpg" alt="image10" /></a></li>
                    <li><a href="#"><img src="https://dl.dropbox.com/u/60346665/BlogHocam-MinimalSlayt/images/small/11.jpg" alt="image11" /></a></li>
                    <li><a href="#"><img src="https://dl.dropbox.com/u/60346665/BlogHocam-MinimalSlayt/images/small/12.jpg" alt="image12" /></a></li>
                    <li><a href="#"><img src="https://dl.dropbox.com/u/60346665/BlogHocam-MinimalSlayt/images/small/13.jpg" alt="image13" /></a></li>
                    <li><a href="#"><img src="https://dl.dropbox.com/u/60346665/BlogHocam-MinimalSlayt/images/small/14.jpg" alt="image14" /></a></li>
                    <li><a href="#"><img src="https://dl.dropbox.com/u/60346665/BlogHocam-MinimalSlayt/images/small/15.jpg" alt="image15" /></a></li>
                    <li><a href="#"><img src="https://dl.dropbox.com/u/60346665/BlogHocam-MinimalSlayt/images/small/16.jpg" alt="image16" /></a></li>
                    <li><a href="#"><img src="https://dl.dropbox.com/u/60346665/BlogHocam-MinimalSlayt/images/small/17.jpg" alt="image17" /></a></li>
                    <li><a href="#"><img src="https://dl.dropbox.com/u/60346665/BlogHocam-MinimalSlayt/images/small/18.jpg" alt="image18" /></a></li>
                    <li><a href="#"><img src="https://dl.dropbox.com/u/60346665/BlogHocam-MinimalSlayt/images/small/19.jpg" alt="image19" /></a></li>
                    <li><a href="#"><img src="https://dl.dropbox.com/u/60346665/BlogHocam-MinimalSlayt/images/small/20.jpg" alt="image20" /></a></li>
                </ul>
                <!-- Blog Hocam Minimal Dikey Foto Galeri Eklentisi -->

 

• Galeride göstermek istediğiniz resimlerin URL’lerini benim yazdığım .jpg uzantılı URL’lerle değiştirin.
• Resme tıklayınca açılmasını istediğiniz sayfaları # işaretinin olduğu yerlere yazacaksınız.
• alt="image01-20” olarak gördüğünüz yerlere ise resim hakkında bir tanım metni yazın.

Eklentiyi eklerken takıldığınız bir yer olursa yorum bölümünden sorabilirsiniz. Blogunuzun kenar çubuğunda kullanmanız için bu eklentinin dikey versiyonunu da yakında paylaşacağım.