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/AVvXsEjWgZ6KGz5k5tc4x7c3xk4AtR0xj8dFMPMmmfvl3emTm-vQamHdXsuPNXCbHHvkFChY5LKig08t87KoEh3AEN0br4KzjqokLnA0DwzQzf2dQaFR7AJBCd31iJ4wnGK-vHzyp4LwjIK7HiIV/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/AVvXsEjWgZ6KGz5k5tc4x7c3xk4AtR0xj8dFMPMmmfvl3emTm-vQamHdXsuPNXCbHHvkFChY5LKig08t87KoEh3AEN0br4KzjqokLnA0DwzQzf2dQaFR7AJBCd31iJ4wnGK-vHzyp4LwjIK7HiIV/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/AVvXsEg0m_YqqOYjii0iUV47biuDrngpsAu45d9VHzZkVN35wBftM_wbRsQ7Bsno9-96kcjg94BTGW40-ehLK81yYRIsooOAnraR9dFhrlHYKe428GNV-LADsSfyhe_z_EUBhDnzBGWU_FApsiub/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/AVvXsEg0m_YqqOYjii0iUV47biuDrngpsAu45d9VHzZkVN35wBftM_wbRsQ7Bsno9-96kcjg94BTGW40-ehLK81yYRIsooOAnraR9dFhrlHYKe428GNV-LADsSfyhe_z_EUBhDnzBGWU_FApsiub/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/AVvXsEjVHMSzLX8De-hlEHhFx2yzgRWfugr7E8GBr1htJ584I-LrRpO_pBWwtKXFZW1bYsGyx72wveeZ04dioZX1M3sNJ_v5f-GbikUFSteQWFBUy39cBnRizeuV_no6pb0Qto7-EciPUH2Udl8B/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/AVvXsEjVHMSzLX8De-hlEHhFx2yzgRWfugr7E8GBr1htJ584I-LrRpO_pBWwtKXFZW1bYsGyx72wveeZ04dioZX1M3sNJ_v5f-GbikUFSteQWFBUy39cBnRizeuV_no6pb0Qto7-EciPUH2Udl8B/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/AVvXsEiw0JEhdtQiOvrdUaOyL_pGJLXiBRkcP8XxRRDbIfxN4m0b3v4DcmWQEXFPyU1HAMyE1OHmhcwhLZDJduiFQS-NzpiD5FFGqtEt8RaizHk2tPHgTQQ-OipnLFJGSRGbFHIydCliTPusEEyj/s1600/Tulips.jpg);"><img alt="Test Title" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw0JEhdtQiOvrdUaOyL_pGJLXiBRkcP8XxRRDbIfxN4m0b3v4DcmWQEXFPyU1HAMyE1OHmhcwhLZDJduiFQS-NzpiD5FFGqtEt8RaizHk2tPHgTQQ-OipnLFJGSRGbFHIydCliTPusEEyj/s1600/Tulips.jpg"></li><li title="Title" style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYh6QYXw7SVF8qDCC56b9hSHvwgeyalCWZi-I-D7BJMIkU05lbBr1Uxv2EeYKFHBPAvFzfV2zg73MwsmovVgWz3_-sJ8IYSr1ZkGm2so1ci_QxGGKGgOMypou8Orhdx-l2VbbV6Hs-nmJy/s1600/Chrysanthemum.jpg);"><img alt="Title" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYh6QYXw7SVF8qDCC56b9hSHvwgeyalCWZi-I-D7BJMIkU05lbBr1Uxv2EeYKFHBPAvFzfV2zg73MwsmovVgWz3_-sJ8IYSr1ZkGm2so1ci_QxGGKGgOMypou8Orhdx-l2VbbV6Hs-nmJy/s1600/Chrysanthemum.jpg"></li><li title="" style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx-lAkpOIzMG3nQ7wb22bxOPyzevq8bJcj8KyvqKGqCX1kCV874OT-vN1HyUx-SD8-8RhAgM0qm2ZVyKkDyJIWBRiHQ63YaaIw_uGQIpCq3l3jlZgA5GY2L-7S2H8IQ8HGNuW1reDgI9FE/s1600/Desert.jpg);"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx-lAkpOIzMG3nQ7wb22bxOPyzevq8bJcj8KyvqKGqCX1kCV874OT-vN1HyUx-SD8-8RhAgM0qm2ZVyKkDyJIWBRiHQ63YaaIw_uGQIpCq3l3jlZgA5GY2L-7S2H8IQ8HGNuW1reDgI9FE/s1600/Desert.jpg"></li><li title="" style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjovHoleoT_TW91bTKNo3F1j41rEuLkWqQ2y8_xBH5qEYOpKEH9MnkIG1yDGWxFmx_rIdJAN5YafSkqIqiao0aAD6Bbdw-5qR6LZWbbQXSaTOpvzxkmHVvk90cERIm5Bqp0oI66I7ffwtWS/s1600/Hydrangeas.jpg);"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjovHoleoT_TW91bTKNo3F1j41rEuLkWqQ2y8_xBH5qEYOpKEH9MnkIG1yDGWxFmx_rIdJAN5YafSkqIqiao0aAD6Bbdw-5qR6LZWbbQXSaTOpvzxkmHVvk90cERIm5Bqp0oI66I7ffwtWS/s1600/Hydrangeas.jpg"></li><li title="" style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuq8gLLd6ZrN1es5uVYLNNCGq7NFzK0mTTmu5OkkM5EkMGEdy49YC6jygK6chk1Xv3Fxx8v63326uipOHD_ToBUXPKsh6AKWFu0y03baYu0J2KQztxYlQ03pzVJX4pTjBhYrg6LRS775Jf/s1600/Penguins.jpg);"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuq8gLLd6ZrN1es5uVYLNNCGq7NFzK0mTTmu5OkkM5EkMGEdy49YC6jygK6chk1Xv3Fxx8v63326uipOHD_ToBUXPKsh6AKWFu0y03baYu0J2KQztxYlQ03pzVJX4pTjBhYrg6LRS775Jf/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/AVvXsEiw0JEhdtQiOvrdUaOyL_pGJLXiBRkcP8XxRRDbIfxN4m0b3v4DcmWQEXFPyU1HAMyE1OHmhcwhLZDJduiFQS-NzpiD5FFGqtEt8RaizHk2tPHgTQQ-OipnLFJGSRGbFHIydCliTPusEEyj/s1600/Tulips.jpg);"><img alt="Test title" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw0JEhdtQiOvrdUaOyL_pGJLXiBRkcP8XxRRDbIfxN4m0b3v4DcmWQEXFPyU1HAMyE1OHmhcwhLZDJduiFQS-NzpiD5FFGqtEt8RaizHk2tPHgTQQ-OipnLFJGSRGbFHIydCliTPusEEyj/s1600/Tulips.jpg"></li><li title="Test" style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYh6QYXw7SVF8qDCC56b9hSHvwgeyalCWZi-I-D7BJMIkU05lbBr1Uxv2EeYKFHBPAvFzfV2zg73MwsmovVgWz3_-sJ8IYSr1ZkGm2so1ci_QxGGKGgOMypou8Orhdx-l2VbbV6Hs-nmJy/s1600/Chrysanthemum.jpg);"><img alt="Test" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYh6QYXw7SVF8qDCC56b9hSHvwgeyalCWZi-I-D7BJMIkU05lbBr1Uxv2EeYKFHBPAvFzfV2zg73MwsmovVgWz3_-sJ8IYSr1ZkGm2so1ci_QxGGKGgOMypou8Orhdx-l2VbbV6Hs-nmJy/s1600/Chrysanthemum.jpg"></li><li title="" style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx-lAkpOIzMG3nQ7wb22bxOPyzevq8bJcj8KyvqKGqCX1kCV874OT-vN1HyUx-SD8-8RhAgM0qm2ZVyKkDyJIWBRiHQ63YaaIw_uGQIpCq3l3jlZgA5GY2L-7S2H8IQ8HGNuW1reDgI9FE/s1600/Desert.jpg);"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx-lAkpOIzMG3nQ7wb22bxOPyzevq8bJcj8KyvqKGqCX1kCV874OT-vN1HyUx-SD8-8RhAgM0qm2ZVyKkDyJIWBRiHQ63YaaIw_uGQIpCq3l3jlZgA5GY2L-7S2H8IQ8HGNuW1reDgI9FE/s1600/Desert.jpg"></li><li title="" style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjovHoleoT_TW91bTKNo3F1j41rEuLkWqQ2y8_xBH5qEYOpKEH9MnkIG1yDGWxFmx_rIdJAN5YafSkqIqiao0aAD6Bbdw-5qR6LZWbbQXSaTOpvzxkmHVvk90cERIm5Bqp0oI66I7ffwtWS/s1600/Hydrangeas.jpg);"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjovHoleoT_TW91bTKNo3F1j41rEuLkWqQ2y8_xBH5qEYOpKEH9MnkIG1yDGWxFmx_rIdJAN5YafSkqIqiao0aAD6Bbdw-5qR6LZWbbQXSaTOpvzxkmHVvk90cERIm5Bqp0oI66I7ffwtWS/s1600/Hydrangeas.jpg"></li><li title="" style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuq8gLLd6ZrN1es5uVYLNNCGq7NFzK0mTTmu5OkkM5EkMGEdy49YC6jygK6chk1Xv3Fxx8v63326uipOHD_ToBUXPKsh6AKWFu0y03baYu0J2KQztxYlQ03pzVJX4pTjBhYrg6LRS775Jf/s1600/Penguins.jpg);"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuq8gLLd6ZrN1es5uVYLNNCGq7NFzK0mTTmu5OkkM5EkMGEdy49YC6jygK6chk1Xv3Fxx8v63326uipOHD_ToBUXPKsh6AKWFu0y03baYu0J2KQztxYlQ03pzVJX4pTjBhYrg6LRS775Jf/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/AVvXsEil9qlAEI0BnkMaE5kkVHhwrLahWIJ-L0U69ppcalxi7UNUlACofOlal6EDZKx8r1prfWfHifi_AvoTgX2aIDaH6SLZitOUwxAalShE1AVRnosk_C0OHzRsiN3A20IuAobHSX_SNMIbpOEe/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/AVvXsEil9qlAEI0BnkMaE5kkVHhwrLahWIJ-L0U69ppcalxi7UNUlACofOlal6EDZKx8r1prfWfHifi_AvoTgX2aIDaH6SLZitOUwxAalShE1AVRnosk_C0OHzRsiN3A20IuAobHSX_SNMIbpOEe/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/AVvXsEiw0JEhdtQiOvrdUaOyL_pGJLXiBRkcP8XxRRDbIfxN4m0b3v4DcmWQEXFPyU1HAMyE1OHmhcwhLZDJduiFQS-NzpiD5FFGqtEt8RaizHk2tPHgTQQ-OipnLFJGSRGbFHIydCliTPusEEyj/s1600/Tulips.jpg"><img class="large-thumbnail" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw0JEhdtQiOvrdUaOyL_pGJLXiBRkcP8XxRRDbIfxN4m0b3v4DcmWQEXFPyU1HAMyE1OHmhcwhLZDJduiFQS-NzpiD5FFGqtEt8RaizHk2tPHgTQQ-OipnLFJGSRGbFHIydCliTPusEEyj/s1600/Tulips.jpg"></a><a href="javascript:void(0);"><img class="mini-thumbnail" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYh6QYXw7SVF8qDCC56b9hSHvwgeyalCWZi-I-D7BJMIkU05lbBr1Uxv2EeYKFHBPAvFzfV2zg73MwsmovVgWz3_-sJ8IYSr1ZkGm2so1ci_QxGGKGgOMypou8Orhdx-l2VbbV6Hs-nmJy/s1600/Chrysanthemum.jpg"><img class="large-thumbnail" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYh6QYXw7SVF8qDCC56b9hSHvwgeyalCWZi-I-D7BJMIkU05lbBr1Uxv2EeYKFHBPAvFzfV2zg73MwsmovVgWz3_-sJ8IYSr1ZkGm2so1ci_QxGGKGgOMypou8Orhdx-l2VbbV6Hs-nmJy/s1600/Chrysanthemum.jpg"></a><a href="javascript:void(0);"><img class="mini-thumbnail" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx-lAkpOIzMG3nQ7wb22bxOPyzevq8bJcj8KyvqKGqCX1kCV874OT-vN1HyUx-SD8-8RhAgM0qm2ZVyKkDyJIWBRiHQ63YaaIw_uGQIpCq3l3jlZgA5GY2L-7S2H8IQ8HGNuW1reDgI9FE/s1600/Desert.jpg"><img class="large-thumbnail" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx-lAkpOIzMG3nQ7wb22bxOPyzevq8bJcj8KyvqKGqCX1kCV874OT-vN1HyUx-SD8-8RhAgM0qm2ZVyKkDyJIWBRiHQ63YaaIw_uGQIpCq3l3jlZgA5GY2L-7S2H8IQ8HGNuW1reDgI9FE/s1600/Desert.jpg"></a><a href="javascript:void(0);"><img class="mini-thumbnail" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjovHoleoT_TW91bTKNo3F1j41rEuLkWqQ2y8_xBH5qEYOpKEH9MnkIG1yDGWxFmx_rIdJAN5YafSkqIqiao0aAD6Bbdw-5qR6LZWbbQXSaTOpvzxkmHVvk90cERIm5Bqp0oI66I7ffwtWS/s1600/Hydrangeas.jpg"><img class="large-thumbnail" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjovHoleoT_TW91bTKNo3F1j41rEuLkWqQ2y8_xBH5qEYOpKEH9MnkIG1yDGWxFmx_rIdJAN5YafSkqIqiao0aAD6Bbdw-5qR6LZWbbQXSaTOpvzxkmHVvk90cERIm5Bqp0oI66I7ffwtWS/s1600/Hydrangeas.jpg"></a><a href="javascript:void(0);"><img class="mini-thumbnail" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuq8gLLd6ZrN1es5uVYLNNCGq7NFzK0mTTmu5OkkM5EkMGEdy49YC6jygK6chk1Xv3Fxx8v63326uipOHD_ToBUXPKsh6AKWFu0y03baYu0J2KQztxYlQ03pzVJX4pTjBhYrg6LRS775Jf/s1600/Penguins.jpg"><img class="large-thumbnail" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuq8gLLd6ZrN1es5uVYLNNCGq7NFzK0mTTmu5OkkM5EkMGEdy49YC6jygK6chk1Xv3Fxx8v63326uipOHD_ToBUXPKsh6AKWFu0y03baYu0J2KQztxYlQ03pzVJX4pTjBhYrg6LRS775Jf/s1600/Penguins.jpg"></a> <a href="javascript:void(0);"><img class="large-thumbnail feature" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghyF_5ifdkFkxUNtePNxLItBo-s3nVE6BwwUdxlQRpo4HjO6bh0CEj_X5x0fAuTI8h70Onip8IxgyODCPfkRk8Qsx-aO-Rz803S7Bme-IFBSeqPARWlqcpZQylW1hcF6zCB0TJ_Sr_x2j1/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/AVvXsEg0m_YqqOYjii0iUV47biuDrngpsAu45d9VHzZkVN35wBftM_wbRsQ7Bsno9-96kcjg94BTGW40-ehLK81yYRIsooOAnraR9dFhrlHYKe428GNV-LADsSfyhe_z_EUBhDnzBGWU_FApsiub/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/AVvXsEg0m_YqqOYjii0iUV47biuDrngpsAu45d9VHzZkVN35wBftM_wbRsQ7Bsno9-96kcjg94BTGW40-ehLK81yYRIsooOAnraR9dFhrlHYKe428GNV-LADsSfyhe_z_EUBhDnzBGWU_FApsiub/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/AVvXsEic8UlMzMKKLIlicAVlHjiBoKPfqhyphenhyphenQYc2YQDToeik7gNnj6jgJRGizY0yWc1e9PTZ6lALvrc8i-wP1NHmfWaFNfSvnqcC6EJ6aT2pQ_AHARxiZf_ROaHIwWbSGBT305VEB4qDpDTXRh07Q/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/AVvXsEic8UlMzMKKLIlicAVlHjiBoKPfqhyphenhyphenQYc2YQDToeik7gNnj6jgJRGizY0yWc1e9PTZ6lALvrc8i-wP1NHmfWaFNfSvnqcC6EJ6aT2pQ_AHARxiZf_ROaHIwWbSGBT305VEB4qDpDTXRh07Q/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 »

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/AVvXsEjY388uhtbIFo8Yf3pNTvhGfSuhVhfWTLY6KAMpCFDgAF6gAzw-z7e-gokR1hDbVZ2ABWn3rN34SblxCQUJF-zW2lZo5KvzG1mnUWoUWvUkCancNpXDH82g9zKJSvAsqwjk4bhY7ZZXzT0j/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/AVvXsEjY388uhtbIFo8Yf3pNTvhGfSuhVhfWTLY6KAMpCFDgAF6gAzw-z7e-gokR1hDbVZ2ABWn3rN34SblxCQUJF-zW2lZo5KvzG1mnUWoUWvUkCancNpXDH82g9zKJSvAsqwjk4bhY7ZZXzT0j/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/AVvXsEg0m_YqqOYjii0iUV47biuDrngpsAu45d9VHzZkVN35wBftM_wbRsQ7Bsno9-96kcjg94BTGW40-ehLK81yYRIsooOAnraR9dFhrlHYKe428GNV-LADsSfyhe_z_EUBhDnzBGWU_FApsiub/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/AVvXsEg0m_YqqOYjii0iUV47biuDrngpsAu45d9VHzZkVN35wBftM_wbRsQ7Bsno9-96kcjg94BTGW40-ehLK81yYRIsooOAnraR9dFhrlHYKe428GNV-LADsSfyhe_z_EUBhDnzBGWU_FApsiub/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/AVvXsEjR-e-ZsZz3PqEsjsWSOkMO0bjBuaO76YRKrBLMNyfsJ2YI3C7t5oHhsyCsd4JSiUl_-0pgOSphL4-_cIevQ7GWWMIpBZSQOHAjFh4deCyNLF2vYXMWCMJu5bh5bJrfZjo4Ve-n6mGTvB58/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/AVvXsEjR-e-ZsZz3PqEsjsWSOkMO0bjBuaO76YRKrBLMNyfsJ2YI3C7t5oHhsyCsd4JSiUl_-0pgOSphL4-_cIevQ7GWWMIpBZSQOHAjFh4deCyNLF2vYXMWCMJu5bh5bJrfZjo4Ve-n6mGTvB58/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/AVvXsEgMbiCXndCC5oAM6XEyniZtEuwtL_rQTi_HuAIiYXzbFM5_spisldCh2kOrjEpxgJrkmRu8IreXjZZkre7u4lGH-GoHHuiVUxWR6w7smM7YVFfrUkS7sVR0rmS7iH4YpAndigOrQE-HMDUM/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/AVvXsEgMbiCXndCC5oAM6XEyniZtEuwtL_rQTi_HuAIiYXzbFM5_spisldCh2kOrjEpxgJrkmRu8IreXjZZkre7u4lGH-GoHHuiVUxWR6w7smM7YVFfrUkS7sVR0rmS7iH4YpAndigOrQE-HMDUM/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/AVvXsEikCqiE0BwLYrDdQyyK1BnVvA5VGz_UgYZDtF49nlupJijAq1v_iscunMDxRIMzZaSqCx6AHXGKe1Nd97fxbd-4bH2VaiE_g-J-un5pCkXDZniJYLXyv3h4RmRWH1N-9bIhX1XlHtt2j92x/s1600/Bliss-Windows-XP.png</span>" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikCqiE0BwLYrDdQyyK1BnVvA5VGz_UgYZDtF49nlupJijAq1v_iscunMDxRIMzZaSqCx6AHXGKe1Nd97fxbd-4bH2VaiE_g-J-un5pCkXDZniJYLXyv3h4RmRWH1N-9bIhX1XlHtt2j92x/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/AVvXsEjRNxst9awHot0hXISTTxbNum3LePbL7yOEo6HFCOtaHs5ii3dmxiTkeMDJA94vepZjRguo5m9a4u77blB5K8WjRX6jeWZ7pzYuC_VALtIYg7KObUPvbBXSpXVfzYX0YD4nOnhY93bDT2Zm/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/AVvXsEjRNxst9awHot0hXISTTxbNum3LePbL7yOEo6HFCOtaHs5ii3dmxiTkeMDJA94vepZjRguo5m9a4u77blB5K8WjRX6jeWZ7pzYuC_VALtIYg7KObUPvbBXSpXVfzYX0YD4nOnhY93bDT2Zm/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/AVvXsEiqaNHp_afyNfBVzu0NbIrZ5FiaDzlldNqpw4-dHiGuSorPQpRLuAU7eh3nHlfMhxZC7BqHkyV4rUcm_rMSymVxU4qYX3WjlAyDrStn9s937YOJl010Ake_PZ9WK92-WMw_0Rrv4OYCPOcR/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/AVvXsEiqaNHp_afyNfBVzu0NbIrZ5FiaDzlldNqpw4-dHiGuSorPQpRLuAU7eh3nHlfMhxZC7BqHkyV4rUcm_rMSymVxU4qYX3WjlAyDrStn9s937YOJl010Ake_PZ9WK92-WMw_0Rrv4OYCPOcR/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/AVvXsEgkpROY-6SJjlUqijIcRaAACvEehSdt9vOKGrVdEZoTxj4wgpUEvbagM4MtyBlapYTzCkKygzMggPrS2t_Uahur_wKgND3-zgGcimdbz5CD99-NxRfy7osIA2B8YnC5JsQ7X22nSD6MIK0n/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/AVvXsEgkpROY-6SJjlUqijIcRaAACvEehSdt9vOKGrVdEZoTxj4wgpUEvbagM4MtyBlapYTzCkKygzMggPrS2t_Uahur_wKgND3-zgGcimdbz5CD99-NxRfy7osIA2B8YnC5JsQ7X22nSD6MIK0n/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/AVvXsEjpLY715m0uAdgayeLtrep9UXR_pnZJvot337-pMOgy0_M6P44whQ6T6UDBX-c7luNtAZM5N9j3FUiFFwldr3DzC5dXuQAeaev0li_mDjBiwEgPNL0vYlDcvBAkZI8acno0db1GZoo-r91n/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/AVvXsEjpLY715m0uAdgayeLtrep9UXR_pnZJvot337-pMOgy0_M6P44whQ6T6UDBX-c7luNtAZM5N9j3FUiFFwldr3DzC5dXuQAeaev0li_mDjBiwEgPNL0vYlDcvBAkZI8acno0db1GZoo-r91n/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/AVvXsEi39MotfIPrzsdlxlR6_kiscncgFLjhWTVOxGc4s14vq_-PWBhTqruIAqa79vIA-RSNCCQ60qrVMmhwH_YZgJ_9RloLHGl8YU_9AXiUF4urQvCrXYvbnBZuTxGJu8T1DPZsEsv4RIvyumEU/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/AVvXsEi39MotfIPrzsdlxlR6_kiscncgFLjhWTVOxGc4s14vq_-PWBhTqruIAqa79vIA-RSNCCQ60qrVMmhwH_YZgJ_9RloLHGl8YU_9AXiUF4urQvCrXYvbnBZuTxGJu8T1DPZsEsv4RIvyumEU/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/AVvXsEhrykMB4b7mxHj2S3QcUIlcUrUMEXBUBq0gse2uu5SdDRIHH1XsNcsOCcGzMmvkMNntVtD-3vshcxRDhNjYdmt91-ainBrb1gUTDdkjmTODmuW7NJ5UjEvls_MNJHjgoptAD7ps0ZimJgTv/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/AVvXsEhrykMB4b7mxHj2S3QcUIlcUrUMEXBUBq0gse2uu5SdDRIHH1XsNcsOCcGzMmvkMNntVtD-3vshcxRDhNjYdmt91-ainBrb1gUTDdkjmTODmuW7NJ5UjEvls_MNJHjgoptAD7ps0ZimJgTv/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/AVvXsEjZNwYjLczeA7wtEtiiXsg2oM_4nwsSjNh1ELTKcnh1987bRzaZNRkv-3WDhFcSq8puIPv4j4g61hEZXmxuRycaFl0zWJw4N_4et8-yI9aog8uFzTZvpHqFB2kQBFffv6Rw3oY-i36Gnrii/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/AVvXsEjZNwYjLczeA7wtEtiiXsg2oM_4nwsSjNh1ELTKcnh1987bRzaZNRkv-3WDhFcSq8puIPv4j4g61hEZXmxuRycaFl0zWJw4N_4et8-yI9aog8uFzTZvpHqFB2kQBFffv6Rw3oY-i36Gnrii/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/AVvXsEi2Z-IaRP801npwTULB_eKq1cYYKk9J96mrs2jFB5a6RUjyBWRfHthIaqvaTHTRP6DxZNv66QE0XNq5aMDoi2R2877C8r-e60Do7jYqzaYGjBKlQL1MarJ5kfzkqzkb1ZlfaB5GWfD7nO2Y/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/AVvXsEi2Z-IaRP801npwTULB_eKq1cYYKk9J96mrs2jFB5a6RUjyBWRfHthIaqvaTHTRP6DxZNv66QE0XNq5aMDoi2R2877C8r-e60Do7jYqzaYGjBKlQL1MarJ5kfzkqzkb1ZlfaB5GWfD7nO2Y/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/AVvXsEi7ytet_AlS_KNJWvzn2p7-iSxM6cQC2EPSgjJ1sv_iQ8_ABIa2r82-5SY0CkQYi0N6H2I0gR_tquoSUSxRvM9aTOGhro1Bhq6Fl4NdS_v94ZtaO__5ax_sGHRvoc8WdCWjOwLK9vJcRKKJ/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/AVvXsEi7ytet_AlS_KNJWvzn2p7-iSxM6cQC2EPSgjJ1sv_iQ8_ABIa2r82-5SY0CkQYi0N6H2I0gR_tquoSUSxRvM9aTOGhro1Bhq6Fl4NdS_v94ZtaO__5ax_sGHRvoc8WdCWjOwLK9vJcRKKJ/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/AVvXsEgkrpz4LECbSmdVQy4O_SzS94o__mh_57N_8IeOw9nQv7NCBpmTBS1wVajV4v7RfC4sQw1LXOy5qs7YAxGWDCkLGakbOWan20DmOxGzJaUXIWJ2BxYrtUNlwnLaYZPGxGs8eNFbXYFSPBIc/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/AVvXsEgkrpz4LECbSmdVQy4O_SzS94o__mh_57N_8IeOw9nQv7NCBpmTBS1wVajV4v7RfC4sQw1LXOy5qs7YAxGWDCkLGakbOWan20DmOxGzJaUXIWJ2BxYrtUNlwnLaYZPGxGs8eNFbXYFSPBIc/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/AVvXsEhzTCQyp4-Gnzs60JGSXkKyFQjn_fScXEqiOiHiVjOf6Gq1KZT6xaShMtoYdMXT3xjRay-cc2-kJQIu_XIjG0bZC1zfwDVuu7LXOzCIxu_Eo42siOXuXjFHPkAuoh8PjUFUsFHFkmv2Vlfw/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/AVvXsEhzTCQyp4-Gnzs60JGSXkKyFQjn_fScXEqiOiHiVjOf6Gq1KZT6xaShMtoYdMXT3xjRay-cc2-kJQIu_XIjG0bZC1zfwDVuu7LXOzCIxu_Eo42siOXuXjFHPkAuoh8PjUFUsFHFkmv2Vlfw/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/AVvXsEgk_Sqn2ZlzZeg4KCH-HerSY4dNNxRRZjfl7_BZDbhZt5EG3CuhOIOGjjYZcYUBgnZ_HUxSOISTtSqSarcGBuZL3USeJxjYIeD2fVdjrNs7k9_KKJGTZ8MytOSP2U7hnjopl1PdnMKQF0NI/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/AVvXsEgk_Sqn2ZlzZeg4KCH-HerSY4dNNxRRZjfl7_BZDbhZt5EG3CuhOIOGjjYZcYUBgnZ_HUxSOISTtSqSarcGBuZL3USeJxjYIeD2fVdjrNs7k9_KKJGTZ8MytOSP2U7hnjopl1PdnMKQF0NI/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/AVvXsEitl31qR2RqMiY-7XTgqMwvUFMKiMSlH6elJaL04mzCui3BFkiRBoD2XfJSzGPNd3OlLGWd1g0roakQMsNnARS47i0j9XhRsczXHZ8d_6TGK6-E_rvutqoIriHPYWwrRCKJJQjVa4Hg1pPa/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/AVvXsEitl31qR2RqMiY-7XTgqMwvUFMKiMSlH6elJaL04mzCui3BFkiRBoD2XfJSzGPNd3OlLGWd1g0roakQMsNnARS47i0j9XhRsczXHZ8d_6TGK6-E_rvutqoIriHPYWwrRCKJJQjVa4Hg1pPa/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/AVvXsEiCL-5jVToVZIxlGpBgzoNv-rkfWrRIpz7_jimEBy7KQMh1DRr-uqmlc8iZ1H3KTH5NSW1r4kmE9d0YX-IatSrpdzUcajmw5GxO9NLzVb6ThyphenhyphenCmu9-Vtrafgl0k0NZPmI3xR7AekzOEWsTu/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/AVvXsEiCL-5jVToVZIxlGpBgzoNv-rkfWrRIpz7_jimEBy7KQMh1DRr-uqmlc8iZ1H3KTH5NSW1r4kmE9d0YX-IatSrpdzUcajmw5GxO9NLzVb6ThyphenhyphenCmu9-Vtrafgl0k0NZPmI3xR7AekzOEWsTu/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 »

Hide/Show Widgets/Gadgets in Home/post/static/archive pages in Blogger

<div class="post-body"><div id="adsmiddle11271181592539982835"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtD6g51upoFAmqCjD8cvHXtZNaDOp_N2FyviGOVToHNcSQx3qv-RezUwmB39mYPGtFzhsqzGnEZy4vzAMeseOwjBfYvn-1dW-1XBmePz401fFmIvVNc1D-O4bhJxhTgzi1ABbbifxdq9r3/s1600/how+to+hide+show+blogger+widgets+in+homepage+posts+static+pages.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="130" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtD6g51upoFAmqCjD8cvHXtZNaDOp_N2FyviGOVToHNcSQx3qv-RezUwmB39mYPGtFzhsqzGnEZy4vzAMeseOwjBfYvn-1dW-1XBmePz401fFmIvVNc1D-O4bhJxhTgzi1ABbbifxdq9r3/s200/how+to+hide+show+blogger+widgets+in+homepage+posts+static+pages.png" width="150"></a></div>As some of you may have noticed, all the widgets/gadgets you add to your blog, will be displayed on all the pages by default, including the homepage as well. And I'm sure very few know that AdSense could disable your account in case you've put ad units inside the content of your contact or privacy policy pages. Therefore, hiding certain elements inside your blog pages is not only a matter of design, but it is also a requirement.<br><br><b>To hide (or show) widgets in particular posts, static pages, homepage or archive pages, you can use conditional tags.</b><br><br><span style="color: #3d85c6;"><b>Step 1.</b></span> Go to Blogger's <b>Dashboard</b> > <b>Layout</b><b> </b>and name the HTML/Javascript gadgets that you have already added. Doing this, it will be easier for you to identify the widgets that you have in your Blogger's template. Give it a unique title so that it does not match with any of the titles of any other widgets already added.<br><br></div><div style="clear: both: margin: 10px 5px; display: none;"></div><div id="adsmiddle21271181592539982835"><span style="color: #3d85c6;"><b>Step 2.</b></span> Next thing to do is to go to <b>Template </b>and click on <b>Edit HTML</b><br><br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeni1L8q1FIUOnrQAYACjF-QRu0GTKOnGdT0_SUruZViaDoiqwWpKHcanX_KEm_YJQNxZU6ziA4_rKmSuqCO_i8_UD-KB5-3q3n8iLizmUi1vnNCnZZUnzrAVvdtV8YmPzMTzRXSniiCgK/s1600/remove-blogger-labels.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="blogger template, edit html" border="0" height="132" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeni1L8q1FIUOnrQAYACjF-QRu0GTKOnGdT0_SUruZViaDoiqwWpKHcanX_KEm_YJQNxZU6ziA4_rKmSuqCO_i8_UD-KB5-3q3n8iLizmUi1vnNCnZZUnzrAVvdtV8YmPzMTzRXSniiCgK/s1600/remove-blogger-labels.png" title="Hide/Show Widgets/Gadgets in Home/post/static/archive pages in Blogger" width="320"></a></div><br><br><span style="color: #3d85c6;"><b>Step 3.</b></span> Click anywhere inside the code area and press the <b>CTRL + F</b> 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/AVvXsEjD11hitubDZpc5VYJ2cI9oJLZYHD0tjn-IOKOnmVJbmowKJglEN_LohJ3sCWO9RZFgadabJmaHkFopWdeIh1S6gDUMueZA_ERCkC_u2wB7lP98-7lh-MHDXhG1-TZDkRGMZmnXFoSigk9e/s1600/open-blogger-search-box-ctrl+f.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="blogger template, ctrl + f, search box" border="0" height="153" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD11hitubDZpc5VYJ2cI9oJLZYHD0tjn-IOKOnmVJbmowKJglEN_LohJ3sCWO9RZFgadabJmaHkFopWdeIh1S6gDUMueZA_ERCkC_u2wB7lP98-7lh-MHDXhG1-TZDkRGMZmnXFoSigk9e/s1600/open-blogger-search-box-ctrl+f.png" title="Hide/Show Widgets/Gadgets in Home/post/static/archive pages in Blogger" width="400"></a></div><br><span style="color: #3d85c6;"><b>Step 4.</b></span> Find the HTML of your widget by typing the widget's name in the search box - hit Enter.<br><br>Let's say that the title for one of my widgets is "<b>Recent Posts</b>". After searching for the widget's name, I will find a similar code in my template:<br><blockquote class="tr_bq"><b:widget id='HTML1' locked='false' title='<b>Recent Posts</b>' type='HTML'><br><b:includable id='main'><br><!-- only display title if it's non-empty --><br><b:if cond='data:title != ""'><br><h2 class='title'><data:title/></h2><br></b:if><br><div class='widget-content'><br><data:content/><br></div><br><br><b:include name='quickedit'/><br></b:includable><br></b:widget>  </blockquote><br>This code represents the widget/gadget that I have added in the Page Elements location (Layout).<br><br><span style="color: #3d85c6;"><b>Step 5.</b></span> After you've found your widget's code, add the following conditional tags marked with red just below and above to hide the widget from specific pages or posts in Blogger. For instance, in case you want:<br><br><span style="color: #3d85c6;"><span style="font-size: large;"><b>To show the widget only in Homepage:</b></span></span><br><br><blockquote class="tr_bq"><b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'><br><b:includable id='main'><br><b> <span style="color: #cc0000;"><b:if cond='data:blog.url == data:blog.homepageUrl'></span></b><br><!-- only display title if it's non-empty --><br><b:if cond='data:title != ""'><br><h2 class='title'><data:title/></h2><br></b:if><br><div class='widget-content'><br><data:content/><br></div><br><br><b:include name='quickedit'/><br><b><span style="color: #cc0000;"> </b:if></span></b><br></b:includable><br></b:widget></blockquote><br><span style="color: #3d85c6;"><span style="font-size: large;"><b>To show Blogger widget only in post pages </b></span></span><br><br><blockquote class="tr_bq"><b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'><br><b:includable id='main'><br><b style="color: #cc0000;"><b:if cond='data:blog.pageType == "item"'></b><br><!-- only display title if it's non-empty --><br><b:if cond='data:title != ""'><br><h2 class='title'><data:title/></h2><br></b:if><br><div class='widget-content'><br><data:content/><br></div><br><br><b:include name='quickedit'/><br><b style="color: #cc0000;"></b:if></b><br></b:includable><br></b:widget></blockquote><br><span style="color: #3d85c6;"><span style="font-size: large;"><b>To hide Blogger widget in post pages</b></span></span><br><br><blockquote class="tr_bq"><b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'><br><b:includable id='main'><br><b style="color: #cc0000;"><b:if cond='data:blog.pageType!= "item"'></b><br><!-- only display title if it's non-empty --><br><b:if cond='data:title != ""'><br><h2 class='title'><data:title/></h2><br></b:if><br><div class='widget-content'><br><data:content/><br></div><br><br><b:include name='quickedit'/><br><b style="color: #cc0000;"></b:if></b><br></b:includable><br></b:widget></blockquote><br><span style="color: #3d85c6;"><span style="font-size: large;"><b><span class="royalb">To show the widget in a specific page</span></b></span></span><br><span style="font-size: large;"><b><span class="royalb"> </span></b> </span><br><blockquote class="tr_bq"><b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'><br><b:includable id='main'><br><b><span style="color: #cc0000;"><b:if cond='data:blog.url == "<u>URL of the page</u>"'></span></b><br><!-- only display title if it's non-empty --><br><b:if cond='data:title != ""'><br><h2 class='title'><data:title/></h2><br></b:if><br><div class='widget-content'><br><data:content/><br></div><br><br><b:include name='quickedit'/><br><b><span style="color: #cc0000;"> </b:if></span></b><br></b:includable><br></b:widget></blockquote><br><b>Note</b>: Replace <b style="color: #cc0000;">URL of the page</b> with the address of the page in which you want the widget to appear<br><br><span style="color: #3d85c6;"><span style="font-size: large;"><b><span class="royalb">To hide a widget only in a particular page</span></b></span></span><br><br><blockquote class="tr_bq"><b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'><br><b:includable id='main'><br><b style="color: #cc0000;"> <b:if cond='data:blog.url != "URL of the page"'></b><br><!-- only display title if it's non-empty --><br><b:if cond='data:title != ""'><br><h2 class='title'><data:title/></h2><br></b:if><br><div class='widget-content'><br><data:content/><br></div><br><br><b:include name='quickedit'/><br><b><span style="color: #cc0000;"> </b:if></span></b><br></b:includable><br></b:widget> </blockquote><br><span style="color: #3d85c6;"><span style="font-size: large;"><b><span class="royalb">To show widgets only in static pages</span></b></span></span><br><br><blockquote class="tr_bq"><b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'><br><b:includable id='main'><br><b style="color: #cc0000;"> <b:if cond='data:blog.pageType == "static_page"'></b><br><!-- only display title if it's non-empty --><br><b:if cond='data:title != ""'><br><h2 class='title'><data:title/></h2><br></b:if><br><div class='widget-content'><br><data:content/><br></div><br><br><b:include name='quickedit'/><br><b style="color: #cc0000;"></b:if></b><br></b:includable><br></b:widget>  <span class="royalb"></span></blockquote><br><span style="color: #3d85c6;"><span style="font-size: large;"><b><span class="royalb">To hide widgets in Static Pages</span></b></span></span><br><br><blockquote class="tr_bq"><b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'><br><b:includable id='main'><br><b style="color: #cc0000;"> <b:if cond='data:blog.pageType != "static_page"'></b><br><!-- only display title if it's non-empty --><br><b:if cond='data:title != ""'><br><h2 class='title'><data:title/></h2><br></b:if><br><div class='widget-content'><br><data:content/><br></div><br><br><b:include name='quickedit'/><br><b style="color: #cc0000;"> </b:if></b><br></b:includable><br></b:widget>  <span class="royalb"></span></blockquote><br><span style="color: #3d85c6;"><span style="font-size: large;"><b><span class="royalb">To show widgets only in Archive Pages</span></b></span></span><br><br><blockquote class="tr_bq"><span class="royalb"> </span><b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'><br><b:includable id='main'><br><b style="color: #cc0000;"> <b:if cond='data:blog.pageType == "archive"'></b><br><!-- only display title if it's non-empty --><br><b:if cond='data:title != ""'><br><h2 class='title'><data:title/></h2><br></b:if><br><div class='widget-content'><br><data:content/><br></div><br><br><b:include name='quickedit'/><br><b style="color: #cc0000;"> </b:if></b><br></b:includable><br></b:widget> </blockquote><br><i><b>Note:</b>  Pay attention each time you're adding a new address which should end up with <b>.com</b>, otherwise it may not work.</i><br><br><span style="color: #3d85c6;"><b>Step 6.</b></span> After you have added the conditional tags, <b>Save Template</b> and view your blog.<br><br>That's it! </div><script type="text/javascript">var obj0=document.getElementById("adsmiddle11271181592539982835"); var obj1=document.getElementById("adsmiddle21271181592539982835"); 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 Hide/Show Widgets/Gadgets in Home/post/static/archive pages in Blogger

As some of you may have noticed, all the widgets/gadgets you add to your blog, will be displayed on all the pages by default, including the ...

Read more »

How to Add or Invite Multiple Authors on Blogger

<div class="post-body"><div id="adsmiddle14541370581711947603"></div><div style="clear: both: margin: 10px 5px; display: none;"></div><div id="adsmiddle24541370581711947603">If you ever considered working on a blog with multiple authors and you'd like to add others to publish posts or moderate comments, you can <b>invite multiple authors on your Blogger blog</b>. These additional authors have blog posting rights and can be either a guest author or blog administrator.<br><ol><li>An author can create and edit only his/her own posts and have restricted access to some of the blog' Settings. There, he or she will be able to access the Posting options and Add a mobile device, or remove themselves from the blog membership. </li><li>An administrator, on the other hand, will have FULL access to the blog' settings and template. Users with this privilege can edit or delete posts made by other members of the blog, add/remove other members or transfer the ownership of a blog.</li></ol><div class="ssmainhide" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf2TDF6RmNqm-JVFUaKIgVCgVyxu5JGITWz5YQ6j8cS5C7F-5rFMdFxHG4zFRDMedGBuPsJ1MTqjuCh6misTUYrCAUDN8bHINHUl-BbaLKFVsJP3CzKFS4HLMX80eFoIhvFkiPvOXeqRvl/s1600/how-to-invite-multiple-authors-on-a-blogger-blog.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="invite multiple authors on blogger" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf2TDF6RmNqm-JVFUaKIgVCgVyxu5JGITWz5YQ6j8cS5C7F-5rFMdFxHG4zFRDMedGBuPsJ1MTqjuCh6misTUYrCAUDN8bHINHUl-BbaLKFVsJP3CzKFS4HLMX80eFoIhvFkiPvOXeqRvl/s1600/how-to-invite-multiple-authors-on-a-blogger-blog.png" title="How to Add or Invite Multiple Authors on Blogger"></a></div><br><b>Related: </b><a href="/2015/07/add-author-profile-picture-and-name-in_10.html" style="color: blue;" target="_blank">Add Author's Profile Picture and Name in Multi Author Blog</a><br><br><h2>How to Invite Authors on Blogger</h2><br>To invite multiple authors on a Blogger blog is really easy. Just follow the steps below:<br><br><b><span style="color: #3d85c6;">Step 1. </span></b>Log into your blogger account at <a href="http://blogger.com/" style="color: blue;">blogger.com</a> and click the name of your blog<br><br><b><span style="color: #3d85c6;">Step 2.</span></b> Click "Settings" on the left side of the page and go to the "Basic" tab:<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/AVvXsEgzzlz0tTjpgkbmNjSKIV4rQOYizwVR_FfIwrRTgKcFYikSCzy1iX-z3-m_omJkWcSmXT1D1Q_ejOYmbaSRMrpqw5Ycaw49obmMKWSIULzB2xLAgHQKe_iuO8wP5CCGb9HT3gFJRdeVphYI/s1600/how-to-add-invite-multiple-authors-on-blogger-blog.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="invite multiple authors on blogger" border="0" height="201" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzzlz0tTjpgkbmNjSKIV4rQOYizwVR_FfIwrRTgKcFYikSCzy1iX-z3-m_omJkWcSmXT1D1Q_ejOYmbaSRMrpqw5Ycaw49obmMKWSIULzB2xLAgHQKe_iuO8wP5CCGb9HT3gFJRdeVphYI/s1600/how-to-add-invite-multiple-authors-on-blogger-blog.png" title="How to Add or Invite Multiple Authors on Blogger 1" width="400"></a></td></tr><tr><td class="tr-caption" style="text-align: center;">Invite multiple authors on Blogger</td></tr></tbody></table><b><span style="color: #3d85c6;">Step 3.</span></b> Look for the Permissions/Blog authors section and click on the "Add authors" link. Enter the email address for each author you would like to invite, separating each address with a comma.<br><br><b><span style="color: #3d85c6;">Step 4.</span></b> Click "Invite authors" button at the bottom once you're done. And that's it!<br><br><h3>Managing Authors</h3><br>The invited Authors will be listed after the invitations have been sent. They will need to click the "Accept Invitation" button in the invitation email in order to get started. Authors which have yet to accept or decline the invite will be listed under 'open invitations'. To remove an author from the blog, simply click the Remove icon next to the author's email address:<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/AVvXsEgxC4UzynIE7TTl2SIqDJExKSJYWcqeu0XvM5oO864Ny1qvcA1mJdVI6niA8nOW81s9SqcuVbWdWKC04_chRC9x2W4dox68pY6Wm5QjCIlFf18zW6T_rK9C9H4Iuhq6ym1-zlBbLog3f4Fc/s1600/how-to-remove-invite-multiple-authors-on-blogger-blog.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="invite multiple authors on blogger" border="0" height="103" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxC4UzynIE7TTl2SIqDJExKSJYWcqeu0XvM5oO864Ny1qvcA1mJdVI6niA8nOW81s9SqcuVbWdWKC04_chRC9x2W4dox68pY6Wm5QjCIlFf18zW6T_rK9C9H4Iuhq6ym1-zlBbLog3f4Fc/s1600/how-to-remove-invite-multiple-authors-on-blogger-blog.png" title="How to Add or Invite Multiple Authors on Blogger 2" width="400"></a></td></tr><tr><td class="tr-caption" style="text-align: center;">Cancel the invitation</td></tr></tbody></table>Once the invited member accept your invitation, they will be listed as an "Author" by default. To give a person full admin privileges, you can change the "Author" status in the "Permissions" section of the Settings > Basic tab to "Admin":<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/AVvXsEhttacAP24hqBpdLQHDLPsCJ7piVwcaWtGeVj65DLz0vseXbIglTKVOgRWch9Vh3zB2ukUkuR_BJG6Ll62VnOjCjsFvGkEwagGTcLjrb-e9KxGuvcvi1l0kUl0YD3wGN0zqP9yK8DknB7K5/s1600/how-to-make-author-admin-on-blogger-blog.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="add second admin on blogger" border="0" height="105" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhttacAP24hqBpdLQHDLPsCJ7piVwcaWtGeVj65DLz0vseXbIglTKVOgRWch9Vh3zB2ukUkuR_BJG6Ll62VnOjCjsFvGkEwagGTcLjrb-e9KxGuvcvi1l0kUl0YD3wGN0zqP9yK8DknB7K5/s1600/how-to-make-author-admin-on-blogger-blog.png" title="How to Add or Invite Multiple Authors on Blogger 3" width="400"></a></td></tr><tr><td class="tr-caption" style="text-align: center;">Changing an Author into an Admin in Blogger</td></tr></tbody></table><br><div style="padding: 0px 80px 0px 60px;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0DdhBAqMFf3tpxdgNAaXsitpDBgE5y5I4Jx9aBliTcOnurrRLAQKhmRmwYuua0DPy5jb-c_9BTjNReYX1TlfrZnqDtDwh3gkbSjJwF0IjbJ9Sa3h1BgE8WtZ764ZsZteyA3yA7UF1wI3X/s1600/warning-sign.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0DdhBAqMFf3tpxdgNAaXsitpDBgE5y5I4Jx9aBliTcOnurrRLAQKhmRmwYuua0DPy5jb-c_9BTjNReYX1TlfrZnqDtDwh3gkbSjJwF0IjbJ9Sa3h1BgE8WtZ764ZsZteyA3yA7UF1wI3X/s1600/warning-sign.png"></a></div><i>Please proceed with caution! Administrators have as much power over your blog as you do, including the ability to permanently delete it!</i></div><br>So this is <b>how you can invite multiple authors in blogger</b>. With this feature, everyone on your team can help create different engaging content for your readers to enjoy. </div><script type="text/javascript">var obj0=document.getElementById("adsmiddle14541370581711947603"); var obj1=document.getElementById("adsmiddle24541370581711947603"); 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 or Invite Multiple Authors on Blogger

If you ever considered working on a blog with multiple authors and you'd like to add others to publish posts or moderate comments, you c...

Read more »

Simple Recent Posts Widget for Blogger/Blogspot

<div class="post-body"><div id="adsmiddle15197552418331573382">The main advantage on this Recent Posts widget is that it will show not only post titles, but also post excerpts or snippets, and it's easy to customize or apply different style on it. To make it fit your own design, you will need to modify the CSS style - you can change the link or background color, the size and color of text/links.<br><br>What you can do with this widget:<br>- display post titles only <br>- change the number of posts <br>- change the number of characters of the post snippet/excerpt <br>- show the post dates <br><br>See the screenshot below:<br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5SUTPxHqcDkMUy5qWNlegKuFWfewunMljiA6Hg_BC6Yo5Y6StCqIeK0HDfo7Es_aRoHhovpxkjJ_2Ky8ZpxglhzJsKOWZ-c_SwEIwPlqEWYoiwCtpl5b10Qn7sV0jJg0ELXrsZVOwCrpn/s1600/add+recent+posts+widget+for+blogger+blogspot.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="318" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5SUTPxHqcDkMUy5qWNlegKuFWfewunMljiA6Hg_BC6Yo5Y6StCqIeK0HDfo7Es_aRoHhovpxkjJ_2Ky8ZpxglhzJsKOWZ-c_SwEIwPlqEWYoiwCtpl5b10Qn7sV0jJg0ELXrsZVOwCrpn/s320/add+recent+posts+widget+for+blogger+blogspot.png" width="320"></a></div><br><h2>How to add Recent Posts Widget to Blogger</h2>Step 1. Log in to your Blogger Dashboard > go to "Layout" and click the "Add a Gadget" link<br><br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWaVGdhTAdWKqwcyZaIo-CHMKZj0yoh_y362ctoWS2KxhFugEZk7TRr7wPLtJ8-Ur8NU1oGYzkIMzGY_3YIX6rFQUQh_6f4gsFMhwEMsGzGUfaH5bwcRlnbJxeKrcQd8_sM4hI07RGMyKY/s1600/blogger-layout-add+a+gadget-how-to.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="148" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWaVGdhTAdWKqwcyZaIo-CHMKZj0yoh_y362ctoWS2KxhFugEZk7TRr7wPLtJ8-Ur8NU1oGYzkIMzGY_3YIX6rFQUQh_6f4gsFMhwEMsGzGUfaH5bwcRlnbJxeKrcQd8_sM4hI07RGMyKY/s1600/blogger-layout-add+a+gadget-how-to.png" width="640"></a></div><br>Step 2. From the pop-up window, scroll down and choose HTML/JavaScript<br><br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggrhyphenhyphen5EG1RuQlVlU_aJs7fxDab9uRFt2HMDkmjHSEtstPNjPS2dm-tcxujUgNpmOMfF46KVDqxUpSs4zmL3zhVS97tarJls8hjAPceoJtZT7zW1m7rxweIL_Y1MjATp1zrDxqADi4v_rtm/s1600/blogger-widgets-gadgets-tutorials-tricks-helplogger-html-javascrip.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="196" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggrhyphenhyphen5EG1RuQlVlU_aJs7fxDab9uRFt2HMDkmjHSEtstPNjPS2dm-tcxujUgNpmOMfF46KVDqxUpSs4zmL3zhVS97tarJls8hjAPceoJtZT7zW1m7rxweIL_Y1MjATp1zrDxqADi4v_rtm/s1600/blogger-widgets-gadgets-tutorials-tricks-helplogger-html-javascrip.png" width="400"></a></div><br>Step 3. Select & Copy the code from one of the options below and paste it into the new HTML/JavaScript:<br><br><h3>Option 1: Recent Posts Widget with Snippets</h3><blockquote class="tr_bq"><div id="hlrpsa"><br><script src="http://helplogger.googlecode.com/svn/trunk/recent-posts-with-snippets.js"><br></script><br><script><br>var numposts = <b><span style="color: red;">5</span></b>;var showpostdate = <b><span style="color: red;">false</span></b>;var showpostsummary = true;var numchars = <b><span style="color: red;">100</span></b>;var standardstyling = true;<br></script><br><script src="<span style="color: blue;">http://blog-address.com</span><b></b>/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts"><br></script></div><a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="/2015/07/simple-recent-posts-widget-for_7.html" rel="nofollow" >Recent Posts Widget</a><br><noscript>Your browser does not support JavaScript!</noscript><br><style type="text/css"><br>#hlrpsa a {color: <b><span style="color: blue;">#0B3861</span></b>; font-size: <b><span style="color: purple;">13px</span></b>;} <br>#rpdr, #rpdr a {color:#808080;}<br>#hlrpsa { color:<b> <span style="color: #38761d;">#999999</span></b>; font-size: <b><span style="color: orange;">11px</span></b>; border-bottom:1px #cccccc dotted; margin-top:-10px; padding-bottom:10px;}<br>.hlrps a {font-weight:bold; }<br>.hlrpssumm {}<br></style></blockquote><br><h3>Option 2: Recent Posts Widget Showing Post Titles Only</h3><blockquote class="tr_bq"><div id="hlrpsb"><br><script style="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/recent-posts-with-titles-only.js"></script><br><script style="text/javascript">var numposts = <b><span style="color: red;">10</span></b>;var showpostdate =<b><span style="color: red;"> false</span></b>;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script><br><script src="<span style="color: blue;">http://blog-address.com</span>/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script></div><a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="/2015/07/simple-recent-posts-widget-for_7.html" rel="nofollow" >Recent Posts Widget</a><br><noscript>Oops! Make sure JavaScript is enabled in your browser.</noscript><br><style type=text/css> <br>#hlrpsb a {color: <span style="color: blue;"><b>#0B3861</b></span>; font-size: <span style="color: #741b47;"><b>13px</b></span>;} <br>#rpdr, #rpdr a {color:#808080;}<br>.bbrecpost2 {<br>padding-top:6px;<br>padding-bottom:6px;<br>border-bottom: 1px #cccccc dotted; }<br></style></blockquote>Step 4. Customize it:<br>- Change <b><span style="color: red;">5</span></b> (option 1) and <b><span style="color: red;">10</span></b> (option 2) with the number of posts that you want to display.<br>- Change <b><span style="color: red;">false</span></b> to true if you want the posts dates to appear<br>- Change 100 (option 1) if you want more characters to be displayed.<br>- To change the color and font size of the links, modify the values in <span style="color: blue;"><b>blue</b></span> (links) and <span style="color: #741b47;"><b>violet</b></span> (font-size)<br>- To change the style of posts summary, modify the values in <span style="color: #38761d;"><b>green</b></span> (color) and <span style="color: orange;"><b>orange</b></span> (font size)<br>- Replace the <span style="color: blue;">http://blog-address.com</span> text with your URL<br><br>Step 5. Save your widget. And that's it! Enjoy!<br></div><div style="clear: both: margin: 10px 5px; display: none;"></div><div id="adsmiddle25197552418331573382"></div><script type="text/javascript">var obj0=document.getElementById("adsmiddle15197552418331573382"); var obj1=document.getElementById("adsmiddle25197552418331573382"); 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 Simple Recent Posts Widget for Blogger/Blogspot

The main advantage on this Recent Posts widget is that it will show not only post titles, but also post excerpts or snippets, and it's e...

Read more »

Color Code Generator

<div class="post-body"><div id="adsmiddle18639811741251181528"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbFrRpPgA-AhSTo8-CCw1OzbUQGQpwAi4UDLoNjQSakkgcRcXbo92b83wQs0uh25W4WHUk15reH1Um7elvSDoCd5Qw-gJMfFP1pcN23GoMPYB73sLIcUl0hs8etRszPBYy_0NefYS6zm6U/s1600/color-code-generator-for-blogger.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="hex codes, color chart, color codes" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbFrRpPgA-AhSTo8-CCw1OzbUQGQpwAi4UDLoNjQSakkgcRcXbo92b83wQs0uh25W4WHUk15reH1Um7elvSDoCd5Qw-gJMfFP1pcN23GoMPYB73sLIcUl0hs8etRszPBYy_0NefYS6zm6U/s1600/color-code-generator-for-blogger.jpg" title="color code generator for blogger"></a></div>This Color Code Generator will help you get the six digit color code i.e hexadecimal value. It could be very effective if you want to get  a perfect combination of colors for your blog and if you have a good experience about color picking and selection matching, this will help you to make your blog to look really professional. The Color Code Generator is also very useful when you try to blend the Google Adsense Ads with the site content.<br><br><center><object border="0" classid="clsid:D27CDB6E -AE6D-11CF-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" height="480" id="obj1" width="480"> <param name="movie" value="http://www.2createawebsite.com/build/color.swf"><param name="quality" value="High"><embed src="http://www.2createawebsite.com/build/color.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="obj1" width="485" height="485" quality="High"></object></center><br><span style="color: #3d85c6;"><b><span style="font-size: large;">Instructions</span></b></span><br><br>- Drag the bar on the "Hue" selector to the area of your desired colour palette. <br>- Then click inside the Brightness/Saturation area and drag the cursor until you have achieved your desired colour. The "Swatch" bar shows you the final colour result.<br>- The hexadecimal colour code is generated in the "Hex" box. Simply copy the six digit code i.e #000000<br><br><h3><span style="color: #3d85c6;">How to add Hex Colour Code Generator </span></h3><br>To install Hex Color Code Generator on a Blogger/Blogspot page or post, copy the following code and paste it in the post or page HTML:<br><blockquote class="tr_bq"><center><object border="0" classid="clsid:D27CDB6E -AE6D-11CF-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" height="480" id="obj1" width="480"> <param name="movie" value="http://www.2createawebsite.com/build/color.swf"><param name="quality" value="High"><embed src="http://www.2createawebsite.com/build/color.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="obj1" width="485" height="485" quality="High"></embed></object></center></blockquote>That's it! </div><div style="clear: both: margin: 10px 5px; display: none;"></div><div id="adsmiddle28639811741251181528"></div><script type="text/javascript">var obj0=document.getElementById("adsmiddle18639811741251181528"); var obj1=document.getElementById("adsmiddle28639811741251181528"); 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 Color Code Generator

This Color Code Generator will help you get the six digit color code i.e hexadecimal value. It could be very effective if you want to get  a...

Read more »