24 Aralık 2012 Pazartesi

Dikey Minimal Slayt

11 yorum

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

 

Dikey Minimal Slayt

 

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://docs.google.com/file/d/0BxxMpDce-fNUM19IN3VEc09XcDQ/edit' rel='stylesheet' type='text/css'/>
        <script src='http://yourjavascript.com/29411949153/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='http://yourjavascript.com/19312220424/jquerypp-custom.js' type='text/javascript'/>
<script src='http://yourjavascript.com/24134092153/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://lh6.googleusercontent.com/-hkm82EaP61U/VCJ_6YzyRII/AAAAAAAALDU/LA6VV8OrR4s/s160/1.jpg" alt="image01" /></a></li>
                    <li><a href="#"><img src="https://lh3.googleusercontent.com/-FJjP0e3ewLo/VCJ_-C4ocTI/AAAAAAAALFA/BxHq2ZLCH84/s160/2.jpg" alt="image02" /></a></li>
                    <li><a href="#"><img src="https://lh5.googleusercontent.com/--FDpeZvNC9k/VCJ_-2wbR1I/AAAAAAAALE4/wv8yPX6Yv4g/s160/3.jpg" alt="image03" /></a></li>
                    <li><a href="#"><img src="https://lh5.googleusercontent.com/-n744SVjXxI8/VCJ__aj1MII/AAAAAAAALE0/w16C2d5yAv8/s160/4.jpg" alt="image04" /></a></li>
                    <li><a href="#"><img src="https://lh5.googleusercontent.com/-ZNN0rs6kFQg/VCJ__sZ4uxI/AAAAAAAALEw/0fqD6OR34zw/s160/5.jpg" alt="image05" /></a></li>
                    <li><a href="#"><img src="https://lh5.googleusercontent.com/-SgCC3L6AWuM/VCJ__wlrtbI/AAAAAAAALEk/S4ae0g55Nbc/s160/6.jpg" alt="image06" /></a></li>
                    <li><a href="#"><img src="https://lh6.googleusercontent.com/-D8naq3CSXeI/VCKAARmuI-I/AAAAAAAALEc/CDslrPrxl8c/s160/7.jpg" alt="image07" /></a></li>
                    <li><a href="#"><img src="https://lh4.googleusercontent.com/-quFpRIxrD7w/VCKAA9ImSzI/AAAAAAAALEY/X1cMNPVgVXI/s160/8.jpg" alt="image08" /></a></li>
                    <li><a href="#"><img src="https://lh6.googleusercontent.com/-b5IfsevEgBo/VCKABE0jMJI/AAAAAAAALEs/gz2qv3vju9k/s160/9.jpg" alt="image09" /></a></li>
                    <li><a href="#"><img src="https://lh6.googleusercontent.com/-bEcP35b38ug/VCKACMuLlaI/AAAAAAAALEo/K09-ixpHBug/s160/10.jpg" alt="image10" /></a></li>
                    <li><a href="#"><img src="https://lh3.googleusercontent.com/-CfLafYclAJU/VCJ_6i6qbrI/AAAAAAAALDI/5Z5-OO_CVCo/s160/11.jpg" alt="image11" /></a></li>
                    <li><a href="#"><img src="https://lh3.googleusercontent.com/-w9cVhSV8Rv0/VCJ_7F8gSiI/AAAAAAAALDA/sCyLh3IQ6CA/s160/12.jpg" alt="image12" /></a></li>
                    <li><a href="#"><img src="https://lh3.googleusercontent.com/-otqml7jyx6k/VCJ_7QBLnBI/AAAAAAAALDQ/GMnjVcd4JIo/s160/13.jpg" alt="image13" /></a></li>
                    <li><a href="#"><img src="https://lh5.googleusercontent.com/-D9Tv7akbJpk/VCKCUEsK0NI/AAAAAAAALFU/E5-oJOvOvB0/s160/14.jpg" alt="image14" /></a></li>
                    <li><a href="#"><img src="https://lh5.googleusercontent.com/-5jkKFQrZc1I/VCJ_78STffI/AAAAAAAALDg/WA0A8nSLv6k/s160/15.jpg" alt="image15" /></a></li>
                    <li><a href="#"><img src="https://lh5.googleusercontent.com/-GadFfnnvTkc/VCJ_8pToYhI/AAAAAAAALFI/nAo734y66_8/s160/16.jpg" alt="image16" /></a></li>
                    <li><a href="#"><img src="https://lh3.googleusercontent.com/-k0WIUhGnNzE/VCJ_9G6Y6oI/AAAAAAAALDo/Nd5XsLJ_-fw/s160/17.jpg" alt="image17" /></a></li>
                    <li><a href="#"><img src="https://lh3.googleusercontent.com/-eLAKUwe04yw/VCJ_9e7rveI/AAAAAAAALFE/hqOk7pGDTEQ/s160/18.jpg" alt="image18" /></a></li>
                    <li><a href="#"><img src="https://lh3.googleusercontent.com/-hS6dOv8jtAM/VCJ_9kY2dSI/AAAAAAAALDw/WApP0JRKtnM/s160/19.jpg" alt="image19" /></a></li>
                    <li><a href="#"><img src="https://lh4.googleusercontent.com/-Iz9S4R5rBIM/VCJ_-nVLXDI/AAAAAAAALE8/5ikQKVIrL4w/s160/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.

11 yorum:

  1. Eline sağlık Serdar Abi teşekkürler.

    YanıtlaSil
  2. Aynı yorumu yatay paylaşımınızda da yaptım, inşallah cevap verirsiniz.

    Güzel eklenti ve hiç kasmadan çalışıyor.
    Lakin arka plandan dolayı hiçbirşey seçilmiyor. İleri geri butonları zor seçiliyor hatta hiç gözükmüyor. Resimlerin dışındaki alan, yani o beyaz çerçeve transparan olsa belki daha hoş görünecek.

    Admin bununla ilgili yardımcı olabilir misin?

    YanıtlaSil
  3. Görünümü değiştirmek için https://dl.dropbox.com/u/60346665/BlogHocam-MinimalSlayt/css/elastislide.css adresşndeki stil dosyasını düzenleyip güncellemek gerekiyor.

    YanıtlaSil
  4. O css'yi değiştirebilecek kadar tam bilgim olmasada çıkartabilirim ama tekrar nasıl css olarak kaydedebilirim onu bilmiyorum. Bu konuda birşey söyleyebilirmisiniz?

    YanıtlaSil
  5. Dropbox kurulumu ile ilgili yazımı okursan kolayca yapabilirsin.

    YanıtlaSil
  6. Hocam başka bir jquery kullanıyorsak bununla o çakışırlar mı? Zararı olur mu?

    YanıtlaSil
  7. @Fırat Yalçın
    Evet çakışırlar. Jquery kodlarından birini kaldırmalısın.

    YanıtlaSil
  8. admın eklentıler ıyı hosta bıde demosunu zaman ayırıp eklesen daha ıyı olacak

    YanıtlaSil
  9. # işareti yerine rakam /numara mı gireceğiz ? cvp için şimdiden tşk

    YanıtlaSil
  10. @duygu keles
    Hayır, # işareti yerine resme tıklayınca açılmasını istediğiniz sayfanın urlsini gyazacaksınız.

    YanıtlaSil

Picardes

LİNKLER