Wydobyć kod html efektu reklamy 
Autor: Marcin A.
Visitado 1531,
Seguidores 1,
Compartilhado 0
Czy da się wydobyć kod html (css) efektu jaki daje włączenie "reklamy -> pokaż reklamę w prawym górnym rogu -> 5-Message Right" aby przerobić ten efekt do innych celów, czy też umieścić go z lewej strony itp. wstawiając w blok HTML i gadżety.
Publicado em
Autor
Lub też kod na takie przyciski jak te po lewej stronie: http://sanwebe.com/assets/responsive-share-buttons/
które się wysuwają.
Reklama to flash. Jedyne co możesz zrobić to podać sugestię aby kolejna wersja Website posiadała opcje wyświetlania również z lewej strony.
Pogmerałem w niej i wolałbym całą stronę przygotować jako flash niż przerabiać. Ma narzucone wymiary, akcje i nie bardzo jest podatna na wpływy
Od biedy możesz wykorzystać link do wyświetlenia "okna podręcznego".
Jak chcesz głębiej się zapuścić, to są gotowe skrypty pop-up.
Znalazłem coś, w późnych godzinach wieczornych opiszę ustrojstwo z przykładem.
Autor
ok, super - dzięki
Autor
Udało mi się z tego: http://www.sanwebe.com/2013/09/responsive-share-buttons-css-and-jquery wydobyć tyle co w załączniku. Slide jest przycisków po lewej stronie, jednak nie wiem dlaczego nie wyświetlają się ikony? Jak pod dane przyciski przypisać linki np. do zakładek strony?
Sprawdziłem, nie działał link do Twojej strony:
case 'facebook':
var openLink = 'http://www.foto-andelbrat.pl/index.html'
break;
Jak wygląda tak, to ładuje Twoją stronę.
Oczywiście tu nie możesz zmienić napisu facebook bo to jest odwołanie do ustawionych nazw ale je też można zmienić.
Wyślij oryginał skryptu bo nie wiem jak wyglądają oryginalne zapisy.
Teraz tylko tyle bo mam mało czasu. Jutro postram się pokazać Tobie ten substytut reklamy pop-up.
Autor
Tutaj są wszystkie zapisy: http://www.sanwebe.com/2013/09/responsive-share-buttons-css-and-jquery - kopiowałem je z tej strony.
Autor
A dlaczego ikonki się nie wyświetlają? Może w inne miejsce trzeba je przekopiować?
Autor
Mam jeszcze problem z wyświetlaniem się ikon - nie pokazują się. Gdzie muszę wkopiować pliki lub jak zmienić ścieżki. Pod pierwszy button przypisałem zakładkę strony "test" - jak zrobić aby się wyświetlała w tym samym oknie?
Projekt w załaczniku.
Coś za dużo namieszałeś...
ikony się pokazują...
Ne dzieliłem nic, wkleiłem skrypt i styl tak jak jest w przykładzie z www.sanwebe..., dorzuciłem folder z buttonami i działa...
Wrzucam zipa.
Autor
A możesz przesłać pliki w formie projektu .iwzip? Może być na maila: ***
Autor
Ja wklejałem kod html w html i gadźety->html styl css w zaawansowane.
Możesz podpowiedzieć jak się wstawia bezpośrednio do kodu html style css oraz jquery?
"3 kroki do szczęścia"
1.
zaawansowane: Przed tagiem zamykającym sekcję HEAD
WKLEJASZ TO:
<script type="text/javascript">
$(document).ready(function() {
var pageTitle = document.title; //HTML page title
var pageUrl = location.href; //Location of the page
//user hovers on the share button
$('#share-wrapper li').hover(function() {
var hoverEl = $(this); //get element
//browsers with width > 699 get button slide effect
if($(window).width() > 699) {
if (hoverEl.hasClass('visible')){
hoverEl.animate({"margin-left":"-117px"}, "fast").removeClass('visible');
} else {
hoverEl.animate({"margin-left":"0px"}, "fast").addClass('visible');
}
}
});
//user clicks on a share button
$('.button-wrap').click(function(event) {
var shareName = $(this).attr('class').split(' ')[0]; //get the first class name of clicked element
switch (shareName) //switch to different links based on different social name
{
case 'facebook':
var openLink = 'test.html';
break;
case 'twitter':
var openLink = 'http://twitter.com/home?status=' + encodeURIComponent(pageTitle + ' ' + pageUrl);
break;
case 'digg':
var openLink = 'http://www.digg.com/submit?phase=2&url=' + encodeURIComponent(pageUrl) + '&title=' + encodeURIComponent(pageTitle);</i><br /><i> break;</i><br /><i> case 'stumbleupon':
var openLink = 'http://www.stumbleupon.com/submit?url=' + encodeURIComponent(pageUrl) + '&title=' + encodeURIComponent(pageTitle);</i><br /><i> break;</i><br /><i> case 'delicious':
var openLink = 'http://del.icio.us/post?url=' + encodeURIComponent(pageUrl) + '&title=' + encodeURIComponent(pageTitle);</i><br /><i> break;</i><br /><i> case 'google':
var openLink = 'https://plus.google.com/share?url=' + encodeURIComponent(pageUrl) + '&title=' + encodeURIComponent(pageTitle);</i><br /><i> break;</i><br /><i> case 'email':
var openLink = 'mailto:?subject=' + pageTitle + '&body=Found this useful link for you : ' + pageUrl;
break;
}
//Parameters for the Popup window
winWidth = 650;
winHeight = 450;
winLeft = ($(window).width() - winWidth) / 2,
winTop = ($(window).height() - winHeight) / 2,
winOptions = 'width=' + winWidth + ',height=' + winHeight + ',top=' + winTop + ',left=' + winLeft;</i><br /><i> </i><br /><i> //open Popup window and redirect user to share website.</i><br /><i> window.open(openLink,'Share This Link',winOptions);
return false;
});
});
</script>
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
font-family: Georgia, "Times New Roman", Times, serif;
color: #333333;
background: #FFFFFF;
}
.wrapper {
max-width: 800px;
margin-right: auto;
margin-left: auto;
background: #F5F5F5;
padding: 20px;
}
/* Share button */
/* outer wrapper */
#share-wrapper {
margin-top: 100px;
position:fixed;
left: 0;
}
/* inner wrapper */
#share-wrapper ul.share-inner-wrp{
list-style: none;
margin: 0px;
padding: 0px;
}
/* the list */
#share-wrapper li.button-wrap {
background: #E4EFF0;
padding: 0px 0px 0px 10px;
display: block;
width: 140px;
margin: 0px 0px 1px -117px;
}
/* share link */
#share-wrapper li.button-wrap > a {
padding-right: 60px;
height: 32px;
display: block;
line-height: 32px;
font-weight: bold;
color: #444;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}
/* background image for each link */
#share-wrapper .facebook > a{
background: url(buttons/facebook.jpg) no-repeat right;
}
#share-wrapper .twitter > a{
background: url(buttons/twitter.jpg) no-repeat right;
}
#share-wrapper .digg > a{
background: url(buttons/digg.jpg) no-repeat right;
}
.stumbleupon > a{
background: url(buttons/stumbleupon.jpg) no-repeat right;
}
#share-wrapper .delicious > a{
background: url(buttons/delicious.jpg) no-repeat right;
}
#share-wrapper .google > a{
background: url(buttons/google.jpg) no-repeat right;
}
#share-wrapper .email > a{
background: url(buttons/email.jpg) no-repeat right;
}
/* small screen */
@media all and (max-width: 699px) {
#share-wrapper {
bottom: 0;
position: fixed;
padding: 5px 5px 0px 5px;
background: #EBEBEB;
width: 100%;
margin: 0px;
-webkit-box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 -1px 4px rgba(0,0,0,0.15);
-o-box-shadow: 0 -1px 4px rgba(0,0,0,0.15);
box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.15);
}
#share-wrapper ul.share-inner-wrp {
list-style: none;
margin: 0px auto;
padding: 0px;
text-align: center;
overflow: auto;
}
#share-wrapper li.button-wrap {
display: inline-block;
width: 32px!important;
margin: 0px;
padding: 0px;
margin-left:0px!important;
}
#share-wrapper li.button-wrap > a {
height: 32px;
display: inline-block;
text-indent: -10000px;
width: 32px;
padding-right: 0;
float: left;
}
}
-->
</style>
2.
A POTEM TAK JAK MIAŁES HTML I GADŻETY WKLEJASZ TO:
<div id="share-wrapper">
<ul class="share-inner-wrp">
<!-- Facebook -->
<li class="facebook button-wrap"><a href="#">Facebook</a></li>
<!-- Twitter -->
<li class="twitter button-wrap"><a href="#">Tweet</a></li>
<!-- Digg -->
<li class="digg button-wrap"><a href="#">Digg it</a></li>
<!-- Stumbleupon -->
<li class="stumbleupon button-wrap"><a href="#">Stumbleupon</a></li>
<!-- Delicious -->
<li class="delicious button-wrap"><a href="#">Delicious</a></li>
<!-- Google -->
<li class="google button-wrap"><a href="#">Plus Share</a></li>
<!-- Email -->
<li class="email button-wrap"><a href="#">Email</a></li>
</ul>
</div>
3.
Wklejasz folder z ikonkami
... działa wszystko
Zmieniasz linki na własne... ot i cała historyja...
Autor
Ok. Robiełem trochę inaczej. Nie wiedziałem że trzeba to wrzucać w zaawansowane przed tagiem zamykającym s.... Ja miałem style css wrzucowne w html i gadzety->CSS i dlatego nie wyswietlały sie ikony. Mozesz powiedzieć dlaczego? Albo jak wstawić aby się wyświetlały?
A ha, można zrobić aby po kliknięciu się otwierała zakladka strony a nie okienko pop-up?
Jeśli zrobisz jak napisałem to ikony sie wyświetlają.
W gadżetach ma być tylko pkt.2.
Zaawansowane dlatego, ze skrypt musi być w <head> przed <body> razem ze stylem, który może być w pliku odrębnym css ale może być zawarty w samej stronie.
Hmmm czyli chciałbyś z tego zwykłe menu zrobić? Cała idea tego to pop-up.
Popatrzę i jak zrozumiem to dam znać.
Chyba przed całością pwinna być linijka, bo coś jej nie dokleiłem wyżej:
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
i dołączony folder js.
Otwarcie w tym samym oknie
Zamieniasz kawałek //user clicks on a share button:
na to:
//user clicks on a share button
$('.button-wrap').click(function(event) {
var shareName = $(this).attr('class').split(' ')[0]; //get the first class name of clicked
element
switch (shareName) //switch to different links based on different social name
{
case 'facebook':
break;
case 'twitter':
break;
case 'digg':
break;
case 'stumbleupon':
break;
case 'delicious':
break;
case 'google':
break;
case 'email':
break;
}
//open Popup window and redirect user to share website.
window.document(openLink,'Share This Link');
return false;
A linki wpisujesz tam gdzie w website umieściłeś część htmli gadżety:
<div id="share-wrapper">
<ul class="share-inner-wrp">
<!-- Facebook -->
<li class="facebook button-wrap"><a href="<b>STRONA1" target="_blank" rel="nofollow">http://www.twojastrona.pl">STRONA1
<!-- Twitter -->
<li class="twitter button-wrap"><a href="<b>STRONA2" target="_blank" rel="nofollow">http://www.kolejnastrona.pl">STRONA2
<!-- Digg -->
<li class="digg button-wrap"><a href="#">Digg it</a></li>
<!-- Stumbleupon -->
<li class="stumbleupon button-wrap"><a href="#">Stumbleupon</a></li>
<!-- Delicious -->
<li class="delicious button-wrap"><a href="#">Delicious</a></li>
<!-- Google -->
<li class="google button-wrap"><a href="#">Plus Share</a></li>
<!-- Email -->
<li class="email button-wrap"><a href="#">Email</a></li>
</ul>
</div>
Uważaj forum wyniuchało automatycznie linki w 2 pierwszych przykładowych zapisach i trochę nagmerało, nie kopiuj i żywcem, po prostu wpisujesz linki w a href="#" . Nazwy jakie chcesz.
Autor
Dzięki za rewelacyjną pomoc. Możesz mi tylko jeszcze powiedzieć jak zrobić aby te guziczki wyświetlały się na każdej stronie? Z góry dzięki..... :-)
Wklejasz to samo dla każdej strony.
Właśnie przygotowuję paczkę do pobrania jako menu z innymi graficzkami i opisaną
Autor
Oooo super....
Autor
Jeszcze mam jedną zagwostkę. Mam wstawioną galerię w formie MINIATURY POZIOMO. Czyli w katalogu gallery tworzą się miniatury o nazwach np. zdjęcie_thumb.jpg. Czy jest możliwość aby połączyć styl CSS lub jakoś inaczej z ikonami do tych zdjęć aby po najechaniu coś się z nimi działo np. efekt hover.
<style type="text/css">
.obrazek { opacity: 0.5; }
.obrazek:hover { opacity: 1; cursor: pointer; }
</style>
Po ręcznym dopisaniu w kodzie w stronie np. index.html przy
zdjęcie_thumb.jpg class="obrazek" alt=""
działało, ale wiadomo po kolejnym zapisaniu plików czy też eksporcie podmieniał się spowrotem kod.
I teraz jak odnieść słowo obrazek do np. miniatury zdjęcie_thumb.jpg
Fajnie jakbym mógl wstawiać tak styl css do HTML i gadżety.
Na te obrazki na razie nie mam pomysłu (czytałem wcześniejszy Twój post).
Galeria jest zautomatyzowana i zawsze podmieni jeśli wpisujesz coś ręcznie. Może jakiś styl ale bazujący na nazwach ID automatycznej galerii. Nie wiem, za głupi na to jestem aby od razu odpowiedzieć. Muszę trochę pooglądać całość, może coś się da. Czasowo jestem na razie dość ograniczony by spokojnie posiedzieć przy temacie.
Autor
Ok, czekam na paczkę o której pisałeś. Dzięki.
Autor
Nie wiedziałem że jak się kliknie że temat rozwiązany to post się zamknie, więc jakbyś miał gotową to paczkę to proszę na maila: *** lub w innym moim poście.
Autor
A u Ciebie zadziałało otwieranie w tym samym oknie zakładek strony?