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 »

Przycisk „przewiń do góry”

Szybki tutorial JavaScript używający jQuery do wyświetlenia przycisku „skocz na górę strony”.

Opis:

– przeźroczysta ikonka ze strzałką pojawia się po przewinięciu strony o zadaną wysokość (np. 200px) i znika po powrocie na samą górę,
– po najechaniu myszką ikonka staje się bardziej widoczna (mniej przeźroczysta)
– po kliknięciu w ikonkę uruchamia się płynne przejście użytkownika na samą górę strony

Przykład:

– na tym blogu (przewiń stronę trochę niżej aby zobaczyć)

1. Pobierz ikonkę:

(kliknij prawym przyciskiem myszy i wybierz „zapisz element docelowy / grafikę jako”) 

2. Dodaj kod HTML do swojego nagłówka strony (lub sam kod CSS umieść w pliku ze stylem strony):

<style type=”text/css”>
#scroolTOP { display: none;position: fixed; z-index:99999; right: 20px; bottom: 20px;border:0px; }
.gototop_icon_i { width:45px;height:45px; }
</style>

3. Dodaj jQuery do swojej strony/bloga :

można to zrobić na dwa sposoby:

– pobrać skrypt bezpośrednio ze strony: http://code.jquery.com/jquery-1.10.2.min.js i umieścić w kodzie strony

LUB

- dodać kod do nagłówka strony (sekcja HEAD):

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

4. Dodaj skrypt JavaScript:

Podobnie jak CSS, możesz wstawić fragment skryptu bezpośrednio do nagłówka strony, lub skopiować go do pliku ze skryptami js strony:

<script type="text/javascript">
var gototop_icon = "#Twój URL obrazka";
var gototop_run = false;
jQuery(window).scroll(function(){ //scrool
var scrollTop = jQuery(window).scrollTop();
if ( scrollTop>200 ) { // pokaz
if ( ! gototop_run ) {
gototop_run = true;
jQuery('body').append('<a id="scroolTOP" href="#"><img src="'+gototop_icon+'" class="gototop_icon_i" alt="TOP"></a>');
jQuery('#scroolTOP').fadeTo('quick', 0.2);
jQuery('#scroolTOP').mouseover(function(){ jQuery(this).fadeTo(100, 0.6); })
.mouseout(function(){ jQuery(this).fadeTo(100, 0.2); });
jQuery('#scroolTOP').click(function(){
jQuery("html, body").animate({ 'scrollTop': 0 }, 500);
return false;
});
}
} else { // ukryj
if ( jQuery('#scroolTOP').length>0 ) jQuery('#scroolTOP').fadeOut('quick').remove();
gototop_run = false;
}
}); //scrool
</script>

UWAGA! Pamiętaj aby edytować zmienną „gototop_icon” (pierwsza linia skryptu) i wkleić tam ścieżkę do pobranej wcześniej ikonki oczywiście, możesz wstawić dowolną ikonę.

TO TYLE !

Czytaj dalej »

Zrób rollover - naprzemienny obrazek po najeździe kursorem

Jak zrobić obrazek podczas najechania kursorem na obrazek który będzie się zmieniał?

tak więc jest to banalnie proste i podzielę się tym efektem:

 ten kod:

<a href="URL ADRES"><img src="URL PIERWSZEGO OBRAZKA" onmouseover="this.src='URL DRUGIEGO OBRAZKA'" onmouseout="this.src='URL PIERWSZEGO OBRAZKA'" /></a>

  objaśnienie: 

1) URL ADRES - adres twojej strony, moja strona to http://blogskrypt.blogspot.com

2) URL PIERWSZEGO OBRAZKA - tutaj wklej link do pierwszego obrazka

3)  URL DRUGIEGO OBRAZKA - tutaj wklej link do drugiego obrazka który będzie się wyświetlał po najechaniu na pierwszy obrazek kursorem myszki

Kod ten możesz zamieścić w treści HTML/JavaScript. Menu główne układ -> dodaj gadżet -> HTML/JavaScript i ustaw go tam gdzie chcesz.. nawet w postach, które dodajesz w edycji HTML

..to wszystko Ciesz się swoim obrazkiem !

Czytaj dalej »

Stylowy wygląd bloga - Magazyn

Styl magazynowy to jeden z najlepszych wyglądów jaki może mieć blogger opisujący wydarzenia sytuacje itd. 

Jak stworzyć magazynowy wygląd bloga. O tym już za chwilę na samym początku przeczytaj ważny dla tego kodu poradnik. Kliknij tutaj

 

Na samym początku przed wykonaniem jakiejkolwiek czynności zapisz swój blog na dysku Jak zapisać swój blog na dysku wejdź tutaj w razie jakiejkolwiek komplikacji lub niepowodzenia będziesz mógł go przywrócić Jak przywrócić swój blog wejdź tutaj. 

Oto jak wygląda taki blog PRZYKŁAD DEMO

krok 1:

udaj się teraz do menu bloggera i wybierz szablon i edytuj kod HTML

krok 2:

Kliknij gdziekolwiek w kodzie i naciśnij crtl + f , aby wyskoczyło okienko wyszukiwania blogger

kliknij w nim i wyszukaj wiersza:

<data:post.body/>

nota: znajdziesz więcej niż jeden taki kod, zatrzymaj się na drugim

krok 3

Zaznacz drugi kod <data:post.body/> i zamień go na poniższy kod

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
 <span class='post-comment-link'><b:if cond='data:blog.pageType != &quot;item&quot;'><b:if cond='data:post.allowComments'><a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a></b:if></b:if></span>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
  <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span class='readmorebutton' style='float:right'><a expr:href='data:post.url'>czytaj więcej &#187;</a></span></b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

krok 4

teraz w kodzie znajdź wiersz ( wklej go w okienko wyszukiwania )

<b:include data='post' name='post'/>

i zamień go ta ten kod :

<b:if cond='data:post.isFirstPost'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<div id='first'>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
<div class='first-body'>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div expr:id='&quot;summary1&quot; + data:post.id'><data:post.body/></div>
  <script type='text/javascript'>createSummaryAndThumb1(&quot;summary1<data:post.id/>&quot;);</script>
<span class='post-comment-link'><b:if cond='data:blog.pageType != &quot;item&quot;'><b:if cond='data:post.allowComments'><a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a></b:if></b:if></span>
<span class='readmorebutton' style='float:right'><a expr:href='data:post.url'>czytaj więcej &#187;</a></span>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

</div>
</div>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

krok 5

teraz w wyszukiwarce wpisz poniższy kod:

</head>

i tuż przed nim wklej ten kod:

 <script type='text/javascript'>
posts_no_thumb_sum = 290;
posts_thumb_sum = 240;
img_thumb_height = 80;
img_thumb_width = 80;
first_no_thumb_sum = 580;
first_thumb_sum = 450;
img_thumb_height1 = 145;
img_thumb_width1 = 165;
</script>

<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = posts_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="posts-thumb" style="float:left;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = posts_thumb_sum;
}

  var summary = imgtag + '<div class="summary">' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}

function createSummaryAndThumb1(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = first_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="first-post-thumb" style="float:left;"><img src="'+img[0].src+'" width="'+img_thumb_width1+'px" height="'+img_thumb_height1+'px"/></span>';
summ = first_thumb_sum;
}

var summary1 = imgtag + '<div class="summary">' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary1;
}

//]]>
</script>

krok 7

teraz poniżej kodu tego kodu który wkleiłeś, doklej ten kod:

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
.first-post-thumb {
    margin-right: 10px;
}

.summary {
    height: 100%;
}

#first { /* Styles for the First Post Container */
    width: auto;
    height: 250px;
    float: left;
    margin-bottom: 10px;
    background-color: #F4F4F4; /* background color for the first post */
    border: 1px solid #E5E5E5; /* border for the first post */}

.first-body { /* Style for the First Post summary */
    color: #545454;
    font-size: 13px;
    text-align: justify;
    padding: 5px 10px;
    line-height: 1.5em;
}

#first h3 a, #first h3 a:visited { /* Style for the First Post Title*/
    border-bottom: 2px solid #DFDFDF;
    color: #515151;
    font-size: 20px;
    display: block;
    margin: 10px auto;
    width: 95%;
    font-size: 20px;
    padding: 0px 0px 4px 0px;
    font-weight: bold;
    text-align: left;
    line-height: 1.4em;
    background: none;
}

#first h3 a:hover { /* Color on mouseover for the First Post Title */
    color: #1061A1;
}

.post { /* Styles for the small posts container */
    float: left;
    margin: 0px 6px 2% 5px;
    width: 46%;
    height: 230px;
    padding: 0px 5px 5px 5px;
    background: #FCFCFC; /* background color for the small posts */
    border: 1px solid #E5E5E5; /* border for the small posts */
    overflow: hidden;
}

.posts-thumb { /* Style for the small posts thumbnails */
    margin-right: 10px;
}

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img, .BlogList .item-thumbnail img {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
}


h3.post-title a{ /* Style for the small posts titles */
    font-size: 14px;
    color: #747474;
    text-transform: uppercase;
}

h2.date-header { /* Hide the post date */
    display: none;
}

.post-footer {
    display: none;
}

h3.post-title {
    margin: 0px;
}

.readmorebutton {
    margin-top: 5px;
}

.readmorebutton a { /* Styles for the Read More link */
    color: #767676;
    border: 1px solid #E1E1E1;
    background: #EAEAEA; /* Background color for the Read More link */
    text-decoration: none;
    padding: 3px 5px;
    font-weight: bold;
    font-size: 11px;
    float: right;
    position: relative;
}

.post-comment-link { /* Style for the comment bubble of posts below */
    position: absolute;
    top: -35px;
    right: -10px;
    display: block;
    border: 1px solid #E1E1E1; /* border for the comment bubble */
    background: #EAEAEA; /* background color for the comment bubble */
    font-size: 11px;
    position: absolute;
}

#first .post-comment-link { /* Style for the comment bubble of first post */
    position: absolute;
    top: 10px;
    right: 0px;
}

.post-comment-link a { /* Link color for the comments bubble*/
    padding: 10px;
    color: #6A6A6A;
    text-decoration: none;
    font-weight: bold;
}

#blog-pager {
    clear: both;
}
</style>
</b:if>
</b:if>

Konfiguracja:

1) na początku skryptu ( krok 5 ) znajduje się sekcja, którą możesz je edytować wedle uznania

posts_no_thumb_sum = 290;
posts_thumb_sum = 240;
img_thumb_height = 80;
img_thumb_width = 80;
first_no_thumb_sum = 580;
first_thumb_sum = 450;
img_thumb_height1 = 145;
img_thumb_width1 = 165;

- pierwsza linia to ilość widocznych znaków w poście
- suma znaków wraz obrazkiem
- trzecia i czwarta linijka to rozmiary obrazka w postach
- zaznaczone na niebiesko wiersze odpowiadają konfiguracji pierwszego posta ( tego największego na blogu )

2) w kodzie CSS ten, który dodałeś ostatni odpowiada za wygląd postów na stronie głównej, możemy zmienić wartości odpowiadające za pojemność posta. Tylko pierwszy post.

width: auto;
height: 250px;

tutaj wartość dla pozostałych postów

width: 46%;
height: 230px;

wartość 46% możesz zmienić na większą lub mniejszą w zależności od potrzeb. Możesz tym poeksperymentować by uzyskać odpowiednie rozmiary pasujące do twojego bloga.

Kolory w kodach możesz zmienić jak tylko chcesz aby to zrobić znajdź np. #fcfcfc i zamień na jakiś kolor z tej palety KLIKNIJ

W końcu możesz ustalić ilość postów widocznych na głównej stronie. Wchodząc w ustawienia -> posty i komentarze i tam ustaw ilość wyświetlanych postów na stronie.

wszystko zapisujesz i masz swój szablon bloga MAGAZYNOWY !

Czytaj dalej »

automatyczny przycisk "czytaj dalej" w postach

 

Jak stworzyć automatycznie wyświetlany przycisk "czytaj dalej" w postach oraz ich miniaturach?

z menu bloggera wybierz szablon i wejdź do edycji HTML

Kliknij w okienku kodu i wciśnij crtl + f by wyskoczyła wyszukiwarka wierszy blogger i wyszukaj wiersza:

<data:post.body/>

Nota: znajdziesz na blogu 3 takie wiersze pomiń dwa i zatrzymaj się na trzecim.

zamień wiersz <data:post.body/> na poniższy kod:

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;<data:post.url/>&quot;,&quot;<data:post.title/>&quot;);</script>
 <span class='readmore' style='float:right;'><a expr:href='data:post.url'>Read More &#187;</a></span></b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

nota: Zanim zapiszesz projekt zawsze możesz go podejrzeć klikając na przycisk PODGLĄD. Jeśli nie widzisz żadnych zmian na blogu. Zamień drugi wiersz pokazujący <data:post.body/> .

teraz w wyszukiwarce wyszukaj :

</head>

i tuż nad tym wierszem wklej poniższy kod

<script type='text/javascript'>
posts_no_thumb_sum = 490;
posts_thumb_sum = 400;
img_thumb_height = 160;
img_thumb_width = 180;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID, pURL, pTITLE){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = posts_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'" title="'+ pTITLE+'"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" /></a></span>';
summ = posts_thumb_sum;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
.post-footer {display: none;}
.post {margin-bottom: 10px; border-bottom: 1px dotted #E6E6E6; padding-bottom: 20px;}
 .readmore a {text-decoration: none; }
</style>
</b:if>
</b:if>

nota:

- możesz zmienić wielkości wyświetlanych obrazków zamieniając 160 ( wysokość ) oraz 180 ( szerokość ).

- możesz zmienić ustawienia zaznaczone na niebiesko 490 znaków, aby zobaczyć mniej lub więcej nagłówka posta. oraz 400 znaków, aby zobaczyć mniej lub więcej treści posta.

Gotowe ! zapisz szablon :)

zobacz również jak zablokować kopiowanie obrazków

Czytaj dalej »

Błękitny styl komentarzy dla Bloggera

W panelu admina wejdź w menu Szablon => Dostosuj => Zaawansowane => Dodaj arkusz CSS, po czym w okienko wklej poniższy kod i zapisz.

/**http://www.skryptynabloga.blogspot.com**/
.comments{clear:both;margin-top:10px;margin-bottom:0;background:#FFF;border:1px solid #DDD;padding:10px 5%}
.comments h4{font:normal normal 25px oswald}
.comments ol{list-style:none;counter-reset:trackit;margin:0}
.comments li.comment{list-style:none;position:relative;counter-increment:trackit;clear:both}
.icon.user.blog-author:after{content:"Author";position:absolute;top:.4em;left:1em;color:rgba(112,153,182,0.97);font-size:70%}
.comments .comment-block:before{content:counters(trackit,".");position:absolute;float:none;z-index:10000;left:-1.9em;top:1.2em;bottom:inherit;background:#A9C5CC;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;font-size:25px;color:#F7FCFF;text-align:center;clear:both;margin:0;padding:8px 12px}
.comments .comment-replies .comment-block:before{content:"{" counters(trackit,".")"}";position:absolute;right:.5em;left:inherit;top:inherit;bottom:.5em;float:none;z-index:10000;background:rgba(0,0,0,0);border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;font-size:2rem;color:rgba(161,186,201,0.36);padding:8px 7px}
.comment-header{background:#DCE4EB}
.comments .comments-content .comment-header,.comments .comments-content .comment-content{margin:5px 5px 10px;padding:0 10px 0 75px}
.comments .comments-content .comment-replies .comment-block{position:relative}
.comments .comments-content .comment-replies{margin-left:2em;margin-top:1em;clear:both;padding:0}
.comments .comment-thread.inline-thread{background:rgba(0,0,0,0);padding:0 0 0 2em}
.comments .comment-replies .comment-block{float:right;border:1px solid #E7F5FF;min-height:100px;width:90%;margin-left:48px;background:#F7FCFF;padding:0 0 3em}
.comments .comment-block{float:right;border:1px solid #E7F5FF;min-height:100px;width:90%;margin-left:48px;background:#F7FCFF;padding:0 0 2em}
.comment-actions{position:absolute;left:4.5em;bottom:.5em;font-size:18px;padding:0}
.comments .comment .comment-actions a{padding-right:5px;padding-top:5px;margin:0}
.comments .comments-content .user a{color:#8B969E}
.comments .comments-content .user{font-style:italic;font-weight:400;color:#FFF;font-size:18px;text-shadow:1px 1px 1px #FFF}
.comments .comments-content .datetime,.comments .comments-content .datetime a,.comments .comments-content .datetime a:hover{margin-left:6px;float:right;text-transform:uppercase;font-size:12px;font-family:arial;font-weight:700;color:#237DAC}
.comments .avatar-image-container{background:#FFF;margin-left:0;max-height:70px;max-width:70px;overflow:hidden;width:70px;height:70px;position:absolute;left:25px;top:55px;z-index:10;border:1px solid #DDD;padding:3px}
.comments .avatar-image-container img{max-width:70px;max-height:70px;min-height:70px;min-width:70px}
.comments .thread-toggle{display:none}
/**http://www.skryptynabloga.blogspot.com**/

Czytaj dalej »