Cara Membuat Widget Slide Pop-Up Pada Blog

 

    Hiirotaku - Membuat widget slide pop-up lumayan berguna untuk media promosi video kalian, apalagi jika kalian mempunyai channel youtube atau video yang ingin di promosikan, jika blog kalian mempunyai niche yang sama dengan isi blog pasti lebih berguna untuk menambah view pada blog + video. Widget ini juga bisa di gunakan untuk gambar maupun iklan adsense, serbaguna pokoknya.

Memasang Widget Slide Pop-Up

1. Masuk ke Blogger > Tema > Edit HTML > salin kode css di bawah ini tepat di atas kode ]]></b:skin> atau </style>

/* slide pop up (style buka di awal) */
.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}

2. Pasang kode html dibawah ini di atas kode <footer> atau dimanapun yang kalian inginkan

<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://1.bp.blogspot.com/-DpmNWcV1iL8/YZ9k7vPiIgI/AAAAAAAADQk/esC3SJILNuI_ENOhxwQVYPyhrjhUiRFagCNcBGAsYHQ/s0/widget%2Bpop%2Bup%2Bflash%2Bsale.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>

Catatan : untuk ingin menggunakan efek terbalik yaitu tertutup diawal dan terbuka saat diklik gunakan CSS berikut

/* slide pop up (style tutup di awal) */
.wc-pop-sld{display:none}
.wc-spop-sld{position:fixed;bottom:50px;right:-50%;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{right:0}
.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%;right:-60%}}
@media screen and (max-width:650px){.wc-spop-sld{width:85%;height:200px;right:-85%}} 

/* 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}

Itu saja tutorial sederhananya,  Sampai Jumpa..

DEMO

sc : wendycode