So many beautiful plugins are being developed for Blogger that I think one of those beautiful plugins must be Highslide, which I will explain now.. Because, with the Highslide plugin, you are adding a really visual feature to your blog.. I want to talk about this feature; With the Highslide plugin, you can zoom the pictures on your blog, and you can also moveto the right and left the picture you zoomed in. I really want to move on to the implementation steps of Highslide, which I think is a very nice plugin.. I hope it will be a useful plugin for many people.
First find the following code in your theme;
Then, use the following code above we add before the code;
// 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 fixBlogg erImages(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”);
}
}
}
//]]>>
Now, we find the following code;
And before the above code , we add the following codes;
fixBloggerImages("s1600-h", "s1600");
<
You don’t need to do anything else for the plugin to work.. You can continue to upload images normally.. For each image you add, the plugin will run automatically.
Important Information: Image types attached to the plugin (.jpg, .gif and .png)’ is. Therefore, if you want to reproduce these image types, it will be enough to use the following codes.
if (el.href && /.yourimageturunantisi$/.test(el.href)) {
el.className = ‘highslide’;
return ‘image’;
}
}
So, to add new image types, when typing extensions it will be enough to add the above codes after the following codes.
if (el.href && /.gif$/.test(el.href)) {
el.className = ‘highslide’;
return ‘image’;
}
Good blogging everyone..