Cara Memasang Popup YouTube Subscribe Responsive di Blogger

Cara Memasang Popup YouTube Subscribe Responsive di Blogger

Halo guys, pada kali ini kita akan membagikan Cara Memasang Popup YouTube Subscribe Responsive di Blogger. Mungkin diantara kalian ada yang ingin mempromosikan channelnya di blogger untuk mendapatkan subcriber, maka kamu dapat mencoba melakukan cara ini.

Dengan menggunakan sentuh program dari CSS dan Javascript kamu akan dapat membuat Popup YouTube Subscribe Responsive di Blogger yang profesional dan tidak menggangu pengunjung blog.

Kita semua sudah tahu bahaw Popup merupadan sebuah halaman atau page yang akan muncul, untuk pada artikel kali ini adalah halaman yang bertujuan untuk mempromosikan melakakuan Subcriber Channel YouTube dengan tampilan yang responsive dan rapi. Selain itu cara ini tanpa mengganggu karena menggunakan cache dan pastinya terdapat fitur tombol close.

Membuat Popup YouTube Subscribe di Blogger

Popup selain untuk youtube kamu juga dapat melakukannya untuk mempromosikan barang tau lainnya, akan tetapi jangan menggunakannya untuk iklan adsense karena dapat menyebabkan akun ke banned (sangat berbahaya jangan dilakukan).

Kelebihan Popup YouTube Subscribe

  • Tampilan Responsve, tampilan akan mengikuti layar perangkat.
  • Dengan tampilan animasi yang terlihat cantik
  • Subcribe Konfirmasi, maka akan melakukan subcribe secara otomatis
  • Tidak menggangu pengunjung karena menggunakan cache dan tombol close.

Untuk panduan Cara Memasang Popup YouTube Subscribe Responsive di Blogger sangatlah mudah, oke langsung saja kita masuk ke pembahasannya. Berikut caranya :

1. Pertama kita masuk ke dashboard blogger

2. Klik pada menu Tema kemudian klik Edit HTML

3. Selanjutnya cari kode </body> biasanya ada di bagian paling bawah

4. Lalu Copy pastekan kode dibawah ini tepat di atasnya.


<style> /* POPUP YOUTUBE RUI.MYID */ @-webkit-keyframes jconfirm-spin{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}} @keyframes jconfirm-spin{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}body[class*=jconfirm-no-scroll-]{overflow:hidden!important} .jconfirm{position:fixed;top:0;left:0;right:0;bottom:0;z-index:9;font-family:inherit;overflow:hidden} .jconfirm .jconfirm-bg{position:fixed;top:0;left:0;right:0;bottom:0;-webkit-transition:opacity .4s;transition:opacity .4s} .jconfirm .jconfirm-bg.jconfirm-bg-h{opacity:0!important} .jconfirm .jconfirm-scrollpane{position:fixed;top:0;left:0;right:0;bottom:0;overflow-y:auto;-webkit-perspective:500px;perspective:500px;-webkit-perspective-origin:center;perspective-origin:center} .jconfirm .jconfirm-box{background:white;border-radius:4px;position:relative;outline:0;padding:15px 15px 0;overflow:hidden;margin-left:auto;margin-right:auto} @-webkit-keyframes type-blue{1%,100%{border-color:#3498db}50%{border-color:#5faee3}} @keyframes type-blue{1%,100%{border-color:#3498db}50%{border-color:#5faee3}} @-webkit-keyframes type-green{1%,100%{border-color:#2ecc71}50%{border-color:#54d98c}} @keyframes type-green{1%,100%{border-color:#2ecc71}50%{border-color:#54d98c}} @-webkit-keyframes type-red{1%,100%{border-color:#e74c3c}50%{border-color:#ed7669}} @keyframes type-red{1%,100%{border-color:#e74c3c}50%{border-color:#ed7669}} @-webkit-keyframes type-orange{1%,100%{border-color:#f1c40f}50%{border-color:#f4d03f}} @keyframes type-orange{1%,100%{border-color:#f1c40f}50%{border-color:#f4d03f}} @-webkit-keyframes type-purple{1%,100%{border-color:#9b59b6}50%{border-color:#b07cc6}} @keyframes type-purple{1%,100%{border-color:#9b59b6}50%{border-color:#b07cc6}} @-webkit-keyframes type-dark{1%,100%{border-color:#34495e}50%{border-color:#46627f}} @keyframes type-dark{1%,100%{border-color:#34495e}50%{border-color:#46627f}} .jconfirm .jconfirm-box.jconfirm-type-animated{-webkit-animation-duration:2s;animation-duration:2s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite} .jconfirm .jconfirm-box.jconfirm-type-blue{border-top:solid 7px #3498db;-webkit-animation-name:type-blue;animation-name:type-blue} .jconfirm .jconfirm-box.jconfirm-type-green{border-top:solid 7px #2ecc71;-webkit-animation-name:type-green;animation-name:type-green} .jconfirm .jconfirm-box.jconfirm-type-red{border-top:solid 7px #e74c3c;-webkit-animation-name:type-red;animation-name:type-red} .jconfirm .jconfirm-box.jconfirm-type-orange{border-top:solid 7px #f1c40f;-webkit-animation-name:type-orange;animation-name:type-orange} .jconfirm .jconfirm-box.jconfirm-type-purple{border-top:solid 7px #9b59b6;-webkit-animation-name:type-purple;animation-name:type-purple} .jconfirm .jconfirm-box.jconfirm-type-dark{border-top:solid 7px #34495e;-webkit-animation-name:type-dark;animation-name:type-dark} .jconfirm .jconfirm-box.loading{height:120px} .jconfirm .jconfirm-box.loading:before{content:&#39;&#39;;position:absolute;left:0;background:white;right:0;top:0;bottom:0;border-radius:10px;z-index:1} .jconfirm .jconfirm-box.loading:after{opacity:.6;content:&#39;&#39;;height:30px;width:30px;border:solid 3px transparent;position:absolute;left:50%;margin-left:-15px;border-radius:50%;-webkit-animation:jconfirm-spin 1s infinite linear;animation:jconfirm-spin 1s infinite linear;border-bottom-color:dodgerblue;top:50%;margin-top:-15px;z-index:2} .jconfirm .jconfirm-box div.jconfirm-closeIcon{z-index:9;height:20px;width:20px;position:absolute;top:5px;right:5px;cursor:pointer;opacity:.6;text-align:center;-webkit-transition:opacity .3s ease-in;transition:opacity .3s ease-in;font-size:27px!important;line-height:20px!important;display:none} .jconfirm .jconfirm-box div.jconfirm-closeIcon:empty{display:none} .jconfirm .jconfirm-box div.jconfirm-closeIcon .fa{font-size:16px} .jconfirm .jconfirm-box div.jconfirm-closeIcon .glyphicon{font-size:16px} .jconfirm .jconfirm-box div.jconfirm-closeIcon .zmdi{font-size:16px} .jconfirm .jconfirm-box div.jconfirm-closeIcon:hover{opacity:1} .jconfirm .jconfirm-box div.jconfirm-title-c{display:block;font-size:22px;line-height:20px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none} .jconfirm .jconfirm-box div.jconfirm-title-c.jconfirm-hand{cursor:move} .jconfirm .jconfirm-box div.jconfirm-title-c .jconfirm-icon-c{font-size:inherit;padding-bottom:15px;display:inline-block;vertical-align:middle} .jconfirm .jconfirm-box div.jconfirm-title-c .jconfirm-icon-c i{vertical-align:middle} .jconfirm .jconfirm-box div.jconfirm-title-c .jconfirm-icon-c:empty{display:none} .jconfirm .jconfirm-box div.jconfirm-title-c .jconfirm-title{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-size:inherit;font-family:inherit;display:inline-block;vertical-align:middle;padding-bottom:15px} .jconfirm .jconfirm-box div.jconfirm-title-c .jconfirm-title:empty{display:none} .jconfirm .jconfirm-box div.jconfirm-content-pane{margin-bottom:15px;height:auto;-webkit-transition:height .4s ease-in;transition:height .4s ease-in;display:inline-block;width:100%;position:relative;overflow:hidden} .jconfirm .jconfirm-box div.jconfirm-content-pane .jconfirm-content img{max-width:100%;height:auto} .jconfirm .jconfirm-box div.jconfirm-content-pane .jconfirm-content:empty{display:none} .jconfirm .jconfirm-box .jconfirm-buttons{padding-bottom:11px} .jconfirm .jconfirm-box .jconfirm-buttons&gt;button{margin-bottom:4px;margin-left:2px;margin-right:2px} .jconfirm .jconfirm-box .jconfirm-buttons button{display:inline-block;padding:6px 12px;font-size:14px;font-weight:400;line-height:1.42857143;text-align:center;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;border-radius:4px;min-height:1em;outline:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transition:opacity .1s ease,background-color .1s ease,color .1s ease,box-shadow .1s ease,background .1s ease;transition:opacity .1s ease,background-color .1s ease,color .1s ease,box-shadow .1s ease,background .1s ease;-webkit-tap-highlight-color:transparent;border:0;background-image:none} .jconfirm .jconfirm-box .jconfirm-buttons button.btn-blue{background-color:#3498db;color:#FFF;text-shadow:none;-webkit-transition:background .2s;transition:background .2s} .jconfirm .jconfirm-box .jconfirm-buttons button.btn-blue:hover{background-color:#2980b9;color:#FFF} .jconfirm .jconfirm-box .jconfirm-buttons button.btn-green{background-color:#2ecc71;color:#FFF;text-shadow:none;-webkit-transition:background .2s;transition:background .2s} .jconfirm .jconfirm-box .jconfirm-buttons button.btn-green:hover{background-color:#27ae60;color:#FFF} .jconfirm .jconfirm-box .jconfirm-buttons button.btn-red{background-color:#e74c3c;color:#FFF;text-shadow:none;-webkit-transition:background .2s;transition:background .2s} .jconfirm .jconfirm-box .jconfirm-buttons button.btn-red:hover{background-color:#c0392b;color:#FFF} .jconfirm .jconfirm-box .jconfirm-buttons button.btn-orange{background-color:#f1c40f;color:#FFF;text-shadow:none;-webkit-transition:background .2s;transition:background .2s} .jconfirm .jconfirm-box .jconfirm-buttons button.btn-orange:hover{background-color:#f39c12;color:#FFF} .jconfirm .jconfirm-box .jconfirm-buttons button.btn-default{background-color:#ecf0f1;color:#000;text-shadow:none;-webkit-transition:background .2s;transition:background .2s} .jconfirm .jconfirm-box .jconfirm-buttons button.btn-default:hover{background-color:#bdc3c7;color:#000} .jconfirm .jconfirm-box .jconfirm-buttons button.btn-purple{background-color:#9b59b6;color:#FFF;text-shadow:none;-webkit-transition:background .2s;transition:background .2s} .jconfirm .jconfirm-box .jconfirm-buttons button.btn-purple:hover{background-color:#8e44ad;color:#FFF} .jconfirm .jconfirm-box .jconfirm-buttons button.btn-dark{background-color:#34495e;color:#FFF;text-shadow:none;-webkit-transition:background .2s;transition:background .2s} .jconfirm .jconfirm-box .jconfirm-buttons button.btn-dark:hover{background-color:#2c3e50;color:#FFF} .jconfirm .jconfirm-box.jconfirm-type-red .jconfirm-title-c .jconfirm-icon-c{color:#e74c3c!important} .jconfirm .jconfirm-box.jconfirm-type-blue .jconfirm-title-c .jconfirm-icon-c{color:#3498db!important} .jconfirm .jconfirm-box.jconfirm-type-green .jconfirm-title-c .jconfirm-icon-c{color:#2ecc71!important} .jconfirm .jconfirm-box.jconfirm-type-purple .jconfirm-title-c .jconfirm-icon-c{color:#9b59b6!important} .jconfirm .jconfirm-box.jconfirm-type-orange .jconfirm-title-c .jconfirm-icon-c{color:#f1c40f!important} .jconfirm .jconfirm-box.jconfirm-type-dark .jconfirm-title-c .jconfirm-icon-c{color:#34495e!important} .jconfirm .jconfirm-clear{clear:both}.jconfirm.jconfirm-rtl{direction:rtl} .jconfirm.jconfirm-rtl div.jconfirm-closeIcon{left:5px;rght:auto} .jconfirm.jconfirm-white .jconfirm-bg,.jconfirm.jconfirm-light .jconfirm-bg{background-color:#444;opacity:.6} .jconfirm.jconfirm-white .jconfirm-box,.jconfirm.jconfirm-light .jconfirm-box{box-shadow:0 2px 6px rgba(0,0,0,0.2);border-radius:5px} .jconfirm.jconfirm-white .jconfirm-box .jconfirm-title-c .jconfirm-icon-c,.jconfirm.jconfirm-light .jconfirm-box .jconfirm-title-c .jconfirm-icon-c{margin-right:8px;margin-left:0} .jconfirm.jconfirm-white .jconfirm-box .jconfirm-buttons,.jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons{float:right} .jconfirm.jconfirm-white .jconfirm-box .jconfirm-buttons button,.jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons button{text-transform:uppercase;font-size:14px;font-weight:bold;text-shadow:none} .jconfirm.jconfirm-white .jconfirm-box .jconfirm-buttons button.btn-default,.jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons button.btn-default{box-shadow:none;color:#333} .jconfirm.jconfirm-white .jconfirm-box .jconfirm-buttons button.btn-default:hover,.jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons button.btn-default:hover{background:#ddd} .jconfirm.jconfirm-white.jconfirm-rtl .jconfirm-title-c .jconfirm-icon-c,.jconfirm.jconfirm-light.jconfirm-rtl .jconfirm-title-c .jconfirm-icon-c{margin-left:8px;margin-right:0} .jconfirm.jconfirm-black .jconfirm-bg,.jconfirm.jconfirm-dark .jconfirm-bg{background-color:darkslategray;opacity:.4} .jconfirm.jconfirm-black .jconfirm-box,.jconfirm.jconfirm-dark .jconfirm-box{box-shadow:0 2px 6px rgba(0,0,0,0.2);background:#444;border-radius:5px;color:white} .jconfirm.jconfirm-black .jconfirm-box .jconfirm-title-c .jconfirm-icon-c,.jconfirm.jconfirm-dark .jconfirm-box .jconfirm-title-c .jconfirm-icon-c{margin-right:8px;margin-left:0} .jconfirm.jconfirm-black .jconfirm-box .jconfirm-buttons,.jconfirm.jconfirm-dark .jconfirm-box .jconfirm-buttons{float:right} .jconfirm.jconfirm-black .jconfirm-box .jconfirm-buttons button,.jconfirm.jconfirm-dark .jconfirm-box .jconfirm-buttons button{border:0;background-image:none;text-transform:uppercase;font-size:14px;font-weight:bold;text-shadow:none;-webkit-transition:background .1s;transition:background .1s;color:white} .jconfirm.jconfirm-black .jconfirm-box .jconfirm-buttons button.btn-default,.jconfirm.jconfirm-dark .jconfirm-box .jconfirm-buttons button.btn-default{box-shadow:none;color:#fff;background:0} .jconfirm.jconfirm-black .jconfirm-box .jconfirm-buttons button.btn-default:hover,.jconfirm.jconfirm-dark .jconfirm-box .jconfirm-buttons button.btn-default:hover{background:#666} .jconfirm.jconfirm-black.jconfirm-rtl .jconfirm-title-c .jconfirm-icon-c,.jconfirm.jconfirm-dark.jconfirm-rtl .jconfirm-title-c .jconfirm-icon-c{margin-left:8px;margin-right:0} .jconfirm .jconfirm-box.hilight.jconfirm-hilight-shake{-webkit-animation:shake .82s cubic-bezier(0.36,0.07,0.19,0.97) both;animation:shake .82s cubic-bezier(0.36,0.07,0.19,0.97) both;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)} .jconfirm .jconfirm-box.hilight.jconfirm-hilight-glow{-webkit-animation:glow .82s cubic-bezier(0.36,0.07,0.19,0.97) both;animation:glow .82s cubic-bezier(0.36,0.07,0.19,0.97) both;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)} @-webkit-keyframes shake{10%,90%{-webkit-transform:translate3d(-2px,0,0);transform:translate3d(-2px,0,0)}20%,80%{-webkit-transform:translate3d(4px,0,0);transform:translate3d(4px,0,0)}30%,50%,70%{-webkit-transform:translate3d(-8px,0,0);transform:translate3d(-8px,0,0)}40%,60%{-webkit-transform:translate3d(8px,0,0);transform:translate3d(8px,0,0)}} @keyframes shake{10%,90%{-webkit-transform:translate3d(-2px,0,0);transform:translate3d(-2px,0,0)}20%,80%{-webkit-transform:translate3d(4px,0,0);transform:translate3d(4px,0,0)}30%,50%,70%{-webkit-transform:translate3d(-8px,0,0);transform:translate3d(-8px,0,0)}40%,60%{-webkit-transform:translate3d(8px,0,0);transform:translate3d(8px,0,0)}} @-webkit-keyframes glow{0%,100%{box-shadow:0 0 3px red}50%{box-shadow:0 0 30px red}} @keyframes glow{0%,100%{box-shadow:0 0 3px red}50%{box-shadow:0 0 30px red}} .jconfirm{-webkit-perspective:400px;perspective:400px}.jconfirm .jconfirm-box{opacity:1;-webkit-transition-property:all;transition-property:all} .jconfirm .jconfirm-box.jconfirm-animation-top,.jconfirm .jconfirm-box.jconfirm-animation-left,.jconfirm .jconfirm-box.jconfirm-animation-right,.jconfirm .jconfirm-box.jconfirm-animation-bottom,.jconfirm x.jconfirm-animation-opacity,.jconfirm .jconfirm-box.jconfirm-animation-zoom,.jconfirm .jconfirm-box.jconfirm-animation-scale,.jconfirm .jconfirm-box.jconfirm-animation-none,.jconfirm .jconfirm-box.jconfirm-animation-rotate,.jconfirm .jconfirm-box.jconfirm-animation-rotatex,.jconfirm .jconfirm-box.jconfirm-animation-rotatey,.jconfirm .jconfirm-box.jconfirm-animation-scaley,.jconfirm .jconfirm-box.jconfirm-animation-scalex{opacity:0} .jconfirm .jconfirm-box.jconfirm-animation-rotate{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)} .jconfirm .jconfirm-box.jconfirm-animation-rotatex{-webkit-transform:rotateX(90deg);transform:rotateX(90deg);-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center} .jconfirm .jconfirm-box.jconfirm-animation-rotatexr{-webkit-transform:rotateX(-90deg);transform:rotateX(-90deg);-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center} .jconfirm .jconfirm-box.jconfirm-animation-rotatey{-webkit-transform:rotatey(90deg);-ms-transform:rotatey(90deg);transform:rotatey(90deg);-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center} .jconfirm .jconfirm-box.jconfirm-animation-rotateyr{-webkit-transform:rotatey(-90deg);-ms-transform:rotatey(-90deg);transform:rotatey(-90deg);-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center} .jconfirm .jconfirm-box.jconfirm-animation-scaley{-webkit-transform:scaley(1.5);-ms-transform:scaley(1.5);transform:scaley(1.5);-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center} .jconfirm .jconfirm-box.jconfirm-animation-scalex{-webkit-transform:scalex(1.5);-ms-transform:scalex(1.5);transform:scalex(1.5);-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center} .jconfirm .jconfirm-box.jconfirm-animation-top{-webkit-transform:translate(0px,-100px);-ms-transform:translate(0px,-100px);transform:translate(0px,-100px)} .jconfirm .jconfirm-box.jconfirm-animation-left{-webkit-transform:translate(-100px,0px);-ms-transform:translate(-100px,0px);transform:translate(-100px,0px)} .jconfirm .jconfirm-box.jconfirm-animation-right{-webkit-transform:translate(100px,0px);-ms-transform:translate(100px,0px);transform:translate(100px,0px)} .jconfirm .jconfirm-box.jconfirm-animation-bottom{-webkit-transform:translate(0px,100px);-ms-transform:translate(0px,100px);transform:translate(0px,100px)} .jconfirm .jconfirm-box.jconfirm-animation-zoom{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)} .jconfirm .jconfirm-box.jconfirm-animation-scale{-webkit-transform:scale(0.5);-ms-transform:scale(0.5);transform:scale(0.5)} .jconfirm .jconfirm-box.jconfirm-animation-none{visibility:hidden} .jconfirm.jconfirm-supervan .jconfirm-bg{background-color:rgba(54,70,93,0.95)} .jconfirm.jconfirm-supervan .jconfirm-box{background-color:transparent} .jconfirm.jconfirm-supervan .jconfirm-box.jconfirm-type-blue{border:0} .jconfirm.jconfirm-supervan .jconfirm-box.jconfirm-type-green{border:0} .jconfirm.jconfirm-supervan .jconfirm-box.jconfirm-type-red{border:0} .jconfirm.jconfirm-supervan .jconfirm-box.jconfirm-type-orange{border:0} .jconfirm.jconfirm-supervan .jconfirm-box.jconfirm-type-purple{border:0} .jconfirm.jconfirm-supervan .jconfirm-box.jconfirm-type-dark{border:0} .jconfirm.jconfirm-supervan .jconfirm-box div.jconfirm-closeIcon{color:white} .jconfirm.jconfirm-supervan .jconfirm-box div.jconfirm-title-c{text-align:center;color:white;font-size:28px;font-weight:normal} .jconfirm.jconfirm-supervan .jconfirm-box div.jconfirm-title-c&gt;*{padding-bottom:25px} .jconfirm.jconfirm-supervan .jconfirm-box div.jconfirm-title-c .jconfirm-icon-c{margin-right:8px;margin-left:0} .jconfirm.jconfirm-supervan .jconfirm-box div.jconfirm-content-pane{margin-bottom:25px} .jconfirm.jconfirm-supervan .jconfirm-box div.jconfirm-content{text-align:center;color:white} .jconfirm.jconfirm-supervan .jconfirm-box .jconfirm-buttons{text-align:center} .jconfirm.jconfirm-supervan .jconfirm-box .jconfirm-buttons button{font-size:16px;border-radius:2px;background:#303f53;text-shadow:none;border:0;color:white;padding:10px;min-width:100px} .jconfirm.jconfirm-supervan.jconfirm-rtl .jconfirm-box div.jconfirm-title-c .jconfirm-icon-c{margin-left:8px;margin-right:0} .jconfirm.jconfirm-material .jconfirm-bg{background-color:rgba(0,0,0,0.67)} .jconfirm.jconfirm-material .jconfirm-box{background-color:white;box-shadow:0 7px 8px -4px rgba(0,0,0,0.2),0 13px 19px 2px rgba(0,0,0,0.14),0 5px 24px 4px rgba(0,0,0,0.12);padding:30px 25px 10px 25px} .jconfirm.jconfirm-material .jconfirm-box .jconfirm-title-c .jconfirm-icon-c{margin-right:8px;margin-left:0} .jconfirm.jconfirm-material .jconfirm-box div.jconfirm-closeIcon{color:rgba(0,0,0,0.87)} .jconfirm.jconfirm-material .jconfirm-box div.jconfirm-title-c{color:rgba(0,0,0,0.87);font-size:22px;font-weight:bold} .jconfirm.jconfirm-material .jconfirm-box div.jconfirm-content{color:rgba(0,0,0,0.87)} .jconfirm.jconfirm-material .jconfirm-box .jconfirm-buttons{text-align:right} .jconfirm.jconfirm-material .jconfirm-box .jconfirm-buttons button{text-transform:uppercase;font-weight:500} .jconfirm.jconfirm-material.jconfirm-rtl .jconfirm-title-c .jconfirm-icon-c{margin-left:8px;margin-right:0} .jconfirm.jconfirm-bootstrap .jconfirm-bg{background-color:rgba(0,0,0,0.21)} .jconfirm.jconfirm-bootstrap .jconfirm-box{background-color:white;box-shadow:0 3px 8px 0 rgba(0,0,0,0.2);border:solid 1px rgba(0,0,0,0.4);padding:15px 0 0} .jconfirm.jconfirm-bootstrap .jconfirm-box .jconfirm-title-c .jconfirm-icon-c{margin-right:8px;margin-left:0} .jconfirm.jconfirm-bootstrap .jconfirm-box div.jconfirm-closeIcon{color:rgba(0,0,0,0.87)} .jconfirm.jconfirm-bootstrap .jconfirm-box div.jconfirm-title-c{color:rgba(0,0,0,0.87);font-size:22px;font-weight:bold;padding-left:15px;padding-right:15px} .jconfirm.jconfirm-bootstrap .jconfirm-box div.jconfirm-content{color:rgba(0,0,0,0.87);padding:0 15px} .jconfirm.jconfirm-bootstrap .jconfirm-box .jconfirm-buttons{text-align:right;padding:10px;margin:-5px 0 0;border-top:solid 1px #ddd;overflow:hidden;border-radius:0 0 4px 4px} .jconfirm.jconfirm-bootstrap .jconfirm-box .jconfirm-buttons button{font-weight:500} .jconfirm.jconfirm-bootstrap.jconfirm-rtl .jconfirm-title-c .jconfirm-icon-c{margin-left:8px;margin-right:0} .jconfirm.jconfirm-modern .jconfirm-bg{background-color:slategray;opacity:.6} .jconfirm.jconfirm-modern .jconfirm-box{background-color:white;box-shadow:0 7px 8px -4px rgba(0,0,0,0.2),0 13px 19px 2px rgba(0,0,0,0.14),0 5px 24px 4px rgba(0,0,0,0.12);padding:30px 30px 15px} .jconfirm.jconfirm-modern .jconfirm-box div.jconfirm-closeIcon{color:rgba(0,0,0,0.87);top:15px;right:15px} .jconfirm.jconfirm-modern .jconfirm-box div.jconfirm-title-c{color:rgba(0,0,0,0.87);font-size:24px;font-weight:bold;text-align:center;margin-bottom:10px} .jconfirm.jconfirm-modern .jconfirm-box div.jconfirm-title-c .jconfirm-icon-c{-webkit-transition:-webkit-transform .5s;transition:transform .5s;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);display:block;margin-right:0;margin-left:0;margin-bottom:10px;font-size:69px;color:#aaa} .jconfirm.jconfirm-modern .jconfirm-box div.jconfirm-content{text-align:center;font-size:15px;color:#777;margin-bottom:25px} .jconfirm.jconfirm-modern .jconfirm-box .jconfirm-buttons{text-align:center} .jconfirm.jconfirm-modern .jconfirm-box .jconfirm-buttons button{font-weight:bold;text-transform:uppercase;-webkit-transition:background .1s;transition:background .1s;padding:10px 20px} .jconfirm.jconfirm-modern .jconfirm-box .jconfirm-buttons button+button{margin-left:4px} .jconfirm.jconfirm-modern.jconfirm-open .jconfirm-box .jconfirm-title-c .jconfirm-icon-c{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)} </style>  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.2.0/jquery-confirm.min.js'/> <script>mobile=&#39;no&#39;     function Set_Cookie(name, value, expires, path, domain, secure) {         var today = new Date();         today.setTime(today.getTime());         var expires_date = new Date(today.getTime() + (expires));             document.cookie = name + &quot;=&quot; + escape(value) +      ((expires) ? &quot;;expires=&quot; + expires_date.toGMTString() : &quot;&quot;) +      ((path) ? &quot;;path=&quot; + path : &quot;&quot;) +      ((domain) ? &quot;;domain=&quot; + domain : &quot;&quot;) +      ((secure) ? &quot;;secure&quot; : &quot;&quot;);      }      function Get_Cookie(name) {          var start = document.cookie.indexOf(name + &quot;=&quot;);         var len = start + name.length + 1;         if ((!start) &amp;&amp;     (name != document.cookie.substring(0, name.length))) {             return null;         }         if (start == -1) return null;         var end = document.cookie.indexOf(&quot;;&quot;, len);         if (end == -1) end = document.cookie.length;         return unescape(document.cookie.substring(len, end));     }      function Delete_Cookie(name, path, domain) {         if (Get_Cookie(name)) document.cookie = name + &quot;=&quot; +     ((path) ? &quot;;path=&quot; + path : &quot;&quot;) +     ((domain) ? &quot;;domain=&quot; + domain : &quot;&quot;) +     &quot;;expires=Mon, 11-November-1989 00:00:01 GMT&quot;;     }      function popunder() {      var status = false;      if ($(window).width() &lt; 960) {    status = true;  }       if (Get_Cookie(&quot;adpopup43&quot;) == null) {          Set_Cookie(&quot;adpopup43&quot;, &#39;adpopupPopunder&#39;, &#39;+1+&#39;, &#39;/&#39;, &#39;&#39;, &#39;&#39;);             $.dialog({                                 columnClass: &#39;col-md-4 col-md-offset-4&#39;,     boxWidth: &#39;480px&#39;,     useBootstrap: status,     title: &#39;&#39;,     content: &#39;&lt;a target=&quot;_blank&quot; href=&quot;https://www.youtube.com/channel/UCNCLZV57VETWjpGLri7X80A?sub_confirmation=1&quot;&gt;&lt;img src=&quot;https://4.bp.blogspot.com/-GoxHJkjr87o/Xxhmoc0gW9I/AAAAAAAADEw/0N-DVL8qTDEaaeFm74azzxwXRU6F6qjlQCK4BGAYYCw/s120-pf/images%2B%252810%2529.jpeg&quot;/&gt;&lt;/a&gt;&#39;,    });             window.focus();         }     }      function addEvent(obj, eventName, func) {         if (obj.attachEvent) {             obj.attachEvent(&quot;on&quot; + eventName, func);         }         else if (obj.addEventListener) {             obj.addEventListener(eventName, func, true);         }         else {             obj[&quot;on&quot; + eventName] = func;         }     }   setTimeout(function(){ popunder(); }, 9+&quot;00&quot;);  </script>

5. Simpan Tema.

Keterangan:

  • https://www.youtube.com/channel/UCNCLZV57VETWjpGLri7X80A - ganti dengan link channel kamu.
  • https://4.bp.blogspot.com/-GoxHJkjr87o/Xxhmoc0gW9I/AAAAAAAADEw/0N-DVL8qTDEaaeFm74azzxwXRU6F6qjlQCK4BGAYYCw/s120-pf/images%2B%252810%2529.jpeg - edit dan ganti gambar ini sesuai dengan keinginan.

Yang saya maksud subscribe otomatis karena link channel youtube yang kita sisipkan ditambahkan ?sub_confirmation=1, apabila diklik langsung meminta konfirmasi subscribe.

Demikianlah artikel Cara Memasang Popup YouTube Subscribe Responsive di Blogger yang dapat saya sampaikan semoga bermanfaat dan menambah pengetahuan kita semua.

Tidak ada komentar untuk "Cara Memasang Popup YouTube Subscribe Responsive di Blogger"