Cara Menciptakan Kotak Iklan 300X250 Dengan Efek 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 pengaruh gradien dan circles aku modifikasi dari suhu yang punya riswan.net yang aku modifikasi dengan pengaruh gradien dengan 4 warna berjalan.
Dengan memasang kotak iklan ini biar sanggup memberi kesan wow ke pada pengunjung teman yang melihatnya dan juga siapa taua ada yang mau pasang iklan di blog sobat, sepakat bila berminat eksklusif saja ke caranya...
Cara Membuat Kotak Iklan 300x250 Dengan Efek Gradien
Pertama teman masuk terlebih dahulu ke Blogger > Tema > Edit HTML copy aba-aba dibawah ini dan pastekan sempurna diatas aba-aba ]]><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 teman sendiri.
Jika sudah klik simpan. kini saatnya pasang aba-aba html di tata letak
Kemudia Masuk ke Tata Letak > Tambahkan Gadget > HTML/JavaScript copy aba-aba 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 biar bermanfaat