Getcond Blogger, Bagaimana cara membuat footer menarik dan cantik dilihat di Blogger?
Footer adalah bagian penting dari setiap situs web yang sering kali diabaikan. Namun, memiliki footer yang menarik dan informatif dapat meningkatkan tampilan keseluruhan situs Anda dan memberikan pengalaman pengguna yang lebih baik. Dalam tutorial ini, kita akan membahas langkah-langkah untuk membuat footer yang cantik di Blogger menggunakan HTML dan CSS.
Bagaimana cara membuatnya:
Langkah-langkah:
Persiapan:
Sebelum memulai, pastikan Anda sudah masuk ke akun Blogger Anda dan membuka tata letak (layout) yang ingin Anda tambahkan footer-nya.
Membuat Struktur HTML:
Buka editor HTML tata letak dan temukan bagian di mana Anda ingin menambahkan footer.
Tambahkan kode berikut di antara tag <footer></footer>:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:layoutsVersion='3' lang='id' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<!-- Title -->
<title>Tema Web Blogger First Blogger</title>
<meta charset='UTF-8'/>
<meta content='width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=3' name='viewport'/>
<b:if cond='!data:view:isLayoutMode'>
<b:skin><![CDATA[
<!-- CSS For Web Page -->
* {
margin:0;
padding:0;
box-sizing:border-box;
}
html {
overflow-x:hidden;
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
}
body {
font-family: 'Roboto', sans-serif;
top: 0
}
.main.section #Blog1 {
background-color: transparent;
}
.section {
margin: 0!important
}
@media screen and (max-width:600px) {
body {
top: 0;
bottom: 0;
}
}
]]></b:skin>
</b:if>
<!-- CSS For Layout Section-->
<b:if cond='!data:view:isLayoutMode'>
<b:template-skin><![CDATA[
]]></b:template-skin>
</b:if>
</head>
<body>
<!-- Footer Header Img -->
<footer class="g3-display-container g3-wide g3-display-img-1" id="footer-img">
<div class="g3-display-bottommiddle g3-padding-large g3-center g3-col">
<h3 class="g3-opacity g3-text-white"><b>Want to for tips blogger code it's free</b></h3>
<h3 class="g3-jumbo g3-text-white"><b>Getcond Blogger</b></h3>
<h6><button class="g3-button g3-khaki g3-padding-large g3-large g3-hover-opacity-off"><a href="https://getcond.com">Get More Now</a></button></h6>
</div>
</footer>