2008年8月22日 星期五

[blogger tune up] Add mininav

[blogger tune up] Add mininav bar

from http://hnigel.blogspot.com/

Step 1:
Add CSS inside <b:skin> </b:skin>
before ]]></b:skin>



/*-------------------------mininav---------------------------------*/
#mininav{
position:fixed;
text-align:left;
margin-left:-20px;
margin-top:17px;
}
* html #mininav{ /*IE6 only*/
position:absolute;
}
#mininav a img{
opacity:.6;
-moz-opacity:0.6;
filter:alpha(Opacity=60);
}
#mininav a:hover img{
opacity:1;
-moz-opacity:1;
filter:alpha(Opacity=100);
position:relative;top:1px;left:1px;
}
* html #mininav a img{
filter:alpha(Opacity=100);
}
#mininav img{
margin-bottom: 5px;
}
* html .mininav{
margin-bottom: 7px;
}


Step 2:
put javascript inside <head>


<script type='text/javascript'>
function FontZoom(size)
{
var element = document.getElementsByTagName("div");
var components = new Array();
for(i = 0, j = 0; i < element.length; i++) {
attribute = element[i].getAttribute("id");
if(attribute == "outer-wrapper") {
components[j] = element[i];
j++;
}
}
for (i = 0; i < components.length; i++)
components[i].style.fontSize = size+'px';
}
</script>
<script type='text/javascript'>
//<![CDATA[
function showLucky(root){
var feed = root.feed;
var entries = feed.entry || [];
var entry = feed.entry[0];
window.location = entry.link[0].href;
}

function fetchLuck(luck){
script = document.createElement('script');
script.src = '/feeds/posts/summary?start-index='+luck+'&max-results=1&alt=json-in-script&callback=showLucky';
script.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(script);
}
function readLucky(root){
var feed = root.feed;
var total = parseInt(feed.openSearch$totalResults.$t,10);
var luckyNumber = Math.floor(Math.random()*total);
luckyNumber++;
fetchLuck(luckyNumber);
}
function feelingLucky(){
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = '/feeds/posts/summary?max-results=0&alt=json-in-script&callback=readLucky';
document.getElementsByTagName('head')[0].appendChild(script);
}
//]]>
</script>



Step 3:
Add div after <div id='outer-wrapper'><div id='wrap2'>


<div id='mininav'>
<span>
<a href='http://hk-nikon.blogspot.com/' style='border:0;' title='回到首頁'><img alt='回到首頁' class='mininav' src='http://hnigel.myweb.hinet.net/blog/icon/home.gif'/></a>
<br/>
<a href='#random' onclick='feelingLucky()' style='border:0;' title='隨選文章'><img alt='隨選文章' class='mininav' src='http://hnigel.myweb.hinet.net/blog/icon/bomb.png'/></a>
<br/>
<a href='http://hk-nikon.blogspot.com/' style='border:0;' title='About Me!'><img alt='About Me!' class='mininav' src='http://hnigel.myweb.hinet.net/blog/icon/person.gif'/></a>
<br/>
<a href='javascript:FontZoom(16)' style='border:0;' title='字體變大'><img alt='字體變大' class='mininav' src='http://hnigel.myweb.hinet.net/blog/icon/a+.gif'/></a>

<br/>
<a href='javascript:FontZoom(12)' style='border:0;' title='字體正常'><img alt='字體正常' class='mininav' src='http://hnigel.myweb.hinet.net/blog/icon/a.gif'/></a>
<br/>
<a href='javascript:FontZoom(10)' style='border:0;' title='字體變小'><img alt='字體變小' class='mininav' src='http://hnigel.myweb.hinet.net/blog/icon/a-.gif'/></a>
<br/>
<a href='http://hk-nikon.blogspot.com/feeds/posts/default' style='border:0;' title='訂閱我的RSS'><img alt='訂閱我的RSS' class='mininav' src='http://hnigel.myweb.hinet.net/blog/icon/feed-icon-14x14.png'/></a>
<br/>
<a href='http://hk-nikon.blogspot.com/feeds/posts/default' style='border:0;' title='捎信來'><img alt='捎信來' class='mininav' src='http://hnigel.myweb.hinet.net/blog/icon/email.gif'/></a>
<br/>
</span>
</div>



沒有留言: