Tworzenie obrazu z Slider CSS miniatur dla Bloggera

Galerie zdjęć są szczególnie przydatne do fotoblogów, ale mogą również służyć tym, którym od czasu do czasu potrzeba takiego gadżetu.

Jak widzieliśmy w poprzednim poradniku na wierzchu bloku mieliśmy małe miniaturki, które zostały rozszerzone na dole każdorazowo, gdy obraz został wybrany.

Różnica polega na tym, że nie trzeba było kliknąć na miniaturę, aby pokazać większą wersję i że zostało nabyte z JavaScript. Tym razem będzie używać tylko, hover i CSS. DEMO

Jak dodać suwak miniatur obrazów CSS na Bloggera

Krok 1. Zaloguj się na pulpicie nawigacyjnym Bloggera i przejdź do szablonu> Edytuj kod HTML

Krok 2. Kliknij w dowolnym miejscu wewnątrz obszaru kodu i nacisnąć klawisze CTRL + F, aby otworzyć okno wyszukiwarki Bloggera

Krok 3. Wklej </ head> wewnątrz pola wyszukiwania i naciśnij Enter.

Krok 4. Tuż nad </ head> dodaj ten kod:

<style type='text/css'>
.image-container {
position: relative;
width: 640px;
height: 530px;
margin: 0 auto;
text-align:center;
overflow: hidden;
}
.image-container a {
display: inline;
text-decoration: none;
}
/* Mini-thumbnails style */ .mini-thumbnail {
width: 18%; /* mini-thumbnails width */ margin:1px;
opacity: 1;
-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.5);
box-shadow: 0px 0px 3px rgba(0,0,0,0.5);
}
/* Style for the main thumbnail */ .large-thumbnail {
position: absolute;
width: 100%;
top: 800px;
margin:0 auto;
text-align: center;
display: block;
-webkit-transition: top 1s ease;
-moz-transition: top 1s ease;
-o-transition: top 1s ease;
-ms-transition: top 1s ease;
transition: top 1s ease;
}
.feature {
top: 110px;
width: 100%;
opacity: .3;
}
/* style for the selected mini-thumbnail */ a:hover .mini-thumbnail {
opacity: .5;
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
box-shadow: 0px 0px 10px rgba(0,0,0,0.5);
}
/* transition effects for the selected image */ a:hover .large-thumbnail {
top: 110px;
width: 100%;
z-index:3;
opacity: 1;
-webkit-transition: top 1s ease;
-moz-transition: top 1s ease;
-o-transition: top 1s ease;
-ms-transition: top 1s ease;
transition: top 1s ease;
}
</style>

Tutaj możemy ustawić określoną wysokość ( height 530px ) i szerokości ( wight 640px ), tak, że możemy przesuwać obraz na granicach ramki i  czy mają być ukryte (overflow: hidden);

Pozycjonowanie bezwzględne na większe miniatury ( .large-thumbnail ) ściąga je i umieszcza je w miejscu, które wybrałeś przy użyciu wartości 800px na najwyższym rozmiarze.
Mini-miniaturki, które są w rzeczywistości drugim obrazem pozostają cały czas powyżej w pozycji statycznej i są zmieniane tylko nieznacznie pod względem stylu do rozróżnienia aktywnego (: hover .mini-miniatur), po najechaniu myszką.

Krok 5. Zapisz zmiany klikając na przycisk Zapisz szablon. I wreszcie, musimy dodać kod.

Krok 6. Wklej poniżej strukturę HTML, w której chcesz, wyświetlić galerię przechodząc albo w układ i dodać nowy gadżet (kliknij Dodaj link gadżetu i wybierz HTML / JavaScript ), lub wewnątrz postu lub strony w sekcji HTML.

i wklej ten kod:

<div class="image-container">
<a href="javascript:void(0);">
<img class="mini-thumbnail" src="MINI-THUMB-URL1" />
<img class="large-thumbnail" src="LARGE-THUMB-URL1" />
</a>
<a href="javascript:void(0);">
<img class="mini-thumbnail" src="MINI-THUMB-URL2" />
<img class="large-thumbnail" src="LARGE-THUMB-URL2" />
</a>
<a href="javascript:void(0);">
<img class="mini-thumbnail" src="MINI-THUMB-URL3" />
<img class="large-thumbnail" src="LARGE-THUMB-URL3" />
</a>
<a href="javascript:void(0);">
<img class="mini-thumbnail" src="MINI-THUMB-URL4" />
<img class="large-thumbnail" src="LARGE-THUMB-URL4" />
</a>
<a href="javascript:void(0);">
<img class="mini-thumbnail" src="MINI-THUMB-URL5" />
<img class="large-thumbnail" src="LARGE-THUMB-URL5" />
</a>
<a href="javascript:void(0);">
<img class="large-thumbnail feature" src="LARGE-THUMB-URL1" />
</a>
</div>

W tym przykładzie wyszliśmy link pusty (javascript: void (0);), ale można dodać jeden, jeśli chcesz - wystarczy wymienić javascript: void (0); z URL strony / postu. Aby dodać fotki wewnątrz suwaka obrazu wystarczy wymienić MINI-thumb-URL i LARGE-THUMB-URL na teksty z adresem URL obrazów.

Uwaga: Ostatnia LARGE-THUMB-URL1 należy zastąpić URL domyślnego obrazu, który pojawi się tam gdzie suwak. 

Czytaj dalej »

Facebook popup widget

Facebook stał się wiodącym serwisem social media ma ponad 1,3 mld użytkowników; osób, co najmniej raz dziennie karmi się 800 mln logowaniami. Dzięki ogromnej liczbie aktywnych użytkowników na temat usług, takich jak Facebook, pozyskiwanie nowych czytelników jako blogger lub dostawców treści stało się łatwiejsze niż kiedykolwiek. 

W celu wytworzenia skutecznej kampanii cyfrowej, koniecznie musisz skorzystać z mediów społecznych, wykonując takie rzeczy jak integracja Facebooka na Bloggerze. E-mail marketing może być przydatny, ale chodzi o ograniczenia, które mogłyby ograniczyć potencjał bloga. Być może najbardziej znaczącym problemem jest to, że e-maile nie przychodzą z Facebooka. 

Pomyśl o czasie, kiedy otrzymałbyś wiadomość e-mail w skrzynce odbiorczej od kogoś nie znasz. Gdzie jesteś skłonny, aby go otworzyć lub wysłać do folderu spam? Jeśli jest to Twoje pierwsze wprowadzenie do nowego konsumenta, po prostu nie wiem, kim jesteś, czego chcesz, i skąd masz mój adres e-mail. 

Renoma e-mail marketingu pogorszyła się z badań przeprowadzonych przez firmę Kaspersky Lab, firmę badawczą ruchu sieciowego. Szacują oni, że około 70% wszystkich wiadomości e-mail wysyłanych na świecie to spam. 

Udostępnianie treści witryny za pomocą Facebook Like Box jest tylko jednym z wielu strategii, które mogą generować stały przepływ ruchu z różnorodnych położeń demograficznych, które mogły być wcześniej niedostępne.

Jak Dodać Facebook Widget Popup Like It Box

1. Zaloguj się na swoje konto w serwisie Blogger i wybierz swój blog> przejdź do "układu" i kliknij link "Dodaj gadżet" po prawej stronie.

2. Gdy okienko jest otwarte, wybierz HTML / JavaScript gadżet z listy:

3. Kopiuj i wklej następujący kod wewnątrz pustego pola:

 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<style>
#fbox-background {
    display: none;
    background: rgba(0,0,0,0.8);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
}
#fbox-close {
    width: 100%;
    height: 100%;
}
#fbox-display {
    background: #eaeaea;
    border: 5px solid #828282;
    width: 340px;
    height: 230px;
    position: absolute;
    top: 32%;
    left: 37%;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
#fbox-button {
    float: right;
    cursor: pointer;
    position: absolute;
    right: 0px;
    top: 0px;
}
#fbox-button:before {
    content: "CLOSE";
    padding: 5px 8px;
    background: #828282;
    color: #eaeaea;
    font-weight: bold;
    font-size: 10px;
    font-family: Tahoma;
}
#fbox-link,#fbox-link a.visited,#fbox-link a,#fbox-link a:hover {
    color: #aaaaaa;
    font-size: 9px;
    text-decoration: none;
    text-align: center;
    padding: 5px;
}
</style>
<script type='text/javascript'>
//<![CDATA[
jQuery.cookie = function (key, value, options) {
// key and at least value given, set cookie...
if (arguments.length > 1 && String(value) !== "[object Object]") {
options = jQuery.extend({}, options);
if (value === null || value === undefined) {
options.expires = -1;
}
if (typeof options.expires === 'number') {
var days = options.expires, t = options.expires = new Date();
t.setDate(t.getDate() + days);
}
value = String(value);
return (document.cookie = [
encodeURIComponent(key), '=',
options.raw ? value : encodeURIComponent(value),
options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
options.path ? '; path=' + options.path : '',
options.domain ? '; domain=' + options.domain : '',
options.secure ? '; secure' : ''
].join(''));
}
// key and possibly options given, get cookie...
options = value || {};
var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
};
//]]>
</script>
<script type='text/javascript'>
jQuery(document).ready(function($){
if($.cookie('popup_facebook_box') != 'yes'){
$('#fbox-background').delay(5000).fadeIn('medium');
$('#fbox-button, #fbox-close').click(function(){
$('#fbox-background').stop().fadeOut('medium');
});
}
$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 }); });
</script>
<div id='fbox-background'>
<div id='fbox-close'>
</div>
<div id='fbox-display'>
<div id='fbox-button'>
</div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?
href=https://www.facebook.com/blogskrypt&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'
style='border: none; overflow: hidden; background: #fff; width: 339px; height: 200px;'></iframe>
<div id="fbox-link">Powered by <a style="padding-left: 0px;" href="http://helplogger.blogspot.com" rel="nofollow">Helplogger</a></div>
</div>
</div>

4. Naciśnij przycisk "Zapisz", aby dodać widget do swojego bloga.

Dostosowywanie

Po dodaniu kodu, zastąp adres oznaczony na niebiesko https://www.facebook.com/blogskrypt z widoku facebook adresu URL witryny.

Widget pojawi się na 5 sekund po zakończeniu ładowania strony. Jeśli chcesz zmienić opóźnienie, zmienić numer 5000, na większy lub mniejszy numer w tej części:

.delay (5000)

Domyślne okno, pokazuje się po raz pierwszy gdy użytkownik odwiedza stronę. Jeśli chcesz by pole Facebook popup za każdym razem było wczytane na stronie, usuń ten wiersz kodu:

$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });

Jeśli chcesz, aby wyświetlić tylko wtedy, gdy użytkownik odwiedza stronę główną, przejdź do "Szablon"> hit przycisku "Edytuj kod HTML" na prawej stronie i wyszukiwania, klikając w dowolnym miejscu wewnątrz obszaru kodu i naciśnięcie klawiszy CTRL + F dla tego tagu:

</ Body>

Wklej widget facebook tuż nad znacznikiem body 

&lt;b:if cond='data:page.type == "index"'&gt;DODAJ WIDGET FACEBOOK TUTAJ &lt;/b:if&gt;

Po zapisaniu pracy, możesz przetestować swoją nową funkcję, wracając do jednego z starych postów, które powinny przynieść nawet trochę popup widget z pytaniem, czy chcesz dołączyć do witryny stronie na Facebooku. 

Jeśli nie widzisz Facebook Like Box na stronie, może być konieczne, abyś usunął pliki cookie lub należy sprawdzić w sekcji "Dostosowywanie" cel wyświetlania widgetu, gdy użytkownik odwiedza witrynę. Kiedy ten widget jest dodanye do witryny, wszystkie prace powinny zacząć przekładać się na wzrost ruchu w sieci i liczby fanów na Facebooku.

Czytaj dalej »