» » Membuat Footer Berefek Gradient

Membuat Footer Berefek Gradient

Bookmark and Share


Nah setelah sekian lama tidak update, sekarang ane akan postingin artikel membuat Footer dengan efek gradien. Seperti gambar disamping. Sebetulnya ini merupakan perminta'an dari sobat ane tapi ini ane postingin biar bisa bermanfa'at untuk semuanya
Pada dasarnya sama dengan kebanyakan footer ang digunakan oleh para blogger mania. Hanya saja ane menggunakan backgrund yang sudah saya buat dengan efek gradient. Sehingga akan nampak seperti hilang sebelum menyentuh bagian bawah browser. Biar ga penasaran yuk coba codingnya.......

Coding 1 :


<style type="text/css"> 
#navbar-footer p.info { 
float: right; 
padding-right:40px; 
line-height: 1.2; 
height: 40px; 
vertical-align: bottom; 
} 

#navbar-footer p {  
  • float: left;  

  • margin: 0px;  

  • padding-top:4px;  

  • padding-left:40px;  

  • vertical-align: bottom;  

  • line-height: 1.2;  

  • }  

  •  

  • #navbar-footer a {  

  • color: #333;  

  • }  

  •  

  • #navbar-footer {  

  • align: center;  

  • position: fixed;  

  • background: url(https:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiDwwfAbzBFNu84dv86GqZ3LQQCp5r_5voaCjYsPA-zEfnCh14anfzVTLQebaQzqFirPyfxtmnj1yksKhdJ2TeWSwAExryz-cNGJ823pas4AUOvrbnDDdwOwhyfaamobJdIgDmnZBXID4k/) repeat-x left bottom;  

  • width: 100%;  

  • height: 100px;  

  • left: 0px;  

  • text-align: left;  

  • color: #888;  

  • font-family: Verdana;  

  • font-size: 11px;  

  • z-index:10000;  

  • filter: alpha(opacity: 90);  

  • bottom:0;  

  • }  

  •  

  • #iconfooter{display:scroll;position:fixed;bottom:10px;right:20px;z-index:99}  

  • #iconfooter a{filter:alpha(opacity=65);-moz-opacity:0.65;opacity:0.65;border:0}  

  • #iconfooterr img{border:0}  

  • #iconfooter a:hover{filter:alpha(opacity=100);-moz-opacity:1;opacity:1}  

  • </style>  

  •   

  • <div id="navbar-footer"><div class="info"></div><div id="iconfooter"><a onmouseout="tooltip.hide()" onmouseover="tooltip.show('Reload page')" href="http://www.blogger.com/post-edit.g?blogID=117511900341815330&postID=5482683147276192730#">  

  • <img onmouseout="tooltip.hide()" onmouseover="tooltip.show('<img class=fs_atrplusImg src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCTg-GRyybmklar2IGB44X7_ERjMo31twSnxq8VVFpYSJ6vPTi03Vw9w1m6b55f-rfcvorNaJhfGZvDljXZoQLvSUKTLgCHW5BGOq8WamrnMwaKRWdRy6mp65NNEyDpvCg7i0GkhUtU-oE/>')" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCTg-GRyybmklar2IGB44X7_ERjMo31twSnxq8VVFpYSJ6vPTi03Vw9w1m6b55f-rfcvorNaJhfGZvDljXZoQLvSUKTLgCHW5BGOq8WamrnMwaKRWdRy6mp65NNEyDpvCg7i0GkhUtU-oE/"></a>  

  • <a onmouseout="tooltip.hide()" onmouseover="tooltip.show('<div class=fs_atrbks><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUEU0e17zBWUDTBasUEHq_IfeSUWT_bPxiTdDZt2txlFcDWzFneqzQC5hfynf9fcGwkIJbEbVjbyobvtL83oQTBOMPEI0YrWQtUVasif_tt66kVxLp2KikA-APv0y8amu88OycbfgHTUTF/"></div>')" expr:href="data:blog.homepageUrl" href="http://www.blogger.com/post-edit.g?blogID=117511900341815330&postID=5482683147276192730"><img onmouseout="tooltip.hide()" onmouseover="tooltip.show('<img class=fs_atrplusImg src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUEU0e17zBWUDTBasUEHq_IfeSUWT_bPxiTdDZt2txlFcDWzFneqzQC5hfynf9fcGwkIJbEbVjbyobvtL83oQTBOMPEI0YrWQtUVasif_tt66kVxLp2KikA-APv0y8amu88OycbfgHTUTF/>')" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUEU0e17zBWUDTBasUEHq_IfeSUWT_bPxiTdDZt2txlFcDWzFneqzQC5hfynf9fcGwkIJbEbVjbyobvtL83oQTBOMPEI0YrWQtUVasif_tt66kVxLp2KikA-APv0y8amu88OycbfgHTUTF/"></a>  

  • <a onmouseout="tooltip.hide()" onmouseover="tooltip.show('Ke Atas Halaman')" href="http://www.blogger.com/post-edit.g?blogID=117511900341815330&postID=5482683147276192730#"><img onmouseout="tooltip.hide()" onmouseover="tooltip.show('<img class=fs_atrplusImg src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSC3PkddTwjQlq1R5lXi6n3fdvT6Ug1LWAcXGkROPgw3OitPuB4pfzOaIgzAz1SXw2Lsx4lmXttP4Y-CkFBK1j6q8jOY-vsoB9ZxnjMEsFZCe_Fj7AasknUutiGodY5gP_4FPYbaTnJoZN/>')" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSC3PkddTwjQlq1R5lXi6n3fdvT6Ug1LWAcXGkROPgw3OitPuB4pfzOaIgzAz1SXw2Lsx4lmXttP4Y-CkFBK1j6q8jOY-vsoB9ZxnjMEsFZCe_Fj7AasknUutiGodY5gP_4FPYbaTnJoZN/"></a>  

  • <a onmouseout="tooltip.hide()" onmouseover="tooltip.show('Ke bawah halaman')" href="http://www.blogger.com/post-edit.g?blogID=117511900341815330&postID=5482683147276192730#footbar">  

  • <img onmouseout="tooltip.hide()" onmouseover="tooltip.show('<img class=fs_atrplusImg src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKVrWuq1SOiZkZYfBjawWMRp384_lHBiblos4ijixUnG1VA0ymD4IlpRhdnfT0kX02barpb7Lf0BmIJE8b3mlZOhOcDkFSriIS8ZQ97Vii5lCEo__xtF7VExDHABzEgojex2tRHmqPDRog/>')" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKVrWuq1SOiZkZYfBjawWMRp384_lHBiblos4ijixUnG1VA0ymD4IlpRhdnfT0kX02barpb7Lf0BmIJE8b3mlZOhOcDkFSriIS8ZQ97Vii5lCEo__xtF7VExDHABzEgojex2tRHmqPDRog/"></a>  

  • </div></div> 

    • Coding 2 :

    <style type="text/css">
    #navbar-footer p.info {
    float: right;
    padding-right:40px;
    line-height: 1.2;
    height: 40px;
    vertical-align: bottom;
    }

    #navbar-footer p {
    float: left;
    margin: 0px;
    padding-top:4px;
    padding-left:40px;
    vertical-align: bottom;
    line-height: 1.2;
    }

    #navbar-footer a {
    color: #333;
    }

    #navbar-footer {
    align: center;
    position: fixed;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiDwwfAbzBFNu84dv86GqZ3LQQCp5r_5voaCjYsPA-zEfnCh14anfzVTLQebaQzqFirPyfxtmnj1yksKhdJ2TeWSwAExryz-cNGJ823pas4AUOvrbnDDdwOwhyfaamobJdIgDmnZBXID4k/) repeat-x left bottom;
    width: 100%;
    height: 100px;
    left: 0px;
    text-align: left;
    color: #888;
    font-family: Verdana;
    font-size: 11px;
    z-index:10000;
    filter: alpha(opacity: 90);
    bottom:0;
    }

    #iconfooter{display:scroll;position:fixed;bottom:10px;right:20px;z-index:99}
    #iconfooter a{filter:alpha(opacity=65);-moz-opacity:0.65;opacity:0.65;border:0}
    #iconfooterr img{border:0}
    #iconfooter a:hover{filter:alpha(opacity=100);-moz-opacity:1;opacity:1}
    </style>

    <div id="navbar-footer">
    <div class="info">
    </div>
    <div id="iconfooter">
    <a href="http://www.blogger.com/post-edit.g?blogID=117511900341815330&postID=5482683147276192730#">
    <img onmouseout="tooltip.hide()" onmouseover="tooltip.show('<img class=fs_atrplusImg src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCTg-GRyybmklar2IGB44X7_ERjMo31twSnxq8VVFpYSJ6vPTi03Vw9w1m6b55f-rfcvorNaJhfGZvDljXZoQLvSUKTLgCHW5BGOq8WamrnMwaKRWdRy6mp65NNEyDpvCg7i0GkhUtU-oE/>')" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCTg-GRyybmklar2IGB44X7_ERjMo31twSnxq8VVFpYSJ6vPTi03Vw9w1m6b55f-rfcvorNaJhfGZvDljXZoQLvSUKTLgCHW5BGOq8WamrnMwaKRWdRy6mp65NNEyDpvCg7i0GkhUtU-oE/"></a>
    <a expr:href="data:blog.homepageUrl" href="http://www.blogger.com/post-edit.g?blogID=117511900341815330&postID=5482683147276192730"><img onmouseout="tooltip.hide()" onmouseover="tooltip.show('<img class=fs_atrplusImg src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUEU0e17zBWUDTBasUEHq_IfeSUWT_bPxiTdDZt2txlFcDWzFneqzQC5hfynf9fcGwkIJbEbVjbyobvtL83oQTBOMPEI0YrWQtUVasif_tt66kVxLp2KikA-APv0y8amu88OycbfgHTUTF/>')" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUEU0e17zBWUDTBasUEHq_IfeSUWT_bPxiTdDZt2txlFcDWzFneqzQC5hfynf9fcGwkIJbEbVjbyobvtL83oQTBOMPEI0YrWQtUVasif_tt66kVxLp2KikA-APv0y8amu88OycbfgHTUTF/"></a>
    <a href="http://www.blogger.com/post-edit.g?blogID=117511900341815330&postID=5482683147276192730#"><img onmouseout="tooltip.hide()" onmouseover="tooltip.show('<img class=fs_atrplusImg src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSC3PkddTwjQlq1R5lXi6n3fdvT6Ug1LWAcXGkROPgw3OitPuB4pfzOaIgzAz1SXw2Lsx4lmXttP4Y-CkFBK1j6q8jOY-vsoB9ZxnjMEsFZCe_Fj7AasknUutiGodY5gP_4FPYbaTnJoZN/>')" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSC3PkddTwjQlq1R5lXi6n3fdvT6Ug1LWAcXGkROPgw3OitPuB4pfzOaIgzAz1SXw2Lsx4lmXttP4Y-CkFBK1j6q8jOY-vsoB9ZxnjMEsFZCe_Fj7AasknUutiGodY5gP_4FPYbaTnJoZN/"></a>
    <a href="http://www.blogger.com/post-edit.g?blogID=117511900341815330&postID=5482683147276192730#footbar">
    <img onmouseout="tooltip.hide()" onmouseover="tooltip.show('<img class=fs_atrplusImg src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKVrWuq1SOiZkZYfBjawWMRp384_lHBiblos4ijixUnG1VA0ymD4IlpRhdnfT0kX02barpb7Lf0BmIJE8b3mlZOhOcDkFSriIS8ZQ97Vii5lCEo__xtF7VExDHABzEgojex2tRHmqPDRog/>')" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKVrWuq1SOiZkZYfBjawWMRp384_lHBiblos4ijixUnG1VA0ymD4IlpRhdnfT0kX02barpb7Lf0BmIJE8b3mlZOhOcDkFSriIS8ZQ97Vii5lCEo__xtF7VExDHABzEgojex2tRHmqPDRog/"></a>
    </div>
    </div>


    Untuk pemasangan, sobat dapat mengikuti step-stepnya......
    1. Login ke akun bloger sobat....
    2. Pilih Rancangan, disini sobat bisa meletekan pada dua tempat, yang pertama pada Edit Laman dan Edit HTML terserah sobat lebih mudah yang mana.
    3. Jika sobat pilih Edit Laman, tambah gadget pilih Html/Javascript, lalu copy pastekan kode di atas kedalamya, setelah itu simpan.
    4. Jika sobat pilih Edit Html, cari kode </body> lalu letakan script tersebut diatasnya. setelah itu klik simpan.
    5. Klik lihat blog untuk melihat....

    Gimana, sobat tinggal menyesuaikan backgroun sesuai dengan selera sobat.
    Ok teruslah berkreasi dan terus bersemangat.
    Description: Membuat Footer Berefek Gradient Rating: 4.5  
    4.5
    di 20.42 - Label: -

    { 0 komentar... Views All / Send Comment! }


    Posting Komentar

    Powered By Blogger