Memasang Efek Gradient Circles di Blog

CSS Efek Gradient Circles pertmakali (yang saya tau) itu dipakai pada template yang digunakan oleh idntheme.compad bagian header dan footer. nah tentu dengan adanya animasi Kotak Melayang ini bisa membuat menarik para pengunjung blog anda.

Lalu Bagimanakah cara membuatnya itu di blog kita sendiri? maka dari itu akan saya butkan tutorial buat anda semua yang mau memasang 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%}}
#efekcircles {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;}
#efekcircles .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%);}
#efekcircles .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;}
#efekcircles .buttton1 a.download1:hover{background:#34495E;color:#fff;overflow:hidden;}
#efekcircles .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 pada CSS berikut #01a3a4,#9A12B3,#22313F,#3A539B semau anda, sesuai dengan selera yang anda suka

Langkah Kedua

Masuk code dibawah ini Tepat diatas dimana Sobat mau Pasangi background Dengan Efek Gradient circles

<div id='efekcircles'>
<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%}}
#efekcircles {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;}
#efekcircles .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%);}
#efekcircles .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;}
#efekcircles .buttton1 a.download1:hover{background:#34495E;color:#fff;overflow:hidden;}
#efekcircles .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%}}
#efekcircles {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;}
#efekcircles .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%);}
#efekcircles .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;}
#efekcircles .buttton1 a.download1:hover{background:#34495E;color:#fff;overflow:hidden;}
#efekcircles .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%}}
#efekcircles {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;}
#efekcircles .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%);}
#efekcircles .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;}
#efekcircles .buttton1 a.download1:hover{background:#34495E;color:#fff;overflow:hidden;}
#efekcircles .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='efekcircles'>
<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%20ariez.my.id" rel="nofollow noopener" target="_blank">Pasang Iklan</a></li>
</div>

  <div class='visible1'>
    <p>
      300 x 250
    </p>
  </div>
</div>

Jika sudah klik simpan

Ariez myid

Dapatkan artikel terbaru setiap hari

Personal Blogger

Memasang Efek Gradient Circles di Blog

Langkah Pertama

Langkah Kedua

Aplikasi Ujian Beesmart CBT Mod 3 Rev.5

Formulir Kontak

Ariez myid

Dapatkan artikel terbaru setiap hari

Personal Blogger

Memasang Efek Gradient Circles di Blog

Langkah Pertama

Langkah Kedua

You might like

Formulir Kontak