24 Aralık 2012 Pazartesi

Dikey Minimal Slayt

Unknown 03:03 Blogger Eklentileri Hiç yorum yok :

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'>

            $( '#carousel' ).elastislide( {
                orientation : 'vertical'
            } );

        </script>

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

<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>

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.