Rabu, 27 Maret 2013

Membuat Footer Blog ala ElegantGreen Template

Membuat Footer Blog ala ElegantGreen Template - Jika anda sudah mendownload file dari ElegantGreen Template, saya yakin anda sudah tahu bagian footer dari blog tersebut yang memiliki tampilan dinamis, elegant, dan sangat cantik seperti pemilik blog ini :) Membuat footer blog memang gampang-gampang susah, gampangnya jika kita sudah memiliki kodenya dan tinggal memasangkan kedalam template blog. Susahnya, jika harus membuat kode dari footer blog itu sendiri karena dalam membuat footer blog harus menyesuaikan dengan elemen-elemen utama yang ada dibagian atas blog itu sendiri, seperti tata letak yang sesuai.

Nah, jika anda ingin membuat footer blog dan belum memiliki kodenya, maka kali ini kita akan belajar bersama dalam memasangkan kode tersebut kedalam template blog dan tidak usah membuatnya lagi karena kodenya sudah ada hehee.. Kode footer blog yang saya buat ini adalah kode yang lain dari pada kode_kode footer yang biasa kita jumpai seperti footer tiga kolom, footer empat kolom, atau footer dua kolom. Untuk footer kali ini saya mengkategorikan kedalam footer dengan mutti-kolom seperti yang terlihat pada tampilan gambar berikut ini

Membuat Footer Blog ala ElegantGreen Template

Footer blog seperti yang ada pada gambar diatas telah saya terapkan kedalam blog saya sendiri dan anda bisa melihanya DISINI. Untuk membuat footer blog dengan tampilan gaya seperti gambar diatas, anda cukup mengikuti langkah sederhana berikut ini
  1. Silahkan anda masuk dulu ke akun Blogger anda
  2. Buka menu pengeditan template
  3. Salin kode berikut sebelum atau diatas kode ]]></b:skin>
    #footer {-webkit-box-shadow:inset 0px 1px 0px rgba(0,0,0,0.4), inset 0px 2px 0px rgba(255,255,255,0.2), 0px 1px 3px rgba(0,0,0,0.4);-moz-box-shadow:inset 0px 1px 0px rgba(0,0,0,0.4), inset 0px 2px 0px rgba(255,255,255,0.2), 0px 1px 3px rgba(0,0,0,0.4);box-shadow:inset 0px 1px 0px rgba(0,0,0,0.4), inset 0px 2px 0px rgba(255,255,255,0.2), 0px 1px 3px rgba(0,0,0,0.4);background:#1F8F07 repeat-x;width:100%;margin-bottom:0px;padding:0 auto}
    #footer-content {color:#ddd;font-size:12px;margin:20px auto;padding-top:5px;width:980px;text-align:left;}
    #footer-content a {color:#EBF5FA;font-size:12px;}
    #footer-content a:hover {color:#FFFFFF;font-size:12px;}
    #footer-content img {border:none;}
    #footer-menu {float:left;margin-left:80px;width:200px;}
    #footer-menu ul#vmenu {border-top: none;}
    #footer-menu ul#vmenu li {border-bottom: 1px dotted #AAA;}
    #footer-menu ul#vmenu li a:link, #footer-menu ul#vmenu li a:visited {color:#ddd;}
    #footer-menu ul#vmenu li a:hover {color:#FFF;}
    #social{}
    #twitter {float:left;margin:10px 0 0 0 ;}
    #fb {float:left;margin:10px 0 0 10px;}
    #gplus {float:left;margin:10px 0 0 10px;}
    #linkedin {float:left;margin:10px 0 0 10px;}
    #pinterest {float:left;margin:10px 0 0 10px;}
    #tumblr {float:left;margin:10px 0 0 10px;}
    #reddit {float:left;margin:10px 0 0 10px}
  4. Salin kode berikut dibawah <div id='footer'> dengan hasil pemasangan seperti berikut ini :
    <div id='footer'>
    <div id='footer-content'>
    <div style='float:left;width:450px;'>
    <div style='border-bottom:1px dotted #aaa'>Support by:</div>
    <div style='margin-top:10px'>
    <a href='http://google.co.id' style='margin-right:5px' target='_blank'><img border='1px solid #eee' height='20' src='https://www.google.co.id/images/srpr/logo4w.png' title='Google Indonesia' width='65'/></a>
    <a href='http://blogger.com' style='margin-right:5px;' target='_blank'><img border='1px solid #eee' height='20' src='http://www.blogger.com/img/blogger-logo-small.png' title='Blogger' width='65'/></a>
    </div>
    <div style='margin-top:15px;border-bottom:1px dotted #aaa'>SocialNetwork:</div>
    <div id='social'>
    <div id='twitter'><a href='#' rel='nofollow'><img alt='twitter' height='32' src='http://3.bp.blogspot.com/-9y_6zTt-7uY/UVHgC2be6-I/AAAAAAAABHw/wrImqEOCe4w/s1600/twitter.png' width='32'/></a>
    </div>
    <div id='fb'>
    <a href='#' rel='nofollow'><img alt='facebook' height='32' src='http://2.bp.blogspot.com/-ADC-4sD8whc/UVHf_k6LOfI/AAAAAAAABHA/2I37J0rjEVs/s1600/facebook.png' width='32'/></a>
    </div>
    <div id='gplus'><a href='#' rel='nofollow'><img alt='google plus' height='32' src='http://4.bp.blogspot.com/-pmnjhneoQHY/UVHf_xslWXI/AAAAAAAABHE/KRrWwadqNmg/s1600/google+.png' width='32'/></a>
    </div>
    <div id='linkedin'><a href='#' rel='nofollow'><img alt='linkedin' height='32' src='http://4.bp.blogspot.com/-cxo_tXLDK_w/UVHgAWUOFTI/AAAAAAAABHQ/WNMSxWOo0Ho/s1600/linkedin.png' width='32'/></a>
    </div>
    <div id='pinterest'><a href='#' rel='nofollow'><img alt='pinterest' height='32' src='http://1.bp.blogspot.com/-B5zhkebI5XM/UVHgBV89gbI/AAAAAAAABHY/IMA9dB7txSE/s1600/pinterest.png' width='32'/></a>
    </div>
    <div id='tumblr'><a href='#' rel='nofollow'><img alt='tumblr' height='32' src='http://4.bp.blogspot.com/-Tna7juEAwoU/UVHgChfYTKI/AAAAAAAABHo/KGnXF5_0Oyk/s1600/tumblr.png' width='32'/></a>
    </div>
    <div id='reddit'><a href='#' rel='nofollow'><img alt='reddit' height='32' src='http://1.bp.blogspot.com/-Yw3D6DFiMxU/UVHgCB5ZtEI/AAAAAAAABHg/qkNLwmeJ36c/s1600/reddit.png' width='32'/></a>
    </div>
    </div>
    </div>
    <div style='margin-left:30px;float:left;width:200px;'><h5><div style='border-bottom:1px dotted #aaa'>ElegantGreen Template Design by:</div></h5><div style='margin-top:10px'>
    <a href='http://panduantemplateblog.blogspot.com'>Panduan Template Blog</a></div>
    <!-- Begin Mail -->
    <div style='margin-top:15px;border-bottom:1px dotted #aaa'>Subscribe to our newsletter</div>
    <div>
    <div id='mc_embed_signup'>
    <div id='joinfeed'>
    <a href='http://resepmasakansehatindonesia.blogspot.com/feeds/posts/default' rel='alternate' title='Subscribe to avail resepmasakansehatindonesia.blogspot.com' type='application/rss+xml'>RSS</a>
    <style>.ptb {padding-left:2px;padding-right:2px;color:white;font-weight:500;background-color:#FF8000;-moz-box-shadow: 1px 1px 1px #888;-webkit-box-shadow: 1px 1px 1px #888; box-shadow: 1px 1px 1px #888;}.ptb:hover {-moz-box-shadow: 0 0 0; -webkit-box-shadow: 0 0 0; box-shadow: 0 0 0;}</style>
    <form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=FeedBlog Anda&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><input name='email' placeholder='email address' style=' color:#5C6AA4; background: #fff; border:1px solid #5C6AA4; padding:10px 0;width:210px' type='text'/><input name='uri' type='hidden' value='Resep Masakan Sehat Indonesia'/><input name='loc' type='hidden' value='en_US'/> <input class='ptb' onmouseout='this.className=&apos;ptb&apos;' onmouseover='this.className=&apos;ptb ptbhov&apos;' style='-moz-border-radius: 3px; border-radius: 3px;' type='submit' value='Submit'/></form>
    </div>
    </div>
    <!--End Mail-->
    </div>
    </div>
    <div id='footer-menu'>
    <ul id='vmenu'>
    <li><a href='#'>Home</a></li>
    <li><a href='#'>Masakan Daerah</a></li>
    <li><a href='#'>Cara Memasak</a></li>
    <li><a href='#'>Tentang</a></li>
    <li><a href='#'>Hubungi Kami</a></li>
    <li><a href='#'>Credits</a></li>
    <li><a href='#'>Uncategorized</a></li>
    </ul>
    </div>
    <div style='margin:40px 0 20px 0;clear:both'><p>&#169; 2013 <a expr:href='data:blog.homepageUrl' style='margin-right:10px;'><data:blog.title/></a> All rights reserved.</p></div>
    <div style='clear:both;height:20px'/>
    </div>
    </div>
  5. Selesai. Silahkan klik Preview terlebih dahulu sebelum anda menyimpan pembaharuan kode template anda. Jika ada yang error, cari kodenya dan perbaiki. Jika tidak ada yang error, simpan template.
PENTING Karena kode CSS dari membuat footer blog ini menggunakan kode yang sama dengan kode footer aslinya yaitu #footer sehingga akan membuat ID html yang sama juga yaitu <div id='footer'> maka anda harus menghapus kode yang ada yang sama dengan kode pada artikel ini agar tidak menimbulkan bentrok.

Sekian cara membuat footer blog yang bisa anda pasang di blog anda. Jika ada pertanyaan, mari kita diskusikan bersama dengan meninggalkan komentar untuk artikel ini, Membuat Footer Blog

Membuat Footer Blog ala ElegantGreen Template Rating: 4.5 Diposkan Oleh: ana sriwahyuni

16 komentar:

  1. banyak sekali scriptnya ya..
    btw terima kasih atas tutorialnya, bisa jadi tambahan ilmu buat saya

    BalasHapus
  2. Banyak juga kodenya yah,tapi sementara ini saya masih dengan footer sekarang,tapi bisa coba juga ini untuk kreasi dari footer ala elegantgreennya.

    BalasHapus
  3. Terima kasih infonya,
    sangat bermanfaat untuk saya

    BalasHapus
  4. oh ini yah tutorial bantuan buat template elegangreen punya ibu yah....? kebetulan saya udah download template ibu itu....! keren bu templatenya , tapi belum saya pasang soalnya mau saya modif dulu...ngga apa2 kan dimodif sedikit bu...? tapi hak ciptanya tetap kok saya pasang dan ngga akan saya ganti...!

    oh iya bu saya teh pengunjung blog ibu waktu pembahasan artikel "cara membuat daftar isi pada blog"...! ternyata kemaren tuh saya yang salah...waktu saya simpan kode script daftar isi ke google code saya ngasih format txt bukannya .js terus isinya juga ada yg ngga ke copy alias kurang, so pasti daftar isinya ngga akan muncul...hahaha maaf yah jadi ngerepotin ibu ...! tapi makasih yah bu atas infonya yg kemaren itu...!

    oh iya bu jangan lupa kunjungannya yah ke blog saya tentang persib di :

    http://persibbandungfcindonesia.blogspot.com/

    thanks yah bu dan semoga sukses selalu...!

    VIKING-BONEK SATU HATI...SALAWASNA JADI DULUR...!

    BalasHapus
    Balasan
    1. silahkan mas Adji, sama-sama makasih juga,,,

      Hapus
  5. tutorialnya keren, tapi aku udah suka dengan footer blogku yang sekarang jadi belum mau ganti

    BalasHapus
  6. thx kk infonya salam kenal http://idegemilang.blogspot.com/

    BalasHapus
  7. mantap bro langsung saya coba nih

    BalasHapus
  8. Thanks infonya http://hanazfaruq12.blogspot.com/

    BalasHapus
  9. kalo untuk menampilkan pesan ketika footer di mouseover gimana gan?

    BalasHapus
    Balasan
    1. nanti akan saya share juga, saat ini masih membuat kode yang cocok digunakan untuk semua template blog

      Hapus
  10. kalo di template nya gak ada script id='footer' nya gimana tuh gan....?
    mohon bimbingannya. Trims....

    BalasHapus
    Balasan
    1. id='footer' merupakan bagian utama yang ada di template blog, kalau id='footer' tidak ada berarti kode tersebut memiliki nama yang berbeda, coba cari diatas kode
      </body>
      </html>
      kode id='footer' berada diatas kode tersebut

      seperti berikut contohnya:
      <div id='footer'>
      Hak Cipta @ 2013 Panduan Template Blog
      </div>
      </body>
      </html>

      Hapus
  11. wah bisa dicoba nih, kayaknya keren footernya,,,

    BalasHapus

Demi kenyamanan bersama, tidak boleh memasang link dalam bentuk apapun, komentar yang berisi link tidak akan diterbitkan
Terimakasih

Direktori

direktori weblogger
Direktori WeBlog Indonesia