Cara Membuat dan Memasang Footer pada Blog atau Website

1).  Masuk ke akun dashboard blog kalian.

2). Kemudian klik bagian menu Tata Letak.

3). Kemudian, buat widget baru pada bagian bawah blog kalian ata website kalian

4). Kemudian Copyscript footer yang sudah saya buat ini

Copy Script CSS dibawah ini dengan cara :
1). Klik bagian menu Template > Edit HTML
2). Masukkan script ini tepat diatas </b:skin>
3). gara lebih cepat tekan CTRL + F kemudian ketik </b:skin> lalu paste kode CSS dibawah ini.

.footer-distributed{
    background-color: #292c2f;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
    box-sizing: border-box;
    width: 100%;
    text-align: left;
    font: bold 16px sans-serif;

    padding: 55px 50px;
    margin-top: 80px;
}
.footer-distributed .footer-left,
.footer-distributed .footer-center,
.footer-distributed .footer-right{
    display: inline-block;
    vertical-align: top;
}

/* Footer left */
.footer-distributed .footer-left{
    width: 40%;
}

/* The company logo */
.footer-distributed h3{
    color:  #ffffff;
    font: normal 36px 'Cookie', cursive;
    margin: 0;
}
.footer-distributed h3 span{
    color:  #5383d3;
}

/* Footer links */
.footer-distributed .footer-links{
    color:  #ffffff;
    margin: 20px 0 12px;
    padding: 0;
}
.footer-distributed .footer-links a{
    display:inline-block;
    line-height: 1.8;
    text-decoration: none;
    color:  inherit;
}
.footer-distributed .footer-company-name{
    color:  #8f9296;
    font-size: 14px;
    font-weight: normal;
    margin: 0;
}

/* Footer Center */
.footer-distributed .footer-center{
    width: 35%;
}
.footer-distributed .footer-center i{
    background-color:  #33383b;
    color: #ffffff;
    font-size: 25px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    text-align: center;
    line-height: 42px;
    margin: 10px 15px;
    vertical-align: middle;
}
.footer-distributed .footer-center i.fa-envelope{
    font-size: 17px;
    line-height: 38px;
}
.footer-distributed .footer-center p{
    display: inline-block;
    color: #ffffff;
    vertical-align: middle;
    margin:0;
}
.footer-distributed .footer-center p span{
    display:block;
    font-weight: normal;
    font-size:14px;
    line-height:2;
}
.footer-distributed .footer-center p a{
    color:  #5383d3;
    text-decoration: none;;
}

/* Footer Right */
.footer-distributed .footer-right{
    width: 20%;
}
.footer-distributed .footer-company-about{
    line-height: 20px;
    color:  #92999f;
    font-size: 13px;
    font-weight: normal;
    margin: 0;
}
.footer-distributed .footer-company-about span{
    display: block;
    color:  #ffffff;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 20px;
}
.footer-distributed .footer-icons{
    margin-top: 25px;
}
.footer-distributed .footer-icons a{
    display: inline-block;
    width: 35px;
    height: 35px;
    cursor: pointer;
    background-color:  #33383b;
    border-radius: 2px;

    font-size: 20px;
    color: #ffffff;
    text-align: center;
    line-height: 35px;

    margin-right: 3px;
    margin-bottom: 5px;
}
@media (max-width: 880px) {
    .footer-distributed{
        font: bold 14px sans-serif;
    }
    .footer-distributed .footer-left,
    .footer-distributed .footer-center,
    .footer-distributed .footer-right{
        display: block;
        width: 100%;
        margin-bottom: 40px;
        text-align: center;
    }
    .footer-distributed .footer-center i{
        margin-left: 0;
    }
}

Kemudian, setelah kalian copy script CSS diatas, selanjutnya masukkan script HTML berikut caranya :
1). Masuk kebagian menu Tata Letak
2). Klik bagian Widget paling bawah, dimana nantinya kita letakkan Footer dibagian paling bawah, klik tambahkan Widget > HTML / Javascript.

3). Masukkan Kode HTML dibawah ini, setelah itu, klik Simpan

 <!-- The content of your page would go here. -->

        <footer class="footer-distributed">

            <div class="footer-left">

                <h3>Mr.<span>GoYo</span></h3>

                <p class="footer-links">

                    <a href="http://www.mrgoyo.ga/p/blog-page.html">Privacy</a>

                    ·

                    <a href="http://www.mrgoyo.ga/p/disclaimer.html">Disclaimer</a>

                    ·

                    <a href="http://www.mrgoyo.ga/p/123contactform.html">Contact</a>

                    ·

                    <a href="http://www.mrgoyo.ga/p/blog-page_19.html">TOS</a>

                </p>

                <p class="footer-company-name">Copyright &copy; 2017</p>

            </div>

            <div class="footer-center">

                <div>

                    <i class="fa fa-map-marker"></i>

                    <p><span>Sumber Padi</span> Batu Bara, Indonesia</p>

                </div>

                <div>

                    <i class="fa fa-phone"></i>

                    <p>+62 85270711637</p>

                </div>

                <div>

                    <i class="fa fa-envelope"></i>

                    <p><a href="mailto:aryopratama04082000@gmail.com">admin@gmail.com</a></p>

                </div>

            </div>

            <div class="footer-right">

                <p class="footer-company-about">

                    <span>About Me</span>

                    Mr.GoYo akan memberikan Tutorial dan Informasi Teknologi yang bermanfaat.

                </p>

                <div class="footer-icons">

                    <a href="https://www.facebook.com/aryo.pratama04082000"><i class="fa fa-facebook"></i></a>

                    <a href="https://twitter.com/aryo_pratama04"><i class="fa fa-twitter"></i></a>

                    <a href="https://www.linkedin.com/in/aryo-p-3036b813a/"><i class="fa fa-linkedin"></i></a>

                    <a href="https://plus.google.com/u/0/+AryoPratama04agustus"><i class="fa fa-github"></i></a>

                </div>

            </div>

        </footer>

5). Setelah itu, klik simpan, dan lihat hasilnya

6). Bila ingin merubah tampilan, bisa di otak-atik scriptnya.

Sekian tutorial dari saya, apabila kalian mengalami kesulitan dalam proses pembuatan Footer pada blog kalian masing-masing.

Tampilan Footernya akan jadi seperti dibawah ini.