CINXE.COM

<!DOCTYPE html> <html class='v2' dir='ltr' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'> <head> <link href='https://www.blogger.com/static/v1/widgets/3566091532-css_bundle_v2.css' rel='stylesheet' type='text/css'/> <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/> <meta content='width=1100' name='viewport'/> <meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/> <meta content='blogger' name='generator'/> <link href='http://highslideinblogger.blogspot.com/favicon.ico' rel='icon' type='image/x-icon'/> <link href='http://highslideinblogger.blogspot.com/' rel='canonical'/> <link rel="alternate" type="application/atom+xml" title="Highslide in Blogger - Atom" href="http://highslideinblogger.blogspot.com/feeds/posts/default" /> <link rel="alternate" type="application/rss+xml" title="Highslide in Blogger - RSS" href="http://highslideinblogger.blogspot.com/feeds/posts/default?alt=rss" /> <link rel="service.post" type="application/atom+xml" title="Highslide in Blogger - Atom" href="https://www.blogger.com/feeds/1053123750376159665/posts/default" /> <link rel="me" href="https://www.blogger.com/profile/08546278152446076926" />  <meta content='http://highslideinblogger.blogspot.com/' property='og:url'/> <meta content='Highslide in Blogger' property='og:title'/> <meta content='' property='og:description'/> <title>Highslide in Blogger</title> <style id='page-skin-1' type='text/css'></style> <style id='template-skin-1' type='text/css'></style> <link href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=1053123750376159665&zx=62a2c176-f7fa-4433-8f1b-274ec70d8776' media='none' onload='if(media!='all')media='all'' rel='stylesheet'/><noscript><link href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=1053123750376159665&zx=62a2c176-f7fa-4433-8f1b-274ec70d8776' rel='stylesheet'/></noscript> <meta name='google-adsense-platform-account' content='ca-host-pub-1556223355139109'/> <meta name='google-adsense-platform-domain' content='blogspot.com'/> </head> <body class='loading variant-birds'> <div class='navbar section' id='navbar'><div class='widget Navbar' data-version='1' id='Navbar1'><script type="text/javascript"> function setAttributeOnload(object, attribute, val) { if(window.addEventListener) { window.addEventListener('load', function(){ object[attribute] = val; }, false); } else { window.attachEvent('onload', function(){ object[attribute] = val; }); } } </script> <div id="navbar-iframe-container"></div> <script type="text/javascript" src="https://apis.google.com/js/platform.js"></script> <script type="text/javascript"> gapi.load("gapi.iframes:gapi.iframes.style.bubble", function() { if (gapi.iframes && gapi.iframes.getContext) { gapi.iframes.getContext().openChild({ url: 'https://www.blogger.com/navbar/1053123750376159665?origin\x3dhttp://highslideinblogger.blogspot.com', where: document.getElementById("navbar-iframe-container"), id: "navbar-iframe" }); } }); </script><script type="text/javascript"> (function() { var script = document.createElement('script'); script.type = 'text/javascript'; script.src = '//pagead2.googlesyndication.com/pagead/js/google_top_exp.js'; var head = document.getElementsByTagName('head')[0]; if (head) { head.appendChild(script); }})(); </script> </div></div> <div itemscope='itemscope' itemtype='http://schema.org/Blog' style='display: none;'> <meta content='Highslide in Blogger' itemprop='name'/> </div> <div class='body-fauxcolumns'> <div class='fauxcolumn-outer body-fauxcolumn-outer'> <div class='cap-top'> <div class='cap-left'></div> <div class='cap-right'></div> </div> <div class='fauxborder-left'> <div class='fauxborder-right'></div> <div class='fauxcolumn-inner'> </div> </div> <div class='cap-bottom'> <div class='cap-left'></div> <div class='cap-right'></div> </div> </div> </div> <div class='content'> <div class='content-fauxcolumns'> <div class='fauxcolumn-outer content-fauxcolumn-outer'> <div class='cap-top'> <div class='cap-left'></div> <div class='cap-right'></div> </div> <div class='fauxborder-left'> <div class='fauxborder-right'></div> <div class='fauxcolumn-inner'> </div> </div> <div class='cap-bottom'> <div class='cap-left'></div> <div class='cap-right'></div> </div> </div> </div> <div class='content-outer'> <div class='content-cap-top cap-top'> <div class='cap-left'></div> <div class='cap-right'></div> </div> <div class='fauxborder-left content-fauxborder-left'> <div class='fauxborder-right content-fauxborder-right'></div> <div class='content-inner'> <header> <div class='header-outer'> <div class='header-cap-top cap-top'> <div class='cap-left'></div> <div class='cap-right'></div> </div> <div class='fauxborder-left header-fauxborder-left'> <div class='fauxborder-right header-fauxborder-right'></div> <div class='region-inner header-inner'> <div class='header section' id='header'><div class='widget Header' data-version='1' id='Header1'> <div id='header-inner'> <div class='titlewrapper'> <h1 class='title'> Highslide in Blogger </h1> </div> <div class='descriptionwrapper'> <p class='description'><span> </span></p> </div> </div> </div></div> </div> </div> <div class='header-cap-bottom cap-bottom'> <div class='cap-left'></div> <div class='cap-right'></div> </div> </div> </header> <div class='tabs-outer'> <div class='tabs-cap-top cap-top'> <div class='cap-left'></div> <div class='cap-right'></div> </div> <div class='fauxborder-left tabs-fauxborder-left'> <div class='fauxborder-right tabs-fauxborder-right'></div> <div class='region-inner tabs-inner'> <div class='tabs section' id='crosscol'><div class='widget HTML' data-version='1' id='HTML1'> <div class='widget-content'>  <script src="http://roadrash.no/hs-support/highslide/highslide-full.min.js" type="text/javascript"></script> <script src="http://roadrash.no/blogger/highslide.blogger.config.js" type="text/javascript"></script> <link href="http://roadrash.no/hs-support/highslide/highslide.css" rel="stylesheet" type="text/css" />    <style type="text/css"> pre { background: white; padding: 5px; font-size: 10.9px; overflow: auto; } </style>  </div> <div class='clear'></div> </div></div> <div class='tabs no-items section' id='crosscol-overflow'></div> </div> </div> <div class='tabs-cap-bottom cap-bottom'> <div class='cap-left'></div> <div class='cap-right'></div> </div> </div> <div class='main-outer'> <div class='main-cap-top cap-top'> <div class='cap-left'></div> <div class='cap-right'></div> </div> <div class='fauxborder-left main-fauxborder-left'> <div class='fauxborder-right main-fauxborder-right'></div> <div class='region-inner main-inner'> <div class='columns fauxcolumns'> <div class='fauxcolumn-outer fauxcolumn-center-outer'> <div class='cap-top'> <div class='cap-left'></div> <div class='cap-right'></div> </div> <div class='fauxborder-left'> <div class='fauxborder-right'></div> <div class='fauxcolumn-inner'> </div> </div> <div class='cap-bottom'> <div class='cap-left'></div> <div class='cap-right'></div> </div> </div> <div class='fauxcolumn-outer fauxcolumn-left-outer'> <div class='cap-top'> <div class='cap-left'></div> <div class='cap-right'></div> </div> <div class='fauxborder-left'> <div class='fauxborder-right'></div> <div class='fauxcolumn-inner'> </div> </div> <div class='cap-bottom'> <div class='cap-left'></div> <div class='cap-right'></div> </div> </div> <div class='fauxcolumn-outer fauxcolumn-right-outer'> <div class='cap-top'> <div class='cap-left'></div> <div class='cap-right'></div> </div> <div class='fauxborder-left'> <div class='fauxborder-right'></div> <div class='fauxcolumn-inner'> </div> </div> <div class='cap-bottom'> <div class='cap-left'></div> <div class='cap-right'></div> </div> </div>  <div class='columns-inner'> <div class='column-center-outer'> <div class='column-center-inner'> <div class='main section' id='main'><div class='widget Blog' data-version='1' id='Blog1'> <div class='blog-posts hfeed'> <div class="date-outer"> <h2 class='date-header'><span>Friday, June 24, 2011</span></h2> <div class="date-posts"> <div class='post-outer'> <div class='post hentry' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'> <meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn14J_b2Ya8kgikMdDnMDEftxx5jieFIV2s3vOQaeaRMR3o6TCLqVvsAOwj_Kh5f6I-54_huwrjbYnN_ZRyRXd7EedjU271mzxntiZiSVNmykKrRjPjd3_o8SRdJ_o1EfOIvu8qnyUx6M/s72-c/stones1.jpg' itemprop='image_url'/> <meta content='1053123750376159665' itemprop='blogId'/> <meta content='4056375449662250773' itemprop='postId'/> <a name='4056375449662250773'></a> <h3 class='post-title entry-title' itemprop='name'> <a href='http://highslideinblogger.blogspot.com/2011/06/highslide-for-single-images-in-blogger.html'>Highslide for single images in Blogger</a> </h3> <div class='post-header'> <div class='post-header-line-1'></div> </div> <div class='post-body entry-content' id='post-body-4056375449662250773' itemprop='description articleBody'> <div class="separator" style="clear: both; text-align: center;"> </div> <div class="separator" style="clear: both; text-align: center;"> </div> <div class="separator" style="clear: both; text-align: center;"> </div> <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;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn14J_b2Ya8kgikMdDnMDEftxx5jieFIV2s3vOQaeaRMR3o6TCLqVvsAOwj_Kh5f6I-54_huwrjbYnN_ZRyRXd7EedjU271mzxntiZiSVNmykKrRjPjd3_o8SRdJ_o1EfOIvu8qnyUx6M/s1600/stones1.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="223" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn14J_b2Ya8kgikMdDnMDEftxx5jieFIV2s3vOQaeaRMR3o6TCLqVvsAOwj_Kh5f6I-54_huwrjbYnN_ZRyRXd7EedjU271mzxntiZiSVNmykKrRjPjd3_o8SRdJ_o1EfOIvu8qnyUx6M/s400/stones1.jpg" width="400" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;">Stones - click to enlarge</td></tr> </tbody></table> <div class="separator" style="clear: both; text-align: center;"> </div> <br /> <u><b><span style="color: red;">UPDATED JANUARY 14, 2013</span> </b></u><br /> <br /> <u><b>This page describes two ways</b></u> to get single images opened in <a href="http://highslide.com/" target="_blank">Highslide JS</a> popups in Blogger:<br /> You can:<br /> <b>1.</b> Store the necessary files on your own server/file host. <br /> or you can:<br /> <b>2.</b> Link to the necessary files stored on my server.  <br /> <br /> First you need to <b>turn off the default Blogger image popup function</b>. <br /> Settings => Posts and comments => Chose "No" for "Showcase images with Lightbox".<br /> <br /> <h3> <u>1. Store the necessary files in your own domain/file host</u></h3> <div class="separator" style="clear: both; text-align: center;"> </div> <div class="separator" style="clear: both; text-align: center;"> </div> <div class="separator" style="clear: both; text-align: center;"> </div> <div class="separator" style="clear: both; text-align: center;"> </div> <div style="text-align: left;"> </div> <ul> </ul> <div style="text-align: right;"> </div> <ul><div style="text-align: left;"> </div> <li>Download Highslide JS from the Highslide JS download page and unzip. </li> <li>Download this JavaScript file: <a href="http://roadrash.no/blogger/highslide.config.js">http://roadrash.no/blogger/highslide.config.js</a> and place it in the highslide folder.</li> <li>Upload the highslide folder with all its content to your server/file host.   </li> <li>Go to "Layout" and click "Add a Gadget" (<i>click thumb #1 below</i>)</li> <li>Chose "HTML/JavaScript" from the list (<i>click</i><i> thumb #2</i><i> below</i>) </li> <li>You will see this window: (<i>click</i><i> thumb #3</i><i> below</i>)<b><br />Don’t</b> add a title since we don’t want this Gadget to be visible with title in the page.</li> <li>Add the below code in the content area.</li> </ul> <ul> </ul> <code></code><br /> <pre><code> <script src="http://<span style="background-color: yellow;">XX</span>/highslide/highslide-full.js" type="text/javascript"></script> <script src="http://<span style="background-color: yellow;">XX</span>/highslide/highslide.config.js" type="text/javascript"></script> <link href="http://<span style="background-color: yellow;">XX</span>/highslide/highslide.css" rel="stylesheet" type="text/css" />  </code></pre> <br /> <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;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-edbR7sQLoCmA-VYiXabDqfnYfZn3PHqxdVaVWljSf2R5Fgn_JiG30i2XaPfKFNzCEcI4jIdkIOHulqh_2YyWqnnGUrNXUAC4VJkMTaU4RUkku37EKmL133NKyiw_xnpjqYBVL1XYipA/s1600/2013-01-14_1707.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="110" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-edbR7sQLoCmA-VYiXabDqfnYfZn3PHqxdVaVWljSf2R5Fgn_JiG30i2XaPfKFNzCEcI4jIdkIOHulqh_2YyWqnnGUrNXUAC4VJkMTaU4RUkku37EKmL133NKyiw_xnpjqYBVL1XYipA/s200/2013-01-14_1707.png" width="200" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;"><i>thumb #1</i></td></tr> </tbody></table> <table 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;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG19siATK_edwbMAt5FX6B4AX-aJJanASArlwtr7cabnFacqoYDCS8bcXOjNZPSsh5amUTg5Sg81K_Q9bGEXyMiblYMKk7fwpAgOWFYHEeMOwUVzq8sGm6WeQDSq5LrViqRzASqobDnZ0/s1600/2013-01-14_1716.png" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="38" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG19siATK_edwbMAt5FX6B4AX-aJJanASArlwtr7cabnFacqoYDCS8bcXOjNZPSsh5amUTg5Sg81K_Q9bGEXyMiblYMKk7fwpAgOWFYHEeMOwUVzq8sGm6WeQDSq5LrViqRzASqobDnZ0/s200/2013-01-14_1716.png" width="200" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;"><i>thumb #2</i></td></tr> </tbody></table> <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;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwPnoRekQQjUj2Dv9ciY3m59As6GHcgoWHSWaZrXrctabuflN3UDNP4d_dXNcWbzuaG_cY8ld5YhFOrj4MUm4eW2S3iPLS6lEhoJhovKylmkxjfiU8iMQXXwklrgZEw4lMLjLnyO7Wl5I/s1600/2013-01-14_1717.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwPnoRekQQjUj2Dv9ciY3m59As6GHcgoWHSWaZrXrctabuflN3UDNP4d_dXNcWbzuaG_cY8ld5YhFOrj4MUm4eW2S3iPLS6lEhoJhovKylmkxjfiU8iMQXXwklrgZEw4lMLjLnyO7Wl5I/s200/2013-01-14_1717.png" width="169" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;"><i>thumb #3</i></td></tr> </tbody></table> <br /> <br /> <h3> <u>2. Link to the necessary files stored at my server</u></h3> <ul> </ul> <ul> <li>Go to "Layout" in the menu and click "Add a Gadget" (<i>click thumb #1 above</i>)</li> <li>Chose "HTML/JavaScript" from the list (<i>click thumb #2 </i><i>above</i>)</li> <li>You will see this window: (<i>click thumb #3 </i><i>above</i>)<b><br />Don’t</b> add a title since we don’t want this Gadget to be visible with title in the page. </li> <li>Add the below code in the content area.</li> </ul> <ul> </ul> <code></code><br /> <pre><code> <script src="http://roadrash.no/hs-support/highslide/highslide-full.min.js" type="text/javascript"></script> <script src="http://roadrash.no/blogger/highslide.blogger.config.js" type="text/javascript"></script> <link href="http://roadrash.no/hs-support/highslide/highslide.css" rel="stylesheet" type="text/css" />  </code></pre> <br /> <br /> <h3> 3. Make the Highslide effect available in the Mobile templates</h3> <div class="separator" style="clear: both; text-align: center;"> </div> <ul> <li>Go to “Templates” in the menu and click the little gear icon below the “Mobile” template. (<i>click thumb #4 </i><i>above</i>)</li> <li>Choose “Yes. Show mobile template on mobile devices.” and chose “Custom” in the drop-down menu. Click “Save” (<i>click thumb #5 </i><i>above</i>)</li> <li>Click “Edit HTML below the template you are using for your blog. (<i>click thumb #6 </i><i>above</i>)<br />Search for <b>HTML1</b> in the template code. If you already had added another HTML/JavaScript Gadget before the one we added for Highslide you probably need to search for HTML2. Your other HTML/JavaScript Gadget most likely has a title – the one you are searching for now doesn’t. The code you are searching for looks like this (note that the number in the id might be different):<br /><pre><code><b:widget id='HTML1' locked='false' title='' type='HTML'/></code></pre> <br />You need to make it available for the mobile template – add the highlighted part:<br /><br /><pre><code><b:widget id='HTML1' locked='false' <span style="background-color: yellow;">mobile='yes'</span> title='' type='HTML'/> </code></pre> </li> <li>Save the template and close.</li> </ul> <ul> </ul> <div style="text-align: center;"> <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;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNt5WYzOqhXc5hPpiww7_N3cHUIRrJr9yYNs0kXzeQEHVYkSe3lxIPyOU24KkrtdhuI-eJt7CUu7eakM3s0GrqYeapiaslVszbAu0ZH2PGofwP_wQBLcHyGu3EEeY_lN4ha_tTQiPcACg/s1600/2013-01-14_1735.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="113" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNt5WYzOqhXc5hPpiww7_N3cHUIRrJr9yYNs0kXzeQEHVYkSe3lxIPyOU24KkrtdhuI-eJt7CUu7eakM3s0GrqYeapiaslVszbAu0ZH2PGofwP_wQBLcHyGu3EEeY_lN4ha_tTQiPcACg/s200/2013-01-14_1735.png" width="200" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;"><i>thumb #4</i></td></tr> </tbody></table> <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;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeSvUsT1_9HFE41juOc6SCjTTMy7h32nyto3K5bOE-ghD-dWCiRRu3Zpoy_jYy406WgsE0ZiMuQ6a_yqvnuFvAf9aMbbhjorfbqJa7_9vwEpWuRq3N5XYfJUnl2BzYZS7Rm_7gGbi2Krw/s1600/2013-01-14_1744.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="178" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeSvUsT1_9HFE41juOc6SCjTTMy7h32nyto3K5bOE-ghD-dWCiRRu3Zpoy_jYy406WgsE0ZiMuQ6a_yqvnuFvAf9aMbbhjorfbqJa7_9vwEpWuRq3N5XYfJUnl2BzYZS7Rm_7gGbi2Krw/s200/2013-01-14_1744.png" width="200" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;"><i>thumb #5</i></td></tr> </tbody></table> <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;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmOqWeoO8YdXTJyAU0vMnDOR88SPI321T6utgU7p3hkR8vnd6Hlb1dyHn_ZlMt3mnodN5MkyKKqoH8lIa-DQCuiLJc-e_SfvENVZAMMAMdAOK7nVjEueuTMbgCzzIxZI7E4LY6W5H9rAY/s1600/2013-01-14_1746.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="115" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmOqWeoO8YdXTJyAU0vMnDOR88SPI321T6utgU7p3hkR8vnd6Hlb1dyHn_ZlMt3mnodN5MkyKKqoH8lIa-DQCuiLJc-e_SfvENVZAMMAMdAOK7nVjEueuTMbgCzzIxZI7E4LY6W5H9rAY/s200/2013-01-14_1746.png" width="200" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;"><i>thumb #6</i></td></tr> </tbody></table> <br /> <br /> <b>That’s it - now all the images will automatically open in a Highslide popup.</b></div> <br /> <br /> <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;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlvT3GnTqMsWgsW3rIzgyh4ODq-Iqq2uvKQUPS0Jwr94ROZvqPSmbF8d7GT-6Kx_KCwXhp2EaoCElIn58jbO0wRRb9h3Eitax_-0zmArnn-_C6uG9DEOmjlaE_EDOmPjtjkz3UTlcIWwI/s1600/waterdrop.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="223" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlvT3GnTqMsWgsW3rIzgyh4ODq-Iqq2uvKQUPS0Jwr94ROZvqPSmbF8d7GT-6Kx_KCwXhp2EaoCElIn58jbO0wRRb9h3Eitax_-0zmArnn-_C6uG9DEOmjlaE_EDOmPjtjkz3UTlcIWwI/s400/waterdrop.jpg" width="400" /></a></td></tr> <tr><td class="tr-caption" style="text-align: center;">Water drop - click to enlarge</td></tr> </tbody></table> <div class="separator" style="clear: both; text-align: center;"> </div> <br /> <div class="separator" style="clear: both; text-align: center;"> </div> <div class="separator" style="clear: both; text-align: center;"> </div> <div style='clear: both;'></div> </div> <div class='post-footer'> <div class='post-footer-line post-footer-line-1'><span class='post-author vcard'> Posted by <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'> <meta content='https://www.blogger.com/profile/08546278152446076926' itemprop='url'/> <a href='https://www.blogger.com/profile/08546278152446076926' rel='author' title='author profile'> <span itemprop='name'>RoadRash</span> </a> </span> </span> <span class='post-timestamp'> at <meta content='http://highslideinblogger.blogspot.com/2011/06/highslide-for-single-images-in-blogger.html' itemprop='url'/> <a class='timestamp-link' href='http://highslideinblogger.blogspot.com/2011/06/highslide-for-single-images-in-blogger.html' rel='bookmark' title='permanent link'><abbr class='published' itemprop='datePublished' title='2011-06-24T13:36:00-05:00'>1:36 PM</abbr></a> </span> <span class='post-comment-link'> </span> <span class='post-icons'> <span class='item-control blog-admin pid-496548801'> <a href='https://www.blogger.com/post-edit.g?blogID=1053123750376159665&postID=4056375449662250773&from=pencil' title='Edit Post'> <img alt='' class='icon-action' height='18' src='https://resources.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/> </a> </span> </span> <div class='post-share-buttons goog-inline-block'> <a class='goog-inline-block share-button sb-email' href='https://www.blogger.com/share-post.g?blogID=1053123750376159665&postID=4056375449662250773&target=email' target='_blank' title='Email This'><span class='share-button-link-text'>Email This</span></a><a class='goog-inline-block share-button sb-blog' href='https://www.blogger.com/share-post.g?blogID=1053123750376159665&postID=4056375449662250773&target=blog' onclick='window.open(this.href, "_blank", "height=270,width=475"); return false;' target='_blank' title='BlogThis!'><span class='share-button-link-text'>BlogThis!</span></a><a class='goog-inline-block share-button sb-twitter' href='https://www.blogger.com/share-post.g?blogID=1053123750376159665&postID=4056375449662250773&target=twitter' target='_blank' title='Share to X'><span class='share-button-link-text'>Share to X</span></a><a class='goog-inline-block share-button sb-facebook' href='https://www.blogger.com/share-post.g?blogID=1053123750376159665&postID=4056375449662250773&target=facebook' onclick='window.open(this.href, "_blank", "height=430,width=640"); return false;' target='_blank' title='Share to Facebook'><span class='share-button-link-text'>Share to Facebook</span></a><a class='goog-inline-block share-button sb-pinterest' href='https://www.blogger.com/share-post.g?blogID=1053123750376159665&postID=4056375449662250773&target=pinterest' target='_blank' title='Share to Pinterest'><span class='share-button-link-text'>Share to Pinterest</span></a> </div> <span class='post-backlinks post-comment-link'> </span> </div> <div class='post-footer-line post-footer-line-2'><span class='post-labels'> </span> </div> <div class='post-footer-line post-footer-line-3'><span class='post-location'> </span> </div> </div> </div> </div> </div></div> </div> <div class='blog-pager' id='blog-pager'> <a class='home-link' href='http://highslideinblogger.blogspot.com/'>Home</a> </div> <div class='clear'></div> <div class='blog-feeds'> <div class='feed-links'> Subscribe to: <a class='feed-link' href='http://highslideinblogger.blogspot.com/feeds/posts/default' target='_blank' type='application/atom+xml'>Posts (Atom)</a> </div> </div> </div></div> </div> </div> <div class='column-left-outer'> <div class='column-left-inner'> <aside> </aside> </div> </div> <div class='column-right-outer'> <div class='column-right-inner'> <aside> <div class='sidebar section' id='sidebar-right-1'><div class='widget Text' data-version='1' id='Text1'> <h2 class='title'>Highslide JS</h2> <div class='widget-content'> The image popup functions in this blog is made with Highslide Software's <a href="http://www.highslide.com/">Highslide JS</a>. </div> <div class='clear'></div> </div></div> <table border='0' cellpadding='0' cellspacing='0' class='section-columns columns-2'> <tbody> <tr> <td class='first columns-cell'> <div class='sidebar section' id='sidebar-right-2-1'><div class='widget BlogArchive' data-version='1' id='BlogArchive1'> <h2>Blog Archive</h2> <div class='widget-content'> <div id='ArchiveList'> <div id='BlogArchive1_ArchiveList'> <ul class='hierarchy'> <li class='archivedate expanded'> <a class='toggle' href='javascript:void(0)'> <span class='zippy toggle-open'> ▼  </span> </a> <a class='post-count-link' href='http://highslideinblogger.blogspot.com/2011/'> 2011 </a> <span class='post-count' dir='ltr'>(1)</span> <ul class='hierarchy'> <li class='archivedate expanded'> <a class='toggle' href='javascript:void(0)'> <span class='zippy toggle-open'> ▼  </span> </a> <a class='post-count-link' href='http://highslideinblogger.blogspot.com/2011/06/'> June </a> <span class='post-count' dir='ltr'>(1)</span> <ul class='posts'> <li><a href='http://highslideinblogger.blogspot.com/2011/06/highslide-for-single-images-in-blogger.html'>Highslide for single images in Blogger</a></li> </ul> </li> </ul> </li> </ul> </div> </div> <div class='clear'></div> </div> </div></div> </td> <td class='columns-cell'> <div class='sidebar section' id='sidebar-right-2-2'><div class='widget Image' data-version='1' id='Image1'> <div class='widget-content'> <a href='http://4.bp.blogspot.com/-IchK31UuHTQ/TgTDv4Gnf2I/AAAAAAAAAP0/N46xIRL3mJg/s1600/summer.jpg'> <img alt='' height='85' id='Image1_img' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHztmsAKbwy0rXCE8GgjPi0mqvp1nyIUok3Kr_-5Y-HTCLzKm_Rk_Z5hT6PhRPvQyGakC1xEIhKdMj7MMN0Od0kp71WYVHPHsAPa-c9XjhkDPEWjOjXISyH1Dww9m1EP5Y03tZqf6X7b4/s220/summer.jpg' width='150'/> </a> <br/> <span class='caption'>Sunset - click to enlarge</span> </div> <div class='clear'></div> </div></div> </td> </tr> </tbody> </table> <div class='sidebar section' id='sidebar-right-3'><div class='widget Text' data-version='1' id='Text2'> <h2 class='title'>Links</h2> <div class='widget-content'> <a href="http://www.roadrash.no/?page_id=17" target="_blank" title="Contact me">Contact me</a><br/><a href="http://www.highslide.com/" target="_blank" title="Highslide JS">Highslide JS</a><br/><a href="http://www.highslide.com/forum/" target="_blank" title="Highslide support forum">Highslide support forum</a><br/><a href="http://www.roadrash.no/" target="_blank" title="Roadrash.no - my home page">Roadrash.no</a><br/> </div> <div class='clear'></div> </div></div> </aside> </div> </div> </div> <div style='clear: both'></div>  </div>  </div> </div> <div class='main-cap-bottom cap-bottom'> <div class='cap-left'></div> <div class='cap-right'></div> </div> </div> <footer> <div class='footer-outer'> <div class='footer-cap-top cap-top'> <div class='cap-left'></div> <div class='cap-right'></div> </div> <div class='fauxborder-left footer-fauxborder-left'> <div class='fauxborder-right footer-fauxborder-right'></div> <div class='region-inner footer-inner'> <div class='foot no-items section' id='footer-1'></div> <table border='0' cellpadding='0' cellspacing='0' class='section-columns columns-2'> <tbody> <tr> <td class='first columns-cell'> <div class='foot no-items section' id='footer-2-1'></div> </td> <td class='columns-cell'> <div class='foot no-items section' id='footer-2-2'></div> </td> </tr> </tbody> </table>  <div class='foot section' id='footer-3'><div class='widget Attribution' data-version='1' id='Attribution1'> <div class='widget-content' style='text-align: center;'> Watermark theme. Powered by <a href='https://www.blogger.com' target='_blank'>Blogger</a>. </div> <div class='clear'></div> </div></div> </div> </div> <div class='footer-cap-bottom cap-bottom'> <div class='cap-left'></div> <div class='cap-right'></div> </div> </div> </footer>  </div> </div> <div class='content-cap-bottom cap-bottom'> <div class='cap-left'></div> <div class='cap-right'></div> </div> </div> </div> <script type='text/javascript'> window.setTimeout(function() { document.body.className = document.body.className.replace('loading', ''); }, 10); </script> <script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/1455187647-widgets.js"></script> <script type='text/javascript'> window['__wavt'] = 'AOuZoY60gtBmcNaEaPjCCyaD39Onv-Px6w:1743404651399';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d1053123750376159665','//highslideinblogger.blogspot.com/','1053123750376159665'); _WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '1053123750376159665', 'title': 'Highslide in Blogger', 'url': 'http://highslideinblogger.blogspot.com/', 'canonicalUrl': 'http://highslideinblogger.blogspot.com/', 'homepageUrl': 'http://highslideinblogger.blogspot.com/', 'searchUrl': 'http://highslideinblogger.blogspot.com/search', 'canonicalHomepageUrl': 'http://highslideinblogger.blogspot.com/', 'blogspotFaviconUrl': 'http://highslideinblogger.blogspot.com/favicon.ico', 'bloggerUrl': 'https://www.blogger.com', 'hasCustomDomain': false, 'httpsEnabled': true, 'enabledCommentProfileImages': true, 'gPlusViewType': 'FILTERED_POSTMOD', 'adultContent': false, 'analyticsAccountNumber': '', 'encoding': 'UTF-8', 'locale': 'en', 'localeUnderscoreDelimited': 'en', 'languageDirection': 'ltr', 'isPrivate': false, 'isMobile': false, 'isMobileRequest': false, 'mobileClass': '', 'isPrivateBlog': false, 'isDynamicViewsAvailable': true, 'feedLinks': '\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Highslide in Blogger - Atom\x22 href\x3d\x22http://highslideinblogger.blogspot.com/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22Highslide in Blogger - RSS\x22 href\x3d\x22http://highslideinblogger.blogspot.com/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Highslide in Blogger - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/1053123750376159665/posts/default\x22 /\x3e\n', 'meTag': '\x3clink rel\x3d\x22me\x22 href\x3d\x22https://www.blogger.com/profile/08546278152446076926\x22 /\x3e\n', 'adsenseHostId': 'ca-host-pub-1556223355139109', 'adsenseHasAds': false, 'adsenseAutoAds': false, 'boqCommentIframeForm': true, 'loginRedirectParam': '', 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/6c9901d4a96a9be5', 'plusOneApiSrc': 'https://apis.google.com/js/platform.js', 'disableGComments': true, 'interstitialAccepted': false, 'sharing': {'platforms': [{'name': 'Get link', 'key': 'link', 'shareMessage': 'Get link', 'target': ''}, {'name': 'Facebook', 'key': 'facebook', 'shareMessage': 'Share to Facebook', 'target': 'facebook'}, {'name': 'BlogThis!', 'key': 'blogThis', 'shareMessage': 'BlogThis!', 'target': 'blog'}, {'name': 'X', 'key': 'twitter', 'shareMessage': 'Share to X', 'target': 'twitter'}, {'name': 'Pinterest', 'key': 'pinterest', 'shareMessage': 'Share to Pinterest', 'target': 'pinterest'}, {'name': 'Email', 'key': 'email', 'shareMessage': 'Email', 'target': 'email'}], 'disableGooglePlus': true, 'googlePlusShareButtonWidth': 0, 'googlePlusBootstrap': '\x3cscript type\x3d\x22text/javascript\x22\x3ewindow.___gcfg \x3d {\x27lang\x27: \x27en\x27};\x3c/script\x3e'}, 'hasCustomJumpLinkMessage': false, 'jumpLinkMessage': 'Read more', 'pageType': 'index', 'pageName': '', 'pageTitle': 'Highslide in Blogger'}}, {'name': 'features', 'data': {}}, {'name': 'messages', 'data': {'edit': 'Edit', 'linkCopiedToClipboard': 'Link copied to clipboard!', 'ok': 'Ok', 'postLink': 'Post Link'}}, {'name': 'template', 'data': {'name': 'custom', 'localizedName': 'Custom', 'isResponsive': false, 'isAlternateRendering': false, 'isCustom': true, 'variant': 'birds', 'variantId': 'birds'}}, {'name': 'view', 'data': {'classic': {'name': 'classic', 'url': '?view\x3dclassic'}, 'flipcard': {'name': 'flipcard', 'url': '?view\x3dflipcard'}, 'magazine': {'name': 'magazine', 'url': '?view\x3dmagazine'}, 'mosaic': {'name': 'mosaic', 'url': '?view\x3dmosaic'}, 'sidebar': {'name': 'sidebar', 'url': '?view\x3dsidebar'}, 'snapshot': {'name': 'snapshot', 'url': '?view\x3dsnapshot'}, 'timeslide': {'name': 'timeslide', 'url': '?view\x3dtimeslide'}, 'isMobile': false, 'title': 'Highslide in Blogger', 'description': '', 'url': 'http://highslideinblogger.blogspot.com/', 'type': 'feed', 'isSingleItem': false, 'isMultipleItems': true, 'isError': false, 'isPage': false, 'isPost': false, 'isHomepage': true, 'isArchive': false, 'isLabelSearch': false}}]); _WidgetManager._RegisterWidget('_NavbarView', new _WidgetInfo('Navbar1', 'navbar', document.getElementById('Navbar1'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_HeaderView', new _WidgetInfo('Header1', 'header', document.getElementById('Header1'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML1', 'crosscol', document.getElementById('HTML1'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'main', document.getElementById('Blog1'), {'cmtInteractionsEnabled': false}, 'displayModeFull')); _WidgetManager._RegisterWidget('_TextView', new _WidgetInfo('Text1', 'sidebar-right-1', document.getElementById('Text1'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_BlogArchiveView', new _WidgetInfo('BlogArchive1', 'sidebar-right-2-1', document.getElementById('BlogArchive1'), {'languageDirection': 'ltr', 'loadingMessage': 'Loading\x26hellip;'}, 'displayModeFull')); _WidgetManager._RegisterWidget('_ImageView', new _WidgetInfo('Image1', 'sidebar-right-2-2', document.getElementById('Image1'), {'resize': false}, 'displayModeFull')); _WidgetManager._RegisterWidget('_TextView', new _WidgetInfo('Text2', 'sidebar-right-3', document.getElementById('Text2'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_AttributionView', new _WidgetInfo('Attribution1', 'footer-3', document.getElementById('Attribution1'), {}, 'displayModeFull')); </script> </body> </html>