6 stylowych niestandardowych skrzynek wyszukiwania SEARCH BOXES

Istnieje niepisana zasada w świecie projektowania stron internetowych, które mówi, że każda strona ma pole wyszukiwania. Można i należy, zaprojektować gadżet wyszukiwania niestandardowego, który przyczynia się do wyszukania tematu na stronie, zapewniając jednocześnie kilka kluczowych korzyści zarówno dla klientów i Ciebie.

Korzyści dla Klientów

Search Box nie tylko przyczynia się do zwiększenia użyteczność witryny, ale jest bardzo wygodny dla odwiedzających witrynę i stałych bywalców. Dla tych, którzy byli na stronie, wiedzą, czego chcą i chcą ją teraz szybko pozwiedzać. To są niecierpliwi ludzie, którzy nie czują się dobrze jak mają brodzić myszką klikając w kilka różnych linków. Jeśli nie ogarniasz tego problem możesz ryzykować utratą tych czytelników. Dla nowych klientów, którzy chcą się czuć na stronie komfortowo przed zainwestowaniem większej ilości czasu, daje im on szansę spojrzeć na ich interesy obu stron e-commerce i blogu.

Korzyści dla Ciebie

Dodawanie Custom Search gadżet do Bloggera, być może najlepszych korzyści dla witryn e-commerce, ponieważ jest to przemysł, który z natury oferuje wiele bardzo konkretnych produktów. Na przykład, jeśli sprzedawane jest odzież odzieży i ktoś patrzy tylko na koszule, wyszukiwanie spowoduje przyniesie tylko na koszule tak, że człowiek może spojrzeć na wszystko w jednym miejscu. Blogerzy mogą nie mieć produktu do zaoferowania, ale dodanie gadżetu Custom Search Blogger może pomóc witrynie i SEO analityki. Google Analytics oferuje narzędzie, które będą śledzić wszystkie wyszukiwań wykonywanych przez pasek wyszukiwania, dzięki czemu można korzystać z tych danych w przypadku poprawy swoich słów kluczowych i zawartości wyborów. Roboty sieciowe Google i boty wyszukiwarek również przetestowują frazy w tych polach przy rzadkich okazjach, aby upewnić się, że wszystkie treści prowadzą gdzieś gdzie tworzy zamkniętą pętlę.

DODAJ SWOJĄ wyszukiwarkę na bloga

 

Dlatego, trzeba mieć pasek wyszukiwania, jeśli go nie masz nie oznacza że jesteś ograniczony.. Pasek wyszukiwania powinien być łatwy do znalezienia i łatwo dostępny, gdy ktoś go potrzebuje, ale poza tym wygląd search box jest zależny od Ciebie. Jeśli chcesz dodać gadżet wyszukiwania do niestandardowego Blogger, oto 6 stylowych opcji do wyboru. Wystarczy skopiować poniższy kod i wkleić do okienka pop-up html/javascript, aby dodać, wykonaj następujące czynności:

 

<style>
#searchbox {
    background: #d8d8d8;
    border: 4px solid #e8e8e8;
    padding: 20px 10px;
    width: 250px;
}

input:focus::-webkit-input-placeholder {
    color: transparent;
}

input:focus:-moz-placeholder {
    color: transparent;
}

input:focus::-moz-placeholder {
    color: transparent;
}

#searchbox input {
    outline: none;
}

#searchbox input[type="text"] {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjETiyjLX4sI7We2tzeaykp9usbuQVsUsH6pkETZNDhyfcbNmwISjXmJ5f63f4r1fP0shOSiqJMAbuwjbzcU6Tsry3UK-AUjWEBSxl3dvdMp0IBawYbz4mv8_yptM0d4NBgKJG-rwNPtV2K/s1600/search-dark.png) no-repeat 10px 6px #fff;
    border-width: 1px;
    border-style: solid;
    border-color: #fff;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #bebebe;
    width: 55%;
    padding: 8px 15px 8px 30px;
}

#button-submit {
    background: #6A6F75;
    border-width: 0px;
    padding: 9px 0px;
    width: 23%;
    cursor: pointer;
    font: bold 12px Arial, Helvetica;
    color: #fff;
    text-shadow: 0 1px 0 #555;
}

#button-submit:hover {
    background: #4f5356;
}

#button-submit:active {
    background: #5b5d60;
    outline: none;
}

#button-submit::-moz-focus-inner {
    border: 0;
}
</style>

<form id="searchbox" method="get" action="/search">
<input name="q" type="text" size="15" placeholder="Type here..." />
<input id="button-submit" type="submit" value="Search" />
</form>

<style>
#searchbox {
width: 240px;
}
#searchbox input {
    outline: none;
}
input:focus::-webkit-input-placeholder {
    color: transparent;
}
input:focus:-moz-placeholder {
    color: transparent;
}
input:focus::-moz-placeholder {
    color: transparent;
}
#searchbox input[type="text"] {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjETiyjLX4sI7We2tzeaykp9usbuQVsUsH6pkETZNDhyfcbNmwISjXmJ5f63f4r1fP0shOSiqJMAbuwjbzcU6Tsry3UK-AUjWEBSxl3dvdMp0IBawYbz4mv8_yptM0d4NBgKJG-rwNPtV2K/s1600/search-dark.png) no-repeat 10px 13px #f2f2f2;
border: 2px solid #f2f2f2;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #6A6F75;
    width: 160px;
    padding: 14px 17px 12px 30px;
    -webkit-border-radius: 5px 0px 0px 5px;
    -moz-border-radius: 5px 0px 0px 5px;
    border-radius: 5px 0px 0px 5px;
    text-shadow: 0 2px 3px #fff;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
}
#searchbox input[type="text"]:focus {
background: #f7f7f7;
border: 2px solid #f7f7f7;
width: 200px;
padding-left: 10px;
}
#button-submit{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQp4mgRLluePmIX06Q9UtMM57tObEYAITLLS1xDCKEwWhTuOkbcFdvmPZ0iY-Awa-yrFAvBtAh_GC41Di4BdiDTc_2JpZjvXmmsfzBbaBDFWKZBNA_7orKPol7CUoDpOpSGdUPIdBHJRU7/s1600/slider-arrow-right.png) no-repeat;
margin-left: -40px;
border-width: 0px;
width: 43px;
height: 45px;
}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="Enter keywords here..." />
<input id="button-submit" type="submit" value=" "/>
</form>

<style>
#searchbox {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7meVfHIlksGjVDIlZj6o5Da-1LuaAfpa5uqwr25M2fDw-ZxIJH_yLes-TAdIN33WjI9fIC4U4F05SrlSkQqBJHdnEk8VUpneTxAVxz6r2hEEuRq9zGMUQQl1BvwpCP3YL5TmVVx0JOWpj/s1600/searchbar.png) no-repeat;
width: 208px;
height: 29px;
}
input:focus::-webkit-input-placeholder {
color: transparent;
}
input:focus:-moz-placeholder {
color: transparent;
}
input:focus::-moz-placeholder {
color: transparent;
}
#searchbox input {
outline: none;
}
#searchbox input[type="text"] {
background: transparent;
margin: 3px 0px 0px 20px;
padding: 5px 0px 5px 0px;
border-width: 0px;
font-family: "Arial Narrow", Arial, sans-serif;
font-size: 12px;
color: #828282;
width: 70%;
display: inline-table;
vertical-align: top;
}
#button-submit {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjZaSNBPE8FvFXoCu-RT_wBCBVseRqgmc05nBlW7QX0ub6rMDaW33p_K_7Zer6eBcXE5LjQL-l-Un5ynDiVJhmva_i7cwDucSUlBFEbYmGYHLPA2eUE370eFLFIQE3HHzkJq2S4TAslO8Y/s1600/magnifier.png) no-repeat;
border-width: 0px;
cursor: pointer;
margin-left: 10px;
margin-top: 4px;
width: 21px;
height: 22px;
}
#button-submit:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhorYluV3lRgjX5bLQaUCRYH6x1g-UISZRWL0c13Y9hFAGPtXEw6bYnxs1VD5_3e9diurU8OMJ36nhv7VxgKy2d-DNVue9n9fSX0PoBYQcnt0ha3vFDrP2YxA4mFOphUARMKrOkbNv4YTvH/s1600/magnifier-hover.png) no-repeat;
}
#button-submit:active {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhorYluV3lRgjX5bLQaUCRYH6x1g-UISZRWL0c13Y9hFAGPtXEw6bYnxs1VD5_3e9diurU8OMJ36nhv7VxgKy2d-DNVue9n9fSX0PoBYQcnt0ha3vFDrP2YxA4mFOphUARMKrOkbNv4YTvH/s1600/magnifier-hover.png) no-repeat;
outline: none;
}
#button-submit::-moz-focus-inner {
border: 0;
}
</style>

<form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="search..." />
<input id="button-submit" type="submit" value="" />
</form>

<style>
#searchbox {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA0JHpxkuE_E1xemy4FzffmQQ9BURVIVT1SRcFJjS3sf5nJ2LIHVjxV4qaN8Vjmg60hXoGL_n5vj-IZT4LCt3Ke8Rd_ho9DtJDwV3JWpKqASHRPV9PIpLRGLq9PUxwZ51CEGgOJy_p-PRY/s1600/search-box.png) no-repeat;
    height: 27px;
    width: 202px;
}
input:focus::-webkit-input-placeholder {
    color: transparent;
}
input:focus:-moz-placeholder {
    color: transparent;
}
input:focus::-moz-placeholder {
    color: transparent;
}
#searchbox input {
    outline: none;
}
#searchbox input[type="text"] {
    background: transparent;
    margin: 0px 0px 0px 12px;
    padding: 5px 0px 5px 0px;
    border-width: 0px;
    font-family: "Arial Narrow", Arial, sans-serif;
    font-size: 12px;
    font-style: italic;
    width: 77%;
    color: #828282;
    display: inline-table;
    vertical-align: top;
}
#button-submit {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsXC_j9dNLB63ggCylPNKN2GCSbc8MxEll5Iwilbk86Nr-PNdN-MXievEmxLS_700Lhg7aKpHcdmtpeNZA2MzEeekBs13mHBTi43HSM9bajMDK6Fx8vL57O2TfB2RDsitBRqMWYEXTqAOa/s1600/search-button.png) no-repeat;
    border-width: 0px;
    cursor: pointer;
    width: 30px;
    height: 25px;
}
#button-submit:hover {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheVx2buwEh45AhIJ9XNVfNAkdVC9LGlUJ8w_w5MrxTJJxZQk2dvki4KW5wYFqx_EKDld6Ya7hPr8shwzHyI1i9SbcGjrnJfAMuMDzZCujtXh_r-xPoTbkbgTXXaizeH0m0BNDl8s71jOiw/s1600/search-button-hover.png) no-repeat;
}
#button-submit::-moz-focus-inner {
    border: 0;
}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="search..." />
<input id="button-submit" type="submit" value="" />
</form>

<style>
#searchbox {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnduCZn4nhTZ2siewz1w6ru5NTCGWoXPAMb_UHTVrNu3UeX5m9lkab6GJZFbPL5IQVlrox92XXgrOJcRrTCFxZ-aZbBkcYMNgy5GAMycF89ucvEBUQfpYygIEyPf7Gc4tkKWQ2PNuB8KdL/s1600/search-box1.png) no-repeat;
    width: 250px;
    height: 65px;
}

input:focus::-webkit-input-placeholder {
color: transparent;
}

input:focus:-moz-placeholder {
color: transparent;
}

input:focus::-moz-placeholder {
color: transparent;
}

#searchbox input {
    outline: none;
}

#searchbox input[type="text"] {
    background: transparent;
    padding: 5px 0px 5px 20px;
    margin: 10px 15px 0px 0px;
    border-width: 0px;
    font-family: "Brush Script MT", cursive;
    font-size: 12px;
    color: #595959;
    width: 65%;
    font-weight: bold;
    display: inline-table;
    vertical-align: top;
}

#button-submit {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1xLJ9jLfc8_XxVWHC8jzPUnlp9PnPhNPCgynE9nEWzSZQcB8RBHlizp7VjeBICeFDrlNCfa0HlPJKLF-GNzo0_m07YhzJo2LXKKrwNDJ9b-VrAj9mdI9GYNkaOI06wCCq9BNFWKFWoj0T/s1600/magnifier.png) no-repeat;
    border-width: 0px;
    cursor: pointer;
    margin-top: 10px;
    width: 19px;
    height: 25px;
}

#button-submit:hover {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-VDUcx-_BoICKdjzi3yEY_ia7xTTZ-ppPlt9vY_80GmKqFvguehYW3_NfwxkYqcrl8JKBGcIYdXXNirAD-JthO1rfY5qoC_GshUnV_XLlzQlBtUvoyHCM7sy799lSrAQS2kQ9CpE4UXtK/s1600/magnifier-hover.png) no-repeat;
}

#button-submit:active {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-VDUcx-_BoICKdjzi3yEY_ia7xTTZ-ppPlt9vY_80GmKqFvguehYW3_NfwxkYqcrl8JKBGcIYdXXNirAD-JthO1rfY5qoC_GshUnV_XLlzQlBtUvoyHCM7sy799lSrAQS2kQ9CpE4UXtK/s1600/magnifier-hover.png) no-repeat;
    outline: none;
}

#button-submit::-moz-focus-inner {
    border: 0;
}
</style>

<form id="searchbox" method="get" action="/search" autocomplete="off">
    <input class="textarea" name="q" type="text" size="15" placeholder="Search here..." />
    <input id="button-submit" type="submit" value="" />
</form>

 <style>
#searchbox {
width: 280px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVcha3_WOBC4m42NW4-msxat5DyHEaQsOX1KOUygNT46kb0WXaofSsem_98C9p45nZqYFEaWOhHRT8iOkT0qbAmciwvV_ibTvn10T-9bccIE-rddOOUWsJSPhC0MQqJ_itKqGyoCE6Cg8z/s1600/search-box.png) no-repeat;
}

#searchbox input {
    outline: none;
}

input:focus::-webkit-input-placeholder {
    color: transparent;
}

input:focus:-moz-placeholder {
    color: transparent;
}

input:focus::-moz-placeholder {
    color: transparent;
}
#searchbox input[type="text"] {
background: transparent;
border: 0px;
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
font-size: 14px;
    color: #f2f2f2 !important;
    padding: 10px 35px 10px 20px;
    width: 220px;
}
#searchbox input[type="text"]:focus {
color: #fff;
}

#button-submit{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUOifwQUSUp5MLjU3naig7vZUnIHrOGk97n9RSnlfglocxUh8vs5Ci92bVxskoPNCJYkv8mmDVEBTKnFaRnI09P5tKaJEiWMkb8MmdWkBKKsQxLj3TdjNsVseGz7If90ciJCXHOg3DZqfz/s1600/search-icon.png) no-repeat;
margin-left: -40px;
border-width: 0px;
width: 40px;
height: 50px;
}

#button-submit:hover {
background: url(4.bp.blogspot.com/-yr-iPw6vXWg/VR-zr7-zrmI/AAAAAAAADKU/wo-B33EkrAo/s1600/search-icon-hover.png);
}
</style>

<form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="Enter keywords here..." />
<input id="button-submit" type="submit" value=" "/>
</form>

Kroki: jak dodać niestandardowy Searchj Box na Blogger

Krok 1 . ZALOGUJ SIĘ na Swoje konto w serwisie Blogger, następnie przejdź do układu > kliknij "dodaj gadżet "

Krok 2 . Wybierz HTML / JavaScript w oknie pop-up > wklej kod wewnątrz pustego pola.

Krok 3 . Naciśnij przycisk zapisz.

To jest to!

Nie masz go, 6 stylowe wybory, które pozwoli Ci skorzystać z wszystkich wielkich zalet korzystania z wyszukiwarki, a jednocześnie pomaga swoim blogu wyróżniać. Po dodaniu nowego paska wyszukiwania, użytkownicy będą mogli poruszać się po swojej stronie i dostać się do tego samego miejsca, z wykorzystaniem zarówno okno oraz pasek nawigacji.


Dzięki!




>>> KLIKNIJ poniżej dzieki <<<

Czytaj dalej »

Snow - Spadający śnieg na stronę

Dzisiaj przedstawię wam jak zrobić prosty śnieg na bloga stronę za pomocą CSS.
Wydaje się on szczególnie atrakcyjny, ponieważ nie wymaga skryptów, tylko CSS oraz trzech małych obrazków. Zaletą tej metody jest to, że nie przeciążać bloga używając skryptów, wadą jest to, że użytkownicy nie tak nowoczesnych przeglądarek, nie będą w stanie go zobaczyć (w Internet Explorer w wersji 10 działa i do góry).


Śnieg spada w tle bloga, który dodatkowo zapobiega kolizji z linkami lub treściami (bo płatki są zdjęciami), a także zapobiega blokowaniu widoczność zawartości bloga.

Jak dodać spadający śnieg na bloga

DEMO BLOGA FALLING SNOW

Krok 1. Wejdź w szablon - edytuj kod HTML

Krok 2. Teraz odnajdź <b:skin> ... </b:skin> tak jak poniżej na obrazku  i kliknij w widoczne kropki, aż rozwinie się lista.

Krok 3. dodaj kod powyżej ]]></b:skin>

/* Snow falling for Blogger
----------------------------------------------- */

@keyframes snow {0% {background-position: 0px 0px, 0px 0px, 0px 0px;}100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}}
@-moz-keyframes snow {0% {background-position: 0px 0px, 0px 0px, 0px 0px;}100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}}
@-webkit-keyframes snow {0% {background-position: 0px 0px, 0px 0px, 0px 0px;}100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}}
@-ms-keyframes snow {0% {background-position: 0px 0px, 0px 0px, 0px 0px;}100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}}
#falling-snow {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLe4QhXCN9bgBK4zOmeYTmDk4bbDadL2CQGg0_N3fhUU60Fe2RWCabDkFmCsXiDck-zPr_uIgThmNWOhJQBCRQRPCWnjHoOESbXo2b9F924RFq6F1mhEg51p8GQgDlBwQrJe7lr3jQaNLc/s1600/snow.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPDBrKUSSZc7jAVbve1HkqNsCTmcfY2AL46h45Cxwcdw9qmtbXV-ZwHGmwsm2fGXWa5_Xl-nQkCiVfJbnx0MUt4ACFlKj8fdqzSE8t69wkAHCrff_Y_0-OT-sRW7RBtM5mmNyTHs-8oDzj/s1600/snow3.png), url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit8D-ikkDnwJznifAsrscwdW_MZBf03DuGu7B7ruf7OrwIXcEVcvIJPEjWdWLnuK-EIZvi6JwbrEkDC9mYLy2WuRpPF2jGiCTtRguWHzKI9f071Sm4mcrqltPWqTfYm-FK6SD7S0i26EGM/s1600/snow2.png);-webkit-animation: snow 20s linear infinite;-moz-animation: snow 20s linear infinite;-ms-animation: snow 20s linear infinite;animation: snow 20s linear infinite;}

Krok 4. Znajdź w polu wyszukiwania search blogger <body> tag, jeśli nie możesz go znaleźć użyj poniższego tagu:

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

i dodaj ten kod poniżej:

<div id='falling-snow'>

Krok 5.  Teraz wyszukaj </body> tag i wklej tuż nad nim kod:

</div>

Krok 6. Zapisz szablon i ciesz się śniegiem ! :)

>>> click below for THANKS <<<

Czytaj dalej »

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 »

Jak za pomocą FIREBUG zaprojektować blogger

Dla większości blogerów, grzebanie w szablonie bloggera lub jego dodatkach jest kłopotliwe i dla początkującego użytkownika jest to katorga. HTML5, CSS i inne elementy kodowania są ich własnym językiem dla przeciętnego użytkownika Blogger który chce zaktualizować sobie prywatnie bloga, z automatycznymi ustawieniami są tak dobre, że nie wie jak to się robi. Co zrobić, jeśli nie ma lepszego sposobu, aby zakodować bloga, czy jesteś początkującym lub pro użytkownikiem blogger, wszystko możesz wykonać w tej samej przeglądarce?

Jeśli używasz przeglądarki Firefox lub Chrome, to powinno być łatwe z pomocą Firebug. To pozwala kodować swoją stronę w czasie rzeczywistym, dzięki czemu można zmaksymalizować UX bloga.

Już nie musisz Edytować Przez Bloggera!

Jeśli kiedykolwiek próbowałeś zaktualizować temat Bloggera przez funkcje edycji na stronie internetowej, to wiesz, jak trudne może to być. Możesz obejrzeć swoje projekty, ale nie możesz zapisać zmiany, aby zobaczyć, co oficjalnie stanie się z witryną, aż publikujesz zmiany. Jeśli brakowało tylko jednej linii kodu lub zapomniany został jedynie niewielki element, będziesz musiał wrócić do matrycy edycji, znaleźć błąd, zaktualizować go ponownie, i powtarzać wykonywane czynności od początku.

 Co Firebug pozwala zrobić, to zobaczyć wszystkie z tych elementów, które składają się na strone internetową w czasie rzeczywistym. Zamiast edycji i publikacji, można edytować w czasie rzeczywistym i zobaczyć aktualizacje na bieżąco, a wszystko to bez wpływu na doświadczenie użytkowników odwiedzających, którzy odwiedzają witrynę, podczas edytowania. Szybko można zmienić czcionki, kolory, lub projekt witryny i zobaczyć wyniki swojej pracy. Nie podoba ci się? Wystarczy cofnąć zmiany. 

To naprawdę takie proste.

Korzystanie z Firebug Dostosowując CSS w Bloggerze

Ten poradnik pokaże Ci, jak zmodyfikować kod CSS szablonu Blogger. Zazwyczaj, deklaracje stylów CSS Blogger Template są edytowalne przez plik style.css, czyli to co możesz znaleźć między tagami <b: skin> i </ b: skin> . 

Aby pobrać Firebug i uzyskać więcej szczegółów dotyczących zaawansowanych funkcji, odwiedź: Firebug dla Firefoksa lub jeśli używasz Chrome, pobierz aplikację Firebug Lite. Polecam używać Firefox, który jest bardziej kompletny i szybki, ale jednak, oba działają tak samo. 

Po zainstalowaniu Firebug, dostępna będzie mała ikona w prawym górnym rogu paska adresu przeglądarki internetowej. Kliknięcie na nią podzieli poziomo ekran, pojawi się na dole okna przeglądarki. Strona nadal będzie pokazywała się w górnej połowie, a dolna połowa pokaże HTML bieżącej strony internetowej.

Aby dostosować każdy element z szablonu Blogger, wystarczy kliknąć albo na ikonę Firebug na pasku narzędzi lub "Sprawdź Element z Firebug" pozycji w menu kontekstowym. Następnie kliknij niebieski przycisk kursora do wglądu i umieścić kursor nad elementem, aby dostosować. 

Na przykład, powiedzmy, że chcemy zmienić tytuł "Blog Archive" gadżetu. Po kliknięciu na przycisk myszy da nam wgląd na tytuł "Blog Archive" , który zostanie podświetlony, jak pokazano na poniższym zrzucie ekranu. Aby zmienić ten element, kliknij na niego:

Teraz, zdecydowaliśmy, który element chcemy zmienić, kliknij prawym przyciskiem na panelu "Style" i wybrać opcję "add rule":

To daje klasę lub identyfikator elementu wyróżnionego - w naszym przypadku, nagłówek blogu Archiwum (# BlogArchive1> h2). Aby edytować tę regułę, kliknij w dowolnym miejscu w pobliżu nawiasu klamrowego, w którym zostanie otwarte pole tekstowe, także możemy wpisać nową deklarację CSS:

I tu zaczyna się zabawa. Powiedzmy, że chcemy, aby był czerwony tytułu. Wpisz kolor i naciśnij klawisz Enter, a następnie wpisz wartość koloru lub czerwony tekst i naciśnij Enter. Możesz również ustawiać rozmiar czcionki na 20 pikseli, wyrównanie tekstu do centrum (text-align: center) i zrobić tekst podkreślony (text-decoration: underline):

Świetną rzeczą jest to, że nigdy Firebug modyfikuje żadnych właściwości CSS, można zobaczyć wyniki bezpośrednio stosowane na stronie. Tak więc, po dodaniu tych deklaracji, zobaczymy duży czerwony podkreślnik dla tytułu naszego Blog Archive (zobacz na zrzucie ekranu powyżej). Aby zastosować tę regułę CSS szablonu Blogger, wystarczy ją wybrać począwszy od prawego wspornika i kręcone do # (id) lub (class) symbol, a następnie kliknij prawym przyciskiem myszy i skopiować kod CSS.

Przed dokonaniem jakichkolwiek zmian, zaleca się, aby zrobić kopię zapasową bieżącego szablonu bloggera. Przejdź do "ustawienia > inne" i kliknij przycisk "eksportuj bloga".

 W tym samym miejscu "Szablon", kliknij na przycisk "Dostosuj" i przejdź do "Zaawansowane"> "Dodaj CSS". Wklej regułę CSS, który właśnie został skopiowana w polu CSS:

Kliknij przycisk "Zastosuj do bloga" w prawym górnym rogu, aby zapisać zmiany i zobaczyć swój blog.

Firebug daje także wyraźną przewagę ...

Jednym z najlepszych powodów, aby zainstalować Firebug do przeglądarki Chrome lub Firefox jest to, że pozwala naśladować niektóre wzory szybko i łatwo z Twoich ulubionych stron . Zamiast zatrudniania projektanta witryn internetowych do pracy, które mogą kosztować tysiące, można po prostu uruchomić Firebug i zobaczyć, co są style CSS dla ulubionej witryny. Pozwala to na stworzenie podobnego widget. Stamtąd, można zobaczyć wszystko co masz zrobić, aby zmienić kodowanie, aby elementy konstrukcyjne pracowały zgodnie z przepisami własnego custom.css. Oznacza to, że można dokonać prostych zmian w projekcie na swoim blogu Blogger, bez konieczności przechodzenia przez wszystkie menu i funkcje edycji, że szablon może naprawdę może być własny wg własnego upodobania. Czy masz coś do zrobienia? Pewnie - ale Firebug to wszystko dla pierwotnej pracy w sam raz dla Ciebie. Wszystko co musisz zrobić, to mieć twórczy umysł i kilka minut do wprowadzania zmian w konstrukcji kodującej. Czy kodujesz od lat czy dopiero zaczynasz swojego pierwszego bloga, jest to zdecydowanie najlepszy sposób, aby upewnić się, że użytkownicy firebug mają najlepsze doświadczenia !

Czytaj dalej »

Program Partnerski ExoClick - alternatywą dla Adsense

Wiele osób posiada strony / blogi o rozmaitej treści. Wielu poprzez własne lub czyjeś złe maniery klikania "masowego" w reklamy Adsense zostali wynagrodzeni przez Google Zablokowaniem konta jako wydawcy w Google Adsense.. i tym oto sposobem desperacja po przeczytaniu wiadomości od Google doprowadza użytkownika chcącego zarobić do tego, aby znaleźć "inny" program partnerski wydawcy reklam na stronie. 

Czy prowadzisz stronę zwykłą, portal, stronę dla dorosłych ta sieć jest dla Ciebie!

reklamy o wielu kategoriach: porno, randkowe, socjalne, pobrania plików 

Tym oto sposobem przeszukiwanie Google staje się priorytetem w celu znalezienia odpowiedniego dobrze płatnego programu partnerskiego, który jest popularny w sieci - proponuję ExoClick

czym właściwie jest Exoclick?

Jest to program pozwalający zarabiać na treściach wyświetlanych reklam na stronie.
Bardzo skuteczny i odpowiedni dla każdego kto doznał złych przygód z Adsense.

po krutce przybliżę co oferuje ten program partnerski ExoClick, otóż:

Zwiększyć swoje dochody reklam od dziś zarabiając w EURO z ExoClick!

Reklamy są zabezpieczone możesz:

• Ręcznie lub automatycznie sprawdzać każdą kampanię
• Generować tagi reklam w HTTPS.

Globalny zasięg - zapewnia najlepsze rozwiązania by zarabiać na ruchu w sieci

Płatności on-line - płatności naliczane w EURO! natychmiastowe, tygodniowe, miesięczne poprzez:

 

 Statystyki w czasie rzeczywistym, 24/7 dni support, Bezpieczne reklamy

dostęp do Konta ExoClick za pomocą aplikacji Android

Pobierz tutaj

WIELOFORMATOWE REKLAMY NA STRONĘ I BLOGA

klasyczne reklamy o formatach: 300x250, 468x60, 728x90, 250x250, 120x600, 160x600, 315x300

reklama instant bardzo efektywna na portalach randkowych oraz innych

1204x768 popunder to druga reklama o największym użyciu w sieci

300x250 oraz 468x60reklama video

reklama bezpośrednia pozwalająca zwiększyć ruch na stronie

Reklama wyświetlana pomiędzy ładowaniem się stron

reklama CPC 100x100px dla podwyższenia CTR 

Zapisz się klikając w banner poniżej !

Program jest skuteczny i działający łatwo i prosto zamieścisz reklamy na jednej lub wielu stronach !

Czytaj dalej »