Jak zrobić graficzne "czytaj dalej"

środa, 17 czerwca 2015


Nie wiem czy ktoś z Was pamięta, ale już jakiś czas temu robiłam wpis o tym jak zrobić za pomocą kodu CSS aktywny button czytaj więcej. Dzisiaj wam pokażę jak w prosty sposób wstawić swoją własną grafikę, która będzie zastępować nam tradycyjne "czytaj dalej". Dla osób, które będą miały problem ze stworzeniem własnego graficznego buttonu "czytaj dalej" przygotowałam 12 grafik do pobrania, które znajdziecie na końcu wpisu.

1. Oczywiście żeby nasze "czytaj dalej" się pojawiło, musimy podczas pisania wpisu w dowolnym momencie kliknąć w zwijanie tekstu.


1a. Pamiętajmy o tym, aby nasz obrazek był wgrany na portal hostingujący np. tinypick, ponieważ będziemy potrzebowali adresu URL do naszego obrazka. (Pobrane buttony s

UWAGA! MUSIMY ZROBIĆ KOPIĘ ZAPASOWĄ SZABLONU, W RAZIE JAKBY COŚ NIE WYSZŁO

2. Szablon - edytuj kod HTML. Klikamy kursorem w dowolne miejsce w szablonie i wybieramy ctrl + f. Pojawi nam się okienko wyszukiwania, w które wpisujemy <b:if cond='data:post.hasJumpLink'> i klikamy enter,



3. Pod wyszukaną linijka będziemy mieli taki fragment kodu:

<div class='jump-link'>  <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>  </div>  </b:if>


Usuwamy ten fragment kodu, a na jego miejsce wklejamy ten:

 <div class='jump-link'>  <a expr:href='data:post.url + &quot;#more&quot;'><p align='center'><img border='0' src='LINK DO OBRAZKA'/></p> </a>  </div>  </b:if>



Zapisujemy szablon. Efekt końcowy:


12 buttonów do pobrania:


Udostępnij ten wpis:
Czytaj dalej »

Jak zrobić widget multi tabbed

poniedziałek, 15 czerwca 2015


Tak jak powiedziałam, cały ten tydzień będzie w instrukcjach. Ostatnio trochę je zaniedbałam. W dzisiejszym tutorialu przedstawię wam jak zrobić widget multi tabbet czyli widegt, który umożliwi nam jeszcze lepsze uporządkowanie kolumny bocznej na blogu. Prościej mówiąc są to tak jakby zakładki, które w jednym miejscu mogą zgromadzić trzy widgety. Taki widget wygląda tak:


Będziemy pracowali w HTML, więc ZRÓBCIE KOPIĘ ZAPASOWĄ SZABLONU - w razie jakby coś nie wyszło.

1. Szablon - edytuj kod HTML


2. Klikamy kursorem na dowolne miejsce i naciskamy ctrl + f. Pojawi nam się pole wyszukiwania, w które wpiszemy ]]></b:skin> i klikamy enter.


2a. Pojawiła nam się zaznaczona cześć kodu, którą szukaliśmy. Tuż nad nią wklejamy następujący kod:

.tabviewcont{
margin:15px 0;
padding:0;
clear:both;
}
.tabviewnav {
margin: 0 0 0 14px;
padding:3px 0;
font-size:12px;
font-weight:bold;
}
.tabviewnav li {
list-style:none;
margin:0;
display:inline;
}
.tabviewnav li a {
padding:3px 6px;
margin-right:1px;
background:#ffe6d2;
border-radius:7px 7px 0 0;
text-decoration:none;
color:#444;
}
.tabviewnav li a:hover {
color:#fff;
background:#444;
text-decoration:none;
}
.tabviewnav li.tabviewactive a,
.tabviewnav li.tabviewactive a:hover {
background:#444;
color:#fff;
}
.tabviewcont .tabviewtab {
padding:5px;
border:1px solid #fff;
background:#eee;
}
.tabviewcont .tabviewtab h2,
.tabviewcont .tabviewtabhide {
display:none;
}
.tabviewtab .widget-content ul{
list-style:none;
margin:0 0 10px 0;
padding:0;
}
.tabviewtab .widget-content li {
border-bottom:1px solid #ccc;
margin:0 5px;
padding:2px 0 5px 0;
}


Jest to nasz kod CSS, który odpowiada za wygląd naszego widgetu i możemy go dowolnie modyfikować.

Analiza kodu: 
.tabviewcont{
margin:15px 0; - położenie gadżetu w pionie, jeśli dodamy przed liczbę "- "gadżet pójdzie w górępadding:0;
clear:both;
}
.tabviewnav {
margin: 0 0 0 14px; - położenie tytułów gadżetów.
padding:3px 0;
font-size:12px; - wielkość czcionki tytułów gadżetów. font-weight:bold;
}
.tabviewnav li {
list-style:none;
margin:0;
display:inline;
}
.tabviewnav li a {
padding:3px 6px; - marginesy wewnętrznemargin-right:1px;
background:#ffe6d2; - tło tytułów gadżetów, które nie są zaznaczone. border-radius:7px 7px 0 0; - zaokrąglenia tytułów gadżetów. text-decoration:none;
color:#444;} - kolor tekstu tytułów gadżetu.tabviewnav li a:hover {
color:#fff; - kolor tekstu po najechaniu na tytuły gadżetów myszką background:#444; - kolor tła po najechaniu na tytuły gadżetów myszkątext-decoration:none;
}
.tabviewnav li.tabviewactive a,
.tabviewnav li.tabviewactive a:hover {
background:#444;  - tło tytułu zaznaczonego gadżetu color:#fff;} - kolor tytułu zaznaczonego gadżetu .tabviewcont .tabviewtab {
padding:5px; - marginesy wewnętrzneborder:1px solid #fff; - grubość, rodzaj i kolor ramki background:#eee;} - tło pola, gdzie jest gadżet .tabviewcont .tabviewtab h2,
.tabviewcont .tabviewtabhide {
display:none;
}
.tabviewtab .widget-content ul{
list-style:none;
margin:0 0 10px 0;
padding:0;
}
.tabviewtab .widget-content li {
border-bottom:1px solid #ccc;
margin:0 5px;
padding:2px 0 5px 0;
}

3. Teraz wyszukujemy </head>  i nad nim wklejamy następujący kod:


<script type='text/javascript'>
// Tabview for grouping gadgets
//<![CDATA[
document.write('<style type="text/css">.tabview{display:none;}<\/style>');function tabviewObj(argsObj){var arg;this.div=null;this.classMain="tabview";this.classMainLive="tabviewcont";this.classTab="tabviewtab";this.classTabDefault="tabviewtabdefault";this.classNav="tabviewnav";this.classTabHide="tabviewtabhide";this.classNavActive="tabviewactive";this.titleElements=['h2','h3','h4','h5','h6'];this.titleElementsStripHTML=true;this.removeTitle=true;this.addLinkId=false;this.linkIdFormat='<tabviewid>nav<tabnumberone>';for(arg in argsObj){this[arg]=argsObj[arg]}this.REclassMain=new RegExp('\\b'+this.classMain+'\\b','gi');this.REclassMainLive=new RegExp('\\b'+this.classMainLive+'\\b','gi');this.REclassTab=new RegExp('\\b'+this.classTab+'\\b','gi');this.REclassTabDefault=new RegExp('\\b'+this.classTabDefault+'\\b','gi');this.REclassTabHide=new RegExp('\\b'+this.classTabHide+'\\b','gi');this.tabs=new Array();if(this.div){this.init(this.div);this.div=null}}tabviewObj.prototype.init=function(e){var childNodes,i,i2,t,defaultTab=0,DOM_ul,DOM_li,DOM_a,aId,headingElement;if(!document.getElementsByTagName){return false}if(e.id){this.id=e.id}this.tabs.length=0;childNodes=e.childNodes;for(i=0;i<childNodes.length;i++){if(childNodes[i].className&&childNodes[i].className.match(this.REclassTab)){t=new Object();t.div=childNodes[i];this.tabs[this.tabs.length]=t;if(childNodes[i].className.match(this.REclassTabDefault)){defaultTab=this.tabs.length-1}}}DOM_ul=document.createElement("ul");DOM_ul.className=this.classNav;for(i=0;i<this.tabs.length;i++){t=this.tabs[i];t.headingText=t.div.title;if(this.removeTitle){t.div.title=''}if(!t.headingText){for(i2=0;i2<this.titleElements.length;i2++){headingElement=t.div.getElementsByTagName(this.titleElements[i2])[0];if(headingElement){t.headingText=headingElement.innerHTML;if(this.titleElementsStripHTML){t.headingText.replace(/<br>/gi," ");t.headingText=t.headingText.replace(/<[^>]+>/g,"")}break}}}if(!t.headingText){t.headingText=i+1}DOM_li=document.createElement("li");t.li=DOM_li;DOM_a=document.createElement("a");DOM_a.appendChild(document.createTextNode(t.headingText));DOM_a.href="javascript:void(null);";DOM_a.title=t.headingText;DOM_a.onclick=this.navClick;DOM_a.tabview=this;DOM_a.tabviewIndex=i;if(this.addLinkId&&this.linkIdFormat){aId=this.linkIdFormat;aId=aId.replace(/<tabviewid>/gi,this.id);aId=aId.replace(/<tabnumberzero>/gi,i);aId=aId.replace(/<tabnumberone>/gi,i+1);aId=aId.replace(/<tabtitle>/gi,t.headingText.replace(/[^a-zA-Z0-9\-]/gi,''));DOM_a.id=aId}DOM_li.appendChild(DOM_a);DOM_ul.appendChild(DOM_li)}e.insertBefore(DOM_ul,e.firstChild);e.className=e.className.replace(this.REclassMain,this.classMainLive);this.tabShow(defaultTab);if(typeof this.onLoad=='function'){this.onLoad({tabview:this})}return this};tabviewObj.prototype.navClick=function(event){var rVal,a,self,tabviewIndex,onClickArgs;a=this;if(!a.tabview){return false}self=a.tabview;tabviewIndex=a.tabviewIndex;a.blur();if(typeof self.onClick=='function'){onClickArgs={'tabview':self,'index':tabviewIndex,'event':event};if(!event){onClickArgs.event=window.event}rVal=self.onClick(onClickArgs);if(rVal===false){return false}}self.tabShow(tabviewIndex);return false};tabviewObj.prototype.tabHideAll=function(){var i;for(i=0;i<this.tabs.length;i++){this.tabHide(i)}};tabviewObj.prototype.tabHide=function(tabviewIndex){var div;if(!this.tabs[tabviewIndex]){return false}div=this.tabs[tabviewIndex].div;if(!div.className.match(this.REclassTabHide)){div.className+=' '+this.classTabHide}this.navClearActive(tabviewIndex);return this};tabviewObj.prototype.tabShow=function(tabviewIndex){var div;if(!this.tabs[tabviewIndex]){return false}this.tabHideAll();div=this.tabs[tabviewIndex].div;div.className=div.className.replace(this.REclassTabHide,'');this.navSetActive(tabviewIndex);if(typeof this.onTabDisplay=='function'){this.onTabDisplay({'tabview':this,'index':tabviewIndex})}return this};tabviewObj.prototype.navSetActive=function(tabviewIndex){this.tabs[tabviewIndex].li.className=this.classNavActive;return this};tabviewObj.prototype.navClearActive=function(tabviewIndex){this.tabs[tabviewIndex].li.className='';return this};function tabviewAutomatic(tabviewArgs){var tempObj,divs,i;if(!tabviewArgs){tabviewArgs={}}tempObj=new tabviewObj(tabviewArgs);divs=document.getElementsByTagName("div");for(i=0;i<divs.length;i++){if(divs[i].className&&divs[i].className.match(tempObj.REclassMain)){tabviewArgs.div=divs[i];divs[i].tabview=new tabviewObj(tabviewArgs)}}return this}function tabviewAutomaticOnLoad(tabviewArgs){var oldOnLoad;if(!tabviewArgs){tabviewArgs={}}oldOnLoad=window.onload;if(typeof window.onload!='function'){window.onload=function(){tabviewAutomatic(tabviewArgs)}}else{window.onload=function(){oldOnLoad();tabviewAutomatic(tabviewArgs)}}}if(typeof tabviewOptions=='undefined'){tabviewAutomaticOnLoad()}else{if(!tabviewOptions['manualStartup']){tabviewAutomaticOnLoad(tabviewOptions)}}
//]]>
</script>



4. Teraz w kodzie wyszukujemy <div class='column-right-inner'> i nad tym wklejamy następujący kod:



<div class='tabview'>
<b:section class='tabviewtab' id='Tab1' maxwidgets='1'/>
<b:section class='tabviewtab' id='Tab2' maxwidgets='1'/>
<b:section class='tabviewtab' id='Tab3' maxwidgets='1'/>
</div>

Zapisujemy szablon.

5. Przechodzimy teraz do układ. Powinno nam się pojawić coś takiego jak na poniższym zdjęciu w ramce:



Jeśli tego nie ma, odśwież stronę. Do Tab1, Tab2, Tab3, dopasowujemy po jednym gadżecie.



Zapisujemy rozmieszczenie. Efekt końcowy:


Udostępnij ten wpis:
Czytaj dalej »

Jak zmienić wygląd gadżetu szukaj

poniedziałek, 1 czerwca 2015


Blogger ma wśród swoich gadżetów gadżet wyszukiwania, który po dodaniu nie wygląda zbyt ciekawie, ale za to jest bardzo przydatny, bo pozwala na przeszukanie danego bloga wpisując hasła. W dzisiejszym wpisie chce Wam pokazać jak zrobić aby nasz gadżet nie tylko był przydatny, ale również ciekawie wyglądał. Dla przypomnienia nasz gadżet po dodaniu wygląda tak:


Aby zmienić jego wygląd wystarczy dodać do arkusza CSS następujący kod:

#CustomSearch1_form {
margin: 10px -2px -25px -5px;
}
input.gsc-search-button {
background:#000;
border-width: 1px;
letter-spacing:1px;
border-radius: 3px;
border-color: #000;
border-style: solid;
color: #444;
margin: 0 0 0 0 !important;
width: 75px !important;
font-family: 15px Verdana;
height: 35px !important;
}
input.gsc-search-button:hover {
background: #eee;
border-color: #eee;
letter-spacing: 2px;
color: #000;
cursor: pointer;
}
input.gsc-input {
height: 33px !important;
padding: 0 !important;
max-width: 500px !important;
}
td.gsc-search-button {
width: 25% !important;
}
table.gsc-search-box td.gsc-input {
padding: 0px !important;
width: 75% !important;
}
table.gsc-search-box {
margin: 0 0 10px 0 !important;
}

Analiza naszego kodu:

Ta część kodu to marginesy naszego gadżetu. Pierwszy margines to margines górny, drugi to margines prawy, trzeci to margines dolny, a czwarty to margines lewy.
#CustomSearch1_form {
margin: 10px -2px -25px -5px;
}
Kolejna część kodu odpowiada za nasz button, czyli przycisk wyszukaj przed najechaniem na niego myszką.
Tło, grubość ramki, odstęp między literami, zaokrąglone narożniki, kolor ramki, styl ramki, kolor tekstu, marginesy, szerokość, wielkość czcionki i rodzaj, wysokość
input.gsc-search-button {
background:#000;
border-width: 1px;
letter-spacing:1px;
border-radius: 3px;
border-color: #000;
border-style: solid;
color: #444;
margin: 0 0 0 0 !important;
width: 75px !important;
font: 15px Verdana;
height: 35px !important;


Następna część kodu, odpowiada za button po najechaniu na niego kursorem.
Tło, kolor ramki, odstęp między literami, kolor tekstu
input.gsc-search-button:hover {
background: #eee;
border-color: #eee;
letter-spacing: 2px;
color: #000;
cursor: pointer;
}

Kolejna część kodu dotyczy pola wyszukiwania
Wysokość 
input.gsc-input {
height: 33px !important;
padding: 0 !important;
max-width: 500px !important;
}

I to tyle jeśli chodzi o jakiekolwiek zmiany. Efekt końcowy widnieje u mnie na blogu w kolumnie bocznej. Dzisiaj krótka instrukcja, ale na środę szykuję już większą.

Udostępnij ten wpis:
Czytaj dalej »

Copyright © Szablon wykonany przez My pastel life