Cara Membuat Footer Blog Professional

Monday 23 September 2013

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://tricksimpleblogger.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/AVvXsEjwyKfNrEdAHUHOvfeXnryxutWUJd2RmiqK-TafW8NpcXuUTbmEeiSCI8LVQAKMEEX0C4AUBb8MnvWjxHin9Y1YhScxlIZcQdjdQ8HkGV_iWicc6nJ4s9NKSGGjDwwCNJ-CG3CcpzNWP6s/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/AVvXsEhk0-6yiDo_V5hXd4Gwa_ckeRVR1lPA5f0inF5EvD2Jc9Kpf9vVSQiGvIFMtfvSGM0_G5GwVpxPfeYMAni5kZfYZK0JSiavqwRNl3muxFyZI3XqJP9nlksxuhWDtC99KNFZw4iDsjfqiz0/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 Trick Simple Blogger</h1>
   <p>Trick Simple Blogger adalah sebuah blog yang dikelola oleh seorang mahasiswa UIN Alauddin Makassar dari jurusan pendidikan matematika. 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'>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.

Share on: Facebook Google+ Twitter

You're reading an article about Cara Membuat Footer Blog Professional and you can find articles Cara Membuat Footer Blog Professional this is url http://tricksimpleblogger.blogspot.com/2013/09/cara-membuat-footer-blog-professional.html,you may spread or copy and paste it if the article Cara Membuat Footer Blog Professional This is very beneficial to your friends, but do not forget to put the link Cara Membuat Footer Blog Professional as the source.