Ariadne Path: 2013-07-14

sábado, 20 de julho de 2013

Colocando os Gadgets da Lateral em Abas - help logger

Tutorial em http://helplogger.blogspot.com.br/2013/04/how-to-add-tabbed-navigation-widget-to.html
Site bom para tutoriais e atualizado, inclusive com pequeno tutorial sobre o novo blogger.

1) Layout - Editar HTML

2) Expandir o ESTILO do template clicando em <b:skin>

3) ACIMA de
]]></b:skin>

4) colar o código

/* Tabview for Blogger
----------------------------------------------- */
.tabviewcont{
margin:15px 0;
padding:0;
clear:both;
}

.tabviewnav {
margin: 0 0 0 14px;
padding:3px 0; /* If you are using a Blogger Template change 0 with 15px */
font-size:12px; /* Font size of text inside tabs */
font-weight:bold;
}
.tabviewnav li {
list-style:none;
margin:0;
display:inline;
}
.tabviewnav li a {
padding:3px 6px;
margin-right:1px;
background:#F6F6F6; /* The background color of the tabs */
border-radius:5px 5px 0 0;
-moz-border-radius:5px 5px 0 0;
-webkit-border-radius:5px 5px 0 0;
text-decoration:none;
color:#222222;
}
.tabviewnav li a:hover {
color:#222222;
background:#EBEBEB; /* Background color of the tab on mouseover */
text-decoration:none;
}
.tabviewnav li.tabviewactive a,
.tabviewnav li.tabviewactive a:hover {
background:#EBEBEB; /* Background color of the active tab */
color:#222222;
}
.tabviewcont .tabviewtab {
padding:5px;
border:1px solid #EEEEEE; /* Border around the container */
background:#fff; /* The background color of the gadget */
}
.tabviewcont .tabviewtab h2,
.tabviewcont .tabviewtabhide {
display:none;
}
.tabviewtab .widget-content ul{
list-style:none;
margin:0 0 10px 0;
padding:0;
}
.tabviewtab .widget-content li {
border-bottom:1px solid #ccc;
margin:0 5px;
padding:2px 0 5px 0;
}

5) ACIMA de

</head>

6) colar o código

7) ABAIXO de

8) colar o código

9) Para acrescentar os gadgets, basta ir em LAYOUT e selecionar gadgets existente ou criar novos. Eles aparecerão na lateral DIREITA e estarão na ordem em que aparecerão as Abas. Não haverá qualquer marca diferenciando-os dos demais gadgets.

Obs.: Para ACRESCENTAR ABAS,

adicione ACIMA DE

</div>

O código

<b:section class='tabviewtab' id='Tab4' maxwidgets='1'/>

E assim por diante, lembrando de não repetir as IDs (Tab1, Tab2, etc)

IMAGEM SLIDE FORNECEDORES

IMAGEM SLIDE TIMELINE

ALIANÇAS - MELHOR RESOLUÇÃO

sexta-feira, 19 de julho de 2013

IMAGEM SLIDE ENTRETENIMENTO

Imagem slide GATRONOMIA

MELHORADO

TROCA CORES

Imagem Slide FASHIONISMO

MELHORADO

Imagem Slide Decoracao

MELHORADO

COLORIDO

FONTE REDUZIDA DE 82 PARA 70

TROCA COR

SUAVE

Slide Numerado - Alterado de cherry bomb

1) Logo acima de </head> colar:


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {

//Set Default State of each portfolio piece
$(".paging").show();
$(".paging a:first").addClass("active");

//Get size of images, how many there are, then determin the size of the image reel.
var imageWidth = $(".window").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;

//Adjust the image reel to its new size
$(".image_reel").css({'width' : imageReelWidth});

//Paging + Slider Function
rotate = function(){
var triggerID = $active.attr("rel") - 1; //Get number of times to slide
var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

$(".paging a").removeClass('active'); //Remove all active class
$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)

//Slider Animation
$(".image_reel").animate({
left: -image_reelPosition
}, 500 );

};

//Rotation + Timing Event
rotateSwitch = function(){
play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
$active = $('.paging a.active').next();
if ( $active.length === 0) { //If paging reaches the end...
$active = $('.paging a:first'); //go back to first
}
rotate(); //Trigger the paging and slider function
}, 7000); //Timer speed in milliseconds (3 seconds)
};

rotateSwitch(); //Run function on launch

//On Hover
$(".image_reel a").hover(function() {
clearInterval(play); //Stop the rotation
}, function() {
rotateSwitch(); //Resume rotation
});

//On Click
$(".paging a").click(function() {
$active = $(this); //Activate the clicked paging
//Reset Timer
clearInterval(play); //Stop the rotation
rotate(); //Trigger rotation immediately
rotateSwitch(); // Resume rotation
return false; //Prevent browser jump to link anchor
});

});

</script>


2) Aqui são alteradas MEDIDAS E CORES da numeração. Colar acima de ]]></b:skin>
/*--Container geral--*/
.main_view {
float: left;
position: relative;
}
/*--Estilos do container das imagens--*/
.window {
height:200px; /*-- Altura do Slide (as imagens devem ter a mesma altura */
width: 550px; /*-- Largura do Slide (as imagens devem ter a mesma largura)-- */
overflow: hidden;
position: relative;
}.image_reel {
position: absolute;
top: 0; left: 0;
}
.image_reel img {
float: left;
}
/*--Estilos do container da numeração(Não precisa mudar nada aqui)--*/
.paging {
position: absolute;
bottom: 40px;
right: -1px;
width: 220px;
height:41px;
z-index: 100;
text-align: center;
line-height: 40px;
-moz-border-radius-topleft: 15px;
-moz-border-radius-bottomleft: 15px;
-webkit-border-radius-bottomleft: 15px;
-webkit-border-radius-topleft: 15px;
display: none;
}
/*--Estilos do link da numeração (Estilo dos numeros)--*/
.paging a {
outline:none;
padding: 5px 10px;
text-decoration: none;
color: #fff;
background: #bad5d9;
-moz-border-radius: 17px;
-khtml-border-radius: 17px;
-webkit-border-radius: 17px;
}
/*--Estilos do link ativo da numeração--*/
.paging a.active {
font-weight: bold;
color: #fff;
background: #b97ac9;
-moz-border-radius: 17px;
-khtml-border-radius: 17px;
-webkit-border-radius: 17px;
}
/*--Estilos do link hover da numeração--*/
.paging a:hover {
font-weight: bold;
}.feed-links {
display: none; }

3) Inserir GADGET html (aqui são rocados os LINKS e IMAGENS)
<div class="main_view">
<div class="window">
<div class="image_reel">
<a href="LINK_1" alt="" ><img src="URL_IMG_1"/></a>
<a href="LINK_2" alt=""><img src="URL_IMG_2"/></a>
<a href="LINK_3" alt=""><img src="URL_IMG_3"/></a>
<a href="LINK_4" alt=""><img src="URL_IMG_4"/></a>
</div></div>
<div class="paging">
<a href="www.blogger.com" rel="1">1</a>
<a href="www.blogger.com" rel="2">2</a>
<a href="www.blogger.com" rel="3">3</a>
<a href="www.blogger.com" rel="4">4</a>
</div></div>

4) Não é necessário mudar o www.blogger.com, pois só servem pra aparecer o
icone da "mão"do mouse quando passa em cima da numeração.

5) Originalmente era de 4 imagens.
Para adicionar outras, basta acrescentar linhas diretamente no GADGET (passo 3)
Caso haja problema de visualização do botão com números,

6) Alterar o HTML
acima de ]]></b:skin>
Abaixo de
/*--Estilos do container da numeração(Não precisa mudar nada aqui)--*/

Precisa sim mudar para aparecer os botões referentes às imagens adicionadas.
right: -1px;
width: 220px;

Alterar testando números até ajustar.

SETA CINZA - volta ao topo

Salobortis Egenalla

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget tincidunt metus. In rhoncus sem vel ipsum elementum, dapibus pretium lectus consequat. Ut at enim venenatis, mollis neque eget, pharetra ligula. Nam eleifend purus vel nisl varius, sed tristique justo egestas. Nam ac erat in velit commodo pretium. Sed consequat sagittis eros sed consectetur. Phasellus sit amet velit venenatis ante tristique vestibulum. Donec pellentesque id dui at viverra. In hac habitasse platea dictumst. Maecenas eget augue quis eros iaculis pellentesque a at odio.

Nam lobortis varius porta. Proin magna augue, bibendu

sábado, 20 de julho de 2013

sexta-feira, 19 de julho de 2013

Agenda

Marcadores