Add Load More Posts or Infinite Scrolling to Blogger

You might have seen the implementation of infinite scrolling at Facebook, Twitter or Google+. Instead of showing <a href="http://helplogger.blogspot.com/2014/04/how-to-add-numbered-page-navigation-widget-for-blogger.html">Older / Newer posts links</a>, we can load posts dynamically whenever a "Load more posts" button is clicked, or by scrolling down the page. This tutorial will show you how to implement Ajax based loading script that will add Load More Posts or Infinite Scrolling to Blogger, so that visitors can easily navigate without reloading the page.<br /><br /><h3>How it works?</h3>- You have the option to add a 'Load More Posts' button or load automatically the older posts as visitors scroll down the page.<br />- Once implemented, Load More Posts / Infinite Scrolling applies to all Blogger posts on index pages (homepage, archive, label pages). It can't be added on individual posts.<br /><br /><h3>Demo</h3>To see it live, check out the demo below. When you scroll down to the bottom of the page, you will see the "Load More Posts" button. Once you click it, the next 3 posts set to display will load below.<br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="infinite scrolling, load more posts" border="0" height="283" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQRqcAIXZf40DAKxE-sdFv104nr93FGEqfkToqw2NYAEAkTC8ZgmCZCgE6E7eU7ZHHVyvK8AH-PMucrJ4umbP6WmezcIOl0T0U8C9YIzB70aq47J0Vd0rL4x9yomcfGFMO5Ie7MZtkhjS9/s400/load-more-blogger-infinite-scrolling.png" title="Add Load More Posts (infinite scrolling) to Blogger" width="400" /></div><br /><div style="text-align: center;"><a class="demo-link" href="http://load-more-blogger.blogspot.com/" rel="nofollow" target="_blank">Demo </a></div><br /><br /><h2>Adding Load More Posts or Infinite Scrolling to Blogger</h2>1. Log into your <a href="https://blogger.com/" rel="nofollow" target="_blank">Blogger account</a> and click on your blog where you want to add it. <br />2. Go to 'Theme' and click the 'Edit HTML' button to open the Template editor > click anywhere in the code area and press CTRL + F keys (or Command + F) to open the search box.<br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><img border="0" data-original-height="525" data-original-width="1087" height="309" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQr8nkttURZKD-4oTP_s7QjM1xm3049qReQBKnK5IqJYKl6eNNoYxJqmjQtT_Dy2cIh2FHSKVnpZuurUzwsT5z5HNPT5DiK0q6FyIy7hikhGs0S-PifC3XokkCkaiXrVNL3vw-Kl8bia0x/s640/add-infinite-scrolling-to-blogger.png" width="640" /></div><br />3. Type the tag below in the search box and press ENTER to find it:<br /><blockquote class="tr_bq"></body></blockquote>4. Just above the <span style="background-color: yellow;"></body></span> tag, add the script below:<br /><br />a. If you want to load posts with 'Load More Posts' button like in the demo blog, add this script:<br /><blockquote class="tr_bq"><span style="color: red;"><script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js'/></span><br /><b:if cond='data:blog.pageType != &quot;static_page&quot;'><b:if cond='data:blog.pageType != &quot;item&quot;'><br /><script type='text/javascript'><br />//<![CDATA[<br />function resizeThumb(e,n){for(var t=document.getElementById(e).getElementsByTagName("img"),a=0;a<t.length;a++)t[a].src=t[a].src.replace(/\/s72\-c/,"/s"+n+"-c")}window.labelfx=function(){var e=function(e){var n=e||{},t=n.url_blog||window.location.host,a=n.id_labelcontent||"#labelfxn";$.ajax({url:"http://"+t+"/feeds/posts/summary?max-results=0&alt=json-in-script",type:"get",dataType:"jsonp",success:function(e){var n=e.feed.category,t="";if(void 0!==n){t="<ul class='labelx'>";for(var i=0;i<n.length;i++)t+='<li><a href="/search/label/'+encodeURIComponent(n[i].term)+'" target="_blank">'+n[i].term+"</a></li>";t+="</ul>",$(a).html(t)}else $(a).html("<span>No Label!</span>")},error:function(){$(a).html("<strong>Error Loading Feed!</strong>")}})};return function(n){e(n)}}(),resizeThumb("main",250),labelfx(),function(e){function n(n){e.getScript("http://"+n+".disqus.com/blogger_index.js")}function t(){s||(s=!0,o?(r.find("a").hide(),r.find("img").show(),e.ajax(o,{dataType:"html"}).done(function(t){var a=e("<div></div>").append(t.replace(l,"")),i=a.find("a.blog-pager-older-link");i?o=i.attr("href"):(o="",r.hide());var p=a.find(d).children(".date-outer");e(d).append(p),resizeThumb("main",250),window._gaq&&window._gaq.push(["_trackPageview",o]),window.gapi&&window.gapi.plusone&&window.gapi.plusone.go&&window.gapi.plusone.go(),window.disqus_shortname&&n(window.disqus_shortname),window.FB&&window.FB.XFBML&&window.FB.XFBML.parse&&window.FB.XFBML.parse(),window.twttr&&window.twttr.widgets&&window.twttr.widgets.load&&window.twttr.widgets.load(),r.find("img").hide(),r.find("a").show(),s=!1})):r.hide())}function a(){if("item"!=_WidgetManager._GetAllData().blog.pageType&&(o=e("a.blog-pager-older-link").attr("href"))){var n=e('<a class="loadpost" href="javascript:;" style="text-decoration:none;font:11px Open Sans, sans-serif;letter-spacing:1px;padding:10px 20px;background:#000000;color:#ffffff;">LOAD MORE POSTS</a>');n.click(t);var a=e('<img src="'+i+'" style="display: none;">');(r=e('<div style="display:block;text-align:center;margin:20px auto;"></div>')).append(n),r.append(a),r.insertBefore(e("#blog-pager")),e("#blog-pager").hide()}}var i="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOYM_Q2GXhZKJSr9XLEyf1YdkHrT916JdMdHz-YUCfVJPXkgYM0zABIurrplTsxo1l3k5CIpc_vBJJOtCoW_vg1qD1nNbL0UuF7DKFf1GuI7UhRmfj3surdr-4K4L5xa-BXAMETYqc_Jmm/s1600/loader.gif",o="",r=null,d="div.blog-posts",s=!1,l=(e(window),e(document),/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi);e(document).ready(a)}(jQuery);<br />//]]><br /></script><br /></b:if></b:if></blockquote><br />b. If you want to add the infinite scrolling without button, paste this instead:<br /><blockquote class="tr_bq"><span style="color: red;"><script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js'/></span><br /><b:if cond='data:blog.pageType != &quot;static_page&quot;'><b:if cond='data:blog.pageType != &quot;item&quot;'><br /><style type="text/css">.status-msg-wrap{display:none;}</style><br /><script type='text/javascript'><br />//<![CDATA[<br />!function(i){function e(e){i.getScript("http://"+e+".disqus.com/blogger_index.js")}function t(){g||(g=!0,r?(w.find("a").hide(),w.find("img").show(),i.ajax(r,{dataType:"html"}).done(function(t){var n=i("<div></div>").append(t.replace(c,"")),o=n.find("a.blog-pager-older-link"),d=n.find(s).children();i(s).append(d),window._gaq&&window._gaq.push(["_trackPageview",r]),window.gapi&&window.gapi.plusone&&window.gapi.plusone.go&&window.gapi.plusone.go(),window.disqus_shortname&&e(window.disqus_shortname),window.FB&&window.FB.XFBML&&window.FB.XFBML.parse&&window.FB.XFBML.parse(),window.twttr&&window.twttr.widgets&&window.twttr.widgets.load&&window.twttr.widgets.load(),o?r=o.attr("href"):(r="",w.hide()),w.find("img").hide(),w.find("a").show(),g=!1})):w.hide())}function n(){return Math.max(p.height(),l.height(),document.documentElement.clientHeight)}function o(){n()-(p.scrollTop()+p.height())<150&&t()}function d(){if("item"!=_WidgetManager._GetAllData().blog.pageType&&(r=i("a.blog-pager-older-link").attr("href"))){var e=i('<a href="javascript:;">Load more posts</a>');e.click(t);var n=i('<img src="'+a+'" style="display: none;">');p.scroll(o),(w=i('<div style="text-align: center; font-size: 150%;"></div>')).append(e),w.append(n),w.insertBefore(i("#blog-pager")),i("#blog-pager").hide()}}var a="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOYM_Q2GXhZKJSr9XLEyf1YdkHrT916JdMdHz-YUCfVJPXkgYM0zABIurrplTsxo1l3k5CIpc_vBJJOtCoW_vg1qD1nNbL0UuF7DKFf1GuI7UhRmfj3surdr-4K4L5xa-BXAMETYqc_Jmm/s1600/loader.gif",r="",w=null,s="div.blog-posts",g=!1,p=i(window),l=i(document),c=/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi;i(document).ready(d)}(jQuery);<br />//]]><br /></script><br /></b:if></b:if></blockquote><br />Note: This code uses jQuery library, so if you already have jQuery on your page, please remove the line in red highlighted above.<br /><br />5. Click 'Save template' button and check the 'Load More Posts' button / Infinite Scrolling in your Blogger blog.<br /><br /><h3>Conclusion</h3>That's it! So this is how we can easily add Load More Posts / Infinite Scrolling to Blogger. From now on, our visitors can stay in same page and navigate through infinite number of posts on the fly!

Add Load More Posts or Infinite Scrolling to Blogger

You might have seen the implementation of infinite scrolling at Facebook, Twitter or Google+. Instead of showing Older / Newer posts links ,...

Read more »

Add a Custom jQuery Lightbox To Blogger

If you are not satisfied with the default Lightbox set up by Blogger, here's another cool way to show off your pictures. In case you missed it, I have already shown in one of my posts <a href="http://helplogger.blogspot.com/2013/03/how-to-customize-bloggers-lightbox.html">how to customize the Blogger Lightbox</a> by changing the background color, borders or the text color. This tutorial will show you how to replace it entirely with a cool jQuery Lightbox plugin that is very popular among bloggers.<br /><br />What this Lightbox does is to display a larger versions of the images that will pop-up into a larger box once we click on them, and allows us to easily navigate through that set of photos by using the previous and next buttons.<br /><br /><div class="ssmainhide" style="clear: both; text-align: center;"><img alt="jquery lightbox, blogger plugins" border="0" height="267" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghtQB6OjBopK1KrisI_dzC5frpFJh8B4D3N3KRgd7-GtIia4p6njJFdxQ5jbgVXzYvGOzEWSBvTKGU3ai6Rxv5T-yQDWOSQrvQGNaJkQuO7Rli_oUDP3l6CgZ-EuhaAhdvFuSJIi0nNDlB/s1600/custom-blogger-jquery-lightbox-for-displaying-images.png" title="add a custom jquery lightbox to blogger" width="320" /></div>To see how it works, visit the demo blog and click on any picture to enlarge it.<br /><br /><div style="text-align: center;"><a class="demo-link" href="http://helplogger-demo-lightbox.blogspot.com/" rel="nofollow" target="_blank">Demo Blog </a></div><br /><h2>Adding jQuery Lightbox to Blogger</h2>Step 1. From your <a href="https://www.blogger.com/home" rel="nofollow" target="_blank">Blogger Dashboard</a>, click on "Theme" > "Edit HTML".<br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="blogger edit html" border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBZxuDSF74SaIvFbOkJzwuk_GViqVsU-Jg3BPH6yPAhXfgzrbv10D6i7zzU46ihrvYGMllL20NFDIgMzwjdZ71SwABN7A9C2v3HCRQ_qzBXzNbo1n_sR5TfHWU5l4Bgd96593RVV3lqTS-/s1600/blogger_blogspot_template_edit_html_tutorial.png" title="how to add a custom jquery lightbox to blogger" width="400" /></div><br />Step 2. Click anywhere on the code area and press the CTRL + F keys to open the search box, then paste the following tag inside the search box and hit Enter to find it:<br /><blockquote class="tr_bq">]]></b:skin></blockquote>Step 3. Choose one of the Lighbox styles from below and paste the CSS code just above the <span style="background-color: yellow;">]]></b:skin></span> tag:<br /><br /><h3>Custom Blogger Lightbox with Light Background</h3><div class="separator" style="clear: both; text-align: center;"><img alt="jquery lightbox white" border="0" height="242" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqN9hH2bR6ZregGIyBDx15glayfGF0wqVNAVpoEy89yV8LoWfbwiwzMBiUiXKdjqFFTH52u405VHkOu7bIiNoiQaFG9AyQwNKoLLsC-KzdLNH_5Yl4UMhvqc-ANYdNaNJwQWhJCNWo1J2p/s1600/jquery-lightbox-with-white-background.png" title="add a custom jquery lightbox to blogger" width="320" /></div><blockquote class="tr_bq">#jquery-overlay{position:absolute;top:0;left:0;z-index:90;width:100%;height:500px;}<br />#jquery-lightbox{position:absolute;top:10%;left:0;width:100%;z-index:100;text-align:center;line-height:0;}<br />#jquery-lightbox a,#jquery-lightbox a:hover{border:none;}<br />#jquery-lightbox a img{border:none;}<br />#lightbox-container-image-box{position:relative;background-color:#fff;max-width: 960px;max-height: 560px;margin:0 auto;}<br />#lightbox-container-image{padding:10px;}<br />img#lightbox-image {max-height: 540px;max-width: 940px;}<br />#lightbox-loading{position:absolute;top:40%;left:0%;height:25%;width:100%;text-align:center;line-height:0;}<br />#lightbox-nav{position:absolute;top:0;left:0;height:100%;width: 100%;z-index:10;}<br />#lightbox-container-image-box > #lightbox-nav{left:0;}<br />#lightbox-nav a{outline:none;}<br />#lightbox-nav-btnPrev,#lightbox-nav-btnNext{width:49%;height:100%;zoom:1;display:block;}<br />#lightbox-nav-btnPrev{left:10%;float:left;}<br />#lightbox-nav-btnNext{right:10%;float:right;}<br />#lightbox-container-image-data-box{font:10px Verdana,Helvetica,sans-serif;background-color:#fff;margin:0 auto;line-height:1.4em;overflow:auto;max-width: 940px;;padding:0 10px 0;position:relative;z-index:999;}<br />#lightbox-container-image-data{padding:0 10px;color:#555;}<br />#lightbox-container-image-data #lightbox-image-details{width:70%;float:left;text-align:left;}<br />#lightbox-image-details-caption{font-weight:bold;}<br />#lightbox-image-details-currentNumber{display:block;clear:left;padding-bottom:1.0em;}<br />#lightbox-secNav-btnClose{width:66px;float:right;padding-bottom:0.7em;}</blockquote><br /><h3>Custom Blogger Lightbox with Dark Background:</h3><div class="separator" style="clear: both; text-align: center;"><img alt="jquery lightbox dark" border="0" height="244" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnMeLXMEm3OmKPCBRZSdLf2Ue-ijdAySMuz1_vY_OQVTBrM5Ae7wDT1ZPF2J1KBBlpP98PCNP-kv6tLKkFKArJyVY9iVc7d531_YZpnn6vk8WJucNGc1w_tIbo5aVXF0JydJ2pRocJrz7k/s1600/jquery-lightbox-with-dark-background.png" title="add a custom jquery lightbox to blogger" width="320" /></div><blockquote class="tr_bq">#jquery-overlay{position:absolute;top:0;left:0;z-index:90;width:100%;height:500px;}<br />#jquery-lightbox{position:absolute;top:10%;left:0;width:100%;z-index:100;text-align:center;line-height:0}<br />#jquery-lightbox a,#jquery-lightbox a:hover{border:none}<br />#jquery-lightbox a img{border:none;}<br />#lightbox-container-image-box{position:relative;background-color:#000;max-width: 960px;max-height: 560px;margin:0 auto}<br />#lightbox-container-image{padding:10px;}<br />img#lightbox-image {max-height: 540px;max-width: 940px;}<br />#lightbox-loading{position:absolute;top:40%;left:0%;height:25%;width:100%;text-align:center;line-height:0}<br />#lightbox-nav{position:absolute;top:0;left:0;height:100%;width: 100%;z-index:10}<br />#lightbox-container-image-box > #lightbox-nav{left:0;}<br />#lightbox-nav a{outline:none}<br />#lightbox-nav-btnPrev,#lightbox-nav-btnNext{width:49%;height:100%;zoom:1;display:block}<br />#lightbox-nav-btnPrev{left:10%;float:left}<br />#lightbox-nav-btnNext{right:10%;float:right}<br />#lightbox-container-image-data-box{font:10px Verdana,Helvetica,sans-serif;background-color:#000;margin:0 auto;line-height:1.4em;overflow:auto;max-width: 940px;;padding:0 10px 0;position:relative;z-index:999;}<br />#lightbox-container-image-data{padding:0 10px;color:#fff}<br />#lightbox-container-image-data #lightbox-image-details{width:70%;float:left;text-align:left}<br />#lightbox-image-details-caption{font-weight:bold}<br />#lightbox-image-details-currentNumber{display:block;clear:left;padding-bottom:1.0em}<br />#lightbox-secNav-btnClose{width:66px;float:right;padding-bottom:0.7em}</blockquote><br />Step 4. Now find the following tag and just above it, add one of the scripts below:<br /><blockquote class="tr_bq"></head></blockquote><h4>Script for Lightbox with Light Background:</h4><blockquote class="tr_bq"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/><br /><script type='text/javascript'><br />//<![CDATA[<br />(function(a){a.fn.lightBox=function(p){p=jQuery.extend({overlayBgColor:"#000",overlayOpacity:0.9,fixedNavigation:false,imageLoading:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXU5EXqVvAzaPTJ235CAKhQMKjI80dpx_jOrGn6Ri2AgoKHl0pv6bl3cvmO1S4VcGR9ZoFtTRPpjfaKj1n3sg5BHx2W8qIpExWd_D5YB3zocWQBJZFnMDnKNlLmx6Mu8aNegjRkpd3HtQ/s1600/loading.gif",imageBtnPrev:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT8LMoP0QLfY_i_c4cjTYmpP_GYj6LUXSu0aTa4HIKw8He6Lc6hAPiYVzxhaHSH-9H7sakJlyw94kpkdsgIoKU56G3JhA9neEN66fAXBtbMcydfMBTOvYpXa4CQ1yAD81oFah_ATgi-q8/s1600/prev-image.gif",imageBtnNext:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMaSZ6EhNzMiiYnq_AA-We1JKVTR8yte3RfsnYSzESm5ivmQ_t3DQNrXIncbStdnaN5I9ufq-MRqGO7vEmDoTALFl1rlEa0s1Zn8HWkrKK1RzMxYCnmFdFZ17vSEalnbIv0S_T2SCYG9Y/s1600/next-image.gif",imageBtnClose:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4WuyY3LG0Qyxa4k87neWoLX33cX7Osob-5K9Fex45nMxu2KkOv118gnCGgbWyGuoY9XNp9RBXGk-07PfBgyw-GV9uomdbszEcFjUYPaNuupqudnJobCF8DEXlSnfQ-hHGKHNrq5RdQWk/s1600/close-image.gif",imageBlank:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIXWt9HxddeWFb7fAriRMN9pGqc2zDBXOJ9133zDwXO5p7kx3Nj0lb6IFrFcnKzlMKaaToVPtyzau_0Zv4SwdOSDD_v3N1SdpCqQFkG_XmJ_5B-Ht8K6fieyBlYmbAsTSB5iQLOGzaX58/s1600/blank.gif",containerBorderSize:10,containerResizeSpeed:400,txtImage:"Image",txtOf:"of",keyToClose:"c",keyToPrev:"p",keyToNext:"n",imageArray:[],activeImage:0},p);var i=this;function r(){o(this,i);return false}function o(v,u){a("embed, object, select").css({visibility:"hidden"});c();p.imageArray.length=0;p.activeImage=0;if(u.length==1){p.imageArray.push(new Array(v.getAttribute("href"),v.getAttribute("title")))}else{for(var t=0;t<u.length;t++){p.imageArray.push(new Array(u[t].getAttribute("href"),u[t].getAttribute("title")))}}while(p.imageArray[p.activeImage][0]!=v.getAttribute("href")){p.activeImage++}l()}function c(){a("body").append('<div id="jquery-overlay"></div><div id="jquery-lightbox"><div id="lightbox-container-image-box"><div id="lightbox-container-image"><img id="lightbox-image"><div style="" id="lightbox-nav"><a href="#" id="lightbox-nav-btnPrev"></a><a href="#" id="lightbox-nav-btnNext"></a></div><div id="lightbox-loading"><a href="#" id="lightbox-loading-link"><img src="'+p.imageLoading+'"></a></div></div></div><div id="lightbox-container-image-data-box"><div id="lightbox-container-image-data"><div id="lightbox-image-details"><span id="lightbox-image-details-caption"></span><span id="lightbox-image-details-currentNumber"></span></div><div id="lightbox-secNav"><a href="#" id="lightbox-secNav-btnClose"><img src="'+p.imageBtnClose+'"></a></div></div></div></div>');var t=f();a("#jquery-overlay").css({backgroundColor:p.overlayBgColor,opacity:p.overlayOpacity,width:t[0],height:t[1]}).fadeIn();var u=h();a("#jquery-lightbox").css({top:u[1]+(t[3]/10),left:u[0]}).show();a("#jquery-overlay,#jquery-lightbox").click(function(){b()});a("#lightbox-loading-link,#lightbox-secNav-btnClose").click(function(){b();return false});a(window).resize(function(){var v=f();a("#jquery-overlay").css({width:v[0],height:v[1]});var w=h();a("#jquery-lightbox").css({top:w[1]+(v[3]/10),left:w[0]})})}function l(){a("#lightbox-loading").show();if(p.fixedNavigation){a("#lightbox-image,#lightbox-container-image-data-box,#lightbox-image-details-currentNumber").hide()}else{a("#lightbox-image,#lightbox-nav,#lightbox-nav-btnPrev,#lightbox-nav-btnNext,#lightbox-container-image-data-box,#lightbox-image-details-currentNumber").hide()}var t=new Image();t.onload=function(){a("#lightbox-image").attr("src",p.imageArray[p.activeImage][0]);j(t.width,t.height);t.onload=function(){}};t.src=p.imageArray[p.activeImage][0]}function j(w,z){var t=a("#lightbox-container-image-box").width();var y=a("#lightbox-container-image-box").height();var x=(w+(p.containerBorderSize*2));var v=(z+(p.containerBorderSize*2));var u=t-x;var A=y-v;a("#lightbox-container-image-box").animate({width:x,height:v},p.containerResizeSpeed,function(){g()});if((u==0)&&(A==0)){if(a.browser.msie){n(250)}else{n(100)}}a("#lightbox-container-image-data-box").css({width:w});a("#lightbox-nav-btnPrev,#lightbox-nav-btnNext").css({height:z+(p.containerBorderSize*2)})}function g(){a("#lightbox-loading").hide();a("#lightbox-image").fadeIn(function(){k();s()});q()}function k(){a("#lightbox-container-image-data-box").slideDown("fast");a("#lightbox-image-details-caption").hide();if(p.imageArray[p.activeImage][1]){a("#lightbox-image-details-caption").html(p.imageArray[p.activeImage][1]).show()}if(p.imageArray.length>1){a("#lightbox-image-details-currentNumber").html(p.txtImage+" "+(p.activeImage+1)+" "+p.txtOf+" "+p.imageArray.length).show()}}function s(){a("#lightbox-nav").show();a("#lightbox-nav-btnPrev,#lightbox-nav-btnNext").css({background:"transparent url("+p.imageBlank+") no-repeat"});if(p.activeImage!=0){if(p.fixedNavigation){a("#lightbox-nav-btnPrev").css({background:"url("+p.imageBtnPrev+") left 15% no-repeat"}).unbind().bind("click",function(){p.activeImage=p.activeImage-1;l();return false})}else{a("#lightbox-nav-btnPrev").unbind().hover(function(){a(this).css({background:"url("+p.imageBtnPrev+") left 15% no-repeat"})},function(){a(this).css({background:"transparent url("+p.imageBlank+") no-repeat"})}).show().bind("click",function(){p.activeImage=p.activeImage-1;l();return false})}}if(p.activeImage!=(p.imageArray.length-1)){if(p.fixedNavigation){a("#lightbox-nav-btnNext").css({background:"url("+p.imageBtnNext+") right 15% no-repeat"}).unbind().bind("click",function(){p.activeImage=p.activeImage+1;l();return false})}else{a("#lightbox-nav-btnNext").unbind().hover(function(){a(this).css({background:"url("+p.imageBtnNext+") right 15% no-repeat"})},function(){a(this).css({background:"transparent url("+p.imageBlank+") no-repeat"})}).show().bind("click",function(){p.activeImage=p.activeImage+1;l();return false})}}m()}function m(){a(document).keydown(function(t){d(t)})}function e(){a(document).unbind()}function d(t){if(t==null){keycode=event.keyCode;escapeKey=27}else{keycode=t.keyCode;escapeKey=t.DOM_VK_ESCAPE}key=String.fromCharCode(keycode).toLowerCase();if((key==p.keyToClose)||(key=="x")||(keycode==escapeKey)){b()}if((key==p.keyToPrev)||(keycode==37)){if(p.activeImage!=0){p.activeImage=p.activeImage-1;l();e()}}if((key==p.keyToNext)||(keycode==39)){if(p.activeImage!=(p.imageArray.length-1)){p.activeImage=p.activeImage+1;l();e()}}}function q(){if((p.imageArray.length-1)>p.activeImage){objNext=new Image();objNext.src=p.imageArray[p.activeImage+1][0]}if(p.activeImage>0){objPrev=new Image();objPrev.src=p.imageArray[p.activeImage-1][0]}}function b(){a("#jquery-lightbox").remove();a("#jquery-overlay").fadeOut(function(){a("#jquery-overlay").remove()});a("embed, object, select").css({visibility:"visible"})}function f(){var v,t;if(window.innerHeight&&window.scrollMaxY){v=window.innerWidth+window.scrollMaxX;t=window.innerHeight+window.scrollMaxY}else{if(document.body.scrollHeight>document.body.offsetHeight){v=document.body.scrollWidth;t=document.body.scrollHeight}else{v=document.body.offsetWidth;t=document.body.offsetHeight}}var u,w;if(self.innerHeight){if(document.documentElement.clientWidth){u=document.documentElement.clientWidth}else{u=self.innerWidth}w=self.innerHeight}else{if(document.documentElement&&document.documentElement.clientHeight){u=document.documentElement.clientWidth;w=document.documentElement.clientHeight}else{if(document.body){u=document.body.clientWidth;w=document.body.clientHeight}}}if(t<w){pageHeight=w}else{pageHeight=t}if(v<u){pageWidth=v}else{pageWidth=u}arrayPageSize=new Array(pageWidth,pageHeight,u,w);return arrayPageSize}function h(){var u,t;if(self.pageYOffset){t=self.pageYOffset;u=self.pageXOffset}else{if(document.documentElement&&document.documentElement.scrollTop){t=document.documentElement.scrollTop;u=document.documentElement.scrollLeft}else{if(document.body){t=document.body.scrollTop;u=document.body.scrollLeft}}}arrayPageScroll=new Array(u,t);return arrayPageScroll}function n(v){var u=new Date();t=null;do{var t=new Date()}while(t-u<v)}return this.unbind("click").click(r)}})(jQuery);$(document).ready(function(){$('a[href$=jpg]:has(img)').lightBox();$('a[href$=jpeg]:has(img)').lightBox();$('a[href$=png]:has(img)').lightBox();$('a[href$=gif]:has(img)').lightBox();$('a[href$=bmp]:has(img)').lightBox();});<br />//]]><br /></script></blockquote><h4>Script for Lightbox with Dark Background:</h4><blockquote class="tr_bq"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/><br /><script type='text/javascript'><br />//<![CDATA[<br />(function(a){a.fn.lightBox=function(p){p=jQuery.extend({overlayBgColor:"#000",overlayOpacity:0.9,fixedNavigation:false,imageLoading:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjORU2yJ0WeerQWpPvf1953Oj-LaAxv-js14qFOu7r4mZhx05vF8H00lmVS9IuDr6hQMAe1TYG8vWtj8wh-cZRrhtBn_JuNhrVgfsaS0GjmqQiZ3BxqcuTzVRsa-vhusYI9SVhyphenhyphen2Yy2Pao/s1600/loading-black.gif",imageBtnPrev:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWARDp-2MCz_VFNQilHy1oP4l85X_hZwreHYoK8P0yHpfa99opWjNQrZOH2o_DPMKRtSvyn9OaOIBXFUiisgZgSBMrrPLrEIztcOFtgcPtLPHuqcJxEdPFH04xPDyCMfSilRASk2T9slc/s1600/prev-image-black.gif",imageBtnNext:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ71D6SqZISnaBUtv8rjoxtT0W2hz3gGAIx5otrc61ukHfR3TtYNjqGAB_sXue1Wvb2w_VCH0QrEF-ZrNDG4EECFVOCzNyceTmcYbD9MJdFPuQjHMASzXnqL3E-DO3OorA2G6sXiGhEnU/s1600/next-image-black.gif",imageBtnClose:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2VP4IhKIVV2I2jKu5tbSDgO9E3_vDjK4kJ3W6a86Mj-G9UTHkYw7D1RwqDLexHMWAuymKQoxt825dJcxqh69XD2loBgaG2jUd_pGne7jd_XMxAL_B1EU3PcXNff9paYvplL5sDj_QXZA/s1600/close-image-black.gif",imageBlank:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIXWt9HxddeWFb7fAriRMN9pGqc2zDBXOJ9133zDwXO5p7kx3Nj0lb6IFrFcnKzlMKaaToVPtyzau_0Zv4SwdOSDD_v3N1SdpCqQFkG_XmJ_5B-Ht8K6fieyBlYmbAsTSB5iQLOGzaX58/s1600/blank.gif",containerBorderSize:10,containerResizeSpeed:400,txtImage:"Image",txtOf:"of",keyToClose:"c",keyToPrev:"p",keyToNext:"n",imageArray:[],activeImage:0},p);var i=this;function r(){o(this,i);return false}function o(v,u){a("embed, object, select").css({visibility:"hidden"});c();p.imageArray.length=0;p.activeImage=0;if(u.length==1){p.imageArray.push(new Array(v.getAttribute("href"),v.getAttribute("title")))}else{for(var t=0;t<u.length;t++){p.imageArray.push(new Array(u[t].getAttribute("href"),u[t].getAttribute("title")))}}while(p.imageArray[p.activeImage][0]!=v.getAttribute("href")){p.activeImage++}l()}function c(){a("body").append('<div id="jquery-overlay"></div><div id="jquery-lightbox"><div id="lightbox-container-image-box"><div id="lightbox-container-image"><img id="lightbox-image"><div style="" id="lightbox-nav"><a href="#" id="lightbox-nav-btnPrev"></a><a href="#" id="lightbox-nav-btnNext"></a></div><div id="lightbox-loading"><a href="#" id="lightbox-loading-link"><img src="'+p.imageLoading+'"></a></div></div></div><div id="lightbox-container-image-data-box"><div id="lightbox-container-image-data"><div id="lightbox-image-details"><span id="lightbox-image-details-caption"></span><span id="lightbox-image-details-currentNumber"></span></div><div id="lightbox-secNav"><a href="#" id="lightbox-secNav-btnClose"><img src="'+p.imageBtnClose+'"></a></div></div></div></div>');var t=f();a("#jquery-overlay").css({backgroundColor:p.overlayBgColor,opacity:p.overlayOpacity,width:t[0],height:t[1]}).fadeIn();var u=h();a("#jquery-lightbox").css({top:u[1]+(t[3]/10),left:u[0]}).show();a("#jquery-overlay,#jquery-lightbox").click(function(){b()});a("#lightbox-loading-link,#lightbox-secNav-btnClose").click(function(){b();return false});a(window).resize(function(){var v=f();a("#jquery-overlay").css({width:v[0],height:v[1]});var w=h();a("#jquery-lightbox").css({top:w[1]+(v[3]/10),left:w[0]})})}function l(){a("#lightbox-loading").show();if(p.fixedNavigation){a("#lightbox-image,#lightbox-container-image-data-box,#lightbox-image-details-currentNumber").hide()}else{a("#lightbox-image,#lightbox-nav,#lightbox-nav-btnPrev,#lightbox-nav-btnNext,#lightbox-container-image-data-box,#lightbox-image-details-currentNumber").hide()}var t=new Image();t.onload=function(){a("#lightbox-image").attr("src",p.imageArray[p.activeImage][0]);j(t.width,t.height);t.onload=function(){}};t.src=p.imageArray[p.activeImage][0]}function j(w,z){var t=a("#lightbox-container-image-box").width();var y=a("#lightbox-container-image-box").height();var x=(w+(p.containerBorderSize*2));var v=(z+(p.containerBorderSize*2));var u=t-x;var A=y-v;a("#lightbox-container-image-box").animate({width:x,height:v},p.containerResizeSpeed,function(){g()});if((u==0)&&(A==0)){if(a.browser.msie){n(250)}else{n(100)}}a("#lightbox-container-image-data-box").css({width:w});a("#lightbox-nav-btnPrev,#lightbox-nav-btnNext").css({height:z+(p.containerBorderSize*2)})}function g(){a("#lightbox-loading").hide();a("#lightbox-image").fadeIn(function(){k();s()});q()}function k(){a("#lightbox-container-image-data-box").slideDown("fast");a("#lightbox-image-details-caption").hide();if(p.imageArray[p.activeImage][1]){a("#lightbox-image-details-caption").html(p.imageArray[p.activeImage][1]).show()}if(p.imageArray.length>1){a("#lightbox-image-details-currentNumber").html(p.txtImage+" "+(p.activeImage+1)+" "+p.txtOf+" "+p.imageArray.length).show()}}function s(){a("#lightbox-nav").show();a("#lightbox-nav-btnPrev,#lightbox-nav-btnNext").css({background:"transparent url("+p.imageBlank+") no-repeat"});if(p.activeImage!=0){if(p.fixedNavigation){a("#lightbox-nav-btnPrev").css({background:"url("+p.imageBtnPrev+") left 15% no-repeat"}).unbind().bind("click",function(){p.activeImage=p.activeImage-1;l();return false})}else{a("#lightbox-nav-btnPrev").unbind().hover(function(){a(this).css({background:"url("+p.imageBtnPrev+") left 15% no-repeat"})},function(){a(this).css({background:"transparent url("+p.imageBlank+") no-repeat"})}).show().bind("click",function(){p.activeImage=p.activeImage-1;l();return false})}}if(p.activeImage!=(p.imageArray.length-1)){if(p.fixedNavigation){a("#lightbox-nav-btnNext").css({background:"url("+p.imageBtnNext+") right 15% no-repeat"}).unbind().bind("click",function(){p.activeImage=p.activeImage+1;l();return false})}else{a("#lightbox-nav-btnNext").unbind().hover(function(){a(this).css({background:"url("+p.imageBtnNext+") right 15% no-repeat"})},function(){a(this).css({background:"transparent url("+p.imageBlank+") no-repeat"})}).show().bind("click",function(){p.activeImage=p.activeImage+1;l();return false})}}m()}function m(){a(document).keydown(function(t){d(t)})}function e(){a(document).unbind()}function d(t){if(t==null){keycode=event.keyCode;escapeKey=27}else{keycode=t.keyCode;escapeKey=t.DOM_VK_ESCAPE}key=String.fromCharCode(keycode).toLowerCase();if((key==p.keyToClose)||(key=="x")||(keycode==escapeKey)){b()}if((key==p.keyToPrev)||(keycode==37)){if(p.activeImage!=0){p.activeImage=p.activeImage-1;l();e()}}if((key==p.keyToNext)||(keycode==39)){if(p.activeImage!=(p.imageArray.length-1)){p.activeImage=p.activeImage+1;l();e()}}}function q(){if((p.imageArray.length-1)>p.activeImage){objNext=new Image();objNext.src=p.imageArray[p.activeImage+1][0]}if(p.activeImage>0){objPrev=new Image();objPrev.src=p.imageArray[p.activeImage-1][0]}}function b(){a("#jquery-lightbox").remove();a("#jquery-overlay").fadeOut(function(){a("#jquery-overlay").remove()});a("embed, object, select").css({visibility:"visible"})}function f(){var v,t;if(window.innerHeight&&window.scrollMaxY){v=window.innerWidth+window.scrollMaxX;t=window.innerHeight+window.scrollMaxY}else{if(document.body.scrollHeight>document.body.offsetHeight){v=document.body.scrollWidth;t=document.body.scrollHeight}else{v=document.body.offsetWidth;t=document.body.offsetHeight}}var u,w;if(self.innerHeight){if(document.documentElement.clientWidth){u=document.documentElement.clientWidth}else{u=self.innerWidth}w=self.innerHeight}else{if(document.documentElement&&document.documentElement.clientHeight){u=document.documentElement.clientWidth;w=document.documentElement.clientHeight}else{if(document.body){u=document.body.clientWidth;w=document.body.clientHeight}}}if(t<w){pageHeight=w}else{pageHeight=t}if(v<u){pageWidth=v}else{pageWidth=u}arrayPageSize=new Array(pageWidth,pageHeight,u,w);return arrayPageSize}function h(){var u,t;if(self.pageYOffset){t=self.pageYOffset;u=self.pageXOffset}else{if(document.documentElement&&document.documentElement.scrollTop){t=document.documentElement.scrollTop;u=document.documentElement.scrollLeft}else{if(document.body){t=document.body.scrollTop;u=document.body.scrollLeft}}}arrayPageScroll=new Array(u,t);return arrayPageScroll}function n(v){var u=new Date();t=null;do{var t=new Date()}while(t-u<v)}return this.unbind("click").click(r)}})(jQuery);$(document).ready(function(){$('a[href$=jpg]:has(img)').lightBox();$('a[href$=jpeg]:has(img)').lightBox();$('a[href$=png]:has(img)').lightBox();$('a[href$=gif]:has(img)').lightBox();$('a[href$=bmp]:has(img)').lightBox();});<br />//]]><br /></script></blockquote>Step 5. Click on the "Save theme" button to save the changes.<br /><br />The final step is to disable the original Blogger Lightbox so that it doesn't interfere with this one that we just added: go to "Settings" > "Posts and comments" and you will see the "Showcase images with Lightbox" section on the right side > select "No" and click on the "Save settings" button on the upper right side.<br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="disable blogger lightbox" border="0" height="463" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic72dtJ5O0RkUej_lF3MWd681xpXEO9G2UfZgQUoXCEazY1YFhAZ6f38wieBX_PxPa0fB0b89kVTrmW1Dw1YcgPg2zzm60Y3lFaKjvVzKY2v-dh-QfxF7oLJfjOM9xWSloCQfnXvuvdi98/s1600/disable-blogger-lightbox.png" title="Add a custom jquery lightbox to blogger" width="600" /></div><br />Now, view your blog and click on any image to see the Custom jQuery Lightbox for Blogger in action. Enjoy!

Add a Custom jQuery Lightbox To Blogger

If you are not satisfied with the default Lightbox set up by Blogger, here's another cool way to show off your pictures. In case you mis...

Read more »

Orbit - jQuery Image Slider Plugin For Blogger

This tutorial will show you how to add another beautiful image slider for Blogger / BlogSpot made with jQuery and, of course, with HTML and CSS. This slider, called Orbit, is a lightweight jQuery plugin that will display multiple images in a limited space using navigation arrows (previous-next buttons). On the upper left of the Orbit slideshow, we have some small bullet icons indicating the current image that we are viewing and, on the upper right side, is the pause option and a timer letting us know when the next image will be displayed.<br /><br />If you want to see this cool image slider in action, please visit this demo blog:<br /><br /><div style="text-align: center;"><a class="demo-link" href="http://widgets-tricks.blogspot.com/2014/07/orbit-jquery-image-slider-for-blogger.html" rel="nofollow" target="_blank">Demo Blog</a></div><br /><div class="separator" style="clear: both; text-align: center;"><img alt="image slider, slideshow, jquery" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFmLUkV53UtnP3R3myY4D8z6ipBA5LfKmcne3FuI3O3qqEG4JLJb_XZgtGcOM7UUnYLRIqaEdgxH3KDkhv64zLuYSkwOfIeo59-iMF-GR2cI8jecxoYEH3fYrXEmiP-MRWOwUUnC0IBg9-/s1600/orbit-jquery-slider-plugin-for-blogger-image-gallery.png" title="Orbit Image Slider for Blogger with jQuery" /></div><br />Related:<br /><a href="http://helplogger.blogspot.com/2014/01/how-to-add-thumbnail-imagephoto-gallery.html" rel="nofollow" target="_blank">Photo Gallery with Thumbnails using Javascript and CSS</a><br /><a href="http://helplogger.blogspot.com/2013/10/jquery-image-gallery.html" rel="nofollow" target="_blank">Spacegallery: A jQuery Time Machine-like Slideshow/Image Gallery </a><br /><a href="http://helplogger.blogspot.com/2014/01/create-css-image-slider-with-thumbnails.html" rel="nofollow" target="_blank">Image Slider that Displays Pictures on Mouse Hover using only CSS</a><br /><br />The HTML markup is pretty clean, just an element that wraps multiple images where the captions are generated from the span tags of these images.<br /><br /><h2>How to Add the Orbit Image Slider to Blogger</h2>Step 1. From your Blogger Dashboard, go to Template > Edit HTML > click anywhere inside the code area and press the CTRL + F keys to open the blogger search box. Paste or type the below tag inside the search box and hit Enter to find it.<br /><blockquote class="tr_bq"></head></blockquote><div class="separator" style="clear: both; text-align: center;"><img border="0" height="246" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiucBK6jsoFGvgq1f7-O8Bdg8vpE4x8JhIN44axFxgDjql6raTN_rLBIuzZG3Fk3KbDKgVyei_EhJgyx409mdCVpQ334ADoAxLNxFbMXkcRVUOp8DOmQsg-GWuiIHvhxtt9zPGFDVeGN-Uw/s1600/open-blogger-search-box-ctrl%252Bf.png" width="640" /></div><br />Step 2. Just above <span style="background-color: yellow;"></head></span> add the following scripts:<br /><br /><div class="code1"><span style="color: #cc0000;"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/></span><br /><br /><!--[if IE]><br /><style type="text/css"><br />.timer { display: none !important; }<br />div.caption { background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);zoom: 1; }<br /></style><br /><![endif]--><br /><br /><script type='text/javascript'><br />$(window).load(function() {<br />$(&#39;#featured&#39;).orbit({<br /><span style="color: blue;"><b>advanceSpeed: 5000,</b></span><br />&#39;bullets&#39;: true,<br />&#39;timer&#39; : true,<br />&#39;animation&#39; : &#39;horizontal-slide&#39;<br />});<br />});<br /></script><br /><br /><script type='text/javascript'><br />//<![CDATA[<br />/*<br />* jQuery Orbit Plugin 1.1<br />* www.ZURB.com/playground<br />* Copyright 2010, ZURB<br />* Free to use under the MIT license.<br />* http://www.opensource.org/licenses/mit-license.php<br />*/<br /><br />(function(e){e.fn.orbit=function(a){a=e.extend({animation:"fade",animationSpeed:800,advanceSpeed:4E3,startClockOnMouseOut:true,startClockOnMouseOutAfter:3E3,directionalNav:true,captions:true,captionAnimationSpeed:800,timer:false,bullets:false},a);return this.each(function(){function m(c){function g(){f.eq(h).css({"z-index":1});s=false}var h=b,k=c;if(h==k)return false;if(!s){s=true;if(c=="next"){b++;if(b==n)b=0}else if(c=="prev"){b--;if(b<0)b=n-1}else{b=c;if(h<b)k="next";else if(h>b)k="prev"}a.bullets&&<br />x();if(a.animation=="fade"){f.eq(h).css({"z-index":2});f.eq(b).css({opacity:0,"z-index":3}).animate({opacity:1},a.animationSpeed,g);a.captions&&o()}if(a.animation=="horizontal-slide"){f.eq(h).css({"z-index":2});k=="next"&&f.eq(b).css({left:t,"z-index":3}).animate({left:0},a.animationSpeed,g);k=="prev"&&f.eq(b).css({left:-t,"z-index":3}).animate({left:0},a.animationSpeed,g);a.captions&&o()}if(a.animation=="vertical-slide"){f.eq(h).css({"z-index":2});k=="prev"&&f.eq(b).css({top:u,"z-index":3}).animate({top:0},<br />a.animationSpeed,g);k=="next"&&f.eq(b).css({top:-u,"z-index":3}).animate({top:0},a.animationSpeed,g);a.captions&&o()}}}var b=0,n=0,t,u,s,d=e(this).addClass("orbit"),f=d.find("img, a img");f.each(function(){var c=e(this),g=c.width();c=c.height();d.width(g);t=d.width();d.height(c);u=d.height();n++});f.eq(b).css({"z-index":3});if(a.timer){d.append('<div class="timer"><span class="mask"><span class="rotator"></span></span><span class="pause"></span></div>');var j=e("div.timer"),p;if(j.length!=0){var C=<br />a.advanceSpeed/180,v=e("div.timer span.rotator"),y=e("div.timer span.mask"),z=e("div.timer span.pause"),l=0,A,w=function(){p=true;z.removeClass("active");A=setInterval(function(){var c="rotate("+l+"deg)";l+=2;v.css({"-webkit-transform":c,"-moz-transform":c,"-o-transform":c});if(l>180){v.addClass("move");y.addClass("move")}if(l>360){v.removeClass("move");y.removeClass("move");l=0;m("next")}},C)},q=function(){p=false;clearInterval(A);z.addClass("active")};w();j.click(function(){p?q():w()});if(a.startClockOnMouseOut){var B;<br />d.mouseleave(function(){B=setTimeout(function(){p||w()},a.startClockOnMouseOutAfter)});d.mouseenter(function(){clearTimeout(B)})}}}if(a.captions){d.append('<div class="caption"><span class="orbit-caption"></span></div>');var r=d.children("div.caption").children("span").addClass("orbit-caption").show(),o=function(){var c=f.eq(b).attr("rel"),g=e("#"+c).html(),h=r.height()+20;r.attr("id","#"+c).html(g);g?r.parent().stop().animate({bottom:0},a.captionAnimationSpeed):r.parent().stop().animate({bottom:-h},<br />a.captionAnimationSpeed)};o()}if(a.directionalNav){d.append('<div class="slider-nav"><span class="right">Right</span><span class="left">Left</span></div>');j=d.children("div.slider-nav").children("span.left");var D=d.children("div.slider-nav").children("span.right");j.click(function(){a.timer&&q();m("prev")});D.click(function(){a.timer&&q();m("next")})}if(a.bullets){d.append('<ul class="orbit-bullets"></ul>');var E=e("ul.orbit-bullets");for(i=0;i<n;i++){j=e("<li>"+i+"</li>");e("ul.orbit-bullets").append(j);<br />j.data("index",i);j.click(function(){a.timer&&q();m(e(this).data("index"))})}var x=function(){E.children("li").removeClass("active").eq(b).addClass("active")};x()}})}})(jQuery);<br />//]]><br /></script></div><br />Note: You can change the transitions speed between each image by modifying the <span style="color: blue;"><b>5000</b></span> value from the line in blue - a higher number will make the pictures stay longer between each transition.<br /><br />Important! If you have already a version of jQuery in your template, please remove the line in red, otherwise the slideshow might not work.<br /><br />Step 3. Now it is time to add the CSS. Find (CTRL + F) this tag:<br /><blockquote class="tr_bq">]]></b:skin></blockquote>Step 4. Just above <span style="background-color: yellow;">]]></b:skin></span> add this code:<br /><blockquote class="tr_bq">#featured {height: 1px; width: 1px; overflow: hidden;}<br />div.orbit {<br />width: 1px;<br />height: 1px;<br />position: relative;<br />overflow: hidden;<br />}<br /><br />div.orbit img {<br />position: absolute;<br />top: 0;<br />left: 0;<br />}<br />div.orbit a img {border: none;}<br /><br />div.timer {<br />width: 40px;<br />height: 40px;<br />overflow: hidden;<br />position: absolute;<br />top: 10px;<br />right:10px;<br />opacity: .6;<br />cursor: pointer;<br />z-index: 1001;<br />}<br /><br />span.rotator {<br />display: block;<br />width: 40px;<br />height: 40px;<br />position: absolute;<br />top: 0;<br />left: -20px;<br />background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilx8qejXGejMeXiBKCtrMsIHJ4jf7wDvUVFs-20j1-Iy82vKwvFXHY54waCLQVrm94qAW226MLN_48ceBoYKRbdlcZQADa2g7_HBV9H_QPQoBc6XNMMi1Dr6e-CG6Tan-jCGvF4jh6lKLY/s1600/timer-icon.png);<br />background-repeat: no-repeat;<br />z-index: 3;<br />}<br /><br />span.mask {<br />display: block;<br />width: 20px;<br />height: 40px;<br />position: absolute;<br />top: 0;<br />right: 0;<br />z-index: 2;<br />overflow: hidden;<br />}<br /><br />span.rotator.move {left: 0;}<br />span.mask.move {<br />width: 40px;<br />left: 0;<br />background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIkrF6-tOL4db5jLBTHCNXHmCDhpGWyQbCacvObZ1SX6SCf7ocpgTSBuvwIfQ7hSzePEoe0Buz134h8d01h7Acf3Xmea6ZEnkpWGVHjOT6zGXqoYpng-lWZQIbdwCk7novetWsFpX8iKI4/s1600/timer-right.png);<br />background-repeat: repeat;<br />background-position: 0px 0px;<br />}<br /><br />span.pause {<br />display: block;<br />width: 40px;<br />height: 40px;<br />position: absolute;<br />top: 0;<br />left: 0px;<br />background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGSU05XftS5iMupG5siuZWXRQkChUgZ2kulUFRXzk7G2y_ODXhc9bZl-2KcCUWxquvbAdYqZBk2prnZm4S2xxh8X7ImsvL1vHgnvH1w6BscqRZIPRP42udBxwq1rnNEsiHsm5DzhPcIvpJ/s1600/pause-icon.png);<br />background-repeat: no-repeat;<br />z-index: 4;<br />opacity: 0;<br />}<br /><br />div.timer:hover span.pause,<br />span.pause.active,<br />div.timer:hover span.pause.active { opacity: 1; }<br /><br />div.caption {<br />background: #000;<br />background: rgba(0,0,0,.6);<br />width: 100%;<br />z-index: 1000;<br />position: absolute;<br />bottom:-100px;<br />color: #fff;<br />padding: 8px 0;<br />text-align: center;<br />}<br /><br />div.caption span {<br />padding: 0 10px;<br />font-size: 14px;<br />text-shadow: 0px 1px 0px rgba(0,0,0,.8);<br />margin: 0;<br />}<br />.orbit-caption { display: none; }<br /><br />div.orbit:hover div.slider-nav { display: block; }<br />div.slider-nav { display: none; }<br />div.slider-nav span {<br />width: 33px;<br />height: 33px;<br />text-indent: -9999px;<br />position: absolute;<br />z-index: 1000;<br />top: 43%;<br />cursor: pointer;<br />}<br /><br />div.slider-nav span.right {<br />background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBfZgJWCQ8fEgAcnUBHlCIi0v2j4wxf9Uuad47HWgTvBMp8TBo6NBh5CpsCwIFAqxK-coRkWZL4SbcKxqBQogTvX5oNh64dxiRfrOdIgZBj94IELYeyEbOGe8fGGTSQrwZjmI8m7r54FW2/s1600/arrow-right.png);<br />right: 10px;<br />}<br />div.slider-nav span.left {<br />background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxFy5xVDlMSv-Wz23VPXn2FImHvh9AzKhvZBb6d_Wd-pZI5XCSbshJY2y3on63_EQJzDpeKkIaa-mT7hB9wIEdw7RJ2UOTsjtKGaYDYeOJsx4_fTauKrmQQ_OFRRuV61scxlvNUEQS8IUR/s1600/arrow-left.png);<br />left: 10px;<br />}<br /><br />.orbit-bullets {<br />position: absolute;<br />z-index: 1000;<br />list-style: none;<br />top: 10px;<br />left: 7px;<br />margin: 0;<br />padding: 0;<br />}<br /><br />.orbit-bullets li {<br />float: left;<br />margin-left: 5px;<br />cursor: pointer;<br />color: #999;<br />text-indent: -9999px;<br />background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ4_fRlBPTiVbc3T2i6aAVO7vk3rNUSLTNq6eZn-alS0kFiFBe3NBK2vTUCxpvoU0-6VZwDXs6dGwhZS4-lhyphenhyphenhLyYcONfVJ28_QriL9b-3IYF5xjrPpqTewdZRMbKPX2FekmLFaKoWzmgs/s1600/bullets.png);<br />background-repeat: no-repeat;<br />background-position: 0 0;<br />width: 7px;<br />height: 7px;<br />overflow: hidden;<br />}<br />.orbit-bullets li.active { color: #222; background-position: -7px 0; }</blockquote>Step 5. Click on the "Save template" button to save the changes.<br /><br />Finally, we will use the HTML code that displays the images. We have the option to add the slider either inside one of our posts/pages, or display it as a gadget on the blog' sidebar or below the header.<br /><br />If you choose to add it inside one of your posts, switch to the HTML tab and paste the code below inside HTML box of your post.<br /><br />If you want to add it in the blog sidebar/below the header, go to "Layout", click on the "Add a gadget link" > choose "HTML/JavaScript" from the pop-up window and paste this html inside the box:<br /><blockquote class="tr_bq"><div id='featured'><br /><br /><a href='<span style="color: blue;">Link URL</span>'><img rel='<span style="color: #38761d;"><b>photo1</b></span>' src="<span style="color: blue;">image URL</span>" style='height: <b>348</b>px; width: <b>590</b>px;'/></a><br /><span class='orbit-caption' id='<span style="color: #38761d;"><b>photo1</b></span>'><span style="color: #cc0000;">Ut eleifend tortor aliquet, fringilla nunc non, consectetur magna.</span></span><br /><br /><a href="<span style="color: blue;">Link URL</span>"><img rel='<span style="color: #38761d;"><b>photo2</b></span>' src="<span style="color: blue;">image URL</span>" style='height: <b>348</b>px; width: <b>590</b>px;'/></a><br /><span class='orbit-caption' id='<span style="color: #38761d;"><b>photo2</b></span>'><span style="color: #cc0000;">This is an example of description with links: </span><a href='<span style="color: blue;">Description Link URL</span>' style='color: #09A7EA;'><span style="color: #cc0000;">Helplogger</span></a></span><br /><br /><a href="<span style="color: blue;">Link URL</span>"><img rel='<span style="color: #38761d;"><b>photo3</b></span>' src="<span style="color: blue;">image URL</span>" style='height: <b>348</b>px; width: <b>590</b>px;'/></a><br /><span class='orbit-caption' id='<span style="color: #38761d;"><b>photo3</b></span>' style='text-align:center;'><span style="color: #cc0000;">Ut eleifend tortor aliquet, fringilla nunc non, consectetur magna.</span></span><br /><br /><a href='<span style="color: blue;">Link URL</span>'><img rel='<span style="color: #38761d;"><b>photo4</b></span>' src="<span style="color: blue;">image URL</span>" style='height: <b>348</b>px; width: <b>590</b>px;'/></a><br /><span class='orbit-caption' id='<span style="color: #38761d;"><b>photo4</b></span>'><span style="color: #cc0000;">This is an example of description with links: </span><a href='<span style="color: blue;">Description Link URL</span>' style='color: #09A7EA;'><span style="color: #cc0000;">Helplogger</span></a></span><br /><br /><span style="background-color: yellow;"></div></span></blockquote>This code contains the images, links and descriptions for each image. In blue, are the URLs of the links and images that you need to replace with your own. Inside the HTML code of each image, you have the size of each picture that can be changed by modifying the width (590) and height (348) values. To add the description for your pictures, replace the text in red. <br /><br />If you want to add more pictures, add this HTML before the <span style="background-color: yellow;"></div></span> tag:<br /><blockquote class="tr_bq"><a href='<span style="color: blue;">Link URL</span>'><img rel='<span style="color: #38761d;"><b>photo5</b></span>' src="<span style="color: blue;">image URL</span>" style='height: <b>348</b>px; width: <b>590</b>px;'/></a><br /><span class='orbit-caption' id='<span style="color: #38761d;"><b>photo5</b></span>'><span style="color: #cc0000;">Ut eleifend tortor aliquet, fringilla nunc non, consectetur magna.</span></span></blockquote>Notice that each image and description has an unique identifier (id) and shouldn't be repeated. For instance, in the description text of the first image, we have the id="<span style="color: #38761d;">photo1</span>" and within the image code is the "rel" attribute with the name of the id, that is rel="<span style="color: #38761d;">photo1</span>".<br /><br />After you added your images, click the "Save" or "Publish" button and that's it! Now you can enjoy this cool Orbit Image Slider for Blogger.

Orbit - jQuery Image Slider Plugin For Blogger

This tutorial will show you how to add another beautiful image slider for Blogger / BlogSpot made with jQuery and, of course, with HTML and ...

Read more »

jQuery Sliding Panel with Expanding/Collapsing Content for Blogger

Many times when we think about <a href="http://helplogger.blogspot.com/2012/03/what-is-blogger-and-how-you-can-create.html">creating a blog</a>, we tend to put many gadgets, although many are not necessary, or perhaps only a few of them. In order to add the gadgets that we want, we need to have enough space. A solution would be to use an expanding/collapsing menu that is hidden and expands when the user clicks on it.<br /><br />Originally, this plugin called <b>Sliding Login Panel</b> was created so that users could register on the site, but as we know, in Blogger we don't have the option to add user registration, but that doesn't mean we can't take advantage of this plugin and use it to add other elements, such as a menu, search box, social icons, feed subscription etc. <div class="ssmainhide" style="clear: both; text-align: center;"><img border="0" height="278" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixXyZLVq1ynWVc1A1fchDTSKK8usYoU3yPQyWo0fE8-fdi2iZ2lqGcjg4FIsSKfkLoN9Khqv98pN8jdIWb_rTnU3Y-6A7hIX6nPeqJsUzWg66rr2Ssb4ZKZESZA3TEe-o0mj023iVG0TSW/s1600/jquery-sliding-panel-blogger.png" width="400" /></div><br /><br />You can find a demo of this panel <a href="http://demohelplogger1.blogspot.com" rel="nofollow" target="_blank">in this blog</a> - just click on the <b>Open menu</b> link on the top.<br /><br /><h3>Adding the jQuery Expand/Collapse Slider Panel to Blogger</h3>This sliding menu is made with jQuery, so the first thing is to add the script by pasting it just below the <head> tag:<br /><br />Step 1. From your Blogger dashboard > go to "Template" > click on the "Edit HTML" button:<br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="blogger template" border="0" height="256" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBZxuDSF74SaIvFbOkJzwuk_GViqVsU-Jg3BPH6yPAhXfgzrbv10D6i7zzU46ihrvYGMllL20NFDIgMzwjdZ71SwABN7A9C2v3HCRQ_qzBXzNbo1n_sR5TfHWU5l4Bgd96593RVV3lqTS-/s1600/blogger_blogspot_template_edit_html_tutorial.png" title="add a jQuery sliding panel with expanding/collapsing content to Blogger" width="320" /></div><br />Step 2. Click anywhere inside the code area and search by pressing the CTRL + F keys for the <span style="background-color: yellow;"><head></span> tag<br /><br />Step 3. Below the <span style="background-color: yellow;"><head></span> tag, add this script:<br /><blockquote class="tr_bq"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script><br /><script type='text/javascript'><br />$(document).ready(function() {<br /><br />$(&quot;#open&quot;).click(function(){<br />$(&quot;div#panel&quot;).slideDown(&quot;slow&quot;);<br />});<br /><br />$(&quot;#close&quot;).click(function(){<br />$(&quot;div#panel&quot;).slideUp(&quot;slow&quot;);<br />});<br /><br />$(&quot;#toggle a&quot;).click(function () {<br />$(&quot;#toggle a&quot;).toggle();<br />});<br /><br />});</script><br /><br /><b:if cond='data:blog.pageType != &quot;item&quot;'><br /><style><br />body#layout #slide-top-panel {display:none !important;}<br /></style><br /></b:if></blockquote><br />Step 4. Now search (CTRL + F) the <span style="background-color: yellow;"></head></span> tag and add the CSS styles just above it:<br /><blockquote class="tr_bq"><style><br />.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}<br />.clearfix {display: inline-block;}<br />* html .clearfix {height: 1%;}<br />.clearfix {display: block;}<br />.clearfix {height: 1%;}<br />.clearfix {display: block;}<br /><br />.tab {<br />background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpzCqrwKOXoLpxBvI3T1SaytV49EShlP2nEEZlDbgKk7I-60mAWSP0AsPbUUVgMuHs01o3jqfGukIHG2IuqaBVGVhd0vyFoT4iYDlRKdCxlpVPH9M3rB5gm5fM792IX8tQQQraCijyTYAU/s1600/sliding-panel-tab-0.png) repeat-x 0 0;<br />height: 42px;<br />position: relative;<br />top: 0;<br />z-index: 999;<br />}<br />.tab ul.login {<br />display: block;<br />position: relative;<br />float: right;<br />clear: right;<br />height: 42px;<br />width: auto;<br />font-weight: bold;<br />line-height: 42px;<br />margin: 0;<br />right: 150px;<br />color: white;<br />font-size: 80%;<br />text-align: center;<br />}<br />.tab ul.login li.left {<br />background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvKg1a-_CWGzZTqwLCIjZmdz-Mr3L9s5pRBKU5rpYMLMdT8fkg275KAjpvvtpsX9CTsRImCiZQIBiylLFBi87i9ChMWSYu8PnYhfA0fXEBTV9MXglVP09iyhxq9rJ3C6akwHIGfVN9W8WR/s1600/sliding-panel-tab-left.png) no-repeat left 0;<br />height: 42px;<br />width: 30px;<br />padding: 0;<br />margin: 0;<br />display: block;<br />float: left;<br />}<br />.tab ul.login li.right {<br />background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0FrvpU1Bm21hJjvpKeftpdWts06IYKxkOJdL2I9Wrgm4FlAtMlmdWRtF4XzaXSkZNkTCnTiHJc5SEuciuLh-9_A8ZvwXnsM-9Z28mvwTiuRY_5CGJrStNM6zgT7GWwpykaHUAGbO3J3Bp/s1600/sliding-panel-tab-right.png) no-repeat left 0;<br />height: 42px;<br />width: 30px;<br />padding: 0;<br />margin: 0;<br />display: block;<br />float: left;<br />}<br />.tab ul.login li {<br />text-align: left;<br />padding: 0 6px;<br />display: block;<br />float: left;<br />height: 42px;<br />background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh080v42irkGvR9am1EAZ5dBTu_Kh1R0T9ZKbaR1R2Qx4ARTcF4VUQfOuo0rfaXSXKQFz0UdGaasCFUyk4O0CyPviju34JCx4tfqJLT_AH6_YUbtfzCw_dbIwJhDhdcb-4bZv4D49t8EY3i/s1600/sliding-panel-tab.png) repeat-x 0 0;<br />}<br /><br />.tab ul.login li a {color: #15ADFF;}<br />.tab ul.login li a:hover {color: #FFFFFF;}<br />.tab .sep {color:#414141}<br /><br />.tab a.open, .tab a.close {<br />height: 20px;<br />line-height: 20px !important;<br />padding-left: 30px !important;<br />cursor: pointer;<br />display: block;<br />width: 100px;<br />position: relative;<br />top: 11px;<br />}<br /><br />.tab a.open {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeVZnnHuWkOdkX2jOqtfEbR85MGnVFazGTB44TysLwGTHV7Sx9SEqytPfQUAxepocoZWNR3dJRW45mejCfA4I57ln8GJJY4iQalq_JNe-QXGqyq1w6vCClthWBNfUdSFA8bXkJIx9W5GoB/s1600/button-open.png) no-repeat left 0;}<br />.tab a.close {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqGM-NRKK5VdyybWsP-1ZBCww9H-RZQUunHZD6bMyQSiXjJHtQFv5KWg0G6RUyn5BgCeWaQSV74s1JXPpnyVFOfRdEa5GWCTWC3GGxL1TkdAWWyyXQfJV8ozpfs_M8o8YFmNqGNuwtuwYv/s1600/button-close.png) no-repeat left 0;}<br />.tab a:hover.open {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeVZnnHuWkOdkX2jOqtfEbR85MGnVFazGTB44TysLwGTHV7Sx9SEqytPfQUAxepocoZWNR3dJRW45mejCfA4I57ln8GJJY4iQalq_JNe-QXGqyq1w6vCClthWBNfUdSFA8bXkJIx9W5GoB/s1600/button-open.png) no-repeat left -19px;}<br />.tab a:hover.close {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqGM-NRKK5VdyybWsP-1ZBCww9H-RZQUunHZD6bMyQSiXjJHtQFv5KWg0G6RUyn5BgCeWaQSV74s1JXPpnyVFOfRdEa5GWCTWC3GGxL1TkdAWWyyXQfJV8ozpfs_M8o8YFmNqGNuwtuwYv/s1600/button-close.png) no-repeat left -19px;}<br /><br />#slide-top-panel {<br />position: absolute;<br />top: 0;<br />width: 100%;<br />z-index: 999;<br />text-align: center;<br />margin-left: auto;<br />margin-right: auto;<br />}<br />#panel {<br />width: 100%;<br /><span style="color: #cc0000;"><b>height: 230px; </b></span><br />color: #999999;<br />background: <span style="color: #38761d;"><b>#272727</b></span>;<br />overflow: hidden;<br />position: relative;<br />z-index: 3;<br />display: none;<br />}<br />#panel h4 {<br />font-size: 18px;<br />color: #F2F2F2;<br />text-align: center;<br />padding: 5px 0 10px;<br />margin: 0;<br />}<br />#panel p {<br />margin: 5px 0;<br />padding: 0px;<br />}<br />#panel a {<br />text-decoration: none;<br />color: #15ADFF;<br />}<br />#panel a:hover {<br />color: white;<br />}<br />#panel .content {<br />width: 960px;<br />margin: 0 auto;<br />padding-top: 15px;<br />text-align: left;<br />font-size: 0.85em;<br />}<br />#panel .content .left {<br />width: 280px;<br />float: left;<br />padding: 0 15px;<br />border-left: 1px solid #333;<br />}<br />#panel .content .right {<br />border-right: 1px solid #333;<br />}<br />#panel .content form {<br />margin: 0 0 10px 0;<br />}<br />#panel .content label {<br />float: left;<br />padding-top: 8px;<br />clear: both;<br />width: 280px;<br />display: block;<br />}<br />#panel .content input.field {<br />border: 1px #1A1A1A solid;<br />background: #545454;<br />border-radius: 10px;<br />margin-right: 5px;<br />margin-top: 4px;<br />width: 200px;<br />color: white;<br />height: 18px;<br />}<br />#panel .content input:focus.field {<br />background: #7F7F7F;<br />}<br />#panel .content input.button-register {<br />display: block;<br />clear: both;<br />height: 24px;<br />width: 94px;<br />color: white;<br />background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif2fNSTfB5TAcUcFeOLO8FzROBJlADSwnfcHwd5REarfTnbhLHryGBtEUh5dpyXd9xL0rI0aegwgH-ykV-fRjd_PEoaP3cnGduJVZ1vvAkJmqy_b4Sr86dkxI4NyuOdMZIGUKVyjMEEef3/s1600/button-register.png) no-repeat 0 0;<br />text-align: center;<br />cursor: pointer;<br />border: none;<br />font-weight: bold;<br />margin: 10px auto;<br />}<br />#sliding-panel {<br />width: 160px;<br />float: left;<br />}<br />#sliding-panel2 {<br />width: 160px;<br />float: right;<br />}<br />#sliding-panel ul, #sliding-panel2 ul{<br />font-family: Arial, Helvetica, sans-serif;<br />list-style-type:none;<br />margin:0;<br />padding:0;<br />}<br />#sliding-panel ul li a, #sliding-panel2 ul li a {<br />background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgWctdx1v1X9bacdUIxVi2QZSJesDtkwJJ2hCN9oZXC5d5btATjN7wQ3tZw2oSKpk1cyImi-4v8UevAjAN1wKbES7Sbzzlj7i8g6NEfy2guklpGXPCWbAqjGppikCAgEi5LD2y3pq4RwiT/s1600/star-bullet.png) center left no-repeat;<br />margin:0;<br />padding:3px 3px 3px 18px;<br />}<br />#sliding-panel li, #sliding-panel2 li {<br />display: inline;<br />}<br />#sliding-panel a, #sliding-panel2 a{<br />color: #999999;<br />text-decoration: none;<br />font-size: 11px;<br />display: block;<br />padding: 3px;<br />width: 160px;<br />}<br />#sliding-panel a:link, #sliding-panel a:visited, #sliding-panel2 a:link, #sliding-panel2 a:visited {<br />color: #999999;<br />text-decoration: none;<br />}<br />#sliding-panel a:hover, #sliding-panel2 a:hover {<br />color: #FFFFFF;<br />}<br /><br />#search-box22{<br />margin-top: 20px;<br />}<br /><br />#search-box22 input[type="text"] {<br />float: right;<br />background: 10px 6px #444;<br />border: 0 none;<br />font: bold 12px Arial,Helvetica,Sans-serif;<br />color: #777;<br />width: 160px;<br />padding: 6px 15px 6px 35px;<br />-webkit-border-radius: 20px;<br />-moz-border-radius: 20px;<br />border-radius: 20px;<br />text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);<br />-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;<br />-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;<br />box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;<br />-webkit-transition: all 0.7s ease 0s;<br />-moz-transition: all 0.7s ease 0s;<br />-o-transition: all 0.7s ease 0s;<br />transition: all 0.7s ease 0s;<br />}<br /><br />#search-box22 input[type="text"]:focus {<br />width: 190px;<br />}<br /><br />.about-author {<br />width: 100%;<br />text-transform: none;<br />margin-top: 15px;<br />}<br />.authorbox {<br />overflow: hidden;<br />padding: 0;<br />width: 100%;<br />}<br />.authorbox .authorinfo {<br />}<br />.authorbox .authorinfo img {<br />float: left;<br />margin: 4px 10px 4px 5px;<br />border-radius: 100%;<br />width: 20%;<br />background: #222;<br />padding: 5px;<br />}<br />.authorbox .authorinfo p {<br />margin: 0;<br />padding: 0 5px;<br />text-align: left;<br />}<br />.authorinfo p a {<br />text-decoration:none;<br />}<br />.authorbox h3 {<br />margin: 0;<br />display: inline-block;<br />}<br />h3.boxtitle {<br />font-size: 14px;<br />}<br /></style></blockquote>Note: <ul><li>in case you need more space for your widgets, the height of the entire container can be changed by modifying the <b><span style="color: #cc0000;">230px</span></b> value from <span style="color: #cc0000;"><b>height: 230px;</b></span></li><li>To change the background color, change this color value: <span style="color: #38761d;"><b>#272727</b></span></li></ul>Step 5. And finally, we will place the HTML structure of it. Right after the <span style="background-color: yellow;"><body></span> tag, add this code:<br /><blockquote class="tr_bq"><!-- Start sliding panel --><br /><div id='slide-top-panel'><br /><div id='panel'><br /><div class='content clearfix'><br /><br /><span style="color: #6aa84f;"><!-- first section --></span><br /><div class='left' style='width:240px !important'><br /><br /><h4><b>Welcome to my blog!</b></h4><br /><div class='about-author'><br /><div class='authorbox'><br />  <div class='authorinfo'><br /><img src='<span style="color: blue;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAz_fTbAR7EQuhx4cSwCXCl3YJC_FNfq8mh7nAwOuahbCcZA3FuHoWi-XrXcmXCfy2SiLKv0QCHz0jDmedvc51oZRVModKPPuKFcRbg6Pc5IttO5HY8W4ocfYDTUzl-2-JndGGlOInRo1B/s1600/profile-pic.png</span>'/><br /><h3 class='boxtitle'><b>Meet the Author</b></h3><br /><p><b>Ut eleifend tortor aliquet, fringilla nunc non, consectetur magna. Suspendisse potenti.</b></p><br /></div><br /></div><br /></div><br /><p align="right" style="margin-top: 10px;">Looking for something?</p><br /><form method="get" action="/search" id="search-box22"><br />  <input name="q" type="text" size="40" placeholder="Search..." /><br /></form><br /><br /></div><br /><br /><span style="color: #6aa84f;"><!-- second section --></span><br /><div class='left' style='width:320px !important'><br /><h4><b>Categories</b></h4><br /><br /><div id='sliding-panel'><br /><ul><br /><li><a href='<span style="color: blue;">Link URL</span>'><b>Category 1</b></a></li><br /><li><a href='<span style="color: blue;">Link URL</span>'><b>Category 2</b></a></li><br /><li><a href='<span style="color: blue;">Link URL</span>'><b>Category 3</b></a></li><br /><li><a href='<span style="color: blue;">Link URL</span>'><b>Category 4</b></a></li><br /><li><a href='<span style="color: blue;">Link URL</span>'><b>Category 5</b></a></li><br /><li><a href='<span style="color: blue;">Link URL</span>'><b>Category 6</b></a></li><br /><li><a href='<span style="color: blue;">Link URL</span>'><b>Category 7</b></a></li><br /></ul><br /></div><br /><br /><div id='sliding-panel2'><br /><ul><br /><li><a href='<span style="color: blue;">Link URL</span>'><b>Category 1</b></a></li><br /><li><a href='<span style="color: blue;">Link URL</span>'><b>Category 2</b></a></li><br /><li><a href='<span style="color: blue;">Link URL</span>'><b>Category 3</b></a></li><br /><li><a href='<span style="color: blue;">Link URL</span>'><b>Category 4</b></a></li><br /><li><a href='<span style="color: blue;">Link URL</span>'><b>Category 5</b></a></li><br /><li><a href='<span style="color: blue;">Link URL</span>'><b>Category 6</b></a></li><br /><li><a href='<span style="color: blue;">Link URL</span>'><b>Category 7</b></a></li><br /></ul><br /></div><br /></div><br /><br /><span style="color: #6aa84f;"><!-- third section --></span><br /><div class='left right' align="center"><br /><br /><h4><b>Subscribe to this blog!</b></h4><br /><p style="padding:0px 30px;"><b>Receive the latest posts by email. Just enter your email below if you want to subscribe!</b></p><br /><br /><form action='http://feedburner.google.com/fb/a/mailverify?uri=<span style="color: red;"><b>Feed-Name</b></span>' method='post' target='_blank'><br /><input class='field' name='email' type='text/' value=''/><br /><input name='uri' type='hidden' value='<b><span style="color: red;">Feed-Name</span></b>'/><br /><input name='lang' type='hidden' value='en_EN'/><br /><input class='button-register' type='submit' value='Subscribe'/></form><br /><br /><div align='center' style="clear: both;"><br /><a href='<span style="color: blue;">http://www.facebook.com/username</span>'><img title="Follow on Facebook" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJjt86VWLlCXHrCc6FBnUlzblKMu73mhc92VAkU9X9_OEEHNJl1uUsbMsqlNChrIrtKvYYFAHID0PzeW-kIe9X_7XMWZxGab5mFfrcw-kOjbuqU4hhlXuaVXBjEqu_1VGIEnWTXzIUGVvr/s1600/Facebook.png' style='padding:5px;' width='32'/></a><br /><a href='<span style="color: blue;">http://blog-address.blogspot.com/atom.xml</span>'><img title="RSS Feed" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgywJUkwt8LXugQ9dIoMkZ5mRz8HEFU79tLKpv83s0U-3hkPoBPuUYOKEVqDXwY3u2XGqs2Lu9m1YvKER4XupX7WZJbpP5Zy7F481cHQ5F8Og-VjCEn3XStbLRQozR388UrWJfZi4NGyglX/s1600/RSS.png' style='padding:5px;' width='32'/></a> <br /><a href='<span style="color: blue;">https://plus.google.com/username</span>'><img title="Follow on Google" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDeas960AnRIm6SEklGGfGGkoE-PtjK_zeY-UbJI62xbQJm7J4XTbOUNGcveCsjG5u6kobX4K7IWfdtNcfNBKB6x9Jz3Zd080B1Mk0_422NuPUTUcf9_xF7AN83SjR1FvI7qskT48cAxg4/s1600/Google-plus.png' style='padding:5px;' width='32'/></a> <br /><a href='<span style="color: blue;">http://twitter.com/username</span>'><img title="Follow on Twitter" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs0gMnxfxioy3ru5xTUlX4hLuUtH_jT04hfRFiofa5omIq191K9GKRm_qXXU3NdVIO7w6nKaHQBTmxr6Soifntx4zzaBg5cN2CIy74zTVD9OdPRhDbkoJnq_zqtORNUWy6MBiSxSMQzIqw/s1600/Twitter.png' style='padding:5px;' width='32'/></a><br /></div><br /><br /></div><br /></div><br /></div><br /><br /><div class='tab'><br /><ul class='login'><br /><li class='left'/><br /><li>Hello guest!</li><br /><li class='sep'>|</li><br /><li id='toggle'><br /><a class='open' href='#' id='open'>Open menu</a><br /><a class='close' href='#' id='close' style='display: none;'>Close menu</a><br /></li><br /><li class='right'/><br /></ul><br /></div><br /></div></blockquote>Note: if you can't find the <span style="background-color: yellow;"><body></span> tag, then try to find this one:<br /><blockquote class="tr_bq"><body expr:class='&quot;loading&quot; + data:blog.mobileClass'></blockquote>Here we have added the content in the sliding panel which will be hidden and will show on mouse click. In green are the names of each section so it is easier to recognize them.<br /><br />Note: <ul><li>In the first section, you can change the welcome message, "Meet the author" title and add your description by replacing the text in bold. To add your own picture, replace this URL:</li><blockquote class="tr_bq"><span style="color: blue;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAz_fTbAR7EQuhx4cSwCXCl3YJC_FNfq8mh7nAwOuahbCcZA3FuHoWi-XrXcmXCfy2SiLKv0QCHz0jDmedvc51oZRVModKPPuKFcRbg6Pc5IttO5HY8W4ocfYDTUzl-2-JndGGlOInRo1B/s1600/profile-pic.png</span></blockquote><li>In the second section you have the categories - there add the URLs of your links by replacing the addresses in blue and replace Category 1, 2, 3... with the titles that you want to appear for the links.</li><li>In the third section is the email subscription - just replace the text in blue with the name of your blog's feed. Please note that you must have this email subscription option enabled in your <a href="http://helplogger.blogspot.com/2012/03/how-to-burn-blogger-rss-feeds-at.html">Feedburner account</a>.</li><li>As for the social icons below, change the URLs in blue with your Facebook and Twitte and add the URL of your blog's RSS feed address.</li></ul>Basically, these are the main sections that can be customized, but we can remove some of them and paste something else instead.<br /><br />Step 6. Save the template and that's it! Note that this menu works with jQuery, so if you are already using Scriptaculous, Prototype or Mootools, then it will not work.<br /><br />Hope you'll enjoy this elegant menu with sliding effect, which will look way better if we <a href="http://helplogger.blogspot.com/2012/02/how-to-remove-blogger-navbar.html">remove the Blogger navbar</a>.

jQuery Sliding Panel with Expanding/Collapsing Content for Blogger

Many times when we think about creating a blog , we tend to put many gadgets, although many are not necessary, or perhaps only a few of them...

Read more »

How to add a thumbnail image/photo gallery in Blogger

For those who would like to show pictures in an image gallery, here's a beautiful gallery made with JavaScript and CSS. This image gallery displays the available thumbnails either vertically or horizontally on top of the chosen picture, thus making it easier for you to pick different images on mouse click. <br /><br />With the help of CSS, we can make the <img> element to display on same position with the rest of the thumbs and style the thumbnails as small blocks with a defined height and width. The script will add a <a href="http://helplogger.blogspot.com/2014/01/click-events-using-css-on-blogger.html">click-event</a> for each <li> object that changes it's child's <img> visibility and will assign an "active" class name to the <li>.<br /><br />Related: <a href="http://helplogger.blogspot.com/2014/01/create-css-image-slider-with-thumbnails.html">Image Slider with Mouse Hover Effect using CSS only</a><br /><div class="ssmainhide" style="clear: both; text-align: center;"><img border="0" height="221" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7RfXzEVeAXK9Qu3rO_tvUagmrTQdXdqwKpXBJUyCA7AFBYPu8rxRZmHhFePInI3-de9syOhZfayO5wrCvXY-QL1Ob9GBBHMyK-gWcTNqTtcQIvc4YzS9_yad_PQtx8CwbY3JbnbRfQ6gQ/s1600/add-a-lightweight-image-gallery-to-blogger.png" width="400" /></div><br /><div style="text-align: center"><a class="demo-link" href="http://widgets-tricks.blogspot.com/2014/09/image-gallery-for-blogger.html" rel="nofollow" target="_blank">Demo blog</a></div><br /><h2>How to Add Image Gallery with Thumbnails to Blogger</h2>Step 1. Log in to your <a href="http://blogger.com/" rel="nofollow" target="_blank">Blogger account</a>, select your blog and go to "Template", press the "Edit HTML" button.<br /><br /><div class="separator" style="clear: both; text-align: center;"><img border="0" height="256" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBZxuDSF74SaIvFbOkJzwuk_GViqVsU-Jg3BPH6yPAhXfgzrbv10D6i7zzU46ihrvYGMllL20NFDIgMzwjdZ71SwABN7A9C2v3HCRQ_qzBXzNbo1n_sR5TfHWU5l4Bgd96593RVV3lqTS-/s1600/blogger_blogspot_template_edit_html_tutorial.png" width="320" /></div><br />Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the search box:<br /><br /><div class="separator" style="clear: both; text-align: center;"><img border="0" height="246" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiucBK6jsoFGvgq1f7-O8Bdg8vpE4x8JhIN44axFxgDjql6raTN_rLBIuzZG3Fk3KbDKgVyei_EhJgyx409mdCVpQ334ADoAxLNxFbMXkcRVUOp8DOmQsg-GWuiIHvhxtt9zPGFDVeGN-Uw/s1600/open-blogger-search-box-ctrl%252Bf.png" width="640" /></div><br />Step 3. Type the following tag inside the search box and hit Enter to find it:<br /><blockquote class="tr_bq"></head></blockquote>Step 4. Now pick one of the styles below and copy the code below it:<br /><br /><div style="text-align: center"><a class="demo-link" href="http://widgets-tricks.blogspot.com/2014/09/image-gallery-for-blogger.html#style1" rel="nofollow" target="_blank">Style 1 Demo</a></div><br /><div class="separator" style="clear: both; text-align: center;"><img border="0" height="368" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg72toUYvxDKYRiBoEfUf1-P6sECmfJwlYnv3jd8DKFqGYzOr_G4LsAyqGmSYCRZs1QRVF7UHllR_1hmOuiPN01ReTIKijBvLuuKPrdcRKwPkyKUiAR5z5wOUdt7iTRnTJ5Dfv1VMvNivc/s320/css-jquery-image-gallery-for-blogger-with-thumbnails.png" width="380" /></div><blockquote class="tr_bq"><style type='text/css'><br />#image-gallery {display: none;}<br />  #jquery-gallery {padding:0;margin:0;list-style: none; width: 500px;}<br />  #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; }<br />#jquery-gallery li img { position: absolute; top: 100px; left: 0px; display: none;}<br />  #jquery-gallery li.active img { display: block; border: 3px solid #fff; outline: 1px solid #E3E3E3; width:490px; max-height: 375px;}<br />  #jquery-gallery li.active, #jquery-gallery li:hover { outline-color: #DFDFDF; opacity: .99;filter:alpha(opacity=99);}<br /><span style="color: #fb8733;">#gallery-caption {background: rgba(0, 0, 0, 0.3);color: #fff;font-size: 16px;font-weight: bold;left: 3px;position: absolute;text-align: center;top: 103px;width: 490px;text-transform: uppercase;}</span><br /></style></blockquote><br /><div style="text-align: center"><a class="demo-link" href="http://widgets-tricks.blogspot.com/2014/09/image-gallery-for-blogger.html#style2" rel="nofollow" target="_blank">Style 2 Demo</a></div><br /><div class="separator" style="clear: both; text-align: center;"><img border="0" height="224" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS2cEKjgaZnefp18Xgi1_-hlKyLcm0JsNLtld4tD7L6rK0rnqZlMIbG9s8XL1smUV9e3P9uxY7vIymTUJoJfzhvIfl6iqo5vwknReyRzL2lW3gheYHvSO3iH5CZpMU2BfsHqtREzmLfcY/s320/image-gallery-for-blogger-using-css-jquery.png" width="400" /></div><blockquote class="tr_bq"><style type='text/css'><br />#image-gallery { display: none; }<br />#jquery-gallery {padding:0;margin:0;list-style: none; width: 200px; }<br />#jquery-gallery li {background-size: 100%;-webkit-background-size: cover;-moz-background-size: cover; -o-background-size: cover;background-size: cover;margin-right: 10px; width: 80px; height: 80px; border: 3px solid #fff; outline: 1px solid #ddd; margin-right: 10px; margin-bottom: 10px; opacity: .5;filter:alpha(opacity=50); float: left; display: block; }<br />#jquery-gallery li img { position: absolute; top: 0px; left: 200px; display: none; }<br />#jquery-gallery li.active img { display: block; width:370px; border: 3px solid #fff; outline: 1px solid #E3E3E3; }<br />#jquery-gallery li.active, #jquery-gallery li:hover { outline-color: #bbb; opacity: .99;filter:alpha(opacity=99);}<br /><span style="color: #fb8733;">#gallery-caption {background: rgba(0, 0, 0, 0.3);color: #fff;font-size: 16px;font-weight: bold;text-transform: uppercase;margin: 0 -17px;position: absolute;right: 0;text-align: center;top: 3px;width: 370px;}</span><br /></style></blockquote>Note: The <b>display: none;</b> for the first ID (<b>#image-gallery</b>) is to prevent images appear with their actual size before they go inside the gallery container.<br /><br />In <b>#jquery-gallery</b> we have the width of the container for the thumbnails (200px), so that they display in two rows and for this we need to calculate the width of the thumbnail (80px) plus the margins between them.<br /><br />The left declaration of <b>#jquery-gallery li img</b> is to move the larger thumbnail that shows on mouse click so that it doesn't overlap with the smaller thumbnails. <br /><br />Step 5. Paste the code of the chosen style just above the </head> tag.<br /><br />Step 6. Now above the same </head> tag, add this script:<br /><blockquote class="tr_bq"><script type='text/javascript'><br />//<![CDATA[<br />var gal = {<br />init : function() {<br />if (!document.getElementById || !document.createElement || !document.appendChild) return false;<br />if (document.getElementById('image-gallery')) document.getElementById('image-gallery').id = 'jquery-gallery';<br />var li = document.getElementById('jquery-gallery').getElementsByTagName('li');<br />li[0].className = 'active';<br />for (i=0; i<li.length; i++) {<br />li[i].style.backgroundImage = 'url(' + li[i].getElementsByTagName('img')[0].src + ')';<br />li[i].title = li[i].getElementsByTagName('img')[0].alt;<br />gal.addEvent(li[i],'click',function() {<br />var im = document.getElementById('jquery-gallery').getElementsByTagName('li');<br />for (j=0; j<im.length; j++) {<br />im[j].className = '';<br />}<br />this.className = 'active';<br /><span style="color: #fb8733;">document.getElementById('gallery-caption').innerHTML = this.title;</span><br />});<br />}<br />},<br />addEvent : function(obj, type, fn) {<br />if (obj.addEventListener) {<br />obj.addEventListener(type, fn, false);<br />}<br />else if (obj.attachEvent) {<br />obj["e"+type+fn] = fn;<br />obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }<br />obj.attachEvent("on"+type, obj[type+fn]);<br />}<br />}<br />}<br />gal.addEvent(window,'load', function() {<br />gal.init();<br />});<br />//]]><br /></script></blockquote>Basically, what this script does is to check if there is any ID named "<b>image-gallery</b>" and get the different list items that may exist within it. These elements will be displayed as thumbnails and a function will decide what to do once they are clicked. So, each time we click on a thumbnail, the "<b>active</b>" class will be assigned and the thumbnail should be visible in the larger container.<br /><br />Step 7. Finally, save the changes by clicking the "Save template" button.<br /><br />And here's the HTML code providing a normal list with the <b>image-gallery</b> ID, enclosed within a DIV with a relative position in order to avoid side effects of other pre-existing positions.<br /><br />Step 8. Paste the below HTML to where you want to display the gallery by going either to "Layout" and adding a new gadget (click on the "Add a gadget" link and choose "HTML/JavaScript" option), or inside a post/page in the HTML section.<br /><blockquote class="tr_bq"><div style="position:relative;"><br /><ul id="image-gallery"><br /><li><img src="<span style="color: blue;">IMAGE-URL1</span>" /></li><br /><li><img src="<span style="color: blue;">IMAGE-URL2</span>" /></li><br /><li><img src="<span style="color: blue;">IMAGE-URL3</span>" /></li><br /><li><img src="<span style="color: blue;">IMAGE-URL4</span>" /></li><br /><li><img src="<span style="color: blue;">IMAGE-URL5</span>" /></li><br /></ul><br /></div></blockquote>Note: if elements on your page overlap with this gallery, you might need to add the <b>height</b> declaration after "position: relative;". The value of height depends on the size of your gallery.<br /><br />Example:<br /><blockquote class="tr_bq"><div style="position:relative; <b>height: 500px</b>;"> </blockquote>Change <span style="color: blue;">IMAGE-URL1</span> with the image URL. If you don't know how to get the address of an image, see this tutorial: <a href="http://helplogger.blogspot.ro/2013/09/upload-images-and-get-url-of-image.html">How to Upload Images and Get the URL</a><br /><br />In case you need to make the pictures clickable, add this HTML structure instead:<br /><blockquote class="tr_bq"><div style="position:relative;"><br /><ul id="image-gallery"><br /><li><b><a href="<span style="color: blue;">page-URL</span>"></b><img src="<span style="color: blue;">IMAGE-URL1</span>" /><b></a></b></li><br /><li><b><a href="<span style="color: blue;">page-URL</span>"></b><img src="<span style="color: blue;">IMAGE-URL2</span>" /><b></a></b></li><br /><li><b><a href="<span style="color: blue;">page-URL</span>"></b><img src="<span style="color: blue;">IMAGE-URL3</span>" /><b></a></b></li><br /><li><b><a href="<span style="color: blue;">page-URL</span>"></b><img src="<span style="color: blue;">IMAGE-URL4</span>" /><b></a></b></li><br /><li><b><a href="<span style="color: blue;">page-URL</span>"></b><img src="<span style="color: blue;">IMAGE-URL5</span>" /><b></a></b></li><br /></ul><br /></div></blockquote>Again, here you need to replace the <span style="color: blue;">page-URL</span> text with the URL of your page/post.<br /><br />Update: To add captions, please include the lines in orange and then replace the "Caption" with the text that you want to appear on each picture:<br /><blockquote class="tr_bq"><div style="position:relative;"><br /><ul id="image-gallery"><br /><li><b><a href="<span style="color: blue;">page-URL</span>"></b><img <span style="color: #fb8733;">alt="Caption"</span> src="<span style="color: blue;">IMAGE-URL1</span>" /><b></a></b></li><br /><li><b><a href="<span style="color: blue;">page-URL</span>"></b><img <span style="color: #fb8733;">alt="Caption"</span> src="<span style="color: blue;">IMAGE-URL2</span>" /><b></a></b></li><br /><li><b><a href="<span style="color: blue;">page-URL</span>"></b><img <span style="color: #fb8733;">alt="Caption"</span> src="<span style="color: blue;">IMAGE-URL3</span>" /><b></a></b></li><br /><li><b><a href="<span style="color: blue;">page-URL</span>"></b><img <span style="color: #fb8733;">alt="Caption"</span> src="<span style="color: blue;">IMAGE-URL4</span>" /><b></a></b></li><br /><li><b><a href="<span style="color: blue;">page-URL</span>"></b><img <span style="color: #fb8733;">alt="Caption"</span> src="<span style="color: blue;">IMAGE-URL5</span>" /><b></a></b></li><br /></ul><br /><span style="color: #fb8733;"><div id="gallery-caption"></div></span><br /></div></blockquote><br />Save the widget or publish your page and you're done adding the thumbnail image / photo gallery in Blogger.

How to add a thumbnail image/photo gallery in Blogger

For those who would like to show pictures in an image gallery, here's a beautiful gallery made with JavaScript and CSS. This image galle...

Read more »

Using JQuery + EasyDrag to Move Elements or Images by Clicking on Them

This is a simple and easy-to-use jQuery plugin which enables drag and drop functionality to make your site more interactive so that readers can "play" with certain elements on the page by dragging them from one side to another. For example, they can drag the images with a script to move them on any part of the blog just with a mouse click.<br /><br /><div class="separator" style="clear: both; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzOqVJSPNMsT6LtjTIefohah4ni5ze3epxGFIxOZALmj5eOHqVzu_7C7wl8FcaA0JvvZLnuNnMl8zeXb5ALhQgKngQDJqVsG8ETzveprJ0kDJJ94pGwEiKuY6Wgz6kXwVXaO9ZhUE_FTUy/s1600/drag-drop-images-using-jquery-and-easydrag.png" /></div><br /><h3>Drag and Drop Elements or Images on click with jQuery & EasyDrag</h3>To see how this works, please visit the demo blog and click on any item, then move it anywhere on the screen:<br /><br /><div style="text-align: center;"><a class="demo-link" href="http://helploggerdemoblog.blogspot.com/p/easydrag.html" rel="nofollow" target="_blank">Demo blog</a></div><br /><h2>Adding EasyDrag & jQuery to Move Elements or Images in Blogger</h2>1. Login to your Blogger account, go to 'Template' and click the 'Edit HTML' button:<br /><br /><div class="separator" style="clear: both; text-align: center;"><img border="0" height="256" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBZxuDSF74SaIvFbOkJzwuk_GViqVsU-Jg3BPH6yPAhXfgzrbv10D6i7zzU46ihrvYGMllL20NFDIgMzwjdZ71SwABN7A9C2v3HCRQ_qzBXzNbo1n_sR5TfHWU5l4Bgd96593RVV3lqTS-/s320/blogger_blogspot_template_edit_html_tutorial.png" width="320" /></div><br />2. Click anywhere inside the template's code and press the CTRL + F keys to search for this tag:<br /><blockquote class="tr_bq"></head></blockquote>3. Just before </head> paste the following scripts:<br /><blockquote class="tr_bq"><span style="color: #cc0000;"><script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/></span><br /><script type='text/javascript'><br />//<![CDATA[<br />(function($){var isMouseDown=false;var currentElement=null;var dropCallbacks={};var dragCallbacks={};var lastMouseX;var lastMouseY;var lastElemTop;var lastElemLeft;var dragStatus={};$.getMousePosition=function(e){var posx=0;var posy=0;if(!e)var e=window.event;if(e.pageX||e.pageY){posx=e.pageX;posy=e.pageY;}<br />else if(e.clientX||e.clientY){posx=e.clientX+document.body.scrollLeft+document.documentElement.scrollLeft;posy=e.clientY+document.body.scrollTop+document.documentElement.scrollTop;}<br />return{'x':posx,'y':posy};};$.updatePosition=function(e){var pos=$.getMousePosition(e);var spanX=(pos.x-lastMouseX);var spanY=(pos.y-lastMouseY);$(currentElement).css("top",(lastElemTop+spanY));$(currentElement).css("left",(lastElemLeft+spanX));};$(document).mousemove(function(e){if(isMouseDown&&dragStatus[currentElement.id]=='on'){$.updatePosition(e);if(dragCallbacks[currentElement.id]!=undefined){dragCallbacks[currentElement.id](e,currentElement);}<br />return false;}});$(document).mouseup(function(e){if(isMouseDown&&dragStatus[currentElement.id]=='on'){isMouseDown=false;if(dropCallbacks[currentElement.id]!=undefined){dropCallbacks[currentElement.id](e,currentElement);}<br />return false;}});$.fn.ondrag=function(callback){return this.each(function(){dragCallbacks[this.id]=callback;});};$.fn.ondrop=function(callback){return this.each(function(){dropCallbacks[this.id]=callback;});};$.fn.dragOff=function(){return this.each(function(){dragStatus[this.id]='off';});};$.fn.dragOn=function(){return this.each(function(){dragStatus[this.id]='on';});};$.fn.easydrag=function(allowBubbling){return this.each(function(){if(undefined==this.id||!this.id.length)this.id="easydrag"+(new Date().getTime());dragStatus[this.id]="on";$(this).css("cursor","move");$(this).mousedown(function(e){$(this).css("position","absolute");$(this).css("z-index","10000");isMouseDown=true;currentElement=this;var pos=$.getMousePosition(e);lastMouseX=pos.x;lastMouseY=pos.y;lastElemTop=this.offsetTop;lastElemLeft=this.offsetLeft;$.updatePosition(e);return allowBubbling?true:false;});});};})(jQuery);<br />//]]><br /></script></blockquote>Note: If you already have jQuery, please remove the code in red.<br /><br />4. Save the changes by clicking the 'Save template' button.<br /><br /><h3>How to Move Elements or Images on Click Using EasyDrag & jQuery</h3>Now, when you want to use EasyDrag to drag and drop an image, use the code below inside the HTML of your post or page (create a New post, then switch to the HTML tab):<br /><blockquote class="tr_bq"><img id="<b>easydrag1</b>" src="<span style="color: blue;">image-URL</span>" style="border: 0px none; cursor: move;" /><br /><script type="text/javascript"><br />$(function(){ $("#<b>easydrag1</b>").easydrag();});<br /></script></blockquote>Note: change the text in blue with the URL of your image and please note that each image has an unique id. Here, for example, the id is called <b>easeydrag1</b> which has been added both in the HTML of the image and JavaScript function.<br /><br />If you need to use EasyDrag to move a second element, then add your image with a different id, for example <b>easydrag2</b>, otherwise it won't work:<br /><blockquote class="tr_bq"><span style="color: #999999;"><img id="<b>easydrag1</b>" src="image-URL" style="border: 0px none; cursor: move;" /></span><br /><span style="color: #999999;"><script type="text/javascript"></span><br /><img id="<b>easydrag2</b>" src="<span style="color: blue;">image-URL</span>" style="border: 0px none; cursor: move;" /><br /><script type="text/javascript"><br /><span style="color: #999999;">$(function(){ $("#<b>easydrag1</b>").easydrag();});</span><br />$(function(){ $("#<b>easydrag2</b>").easydrag();}); <br /></script></blockquote><h4>How to add a link to a draggable image?</h4>We will add a JavaScript event, so that when we will double click on the image, to open the page we want.<br /><br />The code to use should look something this:<br /><blockquote class="tr_bq"><img id="<b>easydrag1</b>" style="cursor:move; border:0px;" <u>ondblClick="javascript:window.open('<span style="color: blue;">link-URL</span>')"</u> src="<span style="color: blue;">image-URL</span>" /><script type="text/javascript"><br />$(function(){ $("#<b>easydrag1</b>").easydrag();});<br /></script></blockquote>Using the script above, the image can be dragged around easily and be activated by double clicking on it.

Using JQuery + EasyDrag to Move Elements or Images by Clicking on Them

This is a simple and easy-to-use jQuery plugin which enables drag and drop functionality to make your site more interactive so that readers ...

Read more »

How to Add a Tiny jQuery Circleslider to Blogger

Tiny Circleslider is a small jQuery plugin generating a circular <b>carousel of images</b> that we can slide infinitely (circular). When clicking on the red dot, the main picture moves to the left and another set of images will slide out.<br /><br />There is nothing complicated about using this type of carousel, however when it is about customizing it, we need to use a bit of arithmetic. All these details can be found in the <a href="http://baijs.nl/tinycircleslider/" rel="nofollow" target="_blank">author's homepage</a>, so I'll just limit myself to show you the basics.<br /><br />To see it in action, please visit the below demo blog and just drag the red dot:<br /><br /><div style="text-align: center;"><a class="demo-link" href="http://widgets-tricks.blogspot.com/2014/07/tiny-jquery-circleslider-for-blogger.html" rel="nofollow" target="_blank">Tiny jQuery Circleslider Demo</a></div><br /><div class="separator" style="clear: both; text-align: center;"><img alt="tiny jquery circleslider, image slider" border="0" height="293" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZN0ULg9Pyw0JZtZPaVV4fLj5-ahc85qhY0fBmn_f1TXeYFuK_eRqG0owpaRbKHkMk7BKdAeF3RXBp-UyQqyWa3xWoTXx28R2o6NararzvAIP2EqYhMBVTnQw7xOANTAbZCbUAkRtjYTit/s1600/tiny-jquery-slider-for-blogger-images.png" title="How to Add a Tiny jQuery Circleslider to Blogger" width="320" /></div><br /><h3>Adding the Tiny CircleSlider to a Blogger Blog</h3>In order to make it work, first task is to add the javascript jQuery library in the template:<br /><br />Step 1. Log in to your <a href="http://www.blogger.com/" rel="nofollow" target="_blank">Blogger account</a> > select your blog<br /><br />Step 2. Go to "Template" and hit the "Edit HTML" button:<br /><br /><div class="separator" style="clear: both; text-align: center;"><img alt="blogger template, edit html" border="0" height="256" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBZxuDSF74SaIvFbOkJzwuk_GViqVsU-Jg3BPH6yPAhXfgzrbv10D6i7zzU46ihrvYGMllL20NFDIgMzwjdZ71SwABN7A9C2v3HCRQ_qzBXzNbo1n_sR5TfHWU5l4Bgd96593RVV3lqTS-/s320/blogger_blogspot_template_edit_html_tutorial.png" title="How to Add a Tiny jQuery Circleslider to Blogger" width="320" /></div><br />Step 3. Click anywhere on the code area and search by using the CTRL + F keys for this tag:<br /><blockquote class="tr_bq"></head></blockquote><div class="separator" style="clear: both; text-align: center;"><img alt="blogger template html" border="0" height="246" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiucBK6jsoFGvgq1f7-O8Bdg8vpE4x8JhIN44axFxgDjql6raTN_rLBIuzZG3Fk3KbDKgVyei_EhJgyx409mdCVpQ334ADoAxLNxFbMXkcRVUOp8DOmQsg-GWuiIHvhxtt9zPGFDVeGN-Uw/s1600/open-blogger-search-box-ctrl%252Bf.png" title="How to Add a Tiny jQuery Circleslider to Blogger" width="640" /></div><br />Step 4. Just above the </head> tag, add the following scripts:<br /><div class="code1"><span style="color: #cc0000;"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/></span><br /><script><br />//<![CDATA[<br />/*! Tiny Circleslider - v2.0.8 - 2015-08-08<br /> * http://www.baijs.com/tinycircleslider<br /> *<br /> * Copyright (c) 2015 Maarten Baijs <wieringen@gmail.com>;<br /> * Licensed under the MIT license */<br /><br />!function(a){"function"==typeof define&&define.amd?define(["jquery"],a):"object"==typeof exports?module.exports=a(require("jquery")):a(jQuery)}(function(a){function b(b,e){function f(){return k(),w.append(x.first().clone()).css("width",B.width*(x.length+1)),g(),r(0),v.move(v.options.start,v.options.interval),v}function g(){G&&(b[0].ontouchstart=u,b[0].ontouchmove=q,b[0].ontouchend=s),y.bind("mousedown",u);var c=function(b){return b.preventDefault(),b.stopImmediatePropagation(),v.stop(),v.move(a(this).attr("data-slide-index")),!1};G&&b.delegate(".dot","touchstart",c),b.delegate(".dot","mousedown",c)}function h(a){E=setTimeout(function(){v.move(v.slideCurrent+1,!0)},a?50:v.options.intervalTime)}function i(a){return a*(Math.PI/180)}function j(a){return 180*a/Math.PI}function k(){var c=document.createDocumentFragment();z.remove(),x.each(function(b,d){var e=null,f=parseInt(a(d).attr("data-degrees"),10)||360*b/v.slidesTotal,g={top:-Math.cos(i(f))*v.options.radius+A.height/2-D.height/2,left:Math.sin(i(f))*v.options.radius+A.width/2-D.width/2};z.length>0&&(e=z.clone(),e.addClass(a(d).attr("data-classname")).css(g),c.appendChild(e[0])),v.dots.push({angle:f,slide:d,dot:e})}),v.dots.sort(function(a,b){return a.angle-b.angle}),a.each(v.dots,function(b,c){a(c.dot).length>0&&a(c.dot).addClass("dot-"+(b+1)).attr("data-slide-index",b).html("<span>"+(b+1)+"</span>")}),b.append(c),z=b.find(".dot")}function l(a,b){var c,d,e;return a>b?(c=a-b,d=-(b+360-a)):(c=a+360-b,d=-(b-a)),e=c<Math.abs(d)?c:d,[e,d,c]}function m(b){var c=9999,d=9999,e=9999,f=0,g=0,h=0;return a.each(v.dots,function(a,i){var j=l(i.angle,b);Math.abs(j[0])<Math.abs(e)&&(e=j[0],h=a),Math.abs(j[1])<Math.abs(c)&&(c=j[1],f=a),Math.abs(j[2])<Math.abs(d)&&(d=j[2],g=a)}),[[h,f,g],[e,c,d]]}function n(a){return 0>a?360+a%-360:a%360}function o(a,b,c){var d=a,e=!1;Math.abs(a)>Math.abs(b)?(d=-b,e=!0):I?requestAnimationFrame(function(){o(d,b+a)}):F=setTimeout(function(){o(d,b+a,.9*c)},c),v.angleCurrent=n(v.angleCurrent-d),r(v.angleCurrent,e)}function p(a){return{x:H?a.targetTouches[0].pageX:a.pageX||a.clientX,y:H?a.targetTouches[0].pageY:a.pageY||a.clientY}}function q(a){var c=b.offset(),d={left:p(a).x-c.left-A.width/2,top:p(a).y-c.top-A.height/2};return v.angleCurrent=n(j(Math.atan2(d.left,-d.top))),I||r(v.angleCurrent),!1}function r(a,c){closestSlidesAndAngles=m(a),closestSlides=closestSlidesAndAngles[0],closestAngles=closestSlidesAndAngles[1],w.css("left",-(closestSlides[1]*B.width+Math.abs(closestAngles[1])*B.width/(Math.abs(closestAngles[1])+Math.abs(closestAngles[2])))),y.css({top:-Math.cos(i(a))*v.options.radius+(A.height/2-C.height/2),left:Math.sin(i(a))*v.options.radius+(A.width/2-C.width/2)}),c&&b.trigger("move",[x[v.slideCurrent],v.slideCurrent])}function s(b){return a(b.target).hasClass("dot")?!1:(v.dragging=!1,b.preventDefault(),a(document).unbind("mousemove mouseup"),y.unbind("mouseup"),v.options.dotsHide&&z.stop(!0,!0).fadeOut("slow"),v.options.dotsSnap&&v.move(m(v.angleCurrent)[0][0]),void 0)}function t(){v.dragging&&(r(v.angleCurrent),requestAnimationFrame(function(){t()}))}function u(b){return b.preventDefault(),H="touchstart"==b.type,v.dragging=!0,a(b.target).hasClass("dot")?!1:(v.stop(),a(document).mousemove(q),a(document).mouseup(s),y.mouseup(s),v.options.dotsHide&&z.stop(!0,!0).fadeIn("slow"),I&&t(),void 0)}this.options=a.extend({},d,e),this._defaults=d,this._name=c;var v=this,w=(b.find(".viewport"),b.find(".overview")),x=w.children(),y=b.find(".thumb"),z=b.find(".dot"),A=(x.find("a"),{width:b.outerWidth(!0),height:b.outerHeight(!0)}),B={width:x.first().outerWidth(!0),height:x.first().outerHeight(!0)},C={width:y.outerWidth(!0),height:y.outerHeight(!0)},D={width:z.outerWidth(),height:z.outerHeight()},E=null,F=null,G="ontouchstart"in window,H=!1,I="requestAnimationFrame"in window;return this.dots=[],this.slideCurrent=0,this.angleCurrent=0,this.slidesTotal=x.length,this.intervalActive=!1,this.start=function(a){return v.options.interval&&(v.intervalActive=!0,h(a)),v},this.stop=function(){return v.intervalActive=!1,clearTimeout(E),v},this.move=function(a){var b=Math.max(0,isNaN(a)?v.slideCurrent:a);b>=v.slidesTotal&&(b=0);var c=v.dots[b]&&v.dots[b].angle,d=l(c,v.angleCurrent)[0],e=d>0?-2:2;return v.slideCurrent=b,o(e,d,50),v.start(),v},f()}var c="tinycircleslider",d={interval:!1,intervalTime:3500,dotsSnap:!1,dotsHide:!0,radius:140,start:0};a.fn[c]=function(d){return this.each(function(){a.data(this,"plugin_"+c)||a.data(this,"plugin_"+c,new b(a(this),d))})}});<br />//]]><br /></script></div>Please note that if you already have another version of jQuery, you will need to remove the line in red.<br /><br />Step 5. Now, let's add the CSS styles above the same <span style="background-color: yellow;"></head></span> tag:<br /><blockquote class="tr_bq"><style><br />  #rotatescroll { <span style="color: #6aa84f;">/* is the rectangle container */</span><br />    height: 300px;<br />    position: relative;<br />    width: 300px;<br />  }<br />  #rotatescroll .viewport { /* <span style="color: #6aa84f;">is the rectangle containing the images */</span><br />    height: 300px;<br />    position: relative;<br />    margin: 0 auto;<br />    overflow: hidden;<br />    width: 300px<br />  }<br />  #rotatescroll .overview { <span style="color: #6aa84f;">/* is the list with the images */</span><br />    left: 0;<br />    list-style: none; <br />    margin: 0;<br />    padding: 0;<br />    position: absolute;<br />    top: 0;<br />  }<br />  #rotatescroll .overview li { <span style="color: #6aa84f;">/* each item of the list */</span><br />    float: left;<br />    height: 300px;<br />    position: relative;<br />    width: 300px;<br />  }<br />  #rotatescroll .overlay { <span style="color: #6aa84f;">/* the image with the circle overlapping the list */</span><br />    background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPAooEKoMHfkzXG84JPFzfkub6QbpFO9HiP07E1Zm4Sz4cpW1txDpaj8_rQcFisQQnjR_4kgU8qBeFpLUbS2e3y5DDlZvO7ZEF5y5R8Q0_1oT43hbHPRE53hl4W6Z2GDoWnDV6hA88n9Gp/s1600/bg-rotatescroll.png) no-repeat 0 0;<br />    height: 300px;<br />    left: 0;<br />    position: absolute;<br />    top: 0;<br />    width:300px;<br />  }<br />  #rotatescroll .thumb { <span style="color: #6aa84f;">/* the red circle that allows us to navigate */</span><br />    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHt3Qc2zV3s29lKgX5O0yT18ghiBDKL-kcicnm6NLONDvYNBrLPToiZckc_04iNDKG1RxjLG3KMFUeH2dtO9-o_2ijKJr88z1VhvkacgWP89icODfhsUTe56URIwf8f1w9iw15srrt8FDt/s1600/bg-thumb.png) no-repeat 0 0;<br />    cursor: pointer;<br />    height: 26px;<br />    left: 137px;<br />    position: absolute;<br />    top: -3px;<br />    width: 26px;<br />    z-index: 200;<br />  }<br />  #rotatescroll .dot { <span style="color: #6aa84f;">/* the points indicating the position of each image */</span><br />    background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinHwCTbIwf5_K17O6bWo-2HfR4dxl9p5LcAqsgVCvAEoxbrgrCl0AI_xvFnJbtJ_dYwYkK501jNI3f90HAQDl2rqJehib3EEyggH2sDb6ONbk-GTk6J8wW3yDBHZMxTYVpQNsnaQLhwhKi/s1600/bg-dot.png) no-repeat 0 0;<br />    display: none;<br />    height: 12px;<br />    left: 155px;<br />    position: absolute;<br />    top: 3px;<br />    width: 12px;<br />    z-index: 100;<br />  }<br />  #rotatescroll .dot span { <span style="color: #6aa84f;">/* are hidden by default */</span><br />    display: none;<br />  }<br /> #rotatescroll .viewport ul.overview li img {<br />   width: 300px;<br />   min-height: 300px;<br />   object-fit: cover;<br />   padding:0;<br />   border:0;<br /> }<br /></style></blockquote><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><img border="0" height="253" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtZJnFHH5IxRi8-Ptp02eEjuz8I652CsG7bcQjH6vozOMMaqyR9tgh3FHRcDi1XplPXQpIMqfEti4WCbHj4fa-JAsSGzbjIFB6jBctfYKp4PRtJqQHL3Oek96O8KOIq6zL-SFkOmhqd-CW/s1600/adobe-like-arrows-for-blogger-sidebar-headers.png" width="600" /></td></tr><tr><td class="tr-caption" style="text-align: center;">Screenshot</td></tr></tbody></table>Step 6. Save the changes by clicking the "Save Template" button<br /><br />And here's the HTML that has to be added to where we want to display the carousel. To add it inside a post, click the "New post" button on the left side of your dashboard and paste the below code in the "HTML" box of your post:<br /><blockquote class="tr_bq"><div id="rotatescroll"><br />  <div class="viewport"><br />    <ul class="overview"><br />      <li><img src="<span style="color: blue;">imageURL</span>" /></li><br />      <li><img src="<span style="color: blue;">imageURL</span>" /></li><br />      <li><img src="<span style="color: blue;">imageURL</span>" /></li><br />      <li><img src="<span style="color: blue;">imageURL</span>" /></li><br />      <li><img src="<span style="color: blue;">imageURL</span>" /></li><br />    </ul><br />  </div><br />  <div class="dot"></div><br />  <div class="overlay"></div><br />  <div class="thumb"></div><br /></div><br /><br /><script type="text/javascript"><br />$(document).ready(function(){ <br />$('#rotatescroll').tinycircleslider({ <br />interval: true, <br />snaptodots: true <br />}); <br />});<br /></script></blockquote><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><img alt="blogger template" border="0" height="356" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsk6j2gWKQZ-cofcEippnbrmfK9X9QF5zJuJrwcAz6EpxdgR5lHVeDT1VjjHFXRFQSxENFZnpwzOgC1pfuKPVBvqnXbPUb-UlAD2yfmuVNvHaR9tgoRROeVp2_2tRQqzzykHiNWsLOhmgu/s1600/blogger-post-html-mode.png" title="how to add a tiny jquery circleslider to blogger" width="600" /></td></tr><tr><td class="tr-caption" style="text-align: center;">Adding HTML inside a Blogger post</td></tr></tbody></table><br />Replace the <span style="color: blue;">imageURL</span> text with the URL of your images.<br /><br />Some other options that could be added, separated by commas: <ol><li><span style="color: #0b5394;">snaptodots: false</span> if you want no dots to be shown when dragging them</li><li><span style="color: #0b5394;">hidedots: false </span>if you want to display the internal points (by default is true)</li><li><span style="color: #0b5394;">intervaltime</span> - is the time between slides (by default 3500)</li><li><span style="color: #0b5394;">radius</span> - defines the size of the circle (by default is 140)</li></ol>To add the Tiny jQuery Circleslider to your sidebar, simply go to "Layout" > click the "Add a Gadget link" > from the popup window, choose "HTML/Javascript" and paste the code inside the empty box.

How to Add a Tiny jQuery Circleslider to Blogger

Tiny Circleslider is a small jQuery plugin generating a circular carousel of images that we can slide infinitely (circular). When clicking...

Read more »