Home » Tip Trick Blog » Membuat Popup Atau Modal Box Untuk Notifikasi Install Aplikasi Blog
7:28:00 PM
0 comments

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.
  Membuat Popup Atau Modal Box Untuk Notifikasi Install Aplikasi Blog
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.

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 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/AVvXsEglmVT6Y0zNEXRXdhaQlZ_xovB833yUsFeVUAA6QAavM10aDlsiozU6vf5Ite4avcA-34PMc4pIoM755AnSDy6QanHCldMsQgz2Mcy_wgicZ-r6CF4ch3LoWpwJo56JZlcUbGPFZjdVusQ/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)

  }

}
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 '>

<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 </h3>

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

Tambahkan <b>aplikasi </b> di smartphone <i>tanpa install</i>, buka 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 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 masternetkom 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/AVvXsEglmVT6Y0zNEXRXdhaQlZ_xovB833yUsFeVUAA6QAavM10aDlsiozU6vf5Ite4avcA-34PMc4pIoM755AnSDy6QanHCldMsQgz2Mcy_wgicZ-r6CF4ch3LoWpwJo56JZlcUbGPFZjdVusQ/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);
}
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 '>

<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 </h3>

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

Tambahkan <b>aplikasi</b> di smartphone <i>tanpa install</i>, buka 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 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 masternetkom 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.
Labels:
Share: