Membuat background Dengan Efek Gradient circles

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
Tutorial

NULIS ARTIKEL DIJOKIJENIUS DIBAYAR

  • ARTKEL YANG DITULIS ASLI BUATAN SENDIRI
  • JENIS ARTIKEL YANG DITULIS BELUM PASARAN
  • JUMLAH KATA DALAM ARTIKEL MINIMAL 700 KATA
  • SATU ARTIKEL KAMI HARGAI 10.000

0 Response to "Membuat background Dengan Efek Gradient circles"

Post a Comment

Catatan Berkomentar
  • Mohon Tinggalkan jejak sesuai dengan judul artikel.
  • Tidak diperbolehkan untuk mempromosikan barang atau berjualan.
  • Dilarang mencantumkan link aktif di komentar.
  • Komentar dengan link aktif akan otomatis dihapus
  • *Berkomentarlah dengan baik, Kepribadian Anda tercemin saat berkomentar.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel