Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Mudah Pasang Footer Attribution Sederhana di blog.

footer attribution
footer attribution

blogger telah merilis beberapa tema template terbaru untuk blogspot, diantaranya contempo, soho, emporio dan notable. set tema blog baru tersebut hadir dalam berbagai warna, dapat disesuaikan, dan dapat diterapkan ke tema blog dengan mudah dan otomatis menyesuaikan dengan layar apa saja, sehingga pembaca akan dapat dengan mudah melihat blog di layar komputer, ponsel atau tablet.

blogger tetap membawa footer emblem tulisan Powered By blogger theme images by ....atau dalam bahasa indonesia diberdayakan blogger, emblem gambaran besarnya nama blogger sebagai penyedia penerbitan blog .

walaupun keberadaan footer emblem Powered By blogger di setiap subdomain blogspot.com tidak memengaruhi kualitas karya postingan tetapi agar supaya kelihatan profesional ada baiknya menggunakan footer gaya sendiri.
adapun gaya footer yang disediakan disini menggunakan gaya footer sederhana dengan menampilkan button follow us atau tombol ikuti kami


sebelum memasang footer maka ada baiknya menghapus dulu footer bawaan blogger

CATATAN : sebelum melakukan perubahan atau mengedit html template blog ada baiknya untuk menyimpan html template blog terlebih dahulu untuk berjaga jaga dari terjadinya sesuatu yang tidak diinginkan.

Cara menghapus footer

1. di dashboard blogger pilih theme lalu edit html


2. di jump to widget pilih attribution, maka secara otomatis akan di bawa ke kode html widget attribution

3. cari kode <b:widget id='Attribution1'......  blok sampai </b:widget> hapus kode tersebut kemudian save theme.

untuk cara lengkap menghapus widget bisa dilihat disini

Cara memasang footer gaya Sederhana 

1. sign in blogger, di theme pilih Edit HTML


2. cari kode  ]]</b:skin> , gunakan ctrl + f untuk mempermudah mencari  ]]</b:skin>
tempelkan kode berikut sebelum  kode ]]</b:skin>

.footer{
position: static;
bottom: 0;
}
.footer-distributed{
background-color: #2c292f;
box-sizing: border-box;
width: 100%;
text-align: center;
font: bold 16px sans-serif;
padding: 25px 15px 25px 15px;
margin-top: 20px;
}

.footer-distributed .footer-left,
.footer-distributed .footer-right{
display: inline-block;
vertical-align: top;
}
/* Footer left */

.footer-distributed .footer-left{
width: 50%;
}

.footer-distributed h3{
color:  #ffffff;
}
/* Footer links */

.footer-distributed .footer-links{
color:  #ffffff;
margin: 3px 0 3px;
}

.footer-distributed .footer-links a{
display:inline-block;
line-height: 1.5;
text-decoration: none;
color:  inherit;
}

.footer-distributed .footer-company-name{
color:  #8f9296;
font-size: 14px;
font-weight: normal;
margin: 0;
}
/* Footer Right */

.footer-distributed .footer-right{
width: 40%;
.footer-distributed .footer-icons{
margin-top: 5px;
}

.footer-distributed .footer-icons a{
display: inline-block;
width: 35px;
height: 35px;
cursor: pointer;
background-color:  #33383b;
border-radius: 17px;

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

margin-right: 3px;
margin-bottom: 3px;
}
@media (max-width: 880px) {

.footer-distributed .footer-left,
.footer-distributed .footer-right{
display: block;
width: 100%;
margin-bottom: 3px;
text-align: center;
}



  • bila kesulitan menemukan kode ]]</b:skin> . gunakan opsi lain menyimpan kode css diatas, yaitu lewat layout kemudian pilih theme designer, lalu di advanced pilih add css kemudian apply


  • 3. tambahkan HTML berikut.

    <div class="footer">
      <footer class="footer-distributed">
      <div class="footer-left">
      <p class="footer-links">
    <a href="#">Home</a> |
    <a href="#">Blog</a> |
    <a href="#">About</a> |
    <a href="#">Contact</a>
    </p>
       <p class="footer-company-name">company name</p>
       </div>
       <div class="footer-right">
    <div class="footer-icons">
    <a href="x"><i class="fa fa-facebook"></i></a>
    <a href="x"><i class="fa fa-twitter"></i></a>
    <a href="x"><i class="fa fa-instagram"></i></a>
    <a href="x"><i class="fa fa-linkedin"></i></a>
    <a href="x"><i class="fa fa-youtube"></i></a>
    </div>
    </div>
    </footer></div>

    keterangan : isi dengan url sendiri
    # : url halaman yang dituju misalnya url home
    company name :  nama perusahaan atau website
    x :  url halaman fans page maupun profil website 

    4. cara menambahkan html yaitu  di dashboard blogger pilih layout kemudian add a gadget, tidak masalah walaupun di sidebar karena bisa di drag dan drop nantinya, pilih HTML / JAVASCRIPT



    5. tempelkan kode HTML no 3 diatas lalu save  
    6. apabila  di theme blogger soho, contempo, emporio, notable, add a gadge ada di sidebar atau disisi samping kemudian ingin menempatkan di bawah postingan halaman. maka di layout blogger tarik html  tersebut letakkan sesuai keinginan di paling bawah lalu save arrangement

    7. selesai kemudian lihat tampilan blog dengan footer gaya sederhana

    supaya logo media social muncul maka harus memasang terlebih dahulu font awesome yang disimpan sebelum kode </head> di "edit html" theme blogger

    berikut kode untuk font awesome

    <link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css' rel='stylesheet'/>

    demikianlah Cara memasang Footer Attribution Sederhana di blog, semoga bermanfaat. 

    Posting Komentar untuk "Cara Mudah Pasang Footer Attribution Sederhana di blog. "

    data-ad-format="auto">
    data-ad-format="auto">

    Berlangganan via Email