Membuat Popup Atau Modal Box Untuk Notifikasi Install Aplikasi Blog

Ditulis oleh: Adhy Suryadi

Ditulis pada: 7/09/2019

Membuat Popup Atau Modal Box Untuk Notifikasi Install Aplikasi Blog - Karena di Blogger belum bisa membuat PWA sepenuhnya, maka kita membuat popup atau modal box untuk notifikasi install aplikasi blog dengan memanfaatkan manifest.json untuk dipasangkan secara manual oleh pengguna.

Popup atau modal box ini berisi panduan cara pasang aplikasi blog di home screen ponsel pengguna, sehingga dengan ini diharapkan pengguna bisa memasang aplikasi blog kita di ponsel mereka.

Dengan aplikasi blog ini, kita atau pengguna bisa dengan mudah masuk ke blog kita seperti layaknya aplikasi yang lain, namun tentu saja harus tetap online.

Jadi, yang pertama kita harus membuat aplikasi ini dengan manifest.json. Silahkan simak pada link berikut tentang manifest.json di Blogger.

• Tentang Manifest.json Di Blogger

Manifest.json ini bisa diterapkan pada blog AMP maupun NON AMP.

Kemudian silahkan gunakan kode CSS dan HTML berikut untuk membuat modal box notifikasi install aplikasi blog seperti yang di Kompi Ajaib ini.

1. Untuk Blog AMP.

Simpan kode CSS berikut di CSS Custom blog Anda. Posisinya akan fixed melayang di kanan atas blog.

.app-android-outer {

  width: 50px;

  position: fixed;

  top: 0;

  right: 50px;

  z-index: 9999

}

.app-android {

  width: 50px;

  height: 55px;

  line-height: 55px;

  margin: 0;

  text-align: center;

  position: relative;

  float: right;

  cursor: pointer

}

.app-android svg {

  vertical-align: middle;

  opacity: .7

}

.app-android:hover svg,

.app-android:focus svg,

.app-android:active svg {

  opacity: 1

}

.app-android:before {

  content: "";

  position: absolute;

  top: 0;

  bottom: 0;

  left: 0;

  right: 0

}

.app-content {

  background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiBWREnou07l0Gk85N4tEWHVL6vEQ5TMHyRKfp1ecXwzCpw2l654y5bDFqWbVvYz037EzGX8BiHATCXb6RPba5KbdLNABgwL5UJr8AW54Z55RFuhymznbeb5V6xpR34GVgis4RIIQvAgI/s300-rw/android-4.png) no-repeat bottom left;

  width: 300px;

  padding: 0;

  border: 1px solid #ccc;

  border-color: rgba(0, 0, 0, .2);

  line-height: 1.3;

  -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, .2);

  box-shadow: 0 2px 10px rgba(0, 0, 0, .2);

  outline: 0;

  position: absolute;

  right: 50%;

  top: 50px;

  margin-right: -40px;

  -webkit-border-radius: 2px;

  border-radius: 2px;

  -webkit-user-select: text;

  z-index: 2;

}

.app-content h3 {

  margin: 0;

  padding: 5px 20px;

  color: #333;

  font-size: 18px;

  font-weight: 700;

  border-bottom: 1px solid #ccc;

  border-color: rgba(0, 0, 0, .2)

}

.app-content-on {

  padding: 10px 20px 16px;

  color: #333;

  font-size: 16px;

  font-weight: 400

}

.app-content-on svg {

  vertical-align: -7px;

}

.app-content:before {

  content: "";

  border-color: transparent;

  border-style: dashed dashed solid;

  border-width: 0 8.5px 8.5px;

  position: absolute;

  right: 0;

  margin-right: 30px;

  z-index: 1;

  height: 0;

  width: 0;

  border-bottom-color: #ccc;

  border-bottom-color: rgba(0, 0, 0, .2);

  top: -9.5px

}

.app-content:after {

  content: "";

  border-color: transparent;

  border-bottom-color: #fff;

  border-style: dashed dashed solid;

  border-width: 0 8.5px 8.5px;

  position: absolute;

  right: 0;

  margin-right: 30px;

  top: -8.5px;

  z-index: 1;

  height: 0;

  width: 0

}

.app-close-button {

  position: absolute;

  width: 18px;

  height: 18px;

  line-height: 28px;

  text-align: center;

  top: 7px;

  right: 5px;

  background: 0 0;

  border: none;

  cursor: pointer;

  padding: 0

}

.app-close-button:before {

  content: "";

  position: absolute;

  top: -15px;

  right: -15px;

  bottom: -15px;

  left: -15px;

  cursor: pointer

}

.slideInUp {

  -webkit-animation-name: slideInUp;

  animation-name: slideInUp;

  -webkit-animation-duration: 1s;

  animation-duration: 1s;

  -webkit-animation-fill-mode: both;

  animation-fill-mode: both

}

@-webkit-keyframes slideInUp {

  0% {

    -webkit-transform: translateY(100%);

    transform: translateY(100%);

    visibility: visible

  }

  100% {

    -webkit-transform: translateY(0);

    transform: translateY(0)

  }

}

@keyframes slideInUp {

  0% {

    -webkit-transform: translateY(100%);

    transform: translateY(100%);

    visibility: visible

  }

  100% {

    -webkit-transform: translateY(0);

    transform: translateY(0)

  }

}

@media screen and (max-width:960px) {

  .app-android-outer {

    right: 80px

  }

}

@media screen and (max-width:375px) {

  .app-content {

    margin-right: -75px

  }

  .app-content:after,

  .app-content:before {

    margin-right: 65px

  }

}

@media screen and (max-width:320px) {

  .app-content {

    margin-right: -95px

  }

  .app-content:after,

  .app-content:before {

    margin-right: 85px

  }

}

Kemudian simpan kode HTML ini di atas kode </body>

<div class='app-android-outer'>

      <div aria-label='Open Content' class='app-android' on='tap:appcontent.toggleVisibility' role='button' tabindex='0' title='Install aplikasi Kompi Ajaib'>

<svg height='20' viewBox='0 0 24 24' width='20'><path d='M15,5H14V4H15M10,5H9V4H10M15.53,2.16L16.84,0.85C17.03,0.66 17.03,0.34 16.84,0.14C16.64,-0.05 16.32,-0.05 16.13,0.14L14.65,1.62C13.85,1.23 12.95,1 12,1C11.04,1 10.14,1.23 9.34,1.63L7.85,0.14C7.66,-0.05 7.34,-0.05 7.15,0.14C6.95,0.34 6.95,0.66 7.15,0.85L8.46,2.16C6.97,3.26 6,5 6,7H18C18,5 17,3.25 15.53,2.16M20.5,8A1.5,1.5 0 0,0 19,9.5V16.5A1.5,1.5 0 0,0 20.5,18A1.5,1.5 0 0,0 22,16.5V9.5A1.5,1.5 0 0,0 20.5,8M3.5,8A1.5,1.5 0 0,0 2,9.5V16.5A1.5,1.5 0 0,0 3.5,18A1.5,1.5 0 0,0 5,16.5V9.5A1.5,1.5 0 0,0 3.5,8M6,18A1,1 0 0,0 7,19H8V22.5A1.5,1.5 0 0,0 9.5,24A1.5,1.5 0 0,0 11,22.5V19H13V22.5A1.5,1.5 0 0,0 14.5,24A1.5,1.5 0 0,0 16,22.5V19H17A1,1 0 0,0 18,18V8H6V18Z' fill='#fff'/></svg>

        </div>

      <div class='app-content slideInUp' hidden='' id='appcontent'>

        <h3>Install aplikasi Kompi Ajaib</h3>

<div class='app-content-on'>

Tambahkan <b>aplikasi Kompi Ajaib</b> di smartphone <i>tanpa install</i>, buka Kompi Ajaib dengan browser Chrome di smartphone lalu klik ikon 3 titik<svg class='ikonp' height='24' viewBox='0 0 24 24' width='24'><path d='M12,16A2,2 0 0,1 14,18A2,2 0 0,1 12,20A2,2 0 0,1 10,18A2,2 0 0,1 12,16M12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12A2,2 0 0,1 12,10M12,4A2,2 0 0,1 14,6A2,2 0 0,1 12,8A2,2 0 0,1 10,6A2,2 0 0,1 12,4Z' fill='#555'/></svg>di  browser kemudian pilih &quot;Tambahkan ke layar utama&quot;. Selanjutnya klik aplikasi Kompi Ajaib dari layar utama smartphone Anda.

<button aria-label='Close' class='app-close-button' on='tap:appcontent.hide'><svg height='18' viewBox='0 0 24 24' width='18'><path d='M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z' fill='#555'/></svg></button>

        </div>

        </div>

        </div>

Silahkan ganti kata Kompi Ajaib dengan nama blog Anda.

2. Untuk Blog Non AMP

Simpan kode CSS berikut di CSS style blog Anda. Posisinya akan fixed melayang di kanan atas blog.

.app-android-outer {

  width: 50px;

  position: fixed;

  top: 0;

  right: 50px;

  z-index: 9999

}

.app-android {

  width: 50px;

  height: 55px;

  line-height: 55px;

  margin: 0;

  text-align: center;

  position: relative;

  float: right;

  cursor: pointer

}

.app-android svg {

  vertical-align: middle;

  opacity: .7

}

.app-android:hover svg,

.app-android:focus svg,

.app-android:active svg {

  opacity: 1

}

.app-android:before {

  content: "";

  position: absolute;

  top: 0;

  bottom: 0;

  left: 0;

  right: 0

}

.app-content {

  background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiBWREnou07l0Gk85N4tEWHVL6vEQ5TMHyRKfp1ecXwzCpw2l654y5bDFqWbVvYz037EzGX8BiHATCXb6RPba5KbdLNABgwL5UJr8AW54Z55RFuhymznbeb5V6xpR34GVgis4RIIQvAgI/s300-rw/android-4.png) no-repeat bottom left;

  width: 300px;

  padding: 0;

  border: 1px solid #ccc;

  border-color: rgba(0, 0, 0, .2);

  line-height: 1.3;

  -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, .2);

  box-shadow: 0 2px 10px rgba(0, 0, 0, .2);

  outline: 0;

  position: absolute;

  right: 50%;

  top: 50px;

  margin-right: -40px;

  -webkit-border-radius: 2px;

  border-radius: 2px;

  -webkit-user-select: text;

  z-index: 2;

  display: none;

}

.app-content h3 {

  margin: 0;

  padding: 5px 20px;

  color: #333;

  font-size: 18px;

  font-weight: 700;

  border-bottom: 1px solid #ccc;

  border-color: rgba(0, 0, 0, .2)

}

.app-content-on {

  padding: 10px 20px 16px;

  color: #333;

  font-size: 16px;

  font-weight: 400

}

.app-content-on svg {

  vertical-align: -7px;

}

.app-content:before {

  content: "";

  border-color: transparent;

  border-style: dashed dashed solid;

  border-width: 0 8.5px 8.5px;

  position: absolute;

  right: 0;

  margin-right: 30px;

  z-index: 1;

  height: 0;

  width: 0;

  border-bottom-color: #ccc;

  border-bottom-color: rgba(0, 0, 0, .2);

  top: -9.5px

}

.app-content:after {

  content: "";

  border-color: transparent;

  border-bottom-color: #fff;

  border-style: dashed dashed solid;

  border-width: 0 8.5px 8.5px;

  position: absolute;

  right: 0;

  margin-right: 30px;

  top: -8.5px;

  z-index: 1;

  height: 0;

  width: 0

}

.app-close-button {

  position: absolute;

  width: 18px;

  height: 18px;

  line-height: 28px;

  text-align: center;

  top: 7px;

  right: 5px;

  background: 0 0;

  border: none;

  cursor: pointer;

  padding: 0

}

.app-close-button:before {

  content: "";

  position: absolute;

  top: -15px;

  right: -15px;

  bottom: -15px;

  left: -15px;

  cursor: pointer

}

.slideInUp {

  -webkit-animation-name: slideInUp;

  animation-name: slideInUp;

  -webkit-animation-duration: 1s;

  animation-duration: 1s;

  -webkit-animation-fill-mode: both;

  animation-fill-mode: both

}

@-webkit-keyframes slideInUp {

  0% {

    -webkit-transform: translateY(100%);

    transform: translateY(100%);

    visibility: visible

  }

  100% {

    -webkit-transform: translateY(0);

    transform: translateY(0)

  }

}

@keyframes slideInUp {

  0% {

    -webkit-transform: translateY(100%);

    transform: translateY(100%);

    visibility: visible

  }

  100% {

    -webkit-transform: translateY(0);

    transform: translateY(0)

  }

}

@media screen and (max-width:960px) {

  .app-android-outer {

    right: 80px

  }

}

@media screen and (max-width:375px) {

  .app-content {

    margin-right: -75px

  }

  .app-content:after,

  .app-content:before {

    margin-right: 65px

  }

}

@media screen and (max-width:320px) {

  .app-content {

    margin-right: -95px

  }

  .app-content:after,

  .app-content:before {

    margin-right: 85px

  }

}

Kemudian simpan kode HTML ini di atas kode </body>

<div class='app-android-outer'>

      <div aria-label='Open Content' class='app-android' onclick='var x=document.getElementById("appcontent");"block"===x.style.display?x.style.display="none":x.style.display="block";' role='button' tabindex='0' title='Install aplikasi Kompi Ajaib'>

<svg height='20' viewBox='0 0 24 24' width='20'><path d='M15,5H14V4H15M10,5H9V4H10M15.53,2.16L16.84,0.85C17.03,0.66 17.03,0.34 16.84,0.14C16.64,-0.05 16.32,-0.05 16.13,0.14L14.65,1.62C13.85,1.23 12.95,1 12,1C11.04,1 10.14,1.23 9.34,1.63L7.85,0.14C7.66,-0.05 7.34,-0.05 7.15,0.14C6.95,0.34 6.95,0.66 7.15,0.85L8.46,2.16C6.97,3.26 6,5 6,7H18C18,5 17,3.25 15.53,2.16M20.5,8A1.5,1.5 0 0,0 19,9.5V16.5A1.5,1.5 0 0,0 20.5,18A1.5,1.5 0 0,0 22,16.5V9.5A1.5,1.5 0 0,0 20.5,8M3.5,8A1.5,1.5 0 0,0 2,9.5V16.5A1.5,1.5 0 0,0 3.5,18A1.5,1.5 0 0,0 5,16.5V9.5A1.5,1.5 0 0,0 3.5,8M6,18A1,1 0 0,0 7,19H8V22.5A1.5,1.5 0 0,0 9.5,24A1.5,1.5 0 0,0 11,22.5V19H13V22.5A1.5,1.5 0 0,0 14.5,24A1.5,1.5 0 0,0 16,22.5V19H17A1,1 0 0,0 18,18V8H6V18Z' fill='#fff'/></svg>

        </div>

      <div class='app-content slideInUp' id='appcontent'>

        <h3>Install aplikasi Kompi Ajaib</h3>

<div class='app-content-on'>

Tambahkan <b>aplikasi Kompi Ajaib</b> di smartphone <i>tanpa install</i>, buka Kompi Ajaib dengan browser Chrome di smartphone lalu klik ikon 3 titik<svg height='24' viewBox='0 0 24 24' width='24'><path d='M12,16A2,2 0 0,1 14,18A2,2 0 0,1 12,20A2,2 0 0,1 10,18A2,2 0 0,1 12,16M12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12A2,2 0 0,1 12,10M12,4A2,2 0 0,1 14,6A2,2 0 0,1 12,8A2,2 0 0,1 10,6A2,2 0 0,1 12,4Z' fill='#555'/></svg>di  browser kemudian pilih &quot;Tambahkan ke layar utama&quot;. Selanjutnya klik aplikasi Kompi Ajaib dari layar utama smartphone Anda.

        </div>

<button aria-label='Close' class='app-close-button' onclick='this.parentElement.style.display=&quot;none&quot;'><svg height='18' viewBox='0 0 24 24' width='18'><path d='M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z' fill='#555'/></svg></button>

        </div>

        </div>

Silahkan ganti kata Kompi Ajaib dengan nama blog Anda.

Jika ingin mengubah posisinya (baik AMP maupun Non AMP), silahkan modifikasi pada CSS berikut:

.app-android-outer {

  width: 50px;

  position: fixed;

  top: 0;

  right: 50px;

  z-index: 9999

}

Selamat mencoba dan semoga bermanfaat.