Blogger için Highslide eklentisi

Blogger için o kadar güzel eklentiler geliştiriliyor ki, sanırım o güzel eklentilerden birisi de şimdi anlatımını yapacağım Highslide eklentisi olsa gerek. Çünkü, Highslide eklentisi ile, blogunuza gerçek anlamdagörsellik açısından çok güzel bir özellik eklemiş oluyorsunuz. Bu özellikten bahsetmek istiyorum; Highslide eklentisi ile blogunuzda yer alan resimleri yakıntaştırabiliyorsunuz ve ayrıca yakınlaştırdığınız resimi istediğiniz gibi sağa ve sola taşıyabiliyorsunuz. Gerçekten çok güzel bir eklenti olarak düşündüğüm Highslide’ın uygulama adımlarına geçmek istiyorum. Umarım, bir çok kişi içinf faydalı bir eklenti olacaktır.

Öncelikle temanızda yer alan aşağıdaki kodu bulun;

</head>

Sonra ise, aşağıdaki kodu yukarıdaki koddan önce ekliyoruz;

<script src='http://teknobeyin.googlecode.com/files/highslide-full.js' type='text/javascript'/>
<link href='http://highslide.com/highslide/megik.css' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>
//<![CDATA[
hs.graphicsDir = 'http://highslide.com/highslide/graphics/';
hs.allowSizeReduction = false;
hs.showCredits = false;
hs.isUnobtrusiveAnchor = function(el) {
if (el.href && /\.jpg$/.test(el.href)) {
el.className = 'highslide';
return 'image';
}
if  (el.href && /\.gif$/.test(el.href)) {
el.className =  'highslide';
return 'image';
}
if  (el.href && /\.png$/.test(el.href)) {
el.className =  'highslide';
return 'image';
}
}
function fixBloggerImages(searchFor, replaceWith) {
var href;
var anchors = document.getElementsByTagName("a");
for(var i = 0; i < anchors.length; i++) {
href = anchors[i].href;
if(href.indexOf(searchFor) != -1) {
anchors[i].href = href.replace(searchFor, replaceWith);
anchors[i].setAttribute("onclick", "return hs.expand(this)");
anchors[i].setAttribute("class", "highslide");
anchors[i].setAttribute("title", "Click to enlarge");
}
}
}
//]]>
</script>

Şimdi ise, aşağıdaki kodu buluyoruz;

</body>

Ve yukarıdaki koddan önce, aşağıdaki kodları ekliyoruz;

<script type='text/javascript'>fixBloggerImages(&quot;s1600-h&quot;, &quot;s1600&quot;);</script>

Eklentinin çalışması için başka birşey yapmanıza gerek yok. Normal bir şekilde resim yüklemeye devam edebilirsiniz. Eklediğiniz her resim için, eklenti otomatik olarak çalışacaktır.

Önemli Bilgi: Eklente ekli olan resim türleri (.jpg, .gif ve .png)’dir. Dolayısı ile bu resim türlerini çoğaltmak istiyor iseniz, aşağıdaki kodları kullanmanız yeterli olacaktır.

if  (el.href && /\.resimturununuzantisi$/.test(el.href)) {
el.className =  'highslide';
return 'image';
}
}

Yani, yeni resim türleri eklemek için, uzantıları yazarken yukarıdaki kodları, aşağıdaki kodlardan sonra eklemeniz yeterli olacaktır.

if  (el.href && /\.gif$/.test(el.href)) {
el.className =  'highslide';
return 'image';
}