Criar Hack para suas postagens

Esse tutorial é para criar um Hack (botão, link) de todos os post, ou seja, direcionar o leitor do seu blog para um lugar (logo abaixo do cabeçalho do seu blog) onde todos os artigos do seu blog estão reunidos, com organização de data e titulo da sua publicação em uma bonita e eficiente tabela em ajax, quando clicado aparece todos os posts publicados e, clicando novamente desaparece, na mesma janela de navegação (na sua Home).

Primeiro passo: Acesse a página de configurações do seu blog e, clique em "EDITAR HTML". Encontre essa linha de código:
<b:section class='main' id='main' maxwidgets='2' showaddelement='yes'>

Ao encontrar esta linha pode ser que ela esteja sem o "maxwidgets 2", e "no" onde deveria estar "yes" em "showaddelement". Então, coloque o 'maxwidgets' com o valor "2" e coloque o 'showaddelement' com "yes", exatamente como no código acima. Salve o seu template.

Segundo passo:Veja em "Layout" (Adicionar e organizar elementos da página)... irá perceber que agora você pode adicionar widgets, acima da coluna principal, ou seja onde se encontra os artigos publicados no seu blog, então, clique nesse "Adicionar um Gadget" e nele coloque a seguinte linha html, mas deixe seu widget sem titulo, depois salve:

<div id="toc"> </div>

Terceiro passo: Agora vamos adicionar o link ou botão no topo da barra lateral, depois você pode mudar de lugar se quiser, mas por enquanto siga os passos corretamente. Crie um novo widget, agora na sua barra lateral e adicione o seguinte código:

<div id="toclink"><a href="javascript:showToc();">Conteudo do Blog</a></div>
<script style="text/javascript" src="http://7ekadw.bay.livefilestore.com/y1pMfum252BrWVA7OAQjAv3uTMZN4g2MDSIQC14gMxyLsLgYzwa2f1sFy8AQbhvr-jBMQ-zWguI2MzZxMHplzxrJA/blogtoc.js">
</script>
<script src="http://NOMEDOSEUBLOG.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script>

Obs: No código que está escrito em letra maiúscula "NOMEDOSEUBLOG" não esqueça de colocar o nome do seu blog!

Onde está escrito "conteúdo do blog", você pode alterar ao seu gosto já que este é o link que irá aparecer, pode até colocar uma imagem desde que altere apenas a área escrita "conteúdo do blog".

Observe também que na linha http://7ekadw.bay.livefilestore.com/y1pMfum252BrWVA7OAQjAv3uTMZN4g2MDSIQC14gMxyLsLgYzwa2f1sFy8AQbhvr-jBMQ-zWguI2MzZxMHplzxrJA/blogtoc.js, dá pra perceber que este arquivo foi hospedado por mim, mas se você quiser, hospede em um site/host de sua confiança, no meu caso hospedei no SkyDrive (Windows Live). Como hospedar Java Script no Skydrive.

|download do código|


Quarto passo: Acesse novamente a página de configurações do seu blog e clique em "EDITAR HTML". Copie o código abaixo e cole logo acima da tag ]]></b:skin> do seu Template e salve.

<style type="text/css">
#toc {
border: 0px solid #000000;
background: #ffffff;
padding: 5px;
width:500px;
margin-top:10px;
}
.toc-header-col1, .toc-header-col2, .toc-header-col3 {
background: #ffd595;
color: #000000;
padding-left: 5px;
width:250px;
}
.toc-header-col2 {
width:75px;
}
.toc-header-col3 {
width:125px;
}
.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {
font-size:80%;
text-decoration:none;
}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
font-size:80%;
text-decoration:underline;
}

.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {
padding-left: 5px;
font-size:70%;
}
</style>

Pronto. Agora seus leitores podem optar em ver todos os seus posts, e selecionar vê-los por data ou categoria.
Qualquer dúvida...

---

Copie essa postagem para seu Blog: <img alt="" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4BnA3bS-n3RyXBx62alhTCVg2KNd1dE0Ppggvor0v5Wo6f4kJn1CpBSK_MzcWVCFcAXDhHqox8wW9RLkMUDgc2NVxZNQjIxsbuP8bFa4yz0C0ce-bsh52aw6NPUrzNHNEVVBn4gAxE2jB/s400/hack+posts.jpg" style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 364px; height: 355px;" /><br /><div style="text-align: justify;">Esse tutorial é para criar um Hack (botão, link) de todos os post, ou seja, direcionar o leitor do seu blog para um lugar (logo abaixo do cabeçalho do seu blog) onde todos os artigos do seu blog estão reunidos, com organização de data e titulo da sua publicação em uma bonita e eficiente tabela em <strong>ajax,</strong> quando clicado aparece todos os posts publicados e, clicando novamente desaparece, na mesma janela de navegação (na sua Home).<br /><br /><span style="font-weight: bold; color: rgb(255, 0, 0);">Primeiro passo:</span> Acesse a página de configurações do seu blog e, clique em "EDITAR HTML". Encontre essa linha de código:<br /><span style="color: rgb(153, 0, 0);"></span><span style="color: rgb(153, 0, 0);"><b:section class='main' id='main' maxwidgets='2' showaddelement='yes'></span><br /><br />Ao encontrar esta linha pode ser que ela esteja sem o "<span style="font-weight: bold;">maxwidgets 2</span>", e "<span style="font-weight: bold;">no</span>" onde deveria estar "<span style="font-weight: bold;">yes</span>" em "showaddelement". Então, coloque o '<span style="font-weight: bold;">maxwidgets</span>' com o valor "<span style="font-weight: bold;">2</span>" e coloque o '<span style="font-weight: bold;">showaddelement</span>' com "<span style="font-weight: bold;">yes</span>", exatamente como no código acima. Salve o seu template.<br /></div><br /><div style="text-align: justify;"><img alt="" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGaGKd1rtl3rQs3XeWvifCmFawNL0jmDL3v3xKP0caKHkFM4diDlS_WIPi8N5UQgpqTdt4DOQoSPDUjvrPwI5mh2W8IY9U7WPQOjfMKABWWnYY92Uyqlf6B6Wz5hsLqiPdaGa2q8JadZ6t/s400/adicionar+widget.jpg" style="margin: 0pt 10px 10px 0pt; float: left; cursor: pointer; width: 266px; height: 298px;" /><h5><span style="font-weight: bold;"><span style="color: rgb(255, 0, 0);">Segundo passo</span>:</span>Veja em "<span style="color: rgb(255, 0, 0);">Layout</span>" (Adicionar e organizar elementos da página)... irá perceber que agora você pode adicionar widgets, acima da coluna principal, ou seja onde se encontra os artigos publicados no seu blog, então, clique nesse "Adicionar um Gadget" e nele coloque a seguinte linha html, mas deixe seu widget sem titulo, depois salve:</h5> <span style="color: rgb(153, 0, 0);"><div id="toc"> </div></span><br /><br /></div><img src="http://www.blogger.com/img/widgets/icon_html.gif" /><br /><br /><div style="text-align: justify;"><br /><span style="font-weight: bold; color: rgb(255, 0, 0);"><br /><br />Terceiro passo:</span> Agora vamos adicionar o link ou botão no topo da barra lateral, depois você pode mudar de lugar se quiser, mas por enquanto siga os passos corretamente. Crie um novo widget, agora na sua barra lateral e adicione o seguinte código:<br /></div><span style="color: rgb(153, 0, 0);"><h5><div id="toclink"><a href="javascript:showToc();">Conteudo do Blog</a></div><br /><span style="color: rgb(153, 0, 0);"><script style="text/javascript" src="</span><span style="font-weight: bold; color: rgb(51, 51, 255);"></span><span style="font-weight: normal; color: rgb(51, 51, 255);">http://7ekadw.bay.livefilestore.com/y1pMfum252BrWVA7OAQjAv3uTMZN4g2MDSIQC14gMxyLsLgYzwa2f1sFy8AQbhvr-jBMQ-zWguI2MzZxMHplzxrJA/blogtoc.js</span><span style="color: rgb(153, 0, 0);">"></span><br /><span style="color: rgb(153, 0, 0);"></script></span><br /><span style="color: rgb(153, 0, 0);"><script src="http://NOMEDOSEUBLOG.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script></span><br /></h5></span><span style="font-weight: bold;">Obs:</span> No código que está escrito em letra maiúscula "NOMEDOSEUBLOG" não esqueça de colocar o nome do seu blog!<br /><br />Onde está escrito "conteúdo do blog", você pode alterar ao seu gosto já que este é o link que irá aparecer, pode até colocar uma imagem desde que altere apenas a área escrita "conteúdo do blog".<br /><br />Observe também que na linha <span style="color: rgb(51, 51, 255);">http://7ekadw.bay.livefilestore.com/y1pMfum252BrWVA7OAQjAv3uTMZN4g2MDSIQC14gMxyLsLgYzwa2f1sFy8AQbhvr-jBMQ-zWguI2MzZxMHplzxrJA/blogtoc.js</span>, dá pra perceber que este arquivo foi hospedado por mim, mas se você quiser, hospede em um site/host de sua confiança, no meu caso hospedei no <span style="font-weight: bold;">SkyDrive (Windows Live)</span>. <a href="http://linksduzao.blogspot.com/2008/10/hospedando-arquivos-javascript-no.html" target="blank">Como hospedar Java Script no Skydrive</a>.<br /><br /><a href="http://members.lycos.co.uk/juniormortelenta/blogtoc.js" target="blank">|download do código|</a><br /><br /><br /><span style="color: rgb(255, 0, 0); font-weight: bold;">Quarto passo:</span> Acesse novamente a página de configurações do seu blog e clique em "EDITAR HTML". Copie o código abaixo e cole logo acima da tag <span style="color: rgb(204, 0, 0);">]]></b:skin></span> do seu Template e salve.<br /><br /><style type="text/css"><br />#toc {<br />border: 0px solid #000000;<br />background: #ffffff;<br />padding: 5px;<br />width:500px;<br />margin-top:10px;<br />}<br />.toc-header-col1, .toc-header-col2, .toc-header-col3 {<br />background: #ffd595;<br />color: #000000;<br />padding-left: 5px;<br />width:250px;<br />}<br />.toc-header-col2 {<br />width:75px;<br />}<br />.toc-header-col3 {<br />width:125px;<br />}<br />.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {<br />font-size:80%;<br />text-decoration:none;<br />}<br />.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {<br />font-size:80%;<br />text-decoration:underline;<br />}<br /><br />.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {<br />padding-left: 5px;<br />font-size:70%;<br />}<br /></style><br /><br /><span style="font-weight: bold;">Pronto. </span>Agora seus leitores podem optar em ver todos os seus posts, e selecionar vê-los por data ou categoria.<br />Qualquer dúvida...<br/><a href='http://linksduzao.blogspot.com' style='padding-top: 20px;display: block;text-align: center;'>Postagem original:Linksduzão</a>

Continua aqui...

Resumo
Gostou? então deixe um comentario

---

Bookmark este post:

Widget com as suas postagens + Feed

Colocar esse widget, com o nome das suas categorias de postagens - veja o ícone de feed para seu leitor assinar - , com opção de que elas se expandam (clicando nessa seta ►) e mostrem os títulos das suas postagens, economiza um bom espaço em seu blog, além de ficar bonito.

Para colocar esse widget (veja como fica na imagem acima), siga os passos:

1º passo: Entre em seu Template em "Editar HTML" e localize esta linha de código (sem expandir widgets):<b:section class='sidebar' id='sidebar' preferred='yes'>

2º passo: Copie este código abaixo e cole imediatamente abaixo da linha de código do passo 1. Salve seu Template:

<b:widget id='Label12' locked='false' title='Categorias' type='Label'><b:includable id='main'><script type='text/javascript'>home_page = "http://SEU_BLOG.blogspot.com/";max_rc_posts = 10;</script><script src='http://1nnumq.blu.livefilestore.com/y1pqbM0XpKkwCu226VeeIp_Ff7d5oxgeeKvy0xvxMGcxmFVTGMO0eMtppFYTBVgr8T8UdWn9eN2b1o8YvIEsKsByw/show_prev_item_in_label_v10.js' type='text/javascript'/><b:if cond='data:title'><h2><data:title/></h2></b:if><div class='widget-content'><ul><b:loop values='data:labels' var='label'><li><a expr:href='data:post.url + "/feeds/posts/default/-/" + data:label.name'><img src='http://3.bp.blogspot.com/_8PJ-pgoBhWQ/SP9USfdc9aI/AAAAAAAAEgk/LKHLLAOgJ68/s320-R/16-rss-square.png'/></a><b:if cond='data:blog.url == data:label.url'><span expr:dir='data:blog.languageDirection'><data:label.name/> <span dir='ltr'>(<data:label.count/>)</span> <a expr:onclick='"showPostLabel(\"" + data:label.name + "\",event)"' href='javascript:void(0)'>►</a></span><b:else/><a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a><span dir='ltr'>(<data:label.count/>)</span> <a expr:onclick='"showPostLabel(\"" + data:label.name + "\",event)"' href='javascript:void(0)'>►</a></b:if></li></b:loop></ul></div></b:includable></b:widget>

Atenção: Mude nesse código onde diz "SEU_BLOG" pelo nome do seu blog.

Pronto.

Adaptado daqui

---

Copie essa postagem para seu Blog: <div style="text-align: center;"><img alt="" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio4ZCx74HbwC3Uvd592BVxOyrm4Pt7zjL22nPcGIVZjN8855yFIswdghM0tvtRBfxRsbsAa6BwnBevO1wqJgdYq0YyLJxrth3G2YZSfckY5-9H4ErRkqpF5FGeCDeIyetmmeBvt24ekPEV/" /><br /></div><br /><div style="text-align: justify;">Colocar esse widget, com o nome das suas categorias de postagens - veja o ícone de feed para seu leitor assinar - , com opção de que elas se expandam (clicando nessa seta ►) e mostrem os títulos das suas postagens, economiza um bom espaço em seu blog, além de ficar bonito.<br /><br />Para colocar esse widget (veja como fica na imagem acima), siga os passos:<br /></div><br /><span style="font-weight: bold;"><br />1º passo:</span> Entre em seu Template em "Editar HTML" e localize esta linha de código (sem expandir widgets):<span style="color:blue;"><b:section class='sidebar' id='sidebar' preferred='yes'></span><br /><br /><span style="font-weight: bold;">2º passo:</span> Copie este código abaixo e cole imediatamente abaixo da linha de código do passo 1. Salve seu Template:<br /><br /><textarea cols="60" name="textarea" onfocus="this.select()" onmouseover="this.focus()" rows="5"><b:widget id='Label12' locked='false' title='Categorias' type='Label'><b:includable id='main'><script type='text/javascript'>home_page = "http://SEU_BLOG.blogspot.com/";max_rc_posts = 10;</script><script src='http://1nnumq.blu.livefilestore.com/y1pqbM0XpKkwCu226VeeIp_Ff7d5oxgeeKvy0xvxMGcxmFVTGMO0eMtppFYTBVgr8T8UdWn9eN2b1o8YvIEsKsByw/show_prev_item_in_label_v10.js' type='text/javascript'/><b:if cond='data:title'><h2><data:title/></h2></b:if><div class='widget-content'><ul><b:loop values='data:labels' var='label'><li><a expr:href='data:post.url + "/feeds/posts/default/-/" + data:label.name'><img src='http://3.bp.blogspot.com/_8PJ-pgoBhWQ/SP9USfdc9aI/AAAAAAAAEgk/LKHLLAOgJ68/s320-R/16-rss-square.png'/></a><b:if cond='data:blog.url == data:label.url'><span expr:dir='data:blog.languageDirection'><data:label.name/> <span dir='ltr'>(<data:label.count/>)</span> <a expr:onclick='"showPostLabel(\"" + data:label.name + "\",event)"' href='javascript:void(0)'>►</a></span><b:else/><a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a><span dir='ltr'>(<data:label.count/>)</span> <a expr:onclick='"showPostLabel(\"" + data:label.name + "\",event)"' href='javascript:void(0)'>►</a></b:if></li></b:loop></ul></div></b:includable></b:widget>

Atenção: Mude nesse código onde diz "SEU_BLOG" pelo nome do seu blog.

Pronto.

Adaptado daqui
Postagem original:Linksduzão

Continua aqui...

Resumo
Gostou? então deixe um comentario

---

Bookmark este post:

Menu CSS Dock - CSS Dock Menu

Quer colocar em seu blog um Dock menu Css com aparência das barras de menu do Mac? Demonstração DOCK Menu.
Nesta demonstração você vê dois tipos de menu.

O Primeiro deles é denominado: Top Dock e o segundo abaixo dele é chamado de: Bottom Dock.
Saiba como inserir em seu blog.

Primeiro passo : Faça login em seu blog, depois vá em 'Layout' e 'editar HTML'.
Segundo passo : Encontre esta tag: ]]></b:skin> no seu template
Terceiro passo: Insira acima desta tag o código abaixo:

<script type="text/javascript" src="http://bloganol3.googlepages.com/jquery.js"></script><script type="text/javascript" src="http://bloganol3.googlepages.com/interface.js"></script><link href="http://bloganol3.googlepages.com/style.css" rel="stylesheet" type="text/css" /><!--[if lt IE 7]><style type="text/css">.dock img { behavior: url(http://bloganol3.googlepages.com/iepngfix.htc) }</style><![endif]–>

Quarto passo: Agora você deverá inserir abaixo da tag: ]]></b:skin> o seguinte código:

<script type="text/javascript">$(document).ready(function(){$(’#dock2′).Fisheye({maxWidth: 60,items: ‘a’,itemsText: ’span’,container: ‘.dock-container2′,itemWidth: 40,proximity: 80,alignment : ‘left’,valign: ‘bottom’,halign : ‘center’})});</script>

O Dock menu pode ser inserido em elementos de página, em sua Sidebar.
Escolha pelos tipos de Dock, ( Top ou Bottom).

O código abaixo é para o Top Dock ( depois configure como quiser).

<div class="dock-container"><a class="dock-item" href="#"><img src="http://www.ndesign-studio.com/demo/css-dock-menu/images/home.png" alt="home" /><span>Home</span></a> <a class="dock-item" href="#"><img src="http://www.ndesign-studio.com/demo/css-dock-menu/images/email.png" alt="contact" /><span>Contact</span></a> <a class="dock-item" href="#"><img src="http://www.ndesign-studio.com/demo/css-dock-menu/images/portfolio.png" alt="portfolio" /><span>Portfolio</span></a> <a class="dock-item" href="#"><img src="http://www.ndesign-studio.com/demo/css-dock-menu/images/music.png" alt="music" /><span>Music</span></a> <a class="dock-item" href="#"><img src="http://www.ndesign-studio.com/demo/css-dock-menu/images/video.png" alt="video" /><span>Video</span></a> <a class="dock-item" href="#"><img src="http://www.ndesign-studio.com/demo/css-dock-menu/images/history.png" alt="history" /><span>History</span></a> <a class="dock-item" href="#"><img src="http://www.ndesign-studio.com/demo/css-dock-menu/images/calendar.png" alt="calendar" /><span>Calendar</span></a> <a class="dock-item" href="#"><img src="http://www.ndesign-studio.com/demo/css-dock-menu/images/link.png" alt="rss" /><span>Links</span></a><a class="dock-item" href="#"><img src="http://www.ndesign-studio.com/demo/css-dock-menu/images/rss.png" alt="rss" /><span>RSS</span></a> <a class="dock-item" href="#"><img src="http://www.ndesign-studio.com/demo/css-dock-menu/images/rss2.png" alt="rss" /><span>RSS2</span></a></div>

O código abaixo é para o Bottom Dock

<div class="dock-container2"><a class="dock-item2" href="#"><span>Home</span><img src="http://www.ndesign-studio.com/demo/css-dock-menu/images/home.png" alt="home" /></a> <a class="dock-item2" href="#"><span>Contact</span><img src="http://www.ndesign-studio.com/demo/css-dock-menu/images/email.png" alt="contact" /></a> <a class="dock-item2" href="#"><span>Portfolio</span><img src="http://www.ndesign-studio.com/demo/css-dock-menu/images/portfolio.png" alt="portfolio" /></a> <a class="dock-item2" href="#"><span>Music</span><img src="http://www.ndesign-studio.com/demo/css-dock-menu/images/music.png" alt="music" /></a> <a class="dock-item2" href="#"><span>Video</span><img src="http://www.ndesign-studio.com/demo/css-dock-menu/images/video.png" alt="video" /></a> <a class="dock-item2" href="#"><span>History</span><img src="http://www.ndesign-studio.com/demo/css-dock-menu/images/history.png" alt="history" /></a> <a class="dock-item2" href="#"><span>Calendar</span><img src="http://www.ndesign-studio.com/demo/css-dock-menu/images/calendar.png" alt="calendar" /></a> <a class="dock-item2" href="#"><span>Links</span><img src="http://www.ndesign-studio.com/demo/css-dock-menu/images/link.png" alt="links" /></a> <a class="dock-item2" href="#"><span>RSS</span><img src="http://www.ndesign-studio.com/demo/css-dock-menu/images/rss.png" alt="rss" /></a> <a class="dock-item2" href="#"><span>RSS2</span><img src="http://www.ndesign-studio.com/demo/css-dock-menu/images/rss2.png" alt="rss" /></a> </div>

Pronto.

---

Copie essa postagem para seu Blog: Quer colocar em seu blog um <b>Dock menu Css</b> com aparência das barras de menu do <b>Mac</b>? <a href="http://www.ndesign-studio.com/demo/css-dock-menu/css-dock.html" target="_blank">Demonstração DOCK Menu</a>.<br />Nesta demonstração você vê dois tipos de menu.<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhltFBB-4diXHepsleXm2umXoyN57lsHgGH2LoagnXPa0J2N8bIP5kyMDL1sqM0eRpfMiBRzwJp8agM8Vm2hPN0msr0YztfDbApH-_NtzQ-nOEdcgQmXNR71bFryk9F_E4VKzQVllBdre2/s1600-h/Menu+dock.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKa85RD9Brnwo5dJkheIqm5TpKa-KgutJ8-baIifwyS2mD4e3MRn_88u-np9ezlRNjEWfXZ0IXLeCnTxAnMCPpbFPkGVPdA0S4nRMcJYg5botBRuzCJlPlaALJDFuH1P_O8dI40HFiamN9/s400-r/Menu+dock.jpg" /></a></div>O Primeiro deles é denominado: Top Dock e o segundo abaixo dele é chamado de: Bottom Dock.<br />Saiba como inserir em seu blog.<br /><br /><b>Primeiro passo</b> : Faça login em seu blog, depois vá em 'Layout' e 'editar HTML'.<br /><b>Segundo passo</b> : Encontre esta tag: ]]></b:skin> no seu template<br /><b>Terceiro passo</b>: Insira acima desta tag o código abaixo:<br /><br /><textarea cols="60" name="textarea" onfocus="this.select()" onmouseover="this.focus()" rows="5"><script type="text/javascript" src="http://bloganol3.googlepages.com/jquery.js"></script><script type="text/javascript" src="http://bloganol3.googlepages.com/interface.js"></script><link href="http://bloganol3.googlepages.com/style.css" rel="stylesheet" type="text/css" /><!--[if lt IE 7]><style type="text/css">.dock img { behavior: url(http://bloganol3.googlepages.com/iepngfix.htc) }</style><![endif]–>

Quarto passo: Agora você deverá inserir abaixo da tag: ]]></b:skin> o seguinte código:

<script type="text/javascript">$(document).ready(function(){$(’#dock2′).Fisheye({maxWidth: 60,items: ‘a’,itemsText: ’span’,container: ‘.dock-container2′,itemWidth: 40,proximity: 80,alignment : ‘left’,valign: ‘bottom’,halign : ‘center’})});</script>

O Dock menu pode ser inserido em elementos de página, em sua Sidebar.
Escolha pelos tipos de Dock, ( Top ou Bottom).

O código abaixo é para o Top Dock ( depois configure como quiser).

<div class="dock-container"><a class="dock-item" href="#"><img src="http://www.ndesign-studio.com/demo/css-dock-menu/images/home.png" alt="home" /><span>Home</span></a> <a class="dock-item" href="#"><img src="http://www.ndesign-studio.com/demo/css-dock-menu/images/email.png" alt="contact" /><span>Contact</span></a> <a class="dock-item" href="#"><img src="http://www.ndesign-studio.com/demo/css-dock-menu/images/portfolio.png" alt="portfolio" /><span>Portfolio</span></a> <a class="dock-item" href="#"><img src="http://www.ndesign-studio.com/demo/css-dock-menu/images/music.png" alt="music" /><span>Music</span></a> <a class="dock-item" href="#"><img src="http://www.ndesign-studio.com/demo/css-dock-menu/images/video.png" alt="video" /><span>Video</span></a> <a class="dock-item" href="#"><img src="http://www.ndesign-studio.com/demo/css-dock-menu/images/history.png" alt="history" /><span>History</span></a> <a class="dock-item" href="#"><img src="http://www.ndesign-studio.com/demo/css-dock-menu/images/calendar.png" alt="calendar" /><span>Calendar</span></a> <a class="dock-item" href="#"><img src="http://www.ndesign-studio.com/demo/css-dock-menu/images/link.png" alt="rss" /><span>Links</span></a><a class="dock-item" href="#"><img src="http://www.ndesign-studio.com/demo/css-dock-menu/images/rss.png" alt="rss" /><span>RSS</span></a> <a class="dock-item" href="#"><img src="http://www.ndesign-studio.com/demo/css-dock-menu/images/rss2.png" alt="rss" /><span>RSS2</span></a></div>

O código abaixo é para o Bottom Dock

<div class="dock-container2"><a class="dock-item2" href="#"><span>Home</span><img src="http://www.ndesign-studio.com/demo/css-dock-menu/images/home.png" alt="home" /></a> <a class="dock-item2" href="#"><span>Contact</span><img src="http://www.ndesign-studio.com/demo/css-dock-menu/images/email.png" alt="contact" /></a> <a class="dock-item2" href="#"><span>Portfolio</span><img src="http://www.ndesign-studio.com/demo/css-dock-menu/images/portfolio.png" alt="portfolio" /></a> <a class="dock-item2" href="#"><span>Music</span><img src="http://www.ndesign-studio.com/demo/css-dock-menu/images/music.png" alt="music" /></a> <a class="dock-item2" href="#"><span>Video</span><img src="http://www.ndesign-studio.com/demo/css-dock-menu/images/video.png" alt="video" /></a> <a class="dock-item2" href="#"><span>History</span><img src="http://www.ndesign-studio.com/demo/css-dock-menu/images/history.png" alt="history" /></a> <a class="dock-item2" href="#"><span>Calendar</span><img src="http://www.ndesign-studio.com/demo/css-dock-menu/images/calendar.png" alt="calendar" /></a> <a class="dock-item2" href="#"><span>Links</span><img src="http://www.ndesign-studio.com/demo/css-dock-menu/images/link.png" alt="links" /></a> <a class="dock-item2" href="#"><span>RSS</span><img src="http://www.ndesign-studio.com/demo/css-dock-menu/images/rss.png" alt="rss" /></a> <a class="dock-item2" href="#"><span>RSS2</span><img src="http://www.ndesign-studio.com/demo/css-dock-menu/images/rss2.png" alt="rss" /></a> </div>

Pronto.
Postagem original:Linksduzão

Continua aqui...

Resumo
Gostou? então deixe um comentario

---

Bookmark este post:

Menu Dinâmico

Click no menu e veja o efeito.

LINKSDUZAO

• Horizontal CSS Menus
• Vertical CSS Menus
• Image CSS
• Form CSS
• DIVs and containers
• Links & Buttons
• Other
• Browse All

TUTORIAIS

• CSS Gallery
• Tutos P/ Blogger
  
  
  
  • Como fazer uma galeria de imagens em CSS
  • Green Color
  • Orange Color
  • Red Color
  • Brown Color
• HOME
• HOME Exemplos
• HOME
• Linksduzão

LINKSDUZAO

• TESTE
• JavaScript tutorials
• JavaScript Reference
• DOM Reference
• DHTML & CSS

FeedBack

Arquivos usados nesse tutorial, hospede onde quiser.

1. ddaccordion.js
2. jquery-1.2.2.pack.js

1º passo: Copie e cole esse código logo após a tag <HEAD> do seu blog. Salve. <script type="text/javascript" src="http://rosduz.googlepages.com/jquery-1.2.2.3.pack.js"></script> <script type="text/javascript" src="http://rosduz.googlepages.com/jsddaccordion.js"> </script> <script type="text/javascript"> ddaccordion.init({ //top level headers initialization headerclass: "expandable", //Shared CSS class name of headers group that are expandable contentclass: "categoryitems", //Shared CSS class name of contents group revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click" or "mouseover collapseprev: true, //Collapse previous content (so only one open at any time)? true/false defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc]. [] denotes no content onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed) animatedefault: false, //Should contents open by default be animated into view? persiststate: true, //persist state of opened contents within browser session? toggleclass: ["", "openheader"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"] togglehtml: ["prefix", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs) animatespeed: "normal", //speed of animation: "fast", "normal", or "slow" oninit:function(headers, expandedindices){ //custom code to run when headers have initalized //do nothing }, onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed //do nothing } }) ddaccordion.init({ //2nd level headers initialization headerclass: "subexpandable", //Shared CSS class name of sub headers group that are expandable contentclass: "subcategoryitems", //Shared CSS class name of sub contents group revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click" or "mouseover collapseprev: true, //Collapse previous content (so only one open at any time)? true/false defaultexpanded: [], //index of content(s) open by default [index1, index2, etc]. [] denotes no content onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed) animatedefault: false, //Should contents open by default be animated into view? persiststate: true, //persist state of opened contents within browser session? toggleclass: ["opensubheader", "closedsubheader"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"] togglehtml: ["none", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs) animatespeed: "normal", //speed of animation: "fast", "normal", or "slow" oninit:function(headers, expandedindices){ //custom code to run when headers have initalized //do nothing }, onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed //do nothing } }) </script> <style type="text/css"> .arrowlistmenu{ width: 180px; /*width of accordion menu*/ } .arrowlistmenu .menuheader{ /*CSS class for menu headers in general (expanding or not!)*/ font: bold 14px Arial; color: white; background: black url(http://img297.imageshack.us/img297/6213/titlebaruo2.png) repeat-x center left; margin-bottom: 10px; /*bottom spacing between header and rest of content*/ text-transform: uppercase; padding: 4px 0 4px 10px; /*header text is indented 10px*/ cursor: hand; cursor: pointer; } .arrowlistmenu .openheader{ /*CSS class to apply to expandable header when it's expanded*/ background-image: url(http://img297.imageshack.us/img297/6213/titlebaruo2.png); } .arrowlistmenu ul{ /*CSS for UL of each sub menu*/ list-style-type: none; margin: 0; padding: 0; margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/ } .arrowlistmenu ul li{ padding-bottom: 2px; /*bottom spacing between menu items*/ } .arrowlistmenu ul li .opensubheader{ /*Open state CSS for sub menu header*/ background: lightblue !important; } .arrowlistmenu ul li .closedsubheader{ /*Closed state CSS for sub menu header*/ background: lightgreen !important; } .arrowlistmenu ul li a{ color: #A70303; background: url(http://img353.imageshack.us/img353/2287/arrowbulletta7.png) no-repeat center left; /*custom bullet list image*/ display: block; padding: 2px 0; padding-left: 19px; /*link text is indented 19px*/ text-decoration: none; font-weight: bold; border-bottom: 1px solid #dadada; font-size: 90%; } .arrowlistmenu ul li a:visited{ color: #A70303; } .arrowlistmenu ul li a:hover{ /*hover state CSS*/ background-color: #F3F3F3; } .arrowlistmenu ul li a.subexpandable:hover{ /*hover state CSS for sub menu header*/ background: lightblue; } </style>  

2º passo:Copie e cole esse código onde você quer que apareça seu menu(sidebar) <div class="arrowlistmenu"> <h3 class="menuheader expandable">LINKSDUZAO</h3> <ul class="categoryitems"> <li><a href="http://www.linksduzao.blogspot.com/">Horizontal CSS Menus</a></li> <li><a href="http://www.linksduzao.blogspot.com/">Vertical CSS Menus</a></li> <li><a href="http://www.linksduzao.blogspot.com/">Image CSS</a></li> <li><a href="http://www.linksduzao.blogspot.com/">Form CSS</a></li> <li><a href="http://www.linksduzao.blogspot.com/">DIVs and containers</a></li> <li><a href="http://www.linksduzao.blogspot.com/">Links &amp; Buttons</a></li> <li><a href="http://www.linksduzao.blogspot.com/">Other</a></li> <li><a href="http://www.linksduzao.blogspot.com/">Browse All</a></li> </ul> <h3 class="menuheader expandable">TUTORIAIS</h3> <ul class="categoryitems"> <li><a href="http://www.linksduzao.blogspot.com/">CSS Gallery</a></li> <li><a href="http://www.linksduzao.blogspot.com/" class="subexpandable">Tutos P/ Blogger</a> <ul style="margin-left: 15px;" class="subcategoryitems"> <li><a href="http://www.linksduzao.blogspot.com/">Como fazer uma galeria de imagens em CSS</a></li> <li><a href="http://www.linksduzao.blogspot.com/">Green Color</a></li> <li><a href="http://www.linksduzao.blogspot.com/">Orange Color</a></li> <li><a href="http://www.linksduzao.blogspot.com/">Red Color</a></li> <li><a href="http://www.linksduzao.blogspot.com/">Brown Color</a></li> </ul> </li> <li><a href="http://www.linksduzao.blogspot.com/">HOME</a></li> <li><a href="http://www.linksduzao.blogspot.com/">HOME Exemplos</a></li> <li><a href="http://www.linksduzao.blogspot.com/">HOME</a></li> <li><a href="http://www.linksduzao.blogspot.com/">Linksduzão</a></li> </ul> <h3 class="menuheader expandable">JavaScript Kit</h3> <ul class="categoryitems"> <li><a href="http://www.linksduzao.blogspot.com/">TESTE</a></li> <li><a href="http://www.linksduzao.blogspot.com/">JavaScript tutorials</a></li> <li><a href="http://www.linksduzao.blogspot.com/">JavaScript Reference</a></li> <li><a href="http://www.linksduzao.blogspot.com/">DOM Reference</a></li> <li><a href="http://www.linksduzao.blogspot.com/">DHTML &amp; CSS</a></li> </ul> <h3 style="cursor: default;" class="menuheader">FeedBack</h3> <div></div></div> </textarea>

Pronto.

---

Copie essa postagem para seu Blog: <div style="color: rgb(255, 0, 0);"> <i>Click no menu e veja o efeito. </i> </div> <div class="arrowlistmenu"> <h3 class="menuheader expandable"> LINKSDUZAO</h3> <ul class="categoryitems"> <li><a href="http://www.linksduzao.blogspot.com/">Horizontal CSS Menus</a></li> <li><a href="http://www.linksduzao.blogspot.com/">Vertical CSS Menus</a></li> <li><a href="http://www.linksduzao.blogspot.com/">Image CSS</a></li> <li><a href="http://www.linksduzao.blogspot.com/">Form CSS</a></li> <li><a href="http://www.linksduzao.blogspot.com/">DIVs and containers</a></li> <li><a href="http://www.linksduzao.blogspot.com/">Links & Buttons</a></li> <li><a href="http://www.linksduzao.blogspot.com/">Other</a></li> <li><a href="http://www.linksduzao.blogspot.com/">Browse All</a></li> </ul> <h3 class="menuheader expandable"> TUTORIAIS</h3> <ul class="categoryitems"> <li><a href="http://www.linksduzao.blogspot.com/">CSS Gallery</a></li> <li><a class="subexpandable" href="http://www.linksduzao.blogspot.com/">Tutos P/ Blogger</a> <br /> <br /> <br /> <ul class="subcategoryitems" style="margin-left: 15px;"> <li><a href="http://www.linksduzao.blogspot.com/">Como fazer uma galeria de imagens em CSS</a></li> <li><a href="http://www.linksduzao.blogspot.com/">Green Color</a></li> <li><a href="http://www.linksduzao.blogspot.com/">Orange Color</a></li> <li><a href="http://www.linksduzao.blogspot.com/">Red Color</a></li> <li><a href="http://www.linksduzao.blogspot.com/">Brown Color</a></li> </ul> </li> <li><a href="http://www.linksduzao.blogspot.com/">HOME</a></li> <li><a href="http://www.linksduzao.blogspot.com/">HOME Exemplos</a></li> <li><a href="http://www.linksduzao.blogspot.com/">HOME</a></li> <li><a href="http://www.linksduzao.blogspot.com/">Linksduzão</a></li> </ul> <h3 class="menuheader expandable"> LINKSDUZAO</h3> <ul class="categoryitems"> <li><a href="http://www.linksduzao.blogspot.com/">TESTE</a></li> <li><a href="http://www.linksduzao.blogspot.com/">JavaScript tutorials</a></li> <li><a href="http://www.linksduzao.blogspot.com/">JavaScript Reference</a></li> <li><a href="http://www.linksduzao.blogspot.com/">DOM Reference</a></li> <li><a href="http://www.linksduzao.blogspot.com/">DHTML & CSS</a></li> </ul> <h3 class="menuheader" style="cursor: default;"> FeedBack</h3> <div> </div> </div> <i>Arquivos usados nesse tutorial, hospede onde quiser.</i> <br /> <ol> <li><a href="http://www.dynamicdrive.com/dynamicindex17/ddaccordion.js">ddaccordion.js</a></li> <li><a href="http://www.dynamicdrive.com/jquery/jquery-1.2.2.pack.js">jquery-1.2.2.pack.js</a></li> </ol> <br /> <b>1º passo:</b> Copie e cole esse código logo após a tag <HEAD> do seu blog. Salve. <textarea cols="60" name="textarea" onfocus="this.select()" onmouseover="this.focus()" rows="5"><script type="text/javascript" src="http://rosduz.googlepages.com/jquery-1.2.2.3.pack.js"></script> <script type="text/javascript" src="http://rosduz.googlepages.com/jsddaccordion.js"> </script> <script type="text/javascript"> ddaccordion.init({ //top level headers initialization headerclass: "expandable", //Shared CSS class name of headers group that are expandable contentclass: "categoryitems", //Shared CSS class name of contents group revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click" or "mouseover collapseprev: true, //Collapse previous content (so only one open at any time)? true/false defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc]. [] denotes no content onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed) animatedefault: false, //Should contents open by default be animated into view? persiststate: true, //persist state of opened contents within browser session? toggleclass: ["", "openheader"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"] togglehtml: ["prefix", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs) animatespeed: "normal", //speed of animation: "fast", "normal", or "slow" oninit:function(headers, expandedindices){ //custom code to run when headers have initalized //do nothing }, onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed //do nothing } }) ddaccordion.init({ //2nd level headers initialization headerclass: "subexpandable", //Shared CSS class name of sub headers group that are expandable contentclass: "subcategoryitems", //Shared CSS class name of sub contents group revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click" or "mouseover collapseprev: true, //Collapse previous content (so only one open at any time)? true/false defaultexpanded: [], //index of content(s) open by default [index1, index2, etc]. [] denotes no content onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed) animatedefault: false, //Should contents open by default be animated into view? persiststate: true, //persist state of opened contents within browser session? toggleclass: ["opensubheader", "closedsubheader"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"] togglehtml: ["none", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs) animatespeed: "normal", //speed of animation: "fast", "normal", or "slow" oninit:function(headers, expandedindices){ //custom code to run when headers have initalized //do nothing }, onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed //do nothing } }) </script> <style type="text/css"> .arrowlistmenu{ width: 180px; /*width of accordion menu*/ } .arrowlistmenu .menuheader{ /*CSS class for menu headers in general (expanding or not!)*/ font: bold 14px Arial; color: white; background: black url(http://img297.imageshack.us/img297/6213/titlebaruo2.png) repeat-x center left; margin-bottom: 10px; /*bottom spacing between header and rest of content*/ text-transform: uppercase; padding: 4px 0 4px 10px; /*header text is indented 10px*/ cursor: hand; cursor: pointer; } .arrowlistmenu .openheader{ /*CSS class to apply to expandable header when it's expanded*/ background-image: url(http://img297.imageshack.us/img297/6213/titlebaruo2.png); } .arrowlistmenu ul{ /*CSS for UL of each sub menu*/ list-style-type: none; margin: 0; padding: 0; margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/ } .arrowlistmenu ul li{ padding-bottom: 2px; /*bottom spacing between menu items*/ } .arrowlistmenu ul li .opensubheader{ /*Open state CSS for sub menu header*/ background: lightblue !important; } .arrowlistmenu ul li .closedsubheader{ /*Closed state CSS for sub menu header*/ background: lightgreen !important; } .arrowlistmenu ul li a{ color: #A70303; background: url(http://img353.imageshack.us/img353/2287/arrowbulletta7.png) no-repeat center left; /*custom bullet list image*/ display: block; padding: 2px 0; padding-left: 19px; /*link text is indented 19px*/ text-decoration: none; font-weight: bold; border-bottom: 1px solid #dadada; font-size: 90%; } .arrowlistmenu ul li a:visited{ color: #A70303; } .arrowlistmenu ul li a:hover{ /*hover state CSS*/ background-color: #F3F3F3; } .arrowlistmenu ul li a.subexpandable:hover{ /*hover state CSS for sub menu header*/ background: lightblue; } </style>  

2º passo:Copie e cole esse código onde você quer que apareça seu menu(sidebar) <div class="arrowlistmenu"> <h3 class="menuheader expandable">LINKSDUZAO</h3> <ul class="categoryitems"> <li><a href="http://www.linksduzao.blogspot.com/">Horizontal CSS Menus</a></li> <li><a href="http://www.linksduzao.blogspot.com/">Vertical CSS Menus</a></li> <li><a href="http://www.linksduzao.blogspot.com/">Image CSS</a></li> <li><a href="http://www.linksduzao.blogspot.com/">Form CSS</a></li> <li><a href="http://www.linksduzao.blogspot.com/">DIVs and containers</a></li> <li><a href="http://www.linksduzao.blogspot.com/">Links &amp; Buttons</a></li> <li><a href="http://www.linksduzao.blogspot.com/">Other</a></li> <li><a href="http://www.linksduzao.blogspot.com/">Browse All</a></li> </ul> <h3 class="menuheader expandable">TUTORIAIS</h3> <ul class="categoryitems"> <li><a href="http://www.linksduzao.blogspot.com/">CSS Gallery</a></li> <li><a href="http://www.linksduzao.blogspot.com/" class="subexpandable">Tutos P/ Blogger</a> <ul style="margin-left: 15px;" class="subcategoryitems"> <li><a href="http://www.linksduzao.blogspot.com/">Como fazer uma galeria de imagens em CSS</a></li> <li><a href="http://www.linksduzao.blogspot.com/">Green Color</a></li> <li><a href="http://www.linksduzao.blogspot.com/">Orange Color</a></li> <li><a href="http://www.linksduzao.blogspot.com/">Red Color</a></li> <li><a href="http://www.linksduzao.blogspot.com/">Brown Color</a></li> </ul> </li> <li><a href="http://www.linksduzao.blogspot.com/">HOME</a></li> <li><a href="http://www.linksduzao.blogspot.com/">HOME Exemplos</a></li> <li><a href="http://www.linksduzao.blogspot.com/">HOME</a></li> <li><a href="http://www.linksduzao.blogspot.com/">Linksduzão</a></li> </ul> <h3 class="menuheader expandable">JavaScript Kit</h3> <ul class="categoryitems"> <li><a href="http://www.linksduzao.blogspot.com/">TESTE</a></li> <li><a href="http://www.linksduzao.blogspot.com/">JavaScript tutorials</a></li> <li><a href="http://www.linksduzao.blogspot.com/">JavaScript Reference</a></li> <li><a href="http://www.linksduzao.blogspot.com/">DOM Reference</a></li> <li><a href="http://www.linksduzao.blogspot.com/">DHTML &amp; CSS</a></li> </ul> <h3 style="cursor: default;" class="menuheader">FeedBack</h3> <div></div></div> </textarea>

Pronto.
Postagem original:Linksduzão

Continua aqui...

Resumo
Gostou? então deixe um comentario

---

Bookmark este post:

Menu em Abas com Conteúdo Dinâmico

Como escrevi em outro post (veja exemplo), aqui está o tutorial para criar o menu para o seu blog.


1º passo:Copie e cole esse código abaixo logo após a tag <HEAD> do seu blog. Salve.

<script type="text/javascript" src="http://rosduz.googlepages.com/jquery-1.2.2.pack.js"></script>

<script type="text/javascript" src="http://rosduz.googlepages.com/ddaccordion.js">

</script>

<style type="text/css">

.mypets{ /*header of 1st demo*/
cursor: hand;
cursor: pointer;
padding: 2px 5px;
border: 1px solid gray;
background: #E1E1E1;
}

.openpet{ /*class added to contents of 1st demo when they are open*/
background: yellow;
}

.technology{ /*header of 2nd demo*/
cursor: hand;
cursor: pointer;
font: bold 14px Verdana;
margin: 10px 0;
}

.openlanguage{ /*class added to contents of 2nd demo when they are open*/
color: green;
}

.closedlanguage{ /*class added to contents of 2nd demo when they are closed*/
color: red;
}

</style>

<script type="text/javascript">

//Initialize first demo:
ddaccordion.init({
headerclass: "mypets", //Shared CSS class name of headers group
contentclass: "thepet", //Shared CSS class name of contents group
revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click" or "mouseover"
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc]. [] denotes no content.
onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
persiststate: true, //persist state of opened contents within browser session?
toggleclass: ["", "openpet"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["none", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: "fast", //speed of animation: "fast", "normal", or "slow"
oninit:function(expandedindices){ //custom code to run when headers have initalized
//do nothing
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing
}
})

//Initialize 2nd demo:
ddaccordion.init({
headerclass: "technology", //Shared CSS class name of headers group
contentclass: "thelanguage", //Shared CSS class name of contents group
revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click" or "mouseover"
collapseprev: false, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [], //index of content(s) open by default [index1, index2, etc]. [] denotes no content.
onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
persiststate: false, //persist state of opened contents within browser session?
toggleclass: ["closedlanguage", "openlanguage"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["prefix", "<img src='http://i13.tinypic.com/80mxwlz.gif' /> ", "<img src='http://i18.tinypic.com/6tpc4td.gif' /> "], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: "fast", //speed of animation: "fast", "normal", or "slow"
oninit:function(expandedindices){ //custom code to run when headers have initalized
//do nothing
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing
}
})

</script>

2º passo:Copie e cole esse código onde você quer que apareça o menu no blog. Na lateral (sidebar) por exemplo, e pronto.


<a href="#" onClick="ddaccordion.expandone('mypets', 0); return false">Expand 1st header</a> | <a href="#" onClick="ddaccordion.collapseone('mypets', 0); return false">Collapse 1st header</a> | <a href="#" onClick="ddaccordion.toggleone('mypets', 1); return false">Toggle 2nd header</a>

<h3 class="mypets">Dogs</h3>
<div class="thepet">
<img src="http://i10.tinypic.com/7xlrga1.jpg" />
TEXTO AQUI OU UM LINK PRA IMAGEM COMO NESSE EXEMPLO...The dog is a domestic subspecies of the wolf...
</div>

<h3 class="mypets">Cats</h3>
<div class="thepet">
TEXTO AQUI
</div>

<h3 class="mypets">Rabbits</h3>
<div class="thepet">
TEXTO AQUI
</div>
<p><a href="currentpage.htm?mypets=2">Reload page and select the 3rd content using a URL parameter</a></p>

---

Obs:Troque os nomes das abas como quiser, e insira o conteúdo que desejar em "AQUI TEXTO". Qualquer dúvida entre em contato ou deixe um comentário.

---

Copie essa postagem para seu Blog: Como escrevi em outro post (<a href="http://linksduzao.blogspot.com/2008/07/example-1-expand-1st-header-collapse_02.html" style="color: rgb(255, 0, 0);">veja exemplo</a>), aqui está o tutorial para criar o menu para o seu blog.<br /><br /><br /><span style="color: rgb(255, 0, 0);">1º passo:</span>Copie e cole esse código abaixo logo após a tag <span style="color: rgb(255, 0, 0);"><HEAD></span> do seu blog. Salve.<br /><br /><script type="text/javascript" src="http://rosduz.googlepages.com/jquery-1.2.2.pack.js"></script><br /><br /><script type="text/javascript" src="http://rosduz.googlepages.com/ddaccordion.js"><br /><br /></script><br /><br /><style type="text/css"><br /><br />.mypets{ /*header of 1st demo*/<br />cursor: hand;<br />cursor: pointer;<br />padding: 2px 5px;<br />border: 1px solid gray;<br />background: #E1E1E1;<br />}<br /><br />.openpet{ /*class added to contents of 1st demo when they are open*/<br />background: yellow;<br />}<br /><br />.technology{ /*header of 2nd demo*/<br />cursor: hand;<br />cursor: pointer;<br />font: bold 14px Verdana;<br />margin: 10px 0;<br />}<br /><br />.openlanguage{ /*class added to contents of 2nd demo when they are open*/<br />color: green;<br />}<br /><br />.closedlanguage{ /*class added to contents of 2nd demo when they are closed*/<br />color: red;<br />}<br /><br /></style><br /><br /><script type="text/javascript"><br /><br />//Initialize first demo:<br />ddaccordion.init({<br />headerclass: "mypets", //Shared CSS class name of headers group<br />contentclass: "thepet", //Shared CSS class name of contents group<br />revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click" or "mouseover"<br />collapseprev: true, //Collapse previous content (so only one open at any time)? true/false<br />defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc]. [] denotes no content.<br />onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)<br />animatedefault: false, //Should contents open by default be animated into view?<br />persiststate: true, //persist state of opened contents within browser session?<br />toggleclass: ["", "openpet"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]<br />togglehtml: ["none", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)<br />animatespeed: "fast", //speed of animation: "fast", "normal", or "slow"<br />oninit:function(expandedindices){ //custom code to run when headers have initalized<br />//do nothing<br />},<br />onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed<br />//do nothing<br />}<br />})<br /><br />//Initialize 2nd demo:<br />ddaccordion.init({<br />headerclass: "technology", //Shared CSS class name of headers group<br />contentclass: "thelanguage", //Shared CSS class name of contents group<br />revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click" or "mouseover"<br />collapseprev: false, //Collapse previous content (so only one open at any time)? true/false<br />defaultexpanded: [], //index of content(s) open by default [index1, index2, etc]. [] denotes no content.<br />onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)<br />animatedefault: false, //Should contents open by default be animated into view?<br />persiststate: false, //persist state of opened contents within browser session?<br />toggleclass: ["closedlanguage", "openlanguage"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]<br />togglehtml: ["prefix", "<img src='http://i13.tinypic.com/80mxwlz.gif' /> ", "<img src='http://i18.tinypic.com/6tpc4td.gif' /> "], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)<br />animatespeed: "fast", //speed of animation: "fast", "normal", or "slow"<br />oninit:function(expandedindices){ //custom code to run when headers have initalized<br />//do nothing<br />},<br />onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed<br />//do nothing<br />}<br />})<br /><br /></script><br /><br /><span style="color: rgb(255, 0, 0);">2º passo:</span>Copie e cole esse código onde você quer que apareça o menu no blog. Na lateral (sidebar) por exemplo, e pronto.<br /><br /><br /><a href="#" onClick="ddaccordion.expandone('mypets', 0); return false">Expand 1st header</a> | <a href="#" onClick="ddaccordion.collapseone('mypets', 0); return false">Collapse 1st header</a> | <a href="#" onClick="ddaccordion.toggleone('mypets', 1); return false">Toggle 2nd header</a><br /><br /><h3 class="mypets">Dogs</h3><br /><div class="thepet"><br /><img src="http://i10.tinypic.com/7xlrga1.jpg" /><br />TEXTO AQUI OU UM LINK PRA IMAGEM COMO NESSE EXEMPLO...The dog is a domestic subspecies of the wolf...<br /></div><br /><br /><h3 class="mypets">Cats</h3><br /><div class="thepet"><br />TEXTO AQUI<br /></div><br /><br /><h3 class="mypets">Rabbits</h3><br /><div class="thepet"><br />TEXTO AQUI<br /></div><br /><p><a href="currentpage.htm?mypets=2">Reload page and select the 3rd content using a URL parameter</a></p><br /><br /><hr /><br /><span style="font-weight: bold; color: rgb(255, 0, 0);">Obs:</span>Troque os nomes das abas como quiser, e insira o conteúdo que desejar em "AQUI TEXTO". Qualquer dúvida entre em contato ou deixe um comentário.<br/><a href='http://linksduzao.blogspot.com' style='padding-top: 20px;display: block;text-align: center;'>Postagem original:Linksduzão</a>

Continua aqui...

Resumo
Gostou? então deixe um comentario

---

Bookmark este post: