Mostrando postagens com marcador Tutoriais. Mostrar todas as postagens
Dae galera terminei a minha sidebar grande aqui para seguidores e resolvi fazer um tutorial
Então vamos la esse tutorial e exclusivo feito por mim então si copiar seja camarada e deixe os créditos
SIDEBAR GRANDE
SIDEBAR GRANDE
Primeiro concelho a vocês a fazer
Fazer backup / Restaurar modelo
Si acontecer alguma vocês ja terem como volta ao normal.
Primeiro vocês tem que criar uma sua imagem eu fiz a minha imagem de fundo do tamanho 500 x 450.
Depois de criado sua imagem de fundo você terá que recorta em 3 partes(sidebar topo, sidebar meio, sidebar footer) eu do esses nomes agora si ta certo ou não to nem aii qualquer nome servi sendo 3 cortados.
Hospedem e guardem os links, vamos começa a parte do HTML prestem ATENÇÃO.
Primeiro vá em EDITAR HTML, der CONTROL+F(para buscar a tag)
Procure pela TAG:
]]></b:skin>
acima dela de dois ENTER e cole o seguinte código fazendo as modificações adequada:
height: altura se sua imagem
widht: largura de sua imagem
-------------------------------------------------------------------------------------------------------
/*----------------------------------------------------
{--------} SideBar {--------}
----------------------------------------------------*/
.articles-right {
width:445px;
float:left;
}
#sidebar4 {
float: center;
width: 500px;
height:450px;
font: 12px Arial, Tahoma, Helvetica, sans-serif;
margin:30px 0px 0px 0px;
}
.sidebar4 h2 {
padding:45px 0px 35px 194px;
color:#fff;
text-shadow:1px 1px #000;
font: bold 17px Arial, Helvetica, sans-serif, Verdana, Tahoma;
overflow: hidden;
background: url(LINK DE SUA IMAGEM 'sidebar top') no-repeat;
height:40px;
}
#sidebar4 .widget-content{
background: url(LINK DE SUA IMAGEM 'sidebar meio') repeat-y;
wight:500px;
height:250px;
padding:0px 15px 0px 15px;
margin:0px 0px 0px 0px;
}
#sidebar4 .widget {
margin:0px 0px 20px 0px;
padding:0px 0px 80px 0px;
background: url(LINK DE SUA IMAGEM 'sidebar footer') no-repeat bottom left;
}
Depois vamos procurar a "DIV"
<div id='main-wrapper'>
(caso não tenha procure pela DIV de sua sidebar original e cole em cima dela isto)
<div class='articles-right'>
<!-- begin.SIDEBAR1 -->
<b:section class='sidebar4 section' id='sidebar4' preferred='yes'>
</b:section>
<!-- End.Sidebar1 --> </div>
Agora e só salva e ver como ficou si tiver fora do lugar e só ir ajustando de sua preferencia ok ^^)
QUALQUER COISA ME COMUNIQUE
1.Design>Editar HTML>Aperte CTRL+F
2.Procure por SIDEBAR-WRAPPER
3. Após ache por "Float"
4. Terá Float:right ou Float:left, modifique eles.
5. EX: Terá float:left troque por float:right
OUTRA MANEIRA
Troque o texto “float:left;” por “float:right;”
(se a sidebar estiver Direita Para Passar Para Esquerda)
troque “float:right;” por “float:left;” (se a sidebar estiver na
esquerda para passar para a direita)
esquerda para passar para a direita)
Creditos : Bszsz_Gustavo
Se gostou Comente e ganhe um Brinde no Xat!
Aprenda como fazer um MENU SUSPENSO,
Igual a este acima.
Para ver como ele funciona veja na nossa barra lateral
a sidebar "CATEGORIA" e verá este menu.
Tutorial:
Entre na página editar HTML, clique para Expandir modelos de widgets e procure pelo código dos seus marcadores (procure pelo titulo que usa neles é mais fácil identificar, no caso deste blog procuramos por guia rápido).
Você vai encontrar algo assim:
<b:widget id='Label1' locked='false' title='Guia Rápido' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li class='guiarapido'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
Então apague esse trecho:
<ul>
<b:loop values='data:labels' var='label'>
<li class='guiarapido'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
</li>
</b:loop>
</ul>
Depois coloque esse aqui no lugar, onde está escrito Guia Rápido troque pelo que desejar que apareça no menu quando ele aparecer no blog, outro detalhe é tirar a parte(<data:label.count/>) se não quiser mostrar o numero de postagens de cada item do menu.
<select onchange='location=this.options[this.selectedIndex].value;'>
<option>Guia Rápido</option>
<b:loop values='data:labels' var='label'>
<option expr:value='data:label.url'><data:label.name/>
(<data:label.count/>)
</option>
</b:loop>
</select>
VALORIZE O MEU TRABALHO
COMENTE!!!
Baixe o codigo do feed download depois va em adicionar widget, HTML/JavaScript.
Comente...
Basta apenas baixar esse codigo
E depois va em adicionar Widget, HTML/JavaScript e cole o codigo, edite ao seu gosto.
Bom hoje eu estarei postando o tutorial de como fazer o slide com menu em formas de números, me pediram para fazer isso e hoje eu estarei mostrando.Bom, Vamos Começar:
Faça o Login -> Editar Html -> Procure Por ]]>
Antes de ]]> Cole o Código Abaixo:
/* Slide
----------------------------------------------- */
.main_view {
float: left;
position: relative;
}
.window {
height:300px; /*ALTURA DAS IMAGENS-- */
width: 980px; /*LARGURA DAS IMAGENS-- */
border:1px solid #04272D;
overflow: hidden;
position: relative;
margin: 0 0 20px 0;
}
.image_reel {
position: absolute;
top: 0; left: 0;
}
.image_reel img {
float: left;
}
.paging {
position: absolute;
bottom: 30px;
right: -1px;
width: 400px;
height:41px;
z-index: 100;
text-align: center;
line-height: 40px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge7eNMtVnGmorxjb5J4VT84-JlL2b_qnX1yUCGj7_QzBpWn0sKiqGxYbdncZlZvlhohFfTKrK1rzU5Q3sPG5lwLCGc1_8Bm9fbanBlhhkMz-OZUg8_dN3fgwKgqeIh3UVjz6GKUYRKTB23/s0/transparencia.png);
-moz-border-radius-topleft: 25px;
-moz-border-radius-bottomleft: 25px;
-webkit-border-radius-bottomleft: 25px;
-webkit-border-radius-topleft: 25px;
border:1px solid #000;
display: none;
}
.paging a {
outline:none;
padding: 5px 10px;
text-decoration: none;
color: #999;
background: #000;border: 1px solid #000;
-moz-border-radius: 17px;
-khtml-border-radius: 17px;
-webkit-border-radius: 17px;
}
.paging a.active {
font-weight: bold;
border: 1px solid #000;
color: #fff;
background: #188696;/*COR DE FUNDO DOS NUMEROS ATIVOS*/
-moz-border-radius: 17px;
-khtml-border-radius: 17px;
-webkit-border-radius: 17px;
}
.paging a:hover {
font-weight: bold;
}
Os Numeros que Estão em Vermelho Define o Tamanho do Slide
Os números em azul representam a barra com os números.
O número em rosa representa a cor selecionada no menu em números.
Agora Logo depois de ]]> Cole o Seguinte Código:
Agora Procure Por
E cole o próximo código abaixo dele, fazendo as modificações necessárias.
Os Números em Vermelho São o Tamanho Das Imagens.
Você Também Pode Adicionar o último código no gadget "Html/Javascript".
