Hello sobat IcloudZer dengan senang hati admin akan selalu memberikan informasi informasi terbaru seputar dunia blogging dan juga tips tips dalam membuat tampilan blog semakin berkesan, terkhusus didalam pembahasan kita kali ini admin akan membahas bagaiamana sih caranya membuat iklan sticky atau melayang dibawah blog
Info: Baiklah jika kamunya sudah penasaran yuk langsung aja kita mulaikan pembahasannya
Iklan melayang
Sudah banyak artikel yang admin bahas disini mengenai bagaiamana cara membuat tampilan iklan atau cover dari iklan agar lebih berkesan dan dan mendapatkan hasil klik yang juga memuaskan
Namun kali ini tampilan iklan nantinya akan memiliki gaya sticky ataupun yang disebut melayang secara responsif dibawah blogger tanpa menutup seluruh tampilan blog tersebut
Info: Bisa dibilang bahwa iklan sticky ini benar benar responsif tentunya
Tampilan Responsif
Seperti yang sudah admin jabarkan sebelumnya bahwa tampilan iklan sticky diblogger ini benar benar responsif, responsif pada tampilan mobile dan responsif juga pada tampilan desktop, dan tidak mengurangi kecepatan performa blog kamu apabila kamu memasang iklan sticky ini
Cara pembuatan
Baiklah sekarang admin akan langsung mulai membahas bagaimana cara membuat ikan melayang dibawah blog dan responsif pastinya, baca dan pelajari artikel ini hingga selesai oke biar ngak salah paham
Kode CSS
Langkah pertama dan seperti biasanya kamu bisa menyalin kode CSS dibawah ini, kemudian kamu bisa meletakkannya diatas kode ]]></b:skin>
.___rah-stickyButtom{bottom: 0; left: 0;
width: 100%; min-height: 70px; max-height: 200px;padding: 5px 0;
box-shadow: 0 -6px 18px 0 rgba(9,32,76,.1);
-webkit-transition: all .10s ease-in; transition: all .10s ease-in;position:fixed;display:flex;align-items:center;justify-content:center;background-color: #ff000000; z-index: 20; }.___rah-stickyButtom--opencloses{position:relative;font-size:12px;color:#f80000;}.___rah-stickyButtom--openclose{
width:30px;height:30px;display: flex;align-items:center;justify-content:center;
border-radius:12px 0 0;position:absolute;right:0; top: -30px;
background-color:#ff000000;box-shadow: 0 -6px 18px 0 rgba(9,32,76,.08); }.___rah-stickyButtom .___rah-stickyButtom--openclose svg{width: 21px; height: 21px; fill:#000; } .___rah-stickyButtom .___rah-stickyButtom--cnt{overflow: hidden; display: block; position: relative;height:70px; width:100%;margin-right:10px; margin-left:10px;}.___rah-stickyButtom.close {bottom:-80px;}.___rah-stickyButtom.close svg{
transform:rotate(180deg);}Info: Kamu bisa menggunakan tag kode <style> untuk meletakkan kode CSS diatas
Kode HTML
Langkah selanjutnya yang bisa kamu lakukan adalah menyalin lagi kode HTML dibawah ini, kemudian kamu bisa meletakkan nya diatas kode </body>
<div class="___rah-stickyButtom" id="___rah-stickyButtom">
<div class="___rah-stickyButtom--openclose">
<svg viewbox="0 0 24 24">
<path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z">
</path>
</svg>
</div>
<div class="___rah-stickyButtom--cnt">
<div class="___rah-stickyButtom--opencloses" id='mscontent'/>
</div>
<!-- Kode iklan anda -->
</div>Sebagai informasi: Kode HTML diatas berfungsi untuk menampilkan iklan melayang nya tersebut
Kode Javascript
Langkah selanjutnya kamu bisa menyalin dan menempelkan kode Javascript berikut ini, kemudian kamu bisa meletakkan diatas Kode </body>
<script type='text/javascript'>
//<![CDATA[
$(function(){$('.___rah-stickyButtom--openclose').click(function(){$('.___rah-stickyButtom').toggleClass('close');});});$(document).ready(function(){$('#mscontent').attr('style','display: inline-block !important;visibility: visible!important; opacity: 1!important; position: relative!important; z-index: 1!important; font-size: 13px!important; color: #161617!important').html('Created with <i style="color:#161617;-webkit-animation: icloudiceRing 5s 0s ease-in-out infinite; -webkit-transform-origin: 50% 4px; -moz-animation: icloudiceRing 6s 0s ease-in-out infinite; -moz-transform-origin: 50% 4px; animation: icloudiceRing 6s 0s ease-in-out infinite; transform-origin: 50% 4px;" class="fa fa-heart"></i> by <a href="https://icloudice.com" style="visibility: visible!important; opacity: 1!important; position: relative!important; z-index: 1!important; font-size: 13px!important; color: #161617!important;font-weight: 500!important;">Icloudice</a>');setInterval(function(){if(!$('#mscontent:visible').length)window.location.href='https://icloudice.com'},3000)});
//]]></script>Sebagai informasi: Kode javascript diatas berfungsi untuk menyetabilkan performa iklan sticky nya okay
Contoh Tampilan
Baiklah untuk contoh tampilan dari Iklan sticky nya kamu bisa melihanya didalam ikaln bawah yang sedang admin gunakan sekarang ini
Info: Bagaiamana dengan contoh tampilan dari iklan stickynya apakah kamu berkesan
