Desain Footer dengan CSS:
Buka "Tema" -> "Edit HTML" -> "CSS" dan tambahkan kode CSS berikut untuk mendesain footer:
<style>
<!-- CSS For Footer -->
.g3-light-grey, .g3-hover-light-grey:hover, .g3-light-gray, .g3-hover-light-gray:hover {
color: #000 !important;
background-color: #f1f1f1 !important;
}
html, body {
font-family: Verdana,sans-serif;
font-size: 15px;
line-height: 1.5;
}
html {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
html {
box-sizing: border-box;
}
body {
margin: 0;
}
body {
font-size: 16px;
}
body, h1, h2, h3, h4, h5 {
font-family: "Poppins",sans-serif;
}
*, ::before, ::after {
box-sizing: inherit;
}
html, body {
font-family: Verdana, sans-serif;
font-size: 15px;
line-height: 1.5
}
html {
overflow-x: hidden
}
h1 {
font-size: 36px
}
h2 {
font-size: 30px
}
h3 {
font-size: 24px
}
h4 {
font-size:20px
}
h5 {
font-size: 18px
}
h6 {
font-size: 16px
}
.g3-circle {
border-radius: 50%;
}
img {
vertical-align: middle;
}
img {
border-style: none;
}
.g3-display-img-1 {
min-height: 75vh;
width: 100%;
background-image: linear-gradient(rgba(14, 13, 15, 0.75),rgba(4, 9, 30, 0.7)),url("images/startup-coworker-teamwork-concept.jpg");
background-position: center;
background-size: cover;
position: relative;
}
.g3-tooltip, .g3-display-container {
position: relative;
}
.g3-wide {
letter-spacing: 4px;
}
article, aside, details, figcaption, figure, footer, header, main, menu, nav, section {
display: block;
}
.g3-padding-large {
padding: 12px 24px !important;
}
.g3-center {
text-align: center !important;
}
.g3-display-bottommiddle {
position: absolute;
left: 50%;
bottom: 0;
transform: translate(-50%,0%);
-ms-transform: translate(-50%,0%);
}
.g3-text-white, .g3-hover-text-white:hover {
color: #fff !important;
}
.g3-large {
font-size: 18px !important;
}
.g3-opacity, .g3-hover-opacity:hover {
opacity: 0.60;
}
h1, h2, h3, h4, h5, h6 {
font-family: "Segoe UI",Arial,sans-serif;
font-weight: 400;
margin: 10px 0;
}
b, strong {
font-weight: bolder;
}
.g3-jumbo {
font-size: 64px !important;
}
.g3-xlarge {
font-size: 24px !important;
}
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
.g3-khaki, .g3-hover-khaki:hover {
color: #000 !important;
background-color: #f0e68c !important;
}
.g3-padding-large {
padding: 12px 24px !important;
}
.g3-large {
font-size: 18px !important;
}
.g3-btn, .g3-button {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.g3-btn, .g3-button {
border: none;
display: inline-block;
padding: 8px 16px;
vertical-align: middle;
overflow: hidden;
text-decoration: none;
color: inherit;
background-color: inherit;
text-align: center;
cursor: pointer;
white-space: nowrap;
}
button, [type="button"], [type="reset"], [type="submit"] {
-webkit-appearance: button;
}
button, select {
text-transform: none;
}
button, input {
overflow: visible;
}
button, input, select, textarea, optgroup {
font: inherit;
font-size: inherit;
margin: 0;
}
a {
background-color: transparent;
color: inherit;
text-decoration: none;
}
.g3-container::after, .g3-container::before, .g3-panel::after, .g3-panel::before, .g3-row::after, .g3-row::before, .g3-row-padding::after, .g3-row-padding::before, .g3-cell-row::before, .g3-cell-row::after, .g3-clear::after, .g3-clear::before, .g3-bar::before, .g3-bar::after {
content: "";
display: table;
clear: both;
}
.g3-black, .g3-hover-black:hover {
color: #fff !important;
background-color: #000 !important;
}
.g3-padding-32 {
padding-top: 32px !important;
padding-bottom: 32px !important;
}
.g3-container, .g3-panel {
padding: 0.01em 16px;
padding-top: 0.01em;
padding-bottom: 0.01em;
}
.g3-row-padding, .g3-row-padding > .g3-half, .g3-row-padding > .g3-third, .g3-row-padding > .g3-twothird, .g3-row-padding > .g3-threequarter, .g3-row-padding > .g3-quarter, .g3-row-padding > .g3-col {
padding: 0 8px;
}
.g3-main, #main {
transition: margin-left .4s;
}
.g3-container:after,.g3-container:before,.g3-panel:after,.g3-panel:before,.g3-row:after,.g3-row:before,.g3-row-padding:after,.g3-row-padding:before,
.g3-cell-row:before,.g3-cell-row:after,.g3-clear:after,.g3-clear:before,.g3-bar:before,.g3-bar:after {
content:"";
display:table;
clear:both
}
.g3-col, .g3-half, .g3-third, .g3-twothird, .g3-threequarter, .g3-quarter {
float: left;
width: 100%;
}
.g3-col.s12 {
width: 99.99999%;
}
@media (min-width: 601px) {
.g3-col.m6, .g3-half {
width: 49.99999%;
}
}
@media (min-width: 993px) {
.g3-col.l4 {
width: 33.33333%;
}
}
@media (max-width:992px) {
.g3-main {
margin-left: 0 !important;
margin-right: 0 !important
}
}
@media (max-width:600px) {
.g3-hide-small {
display: none!important
}
}
.g3-main, #main {
transition: margin-left .4s
}
.g3-bar-block .g3-bar-item {
width: 100%;
display: block;
padding: 8px 16px;
text-align: left;
border: none;
white-space: normal;
float: none;
outline: 0;
}
.g3-padding {
padding: 8px 16px !important;
}
.g3-text-khaki, .g3-hover-text-khaki:hover {
color: #b4aa50 !important;
}
.g3-left {
float: left !important;
}
.g3-right {
float: right !important;
}
.g3-row-padding, .g3-row-padding > .g3-half, .g3-row-padding > .g3-third, .g3-row-padding > .g3-twothird, .g3-row-padding > .g3-threequarter, .g3-row-padding > .g3-quarter, .g3-row-padding > .g3-col {
padding: 0 8px;
}
.g3-border {
border: 1px solid #ccc !important;
}
.g3-button:hover {
color: #000 !important;
background-color: #ccc !important;
}
.g3-card, .g3-card-2 {
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
}
.g3-select {
padding: 9px 0;
width: 100%;
border: none;
border-bottom-width: medium;
border-bottom-style: none;
border-bottom-color: currentcolor;
border-bottom: 1px solid #ccc;
}
.g3-btn, .g3-button {
color: inherit;
text-align: center;
cursor: pointer;
white-space: nowrap;
}
.g3-white, .g3-hover-white:hover {
color: #000 !important;
background-color: #fff !important;
}
</style>
Kesimpulan
Dengan mengikuti langkah-langkah di atas, Anda sekarang telah berhasil membuat footer cantik di situs Blogger Anda. Footer yang menarik tidak hanya meningkatkan tampilan situs Anda tetapi juga memberikan pengalaman pengguna yang lebih baik. Jangan ragu untuk bereksperimen dengan desain dan tambahan lainnya untuk membuat footer Anda semakin menonjol! Jangan lupa cadangkan tema sebelum melakukan perubahan pada tema, untuk mencegah kesalahan yang tidak diinginkan.