Cara Membuat Kotak Iklan 300x250 Dengan Efek Gradient - TRIK SIMPLE
Cara Membuat Kotak Iklan 300x250 Dengan Efek Gradien

Cara Membuat Kotak Iklan 300x250 Dengan Efek Gradien  - Oke pada kesempatan kali ini saya akan share ke pada kalian bagai mana cara membuat kotak iklan dengan efek gradien dan circles saya modifikasi dari suhu yang punya riswan.net yang saya modifikasi dengan efek gradien dengan 4 warna berjalan.

Dengan memasang kotak iklan 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 Kotak Iklan 300x250 Dengan Efek Gradien 


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%}}
#iklan-sidebar1 {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;}
#iklan-sidebar1 .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%);}
#iklan-sidebar1 .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;}
#iklan-sidebar1 .buttton1 a.download1:hover{background:#34495E;color:#fff;overflow:hidden;}
#iklan-sidebar1 .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.

Jika sudah klik simpan. sekarang saatnya pasang kode html di tata letak

Kemudia Masuk ke Tata Letak > Tambahkan Gadget > HTML/JavaScript copy kode dibawah ini dan pastekan pada tempat yang disediakan.

<div id='iklan-sidebar1'>
<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=6285943179227&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. untuk demonya bisa lihat di blog saya ini.

Oke sekian yang bisa saya jelaskan tentang Cara Membuat Kotak Iklan 300x250 Dengan Efek Gradien  Terima Kasih yang sudah berkunjung semoga bermanfaat

Cara Membuat Kotak Iklan 300x250 Dengan Efek Gradient


السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ
Cara Membuat Kotak Iklan 300x250 Dengan Efek Gradien

Cara Membuat Kotak Iklan 300x250 Dengan Efek Gradien  - Oke pada kesempatan kali ini saya akan share ke pada kalian bagai mana cara membuat kotak iklan dengan efek gradien dan circles saya modifikasi dari suhu yang punya riswan.net yang saya modifikasi dengan efek gradien dengan 4 warna berjalan.

Dengan memasang kotak iklan 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 Kotak Iklan 300x250 Dengan Efek Gradien 


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%}}
#iklan-sidebar1 {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;}
#iklan-sidebar1 .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%);}
#iklan-sidebar1 .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;}
#iklan-sidebar1 .buttton1 a.download1:hover{background:#34495E;color:#fff;overflow:hidden;}
#iklan-sidebar1 .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.

Jika sudah klik simpan. sekarang saatnya pasang kode html di tata letak

Kemudia Masuk ke Tata Letak > Tambahkan Gadget > HTML/JavaScript copy kode dibawah ini dan pastekan pada tempat yang disediakan.

<div id='iklan-sidebar1'>
<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=6285943179227&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. untuk demonya bisa lihat di blog saya ini.

Oke sekian yang bisa saya jelaskan tentang Cara Membuat Kotak Iklan 300x250 Dengan Efek Gradien  Terima Kasih yang sudah berkunjung semoga bermanfaat

وَ السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ

Disqus Codes
  • To write a bold letter please use or
  • To write a italic letter please use or
  • To write a underline letter please use
  • To write a strikethrought letter please use
  • To write HTML code, please use or
    or

    And use parse tool below to easy get the style.
Show Parser Box

strong em u strike
pre code pre code spoiler
embed

Jangan Lupa Subcribe