Para instalar um menu como este basta ir até o HTML de seu blog e depois de ]]></b:skin>
Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo.
colar o código abaixo.
<script type='text/javascript'>
//<![CDATA[
// ================================================================
// ------ dock menu -------
// script by Gerard Ferrandez - Ge-1-doot - February 2006
// http://www.dhteumeuleu.com
// ================================================================
var dock = function (dock, sMin, sMax) {
/* ---- private vars ---- */
var xm = xmb = ov = 0;
var M = true;
var icons = document.getElementById(dock).getElementsByTagName('img');
var N = icons.length;
var s = sMin;
var ovk = 0;
var addEvent = function (o, e, f) {
if (window.addEventListener) o.addEventListener(e, f, false);
else if (window.attachEvent) r = o.attachEvent('on' + e, f);
}
var pxLeft = function(o) {
for(var x=-document.documentElement.scrollLeft; o != null; o = o.offsetParent) x+=o.offsetLeft;
return x;
}
for(var i=0;i<N;i++) {
var o = icons[i];
o.style.width = sMin+"px";
o.style.height = sMin+"px";
o.className = "dockicon";
}
var run = function() {
for(var i=0;i<N;i++) {
var o = icons[i];
var W = parseInt(o.style.width);
if(ov && ov.className=="dockicon") {
if(ov!=ovk){
ovk=ov;
document.getElementById("legend").innerHTML = ov.lang;
}
if(M) W = Math.max((s*Math.cos(((pxLeft(o)+W/2)-xm)/sMax)),sMin);
s = Math.min(sMax,s+.5);
} else {
s = Math.max(s-.5,sMin);
W = Math.max(W-N,sMin);
}
o.style.width = W+"px";
o.style.height = W+"px";
}
if(s >= sMax) M = false;
}
addEvent(document, 'mousemove', function (e) {
if(window.event) e=window.event;
xm = (e.x || e.clientX);
if(xm!=xmb){
M = true;
xmb = xm;
}
ov = (e.target)?e.target:((e.srcElement)?e.srcElement:null);
});
setInterval(run, 16);
};
window.onload = function() {
dock("dock", 48, 128);
}
//]]>
</script>
<style type='text/css'>
#dock { /* el rectángulo contenedor */
position: relative; float:left;
text-align: center;
width: 100%;
}
#dock a, #dock a:visited { margin: 10px 0 0 3px; text-decoration: none; }
#dock img { border: none; width: 0px; }
#legend { /* el texto inferior */
color: #000;
font-size: 24px;
text-align: center;
width: 100%;
}
</style>
//<![CDATA[
// ================================================================
// ------ dock menu -------
// script by Gerard Ferrandez - Ge-1-doot - February 2006
// http://www.dhteumeuleu.com
// ================================================================
var dock = function (dock, sMin, sMax) {
/* ---- private vars ---- */
var xm = xmb = ov = 0;
var M = true;
var icons = document.getElementById(dock).getElementsByTagName('img');
var N = icons.length;
var s = sMin;
var ovk = 0;
var addEvent = function (o, e, f) {
if (window.addEventListener) o.addEventListener(e, f, false);
else if (window.attachEvent) r = o.attachEvent('on' + e, f);
}
var pxLeft = function(o) {
for(var x=-document.documentElement.scrollLeft; o != null; o = o.offsetParent) x+=o.offsetLeft;
return x;
}
for(var i=0;i<N;i++) {
var o = icons[i];
o.style.width = sMin+"px";
o.style.height = sMin+"px";
o.className = "dockicon";
}
var run = function() {
for(var i=0;i<N;i++) {
var o = icons[i];
var W = parseInt(o.style.width);
if(ov && ov.className=="dockicon") {
if(ov!=ovk){
ovk=ov;
document.getElementById("legend").innerHTML = ov.lang;
}
if(M) W = Math.max((s*Math.cos(((pxLeft(o)+W/2)-xm)/sMax)),sMin);
s = Math.min(sMax,s+.5);
} else {
s = Math.max(s-.5,sMin);
W = Math.max(W-N,sMin);
}
o.style.width = W+"px";
o.style.height = W+"px";
}
if(s >= sMax) M = false;
}
addEvent(document, 'mousemove', function (e) {
if(window.event) e=window.event;
xm = (e.x || e.clientX);
if(xm!=xmb){
M = true;
xmb = xm;
}
ov = (e.target)?e.target:((e.srcElement)?e.srcElement:null);
});
setInterval(run, 16);
};
window.onload = function() {
dock("dock", 48, 128);
}
//]]>
</script>
<style type='text/css'>
#dock { /* el rectángulo contenedor */
position: relative; float:left;
text-align: center;
width: 100%;
}
#dock a, #dock a:visited { margin: 10px 0 0 3px; text-decoration: none; }
#dock img { border: none; width: 0px; }
#legend { /* el texto inferior */
color: #000;
font-size: 24px;
text-align: center;
width: 100%;
}
</style>
Vá então em "Elementos de página" e clique em "Adicionar um novo gadget", clique então em HTML/Javascript e cole o código abaixo.
<div id="dock">
<a href="ENDEREÇO DO TWITTER" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwhu7sIS4fPBexnRD0mGUk6maf4N3KMtSA-31wlHMDHjCDmuU6gbgjBPgvJWEyFMm01D99JnWwXGS1w0wAssVY-xIzQNXqCmR9byyYYyfwncjKjwK-a54yXs_kMfdh3oLL3SMynGIiCkQ/s1600/twitter.png" lang="Siga-me" /></a>
<a href="ENDEREÇO DO FEED" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1mr_PqZdC1hIyqqz7ep3x7Shyphenhyphen5NADZbIlfFmi_MlZ3-wUjmNruJ8T9XBcD0pRIKlq9sPwnSoN8FvrNu5FMLvHyBI5ENB4Tquo68f6GonqpKe0PByiGoYNdHw421RN6O3n-CyD_QGrYfI/s1600/rss.png" lang="Assine" /></a>
<a href="ENDEREÇO DO GOOGLE HEADER" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkL0M4VidNlv3G5Na1QO70zqszUz44ZSRRqo5KTtwi_OGCDD7DIvrZ-rbgn2abxKZd38dSiZwgdCeeA3Bu7kvvWUHC1r0dRDorEs5LgPawkMRPZTS94lsdiZnUxD58dWtTJJpi49G0ljA/s1600/google.png" lang="Google Header" /></a>
<a href="ENDEREÇO DO FACEBOOK" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1Q6eOdIEvQUZmjKjKOb3d_nhTRrebWprbikC8SZPSd_V5J8cuAUdx75pKBfRvkf6JFbjqKA-1KbfcFmwjykT82-KmUUrtTiSgyTa0nB9vX5ynqUkgk_VT9WVZ6mdGDs9BEWTYFFLamY8/s1600/facebook.png" lang="Facebook" /></a>
<a href="ENDEREÇO DO BLOGGER" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5zJ57MsL1lGRFWpvYWH2KMuR5ZAtk7RYOn4yN6xeGD1Waw2vKo6Ucsue-5jPHhyphenhyphendL9-BcGfJcQvzl90VKYL-7sYPStsIwzGCKzrJsahlp_L6B1XcNA0nQu5A5zFcgyi6Y-ITjr7ZeQrE/s1600/blogger.png" lang="Logar" /></a>
</div>
<div id="legend"></div>
<a href="ENDEREÇO DO TWITTER" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwhu7sIS4fPBexnRD0mGUk6maf4N3KMtSA-31wlHMDHjCDmuU6gbgjBPgvJWEyFMm01D99JnWwXGS1w0wAssVY-xIzQNXqCmR9byyYYyfwncjKjwK-a54yXs_kMfdh3oLL3SMynGIiCkQ/s1600/twitter.png" lang="Siga-me" /></a>
<a href="ENDEREÇO DO FEED" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1mr_PqZdC1hIyqqz7ep3x7Shyphenhyphen5NADZbIlfFmi_MlZ3-wUjmNruJ8T9XBcD0pRIKlq9sPwnSoN8FvrNu5FMLvHyBI5ENB4Tquo68f6GonqpKe0PByiGoYNdHw421RN6O3n-CyD_QGrYfI/s1600/rss.png" lang="Assine" /></a>
<a href="ENDEREÇO DO GOOGLE HEADER" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkL0M4VidNlv3G5Na1QO70zqszUz44ZSRRqo5KTtwi_OGCDD7DIvrZ-rbgn2abxKZd38dSiZwgdCeeA3Bu7kvvWUHC1r0dRDorEs5LgPawkMRPZTS94lsdiZnUxD58dWtTJJpi49G0ljA/s1600/google.png" lang="Google Header" /></a>
<a href="ENDEREÇO DO FACEBOOK" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1Q6eOdIEvQUZmjKjKOb3d_nhTRrebWprbikC8SZPSd_V5J8cuAUdx75pKBfRvkf6JFbjqKA-1KbfcFmwjykT82-KmUUrtTiSgyTa0nB9vX5ynqUkgk_VT9WVZ6mdGDs9BEWTYFFLamY8/s1600/facebook.png" lang="Facebook" /></a>
<a href="ENDEREÇO DO BLOGGER" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5zJ57MsL1lGRFWpvYWH2KMuR5ZAtk7RYOn4yN6xeGD1Waw2vKo6Ucsue-5jPHhyphenhyphendL9-BcGfJcQvzl90VKYL-7sYPStsIwzGCKzrJsahlp_L6B1XcNA0nQu5A5zFcgyi6Y-ITjr7ZeQrE/s1600/blogger.png" lang="Logar" /></a>
</div>
<div id="legend"></div>
Se preferir troque os ícones. Veja outros modelos AQUI
muito bom so que eu queria o que sobi as imagems me responda no meu blog http://superdesenhosparapintar.blogspot.com/
ResponderExcluirobrigado