Blogger yazı içinde resim galerisi

Blogger kontrol panelinizdeyken sırasıyla " Tema » HTMLyi düzenle " tıklayın. CTRL+F kombinasyonu'nu kullanarak sayfada "</head> " aratın ve bu kodun üstüne aşağıda verilen kodu ekleyin.;

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

<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 kodumuzdan sonra Şablonu Kaydedip Yeni bir post sayfası açıyoruz.

Aşağıda verilen kodlarımızı yazımızın içine HTML tabına aktif ederek, ekleyip kullanabilirsiniz. Yapmanız gerekenler RESİM URL ve Resim Adı yazan kısımları kendinize göre editlemek.

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

DEMO:

• 
• 
• 
• 
•