www.searchofy.com

Search Anything Anytime Anywhere Digitally | Free Business Listing | Ask to Experts | Contact us

Home About Contact Free Listing Ask Experts Download App Online Social Media Quotes News and Updates Business All Posts Sitemap

Search This Blog

Show color changing TAG LINE in the website

Hello World

Here is one awesome CSS code. You can showcase your header to TAG-LINE with color changing option. 

Lets Start....

Step 1: Go to https://www.blogger.com/

Select THEME then click CUSTOMISE




Then Click Advanced after that select Add CSS. 

Code is Here 

<> Copy from here <>
.center {
  margin: 0 auto;
}

.awesome {
  font-family: futura;
  font-style: italic;

  width: 100%;

  margin: 0 auto;
  text-align: center;

  color: #313131;
  font-size: 45px;
  font-weight: bold;
  position: absolute;
  -webkit-animation: colorchange 20s infinite alternate;
}

@-webkit-keyframes colorchange {
  0% {
    color: blue;
  }

  10% {
    color: #8e44ad;
  }

  20% {
    color: #1abc9c;
  }

  30% {
    color: #d35400;
  }

  40% {
    color: blue;
  }

  50% {
    color: #34495e;
  }

  60% {
    color: blue;
  }

  70% {
    color: #2980b9;
  }
  80% {
    color: #f1c40f;
  }

  90% {
    color: #2980b9;
  }

  100% {
    color: pink;
  }

/*--------- Text selection Customization by Twistblogger------------- */
::selection {
background:#e67e22; /*------This is the background color on selection-----*/
color:#fff; /*------This is text color on selection-----*/
}
::-moz-selection {
background:#e67e22;
color:#fff
}
::-webkit-selection {
background:#e67e22;
color:#fff
}
}

body {
  margin: 0;
}

svg {
  height: 100vmin;
  left: calc(50% - 50vmin);
  position: relative;
  width: 100vmin;
}

.ball-top {
  animation: BallTopMove 4s both infinite;
  motion-path: path("m 66.2,39.264578 c 0,0 -5.195345,-18.056477 -20.4,-18.056477 -15.204655,0 -20.4,17.930208 -20.4,17.930208");
  offset-path: path("m 66.2,39.264578 c 0,0 -5.195345,-18.056477 -20.4,-18.056477 -15.204655,0 -20.4,17.930208 -20.4,17.930208");
  motion-offset: 0%;
  offset-distance: 0%;
}

.ball-bottom {
  animation: BallBottomMove 4s both infinite;
  motion-path: path("m 66.2,58.979615 c 0,0 -5.195345,18.056477 -20.4,18.056477 -15.204655,0 -20.4,-17.930208 -20.4,-17.930208");
  offset-path: path("m 66.2,58.979615 c 0,0 -5.195345,18.056477 -20.4,18.056477 -15.204655,0 -20.4,-17.930208 -20.4,-17.930208");
  motion-offset: 100%;
  offset-distance: 100%;
}

.thinkMaskCircle {
  animation: ClipSmallMove 4s both infinite;
}

.createMaskCircle {
  animation: ClipBigMove 4s both infinite;
}

@keyframes BallTopMove {
  0% {
    motion-offset: 0%;
    offset-distance: 0%;
    transform: scale(0);
  }
  10% { transform: scale(1); }
  42.5% { transform: scale(1); }
  50% {
    motion-offset: 100%;
    offset-distance: 100%;
    transform: scale(0);
  }
  100% {
    motion-offset: 100%;
    offset-distance: 100%;
    transform: scale(0);
  }
}

@keyframes BallBottomMove {
  0% {
    motion-offset: 100%;
    offset-distance: 100%;
    transform: scale(0);
  }
  50% {
    motion-offset: 100%;
    offset-distance: 100%;
    transform: scale(0);
  }
  60% { transform: scale(1); }
  92.5% { transform: scale(1); }
  100% {
    motion-offset: 0%;
    offset-distance: 0%;
    transform: scale(0);
  }
}

@keyframes ClipSmallMove {
  0% { transform: translateY(-63%); }
  17.5% { transform: translateY(-63%); }
  50% { transform: translateY(0%); }
  62.5% { transform: translateY(63%); }
  100% { transform: translateY(63%); }
}

@keyframes ClipBigMove {
  0% { transform: translateY(0%); }
  17.5% { transform: translateY(-63%); }
  50% { transform: translateY(-63%); }
  62.499% { transform: translateY(-63%); }
  62.5% { transform: translateY(63%); }
  100% { transform: translateY(0%); }
}
<> Copy above this line <>

copy the entire code and paste in the ADD CUSTOM CSS field then click Apply to Blog


Step 2: Editing HTML Code

Now again go to Theme, click EDIT HTML




Now Try to find the Header section <header by clicking "Ctrl+F" from keyboard.




copy this code →
      <div class='clear'/>
        <div class='center'>        <p class='awesome'> Search Anything, Anytime, Anywhere Digitally </p>
</div>

Replace Search Anything, Anytime, Anywhere Digitally with your own words/sentences. 

Your tag line will be shown in the head section.

If you want to show the same it the bottom of the page. Do follow the same rules and paste the code before closing of the body i.e. 

find </body> and paste the same code above there.
-----------------------------------------------
       <div class='clear'/>
       <div class='center'>        
       <p class='awesome'> Search Anything, Anytime, Anywhere Digitally </p>
      </div>
-------------------------
see the screen shot



Enjoy it by showing to the world. Thank You ! 

searchofy

By Searchofy
Share on Google Plus
We as a team strongly believe in the value creation philosophy and hence imbibed "create" (customer first, result oriented, execution, achievement and contribution, trust and integrity, excellence and quality), as our core value set that drives all our executive and operational decisions. To create The best search result drives our unified vision of setting-up to be the "most preferred service provider" and a "category leader" in the “spreading digital connections of India”.

Share to Whatsapp

Recent Posts