How to add sliding SVG logo in latest Jago Desain Blogger templates

Hello everyone, Welcome to Shiva Technic World you might be seen nowadays some websites using the sliding logos on the header and you might be finding how to add a sliding header logo on your latest Jago Desain Blogger template. So in this article,

we are going to show you how to add the sliding logo in the latest Jago Desain Blogger templates.

So without any time, let's check how to add it!

How to add the sliding logo?

We recommend you to take a backup of you're template by chance if any mistake has been done you can restore it later.

First, go to blogger.com

Then click on the Theme option

Then click on the drop-down icon near Customize option

Then click on the Edit HTML option

Then find ]]></b:skin> and paste this CSS just above it or under <style>/*<![CDATA[*/

/* Header SVG */ header .hSvg{display:flex;align-items:center;justify-content:center;margin-right:5px;-webkit-transition:all .5s ease;transition:all .5 ease;background:transparent;opacity:1;visibility:visible} header .hSvg.hidden{transform:scale(0);opacity:0;visibility:hidden;-webkit-transition:all .2s ease;transition:all .2s ease} header .hSvg svg{width:28px;height:28px} header .headTtl{-webkit-transition:all .2s ease);transition:all .2s ease} header .headTtl.slide{margin-left:-33px;-webkit-transition:all .4s ease;transition:all .4s ease}

Then find  and paste this code just above it

              <!--[ Header Svg ]-->
              <div class='hSvg' id='lSvg'>
              <svg height='512' preserveAspectRatio='xMidYMid meet' version='1.0' viewBox='0 0 384 383.999986' width='512' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' zoomAndPan='magnify'><defs><clipPath id='id1'><path clip-rule='nonzero' d='M 52.296875 33.25 L 332.046875 33.25 L 332.046875 350.5 L 52.296875 350.5 Z M 52.296875 33.25 '/></clipPath></defs><g clip-path='url(#id1)'><path d='M 52.296875 226.019531 L 52.300781 271.769531 L 93.105469 294.636719 L 192.171875 350.175781 L 332.050781 271.769531 L 332.046875 185.277344 L 291.242188 162.40625 L 291.242188 162.488281 L 192.175781 106.957031 L 106.671875 154.886719 L 147.476562 177.757812 L 192.171875 152.703125 L 199.988281 157.085938 L 241.742188 180.488281 L 324.84375 228.824219 L 289.539062 249.847656 L 192.175781 304.425781 Z M 332.046875 157.726562 L 332.046875 111.976562 L 291.242188 89.105469 L 192.171875 33.570312 L 52.296875 111.976562 L 52.300781 198.464844 L 93.105469 221.339844 L 93.105469 221.257812 L 192.171875 276.789062 L 277.675781 228.859375 L 236.867188 205.984375 L 192.171875 231.039062 L 184.359375 226.660156 L 142.601562 203.257812 L 59.414062 154.871094 L 142.621094 107.09375 L 192.171875 79.320312 Z M 332.046875 157.726562 ' fill='rgb(36.859131%, 9.01947%, 92.158508%)' fill-opacity='1' fill-rule='evenodd'/></g></svg>
                </div>

Replace highlighted SVG code without your SVG logo code.

Then find </body> and paste this javascript just above it

<script>/*<![CDATA[*//* Header Scroll */ function headScroll() {const distanceY = window.pageYOffset || document.documentElement.scrollTop, shrinkOn = 20, headerEl = document.getElementById('header'), lSvg = document.getElementById('lSvg'), headT = document.querySelector('.headTtl');if (distanceY > shrinkOn) {headerEl.classList.add("stick");lSvg.classList.add("hidden");headT.classList.add("slide")} else {headerEl.classList.remove("stick");lSvg.classList.remove("hidden");headT.classList.remove("slide")} } window.addEventListener('scroll', headScroll); /*]]>*/</script>

Then save XML.

Now you successfully installed the sliding SVG logo!

Video tutorial

Conclusion

Hope this How to add sliding SVG logo in the latest Jago Desain Blogger templates article will be useful to you, If you have any doubts related to this article ask me in the comment. Do share with your friends.

Thanks for visiting, Have a nice day!

How to add sliding SVG logo in latest Jago Desain Blogger templates

How to add the sliding logo?

Video tutorial

Conclusion

4 comments