Cara Menciptakan Kotak Iklan 300X250 Dengan Pengaruh Gradient
Cara Membuat Kotak Iklan 300x250 Dengan Efek Gradien - Oke pada kesempatan kali ini aku akan share ke pada kalian bagai mana cara menciptakan kotak iklan dengan efek gradien dan circles aku modifikasi dari suhu yang punya riswan.net yang aku modifikasi dengan efek gradien dengan 4 warna berjalan.
Dengan memasang kotak iklan ini supaya sanggup memberi kesan wow ke pada pengunjung sahabat yang melihatnya dan juga siapa taua ada yang mau pasang iklan di blog sobat, sepakat jikalau berminat pribadi saja ke caranya...
Cara Membuat Kotak Iklan 300x250 Dengan Efek Gradien
Pertama sahabat masuk terlebih dahulu ke Blogger > Tema > Edit HTML copy arahan dibawah ini dan pastekan sempurna diatas arahan ]]><b:skin> atau </style>
@keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}} #iklan-sidebar1 {background:linear-gradient(-50deg,#01a3a4,#9A12B3,#22313F,#3A539B);background-size:320% 200%;animation:Gradient 15s ease infinite;height:250px;width:auto;max-width:100%;font-weight:700;overflow:hidden;position:relative;} #iklan-sidebar1 .buttton1{list-style: none;overflow:hidden;margin:0;position:absolute;left:50%;top:60%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%);} #iklan-sidebar1 .buttton1 a.download1{list-style:none;display:inline-block;background:#fff;color:#01a3a4;font-size:14px;font-weight:200;padding:8px 18px;border-radius:3px;overflow:hidden;} #iklan-sidebar1 .buttton1 a.download1:hover{background:#34495E;color:#fff;overflow:hidden;} #iklan-sidebar1 .visible1{margin:0;position:absolute;left:50%;margin-right;-px;top:40%;color:#fff;font-size:2rem; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%);} .circles{position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden;margin:0} .circles li{position:absolute;display:block;list-style:none;width:20px;height:20px;background:rgba(255,255,255,0.07);animation:animate 45s linear infinite;bottom:-150px;z-index:0} .circles li:nth-child(1){left:25%;width:40px;height:40px;animation-delay:0s} .circles li:nth-child(2){left:10%;width:10px;height:10px;animation-delay:2s;animation-duration:12s} .circles li:nth-child(3){left:70%;width:10px;height:10px;animation-delay:4s} .circles li:nth-child(4){left:40%;width:40px;height:40px;animation-delay:0s;animation-duration:18s} .circles li:nth-child(5){left:65%;width:10px;height:10px;animation-delay:0s} .circles li:nth-child(6){left:75%;width:30px;height:30px;animation-delay:3s} .circles li:nth-child(7){left:35%;width:20px;height:20px;animation-delay:7s} .circles li:nth-child(8){left:50%;width:15px;height:15px;animation-delay:15s;animation-duration:45s} .circles li:nth-child(9){left:20%;width:5px;height:5px;animation-delas;animation-duration:35s} .circles li:nth-child(10){left:85%;width:30px;height:30px;animation-delay:0s;animation-duration:11s} @keyframes animate{0%{transform:translateY(0) rotate(0deg);opacity:1;border-radius:0}100%{transform:translateY(-1000px) rotate(720deg);opacity:0;border-radius:50%}}Yang bertanda merah sanggup diganti warna sesuka sahabat sendiri.
Jika sudah klik simpan. kini saatnya pasang arahan html di tata letak
Kemudia Masuk ke Tata Letak > Tambahkan Gadget > HTML/JavaScript copy arahan dibawah ini dan pastekan pada daerah yang disediakan.
<div id='iklan-sidebar1'> <ul class='circles'><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul> <div class="buttton1"> <li><a class="download1" href="https://api.whatsapp.com/send?phone=6285943179227&text=Halo%20Admin%20triksimple.com" rel="nofollow noopener" target="_blank">Pasang Iklan</a></li> </div> <div class='visible1'> <p> 300 x 250 </p> </div> </div>Jika sudah klik simpan. untuk demonya sanggup lihat di blog aku ini.
Oke sekian yang sanggup aku jelaskan tentang Cara Membuat Kotak Iklan 300x250 Dengan Efek Gradien Terima Kasih yang sudah berkunjung supaya bermanfaat
Sumber https://www.triksimple.com/