Slot Iklan
31 Dec , 2020

cara membuat Footer keren dan profesioanl di Blog

cara membuat Footer keren dan profesioanl di Blog ,- bicara tentang Footer mungkin sudah tidak asing lagi ditelinga para blogger, mungkin anda akan lansung teringat pada bagian bawah karena memang footer berada dibagian bawah Blog beda hal nya dengan Header yang berada pada bagian atas.
Anda mungkin sering melihat tampilan footer Blog orang lain yang terlihat bagus, namun pusing bagaimana cara membuat hal seperti itu, maka postingan kali ini kita akan membahas bagaiaman caranya membuat footer keren dan terlihat profesional di blog. Lansung saja ke point pembicaraan agar cepat selesai.
  • Buka akun Blogger anda, klik menu "Tema" dan klik "Edit HTML"

  • Kemudian cari kode ]]></b:skin> untuk mempermudah gunakan CTRL + F
  • Setelah ditemukan, copy kode dibawah ini dan pastekan diatas kode tadi
    •      /* Footer ABOUT-----------http://HohoSEO.blogspot.com----------------------------------- */

        .footer-about { text-align:left; width:920px; margin: 0 auto; background:#ffffff; padding:30px; color:#676767; font-family: 'Source Sans Pro'; padding-bottom:10px; margin-top:10px; }

        .footer-about .text { padding-right:30px; width:560px; float:left; line-height:19px; }

        .footer-about .text h1 { color:#61abe7; font-size:22px; margin-bottom:15px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP9x2zQWaqyByqvY0tUL_RS0kwJ-bZ_c1fq5i1VPayVj1DY_0i0YBLEzCBBR6nwoTPe76EYJ3oJC7PLsXlFxMa-7f_DxqCy2fBQjSQBx2duoASEg_4lghf_5CctnSjcUbYSO9S5H8MnY8/s1600/about-icon.png) left center no-repeat; padding-left:50px; padding-top:8px; height:30px; }

        .footer-about .social { margin-top:-1px; float:left; padding-left:50px; }

        .footer-about .social h1 { color:#61abe7; font-size:22px; font-weight:300; float:left; margin-right:20px; margin-bottom:9px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuLcjpHQR5AKEE53rkhpubtXoIvqAYTavyFgU3ApFyH_b_7zfQvVI3fFISILpLHT0lKh331f6lscTmNBQn_7LNrms3Xp9C0AIFc9xix6bcdYdiROPe9vvII2of4jT_oN5C1BAIDwau5yo/s1600/findus-icon.png) left center no-repeat; padding-left:50px; padding-top:3px; height:35px; }

        .footer-about .social .soc-img { margin-right:10px; display:block; float:left; margin-bottom:5px; }

        .footer-about .contact { clear:both; line-height:19px; }

        .social-icons { float:right; } .social-icons .soc-img { display: block; float: left; margin-left: 10px; }

  • Kemudian cari kode <div class='footer'> atau <div class='footer-wrapper'> ( Kode setiap blog berbeda. jadi cari kode yang hampir sama )
  • Setelah ketemu kemudian pastekan kode dibawah ini tepat dibagian atasnya 
    <div class='footer-about'>

        <div class='text'>

    <h1>About Trick Simple Blogger</h1>

    <p>Trick Simple Blogger adalah sebuah blog yang dikelola oleh seorang siswa SMA di SMA N 1 Kinali yang mengambil jurusan IPA. Blog ini dibuat untuk membagikan trik-trik seputar dunia blogger kepada teman - teman...</p>

    </div>

    <!-- Footer Contact Us -->

    <div class='social'>

    <h1>Contact us</h1>

    <div class='contact'>

    <div class='phone'><strong>Phone:</strong> +6289677176482, +6282348473836</div>

    <div class='fax'><strong>Fax:</strong> -</div>

    <div class='email'><a href='mailto:support@blog.com'>blogmaster.clone@gmail.com</a></div>

    <div class='email'><a href='mailto:sales@blog.com'>masterjahil@gmail.com</a></div>

    </div>

    </div>

    <div class='clear'/></div> 
  •  Kemudian save template dan lihat blog anda untuk melihat hasilnya
  • Kalimat yang diberi warna biru dapat anda ganti dengan kalimat anda sendiri sesuai selera anda
Next Prev