Cara Membuat background Dengan Efek Gradient circles

Cara Membuat background Dengan Efek Gradient circles - Oke pada kesempatan kali ini saya akan share ke pada anda semua bagai mana cara membuat background Dengan Efek Gradient circles saya modifikasi dari suhu yang punya riswan.net yang saya modifikasi dengan efek gradien dengan 4 warna berjalan.

Dengan memasang background ini semoga dapat memberi kesan wow ke pada pengunjung sobat yang melihatnya dan juga siapa taua ada yang mau pasang iklan di blog sobat, oke jika berminat langsung saja ke caranya...

Cara Membuat Cara Membuat background Dengan Efek Gradient circles

Pertama sobat masuk terlebih dahulu ke Blogger > Tema > Edit HTML copy kode dibawah ini dan pastekan tepat 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 bisa diganti warna sesuka sobat 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 sobat 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'>&lt;ul&gt;
    &lt;li&gt;&lt;a class=&#39;ripplelink&#39; href=&#39;https://www.theboegis.com/p/paypal.html&#39; target=&quot;_blank&quot; title=&#39;Donate&#39;&gt;Paypal&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a class=&#39;ripplelink&#39; href=&#39;https://www.theboegis.com/p/terms-of-service.html&#39; target=&quot;_blank&quot; title=&#39;Terms of Service&#39;&gt;Terms of Service&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a class=&#39;ripplelink&#39; href=&#39;https://www.theboegis.com/p/disclaimer.html&#39; target=&quot;_blank&quot; title=&#39;Disclaimer&#39;&gt;Disclaimer&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a class=&#39;ripplelink&#39; href=&#39;https://www.theboegis.com/p/privacy-policy.html&#39; target=&quot;_blank&quot; title=&#39;Privacy Policy&#39;&gt;Privacy Policy&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a class=&#39;ripplelink&#39; href=&#39;#&#39; target=&quot;_blank&quot; title=&#39;Sitemap&#39;&gt;Sitemap&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;</b:widget-setting>
    </b:widget-settings>
    <b:includable id='main'>
                  <!-- only display title if it's non-empty -->
                  <b:if cond='data:title != &quot;&quot;'>
                    <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 &#169; <span id='site-year'/> &#183; <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'>&lt;ul&gt;
    &lt;li&gt;&lt;a class=&#39;ripplelink&#39; href=&#39;https://www.theboegis.com/p/paypal.html&#39; target=&quot;_blank&quot; title=&#39;Donate&#39;&gt;Paypal&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a class=&#39;ripplelink&#39; href=&#39;https://www.theboegis.com/p/terms-of-service.html&#39; target=&quot;_blank&quot; title=&#39;Terms of Service&#39;&gt;Terms of Service&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a class=&#39;ripplelink&#39; href=&#39;https://www.theboegis.com/p/disclaimer.html&#39; target=&quot;_blank&quot; title=&#39;Disclaimer&#39;&gt;Disclaimer&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a class=&#39;ripplelink&#39; href=&#39;https://www.theboegis.com/p/privacy-policy.html&#39; target=&quot;_blank&quot; title=&#39;Privacy Policy&#39;&gt;Privacy Policy&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a class=&#39;ripplelink&#39; href=&#39;#&#39; target=&quot;_blank&quot; title=&#39;Sitemap&#39;&gt;Sitemap&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;</b:widget-setting>
    </b:widget-settings>
    <b:includable id='main'>
                  <!-- only display title if it's non-empty -->
                  <b:if cond='data:title != &quot;&quot;'>
                    <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 &#169; <span id='site-year'/> &#183; <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 digunakan 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 kode dibawah ini dan pastekan pada tempat 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

Catatan
Setiap yang di beri warna Merah Semua bisa diganti

Ok sip Sekian Dulu Tentang Cara Membuat background Dengan Efek Gradient circles , jika sobat gagal paham silahkan tinggal kan komentar

1 comment

Admin1 July 2019 at 23:29
what is the paasword of your zip file?

Silahkan Memberikan Komentar Jika Ada Hal Yang Kurang Dipahami Dengan Topik Yang Telah Sobat Baca. Biasakan Berkomentar Dengan:

♥ Sopan dan Bahasa Yang Mudah Dipahami.
♥ Tidak Memasukkan Link Aktif Dalam Form Komentar.
♥ Berkomentar Sesuai Artikel Atau Postingan.
♥ Berilah Informasi, Jika Script Atau Link Yang Tidak Berfungsi Dan Mati.
♥ komentar Jorok / Kasar / SARA / PORNO Anggap Sebagai SPAM.
EmoticonEmoticon

Cara Membuat background Dengan Efek Gradient circles

1 comment

Partners

Formulir Kontak

Cara Membuat background Dengan Efek Gradient circles

Related Post

1 comment

Get notify via email

Partners