Cara Membuat Footer Responsive di Blogspot

Saya mulai catatan ini dengan sebuah catatan: Saya mengotak-atik script HTML, sampai-sampai entah kenapa section bagian Footer menghilang dari laman pengaturan Layout di dashboard Blogger. Jadi, saya meletakkan script ini di atas bagian </body>:

<!-- FOOTER 1-->

<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
<style>

.newfooter1 {
  width: 100%;
  background-color: #bbb;
  overflow: hidden;
  font-size:25px;
  color: black;
  padding: 50px 150px;
}
          
.newfooter1 a{
  text-decoration: none;
  color: black;
}

.newfooter1 a:hover{
text-decoration: none;
color: blue;
}

.newfooter1 .about {
width: 70%;
float: left
}

.newfooter1 .contact {
width: 20%;
float: right;
}

.newfooter1 p {
padding: 0 10px;
text-align: justify;
font-size:15px;
  color: $default;
}

@media screen and (max-width:1024px){
.newfooter1 {
  width: 100%;
  padding: 15px 50px;
 }
.newfooter1 .about {
width: 60%;
}
.newfooter1 .contact {
width: 40%;
}
}

@media screen and (max-width: 800px){
.newfooter1 {
 width: 100%;
 padding: 15px 30px;
 }
.newfooter1 .about {
width: 100%;
}
.newfooter1 .contact {
width: 100%;
}
}

@media screen and (max-width: 603px){
.newfooter1 {
 width: 100%;
 padding: 15px 30px;
 font-size: 20px;
 }
.newfooter1 .about {
width: 100%;
}
.newfooter1 .contact {
width: 100%;
}
.newfooter1 p {
 font-size: 12px;
 }
}
</style>

<div class='newfooter1'>
  <div class='about'>
  About
  <p style='text-align=justify;'>
  Taruih Baraja merupakan sebuah personal blog yang membahas beragam topik kesukaan Penulis, seperti Kesehatan, Teknologi, Home Living, dan lain sebagainya [...]
  <a href='/p/about.html'>Read More </a><br/>
  </p>
  </div>
  <div class='contact'>
  Contact
  <p>
  <a href='mailto:taruihbaraja@gmail.com'>
  <i class='fa fa-envelope-o'/> taruihbaraja@gmail.com<br/>
  </a>
  <a href='https://www.instagram.com/taruihbaraja'>
  <i class='fa fa-instagram'/> @taruihbaraja<br/>
  </a>
  <a href='https://www.twitter.com/taruihbaraja'>
  <i class='fa fa-twitter'/> @taruihbaraja
  </a>
  </p>
  </div>
</div>

Di bawahnya, saya meletakkan kode:

<!--FOOTER 2-->
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
<style>
.newfooter2 {
  width: 100%;
  background-color: #a5a5a5
  overflow: hidden;
  font-size:15px;
  text-align: center;
  color: black;
  padding: 20px 150px;
}
@media screen and (max-width: 603px){
.newfooter2 {
  padding: 10px 5px;
}

Tentu saja, penampakannya akan menjadi lebih baik (setidaknya menurut saya untuk blog saya) jika footer-nya full width dan ujung kiri ke ujung kanan. Maka, jangan lupa dengan Cara Membuat Full Width Header, Navigasi, dan Footer di Blogspot.

Hasilnya:

Footer Taruih Baraja per Februari 2022

Footer ini juga sudah dibuat responsive.

Sekian, Semoga bermanfaat.