Membuat background Dengan Efek Gradient circles

Membuat tampilan blog menarik itu bisa membuat pengunjung betah juga loh hehe, nah sekarang saya akan share bagaimana cara Membuat background Dengan Efek Gradient circles. silahkan simak tutorialnya di bawah berikut

Langkah Pertama

Silahkan 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%}}

Silahkan ganti kode warna yang bewrna kuning semau anda

Langkah Kedua

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>

Contoh Jika ingin menyimpan di bagian Footer :

<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

Membuat background Dengan Efek Gradient circles

0 Response to "Membuat background Dengan Efek Gradient circles"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel