Pretty baby spin-doktorer http://1apotekonline.com/cialis/ sterling sølv pille kasse

Knapp för att scrolla till bloggens topp

En knapp för att scrolla till bloggens topp visar Sanna i dagens video. Knappen är enkel att implementera på din blogg och gör det enkelt för dina besökare att navigera på din blogg.

Stilmallskod:


#totop a
{
display: block;
display: none;
z-index: 999;
opacity: .8; /* Hur mycket man ser igenom */
position: fixed;
top: 100%;
margin-top: -80px;
float:right; /* Om knappen ska vara till vänster eller höger */
right:100px; /* Hur långt från höger/vänster (ändra till left om du byter float till left) knappen ska vara */
-moz-border-radius: 12px; /* Hur mycket rundade kanter det ska vara */
-webkit-border-radius: 12px; /* Hur mycket rundade kanter det ska vara */
width: 50px; /* Hur bred din bakgrund ska vara */
line-height: 48px;
height: 50px; /* Hur hög din bakgrund ska vara */
padding: 10px;
background-color: #aaaaaa; /* Här byter du färgen på uppåt-knappen */
font-size: 24px; /* Storleken på din pil */
text-align: center;
color: #fff; /* Här byter du färg på din pil */
text-decoration:none;
}

#totop a:hover {
background: #ffffff; /* Här byter du färgen på uppåt-knappen vid mouseover */
color: #aaa; /* Här byter du färg på din pil vid mouseover */
}

Kodmallskod:


<div id="top"></div>
<div id="totop"><a href="#top">▲</a></div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(function () {
var scroll_timer;
var displayed = false;
var $message = $('#totop a');
var $window = $(window);
var top = $(document.body).children(0).position(0).top;
$window.scroll(function () {
window.clearTimeout(scroll_timer);
scroll_timer = window.setTimeout(function () {
if($window.scrollTop() <= top)
{
displayed = false;
$message.fadeOut(500);
}
else if(displayed == false)
{
displayed = true;
$message.stop(true, true).show().click(function () { $message.fadeOut(500); });
}
}, 100);
});
});
</script>

Kodmallskoden klistrar ni tex in precis efter body i kodmallarna.

Uppåtknapp som scrollar uppåt

Så ska jag visa er hur man gör en uppåtknapp som scrollar upp till toppen av sidan. Kan visa här på min blogg för jag har lagt in en på min blogg. När man scrollar neråt så dyker den upp här och när man trycker på den så scrollar den upp. Nu är min dator lite lite långsam här så därför så vill den inte alltid scrolla upp för mig. Har en väldigt trött dator. Men den scrollar upp, det gör den.

 

Hur som haver, då ska vi se här. Vi har en stilmallskod. Tänkte att jag visar er att lägga in den här på min bloggtipssida. Den har en stilmallskod som vi då klistrar in i stilmallen. Går man in på design, stilmall och så har jag lagt den så fint här. Där var nu den. Då ska vi se. Man kan lägga den längst ner om man vill. Jag har skrivit, vad heter det, kommentarer till nästan varje rad om hur man ändrar vad liksom. Hur långt från höger eller vänster om man vill byta, om man inte vill ha den till höger som jag har utan man kanske vill ha den på vänster sida och så vidare. Vilken färg den har, vilken bakgrundsfärg den har osv.

 

Så vi publicerar. Sen går man in i kodmallen, letar upp body. Kan man söka på det, control-F eller command-F, body, så hittar vi det. Precis nedanför body så klistrar ni in kodmallskoden och den har vi där. Så där. Ni ser att det ligger som en liten pil uppåt där, den kan ni ändra. Ni kan skriva top istället eller jag har ju lite, vad heter det, symboler på min bloggtipssida. Om man går in på grunder och sedan väljer symboler. Där har jag lite olika pilar som ni skulle kunna välja mellan ifall ni skulle vilja ha en annan typ av pil. Ska vi se här. Som sagt, lite trött dator. Tur att man ska få en ny snart.

 

Här då så har ni lite olika pilar som ni kan använda här. Går det bara att välja en uppåtpil där och då är det bara att kopiera den och klistra in den där istället då. Vi ska se här, jag tar en annan, jag tar den. Klistrar in den där så. Sen så trycker vi på publicera. Ska vi se här om den vill vara med.

 

Den syns ju inte när man är högst upp på sidan utan den uppstår när man scrollar ner litegrann. Som ni såg där, scrollar vi upp så försvinner den. Det är ju helt enkelt så man gör och vill ni modifiera hur den ser ut så är det bara att gå in på stilmallen. Bläddra ner till totop och så är det bara i så fall att ändra om man vill att den ska vara helt rund som jag har. Då kan man ändra till 34 pixlar här. Den här, moz-border-radius, webkit-border-radius. Hur bred man vill att den ska vara ändrar man där, hur hög man vill att den ska vara ändrar man där. Här ändrar man vilken bakgrundsfärg det är. Här ändrar man font-size, alltså hur stor pilen ska vara eller texten.

 

Det man ska tänka på då om man vill ha detta på alla sidor det är ju att man gör samma sak på inlägg, arkiv och kategorier. Så på inlägg så klistrar vi in den här koden också, oj. På arkiv. Och på kategorier, så. Sen är det klart.

 

Det var det som jag tänkte visa er idag så får ni ha det så gott. Hej hej.

 

Skribent och ansvarig för DDB. Driver Designa din blogg sedan juni 2015. Har bland annat studerat webbdesign, marknadsföring och online strategier både i Sverige och USA. Jobbar inom IT.

Läs mina andra inlägg

Kommentera

E-postadressen publiceras inte. Obligatoriska fält är märkta *