Home
Blogging
Education

How to Make a Shadow Effect Going Back and forth on a Blog Logo

1 min read
This time TopBlog Pk will share tutorials on How to Make Shadow Effects Going Back and forth on the Blog Logo. This simple tutorial will not make your blog heavy because it only adds CSS code.

For the function of this effect is to make the blog elegant and professional, which is able to attract the attention of your blog visitors. The reason blogs must be professional is to expect new visitors to become loyal visitors.


1. Log in Blogger
2. Select the dashboard menu THEMES > Edit HTML
3. Find the code
]]></b:skin> , copy and paste the CSS code below right above the code.


/* Header Logo Effect Blog By TopBlog Pk*/

header #header-inner a{position:relative}

header #header-inner a:before,header #header-inner a:after{content:"";position:absolute;top:50%;width:10px;height:100%;transform:translateY(-50%);background-color:rgba(255,255,255,.75);z-index:999999999}

header #header-inner a:before{left:-5%;animation:light-left 3s infinite alternate linear}

header #header-inner a:after{right:-5%;animation:light-right 3s infinite alternate linear}

@keyframes light-left{0%{left:-5%;opacity:0}50%{left:50%;opacity:1}100%{left:105%;opacity:0}}

@keyframes light-right{0%{right:-5%;opacity:0}50%{right:50%;opacity:1}100%{right:105%;opacity:0}}


4. Save the Theme and Finish .

Important : If using the CSS code doesn't work, please replace the # header-inner a caller code into your template header caller code.

How very easy and very simple is not How to Make Shadow Effects Going Back and forth on a Blog. If you have questions, please comment below this article. 

You may like these posts

Post a Comment