Slider (2016 - 2017)

Blogger Slider Manşet Alanı

Slider, görsellerinizin kayarak çeşitli şekillerde bir başka resme doğru gitmesine denir kısaca.  Bu slider kodları İnternet sitelerinde manşet alanı olarak da kullanılabilir. Genel olarak resimler için kullanıldığını belirtelim.

Aynı zamanda bu uygulama ile resimlerde geçiş yapan kişinin o görsele tıkladığında herhangi bir sayfanızın bağlantısını eklediğinde direk oraya yönlenmesini  sağlar.  

Slider en pratik ve kolay bir  uygulama olduğu için genel olarak neredeyse artık bu zamanda birçok sitede görmüş olabilirsiniz. Örnek olarak iF sitemizde birkaç tane manşet alanı vardır. Ancak bendeki manşet alanı etikete göre çalışmakta ve temaya ait özel bir kodla oluşturmuştur. 

Bu konuda sizlere çok basit bir yöntemle ekleyeceğiniz  resimlerinize link ekleyerek ve açıklama yazarak ziyaretçilerinizin ilgisini çekeceği aynı zamanda sitenize görsellik açısından zenginlik katacağını düşündüğümüz çok güzel bir slider ile karşınızdayız. 

Uzun zamandan beri  Blogger tabanlı sitelere eklenen bu tür uygulama bulmak zor oluyordu.  Bazıları artık çalışmıyor Javascript ile yapılmış ve CSS ile desteklenmiş olan bu kod  tek hamlede sitenize ekleyebiliyorsunuz. Eski olan uygulamalarınız şuan belki  çalışmıyor olabilir. Bunun nedenlerinden  biri js kodunun artık işlevselliği  gitmiş olması silinmesi veya servisin kapanmış olması durumu söz konusu olabilir.

Blogger Yeni Slider Uygulamasını Panele Ekleme İşlemi...

İlk olarak  Blogger'e giriniz. Ve buradan  yerleşim sekmesine giderek  "Gadget Ekle" kısmından "HTML/JavaScriptEkle"  seçeğine tıklayın ve kutucuk açılacak aşağıda vermiş olduğumuz kodu buraya ekleyin tamam diyin.  Fakat bundan önce  düzenlemeniz gereken yerler vardır. 

Aşağıdaki gibi kodlar vardır bunlarda birini ele alıp düzenleme işlemini göstereceğim.

<li>     <a href="Link ekle">    <img src="Resim ekle" title="açıklama ekle" />      </a>

Şeklinde resmin gitmesini isteğiniz bir bağlantıyı link ekle yazan yere ekleyin. Bu kısım kodun üst bölümündedir. Alt bölümde de buna benzer yerler vardır. Ancak orada "#" bölümüne link eklemiyoruz sadece aynı resmi eklemeniz yeterli ve yukarıda ki kod sadece 6 tanedir. Bunu dilediğiniz kadar çoğaltabilirsiniz.  Şimdi diğer kısmın düzenlemesine geçelim.

Yukarıda kodların bitişinde şu şekilde "<div class="jslider_thumbs">" kod göreceksiniz bunun hemen altında aşağıdaki gibi resimlerin ekleyeceği bölüm vardır. Ve hepsi alt alta 6 tane bulunmaktadır.  

<div class="jslider_thumbs">

                <div>

                    <a href="#" title="resim1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj155UJOSDQm_EibFf-zAVgACg1wP1IY8H__ttVBYpcFwkKt1xiaJ8UDT9t90J_wJ4T49WajOYwVj4xjpiAHi1qSV7cY7sR58BcbZ29xgHmB30yVAUtUBV_YKxHyZ6WO49ntdGpcswXfbMI/s85/sample1.jpg" /></a>

                    <a href="#" title="resim2"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLMW1bA_mY7j9CwhHyLcnXZu-Fs4IjebYCVRXMhJI-Azm7i0Krr_2pBSLkY6ir5vk1JWKjJ_8rUoP9RbrkMQBT7qauSTpVLxl5HsE02tUVzhbwGtijqINA7kb-rc7VkvDjiGWuYG0DDjY2/s85/sample2.jpg" /></a>

                    <a href="#" title="resim3"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI8KBBA65fDRtkgrP5uEYpr9MydLz1onWUWR0MX7N0lnHMSRU7TPuptkmOhWrONYzIh2lLiorI3XMszeQSAhlPwer-xobbnTAUbFigX6Rr52xgo8FJdUROVuxLXzECqhDOHyV8riC6AAXx/s85/sample3.jpg" /></a>

                    <a href="#" title="resim4"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7dxqpLtZab2oxb4srijUHlzosKMpvtSXBj9JCIt-uNOV7doIPgnIYHqs79pL7qxN-giA-dMXinRIum-bfODB9acCTAT3JsPRLzlNOChefq9oN3saSxETNY_fMMPe_8I4CBGuIUxhwXlSg/s85/sample4.jpg" /></a>

                    <a href="#" title="resim5"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidgsK91qEVdo_mkhvQWm5cU7nFmYiOGhgz7GlzNMIfxsJ8MX1CjYtvtyPazwqxaTh9BrzliAjkd6_oNuMZg0kBIYtFvrQrUKZC3TRLFYGBQ9UyqsV4nho9Y9CH5gjOwfHelg5ZaLAs2uou/s85/sample5.jpg" /></a>

                    <a href="#" title="resim6"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg553GzXgr6XHsgJrYRLW7ZdYiJS1fFXqUftLf9bW2XRMHeRPdZXshtwAAEtD3Rwan7U_VBTqIHLBqyy4cOBSMYbjRl671L_GPB85udN78bHwmNnHqF-c-FX8T7bZDaCbk2gdJDPafAU79D/s85/sample6.jpg" /></a>

                </div>

Yukarıdaki bölüme ilgili resimleri eklemeniz yeterli "<a href="#" bu bölüme link eklemenize gerek yok. Çünkü yukarıdaki koda ekledik. Resme tıklayınca direk olarak sizi eklediğiniz  görselin bağlantısına götürecektir. Ekleme işlemini video ile de anlattım. 

Yapmanız gerekenler bundan ibaret sadece  gadget ekleyerek işlem tamamdır. Fakat ben yazıyı uzun tuttum ancak işlem çok kısa sürede yapılmaktadır. 

Eklenecek Kod:

<style type="text/css"> .slider-box { background: none repeat scroll 0 0 #FAFAFA; border-radius: 5px 5px 5px 5px; box-shadow: 0 0 3px #333333; margin: 0 auto; width: 675px; overflow: hidden; } #slider-wrapper { margin: 0 auto; padding: 10px; } #jslider-container { border: 2px solid #FFFFFF; max-width: 550px; position: relative; text-align: left; z-index: 90; } </style> <link href="http://project.dimpost.com/image-slider/wowslider/css/wow-slider.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script> <div class="slider-box"> <div id="slider-wrapper"> <div id="jslider-container"> <div class="jslider_images"> <ul> <li> <a href="http://www.ibrahimfirat.net"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsFlpl4t3fvqw4Et-UXLdaM2OfkvPFCmNBu7l64QKWjsx3I2N_r9H23MCSuIZ1wHFRY3tHvfs6LWLyZiG_xpZbiLgL7EBHAbLpY8VHT7vai2sM-vz6hK3KvtTGKhBFg_2sfbA8Xm-OAiPs/s550/sample1.jpg" title="İF" /> </a>görsel 1</li> <li> <a href="http://www.ibrahimfirat.net"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPZshXem9gMU3O73wBNiI06f_f-GbotET95Ytosj7y1VDF1GvUwzUsv-5JYW1zFK0zHtOmSUgkh1j-RP1Siros_pCYe1AtxOj3ardjEr8XMcr4BlAMIDazhTp-LI2RF3EQR3pt5YOJXI2F/s550/sample2.jpg" title="ibrahim" /> </a> </li> <li> <a href="http://www.ibrahimfirat.net"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvluxY7CUF8alC8DawFCG3mNPipxHJdg54mj9ivC-7TrCGidOaiMkM03K6NxMhhPMV3IhqqW-QTIUaq45jTuEdLXUnnR1Pifi3-cSST2l_RdJLaRcLwcOTC4NV8uTu1uV6S7ovpOhiTDJQ/s550/sample3.jpg" title="ibrahimfirat" /> </a>resim</li> <li> <a href="http://www.ibrahimfirat.net"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY8e-Ns7mtFEOkqFbcJe3n70kqi01kQtZJa5xOt9104v7lBR3cU16SlNH-FqPkmgdyAZeFjQKVscaDQrqBPUJAHIc1WRw6pd6iPqe1i_Gu_PBumfVFYkEQ6WUT6KU38Jf5lw6_xGLVcGP-/s550/sample4.jpg" title="slider" /> </a>değişik görsel</li> <li> <a href="http://www.ibrahimfirat.net"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn9ChVtO_MErUco92OQoDbMnmkJVxdmlfkTnGCXVvWF8rtZbJwJhCjO16wilCVH5coEZ9KLXGMgD3h9ct1jEg_xy9k3pgI-__4oIE4uSx3EzcqUCw6xAMz4uIF98_PB2D5SC_kMa3D00R8/s550/sample5.jpg" title="manşet" /> </a> </li> <li> <a href="http://www.ibrahimfirat.net"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaIMfrRfYlmRsT3WqD_Gnkiey3z7v-nzO1Y7em4NEX2TqNPbhkfnVdEWwg4mMcDLFjMxeJofFoNZ-5Jl9A_3GGcGQko26xsTZJBHaP76pczGUm8ddTsI6iBAELTzkFeqqQSouOgHZ3GgVD/s550/sample6.jpg" title="açıklama" /> </a> </li> </ul> </div> <div class="jslider_thumbs"> <div> <a href="#" title="resim1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj155UJOSDQm_EibFf-zAVgACg1wP1IY8H__ttVBYpcFwkKt1xiaJ8UDT9t90J_wJ4T49WajOYwVj4xjpiAHi1qSV7cY7sR58BcbZ29xgHmB30yVAUtUBV_YKxHyZ6WO49ntdGpcswXfbMI/s85/sample1.jpg" /></a> <a href="#" title="resim2"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLMW1bA_mY7j9CwhHyLcnXZu-Fs4IjebYCVRXMhJI-Azm7i0Krr_2pBSLkY6ir5vk1JWKjJ_8rUoP9RbrkMQBT7qauSTpVLxl5HsE02tUVzhbwGtijqINA7kb-rc7VkvDjiGWuYG0DDjY2/s85/sample2.jpg" /></a> <a href="#" title="resim3"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI8KBBA65fDRtkgrP5uEYpr9MydLz1onWUWR0MX7N0lnHMSRU7TPuptkmOhWrONYzIh2lLiorI3XMszeQSAhlPwer-xobbnTAUbFigX6Rr52xgo8FJdUROVuxLXzECqhDOHyV8riC6AAXx/s85/sample3.jpg" /></a> <a href="#" title="resim4"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7dxqpLtZab2oxb4srijUHlzosKMpvtSXBj9JCIt-uNOV7doIPgnIYHqs79pL7qxN-giA-dMXinRIum-bfODB9acCTAT3JsPRLzlNOChefq9oN3saSxETNY_fMMPe_8I4CBGuIUxhwXlSg/s85/sample4.jpg" /></a> <a href="#" title="resim5"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidgsK91qEVdo_mkhvQWm5cU7nFmYiOGhgz7GlzNMIfxsJ8MX1CjYtvtyPazwqxaTh9BrzliAjkd6_oNuMZg0kBIYtFvrQrUKZC3TRLFYGBQ9UyqsV4nho9Y9CH5gjOwfHelg5ZaLAs2uou/s85/sample5.jpg" /></a> <a href="#" title="resim6"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg553GzXgr6XHsgJrYRLW7ZdYiJS1fFXqUftLf9bW2XRMHeRPdZXshtwAAEtD3Rwan7U_VBTqIHLBqyy4cOBSMYbjRl671L_GPB85udN78bHwmNnHqF-c-FX8T7bZDaCbk2gdJDPafAU79D/s85/sample6.jpg" /></a> </div> </div> </div> </div> </div> <script type="text/javascript" src="http://dimpost.googlecode.com/files/wow-slider.js"></script>

Video izle