agung wisudhatama November 07, 2022 Komentar

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

Membuat Bintang Bertaburan di Blog dan Hover Image

BINTANG bertaburan di blog dan hover image. Maksudnya adalah tampilan halaman blog itu dipenuhi dengan bintang yang gemerlap serta hover image yang terletak di tengah-tengah blog. Ketika image disorot mouse akan serta merta keluar sebuah tulisan yang menindih gambar yang telah dihover tersebut. Sekalian saya berikan tutorial jamak, atau dua sekaligus. Bintang bertaburan dan Hover image. Pantengin terus ya.

Biasanya gemerlap bintang ada di angkasa tuh. Nah untuk yang sekarang kita coba memberikan variasi pada blog dengan menampilkan bintang gemerlap juga. Asyik sih menurut saya. Karena tampilan blog kita akan semakin menarik dan meriah. Pada tutorial sebelumnya saya pernah menampilan Kelelawar Beterbangan di Blog di artikel Kelelawar Beterbangan ini. Sekarang giliran bintang gemerlap. Kalau salju juga sudah saya buat dalam artikel Salju Berjatuhan. Oke khan?

Bintang Bertaburan dan Hover Image

1. Masuk ke Dashboard Blogger
2. Pilih Tata Letak
3. Klik Tambah HTML/Javascript
4. Tempelkan kode dibawah ini di konten kosong disitu

<figure class="snip0016">
<img height="200" width="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQnn-88OsXjDbnihAxpJz_EPm6UvyV0SfYtn6K8ypTcHNz2rSRpPq51b03akUsmQVwMNd_3IZD_buyXgsYqKNWh2GCGxyy7XQemczG932BKLH9x9OJA2J867JX-AbOM3mI1V3L8PUE2Ui1SY3R5JcVXMSxoqJcNgPd0bgS-NCPbJzQYWB5QNCnw3fT/s320/alifacode-membuat-bintang-bertaburan-di-blog-dan-hover-image.webp" alt="Alifacode.com Trik dan Tips Ngeblog"/>
<figcaption>
<h2>Alifacode.com <span>Tips</span> & Trik Ngeblog</h2>
<p>Dapatkan tutorial menarik di website ini</p>
<a href="#"></a>
</figcaption>			
</figure>

5. Masuk ke template. Temukan kode ]]></b:skin> dan tempelkan kode dibawah ini diatas kode ]]></b:skin> tadi.

@import url(https://fonts.googleapis.com/css?family=Raleway:400,200,300,800);
figure.snip0016 {
  font-family: 'Raleway', Arial, sans-serif;
  color: #fff;
  position: relative;
  overflow: hidden;
  margin: 10px;
  min-width: 220px;
  max-width: 310px;
  max-height: 220px;
  width: 100%;
  background: transparent;
  text-align: left;
}
figure.snip0016 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
figure.snip0016 img {
  max-width: 100%;
  opacity: 1;
  width: 100%;
  -webkit-transition: opacity 0.35s;
  transition: opacity 0.35s;
}
figure.snip0016 figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 30px;
  width: 100%;
  height: 100%;
}
figure.snip0016 figcaption::before {
  position: absolute;
  top: 30px;
  right: 30px;
  bottom: 30px;
  left: 100%;
  border-left: 4px solid rgba(255, 255, 255, 0.8);
  content: '';
  opacity: 0;
  background-color: rgba(255, 255, 255, 0.5);
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  -webkit-transition-delay: 0.6s;
  transition-delay: 0.6s;
}
figure.snip0016 h2,
figure.snip0016 p {
  margin: 0 0 5px;
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s,-webkit-transform 0.35s,-moz-transform 0.35s,-o-transform 0.35s,transform 0.35s;
}
figure.snip0016 h2 {
  word-spacing: -0.15em;
  font-weight: 300;
  text-transform: uppercase;
  -webkit-transform: translate3d(30%, 0%, 0);
  transform: translate3d(30%, 0%, 0);
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}
figure.snip0016 h2 span {
  font-weight: 800;
}
figure.snip0016 p {
  font-weight: 200;
  -webkit-transform: translate3d(0%, 30%, 0);
  transform: translate3d(0%, 30%, 0);
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
figure.snip0016 a {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  color: #ffffff;
}
figure.snip0016:hover img {
  opacity: 0.3;
}
figure.snip0016:hover figcaption h2 {
  opacity: 1;
  -webkit-transform: translate3d(0%, 0%, 0);
  transform: translate3d(0%, 0%, 0);
  -webkit-transition-delay: 0.4s;
  transition-delay: 0.4s;
}
figure.snip0016:hover figcaption p {
  opacity: 0.9;
  -webkit-transform: translate3d(0%, 0%, 0);
  transform: translate3d(0%, 0%, 0);
  -webkit-transition-delay: 0.6s;
  transition-delay: 0.6s;
}
figure.snip0016:hover figcaption::before {
  background: rgba(255, 255, 255, 0);
  left: 30px;
  opacity: 1;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

html {
  height: 100%;
}
body {
  background-color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  height: 75%;
}

.star {
  --size: 20vmin;
  --holes: calc(var(--size)*.495);
  width: var(--size);
  aspect-ratio: 1/1;
  position: fixed;
  background: white;  
  --mask: radial-gradient(var(--holes) at var(--holes) var(--holes), #0000 99%,#000) calc(var(--holes)*-1) calc(var(--holes)*-1);
  -webkit-mask: var(--mask);
  mask: var(--mask);
  border-radius: 50%;
  animation: sparkle 1s linear forwards;
}
@keyframes sparkle {
  0% { transform: scale(0); }
  25% { opacity: 1; }
  100% { opacity: 0; }
}

html {
  background: #112;
  overflow: hidden;
  display: grid;
  place-items: center;
  min-height: 100vh;
}

Terakhir tempelkan kode dibawah ini diatas kode </body>. Ini masih di template ya.

<script type='text/javascript'> 
//<![CDATA[
function addStar() {
  var s = document.createElement('div')
  s.className = 'star'
  s.style.setProperty('--size', Math.random()*10 + 3 + 'vmin')
  s.style.left = Math.floor(Math.random()*100) + '%'
  s.style.top = Math.floor(Math.random()*100) + '%'
  s.onanimationend = function() { this.remove() }
  document.body.appendChild(s)
}
setInterval(addStar,50)
//]]> 
</script>

Kalau semua sudah dilakukan tinggal save dan publikasikan. Jadi khan. Untuk contoh saya kasih dibawah ini.

STAR

Bagikan ke teman-teman kamu

Label Postingan : CSS , Javascript

Terima kasih ya udah mempraktekkan tutorial blog di web alifacode.com dengan judul Tutorial Membuat Bintang Bertaburan di Blog dan Hover Image . Semoga tutorial blog ini dapat bermanfaat. Salam Blogger.