Blogger

niedziela, 28 października 2012

slide

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://nivo.dev7studios.com/scripts/nivo-slider/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script type="text/javascript"> 
$(window).load(function() { 
    $('#slider').nivoSlider(); 
}); 
</script>
<style> 
#slider { 
    position:relative; 
} 
#slider img { 
        position:absolute; 
    top:0px; 
    left:0px; 
    display:none; 
} 
#slider a { 
    border:0; 
    display:block; 
}
.nivo-controlNav { 
    position:absolute; 
    left:260px; 
    bottom:-42px; 
} 
.nivo-controlNav a { 
    display:block; 
    width:22px; 
    height:22px; 
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsqHnPA9xSdZaTWBb-We9zf-bhE4hhVL6cVfd4OEkfP5YyWaY2_G0RQdQBuzSPZ_GzdqJ7xI0JfqwYDc7vgK056CEpwY3Zv-_KEnDi4LPOR9hfehAbzVnK3VeXqD6Ce-PqqZsZjWKIbkI/s400/bullets.png) no-repeat; 
    text-indent:-9999px; 
    border:0; 
    margin-right:3px; 
    float:left; 
} 
.nivo-controlNav a.active { 
    background-position:0 -22px; 
}
.nivo-directionNav a { 
    display:block; 
    width:30px; 
    height:30px; 
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4gaBr6P8v_9BiquuQTMrf9SkniFIDyJW8hz9kypPGFgRQFdF4rliVbbSGPceQ6RPd_O5HM1y1p_MYb7Zjci-5nd1zb8CbsIn-aLp9-65vabxqf2qRp1lVHhVUAUVBhpIavDQs6BNpzdk/s400/arrows.png) no-repeat; 
    text-indent:-9999px; 
    border:0; 
} 
a.nivo-nextNav { 
    background-position:-30px 0; 
    right:15px; 
} 
a.nivo-prevNav { 
    left:15px; 
}
.nivo-caption { 
    text-shadow:none; 
    font-family: Helvetica, Arial, sans-serif; 
    font-size:16px; 
    padding: 10px 0px; 
} 
.nivo-caption a { 
    color:#efe9d1; 
    text-decoration:underline; 
}
.clear { 
    clear:both; 
}
.nivoSlider { 
    position:relative; 
} 
.nivoSlider img { 
    position:absolute; 
    top:0px; 
    left:0px; 
} 
.nivoSlider a.nivo-imageLink { 
    position:absolute; 
    top:0px; 
    left:0px; 
    width:100%; 
    height:100%; 
    border:0; 
    padding:0; 
    margin:0; 
    z-index:60; 
    display:none; 
} 

.nivo-slice { 
    display:block; 
    position:absolute; 
    z-index:50; 
    height:100%; 
} 
.nivo-caption { 
    position:absolute; 
    left:0px; 
    bottom:0px; 
    background:#000; 
    color:#fff; 
    opacity:0.7; /* Overridden by captionOpacity setting */ 
    width:100%; 
    z-index:89; 
} 
.nivo-caption p { 
    padding:5px; 
    margin:0; 
} 
.nivo-caption a { 
    display:inline !important; 
} 
.nivo-html-caption { 
    display:none; 
} 

.nivo-directionNav a { 
    position:absolute; 
    top:45%; 
    z-index:99; 
    cursor:pointer; 
} 
.nivo-prevNav { 
    left:0px; 
} 
.nivo-nextNav { 
    right:0px; 
} 
.nivo-controlNav a { 
    position:relative; 
    z-index:99; 
    cursor:pointer; 
} 
.nivo-controlNav a.active { 
    font-weight:bold; 
} 
</style>
<div id="slider">

<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiBXSnHiyzuGX5Z1XpugfAvoAeekiwH46up3hF_zgbDZ6YrJbWfxgq6F0XChfMrSsEtb6fYb18iMjN5FQi1O5DqtenJy_SufmmZJc6UyGB88NmcZ54tBR6gOUM54oT7UrduYHMMTtBELan/s800/Gazelle_-_antelope_%2528savanna.gif" alt="" title="Description Goes Here" /></a> 
 
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRIUSlVCw88-68H8Iw5raOp9UfNWQh5dui59ER8779SWnH-Aa5cfNXuWeOyJfsvPhoJLDjzPoy13VPByHE7kimMtMrE1MpIPd8lUWxG2pMDDl9CLdk9LQU87BvN-6l9fKPextKFLqfzSJc/s800/Curious_Cat%252C_Siberian_Tiger.gif" alt="" title="You can add Description here or leave it blank as shown in the next image" /> 
 
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM3bPSGfr0bmCxDj0Bdzz_ZvqicIrqsZjR7c1E1rfvWe2fWX9ZnnYYDOnS_qXxd_UeBCvKFy91d4AoxQUSmKOZAna0hXkHY_6js4dgz5gNWVxTiljVEuMiEm9D4eVKHGs-QTmvVA1oF-wr/s800/Christmas_Cat.gif" alt="" /> 
 
 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXOI0cAV-FUDNB5nzVL_lNmRCKdW0U9aHPJWNhLfYG9a4GTbNJjNHwjEBnzmLOiEEik-ZClW0mhFkUJDXhRgUzJf9vwyQwB7vVZkkBkScEGWyP09RcbFwbYC9Jas1HOtZBQxeFzpw-tKsN/s800/Leopard%252C_Africa.gif" alt="" title="You Can Add Description Here" /> 
 
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvmTcZNf9xhHEtdoRnboAaGh8rArC0HC5k3iwdQja5TMBHg49l0pCOB_o510nMg-OoigL8PWff2yp4GGoeMST8bEpeEkLeADZDBIH9YzTu2Nc_zMivEHBHtWSheZge5ZaMdCWrVHB83wej/s800/Three_tickets_to_the_North_.gif" alt="" title="#htmlcaption" /> 


</div>


<br/> 
<br/>

piątek, 26 października 2012

Poziome menu w nagłówku bloggera

Często chcemy dodać pasek menu na górze strony, czyli w nagłówku (pod lub nad bannerem).

W standardowych szablonach bloggera nie ma takiej możliwości, ale można osiągnąć taki efekt bawiąc się trochę kodem szablonu bloga dostępnym w ustawieniach, w opcji "Edytuj kod HTML".

W tym przykładzie będę pracował na szablonie "Minima Black", ale dla innych szablonów rodzaj wprowadzanych modyfikacji i sam sposób jest analogiczny. Naszym celem jest umożliwienie dodania kolejnych widżetów do nagłówka (tam gdzie znajduje się tytuł bloga i/lub banner).

Na początek wykonujemy kopię zapasową naszego kodu HTML: "Układ" -> "Edytuj kod HTML", zaznaczamy "ptaszek" przy "Rozszerz szablony widżetów" i wybieramy "pobierz pełny szablon". Zapisujemy plik na dysku komputera.

Musimy odnaleźć następujący fragment kodu:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

W tym kodzie istotne są dwa parametry:

maxwidgets - który określa maksymalną ilość widżetów w danym oknie,

showaddelement - który okresla, czy jest widoczny skrót umozliwiający dodanie nowego widżeta.

Modyfikujemy tę sekcje w następujący sposób:

<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>

Dzięki temu będziemy mogli dodać jeszcze jeden widżet.

Kolejną modyfikacja powinno być swtorzenie odpowiedniego stylu prezentacji danych (linków) wyliczeniowych w elemencie nagłówka (header). w tym celu musimy dodać definicję odpowiedniego stylu. Na przykład takiego:

#header ul li {

display: inline;

padding: 0 5px;

}

Styl ten należy wkleić w sekcji zawierajacej definicje styli CSS w kodzie HTML tuż przed nastepującym wpisem:

]]></b:skin>

</head>

Teraz otwieramy "Układ" -> "Elementy strony" i widzimy, że w nagłówku możemy dodać widżet.

Możemy dodać na przykład widżet "Lista linków", za pomocą, którego podłączamy nasze statyczne strony bloggera.

(opis tworzenia statycznych stron na bloggerze znajduje się w serii wpisów: "Statyczne strony w bloggerze (cz.1, cz.2, cz. 3)"

Menu poziome

przed tym

]]></b:skin>

wkleiłem to