Create a Background Slideshow for Blogger

In the previous post we saw <a href="/2014/11/how-to-make-background-image-of-blog_49.html" target="_blank">how to make the blog's background fill the screen regardless of the resolution of the monitor.</a> The method that we'll use now with jQuery is a plugin called <b>BackStretch</b> which also has the option of creating a slideshow of pictures as a blog wallpaper without losing the property of adjusting to the width and height of the screen.<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS2SsFj5G0ZDOKtsKvFrBuD2ushnMhGNsimGEIa9mDVoMi4JxCZ3qsEQ-KUfYQT6n1cGqCowvZ6TZTY6fRHq9DSKIM4xyIAH_35vKBzSVWHx9SRkwnkq2CwXplGOaGuWX5Gl0aUaTvES9E/s1600/background-slideshow-for-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="slideshow for blogger, blogger widgets" border="0" height="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS2SsFj5G0ZDOKtsKvFrBuD2ushnMhGNsimGEIa9mDVoMi4JxCZ3qsEQ-KUfYQT6n1cGqCowvZ6TZTY6fRHq9DSKIM4xyIAH_35vKBzSVWHx9SRkwnkq2CwXplGOaGuWX5Gl0aUaTvES9E/s400/background-slideshow-for-blogger.png" title="how to create a background slideshow for blogger" width="400" /></a></div><div class="pinit-visibility" onmouseover="this.style.opacity=1;this.style.visibility='visible'" style="left: 348px; opacity: 0; position: absolute; top: 265.5px; visibility: visible; z-index: 9999;"></div><br />What we will do in this entry is just this, try to make the blog's background to have some images that are changing, all with fade effect between each transition.<br />You can see an example in this <span style="color: blue;"><a href="http://demoblog12131.blogspot.ro/" rel="nofollow">demo blog</a></span>.<br /><br />To put this slideshow in the blog's background, just go to <b>Template</b> - <b>Edit HTML</b> and before <b></head></b> add the following code:<br /><blockquote class="tr_bq"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/><br /><script><br />//<![CDATA[<br />/*<br />* jQuery Backstretch<br />* Version 1.2.8<br />* http://srobbin.com/jquery-plugins/jquery-backstretch/<br />* Add a dynamically-resized background image to the page<br />* Copyright (c) 2012 Scott Robbin (srobbin.com)<br />* Licensed under the MIT license<br />* https://raw.github.com/srobbin/jquery-backstretch/master/LICENSE.txt<br />*/<br />;(function(a){a.backstretch=function(p,b,l){function s(){if(p){var b;0==c.length?c=a("<div />").attr("id","backstretch").css({left:0,top:0,position:m?"fixed":"absolute",overflow:"hidden",zIndex:-999999,margin:0,padding:0,height:"100%",width:"100%"}):c.find("img").addClass("deleteable");b=a("<img />").css({position:"absolute",display:"none",margin:0,padding:0,border:"none",zIndex:-999999,maxWidth:"none"}).bind("load",function(d){var b=a(this),e;b.css({width:"auto",height:"auto"});e=this.width||a(d.target).width();d=this.height||a(d.target).height();n=e/d;q();b.fadeIn(g.speed,function(){c.find(".deleteable").remove();"function"==typeof l&&l()})}).appendTo(c);0==a("body #backstretch").length&&(0===a(window).scrollTop()&&window.scrollTo(0,0),a("body").append(c));c.data("settings",g);b.attr("src",p);a(window).unbind("resize.backstretch").bind("resize.backstretch",function(){"onorientationchange"in window&&window.pageYOffset===0&&window.scrollTo(0,1);q()})}}function q(){try{j={left:0,top:0},rootWidth=h=o.width(),rootHeight=r?window.innerHeight:o.height(),f=h/n,f>=rootHeight?(k=(f-rootHeight)/2,g.centeredY&&(j.top="-"+k+"px")):(f=rootHeight,h=f*n,k=(h-rootWidth)/2,g.centeredX&&(j.left="-"+k+"px")),c.css({width:rootWidth,height:rootHeight}).find("img:not(.deleteable)").css({width:h,height:f}).css(j)}catch(a){}}var t={centeredX:!0,centeredY:!0,speed:0},c=a("#backstretch"),g=c.data("settings")||t;c.data("settings");var o,m,r,n,h,f,k,j;b&&"object"==typeof b&&a.extend(g,b);b&&"function"==typeof b&&(l=b);a(document).ready(function(){var b=window,d=navigator.userAgent,c=navigator.platform,e=d.match(/AppleWebKit\/([0-9]+)/),e=!!e&&e[1],f=d.match(/Fennec\/([0-9]+)/),f=!!f&&f[1],g=d.match(/Opera Mobi\/([0-9]+)/),h=!!g&&g[1],i=d.match(/MSIE ([0-9]+)/),i=!!i&&i[1];o=(m=!((-1<c.indexOf("iPhone")||-1<c.indexOf("iPad")||-1<c.indexOf("iPod"))&&e&&534>e||b.operamini&&"[object OperaMini]"==={}.toString.call(b.operamini)||g&&7458>h||-1<d.indexOf("Android")&&e&&533>e||f&&6>f||"palmGetResource"in window&&e&&534>e||-1<d.indexOf("MeeGo")&&-1<d.indexOf("NokiaBrowser/8.5.0")||i&&6>=i))?a(window):a(document);r=m&&window.innerHeight;s()});return this}})(jQuery);<br />//]]><br /></script></blockquote><blockquote class="tr_bq"><script><br />//<![CDATA[<br />var images = [<br /> "<span style="color: blue;">Image URL</span>",<br /> "<span style="color: blue;">Image URL</span>",<br /> "<span style="color: blue;">Image URL</span>",<br /> "<span style="color: blue;">Image URL</span>",<br /> "<span style="color: blue;">Image URL</span>",<br />  ];<br /><br />  $(images).each(function(){<br /> $('<img/>')[0].src = this;<br />  });<br />  var index = 0;<br />$.backstretch(images[index], {speed: 1000});<br />  var slideshow = setInterval(function() {<br />  index = (index >= images.length - 1) ? 0 : index + 1;<br />    $.backstretch(images[index]);<br />  }, <b><span style="color: #cc0000;">5000</span></b>);<br />//]]><br /></script></blockquote>Here add the URLs of the images that will be the background of your blog.<br />If you would like to add more pictures, just add after the <b>var images = [ </b>another line like this:<br /><blockquote> "<span style="color: blue;">Image URL</span>",</blockquote>The images will be changing in the order you have added them, if you want these to appear in a random order, then change the second part of the code with this:<br /><blockquote class="tr_bq"><script><br />//<![CDATA[<br />var images=new Array();<br />images[ <span style="color: #0b5394;"><b>1</b></span> ]="<span style="color: blue;">Image URL</span>";<br />images[ <span style="color: #0b5394;"><b>2</b></span> ]="<span style="color: blue;">Image URL</span>";<br />images[ <span style="color: #0b5394;"><b>3</b></span> ]="<span style="color: blue;">Image URL</span>";<br />images[ <span style="color: #0b5394;"><b>4</b></span> ]="<span style="color: blue;">Image URL</span>";<br />images[ <span style="color: #0b5394;"><b>5</b></span> ]="<span style="color: blue;">Image URL</span>";<br /><br />  Array.prototype.shuffle = function() {<br />  var len = this.length;<br />  var i = len;<br />  while (i--) {<br />  var p = parseInt(Math.random()*len);<br />  var t = this[i];<br />  this[i] = this[p];<br />  this[p] = t;<br />  }<br />};<br /><br />  images.shuffle();<br />  $(images).each(function(){<br /> $('<img/>')[0].src = this;<br />  });<br />  var index = 0;<br />$.backstretch(images[index], {speed: 1000});<br />  var slideshow = setInterval(function() {<br />  index = (index >= images.length - 1) ? 0 : index + 1;<br />    $.backstretch(images[index]);<br />  }, <span style="color: #cc0000;"><b>5000</b></span>);<br />//]]><br /></script></blockquote>You can also add more pictures by adding a line like this:<br /><blockquote>images[ <span style="color: #0b5394;"><b>6</b></span> ]="<span style="color: blue;">Image URL</span>";</blockquote>But you will see that in this case there are some consecutive numbers in blue, so if you add another such as 6, then the next one should be 7, etc..<br /><br />In both cases you can change the duration of each image which is in the <span style="color: #cc0000;"><b>5000</b></span> value that is at the end of the script.<br />The advantage of this slideshow in the blog's background is that images are automatically resized to the size of the monitor, so that, no matter of the resolution, it should look good.<br /><br />It is worth remembering that if you are using Scriptaculous, you have to make some changes, and if you already use jQuery, should leave <a href="http://jquery.com/" rel="nofollow">only one version</a>.<br /><br /><b>Author page |</b> <a href="http://srobbin.com/jquery-plugins/backstretch/" rel="nofollow">Backstretch</a>

Blog Design Create a Background Slideshow for Blogger

In the previous post we saw how to make the blog's background fill the screen regardless of the resolution of the monitor. The method t...

Read more »

Rounded Corners and Shadows for Images using CSS

<div class="post-body"><div class="post-adss"><script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><!-- 336 X 280 BELOW POST --><br /><ins class="adsbygoogle" data-ad-client="ca-pub-3724264266838443" data-ad-slot="8562193732" style="display: inline-block; height: 280px; width: 336px;"></ins><script>(adsbygoogle = window.adsbygoogle || []).push({}); </script></div><div id="adsmiddle11713643587438335516">Here are some unique border styles that you can apply to blogger images by using the <b>border-radius </b>property and defining either all four corners simultaneously or applying the rounded border only to some of them.<br /><div class="ssmainhide" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-3J92HVxirlcQGXto6uarPRswtN0yiBl_dS4pn-56Cnf6g-S5YYtyEs58Wx68lpFV2OUqaT6LECMnWsYhe6eI1gjyhMKLK-ObtppQ__hSEFSFc6LMlQHEmyLFnzgBr9GQrDvp_tjSE6ah/s1600/rounded-borders-and-shadows-for-blogger-with-css.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-3J92HVxirlcQGXto6uarPRswtN0yiBl_dS4pn-56Cnf6g-S5YYtyEs58Wx68lpFV2OUqaT6LECMnWsYhe6eI1gjyhMKLK-ObtppQ__hSEFSFc6LMlQHEmyLFnzgBr9GQrDvp_tjSE6ah/s320/rounded-borders-and-shadows-for-blogger-with-css.jpg" width="320" /></a></div><br />One of the advantages of CSS3 is that we can apply rounded borders without complicating things too much and one of the options would be to use these edges or borders to images in the blog posts, to which we can also add some hover effects such as shading and rounded borders accompanied by transitions. <br /><br />Note: if you need more info about how to add rounded corners on images, follow these links:<br />- <a href="/2015/06/css-basics-how-to-apply-rounded-corners_73.html">CSS Basics. How to Apply Rounded Corners On Images #1</a><br />- <a href="/2015/06/css-basics-how-to-apply-rounded-corners_25.html">CSS Basics. How to Apply Rounded Corners On Images #2</a><br /><br />Below are a few examples of these borders and how the images behave when you hover over them.<br />If you want to use one of these styles, just copy the code below the image, then go to <b>Template</b>, click on the <b>Edit HTML</b> button and paste that code before <b>]]></b:skin></b> (CTRL + F to find it)<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikWmA8bbyUB5PTgGy0WeFoXMcmw0KKsVoZl9L2VZZB5r-92POpXc88ML2gIrfJFVnVugCg4woI6GYfpGN3bkm3HqVWlRzqK4KHpfmyCiRHPR8xOXFkMzRNliM_-9taTOD4mczZQXEWgvEP/s1600/rounded-borders-and-shadows-for-blogger-with-css1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" class="firstpicround" height="290" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikWmA8bbyUB5PTgGy0WeFoXMcmw0KKsVoZl9L2VZZB5r-92POpXc88ML2gIrfJFVnVugCg4woI6GYfpGN3bkm3HqVWlRzqK4KHpfmyCiRHPR8xOXFkMzRNliM_-9taTOD4mczZQXEWgvEP/s1600/rounded-borders-and-shadows-for-blogger-with-css1.jpg" width="400" /></a></div><div class="pinit-visibility" onmouseover="this.style.opacity=1;this.style.visibility='visible'" style="left: 348px; opacity: 0; position: absolute; top: 527.5px; visibility: hidden; z-index: 9999;"></div><blockquote class="tr_bq"><b>.post-body img</b> {<br />border:0;<br />padding:0;<br />-moz-transition: all 1s;<br />-webkit-transition: all 1s;<br />-o-transition: all 1s;<br />}<br /><b>.post-body img:hover</b> {<br />box-shadow: 0px 0px 15px #000; <span style="color: #38761d;">/* Shadow */</span><br />border-radius: 50%; <span style="color: #38761d;">/* Rounded border */</span><br />-moz-transition: all 1s;<br />-webkit-transition: all 1s;<br />-o-transition: all 1s;<br />cursor:pointer;<br />}</blockquote><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikWmA8bbyUB5PTgGy0WeFoXMcmw0KKsVoZl9L2VZZB5r-92POpXc88ML2gIrfJFVnVugCg4woI6GYfpGN3bkm3HqVWlRzqK4KHpfmyCiRHPR8xOXFkMzRNliM_-9taTOD4mczZQXEWgvEP/s1600/rounded-borders-and-shadows-for-blogger-with-css1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" class="secondpicround" height="290" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikWmA8bbyUB5PTgGy0WeFoXMcmw0KKsVoZl9L2VZZB5r-92POpXc88ML2gIrfJFVnVugCg4woI6GYfpGN3bkm3HqVWlRzqK4KHpfmyCiRHPR8xOXFkMzRNliM_-9taTOD4mczZQXEWgvEP/s1600/rounded-borders-and-shadows-for-blogger-with-css1.jpg" width="400" /></a></div><div class="pinit-visibility" onmouseover="this.style.opacity=1;this.style.visibility='visible'" style="left: 348px; opacity: 0; position: absolute; top: 1188.5px; visibility: hidden; z-index: 9999;"></div><blockquote class="tr_bq"><b>.post-body img</b> {<br />background:#FFF; <span style="color: #38761d;">/* background color around the image */</span><br />padding:15px; <span style="color: #38761d;">/* space between border and image */</span><br />-moz-transition: all 1s;<br />-webkit-transition: all 1s;<br />-o-transition: all 1s;<br />}<br /><b>.post-body img:hover</b> {<br />box-shadow: 0px 0px 15px #000; <span style="color: #38761d;">/* Shadow */</span><br />border-radius: 0% 50%; <span style="color: #38761d;">/* Rounded border */</span><br />-moz-transition: all 1s;<br />-webkit-transition: all 1s;<br />-o-transition: all 1s;<br />cursor:pointer;<br />}</blockquote><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikWmA8bbyUB5PTgGy0WeFoXMcmw0KKsVoZl9L2VZZB5r-92POpXc88ML2gIrfJFVnVugCg4woI6GYfpGN3bkm3HqVWlRzqK4KHpfmyCiRHPR8xOXFkMzRNliM_-9taTOD4mczZQXEWgvEP/s1600/rounded-borders-and-shadows-for-blogger-with-css1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" class="thirdpicround" height="290" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikWmA8bbyUB5PTgGy0WeFoXMcmw0KKsVoZl9L2VZZB5r-92POpXc88ML2gIrfJFVnVugCg4woI6GYfpGN3bkm3HqVWlRzqK4KHpfmyCiRHPR8xOXFkMzRNliM_-9taTOD4mczZQXEWgvEP/s1600/rounded-borders-and-shadows-for-blogger-with-css1.jpg" width="400" /></a></div><div class="pinit-visibility" onmouseover="this.style.opacity=1;this.style.visibility='visible'" style="left: 348px; opacity: 0; position: absolute; top: 1858.5px; visibility: hidden; z-index: 9999;"></div><blockquote class="tr_bq"><b>.post-body img</b> {<br />background:#FFF; <span style="color: #38761d;">/* the background color around the image *</span>/<br />padding:15px; <span style="color: #38761d;">/* The Space Between Border and Image */</span><br />border-radius: 50% 0; <span style="color: #38761d;">/* Rounded border */</span><br />box-shadow: 0px 0px 15px #000; <span style="color: #38761d;">/* Shadow */</span><br />-moz-transition: all 1s;<br />-webkit-transition: all 1s;<br />-o-transition: all 1s;<br />}<br /><b>.post-body img:hover</b> {<br />border-radius:0; <span style="color: #38761d;">/* This removes the border roundness (value 0) */</span><br />-moz-transition: all 1s;<br />-webkit-transition: all 1s;<br />-o-transition: all 1s;<br />cursor:pointer;<br />}</blockquote><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikWmA8bbyUB5PTgGy0WeFoXMcmw0KKsVoZl9L2VZZB5r-92POpXc88ML2gIrfJFVnVugCg4woI6GYfpGN3bkm3HqVWlRzqK4KHpfmyCiRHPR8xOXFkMzRNliM_-9taTOD4mczZQXEWgvEP/s1600/rounded-borders-and-shadows-for-blogger-with-css1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" class="fourthpicround" height="290" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikWmA8bbyUB5PTgGy0WeFoXMcmw0KKsVoZl9L2VZZB5r-92POpXc88ML2gIrfJFVnVugCg4woI6GYfpGN3bkm3HqVWlRzqK4KHpfmyCiRHPR8xOXFkMzRNliM_-9taTOD4mczZQXEWgvEP/s1600/rounded-borders-and-shadows-for-blogger-with-css1.jpg" width="400" /></a></div><div class="pinit-visibility" onmouseover="this.style.opacity=1;this.style.visibility='visible'" style="left: 348px; opacity: 0; position: absolute; top: 2533.5px; visibility: hidden; z-index: 9999;"></div><blockquote class="tr_bq"><b>.post-body img</b> {<br />box-shadow: 0px 0px 15px #000;<span style="color: #38761d;"> /* Shadow */</span><br />border-radius: 50%;<span style="color: #38761d;"> /* Rounded border */</span><br />border:0;<br />padding:0;<br />-moz-transition: all 1s;<br />-webkit-transition: all 1s;<br />-o-transition: all 1s;<br />}<br /><b>.post-body img:hover</b> {<br />box-shadow: 0; <span style="color: #38761d;">/* With this we remove the shadow (value 0) */</span><br />border-radius: 0; <span style="color: #38761d;">/* This removes the border roundness (value 0) */</span><br />-moz-transition: all 1s;<br />-webkit-transition: all 1s;<br />-o-transition: all 1s;<br />cursor:pointer;<br />}</blockquote><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikWmA8bbyUB5PTgGy0WeFoXMcmw0KKsVoZl9L2VZZB5r-92POpXc88ML2gIrfJFVnVugCg4woI6GYfpGN3bkm3HqVWlRzqK4KHpfmyCiRHPR8xOXFkMzRNliM_-9taTOD4mczZQXEWgvEP/s1600/rounded-borders-and-shadows-for-blogger-with-css1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" class="fifthpicround" height="291" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikWmA8bbyUB5PTgGy0WeFoXMcmw0KKsVoZl9L2VZZB5r-92POpXc88ML2gIrfJFVnVugCg4woI6GYfpGN3bkm3HqVWlRzqK4KHpfmyCiRHPR8xOXFkMzRNliM_-9taTOD4mczZQXEWgvEP/s1600/rounded-borders-and-shadows-for-blogger-with-css1.jpg" width="400" /></a></div><div class="pinit-visibility" onmouseover="this.style.opacity=1;this.style.visibility='visible'" style="left: 348px; opacity: 0; position: absolute; top: 3220px; visibility: visible; z-index: 9999;"></div><blockquote class="tr_bq"><b>.post-body img</b> {<br />border-radius: 45% / 20%; <span style="color: #38761d;">/* Rounded border */</span><br />box-shadow: 0px 0px 15px #000; <span style="color: #38761d;">/* Shadow */</span><br />padding:0;<br />-moz-transition: all 1s;<br />-webkit-transition: all 1s;<br />-o-transition: all 1s;<br />}<br /><b>.post-body img:hover</b> {<br />border-radius: 0; <span style="color: #38761d;">/* This removes the roundness of border (value 0) */</span><br />-moz-transition: all 1s;<br />-webkit-transition: all 1s;<br />-o-transition: all 1s;<br />cursor:pointer;<br />}</blockquote><style type="text/css"> .firstpicround { border:0; padding:0; -moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s; } .firstpicround:hover { box-shadow: 0px 0px 15px #000; border-radius: 50%; -moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s; cursor:pointer; } .secondpicround { border-radius: 0; border:0; padding:15px; background:#FFF; -moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s; } .secondpicround:hover { border-radius: 0% 50%; box-shadow: 0px 0px 15px #000; -moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s; cursor:pointer; } .thirdpicround { background:#FFF; padding:15px; border-radius: 50% 0; box-shadow: 0px 0px 15px #000; -moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s; } .thirdpicround:hover { border-radius:0; border:0; -moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s; cursor:pointer; } .fourthpicround { box-shadow: 0px 0px 15px #000; border-radius: 50%; border:0; padding:0; -moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s; } .fourthpicround:hover { box-shadow: 0; border-radius: 0; border:0; -moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s; cursor:pointer; } .fifthpicround { border-radius: 45% / 20%; box-shadow: 0px 0px 15px #000; padding:0; -moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s; } .fifthpicround:hover { border-radius: 0; -moz-transition: all 1s; -webkit-transition: all 1s; -o-transition: all 1s; cursor:pointer; } </style> So these effects will apply to all images uploaded to your Blogger posts. But if you want to apply them only on certain pictures then change <b>.post-body img</b> with <b>.rounded</b>  and <b>.post-body img:hover</b> with <b>.rounded:hover</b></div><div style="clear: both: margin: 10px 5px; display: none;"></div><div id="adsmiddle21713643587438335516">Then add the <b><span style="color: #990000;">rounded</span></b> class selector in the image's code:<br /><blockquote class="tr_bq"><img <span style="color: #990000;"><b>class="rounded"</b></span> src="<span style="color: blue;">Image URL</span>"/></blockquote>These are just some examples, however, you can modify them anytime by adding or deleting more CSS styles, it depends on everybody's tastes or needs. But as you have seen, we can make the images look way more attractive and this has been done only with CSS ;) </div><script type="text/javascript">var obj0=document.getElementById("adsmiddle11713643587438335516"); var obj1=document.getElementById("adsmiddle21713643587438335516"); 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 Rounded Corners and Shadows for Images using CSS

Here are some unique border styles that you can apply to blogger images by using the border-radius property and defining either all four cor...

Read more »

How to make the background image of the blog fill the entire screen

A constant question is how to make the background image of the blog always fill the entire screen regardless of the resolution of the monitor. And that is when we put a background image as measured by our monitor forgetting that there are actually monitors of all resolutions, very small and very large. So if we put an image according to our screen, there will be someone with a bigger monitor that surely will not see the whole picture or it will be repeated, and in this case, using very small monitors, the image will be seen incomplete.<br><br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfaurYZsKh_me8332HZNLeOW2EThcixqujCudNLuzxCGqMCfC3MVzFuESaW80CmSM2AfQynjW5Hbz-mBIbKHgCFkfwlkUpZa2xS8s7kpMYWgBIJ0RrQ5uk-wQU5CKFGj2-187RifqhooIk/s1600/background-image-of-the-blog-cover-the-entire-screen.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="blogger tricks, blogger tutorials, blogger blogspot" border="0" height="282" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfaurYZsKh_me8332HZNLeOW2EThcixqujCudNLuzxCGqMCfC3MVzFuESaW80CmSM2AfQynjW5Hbz-mBIbKHgCFkfwlkUpZa2xS8s7kpMYWgBIJ0RrQ5uk-wQU5CKFGj2-187RifqhooIk/s400/background-image-of-the-blog-cover-the-entire-screen.png" title="how to make the background image of a blog cover the entire screen" width="400"></a><div class="pinit-visibility" style="position: absolute; z-index: 9999; top: 325.5px; left: 348px; visibility: visible; opacity: 0;" onmouseover="this.style.opacity=1;this.style.visibility='visible'"></div></div><br>Here I will talk about two solutions for this, one is using <b>CSS3</b>, and another is using <b>jQuery</b>. With either of these two, we'll make the background image of the page to fill the entire screen regardless of the resolution of it.<br><br><h3><span style="color: #0b5394;">CSS3</span></h3><br>The first option is using CSS3, the advantage with this method is that we do not overload the blog with scripts, we use only the <b>background-size</b> property that is responsible for doing what we want.<br>The disadvantage is that this property is supported only by modern browsers, so in the case of Internet Explorer, it will only be seen for version 9 and above, in other browsers there shouldn't be any problem.<br> The method is very simple, just go to <b>Template</b> - <b>Edit HTML</b>, locate the background that is within <b>body { </b>and replace it with this:<br><blockquote class="tr_bq">background: url(Image URL) no-repeat center center fixed;<br>background-size: cover;</blockquote><i>Note: to find the <b>body {</b> tag, click anywhere inside the code area then press the CTRL + F keys and paste it inside the search box. If you can't find it, remove the space between "body" and "{" then search again.</i><br><br>It would look something like this:<br><blockquote class="tr_bq">body {<br><i>background: url</i>(<span style="color: blue;"><b>URL of the image</b></span>) <i>no-repeat center center fixed;</i><br><i>background-size: cover;</i><br>margin:0;<br>}</blockquote>Just put the URL of the image and that's it.<br><br><h3><span style="color: #0b5394;">jQuery</span></h3><br>With this method we will use jQuery with <b>BackStretch</b> plugin, the advantage is that it works in all browsers, including IE7 and above. And if you already use jQuery, you don't have to worry about the loading time of your blog, because the plugin is actually small.<br><br>To use this method in your blog, go to <b>Template</b> - <b>Edit HTML</b> and before <b></head></b> paste this script:<br><blockquote class="tr_bq"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/><br><script type='text/javascript'><br>//<![CDATA[<br>/*<br>* jQuery Backstretch<br>* Version 1.2.8<br>* http://srobbin.com/jquery-plugins/jquery-backstretch/<br>* Add a dynamically-resized background image to the page<br>* Copyright (c) 2012 Scott Robbin (srobbin.com)<br>* Licensed under the MIT license<br>* https://raw.github.com/srobbin/jquery-backstretch/master/LICENSE.txt<br>*/<br>;(function(a){a.backstretch=function(p,b,l){function s(){if(p){var b;0==c.length?c=a("<div />").attr("id","backstretch").css({left:0,top:0,position:m?"fixed":"absolute",overflow:"hidden",zIndex:-999999,margin:0,padding:0,height:"100%",width:"100%"}):c.find("img").addClass("deleteable");b=a("<img />").css({position:"absolute",display:"none",margin:0,padding:0,border:"none",zIndex:-999999,maxWidth:"none"}).bind("load",function(d){var b=a(this),e;b.css({width:"auto",height:"auto"});e=this.width||a(d.target).width();d=this.height||a(d.target).height();n=e/d;q();b.fadeIn(g.speed,function(){c.find(".deleteable").remove();"function"==typeof l&&l()})}).appendTo(c);0==a("body #backstretch").length&&(0===a(window).scrollTop()&&window.scrollTo(0,0),a("body").append(c));c.data("settings",g);b.attr("src",p);a(window).unbind("resize.backstretch").bind("resize.backstretch",function(){"onorientationchange"in window&&window.pageYOffset===0&&window.scrollTo(0,1);q()})}}function q(){try{j={left:0,top:0},rootWidth=h=o.width(),rootHeight=r?window.innerHeight:o.height(),f=h/n,f>=rootHeight?(k=(f-rootHeight)/2,g.centeredY&&(j.top="-"+k+"px")):(f=rootHeight,h=f*n,k=(h-rootWidth)/2,g.centeredX&&(j.left="-"+k+"px")),c.css({width:rootWidth,height:rootHeight}).find("img:not(.deleteable)").css({width:h,height:f}).css(j)}catch(a){}}var t={centeredX:!0,centeredY:!0,speed:0},c=a("#backstretch"),g=c.data("settings")||t;c.data("settings");var o,m,r,n,h,f,k,j;b&&"object"==typeof b&&a.extend(g,b);b&&"function"==typeof b&&(l=b);a(document).ready(function(){var b=window,d=navigator.userAgent,c=navigator.platform,e=d.match(/AppleWebKit\/([0-9]+)/),e=!!e&&e[1],f=d.match(/Fennec\/([0-9]+)/),f=!!f&&f[1],g=d.match(/Opera Mobi\/([0-9]+)/),h=!!g&&g[1],i=d.match(/MSIE ([0-9]+)/),i=!!i&&i[1];o=(m=!((-1<c.indexOf("iPhone")||-1<c.indexOf("iPad")||-1<c.indexOf("iPod"))&&e&&534>e||b.operamini&&"[object OperaMini]"==={}.toString.call(b.operamini)||g&&7458>h||-1<d.indexOf("Android")&&e&&533>e||f&&6>f||"palmGetResource"in window&&e&&534>e||-1<d.indexOf("MeeGo")&&-1<d.indexOf("NokiaBrowser/8.5.0")||i&&6>=i))?a(window):a(document);r=m&&window.innerHeight;s()});return this}})(jQuery);<br>//]]><br></script><br><script><br>$.backstretch("<b><span style="color: blue;">URL of the image</span></b>");<br></script></blockquote><br>Put the URL of the image where indicated and ready.<br><br>As you can see both options are easy to apply, each with its pros and cons, but the result is the same, stretching the background image to fit the screen of any monitor regardless of the resolution of it.<br><br>Remember that in the case of jQuery method, you should verify that you are not using Mootools or Scriptaculous, and if you already have it, you will have to implement some changes in the script to make it compatible. And if you already use jQuery <a href="http://jquery.com/" rel="nofollow">remember having only one version</a> - the last one.

Blog Design How to make the background image of the blog fill the entire screen

A constant question is how to make the background image of the blog always fill the entire screen regardless of the resolution of the monit...

Read more »

Possibly the most simple jQuery Slider

<div id="adsmiddle16100340079707481511">Do you have jQuery in your site or blog and space to insert 10 lines of code? If the answer is yes, and you want to have an automatic slideshow, this is the simplest code I've seen so far. So, having a succession of images added inside a box with a common general container, would give this result:<br><div class="ssmainhide" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVJvWKddfOYAG0aW-jGc6LIVIOJ7ltWxOi74C6ez9N9Fh82niVrNA-coJl4hyphenhyphenkCBRsloaUSxEYOem-mcx_yLzAFcOWRxmHYMz_1cNunpsmZr7Kyx-We31fOWFk6krLTV9A2ArbQTdsEm2r/s1600/simple-jquery-slider-for-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="jquery slider for blogger, slideshows" border="0" height="191" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVJvWKddfOYAG0aW-jGc6LIVIOJ7ltWxOi74C6ez9N9Fh82niVrNA-coJl4hyphenhyphenkCBRsloaUSxEYOem-mcx_yLzAFcOWRxmHYMz_1cNunpsmZr7Kyx-We31fOWFk6krLTV9A2ArbQTdsEm2r/s1600/simple-jquery-slider-for-blogger.png" title="Possibly the most simple jQuery Slider" width="320"></a></div><script type="text/javascript">//<![CDATA[ $(function(){ $('#slider div:gt(0)').hide(); setInterval(function(){ $('#slider div:first-child').fadeOut(0) .next('div').fadeIn(1000) .end().appendTo('#slider');}, 4000); }); //]]></script> <script type="text/javascript">//<![CDATA[ $(function(){ $('#slider1 div:gt(0)').hide(); setInterval(function(){ $('#slider1 div:first-child').fadeOut(0) .next('div').fadeIn(1000) .end().appendTo('#slider1');}, 4000); }); //]]></script> <style> #slider { overflow: hidden; width: 500px; height: 300px; margin: 0 auto; padding: 0; position: relative; } #slider > div { position:absolute; top:0; left:0; } #slider img { width:100%; min-height:300px; margin:0; padding:0; border:0; } </style><br><div id="slider"> <div style="display: block;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2hSHqCPAsYgaBezad9AFHROUD5KqBhaOaig2i9-jhSJ7ZnR8X4zWl3O51Cu0TzzBw8LmbJt_IqG_ROtvOf17cYgUuSOl4IoRW7J_pYBtuTfKYg8IKJBwYaOX34empxe17qQ86nyQM7Ls/s1600/nature-leaves-macro-photography.png"></div><div style="display: none;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrWbAFFQ_j_NB29seeORnusnyHKJHx_1S_qHPthu6OIxcr-ql7VldqJ5f4ARqk85FlvQElnAecG31tuuydYP56IyDZKPTbSq4OQmDPPd8SrQm6phFr5a7hGf_DyTL4Owme5Hb-jSBwOlI/s1600/funny-grey-cat-running-on-grass.png"></div><div style="display: none;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMVPQSu1uO8AsrxthgN75mpfLIb9MWFgPNPi7tweyZEQ99gmTzC7o_iltDp7aXwXBEKibuoNYzoiYA1adXG-dQeqGs0iP2ieNNwrXcGn2i4NhwC-Xf91UIKH1I8UnKnWbG-JtHENsdNqc/s1600/fairytale-spruce-trees-forest-amazon-rainforest.png"></div><div style="display: none;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6B1s3WswSHOomMYJcWHjt3WZtZ_R8lX2nrJFCUL3wxnLQyiIvvwJ9HLUjFtAHWUbF76B37xpe3SXI57s_nu-ScxPqXsYecZdbo33UwCEGUN8xoMf06piJO8uOIz433pc9PszdCcuGpU4/s1600/dandelions-field-in-warm-summer-sunset.png"></div></div><br><b>Related:</b> <a href="/2015/07/create-css-image-slider-with-thumbnails.html" style="color: blue;" target="_blank">Image Slider using only CSS</a><br><br><h2>How to add a Simple jQuery Slider to Blogger</h2><h3>Step 1. Adding the JavaScript</h3>If you don't have jQuery, then you should add this line just above the <span style="background-color: yellow;"></head></span> tag to make the slideshow work:<br><blockquote><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js' type='text/javascript'/></blockquote>Where the </head> tag can be found? Go to Template > Edit HTML > click anywhere inside the code area and press the CTRL + F keys. Inside the search box, type this tag and hit Enter to find it:<br><blockquote class="tr_bq"></head></blockquote><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS5-nztlDjFNC3nz9gLpUJ4CTmiwnQVXAVVmZobY4vnhj4lhCbJKIIOMcbGzcKCjmYtB_9Mp9PDk94L8enCWX5gLRllni_HDmBOMBskotiNQVcIIu212e1KlmYqofKuMLSwW1XUS-ORZQ8/s1600/open-blogger-search-box-ctrl%252Bf.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="246" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS5-nztlDjFNC3nz9gLpUJ4CTmiwnQVXAVVmZobY4vnhj4lhCbJKIIOMcbGzcKCjmYtB_9Mp9PDk94L8enCWX5gLRllni_HDmBOMBskotiNQVcIIu212e1KlmYqofKuMLSwW1XUS-ORZQ8/s1600/open-blogger-search-box-ctrl%252Bf.png" width="640"></a></div><br>Once confident that you have the library in your template, let's add the below script as well, which will make the set of images load as a slider:<br><blockquote class="tr_bq"><script type="text/javascript">//<![CDATA[<br>$(function(){<br>    $('#slider div:gt(0)').hide();<br>    setInterval(function(){<br>      $('#slider div:first-child').fadeOut(0)<br>         .next('div').fadeIn(1000)<br>         .end().appendTo('#slider');}, 4000);<br>});<br>//]]></script></blockquote>Finally, save the changes by clicking the "Save Template" button. And now, that we finished adding the scripts, let's add the images to where we want to show...<br><br><h3>2. Create/Add the HTML for the Slider</h3>After implementing the above scripts in the template (although, we could add them directly into a gadget, on a page or even inside the post HTML), we will create the slider like the one above.<br><br>Use the following HTML structure to show the image slider:<br><blockquote class="tr_bq"><div id="slider"><br>    <div><img src="<span style="color: blue;">IMAGE_URL</span>"/></div><br>    <div><img src="<span style="color: blue;">IMAGE_URL</span>"/></div><br>    <div><img src="<span style="color: blue;">IMAGE_URL</span>"/></div><br></div></blockquote>- as a gadget: go to Layout, click "Add a gadget" and choose the "HTML/JavaScript" option <br>- inside a post/page: create a new post and paste the code inside the HTML box.<br><br>So this is all you need. For me, it is quite lightweight and efficient, much more than most libraries that are used nowadays - perhaps, too often.<br><br><h4>jQuery Slider Settings</h4>The last three numbers of this slider will allow us to adjust some things. All of them are expressed in milliseconds (4000 = 4 seconds):<br><br>fadeOut(<span style="color: #0b5394;">0</span>): Time for the outgoing image <br>fadeIn(<span style="color: #0b5394;">1000</span>): Time for the next image<br>('#slider');},<span style="color: #0b5394;">4000</span>): Time spent in each image<br><br><h4>How it Works</h4><span style="color: #990000;">$('#slider div:gt(0)').hide();</span><br>With<span style="color: #134f5c;"> <span style="color: #990000;">gt(x)</span></span><span style="color: #990000;"> </span>we select all the <span style="color: #0b5394;">div</span>s from the number (x). In this case, 0 is the first, so what this line does is to hide (<span style="color: #990000;">hide()</span>) all the boxes - except the first, that will be the image visible initially.<br><br><span style="color: #990000;">setInterval(function(){ [<span style="color: #0b5394;">what we will do</span>] }, 4000);</span><br>We need to reiterate a few things from time to time and we can accomplish this with<span style="color: #134f5c;"> <span style="color: #990000;">setInterval</span></span> - the delay time between each set.<br><br><span style="color: #990000;">$('#slider div:first-child').fadeOut(0)</span><br>Within each of these intervals, we remove (<span style="color: #990000;">fadeOut</span>) the first box (<span style="color: #990000;">div:first-child</span>) with a fade out effect, so that images are out of visibility...<br><br><span style="color: #990000;">.next('div').fadeIn(1000)</span><br>...and make the following box (<span style="color: #990000;">next</span>) to appear gradually (<span style="color: #990000;">fadeIn</span>).<br><br><span style="color: #990000;">.end().appendTo('#slider');</span><br>Finally, this will show the first image and will move it to the end<span style="color: #134f5c;"> </span>(<span style="color: #990000;">appendTo</span>) of the "list".<br><br><span style="color: #134f5c;"><span style="color: #990000;">end()</span> </span>resets the number of elements that we move forward with <span style="color: #990000;">next()</span>. Thus, the first child made earlier to disappear, is the one that is sent down the stack, and not the image that is currently visible.<br><br><h3>3. Customizing the Slider</h3>Even though, we don't need CSS to make the slider work, we can still change its look to display images in different sizes, include captions, or even improve the transition. Here are some ideas:<br><style> #slider1 { overflow: hidden; width: 500px; height: 300px; border:3px solid #242424; border-radius: 40px; margin: 0 auto; padding: 0; position: relative; } #slider1 > div { position:absolute; top:0; left:0; } #slider1 img { width:100%; min-height:300px; margin:0; padding:0; border:0; } #slider1 span{ position: absolute; bottom: 17px; display: block; width: 100%; margin:0; padding: 15px 0; color: #fff; background: #242424; font-size: 18px; line-height:18px; text-align:center; } </style> <br><div id="slider1"> <div style="display: block;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2hSHqCPAsYgaBezad9AFHROUD5KqBhaOaig2i9-jhSJ7ZnR8X4zWl3O51Cu0TzzBw8LmbJt_IqG_ROtvOf17cYgUuSOl4IoRW7J_pYBtuTfKYg8IKJBwYaOX34empxe17qQ86nyQM7Ls/s1600/nature-leaves-macro-photography.png"><span>Text 2</span></div><div style="display: none;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrWbAFFQ_j_NB29seeORnusnyHKJHx_1S_qHPthu6OIxcr-ql7VldqJ5f4ARqk85FlvQElnAecG31tuuydYP56IyDZKPTbSq4OQmDPPd8SrQm6phFr5a7hGf_DyTL4Owme5Hb-jSBwOlI/s1600/funny-grey-cat-running-on-grass.png"><span>Text 3</span></div><div style="display: none;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMVPQSu1uO8AsrxthgN75mpfLIb9MWFgPNPi7tweyZEQ99gmTzC7o_iltDp7aXwXBEKibuoNYzoiYA1adXG-dQeqGs0iP2ieNNwrXcGn2i4NhwC-Xf91UIKH1I8UnKnWbG-JtHENsdNqc/s1600/fairytale-spruce-trees-forest-amazon-rainforest.png"><span>This is a long text 4</span></div><div style="display: none;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6B1s3WswSHOomMYJcWHjt3WZtZ_R8lX2nrJFCUL3wxnLQyiIvvwJ9HLUjFtAHWUbF76B37xpe3SXI57s_nu-ScxPqXsYecZdbo33UwCEGUN8xoMf06piJO8uOIz433pc9PszdCcuGpU4/s1600/dandelions-field-in-warm-summer-sunset.png"><span>Text 1</span></div></div><br>In the above example, we limited the size of the container and prevented the overflow of larger images. Finally, we added rounded borders and centered the slider. <br><blockquote class="tr_bq">#slider { <br>overflow: hidden;<br>width: 500px; <br>height: 300px; <br>border:3px solid #242424;<br>border-radius: 40px;<br>margin: 0 auto;<br>padding: 0;<br>position: relative;<br>}</blockquote>If we would have made the parent box of the images positioned absolutely, they would have overlapped each other. For this reason, we have set the "position" of the container to "relative".<br></div> <br>As for the images, we will set the width to 100% to make them fill the entire container and the <span style="color: #990000;">min-height</span> to 300px, to fill up all the available height of the parent box, so that there will be no empty space around them.<br><blockquote class="tr_bq">#slider > div {<br>position:absolute;<br>top:0;<br>left:0;<br>}<br>#slider img {<br>width:100%;<br>min-height:300px;<br>margin:0;<br>padding:0; <br>border:0;<br>}</blockquote>To add more elements like a text or caption, we will enclose the text in <span style="color: #990000;">span</span> tags and will set the position to "absolute". And to make the text appear at the bottom of the image, we will use the bottom property:<br><blockquote class="tr_bq">#slider span {<br>position: absolute;<br>bottom: 17px;<br>display: block;<br>width: 100%;<br>margin:0;<br>padding: 15px 0;<br>color: #fff;<br>background: #242424;<br>font-size: 18px;<br>line-height:18px;<br>text-align:center;<br>}</blockquote>If you want change the look of this slider - go to Template, hit the Customize button and click on the Advanced > Add CSS tab and paste the above CSS codes inside the empty box.<br><br>The HTML markup for this last example, would look like this:<br><blockquote class="tr_bq"><div id="slider"><br><div><a href="<span style="color: blue;">Link_URL1</span>"><img src="<span style="color: blue;">Image_URL1</span>" /></a><span style="color: #990000;"><span></span>TEXT1<span style="color: #990000;"></span></span></div><br><div><a href="<span style="color: blue;">Link_URL2</span>"><img src="<span style="color: blue;">Image_URL2</span>" /></a><span style="color: #990000;"><span></span>TEXT2<span style="color: #990000;"></span></span></div><br><div><a href="<span style="color: blue;">Link_URL3</span>"><img src="<span style="color: blue;">Image_URL3</span>" /></a><span style="color: #990000;"><span></span>TEXT3<span style="color: #990000;"></span></span></div><br></div></blockquote><i>Please note that if you add it inside the post's HTML, don't switch back to the compose tab, as this might remove the span tags of the image captions and the text might not be displayed properly. </i>

Blog Design Possibly the most simple jQuery Slider

Do you have jQuery in your site or blog and space to insert 10 lines of code? If the answer is yes, and you want to have an automatic slides...

Read more »

Horizontal menu with sub-tabs in two columns for Blogger

This is a very nice horizontal menu in which its sub-tabs are displayed in two columns and is also made with CSS, without any scripts.<br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipIK4PmnwwPjHvGYZiIGYPJ2ukvrYtGN1TYFEDatkabru7m9WzjRgZgJ9xyRbcUtt1QkWk02Cs9LTRfMnTRXivsoFwqmFmQcHcna9wj_-Thyf0HNi02Wphk2serkNfoXUhSmiMN_o63cCw/s1600/add-a-menu-with-sub-tabs-in-two-columns-to-blogger-blogspot.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="blogger navigation menu, css menu, drop-down menu" border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipIK4PmnwwPjHvGYZiIGYPJ2ukvrYtGN1TYFEDatkabru7m9WzjRgZgJ9xyRbcUtt1QkWk02Cs9LTRfMnTRXivsoFwqmFmQcHcna9wj_-Thyf0HNi02Wphk2serkNfoXUhSmiMN_o63cCw/s1600/add-a-menu-with-sub-tabs-in-two-columns-to-blogger-blogspot.png" title="Navigation Menu with Sub-tabs in Two Columns for Blogger" width="320"></a><div class="pinit-visibility" style="position: absolute; z-index: 9999; top: 171.5px; left: 348px; visibility: visible; opacity: 0;" onmouseover="this.style.opacity=1;this.style.visibility='visible'"></div></div>The "advantage" so to speak, is that the sub-tabs when arranged in two columns are not very long, so it will be neat and less space along. You can see an example here:<br><style type="text/css">#menucol { width:700px; height:37px; background-image: -moz-linear-gradient(top, #666666, #000000); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #666666), color-stop(1.0, #000000)); filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#666666,endColorStr=#000000); border-bottom:1px solid #666666; border-top:1px solid #666666; margin:0 auto;padding:0 auto; overflow:hidden; } #topwrapper { width:940px; height:40px; margin:0 auto; padding:0 auto; } .clearit { clear: both; height: 0; line-height: 0.0; font-size: 0; } #top { width:100%; } #top, #top ul { padding: 0; margin: 0; list-style: none; } #top a { border-right:1px solid #333333; text-align:left; display: block; text-decoration: none; padding:10px 12px 11px; font:bold 14px Arial; text-transform:none; color:#eee; } #top a:hover { background:#000000; color:#F6F6F6; } #top a.submenucol { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP39whdPII7GklpkrjgVIJR2TBo4Hz2a2NtP4Z8HXDu2GC7z3Ift4S3zf4Kr1gX55hFo_MZLo0Ag0M37lxdP8q5fTxxkDFYUaavAltJM-jtLHZiVZQk5PZuEpbMr8VNsq3Db8LaZRsC2g/s1600/arrow_white.gif); background-repeat: no-repeat; padding: 10px 24px 11px 12px; background-position: right center; } #top li { float: left; position: relative; } #top li { position: static !important; width: auto; } #top li ul, #top ul li { width:300px; } #top ul li a { text-align:left; padding: 6px 15px; font-size:13px; font-weight:normal; text-transform:none; font-family:Arial, sans-serif; border:none; } #top li ul { z-index:100; position: absolute; display: none; background-color:#F1F1F1; margin-left:-80px; padding:10px 0; border-radius: 0px 0px 6px 6px; box-shadow:0 2px 2px rgba(0,0,0,0.6); filter:alpha(opacity=87); opacity:.87; } #top li ul li { width:150px; float:left; margin:0; padding:0; } #top li:hover ul, #top li.hvr ul { display: block; } #top li:hover ul a, #top li.hvr ul a { color:#333; background-color:transparent; text-decoration:none; } #top ul a:hover { text-decoration:underline!important; color:#444444 !important; } </style> <br><div id="menucol"><div id="topwrapper"><ul id="top"><li><a href="http://YOUR URL HERE.com">Tab 1 Title Here</a></li><li><a href="http://YOUR URL HERE.com">Tab 2 Title Here</a></li><li><a class="submenucol" href="https://www.blogger.com/blogger.g?blogID=3126197138969349243#">Tab 3 Title Here</a><ul><li><a href="http://YOUR URL HERE.com">Sub Tab 3.1</a></li><li><a href="http://YOUR URL HERE.com">Sub Tab 3.2</a></li><li><a href="http://YOUR URL HERE.com">Sub Tab 3.3</a></li><li><a href="http://YOUR URL HERE.com">Sub Tab 3.4</a></li><li><a href="http://YOUR URL HERE.com">Sub Tab 3.5</a></li><li><a href="http://YOUR URL HERE.com">Sub Tab 3.6</a></li></ul></li><li><a class="submenucol" href="https://www.blogger.com/blogger.g?blogID=3126197138969349243#">Tab 4 Title Here</a><ul><li><a href="http://YOUR URL HERE.com">Sub Tab 4.1</a></li><li><a href="http://YOUR URL HERE.com">Sub Tab 4.2</a></li><li><a href="http://YOUR URL HERE.com">Sub Tab 4.3</a></li><li><a href="http://YOUR URL HERE.com">Sub Tab 4.4</a></li><li><a href="http://YOUR URL HERE.com">Sub Tab 4.5</a></li><li><a href="http://YOUR URL HERE.com">Sub Tab 4.6</a></li></ul></li><li><a class="submenucol" href="https://www.blogger.com/blogger.g?blogID=3126197138969349243#">Tab 5 Title Here</a><ul><li><a href="http://YOUR URL HERE.com">Sub Tab 5.1</a></li><li><a href="http://YOUR URL HERE.com">Sub Tab 5.2</a></li><li><a href="http://YOUR URL HERE.com">Sub Tab 5.3</a></li><li><a href="http://YOUR URL HERE.com">Sub Tab 5.4</a></li><li><a href="http://YOUR URL HERE.com">Sub Tab 5.5</a></li><li><a href="http://YOUR URL HERE.com">Sub Tab 5.6</a></li><li><a href="http://YOUR URL HERE.com">Sub Tab 5.7</a></li><li><a href="http://YOUR URL HERE.com">Sub Tab 5.8</a></li></ul></li><li><a href="http://YOUR URL HERE.com">Tab 6 Title Here</a></li></ul><br class="clearit"></div></div><br><h2><span style="color: #ed683b;">Adding A Horizontal Menu With Sub Tabs in Two Columns To Blogger</span></h2><span style="color: #3d85c6;"><b>STEP 1</b></span>: In Blogger, go to your "<b>Layout</b>" and on the "Page Elements" section.<br><ul><li>Click on the "<b>Add a Gadget</b>" link just under your header image</li><li>From the Gadget's List, select "<b>HTML/JavaScript</b>" option.</li></ul><span style="color: #3d85c6;"><b>STEP 2</b></span>: Simply copy and paste this ENTIRE code into your widget. <b>Note:</b> Leave the "Title" section of this widget blank.<br><blockquote class="tr_bq"><div id='menucol'><br><div id='topwrapper'><br><ul id='top'><br><li><a href='<span style="color: blue;">http://YOUR URL HERE.com</span>'><b>Tab 1 Title Here</b></a></li><br><li><a href='<span style="color: blue;">http://YOUR URL HERE.com</span>'><b>Tab 2 Title Here</b></a></li><br><li><a class='submenucol' href='<span style="color: blue;"><b>#</b></span>'><b>Tab 3 Title Here</b></a><br><ul><br><li><a href='<span style="color: blue;">http://YOUR URL HERE.com</span>'><i><b>Sub Tab 3.1</b></i></a></li><br><li><a href='<span style="color: blue;">http://YOUR URL HERE.com</span>'><i><b>Sub Tab 3.2</b></i></a></li><br><li><a href='<span style="color: blue;">http://YOUR URL HERE.com</span>'><i><b>Sub Tab 3.3</b></i></a></li><br><li><a href='<span style="color: blue;">http://YOUR URL HERE.com</span>'><i><b>Sub Tab 3.4</b></i></a></li><br><li><a href='<span style="color: blue;">http://YOUR URL HERE.com</span>'><i><b>Sub Tab 3.5</b></i></a></li><br><li><a href='<span style="color: blue;">http://YOUR URL HERE.com</span>'><i><b>Sub Tab 3.6</b></i></a></li><br></ul><br></li><br><li><a class='submenucol' href='<span style="color: blue;"><b>#</b></span>'><b>Tab 4 Title Here</b></a><br><ul><br><li><a href='<span style="color: blue;">http://YOUR URL HERE.com</span>'><i><b>Sub Tab 4.1</b></i></a></li><br><li><a href='<span style="color: blue;">http://YOUR URL HERE.com</span>'><i><b>Sub Tab 4.2</b></i></a></li><br><li><a href='<span style="color: blue;">http://YOUR URL HERE.com</span>'><i><b>Sub Tab 4.3</b></i></a></li><br><li><a href='<span style="color: blue;">http://YOUR URL HERE.com</span>'><i><b>Sub Tab 4.4</b></i></a></li><br><li><a href='<span style="color: blue;">http://YOUR URL HERE.com</span>'><i><b>Sub Tab 4.5</b></i></a></li><br><li><a href='<span style="color: blue;">http://YOUR URL HERE.com</span>'><i><b>Sub Tab 4.6</b></i></a></li><br></ul><br></li><br><li><a class='submenucol' href='<span style="color: blue;"><b>#</b></span>'><b>Tab 5 Title Here</b></a><br><ul><br><li><a href='<span style="color: blue;">http://YOUR URL HERE.com</span>'><i><b>Sub Tab 5.1</b></i></a></li><br><li><a href='<span style="color: blue;">http://YOUR URL HERE.com</span>'><i><b>Sub Tab 5.2</b></i></a></li><br><li><a href='<span style="color: blue;">http://YOUR URL HERE.com</span>'><i><b>Sub Tab 5.3</b></i></a></li><br><li><a href='<span style="color: blue;">http://YOUR URL HERE.com</span>'><i><b>Sub Tab 5.4</b></i></a></li><br><li><a href='<span style="color: blue;">http://YOUR URL HERE.com</span>'><i><b>Sub Tab 5.5</b></i></a></li><br><li><a href='<span style="color: blue;">http://YOUR URL HERE.com</span>'><i><b>Sub Tab 5.6</b></i></a></li><br><li><a href='<span style="color: blue;">http://YOUR URL HERE.com</span>'><i><b>Sub Tab 5.7</b></i></a></li><br><li><a href='<span style="color: blue;">http://YOUR URL HERE.com</span>'><i><b>Sub Tab 5.8</b></i></a></li><br></ul><br></li><br><li><a href='<span style="color: blue;">http://YOUR URL HERE.com</span>'><b>Tab 6 Title Here</b></a></li><br><br></ul><br><br class='clearit'/><br></div><br></div> </blockquote>Customize your main tabs by changing the Tab Titles to whatever you want. Include a URL for each one if you want it to be 'clickable'. If not, you can just put a <span style="color: blue;"><b># </b></span>sign where it says <span style="color: blue;">http://YOUR URL HERE.com</span><br><br>You can add or delete as many of the main tabs as you need, just make sure to copy the entire code for the main tab for each additional tab you want:<br><blockquote class="tr_bq"><li><a href='<span style="color: blue;">http://YOUR URL HERE.com</span>'><b>Tab 7 Title Here</b></a><br><ul><br><li><a href='<span style="color: blue;">http://YOUR URL HERE.com</span>'><b><i>Sub Tab 7.1</i></b></a></li><br><li><a href='<span style="color: blue;">http://YOUR URL HERE.com</span>'><i><b>Sub Tab 7.2</b></i></a></li><br><li><a href='<span style="color: blue;">http://YOUR URL HERE.com</span>'><i><b>Sub Tab 7.3</b></i></a></li><br></ul><br></li> </blockquote><span style="color: #3d85c6;"><b>STEP 3</b></span>: Now let's go a step further and add the CSS style in our Template<br><ul><li>Go to <b>Template </b>> <b>Edit HTML</b></li></ul><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiesVi7T58As94NJd8-JyIaDFMA4zoElG743c_tdabE8Zpyprmh475tgzV89MWHS55ibnkvp8Up45EAzyTBict2v4Ai0zMP7vNnLjHzEMJu9iGCeOoi7PS2jgMQ5qQEE4nvidasKz7Y-wB9/s1600/blogger_blogspot_template_edit_html_tutorial.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="256" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiesVi7T58As94NJd8-JyIaDFMA4zoElG743c_tdabE8Zpyprmh475tgzV89MWHS55ibnkvp8Up45EAzyTBict2v4Ai0zMP7vNnLjHzEMJu9iGCeOoi7PS2jgMQ5qQEE4nvidasKz7Y-wB9/s1600/blogger_blogspot_template_edit_html_tutorial.png" width="320"></a></div><ul><li>Click on the sideways arrow next to <b><b:skin>...</b:skin> </b></li></ul><br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiY1dlgPPaLw6_7vJ1mM103x3n-KpWQ6dVFOEyqe5hEA1ckeauAxEk3qxL6JAXJktNhQzUimxdCLKmwyB8j_UOWLL8AkWlgPeFUGmrD7YVqJGZet7W1g5MHcMwTbaxDlPR0QuqYjlcWmF6m/s1600/blogger-template-editor-css-styles.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="45" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiY1dlgPPaLw6_7vJ1mM103x3n-KpWQ6dVFOEyqe5hEA1ckeauAxEk3qxL6JAXJktNhQzUimxdCLKmwyB8j_UOWLL8AkWlgPeFUGmrD7YVqJGZet7W1g5MHcMwTbaxDlPR0QuqYjlcWmF6m/s1600/blogger-template-editor-css-styles.png" width="320"></a></div><ul><li>Then click anywhere inside the code area and search - using CTRL + F keys - for the <b>]]></b:skin></b> tag and just above <b>]]></b:skin></b> add this code:</li></ul><blockquote class="tr_bq">/* Horizontal menu with 2 columns<br>----------------------------------------------- */<br>#menucol {<br>width:940px; <br>height:37px;<br>background-image: -moz-linear-gradient(top, #666666, #000000);<br>background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #666666), color-stop(1.0, #000000));<br>filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#666666,endColorStr=#000000);<br>border-bottom:1px solid #666666;<br>border-top:1px solid #666666;<br>margin:0 auto;padding:0 auto;<br>overflow:hidden;<br>}<br>#topwrapper {<br>width:940px; <br>height:40px;<br>margin:0 auto;<br>padding:0 auto;<br>}<br>.clearit {<br>clear: both;<br>height: 0;<br>line-height: 0.0;<br>font-size: 0;<br>}<br>#top {<br>width:100%;<br>}<br>#top, #top ul {<br>padding: 0;<br>margin: 0;<br>list-style: none;<br>}<br>#top a {<br>border-right:1px solid #333333;<br>text-align:left;<br>display: block;<br>text-decoration: none;<br>padding:10px 12px 11px;<br>font:bold 14px Arial;<br>text-transform:none;<br>color:#eee;<br>}<br>#top a:hover {<br>background:#000000;<br>color:#F6F6F6; <br>}<br>#top a.submenucol {<br>background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP39whdPII7GklpkrjgVIJR2TBo4Hz2a2NtP4Z8HXDu2GC7z3Ift4S3zf4Kr1gX55hFo_MZLo0Ag0M37lxdP8q5fTxxkDFYUaavAltJM-jtLHZiVZQk5PZuEpbMr8VNsq3Db8LaZRsC2g/s1600/arrow_white.gif); <br>background-repeat: no-repeat;<br>padding: 10px 24px 11px 12px;<br>background-position: right center;<br>}<br>#top li {<br>float: left;<br>position: relative;<br>}<br>#top li {<br>position: static !important; <br>width: auto;<br>}<br>#top li ul, #top ul li {<br>width:300px;<br>} <br>#top ul li a {<br>text-align:left;<br>padding: 6px 15px;<br>font-size:13px;<br>font-weight:normal;<br>text-transform:none;<br>font-family:Arial, sans-serif;<br>border:none;<br>}<br>#top li ul {<br>z-index:100;<br>position: absolute;<br>display: none;<br>background-color:#F1F1F1; <br>margin-left:-80px;<br>padding:10px 0;<br>border-radius: 0px 0px 6px 6px;<br>box-shadow:0 2px 2px rgba(0,0,0,0.6);<br>filter:alpha(opacity=87);<br>opacity:.87;<br>}<br>#top li ul li {<br>width:150px; <br>float:left;<br>margin:0;<br>padding:0;<br>}<br>#top li:hover ul, #top li.hvr ul {<br>display: block;<br>}<br>#top li:hover ul a, #top li.hvr ul a {<br>color:#333; <br>background-color:transparent;<br>text-decoration:none;<br>}<br>#top ul a:hover {<br>text-decoration:underline!important;<br>color:#444444 !important; <br>}</blockquote><ul><li>Now find (CTRL + F) this line:</li></ul><blockquote class="tr_bq">/* Tabs</blockquote><ul><li>It will also have some little lines beneath:</li></ul><blockquote class="tr_bq">/* Tabs<br>----------------------------------------------- */</blockquote><ul><li>And just below these little lines, delete the code below until you reach at:</li></ul><blockquote class="tr_bq">/* Columns<br>----------------------------------------------- */</blockquote><ul><li>Instead of the code that you have removed, add this one:</li></ul><blockquote class="tr_bq">#crosscol ul {z-index: 200; padding:0 !important;}<br>#crosscol li:hover {position:relative;}<br>#crosscol ul li {padding:0 !important;}<br>.tabs-outer {z-index:1;}<br>.tabs-inner {padding: 0 0px;}</blockquote><div style="text-align: center;"><span style="color: #666666;"><i><b>See this screenshot for more info:</b></i></span></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTkBxdvrLgsRy2YFXPOXAJc4gLO3MFlgy5cjSogBHIUA-L4z4HpXyLS1kBEXyZefD5i3V3xBP-LRAtcDZpgMQRCkGpMbgCmci2Aa3TeAK2T7Y2bVo02C_T35wc_G4o8vCWQXDeAODNuzsE/s1600/menu-with-sub-tabs-in-two-columns-for-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="menu for blogger, blogger gadgets, blogger widgets" border="0" height="166" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTkBxdvrLgsRy2YFXPOXAJc4gLO3MFlgy5cjSogBHIUA-L4z4HpXyLS1kBEXyZefD5i3V3xBP-LRAtcDZpgMQRCkGpMbgCmci2Aa3TeAK2T7Y2bVo02C_T35wc_G4o8vCWQXDeAODNuzsE/s1600/menu-with-sub-tabs-in-two-columns-for-blogger.png" title="How to Add a Beautiful Horizontal Navigation Menu To Blogger" width="400"></a></div><span style="color: #3d85c6;"><b>STEP 4</b></span>: The final step is to Save the Template and you are done!<br><br>Visit your blog to see a beautiful navigation menu just below header. <br>If you have any questions or need help, leave a comment below.

Blog Design Horizontal menu with sub-tabs in two columns for Blogger

This is a very nice horizontal menu in which its sub-tabs are displayed in two columns and is also made with CSS, without any scripts. The ...

Read more »

Fade In/Out Page Loading Effect On Blogger Posts

A very common effect in jQuery is the fade effect that hides or shows an element by fading it, and we can use it in many ways as for example in the blog's navigation. The following script does just that, by loading the page with a fading effect when we browse on internal links that are in the blog, such as post titles, labels links, archive, navigation links, etc..<br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2VnNXVjONXxUupPdUTFYIRhhUPM5F7KvEO5Rd0LCiOahnkAuQa_abmnC0RSyyYqWie-NetEkU8FUwc6Gz29AlQiHp2y-5Xp-6HGKgYSwgfjJQb0HKW9tu7tcsPBH2tAjETUEzAwfwcdM-/s1600/fading-effect-with-jQuery-on-blogger-pages.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="jQuery effect, fade in effect, blogger jQuery" border="0" height="211" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2VnNXVjONXxUupPdUTFYIRhhUPM5F7KvEO5Rd0LCiOahnkAuQa_abmnC0RSyyYqWie-NetEkU8FUwc6Gz29AlQiHp2y-5Xp-6HGKgYSwgfjJQb0HKW9tu7tcsPBH2tAjETUEzAwfwcdM-/s1600/fading-effect-with-jQuery-on-blogger-pages.png" title="fade in - fade out effect on loading pages" width="400"></a><div class="pinit-visibility" style="position: absolute; z-index: 9999; top: 224px; left: 348px; visibility: visible; opacity: 0;" onmouseover="this.style.opacity=1;this.style.visibility='visible'"></div></div>You can see an example in this <a href="http://helploggerdemo.blogspot.com/" style="color: blue; text-decoration: none;">demo blog</a>, click on the title of any post and see the fading effect when the page is loading.<br><br><h2><span style="color: orange;">How To Implement the Fade In Loading Effect</span></h2>1) To put this fading effect on your blog, go to your <b>Template</b> > <b>Edit HTML</b> :<br><br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiesVi7T58As94NJd8-JyIaDFMA4zoElG743c_tdabE8Zpyprmh475tgzV89MWHS55ibnkvp8Up45EAzyTBict2v4Ai0zMP7vNnLjHzEMJu9iGCeOoi7PS2jgMQ5qQEE4nvidasKz7Y-wB9/s1600/blogger_blogspot_template_edit_html_tutorial.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="fading effect, blogger blogspot, blogger tricks" border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiesVi7T58As94NJd8-JyIaDFMA4zoElG743c_tdabE8Zpyprmh475tgzV89MWHS55ibnkvp8Up45EAzyTBict2v4Ai0zMP7vNnLjHzEMJu9iGCeOoi7PS2jgMQ5qQEE4nvidasKz7Y-wB9/s1600/blogger_blogspot_template_edit_html_tutorial.png" title="Fading effect on Blogger loading pages" width="400"></a></div><br>2) Click anywhere inside the code area and search for the <b></head></b> tag using CTRL + F keys:<br><br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis2Djenmsx3rEu2QTiibr2EhhSuK8cpJT2XRkSFS_fit_iTl3dqGPtso16t_G21cf-Uzq33WqpSz0VXKKs1YJo3BBmJXyzSg_XEJB7S1BvHZoimBSwhnDXhjxu_t1y-HE40x2xngw_IIJ-/s1600/fade-effect-on-blogger-loading-pages-posts.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="245" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis2Djenmsx3rEu2QTiibr2EhhSuK8cpJT2XRkSFS_fit_iTl3dqGPtso16t_G21cf-Uzq33WqpSz0VXKKs1YJo3BBmJXyzSg_XEJB7S1BvHZoimBSwhnDXhjxu_t1y-HE40x2xngw_IIJ-/s1600/fade-effect-on-blogger-loading-pages-posts.png" width="400"></a></div><br>3) Then, just above <b></head></b> add the following code:<br><blockquote class="tr_bq"><b><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/></b><br><script type='text/javascript'><br>//<![CDATA[<br>$(document).ready(function() {<br>$("body").css("z-index", "-10");<br>$("body").fadeIn(0);<br><br>$("a").click(function(event){<br>event.preventDefault();<br>linkLocation = this.href;<br>$("body").fadeOut(500, redirectPage); });<br>function redirectPage() {<br>window.location = linkLocation;<br>}<br>});<br>//]]><br></script><br><style><br>html {<br>background-color: <i><b>#F2F2F2</b></i>; <b><span style="color: #6aa84f;">/* Color fading */</span></b><br>}<br></style></blockquote>4) Save the changes and that's it. In green you can see where to change the color that fades on a loading page.<br><br>The original script hides the body of the page while loading, I prefer to change that property with a negative z-index to avoid problems with the search engine robots that may effect the positioning.<br><br><b>Problems?</b><br><br>Consider that such effects could increase the blog loading time, so I recommend using it only when your blog loads fast and does not have too many scripts.<br><br>If you already use another version of jQuery remove the other, leaving only this which will be readed first.<br><br>If you are using Mootools or Scriptaculous, then you have to make some modifications to the code in order to be compatible.<br> If you have another script with a fade effect, then it could interfere with this and you might not see anything on the page except the color fading, in such cases it is better without this script.<br><br>You can also use this effect only on some links, for example, if you want to appear only when you click on the post titles in the navigation links (older posts and newer posts), and on the top tabs, then replace this line:<br><blockquote>$("a").click(function(event){</blockquote>With this:<br><blockquote>$(".post-title a, .blog-pager-older-link, .blog-pager-newer-link, .tabs").click(function(event){</blockquote>In some cases, the page can load for a second and then load with the fade effect, this may be "normal" because the browser is slow to read the script on page load.<br><br>Apart from these drawbacks, I think it's a very elegant way to load blog pages while browsing them, don't you think?

Blog Design Fade In/Out Page Loading Effect On Blogger Posts

A very common effect in jQuery is the fade effect that hides or shows an element by fading it, and we can use it in many ways as for exampl...

Read more »

Using the :before and :after Pseudo Elements on Sidebar Titles

This is another method of using the <b><i>:after</i></b> and <i><b>:before</b></i> properties and it will work without too many problems in any browser, including IE8. What this trick will do is to divide the header bar into left and right sections, where the left will contain an explanatory title and the right, a related link.<br><br>The idea of generating Adobe-like Arrow Headers was actually discussed by <a href="http://css-tricks.com/adobe-like-arrow-headers" rel="nofollow" style="color: #0000ee; text-decoration: none;">css-tricks</a> and adapted to Blogger.<br><br><h2><span style="color: orange;">How to Add Adobe-like Headers to Blogger</span></h2><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKq3uAgXil8M9GTbbl4LF0Lje75BR7HW3bF2wFRw5l-TxIc7cCQA67ESB_KhSsZLHoPRD-L27_ArfdnV4uNc-LC74JbX7a3K2lGEKDpRQQ0a32MPFvst_GuzAYIhn2psqBPUM9lNCC22kq/s1600/adobe-like-arrows-for-blogger-headings.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="blogger gadgets, blogger tricks, blogger blogspot" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKq3uAgXil8M9GTbbl4LF0Lje75BR7HW3bF2wFRw5l-TxIc7cCQA67ESB_KhSsZLHoPRD-L27_ArfdnV4uNc-LC74JbX7a3K2lGEKDpRQQ0a32MPFvst_GuzAYIhn2psqBPUM9lNCC22kq/s1600/adobe-like-arrows-for-blogger-headings.png" title="adobe like headers to Blogger sidebar"></a></div><br><span style="color: #38761d;"><b>Step 1.</b></span> Log in to your <a href="https://www.blogger.com/home">Blogger dashboard</a> > go to <b>Template</b> > <b>Edit HTML,</b> then click anywhere inside the code area to search - using the CTRL + F keys - for the following tag:<br><blockquote class="tr_bq"></head></blockquote><span style="color: #38761d;"><b>Step 2. </b></span>Just above it, copy and paste this code:<br><blockquote class="tr_bq"> <style><br>.module h2 { <br>  background-color: #D5D5D5;<br>  border-radius: 20px 0 0 20px;<br>  color: #FFFFFF;<br>  font-family: Verdana;<br>  font-size: 14px;<br>  line-height: 32px;<br>  margin: 0;<br>  padding: 0 0 0 20px;<br>  text-shadow: 2px 1px 1px #222;<br>}<br><br>.module h2 a { <br>    border-left: 5px solid #ffffff;<br>    color: #101921;<br>    float: right;<br>    font-size: 14px;<br>    text-decoration: none;<br>    text-shadow: none;<br>    padding: 0 10px;<br>    position: relative;<br>   -moz-transition: padding 0.1s linear;<br>   -webkit-transition: padding 0.1s linear;<br>   -ms-transition: padding 0.1s linear;<br>   -o-transition: padding 0.1s linear;<br>}<br>.module h2 a:hover { <br>  padding: 0 32px;<br>}<br><br>.module h2 a:before, .module h2 a:after {<br>    content: &quot;&quot;;<br>    height: 0;<br>    position: absolute;<br>    top: 50%;<br>    width: 0;<br>}<br>.module h2 a:before {<br>    border-bottom: 8px solid transparent;<br>    border-right: 8px solid #ffffff; <br>    border-top: 8px solid transparent;<br>    left: -12px;<br>    margin-top: -8px;<br>}<br>.module h2 a:after {<br>    border-bottom: 6px solid transparent;<br>    border-top: 6px solid transparent;<br>    left: -6px;<br>    margin-top: -6px;<br>}<br><br>.module.blue h2 a {background-color: #A2D5EC;}<br>.module.blue h2 a:hover {background-color: #C5F0FF;}<br>.module.blue h2 a:after {border-right: 6px solid #A2D5EC;}<br>.module.blue h2 a:hover:after {border-right-color: #C5F0FF;}<br><br>.module.yellow h2 a {background-color: #FCE98D;}<br>.module.yellow h2 a:hover {background-color: #FFD700;}<br>.module.yellow h2 a:after {border-right: 6px solid #FCE98D;}<br>.module.yellow h2 a:hover:after {border-right-color: #FFD700;}<br><br>.module.green h2 a {background-color: #bada55;}<br>.module.green h2 a:hover {background: #C7E176;}<br>.module.green h2 a:after {border-right: 6px solid #bada55;}<br>.module.green h2 a:hover:after {border-right-color: #C7E176;}<br><br>.module.red h2 a {background-color: #F0A5B5;}<br>.module.red h2 a:hover {background-color: #FFC7D2;}<br>.module.red h2 a:after {border-right: 6px solid #F0A5B5;}<br>.module.red h2 a:hover:after {border-right-color: #FFC7D2;}<br></style></blockquote><span style="color: #38761d;"><b>Step 3.</b></span> Save the Template.<br><br><div style="text-align: center;"><i><b><span style="color: #666666;">Screenshot:</span></b></i></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWGdW-NWFnwPLAAzSLBl8IsNzcrmhk70c8B7roC683syVG-rEGA3x3u8lVTjvaOysINcYLy2kGzf3A2C46kxcdk1H_dlhaou915qJrDpaw-Sce1mWPTdMxc-CAoWBL8vH8YgiqXhwcNNKS/s1600/adobe-like-arrows-for-blogger-sidebar-headers.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="137" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWGdW-NWFnwPLAAzSLBl8IsNzcrmhk70c8B7roC683syVG-rEGA3x3u8lVTjvaOysINcYLy2kGzf3A2C46kxcdk1H_dlhaou915qJrDpaw-Sce1mWPTdMxc-CAoWBL8vH8YgiqXhwcNNKS/s1600/adobe-like-arrows-for-blogger-sidebar-headers.png" width="400"></a></div><br><br><span style="color: #38761d;"><b>Step 4.</b></span> Now go to <b>Layout </b>and <i><b>Add a new HTML/JavaScript Gadget</b> </i>with one of the codes below for each of the widget title:<br><br>Background in <span style="color: #3d85c6;"><b>blue</b></span>:<br><blockquote class="tr_bq"><div class="module blue"><br><h2><b>Title in</b> <a href="<i><span style="color: blue;">Link URL</span></i>"><b>Blue</b></a></h2><br></div></blockquote>Background in <b><span style="color: #f1c232;">yellow</span></b><span style="color: #3d85c6;">:</span><br><blockquote class="tr_bq"><div class="module yellow"><br><h2><b>Title in</b> <a href="<span style="color: blue;"><i>Link URL</i></span>"><b>Yellow</b></a></h2><br></div></blockquote>Background in <b><span style="color: #38761d;">green</span></b>:<br><blockquote class="tr_bq"><div class="module green"><br><h2><b>Title in</b> <a href="<i><span style="color: blue;">Link URL</span></i>"><b>Green</b></a></h2><br></div></blockquote>Background in <b><span style="color: #cc0000;">red</span></b>:<br><blockquote class="tr_bq"><div class="module red"><br><h2><b>Title in</b> <a href="<i><span style="color: blue;">Link URL</span></i>"><b>Red</b></a></h2><br></div></blockquote><br><b>Note: </b>Change "<b>Title in</b>" text with your widget's title and <b>Blue</b>, <b>Yellow</b>, <b>Green </b>and <b>Red </b>with the text on the right, then add <i>a </i><span style="color: blue;"><i>Link URL</i></span> to it.<br> <span style="color: #38761d;"><b>Step 5.</b></span> After you saved the HTML/Javascript gadgets containing the codes above, drag and drop them just above the widgets you want to show... and <b>Save the Arrangement</b>.<br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitGkUZQ1Wb5dlu4G992OdeIj8L-15S17_EUd8zc56WcyAlKbT9nBYg6KzklhA5kzEUT_yK1AkymbqUQS6PiPtHGzFSxeW4lsE4dA2en1VHe6MJPE349gzD9pFo87C_oeJLt2kx41MYddYH/s1600/save-blogger-arrangement.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="blogger tricks, blogger tutorials" border="0" height="174" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitGkUZQ1Wb5dlu4G992OdeIj8L-15S17_EUd8zc56WcyAlKbT9nBYg6KzklhA5kzEUT_yK1AkymbqUQS6PiPtHGzFSxeW4lsE4dA2en1VHe6MJPE349gzD9pFo87C_oeJLt2kx41MYddYH/s1600/save-blogger-arrangement.png" title="how to add adobe like arrow headers to blogger" width="320"></a><div class="pinit-visibility" style="position: absolute; z-index: 9999; top: 183.5px; left: 348px; visibility: visible; opacity: 1;" onmouseover="this.style.opacity=1;this.style.visibility='visible'"></div></div><br><b><span style="color: #3d85c6;">DEMO</span></b><br><br>You can see how the sidebar titles has been replaced with some cool header bars on this <a href="http://helploggerdemo.blogspot.com/" style="color: #0000ee; text-decoration: none;">demo blog</a>.

Blog Design Using the :before and :after Pseudo Elements on Sidebar Titles

This is another method of using the :after and :before properties and it will work without too many problems in any browser, including IE...

Read more »

Multi Hover Effect On Blogger Images Using Pure CSS

Today I'm going to show you how to add an amazing mouseover effect for Blogger images using only CSS, in which moving your mouse over an image from different directions (from above, from below, etc) will cause an overlay transitioned in from the same vector. This trick will change not only the images appearance when moving mouse over them, but will also allow you to add inside a text with a description.<br><br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsmRCaHi4iZCBWZWFgGYbWYfYeBwfeNOzRO0j_f6A1dZLIcXDIqL0sqRI11V72eg_4L_LQlODvwH0AsGLv5S3dP7T2kW052B0IUG65Rpju3gKHam21eY6mcB1qOR2P02aF6UC3pb8FSjOW/s1600/hover-effect-on-mouseover-for-blogger-using-css.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="hover effect, mouseover, blogger hover effects" border="0" height="213" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsmRCaHi4iZCBWZWFgGYbWYfYeBwfeNOzRO0j_f6A1dZLIcXDIqL0sqRI11V72eg_4L_LQlODvwH0AsGLv5S3dP7T2kW052B0IUG65Rpju3gKHam21eY6mcB1qOR2P02aF6UC3pb8FSjOW/s1600/hover-effect-on-mouseover-for-blogger-using-css.png" title="hover effect on blogger images using css" width="320"></a><div class="pinit-visibility" style="position: absolute; z-index: 9999; top: 269px; left: 348px; visibility: visible; opacity: 0;" onmouseover="this.style.opacity=1;this.style.visibility='visible'"></div></div><br>You can see the effect on this image below: try moving your mouse from the left, right, and above. <br><br><div class="multi-hover"> <span>hover right</span> <span>hover top</span> <span>hover left</span> <span>hover bottom</span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDs12kaLGDv5L1u3ZtVA6PE8Ma-BfJcHqK07tQhlfjghmK-GIDivDLtXF_ABnRRP2_4AE_Uygnjy0xkhmfkuidT4ajhwj5mJn7noLyW-dmMjmvdtIcYFjxGE8QywHGZgvgp8Hx6PHO7ljv/s1600/flowers.jpg"></div><br><h2><span style="color: #f16d0a;">Adding Hover Effect From Different Directions on Blogger Images</span></h2>First thing to do is to add the CSS style to our Template:<br><br><span style="color: #3d85c6;"><b>Step 1.</b></span> From <a href="https://www.blogger.com/home">Blogger Dashboard</a>, go to <b>Template</b> and press the <b>Edit HTML</b> button<br><br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiesVi7T58As94NJd8-JyIaDFMA4zoElG743c_tdabE8Zpyprmh475tgzV89MWHS55ibnkvp8Up45EAzyTBict2v4Ai0zMP7vNnLjHzEMJu9iGCeOoi7PS2jgMQ5qQEE4nvidasKz7Y-wB9/s1600/blogger_blogspot_template_edit_html_tutorial.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiesVi7T58As94NJd8-JyIaDFMA4zoElG743c_tdabE8Zpyprmh475tgzV89MWHS55ibnkvp8Up45EAzyTBict2v4Ai0zMP7vNnLjHzEMJu9iGCeOoi7PS2jgMQ5qQEE4nvidasKz7Y-wB9/s1600/blogger_blogspot_template_edit_html_tutorial.png" width="400"></a></div><br><br><span style="color: #3d85c6;"><b>Step 2.</b></span> Search for the <b></head></b> tag - to find it, click anywhere inside the code area, press CTRL + F keys and type it in the search box.<br><br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsGo1_9y5j9AHnrkp18HDBg8iwEBwZf2MwNjpf5sq-wApD1PH9JZ_eu05Yl9UOhjpRF1Fa7BvgCTP-VDI6rJoZRWgdvavnyZXX8D6c59Mqf3octtejiUhlqgTcFtMURVu_nyLPjmd1Gk84/s1600/mouse-over-effect-for-blogger-blogspot.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="345" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsGo1_9y5j9AHnrkp18HDBg8iwEBwZf2MwNjpf5sq-wApD1PH9JZ_eu05Yl9UOhjpRF1Fa7BvgCTP-VDI6rJoZRWgdvavnyZXX8D6c59Mqf3octtejiUhlqgTcFtMURVu_nyLPjmd1Gk84/s1600/mouse-over-effect-for-blogger-blogspot.png" width="640"></a></div><br><span style="color: #3d85c6;"><b>Step 3. </b></span>After you found it, add the following style just above it:  <br><blockquote class="tr_bq"><style><br><span style="color: #6aa84f;">  /* The container and the image */</span><br>  div.multi-hover {<br>    overflow: hidden;<br>    position: relative;<br>    vertical-align: middle;<br>    width: 100%;<br>    height: 358px;<br>    line-height: 358px;<br>  }<br>  div.multi-hover img {width: 100%;}<br><br><span style="color: #6aa84f;">/* The texts that, by default, are hidden */</span><br>  div.multi-hover span {<br>    color: #FFF;<br>    font-size: 32px;<br>    font-weight: bold;<br>    height: 100%;<br>    opacity: 0; <br>    position: absolute;<br>    text-align: center;<br>    transition: all 0.3s linear 0s;<br>    width: 100%;<br>  }<br><br><span style="color: #6aa84f;">/* And this is what will generate the effect */</span><br>  div.multi-hover span:nth-child(1) { <span style="color: #6aa84f;">/* right */</span><br>    background: none repeat scroll 0 0 rgba(255, 189, 36, 0.6);<br>    left: 90%;<br>    top: 0;<br>  }<br>  div.multi-hover span:nth-child(2) { <span style="color: #6aa84f;">/* top */</span><br>    background: none repeat scroll 0 0 rgba(106, 170, 255, 0.6);<br>    left: 0;<br>    top: -80%;<br>  }<br>  div.multi-hover span:nth-child(3) { <span style="color: #6aa84f;">/* left */</span><br>    background: none repeat scroll 0 0 rgba(204, 87, 166, 0.6);<br>    left: -90%;<br>    top: 0;<br>  }<br>  div.multi-hover span:nth-child(4) { <span style="color: #6aa84f;">/* bottom */</span><br>    background: none repeat scroll 0 0  rgba(97, 181, 115, 0.6);<br>    left: 0;<br>    top: 80%;<br>  }<br><br>  div.multi-hover span:hover {opacity: 1;}<br>  div.multi-hover span:nth-child(2n+1):hover {left: 0;}<br>  div.multi-hover span:nth-child(2n):hover {top: 0;}<br><br></style></blockquote><span style="color: #3d85c6;"><b>Step 4. </b></span>Save the Template<br><br>Now we are going to add the HTML that is nothing but a DIV where we included four SPAN tags with texts and an image:<br><br><span style="color: #3d85c6;"><b>Step 5.</b></span> Choose <b>Posts</b>, create a <b>New Post</b>, click on the <b>HTML </b>tab (<span style="color: red;"><b>1</b></span>) and paste this code inside the empty box:<br><blockquote class="tr_bq"><div class=multi-hover><br>  <span><b>hover right</b></span><br>  <span><b>hover top</b></span><br>  <span><b>hover left</b></span><br>  <span><b>hover bottom</b></span><br>  <img src="<i><span style="color: blue;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPZVHR7DFufbgfDTavw3Ht1oUegfxUJweVkTLyAA-3cb5HF9x1QZ7hTTxGQxMmMMyd5tTZ1Nb6GMMoYuSw-vmarkaaJuIBPnHbpk96YdlTwLp-kdq8VICWswvbrMURwrUI8JiHUGTaXVo/s1600/flowers</span></i>"><br></div></blockquote>Add your own text/description to "hover right", "hover top", "hover left" and "hover bottom" (<b><span style="color: red;">2</span></b>) and replace the url in blue with the image URL (<b><span style="color: red;">3</span></b>) where you want to apply the effect.<br> <span style="color: #cc0000;">Important! </span>Do not click on the <b>Compose</b> tab, otherwise the changes will be lost.<br><br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0qmhflayh6wFJMndzSDnUkjnD2lcUSsNgpVg1D7AhUfSpErAIiagqeyNIpvLXTy23eATDk-fylB1VRLpr4t5KXYMtmfVY6BwPict5-71qsgV2MAKH0lv2pEGpwaKzcWwYROeo7YPRGXks/s1600/multi-hover-effect-for-images-css-trick-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="160" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0qmhflayh6wFJMndzSDnUkjnD2lcUSsNgpVg1D7AhUfSpErAIiagqeyNIpvLXTy23eATDk-fylB1VRLpr4t5KXYMtmfVY6BwPict5-71qsgV2MAKH0lv2pEGpwaKzcWwYROeo7YPRGXks/s1600/multi-hover-effect-for-images-css-trick-blogger.png" width="400"></a><div class="pinit-visibility" style="position: absolute; z-index: 9999; top: 176.5px; left: 348px; visibility: visible; opacity: 0;" onmouseover="this.style.opacity=1;this.style.visibility='visible'"></div></div><br><span style="color: #3d85c6;"><b>Step 6.</b></span> After you finished editing your post, click <b>Publish</b> (<span style="color: red;"><b>4</b></span>)<br><br>And that's it... enjoy! :)<br><style> /* The container and the image */ div.multi-hover { overflow: hidden; position: relative; vertical-align: middle; width: 100%; height: 358px; line-height: 358px; } div.multi-hover img {width: 100%;} /* The texts that, by default, are hidden */ div.multi-hover span { color: #FFF; font-size: 32px; font-weight: bold; height: 100%; opacity: 0; position: absolute; text-align: center; transition: all 0.3s linear 0s; width: 100%; } /* And this is what will generate the effect */ div.multi-hover span:nth-child(1) { /* right */ background: none repeat scroll 0 0 rgba(255, 189, 36, 0.6); left: 90%; top: 0; } div.multi-hover span:nth-child(2) { /* top */ background: none repeat scroll 0 0 rgba(106, 170, 255, 0.6); left: 0; top: -80%; } div.multi-hover span:nth-child(3) { /* left */ background: none repeat scroll 0 0 rgba(204, 87, 166, 0.6); left: -90%; top: 0; } div.multi-hover span:nth-child(4) { /* bottom */ background: none repeat scroll 0 0 rgba(97, 181, 115, 0.6); left: 0; top: 80%; } div.multi-hover span:hover {opacity: 1;} div.multi-hover span:nth-child(2n+1):hover {left: 0;} div.multi-hover span:nth-child(2n):hover {top: 0;} </style>

Blog Design Multi Hover Effect On Blogger Images Using Pure CSS

Today I'm going to show you how to add an amazing mouseover effect for Blogger images using only CSS, in which moving your mouse over a...

Read more »

Fading Box With Newer/Older Posts Links and Titles for Blogger

The navigation links are those that appear at the bottom of the page that says "Older Posts", "Newer Posts" and "Home" and help us to move through the blog posts. This tutorial will show you how to change the word "Older Posts" and "Newer Posts" for post titles and make these to appear in a box "fading" when you scroll down the page.<br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidDIFIpS-GUNpmFYl-nyXBPVZ3vRAPTreBGKPRob5bZv0i8RIhXI3YhbhIoFrgoXzImDhDK2EWqjcdoymTgiB4yDJz4nOnanEamC_rTtUl74dlKUMxch4FxiMOIPPbYqIyGLEPjROhsvjq/s1600/fading_box_older_newer_posts_titles_blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="blogger gadgets, navigation for blogger" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidDIFIpS-GUNpmFYl-nyXBPVZ3vRAPTreBGKPRob5bZv0i8RIhXI3YhbhIoFrgoXzImDhDK2EWqjcdoymTgiB4yDJz4nOnanEamC_rTtUl74dlKUMxch4FxiMOIPPbYqIyGLEPjROhsvjq/s1600/fading_box_older_newer_posts_titles_blogger.png" title="older posts and newer posts links in a fading box for blogger"></a><div class="pinit-visibility" style="position: absolute; z-index: 9999; top: 276px; left: 348px; visibility: visible; opacity: 1;" onmouseover="this.style.opacity=1;this.style.visibility='visible'"></div></div><div class="separator" style="clear: both; text-align: center;"></div><br>You can see it in action on this <a href="http://helploggerdemo.blogspot.ro/2013/05/the-imaginarium-of-doctor-parnassus.html">demo blog</a> - when you scroll down, the navigation links will appear showing the post titles for the older/newer entries.<br><br>This way to display the navigation links will be seen only in individual entries, while those on the homepage and other parts of the blog will still be displayed as usual.<br><br><h2><span style="color: #3d85c6;">How to Add Navigation Box with Newer & Older Posts on Blogger</span></h2><span style="color: #3d85c6;"><span style="color: #6fa8dc;"><b>Step 1.</b></span> </span>From your Blogger Dashboard, go to <b>Template </b>> <b>Edit HTML</b>, click anywhere inside the code area and search - using CTRL + F - for this line:<br><br><blockquote class="tr_bq"><b:include name='nextprev'/></blockquote><br><i>Screenshot:</i><br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-VGPeZdToW9j0Ablhg-cfKfxSteAmBqbylwGA8AF3uD5aL9M6niSFWPQm062bPHbaFGE7DIC5-vzGAb-SuBh9QU_S-v0HuTqMnek5qYXeAiaIFNwkkypB_xDG1Ka85tLKyeBa-Ow-k9_H/s1600/blogger_navigation_links_older_newer_posts.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="188" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-VGPeZdToW9j0Ablhg-cfKfxSteAmBqbylwGA8AF3uD5aL9M6niSFWPQm062bPHbaFGE7DIC5-vzGAb-SuBh9QU_S-v0HuTqMnek5qYXeAiaIFNwkkypB_xDG1Ka85tLKyeBa-Ow-k9_H/s1600/blogger_navigation_links_older_newer_posts.png" width="640"></a></div><br><span style="color: #6fa8dc;"><b>Step 2.</b></span> REPLACE the code above with this one: <br><br><blockquote class="tr_bq"><b:if cond='data:blog.pageType != &quot;item&quot;'><br><b:include name='nextprev'/><br></b:if><br><b:if cond='data:blog.pageType == &quot;item&quot;'><br><div id='blog-pager-box'><br><h4><u><span style="color: #444444;"><b>Other posts published:</b></span></u></h4><br><b:include name='nextprev'/><br></div><br></b:if></blockquote><br>Note: you can change the "<u><span style="color: #444444;"><b>Other posts published</b></span></u>" title with your own <br><br><span style="color: #6fa8dc;"><b>Step 3.</b> </span>Now add just above <b></head></b> the following code:<br><br><blockquote class="tr_bq"><b:if cond='data:blog.pageType == &quot;item&quot;'><br><b><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/></b><br><script><br>// <![CDATA[<br>$(function() {<br>$('#blog-pager-box').toggle()<br>.css({<br>width: '520px',<br>height: '150px',<br>position: 'fixed',<br>padding: '1em',<br>bottom: 0,<br>right: 0,<br>background: 'url(<span style="color: blue;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5Z8eD4bw0MN7Mc-H5p8g5sPJfoniSW3G4-xhuOn71KF8lYKYbhthtu18_jzwT_ioAz9K4eBKzMBFu_nEbZf7XaTdsmQ5uZG8wqj0xDON6V-kMgppbChLDzhHd7SQ6AXHQrxLJL2XRo4ou/s1600/paper.jpg</span>)'<br>});<br><br>$(window).scroll(function() {<br>if($(this).scrollTop() > <span style="color: red;"><b>100</b></span>) {<br>$('#blog-pager-box').fadeIn();<br>} else {<br>$('#blog-pager-box').fadeOut();<br>}<br>});<br>});<br>$(document).ready(function(){<br>var newerLink = $("a.blog-pager-newer-link").attr("href");<br>$("a.blog-pager-newer-link").load(newerLink+" .post-title:first", function() {<br>var newerLinkTitle = $("a.blog-pager-newer-link:first").text();<br>$(".blog-pager-newer-link").html("<div>Newer Posts:</div>" + newerLinkTitle);<br>});<br>var olderLink = $("a.blog-pager-older-link").attr("href");<br>$("a.blog-pager-older-link").load(olderLink+" .post-title:first", function() {<br>var olderLinkTitle = $("a.blog-pager-older-link").text();<br>$(".blog-pager-older-link").html("<div>Older Posts:</div>" + olderLinkTitle);<br>});<br>});<br>// ]]><br></script><br><br><style type='text/css'><br><!--<br>#blog-pager-box {<br>box-shadow: 0 0 3px #AEAEAE;<br>z-index:9;<br>}<br><br>#blog-pager-box h4 {<br>margin:0;<br>padding:0;<br>color:#4898B9;<span style="color: #6aa84f;"><i> /* Widget's title color */</i></span><br>font-size:16px; <span style="color: #6aa84f;"><i>/* Title font size */</i></span><br>} <br><br>#blog-pager-newer-link {float:left;clear:both;line-height:30px;}<br>#blog-pager-older-link {float:left;clear:both;line-height:30px;}<br>.home-link {display:none;}<br>.blog-pager-older-link, .blog-pager-newer-link {<br>background-color: transparent !important;<br>background-image: none !important;<br>border:0 !important;<br>color: #4B4B4B !important; <i><span style="color: #6aa84f;">/* Color of the links */</span></i><br>float: left;<br>width: 500px;<br>clear:both;<br>}<br><br>a.blog-pager-older-link:hover, a.blog-pager-newer-link:hover {<br>text-decoration:none !important; <br>}<br>  <br>a.blog-pager-newer-link:before {<br>content: url(<span style="color: blue;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDQYCqPdG1nQAqS8tWTjfA5cz3c_pbXRERk3ZsNgUFOiIzEidFBbSkS1obhovaYixhSLd6yHbPUkDq6Xd36aQ5jINEArELMsVy-R9pgsemAoHfygyPEhMJOLNwWU2Qjhc9wymEZj_xTNo/s1600/back.png</span>);<br>float:left;<br>}<br>a.blog-pager-older-link:before {<br>content: url(<span style="color: blue;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigzD2YlIVxEINRF6uZ5iQzjLvNKLF0vkie9LHxpGfmXCZFhEyGVBdbqT369Gb7q5p3Chwqk9JurCeY_WHYaOZxQkFrY3reL54Yn4lbWM9qGXhADdHwiYJZEg7bHA87coafYBVzhPxSfq8/s1600/forward.png</span>);<br>float:left;<br>}<br>#blog-pager {<br>width:500px;<br>background-color: transparent !important;<br>background-image: none !important;<br>border:0 !important;<br>text-align:left;<br>}<br>  <br>#blog-pager div {<br>color:#0577AB; <span style="color: #6aa84f;">/* Color for the "Newer Posts" and "Older Posts" text */</span><br>font-weight:bold;<br>margin-bottom: -5px;<br>}<br>a#blog-pager div:hover {<br>text-decoration:none !important;<br>color:#4898B9; <span style="color: #6aa84f;">/* Color for the "Newer Posts" and "Older Posts" text */</span><br>}<br>--><br></style><br></b:if></blockquote><br>Note that this gadget uses jQuery, so try to have only one version.<br><h4><br><b>Customization: </b></h4><br>- There are three URLs in blue, the first is the paper background image for the box, the other two are the icons that correspond to the arrows. You can replace these with your own. <br>- In green you can see where to change the text colors.<br>- The red number is the distance in pixels that activates the gadget, this means that the box will appear when you scroll down the 100px. You can use a higher value if your posts are usually long and therefore the "height" of the scroll is greater.<br>

Blog Design Fading Box With Newer/Older Posts Links and Titles for Blogger

The navigation links are those that appear at the bottom of the page that says "Older Posts", "Newer Posts" and "H...

Read more »

Create Horizontal Navigation Menu With Drop Down Submenus Using CSS

The following drop down menu is made only with CSS, is a horizontal menu with sub-tabs and the right side has a rounded search. A menu is handy for those who do not require complex menus or prefer not to use one that requires scripts and/or too many images, also the installation and customization is quite simple, and to top it off is quite functional.<br> To see this drop down menu in action, visit this <a href="http://helploggermenu.blogspot.com/" style="color: #0000ee;">demo blog</a> <br><br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMVz3nUDv0Prdcu681EESQCwBIDcOBLc0IJYec6A1hyphenhyphenECkG8o0lqEmt8qewfChqglCfFQzC6nyP-LVOBCc3ANPQdkiMCobmdW7GO34c6yFwXtMI4iSkEnK-wSxwopN1p4ZS23xjJCnX5U1/s1600/horizontal-drop-down-menu-with-search-bar-for-blogger-blogspot.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="blogger menu, drop down menu, css menu" border="0" height="166" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMVz3nUDv0Prdcu681EESQCwBIDcOBLc0IJYec6A1hyphenhyphenECkG8o0lqEmt8qewfChqglCfFQzC6nyP-LVOBCc3ANPQdkiMCobmdW7GO34c6yFwXtMI4iSkEnK-wSxwopN1p4ZS23xjJCnX5U1/s1600/horizontal-drop-down-menu-with-search-bar-for-blogger-blogspot.png" title="Horizontal drop down menu for Blogger" width="640"></a><div class="pinit-visibility" style="position: absolute; z-index: 9999; top: 179.5px; left: 348px; visibility: visible; opacity: 1;" onmouseover="this.style.opacity=1;this.style.visibility='visible'"></div></div><br>Prior to doing anything, if you are using a Template made through Blogger Template Designer, then you should consider doing these changes in the template, otherwise the menu might not be displayed correctly:<br><br><div class="separator" style="clear: both; text-align: center;"></div>From your <a href="https://www.blogger.com/home">Blogger's Dashboard</a>, go to Template (<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiymmtCZTV872TuUsaFfMu7K95XXIrhE-qxOlY699UjDBUCBDIXN4RxFNVXxN0DFVPMp4NWA3Qpc0gYatdLoGA_Nf8_LdlQAGdcVn_52mN0cZRBdJwikOad8cjT5pDS1_DIokbcAXfpqphG/s1600/how-to-backup-blogger-template.png">make a backup</a> < see the screenshot) > Edit HTML:<br><br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO3yVKxTu56KIdV9fEOJ4kXkII72hI7yKyt8dYBfFWiBEUwdT1qGYAnrrCrpitGmKxpan9aPNuXMwlH6pYahtQ975h6__82ZNH-1wtH-VJHS_vJUBnGU2BXhzXpeZRlhzi4aACtgyEDuyt/s1600/blogger-template-edit-html.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="137" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO3yVKxTu56KIdV9fEOJ4kXkII72hI7yKyt8dYBfFWiBEUwdT1qGYAnrrCrpitGmKxpan9aPNuXMwlH6pYahtQ975h6__82ZNH-1wtH-VJHS_vJUBnGU2BXhzXpeZRlhzi4aACtgyEDuyt/s1600/blogger-template-edit-html.png" width="320"></a></div><br>and search (CTRL + F) for the following line:<br><br><blockquote class="tr_bq"><b:section <span style="color: #cc0000;">class='tabs'</span> id='crosscol' maxwidgets='1' showaddelement='yes'></blockquote><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/AVvXsEirqM5T5JFinS1g4oHXC6WDWK_AMKF7AhAqVe_vrEH8Tj2po0eu_WBiEZlhAuKIy5l_rHzmbz-yTk4Vz3SOIXsPxicJHeP_jLCYssU-ARv80YTGC69WXi4OMv2YU4yPJZRN_-9bxrB0XdgN/s1600/horizontal-drop-down-menu-for-blogger.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="152" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirqM5T5JFinS1g4oHXC6WDWK_AMKF7AhAqVe_vrEH8Tj2po0eu_WBiEZlhAuKIy5l_rHzmbz-yTk4Vz3SOIXsPxicJHeP_jLCYssU-ARv80YTGC69WXi4OMv2YU4yPJZRN_-9bxrB0XdgN/s1600/horizontal-drop-down-menu-for-blogger.png" width="400"></a></td></tr><tr><td class="tr-caption" style="text-align: center;">Screenshot</td></tr></tbody></table><br>Remove the code in red.<br>You may have many parts as the one in red, delete all you find.<br><br><i><span style="color: #666666;"><b>....</b></span></i>then find this section in your template:<br><blockquote class="tr_bq">/* Tabs<br>----------------------------------------------- */</blockquote><br>...and remove all that is <u>within it</u>, until you reach to the <b><i>Headings </i></b>part. <br><br><blockquote class="tr_bq">/* Tabs<br>----------------------------------------------- */<br><span style="color: #38761d;">.tabs-outer {<br>overflow: hidden;<br>position: relative;<br>background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll 0 0;<br>}<br><br>#layout .tabs-outer {<br>overflow: visible;<br>}<br><br>.tabs-cap-top, .tabs-cap-bottom {<br>position: absolute;<br>width: 100%;<br><br>border-top: 1px solid $(tabs.border.color);<br><br>}<br><br>.tabs-cap-bottom {<br>bottom: 0;<br>}<br><br>.tabs-inner .widget li a {<br>display: inline-block;<br><br>margin: 0;<br>padding: .6em 1.5em;<br><br>font: $(tabs.font);<br>color: $(tabs.text.color);<br><br>border-top: 1px solid $(tabs.border.color);<br>border-bottom: 1px solid $(tabs.border.color);<br>border-$startSide: 1px solid $(tabs.border.color);<br>}<br><br>.tabs-inner .widget li:last-child a {<br>border-$endSide: 1px solid $(tabs.border.color);<br>}<br><br>.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {<br>background: $(tabs.selected.background.color) $(tabs.background.gradient) repeat-x scroll 0 -100px;<br>color: $(tabs.selected.text.color);<br>}</span><br>/* Headings<br>----------------------------------------------- */ </blockquote><br>Then add this to where the code has been removed (instead of the code in green):<br><blockquote class="tr_bq">#crosscol ul {z-index: 200; padding:0 !important;}<br>#crosscol li:hover {position:relative;}<br>#crosscol ul li {padding:0 !important;}<br>.tabs-outer {z-index:1;}<br>.tabs .widget ul, .tabs .widget ul {overflow: visible;}</blockquote>Having done this, we can finally add our menu.<br><br><span style="color: #3d85c6;"><span style="font-size: large;"><b>How To Add Horizontal Drop Down Menu to Blogger</b></span></span><br><br>To put this horizontal menu with submenus in your blog, then follow the next steps:<br><br><span style="color: #3d85c6;"><b>Step 1.</b></span> From <b><i>Template</i></b>, go to<b><i> Edit HTML</i></b> and just above <b>]]></b:skin></b> paste these styles:<br><blockquote class="tr_bq">/* Horizontal drop down menu<br>----------------------------------------------- */<br>#menuWrapper {<br>width:100%; <span style="color: #6aa84f;">/* Menu width */</span><br>height:35px;<br>padding-left:14px;<br>background:#333; <span style="color: #6aa84f;">/* Background color */</span><br>border-radius: 10px;  <br>}<br>.menu {<br>padding:0;<br>margin:0;<br>list-style:none;<br>height:35px;<br>position:relative;<br>z-index:5;<br>font-family:arial, verdana, sans-serif;<br>}<br>.menu li:hover li a {<br>background:none;<br>}<br>.menu li.top {display:block; float:left;}<br>.menu li a.top_link {<br>display:block;<br>float:left;<br>height:35px;<br>line-height:34px;<br>color:#ccc;<br>text-decoration:none;<br>font-family:"Verdana", sans-serif;<br>font-size:12px; <span style="color: #6aa84f;">/* Font size */</span><br>font-weight:bold;<br>padding:0 0 0 12px;<br>cursor:pointer;<br>}<br>.menu li a.top_link span {<br>float:left;<br>display:block;<br>padding:0 24px 0 12px;<br>height:35px;<br>}<br>.menu li a.top_link span.down {<br>float:left;<br>display:block;<br>padding:0 24px 0 12px;<br>height:35px;<br>}<br>.menu li a.top_link:hover, .menu li:hover > a.top_link {color:#fff; }<br>.menu li:hover {position:relative; z-index:2;}<br>.menu ul, <br>.menu li:hover ul ul,<br>.menu li:hover ul li:hover ul ul,<br>.menu li:hover ul li:hover ul li:hover ul ul,<br>.menu li:hover ul li:hover ul li:hover ul li:hover ul ul<br>{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}<br><br>.menu li:hover ul.sub {<br>left:0;<br>top:35px;<br>background:#333; <span style="color: #6aa84f;">/* Submenu background color */</span><br>padding:3px;<br>white-space:nowrap;<br>width:200px;<br>height:auto;<br>z-index:3;<br>}<br>.menu li:hover ul.sub li {<br>display:block;<br>height:30px;<br>position:relative;<br>float:left;<br>width:200px;<br>font-weight:normal;<br>}<br>.menu li:hover ul.sub li a{<br>display:block;<br>height:30px;<br>width:200px;<br>line-height:30px;<br>text-indent:5px;<br>color:#ccc;<br>text-decoration:none;<br>}<br>.menu li ul.sub li a.fly {<br><span style="color: #6aa84f;">/* Submenu Background Color */</span><br>background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgckCLEyiTKW5a0T41NaNs1bs5dfwVfTICpXE3H3Tw9vskboCsPVP76czml3vo1_tJ7-pkKj8FBwiUDKwoZzjkJal_m1JkLRr1SDq9IvAUnb2ngjT8AgMYkzeWbE_MThATTmqzJ4x-mUZM/s1600/arrow_over.gif) 185px 10px no-repeat;}<br>.menu li:hover ul.sub li a:hover {<br>background:#515151; <span style="color: #6aa84f;">/* Background Color on mouseover */</span><br>color:#fff;<br>}<br>.menu li:hover ul.sub li a.fly:hover, .menu li:hover ul li:hover > a.fly {<br><span style="color: #6aa84f;">/* Background on Mouseover */</span><br>background:#646464 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgckCLEyiTKW5a0T41NaNs1bs5dfwVfTICpXE3H3Tw9vskboCsPVP76czml3vo1_tJ7-pkKj8FBwiUDKwoZzjkJal_m1JkLRr1SDq9IvAUnb2ngjT8AgMYkzeWbE_MThATTmqzJ4x-mUZM/s1600/arrow_over.gif) 185px 10px no-repeat; color:#fff;}<br><br>.menu li:hover ul li:hover ul,<br>.menu li:hover ul li:hover ul li:hover ul,<br>.menu li:hover ul li:hover ul li:hover ul li:hover ul,<br>.menu li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul {<br>left:200px;<br>top:-4px;<br>background: #333; <span style="color: #6aa84f;">/* Background Color of the Submenu */</span><br>padding:3px;<br>white-space:nowrap;<br>width:200px;<br>z-index:4;<br>height:auto;<br>}<br>#search { <br>width: 228px; <span style="color: #6aa84f;">/* Width of the Search Box */</span><br>height: 50px;<br>float: right;<br>z-index: 2;<br>text-align: center;<br>margin-top: 5px;<br>margin-right: 6px;<br><span style="color: #6aa84f;">/* Background of the Search Box */</span><br>background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQH9N2GRcmZm6OMHRdb0Q9byZaqEW7_87iblcqwzIsf_Ch1CHa6tZNHM6sHYVBxSZdEkmTo99yMXfTZK7TYvI6RyFy4Go1iDkzniOkS6_3jaeGS666cIWTqQPKcQElLfUfpaLsNE4RadI/s1600/searchBar1.png) no-repeat;<br>}<br>#search-box {<br>margin-top: 3px;<br>border:0px;<br>background: transparent;<br>text-align:center;<br>}</blockquote><br><br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1WL4e-Akp1gPaWiHb9j9PNGmBbfTnP_T7mdmu_OzJeIOyhu3GF8eeEWKhD3abEoN3S1Q_acT7YNrVpDw5QI2MsL6Fb7Tv6pvpO9gyfIrxD94dXD4_tIA9AkF4ICzSRYxJqpXSzBxSzi6k/s1600/blogger-b-skin-template-edit-html.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="64" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1WL4e-Akp1gPaWiHb9j9PNGmBbfTnP_T7mdmu_OzJeIOyhu3GF8eeEWKhD3abEoN3S1Q_acT7YNrVpDw5QI2MsL6Fb7Tv6pvpO9gyfIrxD94dXD4_tIA9AkF4ICzSRYxJqpXSzBxSzi6k/s1600/blogger-b-skin-template-edit-html.png" width="320"></a></div><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7kRMOg81fgQ1M9RcVJXhAELEZo7NJqlAQDvIfshJghMHXxhVTzTCmXuqYONl0i15HlZ_iWYvy_ziMs12djSISRQeLHip3MeQIU5ygdAB5RB8emr8t9doBWcRvtCp6FaTY2cCBdftuB_vv/s1600/add-horizontal-drop-down-menu-to-blogger.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="178" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7kRMOg81fgQ1M9RcVJXhAELEZo7NJqlAQDvIfshJghMHXxhVTzTCmXuqYONl0i15HlZ_iWYvy_ziMs12djSISRQeLHip3MeQIU5ygdAB5RB8emr8t9doBWcRvtCp6FaTY2cCBdftuB_vv/s1600/add-horizontal-drop-down-menu-to-blogger.png" width="320"></a></td></tr><tr><td class="tr-caption" style="text-align: center;">Screenshot</td></tr></tbody></table><span style="color: #3d85c6;"><b>Step 2.</b></span> Save the Template<br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVg1k1vKQFAE3-OQOI9jHBsKqEB-2XylMyGeq-2i56ylsKWL_qoHh1rKGg4NyJ9dg7P9_PvBSjaqe_BQLLnM9La5ymyCTM1ew1TikabCo4OMWCkaDNvpvtBs9yZD6Vmbm938wVCL4zTBYW/s1600/save-template-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVg1k1vKQFAE3-OQOI9jHBsKqEB-2XylMyGeq-2i56ylsKWL_qoHh1rKGg4NyJ9dg7P9_PvBSjaqe_BQLLnM9La5ymyCTM1ew1TikabCo4OMWCkaDNvpvtBs9yZD6Vmbm938wVCL4zTBYW/s1600/save-template-blogger.png"></a></div><br><br><span style="color: #3d85c6;"><b>Step 3. </b></span>Go to Layout > click on Add a Gadget link<br><br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrhUmeqdMLFniM0y9VyOzm3ywOeFWsbbvyDZUWoeSe2-qW83RGFTIVh9XIHNIaxrdCjrbTonpwPgoRyH0P32qojV2FK-_EZCo8kdoC3ICOAyG0fgSiRojrKypzxZBZoZH_dhZjLS9UxaWL/s1600/blogger-layout-add+a+gadget-how-to.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrhUmeqdMLFniM0y9VyOzm3ywOeFWsbbvyDZUWoeSe2-qW83RGFTIVh9XIHNIaxrdCjrbTonpwPgoRyH0P32qojV2FK-_EZCo8kdoC3ICOAyG0fgSiRojrKypzxZBZoZH_dhZjLS9UxaWL/s1600/blogger-layout-add+a+gadget-how-to.png" width="640"></a></div><br><span style="color: #3d85c6;"><b>Step 4.</b></span> Choose HTML/Javascript and paste the following inside the empty box:<br><br><blockquote class="tr_bq"><div id='menuWrapper'><br><ul class='menu'><br><li class='top'><a class='top_link' href='<span style="color: blue;">Link URL</span>'><span><span style="color: #cc0000;">Title 1</span></span></a></li><br><br><li class='top'><a class='top_link' href='<span style="color: blue;">Link URL</span>'><span class='down'><span style="color: #cc0000;">Title 2</span></span></a><ul class='sub'><li><a class='fly' href='<span style="color: blue;">Link URL</span>'><span style="color: #cc0000;">Submenu 2.1</span></a><ul><br><li><a href='<span style="color: blue;">Link URL</span>'><span style="color: #cc0000;">Submenu 2.1.1</span></a></li><br><li><a href='<span style="color: blue;">Link URL</span>'><span style="color: #cc0000;">Submenu 2.1.2</span></a></li><br><li><a href='<span style="color: blue;">Link URL</span>'><span style="color: #cc0000;">Submenu 2.1.3</span></a></li><br></ul><br></li><br><li class='mid'><a class='fly' href='<span style="color: blue;">Link URL</span>'><span style="color: #cc0000;">Submenu 2.2</span></a><br><ul><br><li><a href='<span style="color: blue;">Link URL</span>'><span style="color: #cc0000;">Submenu 2.2.1</span></a></li><br><li><a href='<span style="color: blue;">Link URL</span>'><span style="color: #cc0000;">Submenu 2.2.2</span></a></li><br><li><a href='<span style="color: blue;">Link URL</span>'><span style="color: #cc0000;">Submenu 2.2.3</span></a></li><br><li><a class='fly' href='<span style="color: blue;">Link URL</span>'><span style="color: #cc0000;">Submenu 2.2.4</span></a><br><ul><br><li><a href='<span style="color: blue;">Link URL</span>'><span style="color: #cc0000;">Submenu 2.2.4.1</span></a></li><br><li><a href='<span style="color: blue;">Link URL</span>'><span style="color: #cc0000;">Submenu 2.2.4.2</span></a></li><br><li><a href='<span style="color: blue;">Link URL</span>'><span style="color: #cc0000;">Submenu 2.2.4.3</span></a></li><br></ul><br></li><br><li><a href='<span style="color: blue;">Link URL</span>'><span style="color: #cc0000;">Submenu 2.2.5</span></a></li><br><li><a class='fly' href='<span style="color: blue;">Link URL</span>'><span style="color: #cc0000;">Submenu 2.2.6</span></a><br><ul><br><li><a href='<span style="color: blue;">Link URL</span>'><span style="color: #cc0000;">Submenu 2.2.6.1</span></a></li><br><li><a href='<span style="color: blue;">Link URL</span>'><span style="color: #cc0000;">Submenu 2.2.6.2</span></a></li><br></ul><br></li><br></ul><br></li><br><li><a href='<span style="color: blue;">Link URL</span>'><span style="color: #cc0000;">Submenu 2.3</span></a></li><br><li><a href='<span style="color: blue;">Link URL</span>'><span style="color: #cc0000;">Submenu 2.4</span></a></li><br><li><a href='<span style="color: blue;">Link URL</span>'><span style="color: #cc0000;">Submenu 2.5</span></a></li><br></ul><br></li><br><br><li class='top'><a class='top_link' href='<span style="color: blue;">Link URL</span>'><span class='down'><span style="color: #cc0000;">Title 3</span></span></a><br><ul class='sub'><br><li><a href='<span style="color: blue;">Link URL</span>'><span style="color: #cc0000;">Submenu 3.1</span></a></li><br><li><a href='<span style="color: blue;">Link URL</span>'><span style="color: #cc0000;">Submenu 3.2</span></a></li><br><li><a href='<span style="color: blue;">Link URL</span>'><span style="color: #cc0000;">Submenu 3.3</span></a></li><br><li><a href='<span style="color: blue;">Link URL</span>'><span style="color: #cc0000;">Submenu 3.4</span></a></li><br></ul><br></li><br><br><li class='top'><a class='top_link' href='<span style="color: blue;">Link URL</span>'><span class='down'><span style="color: #cc0000;">Title 4</span></span></a><br><ul class='sub'><br><li><a href='<span style="color: blue;">Link URL</span>'><span style="color: #cc0000;">Submenu 4.1</span></a></li><br><li><a class='fly' href='<span style="color: blue;">Link URL</span>'><span style="color: #cc0000;">Submenu 4.2</span></a><br><ul><br><li><a href='<span style="color: blue;">Link URL</span>'><span style="color: #cc0000;">Submenu 4.2.1</span></a></li><br><li><a href='<span style="color: blue;">Link URL</span>'><span style="color: #cc0000;">Submenu 4.2.2</span></a></li><br><li><a href='<span style="color: blue;">Link URL</span>'><span style="color: #cc0000;">Submenu 4.2.3</span></a></li><br><li><a href='<span style="color: blue;">Link URL</span>'><span style="color: #cc0000;">Submenu 4.2.4</span></a></li><br><li><a href='<span style="color: blue;">Link URL</span>'><span style="color: #cc0000;">Submenu 4.2.5</span></a></li><br><li><a href='<span style="color: blue;">Link URL</span>'><span style="color: #cc0000;">Submenu 4.2.6</span></a></li><br></ul><br></li><br><li><a href='<span style="color: blue;">Link URL</span>'><span style="color: #cc0000;">Submenu 4.3</span></a></li><br><li><a href='<span style="color: blue;">Link URL</span>'><span style="color: #cc0000;">Submenu 4.4</span></a></li><br><li><a href='<span style="color: blue;">Link URL</span>'><span style="color: #cc0000;">Submenu 4.5</span></a></li><br><li><a href='<span style="color: blue;">Link URL</span>'><span style="color: #cc0000;">Submenu 4.6</span></a></li><br></ul><br></li><br><br><li class='top'><a class='top_link' href='<span style="color: blue;">Link URL</span>'><span class='down'><span style="color: #cc0000;">Title 5</span></span></a><br><ul class='sub'><br><li><a href='<span style="color: blue;">Link URL</span>'><span style="color: #cc0000;">Submenu 5.1</span></a></li><br><li><a href='<span style="color: blue;">Link URL</span>'><span style="color: #cc0000;">Submenu 5.2</span></a></li><br><li><a href='<span style="color: blue;">Link URL</span>'><span style="color: #cc0000;">Submenu 5.3</span></a></li><br></ul><br></li><br><br><br><span style="color: #38761d;"><!-- Search Bar --></span><br><li><br><form action='/search' id='search' method='get' name='searchForm' style='display:inline;'> <br><input id='search-box' name='q' onblur='if (this.value == &quot;&quot;) this.value = &quot;Search here...&quot;;' onfocus='if (this.value == &quot;Search here...&quot;) this.value = &quot;&quot;;' size='28' type='text' value='Search here...'/></form><br></li><br><br></ul><br></div></blockquote><br><span style="font-size: large;"><span style="color: #3d85c6;"><b>Customization:</b></span></span><br><br>- replace the text in blue and red with your links and titles.<br>- if you need more tabs, then add a line like this just above <span style="color: #38761d;"><!-- Search Bar --></span><br><br><blockquote class="tr_bq"><li class="top"><a href="<span style="color: blue;">Link URL</span>" class="top_link"><span><span style="color: #cc0000;">Title</span></span></a></li></blockquote><br>- if you want to add a tab with sub-tabs, then add this code:<br><br><blockquote class="tr_bq"><li class="top"><a href="<span style="color: blue;">Link URL</span>" class="top_link"><span class="down"><span style="color: #cc0000;">Title</span></span></a><br><ul class="sub"><br><span style="color: #e69138;"><li><a href="Link URL">Submenu Title</a></li></span><br><li><a href="<span style="color: blue;">Link URL</span>"><span style="color: #cc0000;">Submenu Title</span></a></li><br><li><a href="<span style="color: blue;">Link URL</span>"><span style="color: #cc0000;">Submenu Title</span></a></li><br></ul><br></li></blockquote><br>- and if you want one of the other sub-tabs have sub-tabs then remove a line like the one in orange and change it to a code like this:<br><br><blockquote class="tr_bq"><li><a href="<span style="color: blue;">Link URL</span>" class="fly"><span style="color: #cc0000;">Submenu Title</span></a><br><ul><br><li><a href="<span style="color: blue;">Link URL</span>"><span style="color: #cc0000;">Other Submenu</span></a></li><br><li><a href="<span style="color: blue;">Link URL</span>"><span style="color: #cc0000;">Other Submenu</span></a></li><br><li><a href="<span style="color: blue;">Link URL</span>"><span style="color: #cc0000;">Other Submenu</span></a></li><br></ul><br></li></blockquote><br>And that's it! Now <b>Save </b>your Widget and enjoy your new drop down menu! ;)

Blog Design Create Horizontal Navigation Menu With Drop Down Submenus Using CSS

The following drop down menu is made only with CSS, is a horizontal menu with sub-tabs and the right side has a rounded search. A menu is h...

Read more »