Halo semua,
ini salah satu contoh Aplikasi Webview untuk portal berita,
tetapi bisa di terapkan ke semua website kalian.
Untuk mendapatkan API key OpenWeatherMap DISINI
kemudian copy css dibawah ini, taruh di color scroll kebawah ke input text area, kemudian save
/* Webview */
ion-header {
height: 0px !important;
}
.platform-overview.platform-cordova:not(.fullscreen) .bar-header:not(.bar-subheader) {
height: 1px !important;
}
.bar.bar-custom {
display: none;
}
.migaiframe-view.pane {
height: 115vh;
margin-top: -45px;
}
/* Weather */
ion-view[state="weather-view"] ion-content {
top: 0px !important;
background-color: #7baff7 !important;
}
ion-view[state="weather-view"] ion-content div.scroll div.weather div > div.item.item-custom.text-center {
background-color: #7baff7;
background-size: cover;
border: none;
min-height: 200px;
padding-top: 100px;
border-radius: 0px 0px 10% 10%;
}
ion-view[state="weather-view"] ion-content div.scroll div.weather div > div.item.item-custom.text-center > h2,
ion-view[state="weather-view"] ion-content div.scroll div.weather div > div.item.item-custom.text-center > i {
font-weight: bold;
}
ion-view[state="weather-view"] ion-content div.scroll div.weather div > div.item.item-custom.current-weather {
background-color: #7baff7;
border: none;
}
ion-view[state="weather-view"] ion-content div.scroll div.weather div > div.item.item-custom.current-weather > div.display-current {
background-color: #7baff7;
}
ion-view[state="weather-view"] ion-content div.scroll div.weather div div.item.item-custom.current-weather div.display-current table tbody > tr:nth-child(1) {
display: block;
margin-bottom: 10px;
background-color: #ffffff;
box-shadow: 1px 1px 20px 0px #043fff, 1px 1px 20px 0px rgba(255, 255, 255, 0.5);
border-radius: 12px;
color: #094ce2;
}
ion-view[state="weather-view"] ion-content div.scroll div.weather div div.item.item-custom.current-weather div.display-current table tbody > tr:nth-child(1) > td:nth-child(1) {
color: #e6b500;
position: relative;
top: 15px;
left: 20.8px;
}
ion-view[state="weather-view"] ion-content div.scroll div.weather div div.item.item-custom.current-weather div.display-current table tbody > tr:nth-child(1) > td.temp.text-center.ng-binding {
position: relative;
left: 30.8px;
}
ion-view[state="weather-view"] ion-content div.scroll div.weather div div.item.item-custom.current-weather div.display-current table tbody tr td > button {
padding: 8px;
color: #797979;
background-color: #ffffff;
box-shadow: 1px 1px 20px 0px #043fff, 1px 1px 20px 0px rgba(255, 255, 255, 0.5);
border-radius: 12px;
font-weight: normal;
}
ion-view[state="weather-view"] ion-content div.scroll div.weather div div.item.item-custom.current-weather > div:nth-child(2) {
display: block;
margin-bottom: 10px;
background-color: #fff;
box-shadow: 1px 1px 20px 0px #043fff, 1px 1px 20px 0px rgba(255, 255, 255, 0.5);
border-radius: 12px;
color: #2e2e2e;
font-weight: bold;
padding-top: 5px;
padding-bottom: 5px;
}
ion-view[state="weather-view"] ion-content div.scroll div.weather div div.item.item-custom.current-weather div table tbody tr td table tbody > tr:nth-child(2) {
color: #0052ce;
}