our blog ads

How to Make Animate effects when adding Blogspot posts. Full Tutorials Here

Article Writter August 31, 2020

As you all know, it's now 2019 and it's been 20 years since Blogger development, so more and more blogs are springing up to share different tricks. Although I have been blogging for a few years, I did not share it publicly because at that time it was just fun and fun. So I also limit writing Blogspot tips, if you do have a need, please comment below for me to guide you. Today I will share animate effect when uploading more posts for your blog, this one I picked up on Facebook and forgot the source, whoever remembers, please comment for me to add, thank you! 





 1. Code HMTL Please insert it where you want.



<div class="fblwti-animated"> 

  <div class="fblwtia-mask fblwtia-title-line fblwtia-title-mask-0"> </div> 

  <div class="fblwtia-mask fblwtia-sepline-sapo fblwtia -sapo-line-0"> </div> 

  <div class="fblwtia-mask fblwtia-sepline-sapo fblwtia-sepline-sapo-0"> </div> 

 <div class="fblwtia-mask fblwtia-title- line fblwtia-title-mask-1"> </div> 

  <div class="fblwtia-mask fblwtia-sepline-sapo fblwtia-sapo-line-1"> </div> 

  <div class="fblwtia-mask fblwtia- sepline-sapo fblwtia-sepline-sapo-1"> </div> 

  <div class="fblwtia-mask fblwtia-front-mask fblwtia-front-mask-2"> </div> 

 <div class="fblwtia-mask fblwtia-sapo-line fblwtia-sapo-line-2"> </div> 

  <div class="fblwtia-mask fblwtia-sepline-sapo fblwtia-sepline-sapo-2"> </div>

  <div class="fblwtia-mask fblwtia-front-mask fblwtia-front-mask-3"> </div> 

  <div class="fblwtia-mask fblwtia-sapo-line fblwtia-sapo-line-3"></div> 

  <div class="fblwtia-mask fblwtia-sepline-sapo fblwtia-sepline-sapo-3"> </div> 

  <div class="fblwtia-mask fblwtia-front-mask fblwtia-front-mask-4"> </div> 

  <div class="fblwtia-mask fblwtia-sapo-line fblwtia-sapo-line-4"> </div> 

  <div class="fblwtia-mask fblwtia-sepline-sapo fblwtia-sepline-sapo-4"> </div> 

</div>
</div>




2, CSS You add ]]> </ b: skin>



.fblwtia-mask { 
 .fblwtia-title-mask-1 {
 background: #fff; 
 position: absolute; 
 -webkit-box-sizing: border-box; 
 -moz-box-sizing: border-box; 
 box-sizing: border-box;
 height: 10px; 
 }

 
 .fblwtia-title-line { 
 right: 0; 
 left: 36%; 
 top: 0; 
 height: 20px; 
 width: 3%; 
 } 


 .fblwtia-front-mask {
 height: 10px; 
 left: 36%; 
 width: 3%; 
 } 


 top: 30px; 

 } 
 .fblwtia-front-mask-2 { 
 top: 70px; 
 height: 15px; 
 } 

 .fblwtia-front-mask-3 { 
 top: 105px;
 } 

.fblwtia-front-mask-4 { 
 top: 125px; 
 } 

 .fblwtia-sepline-sapo {
 left: 36%; 
 right: 0; 
 } 

 .fblwtia-sepline-sapo-0 { 
 top: 20px; 
 } 

 .fblwtia-sepline-sapo-1 {
 top: 50px; 
 height: 20px; 
 } 

 .fblwtia-sepline-sapo-2 {
 top: 85px;
 height: 20px; 
 } 

 .fblwtia-sepline-sapo-3 {
 top: 115px;
 }

 .fblwtia-sepline-sapo-4 {
 top: 135px; 
 height: 50px;
 }

 .fblwtia-sapo-line { 
 right: 0; 
 }

 .fblwtia-sapo-line-2 { 
 top: 70px; 
 left: 55%; 
 height: 15px; 
 }

 .fblwtia-sapo-line-3 { 
 top: 105px;
 left: 95%; 
 } 

 .fblwtia-sapo-line-4 {
 top: 125px;
 left: 85%; 
 height: 10px;
 } 

 .fblwti-animated { 
 animation-duration: 1.5s; 
 animation-fill-mode: forwards; 
animation-iteration-count: infinite; 
animation-name: placeHolderShimmer; 
 animation-timing-function: linear; 
background: # f6f7f8; 
 background: linear-gradient (to right, # eee 8%, # ddd 18%, # eee 33%); 
background-size: 800px 200px; 
height: 185px;
 position: relative; 
 } 

 @ -webkit-keyframes placeHolderShimmer { 
 0% { 
 background-position: -800px 0;
 } 

 100% { 
 background-position: 800px 0; 
 } 

 }

 .fblwtia-sapo-line-0 { 
 top: 0;
 left: 98%; 
 height: 20px; 
 }

 .fblwtia-sapo-line-1 { 
 top: 30px; 
 left: 85%; 
 height: 20px; 
 }



Any Help Need...Please Contact Me........





Good luck!

Tags
Reactions

Post a Comment

1 Comments