Cara Menciptakan Background Dengan Dampak Gradient Circles
5 Mar 2019
Dengan memasang background 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 eksklusif saja ke caranya...
Cara Membuat Cara Membuat background Dengan Efek Gradient circles
Pertama sahabat masuk terlebih dahulu ke Blogger > Tema > Edit HTML copy instruksi dibawah ini dan pastekan sempurna diatas kode]]><b:skin>atau </style>
@keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}} #theboegisb {background:linear-gradient(-50deg,#01a3a4,#9A12B3,#22313F,#3A539B);background-size:320% 200%;animation:Gradient 15s ease infinite;width:auto;max-width:100%;font-weight:700;overflow:hidden;position:relative;} #theboegisb .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%);} #theboegisb .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;} #theboegisb .buttton1 a.download1:hover{background:#34495E;color:#fff;overflow:hidden;} #theboegisb .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.
Kemudia Masuk code dibawah ini Tepat diatas dimana Sobat mau Pasangi background Dengan Efek Gradient circles
<div id='theboegisb'> <ul class='circles'><li/><li/><li/><li/><li/><li/><li/><li/><li/><li/></ul> -----Yang mau di beri background------ </div>Sebagai Contoh, ( ingat ini hanya Contoh ) Misalkan sahabat Mau menaruh di Bagian Footer Hasil nya :
<footer class='footer' id='footer' itemscope='itemscope' itemtype='https://schema.org/WPFooter'> ................................................ ......................................... <div class='container bottomx'> <div class='row'> <div class='footer-menu'> <b:section class='footer-menu-widget' id='footer-menu-widget' maxwidgets='1' name='Footer Menu' showaddelements='no'> <b:widget id='HTML91' locked='true' title='' type='HTML' version='1'> <b:widget-settings> <b:widget-setting name='content'><ul> <li><a class='ripplelink' href='https://www.theboegis.com/p/paypal.html' target="_blank" title='Donate'>Paypal</a></li> <li><a class='ripplelink' href='https://www.theboegis.com/p/terms-of-service.html' target="_blank" title='Terms of Service'>Terms of Service</a></li> <li><a class='ripplelink' href='https://www.theboegis.com/p/disclaimer.html' target="_blank" title='Disclaimer'>Disclaimer</a></li> <li><a class='ripplelink' href='https://www.theboegis.com/p/privacy-policy.html' target="_blank" title='Privacy Policy'>Privacy Policy</a></li> <li><a class='ripplelink' href='#' target="_blank" title='Sitemap'>Sitemap</a></li></ul></b:widget-setting> </b:widget-settings> <b:includable id='main'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <h2 class='title'><data:title/></h2> </b:if> <div class='widget-content'> <data:content/> </div> </b:includable> </b:widget> </b:section> </div> <p class='copyright'>Copyright © <span id='site-year'/> · <span id='credit' itemscope='itemscope' itemtype='https://data-vocabulary.org/copyrightHolder' title='Kabar Sehat'><a expr:href='data:blog.homepageUrl'><data:blog.title/></a></span> All Right Reserved</p> </div> </div> ......................... </footer>Dan Hasil nya
<footer class='footer' id='footer' itemscope='itemscope' itemtype='https://schema.org/WPFooter'> <div id='iklan-sidebar1'> <ul class='circles'><li/><li/><li/><li/><li/><li/><li/><li/><li/><li/></ul> <div class='container bottomx'> <div class='row'> <div class='footer-menu'> <b:section class='footer-menu-widget' id='footer-menu-widget' maxwidgets='1' name='Footer Menu' showaddelements='no'> <b:widget id='HTML91' locked='true' title='' type='HTML' version='1'> <b:widget-settings> <b:widget-setting name='content'><ul> <li><a class='ripplelink' href='https://www.theboegis.com/p/paypal.html' target="_blank" title='Donate'>Paypal</a></li> <li><a class='ripplelink' href='https://www.theboegis.com/p/terms-of-service.html' target="_blank" title='Terms of Service'>Terms of Service</a></li> <li><a class='ripplelink' href='https://www.theboegis.com/p/disclaimer.html' target="_blank" title='Disclaimer'>Disclaimer</a></li> <li><a class='ripplelink' href='https://www.theboegis.com/p/privacy-policy.html' target="_blank" title='Privacy Policy'>Privacy Policy</a></li> <li><a class='ripplelink' href='#' target="_blank" title='Sitemap'>Sitemap</a></li></ul></b:widget-setting> </b:widget-settings> <b:includable id='main'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <h2 class='title'><data:title/></h2> </b:if> <div class='widget-content'> <data:content/> </div> </b:includable> </b:widget> </b:section> </div> <p class='copyright'>Copyright © <span id='site-year'/> · <span id='credit' itemscope='itemscope' itemtype='https://data-vocabulary.org/copyrightHolder' title='Kabar Sehat'><a expr:href='data:blog.homepageUrl'><data:blog.title/></a></span> All Right Reserved</p> </div> </div> </div> </footer>Contoh Di atas Bisa anda liat DI theboegis.com
CSS Ukuran Circles Besar :
@keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}} #theboegisb {background:linear-gradient(-50deg,#01a3a4,#9A12B3,#22313F,#3A539B);background-size:320% 200%;animation:Gradient 15s ease infinite;width:auto;max-width:100%;font-weight:700;overflow:hidden;position:relative;} #theboegisb .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%);} #theboegisb .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;} #theboegisb .buttton1 a.download1:hover{background:#34495E;color:#fff;overflow:hidden;} #theboegisb .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:60px;height:60px;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:90px;height:90px;animation-delay:3s} .circles li:nth-child(7){left:35%;width:130px;height:130px;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-delay:2s;animation-duration:35s} .circles li:nth-child(10){left:85%;width:130px;height:130px;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%}}Css Background Dengan Efek Gradient circles yang dipakai idntheme :
@keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}} #theboegisb {background-image:linear-gradient(50deg,#ff4169,#8b41f6);background-position:50%;background-repeat:no-repeat};width:auto;max-width:100%;font-weight:700;overflow:hidden;position:relative;} #theboegisb .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%);} #theboegisb .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;} #theboegisb .buttton1 a.download1:hover{background:#34495E;color:#fff;overflow:hidden;} #theboegisb .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:60px;height:60px;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:90px;height:90px;animation-delay:3s} .circles li:nth-child(7){left:35%;width:130px;height:130px;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-delay:2s;animation-duration:35s} .circles li:nth-child(10){left:85%;width:130px;height:130px;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%}}Ada juga Cara Membuat Kotak Iklan 300x250 Dengan Efek Gradient
CSS:
@keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}} #theboegisb {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;} #theboegisb .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%);} #theboegisb .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;} #theboegisb .buttton1 a.download1:hover{background:#34495E;color:#fff;overflow:hidden;} #theboegisb .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%}}Kemudia Masuk ke Tata Letak > Tambahkan Gadget > HTML/JavaScript copy instruksi dibawah ini dan pastekan pada kawasan yang disediakan.
<div id='theboegisb'> <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=6281234567890&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
CatatanOk sip Sekian Dulu Tentang Cara Membuat background Dengan Efek Gradient circles , jikalau sahabat gagal paham silahkan tinggal kan komentar
Setiap yang di beri warna Merah Semua sanggup diganti