widget slide pop up ditengah artikel blog

Wilujeng sumping dulur, pada kesempatan kali ini okayim.com akan membagikan slide popup yang muncul di tengah-tengah artikel blog. Widget ini biasanya digunakan oleh para blogger untuk menampilkan Vidio YouTube bahkan di pasangi sebagai tampilan iklan AdSense.

Saya sebenarnya sudah lama membuat artikel ini namun masih saya simpan dalam bentuk draft di blogger saya. Karena saya sedang sibuk, dimaklumi karena sudah punya anak jadi kebutuhan banyak hehehe.

Widget slider popup yang saya bagikan ini memiliki banyak fungsi ( seperti menampilkan Vidio YouTube, iklan AdSense, gambar,dll ) semua tergantung sobat okayim mau digunakan untuk menampilkan apa nantinya di blog sobat.

Untuk Demonya silahkan sobat okayim melihatnya sendiri di tombol demo yang sudah saya berikan. DEMO

Cara Membuat Slide Popup Di Blogger

Seperti Biasa Langkah Pertama MasukKe Tema > Pilih Edit Html > kemudian pastekan code dibawah ini tepat di atas code ]]></b:skin> atau di atas kode </style>

/* slide pop up by wendy code */
.wc-pop-sld{display:none}
.wc-spop-sld{position:fixed;bottom:50px;right:0;width:50%;height:300px;box-shadow:0 -6px 18px 0 rgb(9 32 76 / 10%);transition:all .2s ease-in;display:flex;align-items:center;justify-content:center;background-color:#fefefe;z-index:50;border-top:1px solid #eceff1}
.wc-sld-cls{width:50px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:12px 12px 0 0;border:1px solid #eceff1;border-bottom:0;position:absolute;left:-45px;top:5px;background-color:inherit;-webkit-transform:rotate(270deg);transform:rotate(270deg)}
.wc-sld-ktn iframe,.wc-sld-ktn img{width:100%;height:100%;bottom:0;right:0;border:0}
.wc-sld-cls svg{width:18px;height:18px;fill:none!important;stroke:#48525c;stroke-linecap:round;stroke-linejoin:round;stroke-width:1}
.wc-sld-ktn{flex-grow:1;overflow:hidden;display:block;position:relative;width:100%;height:100%}
.wc-pop-sld:checked ~ .wc-spop-sld{-webkit-transform:translateX(100%);transform:translateX(100%)}
.wc-pop-sld:checked ~ .wc-spop-sld .wc-sld-ktn{display:none}
.wc-pop-sld:checked ~ .wc-spop-sld .wc-sld-cls svg{-webkit-transform:rotate(180deg);transform:rotate(180deg)}
@media screen and (min-width:650px) and (max-width:950px){.wc-spop-sld {width:60%}}
@media screen and (max-width:650px){.wc-spop-sld{width:85%;height:200px}} 
/* CSS dark mode sesuaikan class (.drK) jika berbeda agar dapat berfungsi */
.drK .wc-spop-sld,.drK .wc-sld-cls{border-color:rgba(255,255,255,.1)}
.drK .wc-spop-sld{background-color:#2d2d30}

Langkah berikutnya silahkan anda copy dan pasangkan code dibawah ini tepat di atas code<footer atau dimanapun yang kalian inginkan pada blog kalian.

<input class='wc-pop-sld hidden' id='wc-pop-sld' type='checkbox'/>
<div class='wc-spop-sld'>
<label class='wc-sld-cls' for='wc-pop-sld'>
<svg viewBox='0 0 24 24'><g transform='translate(5.000000, 8.500000)'><path d='M14,0 C14,0 9.856,7 7,7 C4.145,7 0,0 0,0'/></g></svg>
</label>
<div class='wc-sld-ktn'>
<!-- ubah ( MCGWhgwcr3c dengan ) dengan id vidio youtube kalian -->
<iframe src='https://www.youtube.com/embed/MCGWhgwcr3c?autoplay=1' allow='fullscreen'></iframe>
  
<!-- untuk menampilkan gambar hapus tag komen di bawah ini -->
<!--<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAJIb64N6UZWNCFvUPZff3f-zL3JwDYVAbnWn33yoOF4QRE-s_A1uR6fX3QlGOq3Vl0x2xuHqAyZuBDnMkmpJ2L20nw5vT8AA9fZvR9o2xc4MMK13xsCsteK_SFNrpbDjAUcPGKWSa_xiL/s0/widget+pop+up+flash+sale.jpg'/>-->
  
<!-- untuk menampilkan iklan adsanse hapus tag komen di bawah ini dan sesuaikan kode ca-pub dan data-ad-slot -->
<!--<ins class='adsbygoogle' data-ad-client='ca-pub-0000000000000000' data-ad-format='horizontal' data-ad-slot='0000000000' data-full-width-responsive='false' style='display:block'/><script>(adsbygoogle = window.adsbygoogle || []).push({});</script>-->
</div></div>

Kode yang berwarna merah bisa anda sesuaikan dengan code yang anda inginkan.

Oke sobat okayimcom sekian artikel CARA MEMBUAT WIDGET SLIDE POPUP di blogger milik sobat okayim.com