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>
#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>
#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:
- Pertama anda harus Login ke akun bloger anda.
- Kemudiana anda Klik Template --> Edit HTML --> Lanjutkan (jangan lupa centang Expand Template Widget).
- Setelah itu anda Cari kode </body> dan letakan script tersebut diatas kode </body> Setelah itu anda klik simpan.
- 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
Posting Komentar