Cara Membuat Footer Berefek Gradien

Cara Membuat Footer Berefek Gradien - Cara memodifikasi/mendesain footer blog agar lebih cantik dan menarik.

Cara membuat footer berefek gradient merupakan salah satu langkah yang bisa kita lakukan untuk mempercantik tampilan blog kita, karena dengan blog yang cantik dan menarik tentunya akan membuat setiap pengunjung betah berada di blog kita. Setelah post sebelumnya yang juga mengenai cara menghias blog yaitu
cara memberi search box di blog, maka kali ini Blogaul akan mengulas artikel mengenai cara memodifikasi footer blog agar lebih menarik. 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjLqpUj8__xNoiKlBZhOvN5oUm2RDkcX6iGutF9NzrIvck2jVf5XIUAGwu0WGJo_0FP00hMYB9gMuZygoB8opb9m-02OH0_wtKWGhrKTSnRkmFP0bOsSERjoL6dhlLlAVGIkHlcjHvORtN//) 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/AVvXsEiML4_fGnrW15QjTjdM_KC00cCIOonpEEmxvvqrt46I2QspeyxLX_fKr2ILBtmh540BPOM1TRqQmW3fNacYauk3kfwqTfuQB4PWVdzF24tgkwSaVpmXoIXzZmoYBJ3TUx3HX2-gNs6vrI9s//>')" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiML4_fGnrW15QjTjdM_KC00cCIOonpEEmxvvqrt46I2QspeyxLX_fKr2ILBtmh540BPOM1TRqQmW3fNacYauk3kfwqTfuQB4PWVdzF24tgkwSaVpmXoIXzZmoYBJ3TUx3HX2-gNs6vrI9s//"></a> 

    <a onmouseout="tooltip.hide()" onmouseover="tooltip.show('<div class=fs_atrbks><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuX1fDoemg9KZ27qpqnfNzRpAUL2ovkE7Cam0pfelOSQuMwGpfpcU-mo8ui3PTTKKZtFovqxzTGxnLczzTfs7yOnxoYL_GSY4qZiYflPyXThNEJQ3Ly6C-KcuEyqFEW22SgJwESbApdn3f//"></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/AVvXsEiuX1fDoemg9KZ27qpqnfNzRpAUL2ovkE7Cam0pfelOSQuMwGpfpcU-mo8ui3PTTKKZtFovqxzTGxnLczzTfs7yOnxoYL_GSY4qZiYflPyXThNEJQ3Ly6C-KcuEyqFEW22SgJwESbApdn3f//>')" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuX1fDoemg9KZ27qpqnfNzRpAUL2ovkE7Cam0pfelOSQuMwGpfpcU-mo8ui3PTTKKZtFovqxzTGxnLczzTfs7yOnxoYL_GSY4qZiYflPyXThNEJQ3Ly6C-KcuEyqFEW22SgJwESbApdn3f//"></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/AVvXsEi6SdL8LoGezTOFpCFhWDMiyIBFVRzk0Uc_hYXeLSofP7bjKX9DA_BtvTBmn9TWFH-26F8VCs-ZKQQpFWi-6PJOW45KqFtPc5gHWyiYQJ7Rewwh3Ap-I1-_AoozHFA81-5XHUo6x92uCZ1u//>')" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6SdL8LoGezTOFpCFhWDMiyIBFVRzk0Uc_hYXeLSofP7bjKX9DA_BtvTBmn9TWFH-26F8VCs-ZKQQpFWi-6PJOW45KqFtPc5gHWyiYQJ7Rewwh3Ap-I1-_AoozHFA81-5XHUo6x92uCZ1u//"></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/AVvXsEh8ADywdfmRI8Ln-MU-j28xyfcu_zOCTK_k3UCHj-4-k1FjgMdnTLc7EjoqNXi0_rvGx_gjeveUbi7X3UZgx-Zbq_2qacbXg5sEBHypmfIEG6YaFGgNei-nFWOqukXwVMBYihzdGBJ8Q5ge//>')" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8ADywdfmRI8Ln-MU-j28xyfcu_zOCTK_k3UCHj-4-k1FjgMdnTLc7EjoqNXi0_rvGx_gjeveUbi7X3UZgx-Zbq_2qacbXg5sEBHypmfIEG6YaFGgNei-nFWOqukXwVMBYihzdGBJ8Q5ge//"></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/AVvXsEjjLqpUj8__xNoiKlBZhOvN5oUm2RDkcX6iGutF9NzrIvck2jVf5XIUAGwu0WGJo_0FP00hMYB9gMuZygoB8opb9m-02OH0_wtKWGhrKTSnRkmFP0bOsSERjoL6dhlLlAVGIkHlcjHvORtN//) 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/AVvXsEiML4_fGnrW15QjTjdM_KC00cCIOonpEEmxvvqrt46I2QspeyxLX_fKr2ILBtmh540BPOM1TRqQmW3fNacYauk3kfwqTfuQB4PWVdzF24tgkwSaVpmXoIXzZmoYBJ3TUx3HX2-gNs6vrI9s//>')" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiML4_fGnrW15QjTjdM_KC00cCIOonpEEmxvvqrt46I2QspeyxLX_fKr2ILBtmh540BPOM1TRqQmW3fNacYauk3kfwqTfuQB4PWVdzF24tgkwSaVpmXoIXzZmoYBJ3TUx3HX2-gNs6vrI9s//"></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/AVvXsEiuX1fDoemg9KZ27qpqnfNzRpAUL2ovkE7Cam0pfelOSQuMwGpfpcU-mo8ui3PTTKKZtFovqxzTGxnLczzTfs7yOnxoYL_GSY4qZiYflPyXThNEJQ3Ly6C-KcuEyqFEW22SgJwESbApdn3f//>')" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuX1fDoemg9KZ27qpqnfNzRpAUL2ovkE7Cam0pfelOSQuMwGpfpcU-mo8ui3PTTKKZtFovqxzTGxnLczzTfs7yOnxoYL_GSY4qZiYflPyXThNEJQ3Ly6C-KcuEyqFEW22SgJwESbApdn3f//"></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/AVvXsEi6SdL8LoGezTOFpCFhWDMiyIBFVRzk0Uc_hYXeLSofP7bjKX9DA_BtvTBmn9TWFH-26F8VCs-ZKQQpFWi-6PJOW45KqFtPc5gHWyiYQJ7Rewwh3Ap-I1-_AoozHFA81-5XHUo6x92uCZ1u//>')" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6SdL8LoGezTOFpCFhWDMiyIBFVRzk0Uc_hYXeLSofP7bjKX9DA_BtvTBmn9TWFH-26F8VCs-ZKQQpFWi-6PJOW45KqFtPc5gHWyiYQJ7Rewwh3Ap-I1-_AoozHFA81-5XHUo6x92uCZ1u//"></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/AVvXsEh8ADywdfmRI8Ln-MU-j28xyfcu_zOCTK_k3UCHj-4-k1FjgMdnTLc7EjoqNXi0_rvGx_gjeveUbi7X3UZgx-Zbq_2qacbXg5sEBHypmfIEG6YaFGgNei-nFWOqukXwVMBYihzdGBJ8Q5ge//>')" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8ADywdfmRI8Ln-MU-j28xyfcu_zOCTK_k3UCHj-4-k1FjgMdnTLc7EjoqNXi0_rvGx_gjeveUbi7X3UZgx-Zbq_2qacbXg5sEBHypmfIEG6YaFGgNei-nFWOqukXwVMBYihzdGBJ8Q5ge//"></a>
</div>
</div>

Tweet