Blogger Resim Galerisi (Yazı içi photo gallery)

Blogger Resim Galerisi Nasıl Yapılır? Blogger Resim Galerisi Ekleme? Yazı içine Foto Galleri Ekleme? Blogger imagine (Photo) Gallery?
Blogger kullanan arkadaşlar için yazı içine nasıl resim galerisi eklenebilir onu anlatmak istedim. Aslında Blogger bu açıdan çok kullanışsız ama bir kaç kod ile Gallery yapmamız mümkün. Bu resim galerisi her post (yazı) için uygulabileyeceğiniz ve görsel olarak da çok hoş bir eklenti. Yan taraftaki resimde demo olarak görebilirsiniz. Buraya ekliyeceğiniz resim sayısını kodlarda değişiklik yaparak çoğaltmanız mümkün. Aynı şekilde resim boyutlarında da değişiklik yapbilirsiniz. Şimdi bu kodu nasıl çalıştırıyoruz ona geçelim. Öncelikle Şablon >> HTML'yi Düzenle diyelim. Bundan önce unutmadan Şablonunuzun bir yedeğini almayı unutmayın!!! Daha sonra aşağıda gördüğünüz kodları </head> kodunun hemen üstüne yapıştırın. <style type='text/css'> #image-gallery {display: none;} #jquery-gallery {padding:0;margin:0;list-style: none; width: 500px;} #jquery-gallery li {width:84px; height: 80px;background-size: 100%;-webkit-background-size: cover;-moz-background-size: cover; -o-background-size: cover;background-size: cover;margin-right: 10px; border: 3px solid #fff; outline: 1px solid #E3E3E3; margin-bottom: 10px;opacity: .5; filter:alpha(opacity=50); float: left; display: block; } #jquery-gallery li img { position: absolute; top: 100px; left: 0px; display: none;} #jquery-gallery li.active img { display: block; border: 3px solid #fff; outline: 1px solid #E3E3E3; width:490px; max-height: 375px;} #jquery-gallery li.active, #jquery-gallery li:hover { outline-color: #DFDFDF; opacity: .99;filter:alpha(opacity=99);} #gallery-caption { position: absolute;color: #000;font-weight: bold;background: #FFFFFF; font-size: 16px; bottom: 0px;} </style>
Bu kodları yapıştırdıktan sonra yine </head> kodunun hemen üstüne aşağıdaki kodları da yapıştırın. <script type='text/javascript'> //<![CDATA[ var gal = { init : function() { if (!document.getElementById || !document.createElement || !document.appendChild) return false; if (document.getElementById('image-gallery')) document.getElementById('image-gallery').id = 'jquery-gallery'; var li = document.getElementById('jquery-gallery').getElementsByTagName('li'); li[0].className = 'active'; for (i=0; i<li.length; i++) { li[i].style.backgroundImage = 'url(' + li[i].getElementsByTagName('img')[0].src + ')'; li[i].title = li[i].getElementsByTagName('img')[0].alt; gal.addEvent(li[i],'click',function() { var im = document.getElementById('jquery-gallery').getElementsByTagName('li'); for (j=0; j<im.length; j++) { im[j].className = ''; } this.className = 'active'; document.getElementById('gallery-caption').innerHTML = this.title; }); } }, addEvent : function(obj, type, fn) { if (obj.addEventListener) { obj.addEventListener(type, fn, false); } else if (obj.attachEvent) { obj["e"+type+fn] = fn; obj[type+fn] = function() { obj["e"+type+fn]( window.event ); } obj.attachEvent("on"+type, obj[type+fn]); } } } gal.addEvent(window,'load', function() { gal.init(); }); //]]> </script>
Bu koddan sonra Şablonu Kaydet diyelim ve Yeni bir post sayfası açalım.
Aşağıdaki kodları yazılarınızın içine ekleyerek kullanabilirsiniz. Tek yapmanız gereken istediğiniz resmin URL'sini yapıştırmak olacaktır.
<div style="position:relative;"> <ul id="image-gallery"> <li><a href="RESİM URL"><img alt="Resim Adı" src="RESİM URL1" /></a></li> <li><a href="RESİM URL"><img alt="Resim Adı" src="RESİM URL2" /></a></li> <li><a href="RESİM URL"><img alt="Resim Adı" src="RESİM URL3" /></a></li> <li><a href="RESİM URL"><img alt="Resim Adı" src="RESİM URL4" /></a></li> <li><a href="RESİM URL"><img alt="Resim Adı" src="RESİM URL5" /></a></li> </ul> </div>

Etiketler: Sitene resim galerisi ekle, Blogger Blogspot Site için Resim Galerisi Yapma, Blogger Resim Galerisi Yapma, Blogger için Instagram Fotoğraf Galerisi Oluşturmak