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/AVvXsEjIaK5qOKcm4GX6qkVUrpDeNJiGKUiP4UWAgZyUFv3rjlX7MqAfGp65IDGPrpJ3ApZm3jOPaKgNlmNL0A19_fn8fKpzE3FPYD-hZds160jWxZWAf_u6h9_HDQGXmk4qOados37-oq2tZKPR/) 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/AVvXsEj8TONyU-eN3RP6I1o0U4EXBxwgZduFkD_xbLp2PcabM7_u97lgdp5R-SYBxPFut4WoYMQvLN9lG6LAsAjaqU9RjgAYSopOq4MPBDRRRmPng9Akn9WAvk5thIpRCi1qRl51Fyrvr29UzZTF/>')" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8TONyU-eN3RP6I1o0U4EXBxwgZduFkD_xbLp2PcabM7_u97lgdp5R-SYBxPFut4WoYMQvLN9lG6LAsAjaqU9RjgAYSopOq4MPBDRRRmPng9Akn9WAvk5thIpRCi1qRl51Fyrvr29UzZTF/"></a> 

    <a onmouseout="tooltip.hide()" onmouseover="tooltip.show('<div class=fs_atrbks><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8ra4n8lyG-Fx8m4Dx6zBgFQRHjWVLPR_yDJNxUrgdkA7hM_29pMmGapKA58_GTahuRAc_hAn9Jx5hlioupRj1CHEzQ9KZW84zdr1uAoXdadXP7hevOb3hKSNsC1GIVBVIPhJyUHhTXRoe/"></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/AVvXsEg8ra4n8lyG-Fx8m4Dx6zBgFQRHjWVLPR_yDJNxUrgdkA7hM_29pMmGapKA58_GTahuRAc_hAn9Jx5hlioupRj1CHEzQ9KZW84zdr1uAoXdadXP7hevOb3hKSNsC1GIVBVIPhJyUHhTXRoe/>')" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8ra4n8lyG-Fx8m4Dx6zBgFQRHjWVLPR_yDJNxUrgdkA7hM_29pMmGapKA58_GTahuRAc_hAn9Jx5hlioupRj1CHEzQ9KZW84zdr1uAoXdadXP7hevOb3hKSNsC1GIVBVIPhJyUHhTXRoe/"></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/AVvXsEiQpxV85ehluezedfMF9Er7DLdTlHr3YU5Ec5Go7UmL9PhaV2RKvwnq8H1ZuYgM3sWeNJsj1PTTXQ15x0x1LUHkRA8HtN_09he6XMAaLkvfPmMU9Uje0vfGGljy6xovsDKL8-Kc6hKfDIqR/>')" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQpxV85ehluezedfMF9Er7DLdTlHr3YU5Ec5Go7UmL9PhaV2RKvwnq8H1ZuYgM3sWeNJsj1PTTXQ15x0x1LUHkRA8HtN_09he6XMAaLkvfPmMU9Uje0vfGGljy6xovsDKL8-Kc6hKfDIqR/"></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/AVvXsEip0tYJWW_YPT0ZHiL-HO1huiOUYgOglSlIlz0kPR1PohaY1mn_nXdrVouUo7IwSLqPH-PqwA5vWdtQgVCYC9_LxA5TRNgF1eIgr95QEMY_G-yEejf0b1NTXiC8QCJWMxLEUL0XInqUktY-/>')" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEip0tYJWW_YPT0ZHiL-HO1huiOUYgOglSlIlz0kPR1PohaY1mn_nXdrVouUo7IwSLqPH-PqwA5vWdtQgVCYC9_LxA5TRNgF1eIgr95QEMY_G-yEejf0b1NTXiC8QCJWMxLEUL0XInqUktY-/"></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/AVvXsEjIaK5qOKcm4GX6qkVUrpDeNJiGKUiP4UWAgZyUFv3rjlX7MqAfGp65IDGPrpJ3ApZm3jOPaKgNlmNL0A19_fn8fKpzE3FPYD-hZds160jWxZWAf_u6h9_HDQGXmk4qOados37-oq2tZKPR/) 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/AVvXsEj8TONyU-eN3RP6I1o0U4EXBxwgZduFkD_xbLp2PcabM7_u97lgdp5R-SYBxPFut4WoYMQvLN9lG6LAsAjaqU9RjgAYSopOq4MPBDRRRmPng9Akn9WAvk5thIpRCi1qRl51Fyrvr29UzZTF/>')" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8TONyU-eN3RP6I1o0U4EXBxwgZduFkD_xbLp2PcabM7_u97lgdp5R-SYBxPFut4WoYMQvLN9lG6LAsAjaqU9RjgAYSopOq4MPBDRRRmPng9Akn9WAvk5thIpRCi1qRl51Fyrvr29UzZTF/"></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/AVvXsEg8ra4n8lyG-Fx8m4Dx6zBgFQRHjWVLPR_yDJNxUrgdkA7hM_29pMmGapKA58_GTahuRAc_hAn9Jx5hlioupRj1CHEzQ9KZW84zdr1uAoXdadXP7hevOb3hKSNsC1GIVBVIPhJyUHhTXRoe/>')" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8ra4n8lyG-Fx8m4Dx6zBgFQRHjWVLPR_yDJNxUrgdkA7hM_29pMmGapKA58_GTahuRAc_hAn9Jx5hlioupRj1CHEzQ9KZW84zdr1uAoXdadXP7hevOb3hKSNsC1GIVBVIPhJyUHhTXRoe/"></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/AVvXsEiQpxV85ehluezedfMF9Er7DLdTlHr3YU5Ec5Go7UmL9PhaV2RKvwnq8H1ZuYgM3sWeNJsj1PTTXQ15x0x1LUHkRA8HtN_09he6XMAaLkvfPmMU9Uje0vfGGljy6xovsDKL8-Kc6hKfDIqR/>')" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQpxV85ehluezedfMF9Er7DLdTlHr3YU5Ec5Go7UmL9PhaV2RKvwnq8H1ZuYgM3sWeNJsj1PTTXQ15x0x1LUHkRA8HtN_09he6XMAaLkvfPmMU9Uje0vfGGljy6xovsDKL8-Kc6hKfDIqR/"></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/AVvXsEip0tYJWW_YPT0ZHiL-HO1huiOUYgOglSlIlz0kPR1PohaY1mn_nXdrVouUo7IwSLqPH-PqwA5vWdtQgVCYC9_LxA5TRNgF1eIgr95QEMY_G-yEejf0b1NTXiC8QCJWMxLEUL0XInqUktY-/>')" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEip0tYJWW_YPT0ZHiL-HO1huiOUYgOglSlIlz0kPR1PohaY1mn_nXdrVouUo7IwSLqPH-PqwA5vWdtQgVCYC9_LxA5TRNgF1eIgr95QEMY_G-yEejf0b1NTXiC8QCJWMxLEUL0XInqUktY-/"></a>
</div>
</div>

Untuk pemasangan, sobat dapat mengikuti step-stepnya......

1. Login ke akun bloger sobat.
2. Klik Template >> Edit HTML >> Lanjutkan (jangan lupa centang Expand Template Widget).
3. Cari kode </body> lalu letakan script tersebut diatasnya. Setelah itu klik simpan.
4. Klik lihat blog untuk melihat.

Gimana, sobat tinggal menyesuaikan background sesuai dengan selera sobat.

Ok teruslah berkreasi dan terus bersemangat. Semoga bermanfaat..

Sumber: http://caratrikterbaru.blogspot.com/2012/02/membuat-footer-berefek-gradient.html