Blogger CSS3 Görüntü Slider Desteği

Blogger moda sitelerinde yayın görsellerini daha şık bir görünümde ziyaretçilere sunarak, ziyaretçilerin ilgisini çekebilmek için Blogger CSS3 Görüntü Slider Desteği tam da bu isteğinizi karşılamak için tasarlandı.

Özellikler;

• Duyarlı.
• Sadece CSS ile tasarlanmıştır, javascript kullanılmamıştır.
• Özelleştirilebilir.
• FontAwesome vektör simgeleri kullanılmıştır.
• Temiz kodlama ve şık bir tasarıma sahiptir.
• Gömülü sosyal medya paylaşım seçeneği.
• Otomatik media slayt özelliği.

Blogcular tarafından çok tercih edilebilecek temiz bir kodlamaya sahiptir. Çünkü CSS3 görüntü slider desteği blog resimlerinizin bozulmadan blogunuzun isteğiniz menüsünde kullanabileceğiniz özelliklere sahiptir. Özellikle moda blocuları veya ev hanımlarının tercih ettiği görselleri çok olan bloglar için harika bir eklentidir. Peki CSS3 Görüntü Slider Desteği nasıl bloga eklenir?

Örnek Sayfa

Blogger CSS3 Görüntü Slider Desteği Kurulumu

1. Blogger hesabınıza giriş yapın ve blogunuzun kumanda panelinden Şablon > HTML'i Düzenle yolunu takip edin ve blogunuzun şablon kodları sayfasını açın.

2. Şablon kodları sayfasında CTRL+F yardımıyla </head> kodunu bulun ve aşağıdaki CSS linklerini </head> kodunun bir satır üzerine ekleyin ve şablonu kaydedin.

<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/jquerycods/cszs/master/.0001.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/jquerycods/cszs/master/.0002.css"/>

3. Aşağıdaki HTML kodları blogunuzun neresinde kullanmak istiyorsanız oraya ekleyin. Eğer şablon kodlarından biraz anlıyorsanız şablon kodları arasına entegre edebilirsiniz. Eğer bilmiyorsanız blogunuzun kumanda panelinden Yerleşim > Gadget Ekle yolunu takip ederek, ister Header altına ister Slidebar'a bir Gadget ekleyerek de bunu yapabilirsiniz. Gadget ekleyerek nasıl yapılır diyen olursa, Gadget Ekle diyoruz ve ardından HTML/JavaScript Ekle seçeneğini tıklayarak aşağıdaki HTML kodları açılan pencerede HTML/JavaScript menüsü içerisine ekleyin ve kaydedin.

<!-- Blogger Eklentileri CSS3 Görüntü Slider Desteği -->
<input name="playstop" type="checkbox" id="playstop">
<div class="toggle-back">
<label for="playstop" class="toggle"><span class="fa fa-play-circle-o"></span></label>
</div>
<input name="common" type="radio" id="one-radio" class="one-radio" checked="">
<input name="common" type="radio" id="two-radio" class="two-radio">
<input name="common" type="radio" id="three-radio" class="three-radio">
<input name="common" type="radio" id="four-radio" class="four-radio">
<input name="common" type="radio" id="five-radio" class="five-radio">
<!-- Slider Images here -->
<div class="slider">
<img src="https://cdn.rawgit.com/jquerycods/cszs/master/1.jpg">
<img src="https://cdn.rawgit.com/jquerycods/cszs/master/2.jpg">
<img src="https://cdn.rawgit.com/jquerycods/cszs/master/3.jpg">
<img src="https://cdn.rawgit.com/jquerycods/cszs/master/4.jpg">
<img src="https://cdn.rawgit.com/jquerycods/cszs/master/5.jpg">
</div>
<!-- Social Media Options -->
<div class="media-back">
<input name="mediashare" type="checkbox" class="media-icons" id="media-icons">
<label for="media-icons" class="media-share"><span class="fa fa-share-alt"></span></label>
<div class="media">
<a href="#" class="one-media"><i class="fa fa-facebook"></i></a>
<a href="#" class="two-media"><i class="fa fa-twitter"></i></a>
<a href="#" class="three-media"><i class="fa fa-pinterest"></i></a>
<a href="#" class="four-media"><i class="fa fa-instagram"></i></a>
</div>
</div>
<!-- Slider arrows -->
<div class="backward-arrow">
<label for="one-radio"><span class="fa fa-chevron-left"></span></label>
<label for="two-radio"><span class="fa fa-chevron-left"></span></label>
<label for="three-radio"><span class="fa fa-chevron-left"></span></label>
<label for="four-radio"><span class="fa fa-chevron-left"></span></label>
<label for="five-radio"><span class="fa fa-chevron-left"></span></label>
</div>
<div class="bullets">
<label for="one-radio"></label>
<label for="two-radio"></label>
<label for="three-radio"></label>
<label for="four-radio"></label>
<label for="five-radio"></label>
</div>
<div class="forward-arrow">
<label for="one-radio"><span class="fa fa-chevron-right"></span></label>
<label for="two-radio"><span class="fa fa-chevron-right"></span></label>
<label for="three-radio"><span class="fa fa-chevron-right"></span></label>
<label for="four-radio"><span class="fa fa-chevron-right"></span></label>
<label for="five-radio"><span class="fa fa-chevron-right"></span></label>
</div>
</div>
<!-- Blogger Eklentileri CSS3 Görüntü Slider Desteği -->

4. Peki bu CSS3 görüntü desteği sadece 5 görsel mi ekleniryor? Hayır, 6,7,8,9...+ çok yüksek boyutlu görseller eklemediğiniz sürece bir sınır yok.

Kısa Bilgiler ve Açıklamalar

1. HTML kod içerisinde bulunan ...jpg görsellerinin yerine kendi görsellerinizi ekleyin. Peki bu görsellere link (bağlantı) verilebilir mi? Evet verilebilir, <img href="#" src="https://cdn.rawgit.com/jquerycods/cszs/master/1.jpg"> bu kodda gördüğünüz gibi kod içerisine href="#" özelliğini ekledik görsellerinizde bu kodu kullandığınızda link verebilirsiniz.

2. Yukarıdaki HTML kod içerisinde bulunan sosyal medya butonlarına (#) kendi sosyal medya sayfa bağlantılarınızı ekleyin.

Etiketler: Blogger CSS3 Eklentileri, Blogger CSS3 Görüntü Slider Desteği