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 »

TOP : Zakładki społecznościowe w pobliżu reklamy adsense +CTR

Główne zaletą tego widgeta jest to, że można zwiększyć swoje wrażenia z AdSense wraz z podwyższeniem wejść CTR - i oczywiście, wypełni to puste miejsce obok jednostek reklamowych AdSense, by Twój blog wyglądał bardziej atrakcyjnie.

Dodawanie przycisków social bookmarking na górze blogger postu, jest łatwiejsze, gdyż czytelnicy chcą dzielić swoje posty za pośrednictwem portali.
Widget zawiera przyciski na Del.icio.us, Twitter, Facebook, StumbleUpon, Technorati i Digg. Jak dodać ten widżet: 

1. Po pierwsze, zaloguj się do swojego Bloggera i przejść do szablonu, a następnie kliknij przycisk Edytuj HTML (nie zapomnij zrobić kopię zapasową szablonu) 

2. Szukaj (CTRL + F) dla po tagu:

 ]]></b:skin>

3. Wklej następujący kod CSS tuż nad nim:

 .ads{margin-bottom:10px; border-top:solid 1px #DEDEDE; padding-top:10px; font-size:13px;}
.ads-right-min{border-left:solid 1px #DEDEDE; height:250px; padding-left:10px;}
.ads-right-min a:link,
.ads-right-min a:visited,
.bottom-share-links a:link,
.bottom-share-links a:visited{
font-size:12px;
color:#222;
display:block;
height:22px;
line-height:22px;
margin-bottom:16px;
padding-left:32px;
}
.ads-right-min a:hover,
.bottom-share-links a:hover{color:#666;}
.mini-tech{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitfr3cN1Nc_gySAlEXUzXLO4bQb-USqQdzaFioSdk_sRUVgPPKW8uRSn32mXiG6v-UBbBmQLtRaTC2LWxMi7TY2xr8mzZgfQB58AV2qkQqK6jHHnsC7OGjysEz4_4qriwWLnsP9LoI55Vz/s1600/technorati.gif) no-repeat;}
.mini-facebook{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXlJnXtusyYXxZ-OY0OeoVwdYC8XiEWjKMt0nU-qC6b8nG2HWkF1GPMLdlRzAge6OIuiTfUIKxbUKdMAkvbvujXUy4QcMNWn3s5fxiZPoD_yRfefovFjSJYRnI7TbpfoC0yPmvyvIxlm60/s1600/facebook.gif) no-repeat;}
.mini-tweet{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvyI0bmj1t6CmAMbpC_zwre9LsJhSzSxC8kIBg6frRQwWDshRWoJ6CdQpyw-h2kMnWU7pmQwuyCFWpnsCqrwxNQ-Msp_Rk66KV-CjuaKbKPlKvdW96wPWx28dhhWfCDX-K8uQy4r3IIQvk/s1600/tweet.gif) no-repeat;}
.mini-del{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7UDwiBFwuwqECwLXciQvMlZkof5RTQbhdFJLAO8AqFjwhoBMRs-L47P_ZllG6NON5eXeWsuDEktU6VGqerOIWtYFsHYatoyM5QJG_BrLJ1lrIJUknonyOkKWQE3dKMl9euP1oYS4Jdpge/s1600/delicious.jpg) no-repeat;}
.mini-stumble{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQpMMmlKv5JrwiNCIzeovogqTGjTuOtb8DGn4gRr1zGZAe-Tsxp4tW9vee9Urcvz4HQSc7lwUrfPesqMPLknjlalrSbWvNNKTKE43cmjr6_NqOe3WAs4Kwh-_lBEEKZAhQxbBiKOdQqXuo/s1600/stumbleupon.png) no-repeat;}
.mini-digg{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYZCiZUp5nSvMq1_q1FitTlv-chkWZSjVF6nPTZMhyWtNZ14i0UJPpXcR8-652d2_jcChQY5KIm5Ws8wSTxBdVpxD4i_1h29eSp7206N4N_fmdGkSn4CsMaYMjMWRLw0WhiqCIMBcU_hhA/s1600/Digg.png) no-repeat;}

4. Teraz szukać - za pomocą "CTRL + F" - z następujących linii:

<div class='post-body entry-content'> 

Jeśli nie możesz go znaleźć, szukać tego:

 <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>

5. Dodaj następujący kod bezpośrednio pod nim:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='ads'>
<table border='0' cellpadding='0' cellspacing='0' width='100%'>
<tr>
<td width='354'>
&lt;script type=&#39;text/javascript&#39;&gt;&lt;!--
google_ad_client=&quot;pub-YOUR PUBLISHER ID&quot;;
google_ad_host=&quot;pub-4139113537490172&quot;;
google_ad_width=300;
google_ad_height=250;
google_ad_format=&quot;300x250_as&quot;;
google_ad_type=&quot;text_image&quot;;
google_ad_host_channel=&quot;0001&quot;;
google_color_border=&quot;FFFFFF&quot;;
google_color_bg=&quot;FFFFFF&quot;;
google_color_link=&quot;0000FF&quot;;
google_color_url=&quot;008000&quot;;
google_color_text=&quot;000000&quot;;
//--&gt;&lt;/script&gt;
&lt;script src=&#39;http://pagead2.googlesyndication.com/pagead/show_ads.js&#39; type=&#39;text/javascript&#39;&gt;
&lt;/script&gt;
</td>
<td><div class='ads-right-min'>
<a class='mini-del' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Add To Del.icio.us'>Add This To Del.icio.us</a>
<a class='mini-tweet' expr:href='&quot;http://twitter.com/home?status=Reading &quot; + data:post.title + &quot; &quot; + data:post.url' target='_blank' title='Post this article on Twitter'>Tweet/ReTweet This</a>
<a class='mini-facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Share On Facebook'>Share on Facebook</a>
<a class='mini-stumble' expr:href='&quot;http://www.stumbleupon.com/refer.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Stumble This'>StumbleUpon This</a>
<a class='mini-tech' expr:href='&quot;http://www.technorati.com/faves?add=&quot; + data:post.url' target='_blank' title='Add To Technorati'>Add to Technorati</a>
<a class='mini-digg' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Digg This'>Digg This</a>
</div>
</td>
</tr>
</table>
</div>
</b:if> 

Wymień YOUR PUBLISHER ID ze swoim kontem AdSense ID. Znajdziesz go w zakładce Home, na stronie "Ustawienia konta".

Powinno to wyglądać mniej więcej tak:  pub-4139113537490172 (skopiuj swoje numery ID ADSENSE, a następnie musisz wkleić je tam gdzie jest YOUR PUBLISHER ID )

6. Zapisz szablon ... i po prostu pójdź do jednego z Twojego postów, aby zobaczyć zmiany.

>>> 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 dodać galerię miniatur obrazów / zdjęć w Bloggerze

Dla tych, którzy chcieliby, zobaczyć zdjęcie w galerii, mam  galerię wykonaną w JavaScript i CSS. Ta galeria zdjęć wyświetla dostępne miniatury pionowo lub poziomo na górze wybranego obrazu, dzięki czemu łatwiej jest wybrać różne obrazy. 

Jak dodać galerię z miniaturami do Bloggera?

Krok 1. Zaloguj się na konto Bloggera, wybierz bloga i przejdź do edycji HTML szablon >

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

Krok 3. Wpisz następujące tag wewnątrz pola wyszukiwania i naciśnij Enter, aby go znaleźć:

</head>

Krok 4. Teraz wybierz jeden z poniższych stylów i skopiuj kod poniżej niego: 

Styl 1

<style type='text/css'>
#image-gallery {display: none;}
  #jquery-gallery {padding:0;margin:0;list-style: none; width: 500px;}
  #jquery-gallery li {width:84px; height: 80px;background-size: 100%;-webkit-background-size: cover;-moz-background-size: cover; -o-background-size: cover;background-size: cover;margin-right: 10px; border: 3px solid #fff; outline: 1px solid #E3E3E3; margin-bottom: 10px;opacity: .5; filter:alpha(opacity=50); float: left; display: block; }
#jquery-gallery li img { position: absolute; top: 100px; left: 0px; display: none;}
  #jquery-gallery li.active img { display: block; border: 3px solid #fff; outline: 1px solid #E3E3E3; width:490px; max-height: 375px;}
  #jquery-gallery li.active, #jquery-gallery li:hover { outline-color: #DFDFDF; opacity: .99;filter:alpha(opacity=99);}
#gallery-caption { position: absolute;color: #000;font-weight: bold;background: #FFFFFF; font-size: 16px; bottom: 0px;} </style>

Styl 2

<style type='text/css'>
#image-gallery { display: none; }
#jquery-gallery {padding:0;margin:0;list-style: none; width: 200px; }
#jquery-gallery li {background-size: 100%;-webkit-background-size: cover;-moz-background-size: cover; -o-background-size: cover;background-size: cover;margin-right: 10px; width: 80px; height: 80px; border: 3px solid #fff; outline: 1px solid #ddd; margin-right: 10px; margin-bottom: 10px; opacity: .5;filter:alpha(opacity=50); float: left; display: block; }
#jquery-gallery li img { position: absolute; top: 0px; left: 200px; display: none; }
#jquery-gallery li.active img { display: block; width:370px; border: 3px solid #fff; outline: 1px solid #E3E3E3; }
#jquery-gallery li.active, #jquery-gallery li:hover { outline-color: #bbb; opacity: .99;filter:alpha(opacity=99);}
#gallery-caption { position: absolute; right: 50px;color: #000;background: #FFFFFF;font-weight: bold; font-size: 16px; top: 0px;} </style>

Uwaga: display: none; pierwszego ID (# image-gallery) jest zapobieganie by obrazy pojawiające się w ich rzeczywistej wielkości, zanim pójdą wewnątrz ramy galerii, podczas ładowania kodu. W # jquery-gallery ustalona jest szerokość  miniaturek (200px), tak, aby były one wyświetlane w dwóch rzędach i  musimy liczyć  się z szerokością miniatury (80px) plus margines między nimi.Opuścił deklaracja # jquery-galerii li img jest przeniesienie większej miniaturę, który pokazuje się poprzez kliknięcie myszy tak, że nie będzie się pokrywać z mniejszymi miniaturkami.

Krok 5. Wklej kod wybranego stylu tuż nad </ head> tag.

Krok 6. Teraz nad tym samym </ head>, dodać ten skrypt:

 <script type='text/javascript'>
//<![CDATA[
var gal = {
init : function() {
if (!document.getElementById || !document.createElement || !document.appendChild) return false;
if (document.getElementById('image-gallery')) document.getElementById('image-gallery').id = 'jquery-gallery';
var li = document.getElementById('jquery-gallery').getElementsByTagName('li');
li[0].className = 'active';
for (i=0; i<li.length; i++) {
li[i].style.backgroundImage = 'url(' + li[i].getElementsByTagName('img')[0].src + ')';
li[i].title = li[i].getElementsByTagName('img')[0].alt;
gal.addEvent(li[i],'click',function() {
var im = document.getElementById('jquery-gallery').getElementsByTagName('li');
for (j=0; j<im.length; j++) {
im[j].className = '';
}
this.className = 'active';
document.getElementById('gallery-caption').innerHTML = this.title; });
}
},
addEvent : function(obj, type, fn) {
if (obj.addEventListener) {
obj.addEventListener(type, fn, false);
}
else if (obj.attachEvent) {
obj["e"+type+fn] = fn;
obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
obj.attachEvent("on"+type, obj[type+fn]);
}
}
}
gal.addEvent(window,'load', function() {
gal.init();
});
//]]>
</script>

Przede wszystkim, co robi ten skrypt, czy istnieje identyfikator o nazwie "image-gallery" i jak uzyskać różne elementy listy, które mogą znajdować się w niej. Elementy te zostaną wyświetlone w formie miniatur, a funkcja będzie decydować, co zrobić, gdy są one aktywne. Tak, że za każdym razem klikając na miniaturkę, "aktywną" klasy zostaną przypisane i miniatur powinny być widoczne w większej ramce.

Krok 7. Wreszcie, zapisz zmiany klikając przycisk "Zapisz szablon". A oto kod HTML zapewnienie normalnego listę z galerii obrazu ID, zamknięty w DIV o względnej pozycji, tak, że będzie uniknąć skutków ubocznych innych już istniejących stanowisk.

Krok 8. wklej poniższy kod HTML, w którym chcesz, aby wyświetlić galerię przechodząc albo układ i dodanie nowego gadżetu (kliknij na układ > Dodaj gadżet i wybierz HTML / JavaScript), lub wklej wewnątrz postu / stronie w sekcji HTML poniższy kod.

 <div style="position:relative;">
<ul id="image-gallery">
<li><img src="IMAGE-URL1" /></li>
<li><img src="IMAGE-URL2" /></li>
<li><img src="IMAGE-URL3" /></li>
<li><img src="IMAGE-URL4" /></li>
<li><img src="IMAGE-URL5" /></li>
</ul>
</div>

Uwaga: jeśli elementy na stronie pokrywania się w galerii, może być konieczne, aby dodać deklarację wysokość po "position: relative;"

<div style="position:relative; height: 500px;"> 

Zmiana IMAGE-URL1 na adres URL obrazu.

W tym przypadku trzeba dodawać linki do zdjęć, aby dodać tę strukturę HTML:

 <div style="position:relative;">
<ul id="image-gallery">
<li><a href="page-URL"><img src="IMAGE-URL1" /></a></li>
<li><a href="page-URL"><img src="IMAGE-URL2" /></a></li>
<li><a href="page-URL"><img src="IMAGE-URL3" /></a></li>
<li><a href="page-URL"><img src="IMAGE-URL4" /></a></li>
<li><a href="page-URL"><img src="IMAGE-URL5" /></a></li>
</ul>
</div>

Ponownie, tutaj trzeba zastąpić tekst strona-URL z adresem URL strony / postu.

Aktualizacja: Aby dodać napisy, proszę pomarańczowe linie zastąpić "Caption" na tekst który ma się pojawić na wybranym zdjęciu :

<div style="position:relative;">
<ul id="image-gallery">
<li><a href="page-URL"><img alt="Caption" src="IMAGE-URL1" /></a></li>
<li><a href="page-URL"><img alt="Caption" src="IMAGE-URL2" /></a></li>
<li><a href="page-URL"><img alt="Caption" src="IMAGE-URL3" /></a></li>
<li><a href="page-URL"><img alt="Caption" src="IMAGE-URL4" /></a></li>
<li><a href="page-URL"><img alt="Caption" src="IMAGE-URL5" /></a></li>
</ul>
<div id="gallery-caption"></div> </div>

Zapisz widget lub opublikuj swoją stronę i gotowe!

Czytaj dalej »

Spacegallery

Spacegallery: Galeria zdjęć / pokaz wykonany z jQuery

Istnieje wiele rodzajów galerii zdjęć, które można znaleźć w internecie, ale rzadko można znaleźć jeden z wyświetlaniem obrazów w tak różny jak ten. Osoby korzystające z systemu Mac OS X z pewnością odczują wiele podobieństw z Time Machine, a tych, którzy tego nie znają, na pewno będą korzystać z tego typu efektu do przeglądania obrazów. SpaceGallery jest oparte na jQuery galeria obrazu, który wykonuje nakładanie się w atrakcyjny wizualny sposób i zapewnia płynne zanikanie przechodzące na obrazy. Ta 3D galeria zdjęć pozwala z łatwością zainteresować odwiedzających, zdjęcia powiększają się jak w animacji. Aby zobaczyć pokaz slajdów SpaceGallery w akcji, prosimy odwiedzić ten blog demo i kliknij na pierwszym obrazie:

DEMO

Jak dodać Spacegallery pokaz slajdów zdjęć na Blogger

W celu realizacji tej galerii jest bardzo proste. Po prostu wykonaj następujące czynności:

Krok 1. Zaloguj się na konto Blogger i wybierz swój blog. Następnie przejdź do szablonu i kliknij przycisk Edytuj HTML:

Krok 2. Kliknij w dowolnym miejscu na obszarze kodu i wyszukiwanie za pomocą klawiszy CTRL + F tego tagu

</ Head>

Krok 3. Tuż przed / nad </ head>, wklej następujący skrypt:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/> <script src='http://helplogger.googlecode.com/svn/trunk/SpaceGallery/eye.js' type='text/javascript'/>
<script src='http://helplogger.googlecode.com/svn/trunk/SpaceGallery/utils.js' type='text/javascript'/>
<script src='http://helplogger.googlecode.com/svn/trunk/SpaceGallery/spacegallery.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
(function($){
var initLayout = function() {
var hash = window.location.hash.replace('#', '');
var currentTab = $('ul.navigationTabs a')
.bind('click', showTab)
.filter('a[rel=' + hash + ']');
if (currentTab.size() == 0) {
currentTab = $('ul.navigationTabs a:first');
}
showTab.apply(currentTab.get(0));
$('#myGallery').spacegallery({loadingClass: 'loading'});
};
var showTab = function(e) {
var tabIndex = $('ul.navigationTabs a')
.removeClass('active')
.index(this);
$(this)
.addClass('active')
.blur();
$('div.tab')
.hide()
.eq(tabIndex)
.show();
};
EYE.register(initLayout, 'init');
})(jQuery)
//]]>
</script>

Uwaga: jeśli masz już jQuery w szablonie, należy usunąć linię w kolorze czerwonym.

Krok 4. Następnie wyszukiwania (Ctrl + F) dla tego tagu:

]]></b:skin>

Krok 5. Przed tagiem  ]]> </ b: skin> , wklej następujący styl CSS:

#myGallery {
width: 100%;
height: 400px;
}
#myGallery img {
border: 2px solid #52697E;
}
a.loading {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEMvVbwKK4_mFDth0HsNR54d-Lb-n-ScUL6mnyQwaW1cfFReH7Af-BpWAawp8EvmUTwoLNN1e2bE6l_J0XMw9YBx2SwJ1gpti1luqB2zetmpRI6m4Za7y0QDauS8p2TJS2jPYjmGw1bD1j/s1600/ajax_small.gif) no-repeat center;
}
.spacegallery {
position: relative;
overflow: hidden;
}
.spacegallery img {
position: absolute;
left: 50%;
}
.spacegallery a {
position: absolute;
z-index: 1000;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Krok 6. Kliknij na przycisk Zapisz, aby zapisać szablon.

Krok 7. Wreszcie zmiany. Teraz przejdź do układu > Dodaj gadżet HTML / Javascript > skopiuj i wklei w okno poniższy kod:

<div class="spacegallery" id="myGallery">
<img src="Image URL"/>
<img src="Image URL"/>
<img src="Image URL"/>
<img src="Image URL"/>
<img src="Image URL"/>
</div>

Zastąp tekst Image URL na adresy grafik, które mają pojawić się w galerii, biorąc pod uwagę, że ostatni obraz jest pierwszym, który zostanie wyświetlony. Jeśli chcesz dodać ten pokaz slajdów wewnątrz słupka, przejdź do panelu i utworzyć nową wiadomość, a następnie wklei kod w sekcji HTML. To jest to! Teraz możesz cieszyć się tą prostą galerię zdjęć na swoim blogu i mimo, że nie ma opcji lub ustawienia ekranu, to jest bez wątpienia galerię, która będzie zwrócić uwagę czytelników. 

rada:  jeśli masz problem z grafiką to zmień te dwie wartości w punkcie piątym ( Krok 5 ) na odpowiednie dla rozmiarów twoich zdjęć/obrazów. width: 100% - będzie równe wartości height: 400px. czyli obrazka 400x400pikseli

width: 100%;
height: 400px;

możesz dopasować rozmiary następująco, np. 

width: 750px;
height: 400px;

i tak dalej...

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 »