Cara Membuat Footer Berefek Gradien


CaraMembuat Footer Berefek Gradien - Cara memodifikasi/mendesain footer blog agar lebih cantik dan menarik.
Pada artikel-sebelumnya saya membahas mengenai cara menghias blog yaitu cara memberisearch box di blog, dan pada kesempatan kali ini temukan cara akan membahas mengenai cara memodifikasi footerblog agar lebih menarik. Footer berefek gradient juga merupakan salah satu teknik untuk mempercantik tampilan blog, dengan blog yang menarik dan cantik tentunya akan membuat setiap pengunjung merasa betah berada di blog kita. Berikut ini adalah caranya:

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/AVvXsEghe8auDA1LSCYOAKJo_KJbeVGJpcmEvjQZoAmP0mKKpyD1rgkpe9Hy5lyiB9V-0kNBO-gUZ9trXfv31U7loB-AdiImIEjzy31N0wGbZrwyY1xcWDqdmf-RmhxsHZSSifDobuXBNeiwAf5I/) 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/AVvXsEhVN2teslzLOcODRj5jNwRlpqq09T-H5eyy3draj9eTxbKCc5ptvoroDhtRy7l3u7NcQvdTFkcw7-Gc-o4HoFICyRqKubc2AdxBbg68sSHYLIxgpSIy7Kk-KffvdqMn7jo1F-zKqXC1U2HT/>')" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVN2teslzLOcODRj5jNwRlpqq09T-H5eyy3draj9eTxbKCc5ptvoroDhtRy7l3u7NcQvdTFkcw7-Gc-o4HoFICyRqKubc2AdxBbg68sSHYLIxgpSIy7Kk-KffvdqMn7jo1F-zKqXC1U2HT/"></a> 

    <a onmouseout="tooltip.hide()" onmouseover="tooltip.show('<div class=fs_atrbks><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibYOLn-sXp25NlAFJaZsS4IVRiA1kvtDzXJ3ANbpUBLJdsOTId0M4DJvfLPv_E5sWRG77ZHRvXd59zqixP9mbtGeq06ujrExiL27j7RLKrkZPaI99RpIQVFIrZ5AEtJuGOtt1DU3DDdDAx/"></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/AVvXsEibYOLn-sXp25NlAFJaZsS4IVRiA1kvtDzXJ3ANbpUBLJdsOTId0M4DJvfLPv_E5sWRG77ZHRvXd59zqixP9mbtGeq06ujrExiL27j7RLKrkZPaI99RpIQVFIrZ5AEtJuGOtt1DU3DDdDAx/>')" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibYOLn-sXp25NlAFJaZsS4IVRiA1kvtDzXJ3ANbpUBLJdsOTId0M4DJvfLPv_E5sWRG77ZHRvXd59zqixP9mbtGeq06ujrExiL27j7RLKrkZPaI99RpIQVFIrZ5AEtJuGOtt1DU3DDdDAx/"></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/AVvXsEh5aGWBfaXZlVz-FawspPKj3-hNKDoKpBYEKTpG7y7PhvFhiCa7Y83uNBLqiUYrZjc2dQymfx6U3U29RvM0bY95KYlg9CGcOAbQ5K0-75QGkQBmgIsIATrFAsdM60yKLzspprc7wZWgNNvU/>')" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5aGWBfaXZlVz-FawspPKj3-hNKDoKpBYEKTpG7y7PhvFhiCa7Y83uNBLqiUYrZjc2dQymfx6U3U29RvM0bY95KYlg9CGcOAbQ5K0-75QGkQBmgIsIATrFAsdM60yKLzspprc7wZWgNNvU/"></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/AVvXsEjDt6jjxsiYwCdq7uJrZT4hTtTliDWmdPvuqhiR0VpaG8NRnnVzuaviMp-HqwJM2t-dNdt96gnrXRXLILNDwUeyJ_6X7GPIFNupVZMIjtdn-hI2wCPkwq5C_zsxbfXLSE9llxNa-TeBVxSY/>')" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDt6jjxsiYwCdq7uJrZT4hTtTliDWmdPvuqhiR0VpaG8NRnnVzuaviMp-HqwJM2t-dNdt96gnrXRXLILNDwUeyJ_6X7GPIFNupVZMIjtdn-hI2wCPkwq5C_zsxbfXLSE9llxNa-TeBVxSY/"></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/AVvXsEghe8auDA1LSCYOAKJo_KJbeVGJpcmEvjQZoAmP0mKKpyD1rgkpe9Hy5lyiB9V-0kNBO-gUZ9trXfv31U7loB-AdiImIEjzy31N0wGbZrwyY1xcWDqdmf-RmhxsHZSSifDobuXBNeiwAf5I/) 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/AVvXsEhVN2teslzLOcODRj5jNwRlpqq09T-H5eyy3draj9eTxbKCc5ptvoroDhtRy7l3u7NcQvdTFkcw7-Gc-o4HoFICyRqKubc2AdxBbg68sSHYLIxgpSIy7Kk-KffvdqMn7jo1F-zKqXC1U2HT/>')" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVN2teslzLOcODRj5jNwRlpqq09T-H5eyy3draj9eTxbKCc5ptvoroDhtRy7l3u7NcQvdTFkcw7-Gc-o4HoFICyRqKubc2AdxBbg68sSHYLIxgpSIy7Kk-KffvdqMn7jo1F-zKqXC1U2HT/"></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/AVvXsEibYOLn-sXp25NlAFJaZsS4IVRiA1kvtDzXJ3ANbpUBLJdsOTId0M4DJvfLPv_E5sWRG77ZHRvXd59zqixP9mbtGeq06ujrExiL27j7RLKrkZPaI99RpIQVFIrZ5AEtJuGOtt1DU3DDdDAx/>')" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibYOLn-sXp25NlAFJaZsS4IVRiA1kvtDzXJ3ANbpUBLJdsOTId0M4DJvfLPv_E5sWRG77ZHRvXd59zqixP9mbtGeq06ujrExiL27j7RLKrkZPaI99RpIQVFIrZ5AEtJuGOtt1DU3DDdDAx/"></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/AVvXsEh5aGWBfaXZlVz-FawspPKj3-hNKDoKpBYEKTpG7y7PhvFhiCa7Y83uNBLqiUYrZjc2dQymfx6U3U29RvM0bY95KYlg9CGcOAbQ5K0-75QGkQBmgIsIATrFAsdM60yKLzspprc7wZWgNNvU/>')" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5aGWBfaXZlVz-FawspPKj3-hNKDoKpBYEKTpG7y7PhvFhiCa7Y83uNBLqiUYrZjc2dQymfx6U3U29RvM0bY95KYlg9CGcOAbQ5K0-75QGkQBmgIsIATrFAsdM60yKLzspprc7wZWgNNvU/"></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/AVvXsEjDt6jjxsiYwCdq7uJrZT4hTtTliDWmdPvuqhiR0VpaG8NRnnVzuaviMp-HqwJM2t-dNdt96gnrXRXLILNDwUeyJ_6X7GPIFNupVZMIjtdn-hI2wCPkwq5C_zsxbfXLSE9llxNa-TeBVxSY/>')" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDt6jjxsiYwCdq7uJrZT4hTtTliDWmdPvuqhiR0VpaG8NRnnVzuaviMp-HqwJM2t-dNdt96gnrXRXLILNDwUeyJ_6X7GPIFNupVZMIjtdn-hI2wCPkwq5C_zsxbfXLSE9llxNa-TeBVxSY/"></a>
</div>
</div>

Untuk pemasangan coding tersebut, simak langkah-langkah berikut ini:
  1. Pertama anda harus Login ke akun bloger anda.
  2. Kemudiana anda Klik Template --> Edit HTML --> Lanjutkan (jangan lupa centang Expand Template Widget).
  3. Setelah itu anda Cari kode </body> dan  letakan script tersebut diatas kode </body> Setelah itu anda klik simpan.
  4. Selesai dan lihat hasilnya
Demikian yang dapat saya sampaikan pada postingan artikel kali ini mengenai Cara Membuat Footer Berefek Gradien semoga dapat bermanfaat buat anda.

Komentar