czwartek, 25 czerwca 2015

Pomoc blogowa #2 - Jak zrobić wyskakujący Facebook - Likebox ♥

Po lewej stronie mojego bloga znajduje się wysuwane okienko facebooka, dzięki któremu automatycznie można polubić moją stronę. Jak dodać taki gadżet na bloga?
1. Wchodzimy w projekt bloga, naciskamy "szablon" a następnie "edytuj kod HTML"

2. Wciskamy na klawiaturze ctrl + f aby wyświetlić okienko do wyszukiwania

3. Wyszukujemy frazę </head>



4. Nad </head> wpisujemy następujący kod: 



<style type="text/css">


#wys
{
background: url("http://dl.dropbox.com/u/106645823/facebook.png") no-repeat scroll 0 0 transparent;
padding: 10px;
width: 235px;
height:402px;
position: fixed;
margin-top: -100px; /*połowa wysokości panelu w górę */ left: 0px;
top: 50%;
}
.zamknij
{
background-position: 0px 0px -242px 0px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#wys").css("left","-216px");
$("#wys").hover(
function () {
$("#wys").animate({left: "0px"}, 400 );
$(this).addClass("zamknij");
}, function () {
$("#wys").animate({left: "-216px"}, 400 );
$(this).removeClass("zamknij"); }
);
});
</script>
<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
<![endif]-->






5. Wyszukujemy frazę </body> i nad nią wpisujemy kod:



<div id="wys">
 <div id="wewnatrz" style="float: left; width: 216px; margin-left: 0px;"> <iframe allowtransparency="true" src="//www.facebook.com/plugins/likebox.php?href=tu wklej adres fanpage'u&amp;width=190&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false&amp;height=378" style="border: medium none ; overflow: hidden; width: 190px; height: 378px; background-color: rgb(243, 247, 255);" frameborder="0" scrolling="no"></iframe></div> </div>



Nie zapomnijcie w zaznaczonym miejscu wkleić linku do Waszego fanpage'u ;))



6. Naciskamy "zapisz szablon" i gotowe! :)

Mam nadzieję, że chociaż dla kogoś ten post będzie przydatny :)) 
Pozdrawiam ~ Dagmara ♥


czwartek, 11 czerwca 2015

Kolczyki krowy ♥

Robię Wam prezent z okazji moich urodzin i wstawiam posta ^^ Znalazłam kolczyki, których jeszcze nie pokazywałam :) a na dniach pojawi się wpis z nowej serii, trochę się boję, jaka będzie Wasza reakcja  ale mam nadzieję, że Wam się spodoba :))

dopiero po zrobieniu zdjęcia zauważyłam, że na jednym biglu nie ma sprężynki o.o

Pozdrawiam ~ Daga ♥

piątek, 5 czerwca 2015

Pomoc blogowa #1 - jak zrobić strony pod nagłówkiem? ♥

Cześć Kochani :) Jak zapewne zauważyliście na moim blogu pojawiło się ostatnio sporo nowości. Przede wszystkim nowy wygląd. Może dla niektórych nie jest jakiś super ekstra, ale mi się podoba, bo zrobiłam go sama. :p Na razie jestem jeszcze amatorką w tym temacie, ale coś tam wiem. Dlatego pomyślałam, że mogę podzielić się z Wami moją dotychczasową wiedzą o html'u, css'ie itd. Na razie nie jest tego dużo, ale komuś może ułatwić życie. :)) Posty z serii "pomoc blogowa" będą pojawiały się wtedy, kiedy będę miała Wam coś do przekazania.
________________________________________________________________________________________________

Dzisiaj wyjaśnię jak zrobić własne strony pod nagłówkiem:



1. Wchodzimy w projekt bloga. Wybieramy opcję "strony", a następnie "nowa strona"

2. Wpisujemy tytuł strony i tekst, który chcemy na tej stronie zamieścić ;)

3. Wybieramy "układ" a następnie "dodaj gadżet" (we wskazanym miejscu)

4. Wybieramy gadżet "HTML/Java Script"

5. Nadajemy tytuł i wpisujemy kod (szablon kodu podaję poniżej)

szablon kodu:

<div class='menu'>
<ul>
<a href="wpisz link do strony">wpisz nazwę strony&nbsp;&nbsp;&nbsp;</a>
<a href="wpisz link do strony">wpisz nazwę strony&nbsp;&nbsp;&nbsp;</a>
<a href="wpisz link do strony">wpisz nazwę strony&nbsp;&nbsp;&nbsp;</a>
<a href="wpisz link do strony">wpisz nazwę strony&nbsp;&nbsp;&nbsp;</a>
<a href="wpisz link do strony">wpisz nazwę strony</a>
</ul>
<div class='ikonki'></div>

a) &nbsp; - to jest odstęp, a inaczej tzw "twarda spacja". Jeśli w kodzie wciśniemy spację, to nie zostanie ona zauważona. Aby zrobić odstęp pomiędzy poszczególnymi stronami to wpisujemy tą właśnie frazę. Ja zrobiłam trzy odstępy (i uważam, że to najlepiej wygląda) ale jeśli chcecie mieć większy odstęp to po &nbsp; wpisujecie kolejne &nbsp;

b) <div class='ikonki'></div> - tą linijkę wpisujemy, jeśli chcemy aby nasze strony były wyśrodkowane (tak jak pokazane na pierwszym zdjęciu w tym poście). Jeżeli jej nie wpiszemy to strony będą wyrównane do lewej strony:


Ale to nie wygląda ciekawie, prawda? ;)

6. Wybieramy "szablon" a następnie "dostosuj"

7. Wybieramy opcję "zaawansowane"

8. Wybieramy "dodaj arkusz CSS"

9. Teraz krok po kroku podyktuję Wam kod, który musicie wpisać ;)

.tabs-outer {
background-color: (w tym miejscu możecie wpisać kolor "ramki" - nie wiem jak to nazwać, spójrzcie na zdjęcie poniżej) ;


Jeżeli chcecie mieć przezroczyste tło (tak jak na pierwszym obrazku w tym poście) to po prostu nie wpisujcie tu żadnego koloru.


}
.menu {display:inline-block; max-width: 1240px; text-align:center; font-family: Times New Roman; 
font-size:13px; text-transform:none; letter-spacing:2px; padding:8px; margin-top:4px; margin-bottom: 4px;}
.ikonki {margin: -27px 190px -15px 770px; max-width: 1240px; text-align:center; font-family: Times New Roman; font-size:13px; text-transform:none; letter-spacing:2px; padding:8px;}
.menu a:link {color:#9932CD;} 

#9932CD - to jest kolor fioletowy. Zamiast niego możecie wpisać dowolny kolor, w jakim ma być druga i piąta strona (przynajmniej tak jest u mnie)



.menu a:visited {color: #9932CD;} 

#9932CD - to jest kolor fioletowy. Zamiast niego możecie wpisać dowolny kolor, w jakim ma być pierwsza, trzecia i czwarta strona.



.menu a:hover {color: #9932CD;}
a:hover {text-decoration: none;}

Jeśli jesteście zadowoleni z efektów, klikacie "zastosuj do bloga" i gotowe! :))



Tak wygląda kod na moim blogu:

.tabs-outer {
background-color:;
}
.menu {display:inline-block; max-width: 1240px; text-align:center; font-family: Times New Roman; font-size:13px; text-transform:none; letter-spacing:2px; padding:8px; margin-top:4px; margin-bottom: 4px;}
.ikonki {margin: -27px 190px -15px 770px; max-width: 1240px; text-align:center; font-family: Times New Roman; font-size:13px; text-transform:none; letter-spacing:2px; padding:8px;}
.menu a:link {color:#9932CD;}
.menu a:visited {color: #9932CD;}
.menu a:hover {color: #9932CD;}
a:hover {text-decoration: none;}

**** Tu macie link to tabeli kolorów HTML. Wystarczy, że skopiujecie któryś kod i wpiszecie we wskazanym przeze mnie miejscu :) KLIK!

________________________________________________________________________________________________

Uff... Pracowałam nad tym postem kilka godzin, ale wreszcie jest! :) Dajcie znać, czy wpis okazał się dla Was przydatny i czy chcecie więcej postów tego typu. :) Jakbyście mieli jakieś pytania - piszcie w komentarzach, a jeśli będę umiała, z chęcią pomogę :)

Pozdrawiam ~ Dagmara ♥