Cara Membuat Footer Blog yang Simple and Pro

Cara Membuat Footer Blog Professional - Alhamdulillah kali Trick Simple Blogger masih sempat untuk update postingan lagi. Dan kali ini TSB akan membagikan trik tentang Cara Membuat footer Blog Professional. Jangan lupa juga baca postingan TSB sebelumnya tentang Membuat Navigasi Blog Keren Dengan Mudah.

 Berbicara mengenai footer blog, dominan kita sudah pernah mendengarnya bahkan pernah mengeditnya. Melihat/mendengar kata 'footer' pasti pikiran kita memikirkan 'bawah' karena memang footer ada bagian bawah. Jadi Footer blog adalah bagian bawah blog.

Melihat para blogger sekarang ini, banyak yang berlomba-lomba untuk memodifikasi templatenya mulai dari header blog sampai footer blog karena dengan menariknya tampilan blog kita, maka pengunjung blog akan betah berada di blog kita.

Nah, maka dari itu Trick Simple Blogger akan membagikan informasi tentang Cara Membuat Footer Blog Professional. Kenapa di katakan professional ? karena menurut admin dari Trick Simple Blogger, Footer blog ini sangat bagus untuk blogger professional. Tanpa panjang lebar lagi, ikuti langkah di bawah ini :

Berikut adalah Cara Membuat Footer Blog Professional :

1. Anda harus login di akun blogger anda lewat http://www.blogger.com
2. Masuk di bagian Template kemudian pilih Edit HTML
3. Kemudian cari kode ini ]]></b:skin> untuk mempermudah mencarinya, gunakan ctrl+f
4. Copy kode dibawah ini dan simpan diatas kode tadi :

   /* Footer ABOUT-----------http://headmymind.blogspot.com----------------------------------- */
   .footer-about { text-align:left; width:920px; margin: 0 auto; background:#ffffff; padding:30px; color:#676767; font-family: &#39;Source Sans Pro&#39;; 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/AVvXsEgV-wtwWg7gZWzqKe32z28mmzRldyZ1leBDX9XER1AFK-rxmvjXcYG7clEVau2tP-x9ccRtAyvdwFKqAzsc8cgG8BMkajoKQRXYKfDGTvJgcIaBuV0dVTZOCtxDINnnJViFe2kDiQycPv4/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/AVvXsEixpqIC6v8-NWyCZy6FrAmqVOli8PlPwQll4BzJLIz1vX-VQV7K3HbEy52_zWLiaz6x9sgK7epQirRAt5H25How_n3rhDzRFBmdyRkU9G-v9X4K8FPlUx-QmdVTXVk5XTfsAD9NtskqPk8/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; }

5. Kemudian cari kode <div class='footer'> atau <div class='footer-wrapper'> ( Kode setiap blog berbeda. jadi cari kode yang hampir sama )
6. Copy kode di bawah ini dan simpan di atas kode tadi :

   <div class='footer-about'>
       <div class='text'>
   <h1>About Head My Mind</h1>
   <p>  headmymind adalah sebuah blog yang dikelola oleh seorang mahasiswa SMK Surabaya dari jurusan Multimedia. Blog ini dibuat untuk membagikan trik-trik seputar dunia blogger dan software 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'>rajartikel@gmail.com</a></div>
   <div class='email'><a href='mailto:sales@blog.com'>dusunpendidikan@gmail.com</a></div>
   </div>
   </div>
   <div class='clear'/></div> 

7. Setelah itu Save/Simpan dan lihatlah hasilnya

Hasilnya akan nampak seperti ini :

Keterangan :

• Kata/Kalimat yang berwarna biru ubah sesuai keinginan anda
   

Demikian cara Cara Membuat Footer Blog Professional, semoga bermanfaat buat kalian semua.

Sumber : http://tricksimpleblogger.blogspot.co.id