Spacegallery: image gallery/slideshow made with jQuery

<div class="post-body"><div id="adsmiddle15286542215318314035"></div><div style="clear: both: margin: 10px 5px; display: none;"></div><div id="adsmiddle25286542215318314035">There are many types of galleries for images that can be found on the internet, but we rarely find one displaying images so differently like this one. Those using Mac OS X will surely notice a lot of similarity with Time Machine and those who don't, I'm sure will enjoy this type of effect for viewing images.<br><br><div class="ssmainhide" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZsBZb4tSklxn64OymgIMra3xA5SwtPfJx-V_AK7_h_omH43A4c5Tfcr7iMtwDPitrNiDFQjdvwCeSZAsYuWwr4w6Zgop2Yv01sNhOSusUKmGMgiXI2V3kOGXFv5ueZgmTUmzsMCe8-xVS/s1600/create-image-gallery-slideshow-using-jquery-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="image gallery with jQuery for blogger" border="0" height="187" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZsBZb4tSklxn64OymgIMra3xA5SwtPfJx-V_AK7_h_omH43A4c5Tfcr7iMtwDPitrNiDFQjdvwCeSZAsYuWwr4w6Zgop2Yv01sNhOSusUKmGMgiXI2V3kOGXFv5ueZgmTUmzsMCe8-xVS/s200/create-image-gallery-slideshow-using-jquery-blogger.png" title="create image gallery or slideshow in blogger with jQuery" width="200"></a></div>SpaceGallery is a JQuery based slideshow / image gallery that performs overlaying in a visually appealing manner and provides a smooth fade out effect to images. This 3D image gallery lets you float through your pictures easily by enlarging them with an Apple-like animation.<br><br>To see the SpaceGallery slideshow in action, please visit this demo blog and click on the first image:<br><br><div style="text-align: center;"><a class="demo-link" href="http://widgets-tricks.blogspot.com/2014/07/blog-post_23.html" rel="nofollow" target="_blank">Demo Blog </a></div><br><h3>How to Add Spacegallery Image Slideshow to Blogger</h3>To implement this gallery is very easy. Just follow the steps below:<br><br><b><span style="color: #3d85c6;">Step 1</span></b>. Log in to your <a href="http://www.blogger.com/" rel="nofollow">Blogger</a> account and select your blog. Next, go to <b>Template</b> and click the <b>Edit HTML</b> button:<br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiesVi7T58As94NJd8-JyIaDFMA4zoElG743c_tdabE8Zpyprmh475tgzV89MWHS55ibnkvp8Up45EAzyTBict2v4Ai0zMP7vNnLjHzEMJu9iGCeOoi7PS2jgMQ5qQEE4nvidasKz7Y-wB9/s1600/blogger_blogspot_template_edit_html_tutorial.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="256" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiesVi7T58As94NJd8-JyIaDFMA4zoElG743c_tdabE8Zpyprmh475tgzV89MWHS55ibnkvp8Up45EAzyTBict2v4Ai0zMP7vNnLjHzEMJu9iGCeOoi7PS2jgMQ5qQEE4nvidasKz7Y-wB9/s320/blogger_blogspot_template_edit_html_tutorial.png" width="320"></a></div><br><span style="color: #3d85c6;"><b>Step 2</b></span>. 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;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS5-nztlDjFNC3nz9gLpUJ4CTmiwnQVXAVVmZobY4vnhj4lhCbJKIIOMcbGzcKCjmYtB_9Mp9PDk94L8enCWX5gLRllni_HDmBOMBskotiNQVcIIu212e1KlmYqofKuMLSwW1XUS-ORZQ8/s1600/open-blogger-search-box-ctrl%252Bf.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="246" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS5-nztlDjFNC3nz9gLpUJ4CTmiwnQVXAVVmZobY4vnhj4lhCbJKIIOMcbGzcKCjmYtB_9Mp9PDk94L8enCWX5gLRllni_HDmBOMBskotiNQVcIIu212e1KlmYqofKuMLSwW1XUS-ORZQ8/s1600/open-blogger-search-box-ctrl%252Bf.png" width="640"></a></div><br><b><span style="color: #3d85c6;">Step 3</span></b>. Just before/above the <span style="background-color: yellow;"></head></span> tag, paste the following scripts:<br><blockquote class="tr_bq"><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 src='http://helplogger.googlecode.com/svn/trunk/SpaceGallery/eye.js' type='text/javascript'/><br><script src='http://helplogger.googlecode.com/svn/trunk/SpaceGallery/utils.js' type='text/javascript'/><br><script src='http://helplogger.googlecode.com/svn/trunk/SpaceGallery/spacegallery.js' type='text/javascript'/><br><br><script type='text/javascript'><br>//<![CDATA[<br>(function($){<br>var initLayout = function() {<br>var hash = window.location.hash.replace('#', '');<br>var currentTab = $('ul.navigationTabs a')<br>.bind('click', showTab)<br>.filter('a[rel=' + hash + ']');<br>if (currentTab.size() == 0) {<br>currentTab = $('ul.navigationTabs a:first');<br>}<br>showTab.apply(currentTab.get(0));<br>$('#myGallery').spacegallery({loadingClass: 'loading'});<br>};<br><br>var showTab = function(e) {<br>var tabIndex = $('ul.navigationTabs a')<br>.removeClass('active')<br>.index(this);<br>$(this)<br>.addClass('active')<br>.blur();<br>$('div.tab')<br>.hide()<br>.eq(tabIndex)<br>.show();<br>};<br><br>EYE.register(initLayout, 'init');<br>})(jQuery)<br>//]]><br></script></blockquote><i>Note: if you have already jQuery in your template, please delete the line in red.</i><br><br><span style="color: #3d85c6;"><b>Step 4</b></span>. Next, search (CTRL + F) for this tag:<br><blockquote class="tr_bq">]]></b:skin></blockquote><b><span style="color: #3d85c6;">Step 5.</span></b> Above the <span style="background-color: yellow;">]]></b:skin></span> tag, paste the following CSS style:<blockquote class="tr_bq">#myGallery {<br>width: 100%;<br>height: 400px;<br>}<br>#myGallery img {<br>border: 2px solid #52697E; <br>}<br>a.loading {<br>background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifp1obU9V6HzhOp_FjIibs5bn8Lju6MsQx3kVpRqwR6VhiEopWZB8aDKPFmh2jOoFPeVQhA0AUbGPQwOsmphQGpHV9UBLb0X5k9epZRJjJlYNt7tUi4pvNuhJMJmeZ6eDxSDJof_LFVt4b/s1600/ajax_small.gif) no-repeat center;<br>}<br>.spacegallery {<br>position: relative;<br>overflow: hidden;<br>}<br>.spacegallery img {<br>position: absolute;<br>left: 50%;<br>}<br>.spacegallery a {<br>position: absolute;<br>z-index: 1000;<br>display: block;<br>top: 0;<br>left: 0;<br>width: 100%;<br>height: 100%;<br>}</blockquote><span style="color: #3d85c6;"><b>Step 6</b></span>. Hit the <b>Save template</b> button to save the changes.<br><br><span style="color: #3d85c6;"><b>Step 7</b></span>. Finally, go to <b>Layout </b>> <b>Add a Gadget</b> > <b>HTML/Javascript</b> and copy-paste the code below:<br><blockquote class="tr_bq"><div class="spacegallery" id="myGallery"><br><img src="<span style="color: blue;">Image URL</span>"/><br><img src="<span style="color: blue;">Image URL</span>"/><br><img src="<span style="color: blue;">Image URL</span>"/><br><img src="<span style="color: blue;">Image URL</span>"/><br><img src="<span style="color: blue;">Image URL</span>"/><br></div></blockquote>Replace the <span style="color: blue;">Image URL</span> text with the image addresses that you want to appear on the gallery, considering that the last image is the first to be displayed.<br><br>If you want to add this slideshow inside a post, go to your dashboard and create a <b>New Post</b>, then paste the code in the <b>HTML</b> section.<br><br>That's it! Now, you can enjoy this simple image gallery on your blog and although, it has no display options or settings, it is without a doubt a gallery that will draw the attention of your readers.<br><br>Source: <a href="http://www.eyecon.ro/spacegallery/" rel="nofollow" target="_blank">eyecon.ro</a></div><script type="text/javascript">var obj0=document.getElementById("adsmiddle15286542215318314035"); var obj1=document.getElementById("adsmiddle25286542215318314035"); var s=obj1.innerHTML; var r=s.search(/\x3C!-- adsense --\x3E/igm); if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+16);} </script></div>

Blog Design Spacegallery: image gallery/slideshow made with jQuery

There are many types of galleries for images that can be found on the internet, but we rarely find one displaying images so differently like...

Read more »

How to add a thumbnail image/photo gallery in Blogger

<div class="post-body"><div id="adsmiddle17852508929283257884">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 selected 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/width. The script will add a click-event for each <li> object that changes it's child's <img> visibility and will assign an "active" class name to the <li>.<br><br><b>Related:</b><br><a href="/2015/07/create-css-image-slider-with-thumbnails.html" style="color: blue;" target="_blank">Image Slider with Mouse Hover Effect using only CSS</a><b> </b><br><a href="/2014/11/possibly-most-simple-jquery-slider_12.html" style="color: blue;" target="_blank">Possibly the Most Simple jQuery Slider</a><br><a href="/2015/07/spacegallery-image-galleryslideshow.html" style="color: blue;" target="_blank">Spacegallery: A Time Machine-like Slideshow/Image Gallery </a><br><br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1CBEzT7Xl7Uw2oRTGR-ritQfOkaMcdlTKmzhOiqU1kV98KQ2gzpXXwrHuJ5UFg7HSTTU5VEyC0qU9FWg9dABQ_b8Mk7N8vdMn9LjxF0jgpZWY4iEnN9-QcKljsqrX4Chg6fMUqGJTt5H6/s1600/add-a-lightweight-image-gallery-to-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="221" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1CBEzT7Xl7Uw2oRTGR-ritQfOkaMcdlTKmzhOiqU1kV98KQ2gzpXXwrHuJ5UFg7HSTTU5VEyC0qU9FWg9dABQ_b8Mk7N8vdMn9LjxF0jgpZWY4iEnN9-QcKljsqrX4Chg6fMUqGJTt5H6/s1600/add-a-lightweight-image-gallery-to-blogger.png" width="400"></a></div><br><h2>How to Add Image Gallery with Thumbnails to Blogger</h2><b><span style="color: #3d85c6;">Step 1.</span> </b>Log in to your <a href="http://blogger.com/" rel="nofollow" target="_blank">Blogger account</a>, select your blog and go to Template > Edit HTML<br><br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiesVi7T58As94NJd8-JyIaDFMA4zoElG743c_tdabE8Zpyprmh475tgzV89MWHS55ibnkvp8Up45EAzyTBict2v4Ai0zMP7vNnLjHzEMJu9iGCeOoi7PS2jgMQ5qQEE4nvidasKz7Y-wB9/s1600/blogger_blogspot_template_edit_html_tutorial.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="256" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiesVi7T58As94NJd8-JyIaDFMA4zoElG743c_tdabE8Zpyprmh475tgzV89MWHS55ibnkvp8Up45EAzyTBict2v4Ai0zMP7vNnLjHzEMJu9iGCeOoi7PS2jgMQ5qQEE4nvidasKz7Y-wB9/s1600/blogger_blogspot_template_edit_html_tutorial.png" width="320"></a></div><br><b><span style="color: #3d85c6;">Step 2.</span> </b>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;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS5-nztlDjFNC3nz9gLpUJ4CTmiwnQVXAVVmZobY4vnhj4lhCbJKIIOMcbGzcKCjmYtB_9Mp9PDk94L8enCWX5gLRllni_HDmBOMBskotiNQVcIIu212e1KlmYqofKuMLSwW1XUS-ORZQ8/s1600/open-blogger-search-box-ctrl%252Bf.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="246" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS5-nztlDjFNC3nz9gLpUJ4CTmiwnQVXAVVmZobY4vnhj4lhCbJKIIOMcbGzcKCjmYtB_9Mp9PDk94L8enCWX5gLRllni_HDmBOMBskotiNQVcIIu212e1KlmYqofKuMLSwW1XUS-ORZQ8/s1600/open-blogger-search-box-ctrl%252Bf.png" width="640"></a></div><br><b><span style="color: #3d85c6;">Step 3.</span></b> Type the following tag inside the search box and hit Enter to find it:<br><blockquote class="tr_bq"></head></blockquote><b><span style="color: #3d85c6;">Step 4.</span></b> Now pick one of the styles below and copy the code below it:<br><br><span style="color: #3d85c6; font-size: large;"><b>Style 1</b></span><br><script type="text/javascript">//<![CDATA[ var gallery3 = { init : function() { if (!document.getElementById || !document.createElement || !document.appendChild) return false; if (document.getElementById('image-gallery1')) document.getElementById('image-gallery1').id = 'jquery-gallery1'; var li = document.getElementById('jquery-gallery1').getElementsByTagName('li'); li[0].className = 'active'; for (i=0; i<li.length; i++) { li[i].style.backgroundImage = 'url(' + li[i].getElementsByTagName('img')[0].src + ')'; li[i].title = li[i].getElementsByTagName('img')[0].alt; gallery3.addEvent(li[i],'click',function() { var im = document.getElementById('jquery-gallery1').getElementsByTagName('li'); for (j=0; j<im.length; j++) { im[j].className = ''; } this.className = 'active'; document.getElementById('gallery-caption1').innerHTML = this.title; }); } }, addEvent : function(obj, type, fn) { if (obj.addEventListener) { obj.addEventListener(type, fn, false); } else if (obj.attachEvent) { obj["e"+type+fn] = fn; obj[type+fn] = function() { obj["e"+type+fn]( window.event ); } obj.attachEvent("on"+type, obj[type+fn]); } } } gallery3.addEvent(window,'load', function() { gallery3.init(); }); //]]></script> <style type="text/css">#image-gallery1 {display: none;} #jquery-gallery1 {padding:0;margin:0;list-style: none; width: 500px;} #jquery-gallery1 li {width:84px; height: 80px;background-size: 100%;-webkit-background-size: cover;-moz-background-size: cover; -o-background-size: cover;background-size: cover;margin-right: 10px; border: 3px solid #fff; outline: 1px solid #E3E3E3; margin-bottom: 10px;opacity: .5; filter:alpha(opacity=50); float: left; display: block; } #jquery-gallery1 li img { position: absolute; top: 100px; left: 0px; display: none;} #jquery-gallery1 li.active img { display: block; border: 3px solid #fff; outline: 1px solid #E3E3E3; width:490px; max-height: 375px;} #jquery-gallery1 li.active, #jquery-gallery1 li:hover { outline-color: #DFDFDF; opacity: .99;filter:alpha(opacity=99);} #gallery-caption1 { position: absolute;color: #000;background: #FFFFFF;font-size: 16px;font-weight: bold;bottom: 0px; } </style><br><div style="height: 500px; margin-left: 110px; position: relative;"><ul id="jquery-gallery1"><li class="active" title="Test Title" style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh68ks8limqjbrmZqONY5PwUWqFJj-faAm_izCvzBqRuv89NQTQfJTtbAhlW-Jk1LJsZ9_FRl98aC40WvOKIrQHttPHFlNdb24c4Q0dOUW3DzHCDJwhEGZV9xF3GRQyPJ3IKBW3-MRu3l7T/s1600/Tulips.jpg);"><img alt="Test Title" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh68ks8limqjbrmZqONY5PwUWqFJj-faAm_izCvzBqRuv89NQTQfJTtbAhlW-Jk1LJsZ9_FRl98aC40WvOKIrQHttPHFlNdb24c4Q0dOUW3DzHCDJwhEGZV9xF3GRQyPJ3IKBW3-MRu3l7T/s1600/Tulips.jpg"></li><li title="Title" style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTd1ZxSr51yGmvj_n0_LgiJxrwXwztWmA4c86oR_7i2xutMWD2NfVMyRojmngLwarCJYvj-fDkfpgdJ3GipPFdHo_VwNbRaEdQe2BiyrToR1R7WA_Z3bkpLy_UPpkBqWfaAx8ozUhRAEbt/s1600/Chrysanthemum.jpg);"><img alt="Title" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTd1ZxSr51yGmvj_n0_LgiJxrwXwztWmA4c86oR_7i2xutMWD2NfVMyRojmngLwarCJYvj-fDkfpgdJ3GipPFdHo_VwNbRaEdQe2BiyrToR1R7WA_Z3bkpLy_UPpkBqWfaAx8ozUhRAEbt/s1600/Chrysanthemum.jpg"></li><li title="" style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhquOh0PGDNTDHVFl0X0SYfel6fxBIrCIZ_AQrODxDgpA4T3u_RHUluJa5GxjjowIiAnorIOzJ00jxqT-kWFeRhGEUwkgziwELWkUajPWnwsFgHEtYiYMS8pi-sRnAn7ZULxaREskXais7n/s1600/Desert.jpg);"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhquOh0PGDNTDHVFl0X0SYfel6fxBIrCIZ_AQrODxDgpA4T3u_RHUluJa5GxjjowIiAnorIOzJ00jxqT-kWFeRhGEUwkgziwELWkUajPWnwsFgHEtYiYMS8pi-sRnAn7ZULxaREskXais7n/s1600/Desert.jpg"></li><li title="" style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0BcAdWiXwF76U9iBjOXA2GCnHUnD0YZXF5mxjUO9sHdLc90Fz4-SBxGQ2bfSjg4Rbhd2zoF8B-j7dB4DDuTWqIzerXw6sOuwUznVZsjcV7F6LIAYcKUz2CduuwOgLcyY8aR7gnOFf0SYx/s1600/Hydrangeas.jpg);"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0BcAdWiXwF76U9iBjOXA2GCnHUnD0YZXF5mxjUO9sHdLc90Fz4-SBxGQ2bfSjg4Rbhd2zoF8B-j7dB4DDuTWqIzerXw6sOuwUznVZsjcV7F6LIAYcKUz2CduuwOgLcyY8aR7gnOFf0SYx/s1600/Hydrangeas.jpg"></li><li title="" style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOk7IQ-PHjdVYiSlSxgBnqEKqRjP4vlqrTuRR3MhiDE-ezHjdvKBhkXMLIIo7cCv_w7H74fHYrWitl7Ufk8Gig0q8fGU8Nx5LseFNACS9-wGi82x7FHouy8U-11J8QLW0JVa7LwdoR8oq6/s1600/Penguins.jpg);"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOk7IQ-PHjdVYiSlSxgBnqEKqRjP4vlqrTuRR3MhiDE-ezHjdvKBhkXMLIIo7cCv_w7H74fHYrWitl7Ufk8Gig0q8fGU8Nx5LseFNACS9-wGi82x7FHouy8U-11J8QLW0JVa7LwdoR8oq6/s1600/Penguins.jpg"></li></ul><div id="gallery-caption1"></div></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 { position: absolute;color: #000;font-weight: bold;background: #FFFFFF; font-size: 16px; bottom: 0px;}</span><br></style></blockquote><br><span style="color: #3d85c6; font-size: large;"><b>Style 2</b></span><br><script type="text/javascript">//<![CDATA[ var gal = { init : function() { if (!document.getElementById || !document.createElement || !document.appendChild) return false; if (document.getElementById('image-gallery2')) document.getElementById('image-gallery2').id = 'jquery-gallery2'; var li = document.getElementById('jquery-gallery2').getElementsByTagName('li'); li[0].className = 'active'; for (i=0; i<li.length; i++) { li[i].style.backgroundImage = 'url(' + li[i].getElementsByTagName('img')[0].src + ')'; li[i].title = li[i].getElementsByTagName('img')[0].alt; gal.addEvent(li[i],'click',function() { var im = document.getElementById('jquery-gallery2').getElementsByTagName('li'); for (j=0; j<im.length; j++) { im[j].className = ''; } this.className = 'active'; document.getElementById('gallery-caption2').innerHTML = this.title; }); } }, addEvent : function(obj, type, fn) { if (obj.addEventListener) { obj.addEventListener(type, fn, false); } else if (obj.attachEvent) { obj["e"+type+fn] = fn; obj[type+fn] = function() { obj["e"+type+fn]( window.event ); } obj.attachEvent("on"+type, obj[type+fn]); } } } gal.addEvent(window,'load', function() { gal.init(); }); //]]></script><style type="text/css">#image-gallery2 { display: none; } #jquery-gallery2 {padding:0;margin:0;list-style: none; width: 200px; } #jquery-gallery2 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; background-position: 50% 50%; cursor: pointer; border: 3px solid #fff; outline: 1px solid #ddd; margin-right: 10px; margin-bottom: 10px; opacity: .5;filter:alpha(opacity=50); float: left; display: block; } #jquery-gallery2 li img { position: absolute; top: 0px; left: 200px; display: none; } #jquery-gallery2 li.active img { display: block; width:370px; border: 3px solid #fff; outline: 1px solid #E3E3E3; } #jquery-gallery2 li.active, #jquery-gallery2 li:hover { outline-color: #bbb; opacity: .99;filter:alpha(opacity=99);} #gallery-caption2 { position: absolute; right: 50px;color: #000;background: #FFFFFF; font-weight:bold; font-size: 16px; top: 0px;} </style> <br><div style="height: 310px; margin-left: 80px; position: relative;"><ul id="jquery-gallery2"><li class="active" title="Test title" style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh68ks8limqjbrmZqONY5PwUWqFJj-faAm_izCvzBqRuv89NQTQfJTtbAhlW-Jk1LJsZ9_FRl98aC40WvOKIrQHttPHFlNdb24c4Q0dOUW3DzHCDJwhEGZV9xF3GRQyPJ3IKBW3-MRu3l7T/s1600/Tulips.jpg);"><img alt="Test title" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh68ks8limqjbrmZqONY5PwUWqFJj-faAm_izCvzBqRuv89NQTQfJTtbAhlW-Jk1LJsZ9_FRl98aC40WvOKIrQHttPHFlNdb24c4Q0dOUW3DzHCDJwhEGZV9xF3GRQyPJ3IKBW3-MRu3l7T/s1600/Tulips.jpg"></li><li title="Test" style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTd1ZxSr51yGmvj_n0_LgiJxrwXwztWmA4c86oR_7i2xutMWD2NfVMyRojmngLwarCJYvj-fDkfpgdJ3GipPFdHo_VwNbRaEdQe2BiyrToR1R7WA_Z3bkpLy_UPpkBqWfaAx8ozUhRAEbt/s1600/Chrysanthemum.jpg);"><img alt="Test" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTd1ZxSr51yGmvj_n0_LgiJxrwXwztWmA4c86oR_7i2xutMWD2NfVMyRojmngLwarCJYvj-fDkfpgdJ3GipPFdHo_VwNbRaEdQe2BiyrToR1R7WA_Z3bkpLy_UPpkBqWfaAx8ozUhRAEbt/s1600/Chrysanthemum.jpg"></li><li title="" style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhquOh0PGDNTDHVFl0X0SYfel6fxBIrCIZ_AQrODxDgpA4T3u_RHUluJa5GxjjowIiAnorIOzJ00jxqT-kWFeRhGEUwkgziwELWkUajPWnwsFgHEtYiYMS8pi-sRnAn7ZULxaREskXais7n/s1600/Desert.jpg);"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhquOh0PGDNTDHVFl0X0SYfel6fxBIrCIZ_AQrODxDgpA4T3u_RHUluJa5GxjjowIiAnorIOzJ00jxqT-kWFeRhGEUwkgziwELWkUajPWnwsFgHEtYiYMS8pi-sRnAn7ZULxaREskXais7n/s1600/Desert.jpg"></li><li title="" style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0BcAdWiXwF76U9iBjOXA2GCnHUnD0YZXF5mxjUO9sHdLc90Fz4-SBxGQ2bfSjg4Rbhd2zoF8B-j7dB4DDuTWqIzerXw6sOuwUznVZsjcV7F6LIAYcKUz2CduuwOgLcyY8aR7gnOFf0SYx/s1600/Hydrangeas.jpg);"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0BcAdWiXwF76U9iBjOXA2GCnHUnD0YZXF5mxjUO9sHdLc90Fz4-SBxGQ2bfSjg4Rbhd2zoF8B-j7dB4DDuTWqIzerXw6sOuwUznVZsjcV7F6LIAYcKUz2CduuwOgLcyY8aR7gnOFf0SYx/s1600/Hydrangeas.jpg"></li><li title="" style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOk7IQ-PHjdVYiSlSxgBnqEKqRjP4vlqrTuRR3MhiDE-ezHjdvKBhkXMLIIo7cCv_w7H74fHYrWitl7Ufk8Gig0q8fGU8Nx5LseFNACS9-wGi82x7FHouy8U-11J8QLW0JVa7LwdoR8oq6/s1600/Penguins.jpg);"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOk7IQ-PHjdVYiSlSxgBnqEKqRjP4vlqrTuRR3MhiDE-ezHjdvKBhkXMLIIo7cCv_w7H74fHYrWitl7Ufk8Gig0q8fGU8Nx5LseFNACS9-wGi82x7FHouy8U-11J8QLW0JVa7LwdoR8oq6/s1600/Penguins.jpg"></li></ul><div id="gallery-caption2"></div></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 { position: absolute; right: 50px;color: #000;background: #FFFFFF;font-weight: bold; font-size: 16px; top: 0px;}</span><br></style></blockquote><i>Note: The <b>display: none;</b> of the first ID (<b>#image-gallery</b>) is to prevent images appear with their actual size before they go inside the gallery container, this is while loading the code. 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 count the width of the thumbnail (80px) plus the margins between them. The left declaration of <b>#jquery-gallery li img</b> is to move the larger thumbnail that shows on mouse click so that it won't overlap with the smaller thumbnails. </i><br></div><div style="clear: both: margin: 10px 5px; display: none;"></div><div id="adsmiddle27852508929283257884"><b><span style="color: #3d85c6;">Step 5.</span></b> Paste the code of the chosen style just above the <b></head></b> tag.<br><br><b><span style="color: #3d85c6;">Step 6.</span></b> Now above the same <b></head></b> 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 look 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 when 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><span style="color: #3d85c6;"><b>Step 7.</b> </span>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, so that it will avoid side effects of other pre-existing positions.<br><br><b><span style="color: #3d85c6;">Step 8.</span></b> Paste the below HTML to where you want to display the gallery by going either to <b>Layout</b> and adding a new gadget (click on the Add a gadget link and choose HTML/JavaScript), 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 the "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 add links to your images, 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 <b><span style="color: blue;">page-URL</span></b> 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 your widget or publish your page and you're done! </div><script type="text/javascript">var obj0=document.getElementById("adsmiddle17852508929283257884"); var obj1=document.getElementById("adsmiddle27852508929283257884"); var s=obj1.innerHTML; var r=s.search(/\x3C!-- adsense --\x3E/igm); if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+16);} </script></div>

Blog Design 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 »

Create a CSS Image Slider with Thumbnails for Blogger

<div class="post-body"><div id="adsmiddle13089627928082240256"><b>Image galleries/sliders</b> are particularly useful for photoblogs, but they could also serve those who occasionally need a gadget like this. As we saw <a href="/2015/07/how-to-add-thumbnail-imagephoto-gallery.html">in a previous tutorial</a>, on the top of the block we had some small thumbnails which were enlarged at the bottom each time an image was selected. The difference is that there we had to click the thumbnail in order to show a larger version and that was acquired with <b>JavaScript</b>.<br><br>This time will use only <b>hover</b> and <b>CSS</b>.<br><br><div class="ssmainhide" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiac4ly1tw0E7ZK9oS7EaPhm2VnimF_j95wi3RY5pzcqYS6oB1wUij53qe19jiskdYlGMUZ6Fyjk-4VKad7vQBZStXrWqzSrSBYJ-0BcWB8JWKUUCQpQLaHDwjcakjHYScsVY1WBYWnGHWI/s1600/how-to-add-image-slider-for-blogger-using-css.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="267" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiac4ly1tw0E7ZK9oS7EaPhm2VnimF_j95wi3RY5pzcqYS6oB1wUij53qe19jiskdYlGMUZ6Fyjk-4VKad7vQBZStXrWqzSrSBYJ-0BcWB8JWKUUCQpQLaHDwjcakjHYScsVY1WBYWnGHWI/s320/how-to-add-image-slider-for-blogger-using-css.png" width="320"></a></div><span style="color: #3d85c6; font-size: large;"><b>DEMO</b></span><br><style type="text/css">.image-container { position: relative; width: 640px; height: 530px; margin: 0 auto; text-align:center; overflow: hidden; } .image-container a { display: inline; text-decoration: none; } /* Mini-thumbnails style */ .mini-thumbnail { width: 18%; /* mini-thumbnails width */ margin:1px; opacity: 1; -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.5); -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.5); box-shadow: 0px 0px 3px rgba(0,0,0,0.5); } /* Style for the main thumbnail */ .large-thumbnail { position: absolute; width: 100%; top: 800px; left: 20px; text-align: center; display: block; -webkit-transition: top 1s ease; -moz-transition: top 1s ease; -o-transition: top 1s ease; -ms-transition: top 1s ease; transition: top 1s ease; } .feature { top: 110px; width: 100%; opacity: .3; left: 20px; } /* border for the mini-thumbnail selected */ a:hover .mini-thumbnail { opacity: .5; -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.5); -moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.5); box-shadow: 0px 0px 10px rgba(0,0,0,0.5); } /* transition effects for the selected image */ a:hover .large-thumbnail { top: 110px; width: 100%; z-index:3; opacity: 1; -webkit-transition: top 1s ease; -moz-transition: top 1s ease; -o-transition: top 1s ease; -ms-transition: top 1s ease; transition: top 1s ease; } </style> <br><div class="image-container" style="margin-left: 45px;"><a href="javascript:void(0);"><img class="mini-thumbnail" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh68ks8limqjbrmZqONY5PwUWqFJj-faAm_izCvzBqRuv89NQTQfJTtbAhlW-Jk1LJsZ9_FRl98aC40WvOKIrQHttPHFlNdb24c4Q0dOUW3DzHCDJwhEGZV9xF3GRQyPJ3IKBW3-MRu3l7T/s1600/Tulips.jpg"><img class="large-thumbnail" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh68ks8limqjbrmZqONY5PwUWqFJj-faAm_izCvzBqRuv89NQTQfJTtbAhlW-Jk1LJsZ9_FRl98aC40WvOKIrQHttPHFlNdb24c4Q0dOUW3DzHCDJwhEGZV9xF3GRQyPJ3IKBW3-MRu3l7T/s1600/Tulips.jpg"></a><a href="javascript:void(0);"><img class="mini-thumbnail" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTd1ZxSr51yGmvj_n0_LgiJxrwXwztWmA4c86oR_7i2xutMWD2NfVMyRojmngLwarCJYvj-fDkfpgdJ3GipPFdHo_VwNbRaEdQe2BiyrToR1R7WA_Z3bkpLy_UPpkBqWfaAx8ozUhRAEbt/s1600/Chrysanthemum.jpg"><img class="large-thumbnail" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTd1ZxSr51yGmvj_n0_LgiJxrwXwztWmA4c86oR_7i2xutMWD2NfVMyRojmngLwarCJYvj-fDkfpgdJ3GipPFdHo_VwNbRaEdQe2BiyrToR1R7WA_Z3bkpLy_UPpkBqWfaAx8ozUhRAEbt/s1600/Chrysanthemum.jpg"></a><a href="javascript:void(0);"><img class="mini-thumbnail" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhquOh0PGDNTDHVFl0X0SYfel6fxBIrCIZ_AQrODxDgpA4T3u_RHUluJa5GxjjowIiAnorIOzJ00jxqT-kWFeRhGEUwkgziwELWkUajPWnwsFgHEtYiYMS8pi-sRnAn7ZULxaREskXais7n/s1600/Desert.jpg"><img class="large-thumbnail" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhquOh0PGDNTDHVFl0X0SYfel6fxBIrCIZ_AQrODxDgpA4T3u_RHUluJa5GxjjowIiAnorIOzJ00jxqT-kWFeRhGEUwkgziwELWkUajPWnwsFgHEtYiYMS8pi-sRnAn7ZULxaREskXais7n/s1600/Desert.jpg"></a><a href="javascript:void(0);"><img class="mini-thumbnail" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0BcAdWiXwF76U9iBjOXA2GCnHUnD0YZXF5mxjUO9sHdLc90Fz4-SBxGQ2bfSjg4Rbhd2zoF8B-j7dB4DDuTWqIzerXw6sOuwUznVZsjcV7F6LIAYcKUz2CduuwOgLcyY8aR7gnOFf0SYx/s1600/Hydrangeas.jpg"><img class="large-thumbnail" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0BcAdWiXwF76U9iBjOXA2GCnHUnD0YZXF5mxjUO9sHdLc90Fz4-SBxGQ2bfSjg4Rbhd2zoF8B-j7dB4DDuTWqIzerXw6sOuwUznVZsjcV7F6LIAYcKUz2CduuwOgLcyY8aR7gnOFf0SYx/s1600/Hydrangeas.jpg"></a><a href="javascript:void(0);"><img class="mini-thumbnail" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOk7IQ-PHjdVYiSlSxgBnqEKqRjP4vlqrTuRR3MhiDE-ezHjdvKBhkXMLIIo7cCv_w7H74fHYrWitl7Ufk8Gig0q8fGU8Nx5LseFNACS9-wGi82x7FHouy8U-11J8QLW0JVa7LwdoR8oq6/s1600/Penguins.jpg"><img class="large-thumbnail" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOk7IQ-PHjdVYiSlSxgBnqEKqRjP4vlqrTuRR3MhiDE-ezHjdvKBhkXMLIIo7cCv_w7H74fHYrWitl7Ufk8Gig0q8fGU8Nx5LseFNACS9-wGi82x7FHouy8U-11J8QLW0JVa7LwdoR8oq6/s1600/Penguins.jpg"></a> <a href="javascript:void(0);"><img class="large-thumbnail feature" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuwHGU6BDpxDT5qTd8ZyUQXkKJeNz1XnOrIyrE0ez32aGgMi4F41pLK8iEPv5KsilTFqjW2vPs45L5ga1ivk9Tu9ZCoMtyceRtsg3NA3wNKvUZCL1eHE8AUGnmqrj0d0z4FQLEn5REV0Ms/s1600/image-gallery-for-blogger.png"></a> </div><h3><span style="color: #3d85c6;">How to Add A CSS Image Slider with Thumbnails to Blogger</span></h3><br><b><span style="color: #3d85c6;">Step 1.</span></b> Log in to your <a href="http://blogger.com/" rel="nofollow">Blogger Dashboard</a> and go to <b>Template</b> > <b>Edit HTML</b><br><br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiesVi7T58As94NJd8-JyIaDFMA4zoElG743c_tdabE8Zpyprmh475tgzV89MWHS55ibnkvp8Up45EAzyTBict2v4Ai0zMP7vNnLjHzEMJu9iGCeOoi7PS2jgMQ5qQEE4nvidasKz7Y-wB9/s1600/blogger_blogspot_template_edit_html_tutorial.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="256" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiesVi7T58As94NJd8-JyIaDFMA4zoElG743c_tdabE8Zpyprmh475tgzV89MWHS55ibnkvp8Up45EAzyTBict2v4Ai0zMP7vNnLjHzEMJu9iGCeOoi7PS2jgMQ5qQEE4nvidasKz7Y-wB9/s320/blogger_blogspot_template_edit_html_tutorial.png" width="320"></a></div><br><b><span style="color: #3d85c6;">Step 2.</span></b> Click anywhere inside the code area and press the CTRL + F keys to open the Blogger search box<br><div class="separator" style="clear: both; text-align: center;"></div><br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix1fH6VmI_JHMcQdEyJ4MV4XbznQ-NuGVMWRDifUZQm2p067Ovl-yJdaDmZylw9ftTPKU-Sx5fXrhs6TCYv8ty5gYIZ_MjuM4VJhdzi5wvSZLCLyOcZVpMdTpm58P2q7OnNDvTZ6CBDNRo/s1600/blogger-template-search-box.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="105" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix1fH6VmI_JHMcQdEyJ4MV4XbznQ-NuGVMWRDifUZQm2p067Ovl-yJdaDmZylw9ftTPKU-Sx5fXrhs6TCYv8ty5gYIZ_MjuM4VJhdzi5wvSZLCLyOcZVpMdTpm58P2q7OnNDvTZ6CBDNRo/s320/blogger-template-search-box.png" width="320"></a></div><br><b><span style="color: #3d85c6;">Step 3.</span></b> Paste the <b></head></b> tag inside the search box and hit Enter.<br><br><b><span style="color: #3d85c6;">Step 4.</span></b> Just above the <b></head></b> tag, add this code:<br><blockquote class="tr_bq"><style type='text/css'><br>.image-container {<br>position: relative;<br>width: 640px;<br>height: 530px;<br>margin: 0 auto;<br>text-align:center;<br>overflow: hidden;<br>}<br>.image-container a {<br>display: inline;<br>text-decoration: none;<br>}<br><span style="color: #6aa84f;">/* Mini-thumbnails style */</span><br>.mini-thumbnail {<br>width: 18%; <span style="color: #6aa84f;">/* mini-thumbnails width */</span><br>margin:1px;<br>opacity: 1;<br>-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.5);<br>-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.5);<br>box-shadow: 0px 0px 3px rgba(0,0,0,0.5);<br>}<br><span style="color: #6aa84f;">/* Style for the main thumbnail */</span><br>.large-thumbnail {<br>position: absolute;<br>width: 100%;<br>top: 800px;<br>margin:0 auto;<br>text-align: center;<br>display: block;<br>-webkit-transition: top 1s ease;<br>-moz-transition: top 1s ease;<br>-o-transition: top 1s ease;<br>-ms-transition: top 1s ease;<br>transition: top 1s ease;<br>}<br>.feature {<br>top: 110px;<br>width: 100%;<br>opacity: .3;<br>}<br><span style="color: #6aa84f;">/* style for the selected mini-thumbnail */</span><br>a:hover .mini-thumbnail {<br>opacity: .5;<br>-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.5);<br>-moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.5);<br>box-shadow: 0px 0px 10px rgba(0,0,0,0.5);<br>}<br><span style="color: #6aa84f;">/* transition effects for the selected image */</span><br>a:hover .large-thumbnail {<br>top: 110px;<br>width: 100%;<br>z-index:3;<br>opacity: 1;<br>-webkit-transition: top 1s ease;<br>-moz-transition: top 1s ease;<br>-o-transition: top 1s ease;<br>-ms-transition: top 1s ease;<br>transition: top 1s ease;<br>}<br></style></blockquote>Here we set a specific <b>height </b>(530px) and <b>width</b> (640px) so that we can slide an image out of the bounds of the container and have it be hidden (<b>overflow:hidden</b>);<br>The <b>absolute</b> positioning on the larger thumbnails (<b>.large-thumbnail</b>) pulls them out and places them specifically in the spot that we've chosen using a value of 800px for the <b>top</b> property;<br>The <b>mini-thumbnails</b> which are actually a second image remain all the time above in a static position and are altered only slightly in terms of style for distinguishing the active (<b>a:hover .mini-thumbnail</b>) on mouse over.<br></div><div style="clear: both: margin: 10px 5px; display: none;"></div><div id="adsmiddle23089627928082240256"><b><span style="color: #3d85c6;">Step 5.</span></b> Save the changes by clicking on the <b>Save template</b> button.<br><br>And finally, we need to add the HTML code.<br><br><b><span style="color: #3d85c6;">Step 6.</span></b> Paste the below HTML structure to where you want to display the gallery by going either to <b>Layout </b>and add a new gadget (click on the <b>Add a gadget</b> link and choose <b>HTML/JavaScript</b>), or inside a post or page within the <b>HTML</b> section.<br><blockquote class="tr_bq"><div class="image-container"><br><a href="javascript:void(0);"><br><img class="mini-thumbnail" src="<span style="color: blue;">MINI-THUMB-URL1</span>" /><br><img class="large-thumbnail" src="<span style="color: blue;">LARGE-THUMB-URL1</span>" /><br></a><br><a href="javascript:void(0);"><br><img class="mini-thumbnail" src="<span style="color: blue;">MINI-THUMB-URL2</span>" /><br><img class="large-thumbnail" src="<span style="color: blue;">LARGE-THUMB-URL2</span>" /><br></a><br><a href="javascript:void(0);"><br><img class="mini-thumbnail" src="<span style="color: blue;">MINI-THUMB-URL3</span>" /><br><img class="large-thumbnail" src="<span style="color: blue;">LARGE-THUMB-URL3</span>" /><br></a><br><a href="javascript:void(0);"><br><img class="mini-thumbnail" src="<span style="color: blue;">MINI-THUMB-URL4</span>" /><br><img class="large-thumbnail" src="<span style="color: blue;">LARGE-THUMB-URL4</span>" /><br></a><br><a href="javascript:void(0);"><br><img class="mini-thumbnail" src="<span style="color: blue;">MINI-THUMB-URL5</span>" /><br><img class="large-thumbnail" src="<span style="color: blue;">LARGE-THUMB-URL5</span>" /><br></a><br><a href="javascript:void(0);"><br><img class="large-thumbnail feature" src="<span style="color: blue;">LARGE-THUMB-URL1</span>" /><br></a><br></div></blockquote>In this example we left the link empty (<b>javascript:void(0);</b>) but you can add one if you want - just replace <b>javascript:void(0);</b> with the url of your page/post.<br>To add pics inside the image slider just replace <span style="color: blue;">MINI-THUMB-URL</span> and <span style="color: blue;">LARGE-THUMB-URL</span> texts with the URL of your images. <i>Note: The last <span style="color: blue;">LARGE-THUMB-URL1</span> should be replaced with the URL of the default image that will appear on your slider. </i><br><br>If you need more information on how to get the URL of images, I recommend you reading this tutorial: <br><a href="/2015/07/upload-images-and-get-url-of-image_7.html">How to Upload Images and Get the URL</a><br><br>Finally, save your widget/gadget or publish your page/post and that's it! Enjoy :) </div><script type="text/javascript">var obj0=document.getElementById("adsmiddle13089627928082240256"); var obj1=document.getElementById("adsmiddle23089627928082240256"); var s=obj1.innerHTML; var r=s.search(/\x3C!-- adsense --\x3E/igm); if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+16);} </script></div>

Blog Design Create a CSS Image Slider with Thumbnails for Blogger

Image galleries/sliders are particularly useful for photoblogs, but they could also serve those who occasionally need a gadget like this. A...

Read more »

How to Optimize Images for Better Search Engine Rankings

<div class="post-body"><div id="adsmiddle1782191479649909685"></div><div style="clear: both: margin: 10px 5px; display: none;"></div><div id="adsmiddle2782191479649909685">When search engines start indexing the pages on your site, they don't just focus on the writing. Web crawlers employed by services like Google and Bing shuffle through your site's structural code looking for any relevant information that they might offer to their customers. Some of the information includes things like backlinks, tags and even images.<br><br>Images make up a big part of any website. They help to excite the visual senses of readers and offer a little extra entertainment value. What most blog owners don't realize is that all of the photos that they upload to their site aren't confined to their site alone. Crawlers make sure that these images also show up within their respective search engines sites.<br><br>Image searches can have the effect of drawing in large numbers of new readers that were just looking through content in Google images. You can benefit from this traffic and increase your average subscriber by practicing image optimization.<br><br><div class="ssmainhide" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDwrMY4aizjL31G2AVGZOFuw4Ml38h-ygFdWvimDoJqVp2hD3gOCoaPflq7Fxscj9-0vKeedFnkbmaa-CLILRZ70c-nUIsFxkmTkbOnHnkTZf2-vM6xUTRZ79AY894fTVVRLcWyZNWYQnI/s1600/seo-image-optimization-for-blogger.png" imageanchor="1" margin-left:=""><img alt="seo image optimization" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDwrMY4aizjL31G2AVGZOFuw4Ml38h-ygFdWvimDoJqVp2hD3gOCoaPflq7Fxscj9-0vKeedFnkbmaa-CLILRZ70c-nUIsFxkmTkbOnHnkTZf2-vM6xUTRZ79AY894fTVVRLcWyZNWYQnI/s1600/seo-image-optimization-for-blogger.png" title="Optimize Images for SEO"></a></div><h2>Image Optimization Tip #1: Alt Tags & File Names</h2>Visitors may love images, but computers don't. Computers are designed to do what you tell them without violating any of the parameters. When web crawlers come across images on a website, they really don't know what to do with it because they are made to collect information, not interpret it. The solution to this problem is to optimize images and appropriately label your alt tags so that they display the correct content when someone goes to look for it.<br><br>For example, let's say you upload a picture of your dog, and label the "alt" tag by the dog's name, 'Frank'. The web crawler is going to read the alt tag without ever realizing it's a picture of a dog; therefore, the crawler will come to the conclusion that it needs to display the image when someone run a search for 'Frank'. <br><br>The minor word choice mistakes may not affect the operations of your website, or how your image is displayed, but it will affect the search results of others and the traffic that comes into your website. Whereas you may have been able to attract the dog lovers in the world using image optimization of your dog tagged 'dog', you are now drawing in crowds searching for their uncle "Frank". <br><br>To include the alt tag, simply add <span style="color: #0b5394;">alt="this is your alt text"</span> to your image tag. Here's an example:<br><blockquote><img src="pug-dog.jpg" <span style="color: #0b5394;">alt="frank dog"</span> /></blockquote>But you don't have to touch the html code of the image. Once the picture is uploaded, click on it and you will see the "Properties" setting. Add the alt text inside the box and hit OK:<br><br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzUqbPQZjX0bQKZognE8bRotl0OJ9allRp6sXTdafUXCIqhGwJhlXABQSnYDw3j5smesCexTZb_trDqyfjOU7WHymLj0g9DC-rD6ujuBcrtpXdww93jEvsu_sCgoSiLDnAus1Cs3GK0x5M/s1600/frank-dog-seo-alt-tag-to-image.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="image alt tag" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzUqbPQZjX0bQKZognE8bRotl0OJ9allRp6sXTdafUXCIqhGwJhlXABQSnYDw3j5smesCexTZb_trDqyfjOU7WHymLj0g9DC-rD6ujuBcrtpXdww93jEvsu_sCgoSiLDnAus1Cs3GK0x5M/s1600/frank-dog-seo-alt-tag-to-image.png" title="optimize image for seo"></a></div><br>This goes the same for file names on a website. You need to optimize images and file names on everything that you decide to save to your website directory so that this information can be appropriately indexed and be used as a search term. You could name the file of your dog Frank, "pug-dog.jpg", which would encourage the search engine to add Frank into searches being performed with the phrase 'pug dog'. Alt tags and file names play an important interpretation role between you and the machine that makes your blog possible.<br><br><h2>Image Optimization Tip #2: Add A Caption</h2>After uploading your images, you should always add a caption to the image, so that average browser understands what they're looking at. This gives your website a more professional appearance and will help to keep people on your page.<br><br>Not everyone that comes across your picture using a Google Image search is looking for your blog. Maybe they just want to download the image, and that's all you'll ever get from them. The important thing is that they found your photo relevant to their search, and decided to navigate to your site in order to save it for their own use.<br><br>The longer those users stay on the site, the better it looks for you because it plays a role in the "bounce rate". Bounce rate refers to when someone clicks on a link, realizes it's not what they're looking for, and then immediately goes back to the search engine. If you can reduce the number of times that this happens by providing captions and intriguing content that will make people want to stick around, your SEO ranking will improve.<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/AVvXsEhelqX_Bv1d4DGv4cHjiORLxlF1tAql-Pfmii9icWlJy5V8ouzDIxK1dYstZO3nOJql2KGt7dZegfAJEyZUU-i9CutQEoKe2QeianFL4-sYe6dmuHmgnrqLInc7yHo5zx5LqiWNsC7L_DKO/s1600/seo-blogger-image-caption.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="blogger image caption" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhelqX_Bv1d4DGv4cHjiORLxlF1tAql-Pfmii9icWlJy5V8ouzDIxK1dYstZO3nOJql2KGt7dZegfAJEyZUU-i9CutQEoKe2QeianFL4-sYe6dmuHmgnrqLInc7yHo5zx5LqiWNsC7L_DKO/s1600/seo-blogger-image-caption.png" title="optimize images for seo"></a></td></tr><tr><td class="tr-caption" style="text-align: center;">Image caption and SEO</td></tr></tbody></table><br><h2>Image Optimization Tip #3: File Size</h2>Improving your bounce rate can be tough because the attention span of the everyday Internet user is incredibly short. It may be as short as 8 seconds. High bounce back rates and slow loading sites can be the death of most blogs because no one wants to wait for the content to load. By the time your website finally loads with the content that you need, they could have easily visited two or more sites and found what they need from someone who was better prepared to handle their traffic.<br><br>Optimize images so that you are able to keep the file size as small as possible while retaining the quality of the photo. Images taken from DSLR camera - although they may look great - can be up to 1.4 MB in size if you take them directly off your camera and upload them on your blog. This type of space is massive for any everyday blog, and will hurt your SEO ratings.<br><br>Use Photoshop or one of many online services like Google Picasa to rescale your images or reduce the file size. Two services that can perform this ability for free and do a great job are <a href="http://www.smushit.com/ysmush.it" rel="nofollow" style="color: blue;" target="_blank">Yahoo's Smushit </a>and <a href="https://kraken.io/" rel="nofollow" style="color: blue;" target="_blank">Kraken</a>. When you access either site, they will allow you to upload the picture on the site and download the new image optimization versions for use on your Blogger site.<br><br><h3>Putting It All Together</h3>At the end of the day, the quality of your site and overall SEO ranking isn't just about what you have to say. It's the entire package of what you have to offer. Optimize images every chance you get and use the strategies discussed above. Now that you know that you might have been neglecting images all along, you can make necessary adjustments and start to see even better results from all your hard work. </div><script type="text/javascript">var obj0=document.getElementById("adsmiddle1782191479649909685"); var obj1=document.getElementById("adsmiddle2782191479649909685"); var s=obj1.innerHTML; var r=s.search(/\x3C!-- adsense --\x3E/igm); if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+16);} </script></div>

Blog Design How to Optimize Images for Better Search Engine Rankings

When search engines start indexing the pages on your site, they don't just focus on the writing. Web crawlers employed by services like ...

Read more »

Add Author's Profile Picture and Name in Multi Author Blog

<div class="post-body"><div id="adsmiddle16563153323269856029">In this tutorial we will see how to add the author's profile picture and name on a Blogger blog just below the post title. This can make your blog not only look more personal but attaching an image to your blog posts in Blogger can help visitors identify, and perhaps gain a level of trust with you. Also, this could be a great addition to blogs with multiple authors, since the info for each of the publisher will be shown below the titles of their respective posts and this way, they will get the proper credit for their work. <br><div class="ssmainhide" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS7n1dWLmO6wxEX2t6oM59-qCHLsxfg2ystmAtUoIQsRDegggfTh4meEsXxWhJupy9OnjAGN1Klepmw79AHQ96kDh2NnQsQRHIceXRwuctzq09JVxwR6SHu1AcJ9ooUSnxQcYB8ONWu6ld/s1600/display-author-profile-picture-and-name-below-blogger-posts.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="multi-author blog, blogger tricks" border="0" height="216" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS7n1dWLmO6wxEX2t6oM59-qCHLsxfg2ystmAtUoIQsRDegggfTh4meEsXxWhJupy9OnjAGN1Klepmw79AHQ96kDh2NnQsQRHIceXRwuctzq09JVxwR6SHu1AcJ9ooUSnxQcYB8ONWu6ld/s1600/display-author-profile-picture-and-name-below-blogger-posts.png" title="show author's profile picture and name in multi author blog" width="320"></a></div><br><b>Related:</b> <a href="/2015/07/how-to-add-or-invite-multiple-authors_7.html" style="color: blue;" target="_blank">How to Add or Invite Multiple Authors on Blogger</a><br><br><h3><b><span style="color: #3d85c6;">Adding the Author's Profile Picture / Avatar and Name in Blogger</span></b></h3><b><span style="color: #3d85c6;">Step 1.</span></b> From the <a href="http://blogger.com/" rel="nofollow" style="color: blue;">Blogger Dashboard</a>, go to "Template" and click the "Edit HTML" button.<br><br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiesVi7T58As94NJd8-JyIaDFMA4zoElG743c_tdabE8Zpyprmh475tgzV89MWHS55ibnkvp8Up45EAzyTBict2v4Ai0zMP7vNnLjHzEMJu9iGCeOoi7PS2jgMQ5qQEE4nvidasKz7Y-wB9/s1600/blogger_blogspot_template_edit_html_tutorial.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="256" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiesVi7T58As94NJd8-JyIaDFMA4zoElG743c_tdabE8Zpyprmh475tgzV89MWHS55ibnkvp8Up45EAzyTBict2v4Ai0zMP7vNnLjHzEMJu9iGCeOoi7PS2jgMQ5qQEE4nvidasKz7Y-wB9/s1600/blogger_blogspot_template_edit_html_tutorial.png" width="320"></a></div><br><b><span style="color: #3d85c6;">Step 2.</span></b> Click anywhere inside the code area and press the CTRL + F keys to open the search box. Paste the following code inside the search box, then hit Enter to find it:<br><blockquote class="tr_bq"><span class='post-author vcard'></blockquote>Just below this line is the rest of code, which should look something like this:<br><blockquote class="tr_bq">              <span style="background-color: yellow;"><span class='post-author vcard'></span><br>                <b:if cond='data:top.showAuthor'><br>                  <b:if cond='data:post.authorProfileUrl'><br>                    <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'><br>                      <meta expr:content='data:post.authorProfileUrl' itemprop='url'/><br>                      <a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'><br>                        <span itemprop='name'><data:post.author/></span><br>                      </a><br>                    </span><br>                  <b:else/><br>                    <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'><br>                      <span itemprop='name'><data:post.author/></span><br>                    </span><br>                  </b:if><br>                <span style="background-color: yellow;"></b:if></span>  <br><span style="background-color: yellow;"></span></span></blockquote><b>Note:</b> If you are using a custom template, it could look something like this:<br><blockquote class="tr_bq"><span style="background-color: yellow;"><span class='post-author vcard'> </span><br><b:if cond='data:top.showAuthor'> <br><data:top.authorLabel/> <br><span class='fn'><data:post.author/> <br></span> <br><span style="background-color: yellow;"></b:if> <br></span></span></blockquote><b><span style="color: #3d85c6;">Step 3. </span></b>Now that you found the code, delete it. Please note that it should start and end with the tags marked in yellow. This code is repeated two times and you will need to remove both occurrences.<br><br><b><span style="color: #3d85c6;">Step 4. </span></b>Next, search for this line (you'll find it twice and you should stop at the second one):<br><blockquote class="tr_bq"><div class='post-header-line-1'/></blockquote><b><span style="color: #3d85c6;">Step 5.</span></b> Just below the line, paste the following code:<br><blockquote class="tr_bq"><span class='post-author vcard'><br><b:if cond='data:post.author == &quot;<span style="color: #cc0000;"><b>AuthorName</b></span>&quot;'> <br><span class='author'><a href='<span style="color: blue;">Author-Profile-URL</span>'><img src='<span style="color: blue;">Author-Image-URL</span>'/></a></span><br></b:if> <br>        <i><span style="color: #38761d;"><b><b:if cond='data:top.showAuthor'></b></span></i><br>          <data:top.authorLabel/><br>            <b:if cond='data:post.authorProfileUrl'><br>              <span class='fn'><br>                <a expr:href='data:post.authorProfileUrl' itemprop='author' rel='author' title='author profile'><br>                  <data:post.author/><br>                </a><br>              </span><br>            <b:else/><br>              <span class='fn'><data:post.author/></span><br>            </b:if><br>        </b:if><br>      </span></blockquote>Replace the <b><span style="color: #cc0000;">AuthorName</span></b> text with the EXACT name that appears on the Blogger profile, i.e., the one that appears in the posts or comments. If it is added in a different way, Blogger will not recognize the username, nor the image and the code will not work.<br></div><div style="clear: both: margin: 10px 5px; display: none;"></div><div id="adsmiddle26563153323269856029">To display the author's pic, add the URL of the author's Blogger profile and the image URL by replacing the text in blue. I recommend you to use an image with a maximum height of 40px and 40px wide. Once done, the photo of the author will appear next to the "posted by" text just below the post title.<br><br>Now for those who maintain a blog with more than one author, you will need to add the following code just above <span style="color: #38761d;"><b><i><b:if cond='data:top.showAuthor'></i></b></span><br><blockquote class="tr_bq"><b:if cond='data:post.author == &quot;<b><span style="color: #cc0000;">AuthorName2</span></b>&quot;'> <br><span class='author'><a href='<span style="color: blue;">Author2-Profile-URL</span>'><img src='<span style="color: blue;">Author2-Image-URL</span>'/></a></span><br></b:if> </blockquote>If you have more than two authors, repeat this block of code for each author that you want to add.<br><br>Let's go ahead and add the CSS styles...<br><br><b><span style="color: #3d85c6;">Step 6.</span></b> Search (CTRL + F) this tag:<br><blockquote class="tr_bq">]]></b:skin></blockquote>Just above the ]]></b:skin> tag, paste the following code:<br><blockquote class="tr_bq">.post-header {<br>width: 100%;<br>padding: 2px 5px;<br>margin: 5px;<br>clear: both;<br>float: left;<br>}<br>.author img{<br>float: left;<br>margin: 0px 5px 10px 0px;<br>max-width:100%;<br>height:<b><span style="color: #cc0000;">45px</span></b>; <br>border-radius: 10px;<br>}<br>.post-author{<br>color:#777;<br>font-size: 13px;<br>font-style: italic;<br>}<br>.post-author a {<br>color:#777; }</blockquote><b>Note:</b> to change the size of avatar, increase/decrease the <span style="color: #cc0000;"><b>45px</b></span> value.<br><br><b><span style="color: #3d85c6;">Step 7.</span></b> Click on the "Save template" button and that's it. You should see now the profile picture and name of the Blogger author below the title of each post. </div><script type="text/javascript">var obj0=document.getElementById("adsmiddle16563153323269856029"); var obj1=document.getElementById("adsmiddle26563153323269856029"); var s=obj1.innerHTML; var r=s.search(/\x3C!-- adsense --\x3E/igm); if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+16);} </script></div>

Blog Design Add Author's Profile Picture and Name in Multi Author Blog

In this tutorial we will see how to add the author's profile picture and name on a Blogger blog just below the post title. This can make...

Read more »

Upload images and get the URL of the image

<div class="post-body"><div id="adsmiddle12555988110797770707"></div><div style="clear: both: margin: 10px 5px; display: none;"></div><div id="adsmiddle22555988110797770707">As each day there are lots of new users joining the world of blogging, it's important to discuss about some basic topics that would raise some recurring questions such as<b> how we could get the URL of an image</b>?<br><br>On the Internet there are many both free as well as paid web hosting services where we can <b>host images</b>, but since we use Blogger, then there is nothing better than using the same hosting service that Google gives us, which is Picasa.<br><br>The fastest way to upload an image is by going to the Blogger post editor. From your Blogger Dashboard, go to your blog, then click on the <b>New post</b> button. And preferably, from the <b>Edit HTML</b> tab, click on the image icon.<br><br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3AwiJcWiYA6ErEkRX9syt8jOl2B4FoefiOxE3LNBNCGoPSQrme2S6IIlcBeYcb4ypWVSG8TLL-nJhorM0SZoipQIucL7-Wb64A5mbLbstbCxOCCi-FRle9Dq_9Oi4VrMSEqFDjJAOZd8s/s1600/upload-image-on-blogger-blogspot.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3AwiJcWiYA6ErEkRX9syt8jOl2B4FoefiOxE3LNBNCGoPSQrme2S6IIlcBeYcb4ypWVSG8TLL-nJhorM0SZoipQIucL7-Wb64A5mbLbstbCxOCCi-FRle9Dq_9Oi4VrMSEqFDjJAOZd8s/s1600/upload-image-on-blogger-blogspot.png"></a></div><br>When the pop-up window opens, click on the <b>Choose files</b> button, browse for your image(s), double click or click on <b>Open </b>and then hit <b>Add selected</b>. <br><br>Once it has been uploaded, you will see in the post editor the html code of the image.<br><br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxGneLC9smugB_riNrKlzFkI3Jq1P5Dq6u0Zw4dUlcrd8qYlHHQ9Lqm1-WzaETPz2MWChZYHLwPBcdGKKUJp0KRnoEwHEHX39Q0ViZEmucqSMqMk3wpHjTFsVH92qE6RJGcRj_ldHGM3tH/s1600/upload-image-on-blogger-blogspot1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxGneLC9smugB_riNrKlzFkI3Jq1P5Dq6u0Zw4dUlcrd8qYlHHQ9Lqm1-WzaETPz2MWChZYHLwPBcdGKKUJp0KRnoEwHEHX39Q0ViZEmucqSMqMk3wpHjTFsVH92qE6RJGcRj_ldHGM3tH/s1600/upload-image-on-blogger-blogspot1.png"></a></div><br>That code contains the URL of your picture. The two URLs (Web addresses) that you will see, would look like this:<br><blockquote class="tr_bq"><a href="<span style="color: blue;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSyy_DfafMeyKXWMKF_pNTAZ8nzCRCOI0RxbWcomdBzD3gA5ob98aj6sFEIHZCvgHnQY5qsVq7P9I_QBZbbYsXZCPdKZ7SToVkwgL0VKESyVxNF9cSgyrpwIUDrveS34_16qxlXVsfJbGq/s1600/Bliss-Windows-XP.png</span>" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSyy_DfafMeyKXWMKF_pNTAZ8nzCRCOI0RxbWcomdBzD3gA5ob98aj6sFEIHZCvgHnQY5qsVq7P9I_QBZbbYsXZCPdKZ7SToVkwgL0VKESyVxNF9cSgyrpwIUDrveS34_16qxlXVsfJbGq/s320/Bliss-Windows-XP.png" /></a></blockquote>The first is the URL of the image that you need to copy. It's not required to publish this entry where you uploaded the photo; you could as well not publish it, leave it as Draft or delete it. The image will be saved anyway on PicasaWeb (unless when you removed the draft, you have also selected the option to remove the image).<br><br>You could also upload image directly from Picasa:<br>Just login to <a href="https://picasaweb.google.com/home" rel="nofollow" target="_blank">PicasaWeb</a>, select the album where you want to host the image, and click on <b>Add photos</b>.<br><br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0NJW2wRMDG114oTeWnoiiiW43kdydcBoplBc_J5T27LhmeVRS2IY6lt-ZF1X3timdtlX9pUVN6FvoOYC6z0QEyWiQ_A8E962lYF1a3UcFmNSDK-ZY4mpmeGPt_7VuFz5ThYXxPYeP9uF9/s1600/upload-pictures-on-picasaweb.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0NJW2wRMDG114oTeWnoiiiW43kdydcBoplBc_J5T27LhmeVRS2IY6lt-ZF1X3timdtlX9pUVN6FvoOYC6z0QEyWiQ_A8E962lYF1a3UcFmNSDK-ZY4mpmeGPt_7VuFz5ThYXxPYeP9uF9/s1600/upload-pictures-on-picasaweb.png"></a></div><br>Select the image from a location on your computer and upload it.<br><br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJmBZHP9__FOqKI96mnJxBXaPmTuUoHfRPakBcK-TnJhwZy4quF0L1OnjxRujw4Ak5lqg9QRKtv_IZJ7KDfqgFub6qtB0EQbq4o2LPM-0plQG-dx-B-BV5AJ5wKb-P4fVwXLd_JDSXHgQ4/s1600/upload-pictures-on-picasaweb1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJmBZHP9__FOqKI96mnJxBXaPmTuUoHfRPakBcK-TnJhwZy4quF0L1OnjxRujw4Ak5lqg9QRKtv_IZJ7KDfqgFub6qtB0EQbq4o2LPM-0plQG-dx-B-BV5AJ5wKb-P4fVwXLd_JDSXHgQ4/s1600/upload-pictures-on-picasaweb1.png"></a></div><br>After it has been uploaded, click <b>OK</b>. Now you will see the thumbnail, along with other photos if there are more.<br><br>To get the URL of the image from Picasa, click on the image to open in full size > right click on the picture and select the following option depending on the browser you are using...<br><br>On <b>Google Chrome</b> > select <b>Copy Image URL</b>:<br><br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPA73xmVR-uUztpjmJ1rhRdg-IpJicRNvFrWn8ADM1mjCG7QGHaHKdUZgAh0F39Cm2OyYMru4GkHj0SYst2RUMgzse77jbsfI2ehwkHo5BIcs9J5VX3LJylZ1Xa1LyulwtJhW0tJsKmkP9/s1600/how-to-get-image-url-address-on-google-chrome.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPA73xmVR-uUztpjmJ1rhRdg-IpJicRNvFrWn8ADM1mjCG7QGHaHKdUZgAh0F39Cm2OyYMru4GkHj0SYst2RUMgzse77jbsfI2ehwkHo5BIcs9J5VX3LJylZ1Xa1LyulwtJhW0tJsKmkP9/s1600/how-to-get-image-url-address-on-google-chrome.png"></a></div><br>If you are using <b>Mozilla Firefox</b>  > select <b>Copy Image Location</b>:<br><br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifL8lQii1tVVZwbkk9C8glw0PLA0UfaDnw_B8JEY9XIOzCBUQi9wMspgTYA4QzuQYF1x5oo7FkSKyvAIs45VFWhZxQH0g4dEuOGv-qKMERSr9jt6L0Mw5Cd7LK6QVfICfQqC7hpbgPEsYA/s1600/how-to-get-the-url-address-of-an-image-on-mozilla-firefox.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifL8lQii1tVVZwbkk9C8glw0PLA0UfaDnw_B8JEY9XIOzCBUQi9wMspgTYA4QzuQYF1x5oo7FkSKyvAIs45VFWhZxQH0g4dEuOGv-qKMERSr9jt6L0Mw5Cd7LK6QVfICfQqC7hpbgPEsYA/s1600/how-to-get-the-url-address-of-an-image-on-mozilla-firefox.png"></a></div><br>If you are using <b>Opera > </b>select <b>Copy Image URL</b>:<br><br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj66JhzeP4lTZe4AzowlqD-HV1nM3JWI5br9Pai8djhViAixUz8ZDc3Z6nA4bsyFCa2LI84YUWtr42fIGJx6IX1tuD8UDJ7UvAlib07uOTle3tHb16CbZxX_bDViftkKFCOgqbuzLkIUg8d/s1600/how-to-get-image-url-address-on-opera.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj66JhzeP4lTZe4AzowlqD-HV1nM3JWI5br9Pai8djhViAixUz8ZDc3Z6nA4bsyFCa2LI84YUWtr42fIGJx6IX1tuD8UDJ7UvAlib07uOTle3tHb16CbZxX_bDViftkKFCOgqbuzLkIUg8d/s1600/how-to-get-image-url-address-on-opera.png"></a></div><br>If you are using <b>Safari </b>> select<b> Copy Image Address</b>:<br><br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL4MlonhZITDlMVF3iGQM6WL5LdrkBN2F0gkFQGwGzCNeVsvr7-YnWRwT8Y4lqkeyDRG2fGb0crbiIdRHSZfGHSa9PisAal5Q-vTTYmWZ-A0exGCL5NIG7m87WnNmRhyDWSxVrH55MI7op/s1600/how-to-get-image-url-address-on-safari.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL4MlonhZITDlMVF3iGQM6WL5LdrkBN2F0gkFQGwGzCNeVsvr7-YnWRwT8Y4lqkeyDRG2fGb0crbiIdRHSZfGHSa9PisAal5Q-vTTYmWZ-A0exGCL5NIG7m87WnNmRhyDWSxVrH55MI7op/s1600/how-to-get-image-url-address-on-safari.png"></a></div><br>If you are using <b>Internet Explorer</b> (I hope not) > first select <b>Properties</b>, a window will open and there you will find the Address section from where you can select the URL of the image. Copy it:<br><br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0dsEONjNYeYuMyqAz0n1NRrIG-0uykLD21iLaF1UoixjZtaBxFk3XfnRrE2ds2Ggh6Y9MPucNvCQi4Vp27eF8b_b-S-BZKObfNd0bxlJET2LkuoYgZk0omR3rUSzlmIIvJZe7Xz2_-J9V/s1600/how-to-get-the-url-address-of-an-image-on-internet-explorer.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0dsEONjNYeYuMyqAz0n1NRrIG-0uykLD21iLaF1UoixjZtaBxFk3XfnRrE2ds2Ggh6Y9MPucNvCQi4Vp27eF8b_b-S-BZKObfNd0bxlJET2LkuoYgZk0omR3rUSzlmIIvJZe7Xz2_-J9V/s320/how-to-get-the-url-address-of-an-image-on-internet-explorer.png" width="260"></a></div><br>Once you have selected any of these options, you'll have the URL of the image copied to the clipboard. It's that easy!<br><br>Related: <a href="/2015/07/how-to-optimize-images-for-better_10.html" style="color: blue;" target="_blank">How to Optimize Images for Better SEO</a><br><br>Remember that all images you upload on Blogger, are stored in your Picasa account. So, if you find an image previously uploaded on your blog, just go to your Picasa account, select the album containing the name of your blog and there find the picture you need. The method to get the URL of the image is the same as explained above. </div><script type="text/javascript">var obj0=document.getElementById("adsmiddle12555988110797770707"); var obj1=document.getElementById("adsmiddle22555988110797770707"); var s=obj1.innerHTML; var r=s.search(/\x3C!-- adsense --\x3E/igm); if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+16);} </script></div>

Blog Design Upload images and get the URL of the image

As each day there are lots of new users joining the world of blogging, it's important to discuss about some basic topics that would rais...

Read more »

How to Create Static Pages in Blogger

<div class="post-body"><div id="adsmiddle11015511765478892518"><span style="font-size: large;"><b>What are Blogger static pages? </b></span><br><br>Blogger Static Pages allows you to create specific pages like About Me, Contact page, Privacy Policy etc. on stand-alone pages that are linked from your blog. The static pages basically are the same as post pages, but there are several things that make them different. One of the differences is that static pages don't appear in the home page, don't have a label, and are not indexed as archive pages.<br><br><div class="ssmainhide" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ0BnZ4m8UW_em00ss1I8-lUMj3uUnbw0rp7PEk2o3UAMQxUTmFtmXhk4GnfWv-N_ayV9PojWBRLi9cPpeYHBYCwH_RdrAeXK2ArD0gSTXECD6xiGYZJhwApsu7HZSIWuoyxOXpHat5CBV/s1600/how+to+create+static+pages+in+blogger+blogspot.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="246" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ0BnZ4m8UW_em00ss1I8-lUMj3uUnbw0rp7PEk2o3UAMQxUTmFtmXhk4GnfWv-N_ayV9PojWBRLi9cPpeYHBYCwH_RdrAeXK2ArD0gSTXECD6xiGYZJhwApsu7HZSIWuoyxOXpHat5CBV/s320/how+to+create+static+pages+in+blogger+blogspot.png" width="320"></a></div><br><span style="font-size: large;"><b>How to Create Static Pages in Blogger.</b></span><br><br><span style="color: #0b5394;"><b>Step 1.</b></span> Log in to your <a href="http://www.blogger.com/home" rel="nofollow">Blogger Dashboard</a><br><br><span style="color: #0b5394;"><b>Step 2.</b></span> Click on <b>Pages</b><br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaUuqO-HHXj-NkarD1aI3-pT2xKmSW7Cp6d_OWwGslUKPDNdg0DOW8FP7gUK4cRzY5KmY1Y0xsDiXHAVMt3a2HgCP2s9mlmx0FZSad6NOU_J07SCJSwnGG73IfQyTuBMWL6rGg9ypwv5oJ/s1600/how-to-create-static-pages-on-blogger-blogspot.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="static pages blogger, blogger tutorials, widgets" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaUuqO-HHXj-NkarD1aI3-pT2xKmSW7Cp6d_OWwGslUKPDNdg0DOW8FP7gUK4cRzY5KmY1Y0xsDiXHAVMt3a2HgCP2s9mlmx0FZSad6NOU_J07SCJSwnGG73IfQyTuBMWL6rGg9ypwv5oJ/s1600/how-to-create-static-pages-on-blogger-blogspot.png" title="how to add static pages in blogger blogspot"></a></div><br><br><span style="color: #0b5394;"><b>Step 3.</b></span> Click on <b>New Page - Blank Page</b><br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDC9sWevCoprzAAsPAcRU0HqQpQS51qb2RYAVXGwU2hA6MkA7JlUh-rU8SwgDESjwb0LIwzxy_j-LpZWNLI4BViKlWe5vkQQoUTU53B9GLufL8VsBInKlE4GgaJWWm2SUKBDBuV68mn7bK/s1600/how-to-create-static-pages-in-blogger-blogspot-2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDC9sWevCoprzAAsPAcRU0HqQpQS51qb2RYAVXGwU2hA6MkA7JlUh-rU8SwgDESjwb0LIwzxy_j-LpZWNLI4BViKlWe5vkQQoUTU53B9GLufL8VsBInKlE4GgaJWWm2SUKBDBuV68mn7bK/s1600/how-to-create-static-pages-in-blogger-blogspot-2.png"></a></div><br><span style="color: #0b5394;"><b>Step 4.</b></span> Type the title and write the page's content.<br><br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcBu0CynVcLZFHQX6U7ho6XQphV2qcr82OGrOeU7wKV01BcTdyhVU1w4cfdRYwhr4D6e4o_G41E7nY4BjJbXxq-mIOhopeN4YWAgh5HHZY6wxSrIbugCR4ZTxQRonUgEugawTJxs6Hq7Hg/s1600/how-to-create-static-pages-in-blogger-blogspot-3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="227" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcBu0CynVcLZFHQX6U7ho6XQphV2qcr82OGrOeU7wKV01BcTdyhVU1w4cfdRYwhr4D6e4o_G41E7nY4BjJbXxq-mIOhopeN4YWAgh5HHZY6wxSrIbugCR4ZTxQRonUgEugawTJxs6Hq7Hg/s400/how-to-create-static-pages-in-blogger-blogspot-3.png" width="400"></a></div><br><b><span style="color: #0b5394;">Step 5.</span></b> Before publishing it, click on Preview to see how it will appear on your blog.<br><br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcNyoj3XAr9qnrIrW0BdmUEmyshWFZGyJx5sqsb3IjyRvN8A4MhjeDZTbwQJoCdVdnOsze0tL4n78LjXPDngQQd7YXvNQb49Zm3iU_o6AaxAz20_OWDgLcj1eTX5nf830hAuYrI5c0kidD/s1600/static-pages-for-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcNyoj3XAr9qnrIrW0BdmUEmyshWFZGyJx5sqsb3IjyRvN8A4MhjeDZTbwQJoCdVdnOsze0tL4n78LjXPDngQQd7YXvNQb49Zm3iU_o6AaxAz20_OWDgLcj1eTX5nf830hAuYrI5c0kidD/s1600/static-pages-for-blogger.png"></a></div><span style="color: #0b5394;"><b>Step 6.</b></span> When you have finished the editing, click on Publish button.<br><br><span style="color: #0b5394;"><b>Step 7. </b></span>Now you have 3 options:<br><ol><li>Keep it as nav menu below header <b>- Top tabs</b> </li><li>Display the page in your blog's sidebar - <b>Side Links</b></li><li>Add the page's link manually to your template - <b>Don't Show</b></li></ol><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvT8c6Nx7SCo2yhgPyZrfRbixGAu0OyCg-w4exowXKBBhgsY_P74Ocyaw4BWb9Pl07A7TmEUNPrq1YOGQG1mVvE-j_B1fl5NuAwXw-kKXjB5qBgsLCHeiO7PYuKkyRPeSqisxdEHOKKopO/s1600/how-to-create-static-pages-in-blogger-blogspot-4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="198" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvT8c6Nx7SCo2yhgPyZrfRbixGAu0OyCg-w4exowXKBBhgsY_P74Ocyaw4BWb9Pl07A7TmEUNPrq1YOGQG1mVvE-j_B1fl5NuAwXw-kKXjB5qBgsLCHeiO7PYuKkyRPeSqisxdEHOKKopO/s400/how-to-create-static-pages-in-blogger-blogspot-4.png" width="400"></a></div><br><span style="color: #0b5394;"><b>Step 8.</b></span> After you have chosen where the page will appear, click on the Save arrangement button<br><br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_vqSnXu3L44hu7N7-M6-CSFXbk93A5CMkXg9RomxLXlsRNLSyEzk_WRacWrD53fD3GZw8Zlun5r5GrseA2Q79jeuR_V5Ra4xMenph_zi0lVCi1K8cPF4gZzB4WKRIsR7P33pNwzwLsVOX/s1600/how-to-create-static-pages-in-blogger-blogspot-5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="68" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_vqSnXu3L44hu7N7-M6-CSFXbk93A5CMkXg9RomxLXlsRNLSyEzk_WRacWrD53fD3GZw8Zlun5r5GrseA2Q79jeuR_V5Ra4xMenph_zi0lVCi1K8cPF4gZzB4WKRIsR7P33pNwzwLsVOX/s400/how-to-create-static-pages-in-blogger-blogspot-5.png" width="400"></a></div><br><br>And now you're done!<br>Now you have owned the static page. If you want another static page, just repeat the steps above.<br><br><i><b>Note:</b> if you have opted for Don't show option: go to Pages again and right click on the page's title and select Copy link location (in firefox). You can add the link manually to your sidebar via Link widget or add the link in your template, via Edit HTML.</i><br><br><b>UPDATE: Blogger made an update recently to the way that pages are added to blogs. Here is an updated tutorial that will walk you through the new process, step by step: <a href="/2015/07/how-to-create-static-pages-in-blogger_7.html" style="color: blue;" target="_blank">How to Add Static Pages to a Blogger Blog</a></b><br><br>Or you can watch this video tutorial below:<br><br><div style="text-align: center"><iframe width="640" height="360" src="//www.youtube.com/embed/e0e8k8PYJcM?rel=0" frameborder="0" allowfullscreen=""></iframe></div></div><div style="clear: both: margin: 10px 5px; display: none;"></div><div id="adsmiddle21015511765478892518"></div><script type="text/javascript">var obj0=document.getElementById("adsmiddle11015511765478892518"); var obj1=document.getElementById("adsmiddle21015511765478892518"); var s=obj1.innerHTML; var r=s.search(/\x3C!-- adsense --\x3E/igm); if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+16);} </script></div>

Blog Design How to Create Static Pages in Blogger

What are Blogger static pages?  Blogger Static Pages allows you to create specific pages like About Me, Contact page, Privacy Policy etc. on...

Read more »