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 <!--[ Header widget ]--> 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 was it?

    Hi, I am Shiva I am a student I like to learn new things and share them with others.

    8 comments

    1. Test
      1. Comment is working 🙂
    2. And How To Make Svg Logo ?
      1. Search on Google like png to svg, jpg to svg like that you will be find a working method or create a fresh light svg logo with Canva pro
    3. Or if you want to make svg logo with HTML code with your mobile then go here https://technology-aashram.blogspot.com/2022/06/convert-svg-to-html-online-for-free.html
      1. 👌
    4. Very Nice Tutorial. This is work well.
      1. Thanks, good to hear it works 🙂
    How was it? let us know with a comment!

    Cookies Consent

    This website uses cookies to ensure you get the best experience on our website.

    Cookies Policy

    We employ the use of cookies. By accessing this website, you agreed to use cookies in agreement with this website's Privacy Policy.

    Most interactive websites use cookies to let us retrieve the user’s details for each visit. Cookies are used by our website to enable the functionality of certain areas to make it easier for people visiting our website. Some of our affiliate/advertising partners may also use cookies.