Slider

Seo

Wordpress

Dizajn

Alati

Seo

Razno

Wordpress plugins

Kako postavit sliku na siedbar ne koristeći gadget slika.

Gadget slika na bloggeru služi za banner ili da nekome skrenete pozornost na neki post ili blog također je i obavezno pisanje naslova a mnogima taj dio i smeta.

Najednostavniji način da postavite sliku je da koristite HTML/JavaScript gadget i koristite neki vanjski hosting tinypic ili neki drugi a postoji i drugi način opisan u nastavku.

Link na tinypicu izgleda ovako a on je prvi na listi nakon što uploadate sliku i možete ga direkno staviti u HTML/JavaScript gadget ali na njemu je link za besplatni hosting i kad netko prođe mišem preko slike pojavi se ovaj tekst Image and video hosting by TinyPic  a i on nije baš lijep za oko pa ga je link potrebno preurediti .

Primjer linka na vanjskom hostingu TinyPic:

<a href="http://tinypic.com?ref=6z1lvo" target="_blank"><img src="http://i57.tinypic.com/6z1lvo.jpg" border="0" alt="Image and video hosting by TinyPic"></a>

Ako ste koristili TinyPic sljedeći korak je preuredite link u širinu i visinu vaše fotografije koji vam odgovara  i izbrisati rečenicu Image and video hosting by TinyPic: Link bi trebao sad izgledati ovako:

<a href="http://tinypic.com?ref=6z1lvo" target="_blank"><img src="http://i57.tinypic.com/6z1lvo.jpg" width="258" height="167" ></a>

width="258" je širina slike koja vama odgovara broj 258 je samo za primjer a vi postavite oni koji vama odgovara.

height="167" je visina slike također ju prilagodite kako vama odgovara.

Slijedeći način koji ja koristim je jedan post sa naslovom fotografije ali nije objavljen već je spremljen kao skica i na njega uploam fotografije za razne stvari i kopiram link sa slike.

Znači otvorite jedan post koji će vam služiti kao hosting za vaše fotografije prenesite na njega željne slike i spremite post a ne objaviti ga. Otvorite vaš blok za pisanje ili notepaid u njega kopirajte ovaj link  kompletan .
<img src="http://3.bp.blogspot.com/-ccFV-B7ZGg4/UnkjpkGWVUI/AAAAAAAAHjE/8vg4D6mfqgo/s1600/slika-113906-522607d0b5df1b-default.jpg" width="200" height="167" />

Onda odite u postove tamo gdje su vam svi postovi i ispod naslova posta fotografije imate opcije pregled,objavi,uredi,izbriši vi jednostavno odaberite pregled posta i kad vam se otvori post u novom prozoru desnim klikom na mišu kliknite na kopiraj URL link.On izgleda ovako slično ali je dug svakako.

http://3.bp.blogspot.com/-ccFV-B7ZGg4/UnkjpkGWVUI/AAAAAAAAHjE/8vg4D6mfqgo/s1600/slika-113906-522607d0b5df1b-default.jpg

Sad taj link umetnite umjesto linka plavom bojom označen  i napravite kao dolje u primjeru ali pazite da bude između ovih oznaka  " TVOJ LINK  SLIKE " i naravno prilagodite širinu i visinu.

<img src="http://3.bp.blogspot.com/-ccFV-B7ZGg4/UnkjpkGWVUI/AAAAAAAAHjE/8vg4D6mfqgo/s1600/slika-113906-522607d0b5df1b-default.jpg" width="200" height="167" />

Sad kad ste ga preuredili kopirajte ga u HTML/JavaScript gadget i spremite

Nadam se da vam ovo pomaže.

Ugradnja automatskog slidera u predložak


Postoje mnogi dizajni za automatske slidere u vašim predložcima a ja ću vam pokazati nekoliko dizajna i kako ih ugraditi u vaš predložak raznim tutorijalima.

Za ovaj slider prvo moramo napraviti gadget ispod zaglavlja a to ćemo napraviti na sljedeći način:

  1. Prijavite se na svoj google račun i odaberite opciju PREDLOŽAK >>>>UREDI HTML
  2. Prije početka uređivanja predložka prvo ga preuzmite na vaše računalo a zatim počnite sa dodavanjem slidera u vaš predložak.
Sljedeći korak morate pronaći ovaj kod u vašem predlošku ]]></b:skin> i prije njega dodati ove kodove.

  1. /* Slide Content 
  2. ----------------------------------------------- */  
  3. .slide-wrapper {padding:0 auto;margin:0 auto;width:auto;floatleft;  
  4. word-wrap: break-word; overflowhidden;}   
  5. .slide {color#666666;line-height1.3em;}  
  6. .slide ul {list-style:none;margin:0 0 0;padding:0 0 0;}  
  7. .slide li {margin:0;padding-top:0;  
  8. padding-right:0;padding-bottom:.25em;  
  9. padding-left:0px;text-indent:0px;line-height:1.3em;}  
  10. .slide .widget {margin:0px 0px 6px 0px;}  


Nakon što ste dodali kodove gornje kodove potražite u svom predlošku sljedeći kod koji se nalazi u samome predlošku.

<div id='main-wrapper'> i spod njega dodajte ovaj kod:

  1. <b:if cond='data:blog.url == data:blog.homepageUrl'>  
  2.       <div id='slide-wrapper'>  
  3. <b:section class='slide' id='slide' preferred='yes'/>  
  4.       </div>  
  5. </b:if>   

Ako ste pratili pažljivo i učinili po uputama spremite vaš predložak i trebali ste imati sljedeći izgled u vašem predlošku i ujedno to bi bio prvi korak koji smo odradili kako treba.



DRUGI KORAK

Drugi korak se vraćamo na početak biramo opciju PREDLOŽAK>>>UREDI HTML i tražimo sljedeći kod ]]></b:skin> i odmah iznad njega postavljamo css datoteku:

.shadow{width:950px; height:39px; background:#fff url(http://4.bp.blogspot.com/-FePkOajMbd8/T656LNNmKSI/AAAAAAAAGEE/Vcpgql7qqXQ/s1600/shadow1.png) no-repeat center;margin:0 auto}
#featured-slider{position:relative;overflow:hidden;width:950px;height:325px;background:#fcfcfc url(http://4.bp.blogspot.com/-XIuN9wCp7P4/T6v_XWDrceI/AAAAAAAABKg/X5A25lOVkVk/s1600/slider-bg.png) repeat-x top;margin:0 auto;padding:0 auto}
#featured-slider .contentdiv{visibility:hidden;position:absolute;left:20px;top:10px;z-index:1;width:305px}
#featured-slider .contentdiv img{background:#fff;padding:2px;border:1px solid #ccc;width:297px;height:297px;overflow:hidden}
#featured-slider .sliderPostPhoto{position:relative;height:305px;width:305px;overflow:hidden}
#featured-slider .sliderPostInfo{position:absolute;top:0;left:345px;color:#a1a1a1;background:url();height:190px;width:540px;padding:5px 0 0}
#featured-slider .sliderPostInfo p{color:#0a0a0a;line-height:1.6em;font-size:14px;padding-top:1px}
#featured-slider .featuredPostMeta a{color:#a1a1a1}
#featured-slider .order a {display:block; width:98px; height:40px; bottom:14px; left:0px;background:url(http://3.bp.blogspot.com/-KJx2Buu0zJE/T651wlL5t0I/AAAAAAAAGDo/FYTmwGcI-BE/s1600/order.png) no-repeat 0 0; position:absolute; font-size:15px; line-height:13px; text-transform:uppercase; text-decoration:none; font-family: 'Open Sans', sans-serif; color:#fff; font-weight:700; padding:11px 0 0 6px;}
#featured-slider .order a:hover{ color:#515151;}
.featuredTitle{font:bold 24px Tahoma;color:#719429;line-height:1cm}
.featuredTitle a{color:#719429}
.featuredTitle a:hover{color:#0a0a0a}
#paginate-featured-slider{position:absolute;right:0;top:250px;z-index:1;width:595px;height:80px;overflow:hidden}
#paginate-featured-slider ul{width:595px;list-style:none}
#paginate-featured-slider .featured_thumb{float:left;margin-right:15px;width:65px;height:65px;padding:0}
#paginate-featured-slider .featured_thumb:hover{opacity:0.7}

Brojeve 950 promijenite u širinu vašeg predložka a broj 325 u željenu visinu.

Kad smo dodali ovu datoteku tražimo sljedeći kod koji se nalazi ispod ali moramo biti pažljivi jer ako vaš predložak sadrži već jednu od ovih verzija <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
onda preskočite ovaj korak a ako ne pronađite </head> i odmah iznad njega dodajte ove kodove:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='http://yourjavascript.com/112241212156/slider.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/s1600/no+image.jpg";
showRandomImg = true;

aBold = true;

summaryPost = 400;
summaryTitle = 25;

numposts2 = 7;

function removeHtmlTag(strx,chop){
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);
}
}

s = s.join("");
s = s.substring(0,chop-1);
return s;
}

function showrecentposts1(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();

for (var i = 0; i < numposts2 ; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var pcm;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}

for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
pcm = entry.link[k].title.split(" ")[0];
break;
}
}

if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";

postdate = entry.published.$t;

if(j>imgr.length-1) j=0;
img[i] = imgr[j];

s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);

if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;

//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';


var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

var day = postdate.split("-")[2].substring(0,2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];

for(var u2=0;u2<month.length;u2++){
if(parseInt(m)==month[u2]) {
m = month2[u2] ; break;
}
}

var daystr = day+ ' ' + m + ' ' + y ;

var trtd = '<div class="contentdiv"><div class="sliderPostPhoto"><a class="crop-foto" href="'+posturl+'"><img width="200" height="150" class="alignright" src="'+img[i]+'"/></a></div><div class="sliderPostInfo"><div class="featuredTitle"><a href="'+posturl+'">'+posttitle+'</a></div><span class="featuredPostMeta">'+daystr+' | <a href="'+posturl+'">'+pcm+' Comments</a></span><p>'+removeHtmlTag(postcontent,summaryPost)+'... <a href="'+posturl+'" class="meta-more">View Detail </a></p></div><p class="order"><a href="'+posturl+'">order!</a></p></div>';
document.write(trtd);

j++;
}

}

function showrecentposts2(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();

for (var i = 0; i < numposts2 ; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var pcm;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}

for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
pcm = entry.link[k].title.split(" ")[0];
break;
}
}

if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";

postdate = entry.published.$t;

if(j>imgr.length-1) j=0;
img[i] = imgr[j];

s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);

if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;

//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';


var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

var day = postdate.split("-")[2].substring(0,2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];

for(var u2=0;u2<month.length;u2++){
if(parseInt(m)==month[u2]) {
m = month2[u2] ; break;
}
}

var daystr = day+ ' ' + m + ' ' + y ;

var trtd = '<ul class="featured_thumb"><a rel="'+i+'" class="toc" href="#"><img width="65" height="65" title="our product" alt="our product" class="featured_thumb" src="'+img[i]+'"/></a></ul>';
document.write(trtd);

j++;
}

}
//]]>
</script>

Nakon ugradnje 1.7.2/jquery.min.js skripe pronađite skriptu koju ste ugradili prije na prvome koraku

  1. <b:if cond='data:blog.url == data:blog.homepageUrl'>  
  2.       <div id='slide-wrapper'>  
  3. <b:section class='slide' id='slide' preferred='yes'/>  
  4.       </div>  
  5. </b:if> 

i zamijenite ju kompletno sa sa ovom :


<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='slide-wrapper'>
<b:section class='slide' id='slide' preferred='yes'>
<b:widget id='HTML82' locked='false' title='feature content slider' type='HTML'>
<b:includable id='main'>
<div id='featured-slider'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/<data:content/>?max-results=&quot;+numposts2+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
<div id='paginate-featured-slider'>
<ul>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/<data:content/>?max-results=&quot;+numposts2+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts2\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</ul>
</div>
</div>
<script type='text/javascript'>
featuredcontentslider.init({
id: &quot;featured-slider&quot;, //id of main slider DIV
contentsource: [&quot;inline&quot;, &quot;&quot;], //Valid values: [&quot;inline&quot;, &quot;&quot;] or [&quot;ajax&quot;, &quot;path_to_file&quot;]
toc: &quot;markup&quot;, //Valid values: &quot;#increment&quot;, &quot;markup&quot;, [&quot;label1&quot;, &quot;label2&quot;, etc]
nextprev: [&quot;&quot;, &quot;&quot;], //labels for &quot;prev&quot; and &quot;next&quot; links. Set to &quot;&quot; to hide.
revealtype: &quot;click&quot;, //Behavior of pagination links to reveal the slides: &quot;click&quot; or &quot;mouseover&quot;
enablefade: [true, 0.4], //[true/false, fadedegree]
autorotate: [true, 5000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})
</script>
</b:includable>
</b:widget>
</b:section>
</div>
</b:if>
<div class='shadow'/>

Spemite vaš predložak i odite na izgled.Trebali biste imati ovakav raspored:



Zatim kliknite mišom na edit ili uredi i upišite vašu kategoriju ili oznaku(tag) bez zareza.


I to je to sad imate slider na vašem predlošku koji očitava kategoriju po vašoj želji.Uskoro još dizajna slidera koje možete ugraditi u vaše predloške.

Izgleda komplicirano ali vjerujte da nije samo pratite korake i otvorite si jedan blog za demo gdje možete eksperimentirati prije ugradnje u vaš predložak koji koristite za daljna pitanja pitajte u komentarima.


Rename wp-login.php


Rename wp-login.php je dodatak za Wordpress koji bi svaki korisnik trebao koristiti.Naime on štiti vašu login stranicu od nepoželjnih napada.

Korisnici Wordpressa znaju kako je lako otkriti wp-admin stranicu,dovoljno je nakon linka postaviti kosu crticu i upisati /wp-admin i pojavi se wordpressova stranica za prijavu i dovoljno je pogoditi lozinku kako bi netko ušao u vaše admin sučelje i imao pristup vašim stranicama i tekstovima.

Ovim dodatkom onemogućavamo pristup našim admin stranicama.Naime u postavkama dodatka imamo mogućnosti promijeniti wp-admin u bilo koje drugo ime po vašoj želji zbog čega su veće mogućnosti za zaštitu vaših stranica.Također vam se nudi i postavka ograničenog broja prijavljivanja kako netko ne bi bio uporan jednostavno login stranica odbija daljnu prijavu sa istog računala.

Preuzmite ovdje vaš dodatak.

WORDPRESS 3.9


Nova verzija Wordpressa pod imenom  „Smith“   donosi nam mnoge promjene i poboljšanja.

Poboljšano uređivanje sadržaja


Ovog puta ovaj dio WordPressa je znatno unaprijeđen , tako da je sada učitavanje istog znatno brže. Ono što je zanimljivo je to da je poboljšano kopiranje teksta iz tekst editora (npr. Worda). Naime, u prethodnim verzijama kopiranjem teksta bio je kopiran i kod koji tekst editori koriste, tako da je pored teksta kopiran i kod koji je uticao na prikaz teksta, često loše. Ovom verzijom je to otklonjeno, sada kopiranjem teksta u WP dobijate čist tekst bez dodatnih kodova.
Audio i video
Audio i video pleyer su dobili liste. Sada je moguće napraviti liste audio i video zapisa i postaviti iste direktno u post!
Dodjela widgeta
U prethodnoj verziji smo dodavali widgete a zatim osvježavali stranicu da provjerimo da li i kako funkcionira. Sada je to znatno poboljšano tako što se odmah po dodavanju novog ili izmjeni već postojećeg widgeta, automatski ažurira stranica i sve radnje izvodimo pod opcijom prilagodba ili customization i ujedno vidimo izgled.
Olakšan odabir tema
Sad pri odabiru tema dovoljno nam je kliknuti mišem na znak + i odabrati već jednu od ponuđenih tema bez predhodnog surfanja internetom sve radimo iz Wordpressa.

Pitanja i odgovori

Razna pitanja i odgovori.

Wordpress


Koristite li Wordpres a nailazite na razne probleme ili imate kakvih pitanja vezanih za korištenje Wordpressa i njihovih dodataka slobodno pitajte putem komentara ako mogu da vam pomognem rado ću vam odgovoriti.

KAKO OSPOSOBITI SLIDER U BLOGGERU?

Nekad slider zna početnicima zadati glavbolje.Pronađete predložak koji vam se sviđa ali nikako da pokrenete slider.

U Bloggeru postoje tri načina za pokretanje slidera ovisno o dizajnu ali nisu komplicirani.

1.Način pokretanja slidera se radi u izgledu predloška.Otvorite gadget slider i upišite tag ili oznaku vaše kategorije bez zareza.Ovdje budite oprezni ako tagove kategorija pišete prvim velikim slovom pišite ga i ovdje ali bez zareza.



2.Način nešto je nezgodniji ali nije kompliciran.On se naime radi u samoj strukturi predloška što znači da morate otići na nadzornu ploču i odabrati opciju PREDLOŽAK UREDI HTML i u njemu pronaći ovako slične kodove poslije body u predlošku.


Pronađite ove kodove i zamijenite :

1. ENTER-SLIDE-1-LINK-HERE u link vašega posta 

2. http://2.bp.blogspot.com/-XprtQ9SXWI8/UtS5c7pJO6I/AAAAAAAAKRo/aSFfec4uSh4/s1600/slide-image-1.jpg promijenite link vaše fotografije:

3. Enter Slide 1 Title Here ovdje upišite ime naslova vašeg posta.

<div class='slides_container'>

   <!-- slide 1 code start -->
   <div class='slide'>
      <a href='ENTER-SLIDE-1-LINK-HERE'><img height='490' src='http://2.bp.blogspot.com/-XprtQ9SXWI8/UtS5c7pJO6I/AAAAAAAAKRo/aSFfec4uSh4/s1600/slide-image-1.jpg' width='1000'/></a>
      <div class='caption' style='bottom:0'>
         <p>Enter Slide 1 Title Here</p>
      </div>
   </div>
   <!-- slide 1 code end -->
   
   <!-- slide 2 code start -->
   <div class='slide'>
      <a href='ENTER-SLIDE-2-LINK-HERE'><img height='490' src='http://4.bp.blogspot.com/-CjlT3qX36fg/UtS5gb1kh-I/AAAAAAAAKR0/RkR1Myx7AN8/s1600/slide-image-2.jpg' width='1000'/></a>
      <div class='caption' style='bottom:0'>
         <p>Enter Slide 2 Title Here</p>
      </div>
   </div>
   <!-- slide 2 code end -->
   
   <!-- slide 3 code start -->
   <div class='slide'>
      <a href='ENTER-SLIDE-3-LINK-HERE'><img height='490' src='http://2.bp.blogspot.com/-QzwsaHw58oI/UtS5gj8mxXI/AAAAAAAAKR4/uSK6FOKa0zo/s1600/slide-image-3.jpg' width='1000'/></a>
      <div class='caption' style='bottom:0'>
         <p>Enter Slide 3 Title Here</p>
      </div>
   </div>
   <!-- slide 3 code end -->

3.Način aktiviranja slidera vam se također nalazi u samome predlošku ali u ovome slučaju morate pronaći ovaj kod koji se pretežno nalazi odmah ispod css datoteke i zamijenite label  riječ sport u neku od vaših kategorija.Za primjer sam vam stavio sport ali može biti bilo koja riječ.

<script src='https://masolis-javascript.googlecode.com/svn/trunk/related-portal.js' type='text/javascript'/>
<script src='https://masolis-javascript.googlecode.com/svn/trunk/label.js' type='text/javascript'/>
<script>
//<![CDATA[
/* Script from:http://simplexdesign.blogspot.com/ */
imgr = new Array();
imgr[0] = "http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/s1600/no+image.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 100;

numposts1 = 5;
label1 = "sport";