31.03.2016.

Jos jedan profi padajuci meni za vas blog!


Padajuci meniji su veoma vazni za blogovanje i ovakve stvarcice su takodje znacajne za goste na vasem blogu jer pruzaju bolju preglednost, lakse snalazenje sto ce naterati posetioce da navrate jos koji put.

Dodajte plavi padajuci meni


  • Ulogujte se na Blogger > Kontrolna Tabla
  • Kliknite na Izgled > Dodaj Gadzet > HTML/JavaScript
  • Dodajte sledeci kod:
<style>
/* Blue Dropdown Menu by www.bloggerisanje.blogspot.com */
#nav {
display:inline-block;
width:100%;
margin:0px auto;
padding:0;
background:#335599 url(https://2.bp.blogspot.com/-FVx5AvxIkpg/TzP9VsBWmrI/AAAAAAAAAVk/5D5V1QHAhOQ/s320/bg-ABT.png) repeat-x 0 -110px;border-radius:10px; /*some css3*/
-moz-border-radius:10px;
-webkit-border-radius:10px;
box-shadow:0 2px 2px rgba(0,0,0, .5);
-moz-box-shadow:0 2px 2px rgba(0,0,0, .5);
-webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);
}
#nav li {
margin:10px;
float:left;
position:relative;
list-style:none;
}
#nav a {
font-family:verdana;
font-weight:bold;
color:#e7e5e5;
text-decoration:none;
display:block;
padding:8px 20px;border-radius:10px; /*some css3*/
-moz-border-radius:10px;
-webkit-border-radius:10px;
text-shadow:0 2px 2px rgba(0,0,0, .7);
}/* selected menu element */
#nav .current a, #nav li:hover > a {
background:#7788aa url(https://2.bp.blogspot.com/-FVx5AvxIkpg/TzP9VsBWmrI/AAAAAAAAAVk/5D5V1QHAhOQ/s320/bg-ABT.png) repeat-x 0 -20px;
color:#000;
border-top:1px solid #f8f8f8;box-shadow:0 2px 2px rgba(0,0,0, .7); /*some css3*/
-moz-box-shadow:0 2px 2px rgba(0,0,0, .7);
-webkit-box-shadow:0 2px 2px rgba(0,0,0, .7);
text-shadow:0 2px 2px rgba(255,255,255, 0.7);
}/* sublevels */
#nav ul li:hover a, #nav li:hover li a {
background:none;
border:none;
color:#000;
}
#nav ul li a:hover {
background:#335599 url(https://2.bp.blogspot.com/-FVx5AvxIkpg/TzP9VsBWmrI/AAAAAAAAAVk/5D5V1QHAhOQ/s320/bg-ABT.png) repeat-x 0 -100px;
color:#fff;border-radius:10px; /*some css3*/
-moz-border-radius:10px;
-webkit-border-radius:10px;
text-shadow:0 2px 2px rgba(0,0,0, 0.7);
}#nav ul li:first-child > a {
-moz-border-radius-topleft:10px; /*some css3*/
-moz-border-radius-topright:10px;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
}
#nav ul li:last-child > a {
-moz-border-radius-bottomleft:10px; /*some css3*/
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-left-radius:10px;
-webkit-border-bottom-right-radius:10px;
}/* drop down */
#nav li:hover > ul {
opacity:1;
visibility:visible;
}
#nav ul {
opacity:0;
visibility:hidden;
padding:0;
width:175px;
position:absolute;
background:#aabbcc url(https://2.bp.blogspot.com/-FVx5AvxIkpg/TzP9VsBWmrI/AAAAAAAAAVk/5D5V1QHAhOQ/s320/bg-ABT.png) repeat-x 0 0;
border:1px solid #7788aa;border-radius:10px; /*some css3*/
-moz-border-radius:10px;
-webkit-border-radius:10px;
box-shadow:0 2px 2px rgba(0,0,0, .5);
-moz-box-shadow:0 2px 2px rgba(0,0,0, .5);
-webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);-moz-transition:opacity .25s linear, visibility .1s linear .1s;
-webkit-transition:opacity .25s linear, visibility .1s linear .1s;
-o-transition:opacity .25s linear, visibility .1s linear .1s;
transition:opacity .25s linear, visibility .1s linear .1s;
}
#nav ul li {
float:none;
margin:0;
}
#nav ul a {
font-weight:normal;
text-shadow:0 2px 2px rgba(255,255,255, 0.7);
}
#nav ul ul {
left:160px;
top:0px;
}
</style>
<ul id=”nav”>
<li><a href=”#“>Home</a></li>
<li><a href=”#“>Tutorials</a>
<ul>
<li><a href=”#“>HTML / CSS</a></li>
<li><a href=”#“>JS / jQuery</a>
<ul>
<li><a href=”#“>jQuery</a></li>
<li><a href=”#“>JS</a></li>
</ul>
</li>
<li><a href=”#“>PHP</a></li>
<li><a href=”#“>MySQL</a></li>
<li><a href=”#“>XSLT</a></li>
<li><a href=”#“>Ajax</a></li>
</ul>
</li>
<li><a href=”#“>Resources</a>
<ul>
<li><a href=”#“>By category</a>
<ul>
<li><a href=”#“>PHP</a></li>
<li><a href=”#“>MySQL</a></li>
<li><a href=”#“>XSLT</a></li>
<li><a href=”#“>Ajax</a></li>
</ul>
</li>
<li><a href=”#“>By tag name</a>
<ul>
<li><a href=”#“>captcha</a></li>
<li><a href=”#“>gallery</a></li>
<li><a href=”#“>animation</a></li>
</ul>
</li>
</ul>
</li>
<li><a href=”#“>About</a></li>
<li><a href=”http://www.bloggerisanje.blogspot.com.com”>FAQ’s</a></li>
</ul>
  • Sacuvajte.
Na mestima oznacenim crvenom bojom dodajete vas URL.
Mesta oznacena Belom bojom su imena menija.

Napravite CSS tabelu


kako kreirati css tabelu u blog postu

Blogger post editor pruza dosta alata koji pomazu blogerima da urede svoje postove tako da izgledaju sto privlacnije, modernije i profesionalnije. Ali ako zelite da napravite tabelu i da je dodate, u editoru necete naci opciju. Ima dosta nacina kako da napravite tabelu (HTML, WORD,CSS...) i da je dodate. Ja cu vam pokazati najlaksu opciju kako da kreirate i da je dodate u vas post. To je CSS tabela. Tabelu koju cu napraviti ima sjajne efekte, lako se ucitava i ne usporava blog.

Pogledajte demo:

Heading 1 Heading 2 Heading 3
Table A Table B Table C
Blogger Wordpress Joomla
CSS3 HTML5 Javascript
Sylesheet Script Coding

Da bi dodali tabelu, pratite sledece korake:

  • Prvi korak koji trebate da uradite jeste da dodate kod u sablonu koji cu ostaviti dole.
  • Idite na Blogger kontrolnu tablu > Sablon > Izmeni HTML
  • Pritisnite CTRL+F kako biste otvorili traku za pretragu
  • Unutrar trake za pretragu upisite  ]]></b:skin> i pritisnite ENTER.
  • Kada ste pronasli  ]]></b:skin> potrebno je da iznad njega dodate sledeci kod:
table {
color:#333;
font-family:Helvetica,Arial,sans-serif;
width:100%;
border-spacing:1px;
border-collapse:separate;
padding:0 3px;
}

td, th {
height:30px;
transition:all .3s;
text-align:center;
width:auto;
}

th {
background:#B1B6AF;
font-weight:700;
border-radius: 5px;
}

td {
background:#FAFAFA;
}

tr:nth-child(even) td {
background:#F1F1F1;
}

tr:nth-child(odd) td {
background:#E1DDDD;
}

tr td:hover {
background:#666;
color:#FFF
}
  • Sacuvajte sablon.
  • Ovo kodiranje ce raditi tek kada dodate tabelu u postu, a da bije dodali, pratite sledece korake:
  • U post editor prozoru, kliknite na HTML tab (vidi sliku ispod) i dodajte sledeci kod:

<table>
<tbody>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
<th>Heading 3</th>
</tr>
<tr>
<td>Table A</td>
<td>Table B</td>
<td>Table C</td>
</tr>
<tr>
<td>Blogger</td>
<td>Wordpress</td>
<td>Joomla</td>
</tr>
<tr>
<td>CSS3</td>
<td>HTML5</td>
<td>Javascript</td>
</tr>
<tr>
<td>Sylesheet</td>
<td>Script</td>
<td>Coding</td>
</tr>
</tbody>
</table>

Ako zelite da dodate red, samo ubacite sledeci kod unutar </tbody> tagova.

<tr>
<td>SEO</td>
<td>Search Engine Optimization</td>
<td>Google</td>
</tr>

Ako zelite da dodate novi red u svakoj sekciji za dodavanje sadrzaja, upisite sledeci kod:

<tr>
<td>Sylesheet</td>
<td>Script</td>
<td>Coding</td>
<td>Designing</td>
</tr>

Mozete dodavati ili brisati kolone ili redove na isti nacin.


Podesavanja:

Mozete menjati kombinacije boja tabele (Kodovi oznaceni zelenom bojom)
Kod oznacen plavom bojom oznacava prostor izmedju granica kolona koju mozete isto podesiti kako zelite.
Kod oznacen crvenom bojom eliminise prostom izmedju granice i mozete obrisati ako zelite.

Nadam se da sam vam pomogao da dodate tabelu u blog postu. Ako imate problema oko dodavanja, pisite!

30.03.2016.

Naslov Blog Posta - SEO Optimizacija



naslov-blog-posta-seo-optimizacija

U ovom clanku cemo diskutovati malo o tome kako da SEO optimizujete naslove vasih postova/clanaka. Naslov je najvaznija stvar kada je u pitanju SEO optimizacija za pretrazivace. U podrazumevanim sablonima Bloggera, naslovi postova nisu pravilno optimizovani za pretrazivace. Prvo se pojavljuje naslov bloga pa onda naslov clanka, ali danas cemo nauciti kako da to izmenite. Potrebno je da uradite neke izmene u vasem blog sablonu da bi se vas naslov pravilno optimizovao. Kada to odradite videcete velike promene u organskom saobracaju na vasem blogu. 


naslov-blog-posta-seo-optimizacija

Kao sto vidite na slici, prvo se pojavljuje Naslov Bloga : Naslov Blog Posta sto nije dobro za SEO optimizaciju i mi cemo to promeniti.

Pocnimo:

  • Prvo idite na vasu Blogger kontrolnu tablu, kliknite na Sablon > Izmeni HTML
naslov-blog-posta-seo-optimizacija

  • Sada pritisnite CTRL+F kako bi pronasli sledeci kod: <title><data:blog.pageTitle/></title>
naslov-blog-posta-seo-optimizacija

  • Sada zamenite taj kod sa sledecim:
<b:if cond=’data:blog.pageType == “item”‘>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title> </b:if>
  • Sada Sacuvajte Sablon.
To je to! (Vidite sliku ispod)

naslov-blog-posta-seo-optimizacija

Kao sto vidite, sada mozete videti da prvo dolazi Naslov Blog Posta | Naslov Bloga. (Test Post | Test Blog)

naslov-blog-posta-seo-optimizacija

29.03.2016.

CSS Animirane Share Ikone



css-animirane-share-ikone


Neka vasi citaoci bloga podele vase postove sa prijateljima na drustvenim mrezama! U ovom tutorijalu cu objasniti kako da dodate ove CSS animirane ikone/dugmice na vas blog koji se sastoji od cetiri najpopularnijih drustvenih mreza (Facebook, Twitter, Google+ i Pinterest) sa kul efektom.

Kako da dodate CSS Animirane Ikone


  • Idite na vasu Blogger kontrolnu tablu > Sablon > Izmeni HTML
  • Pritisnite CTRL+F da bi aktivirali polje za pretragu i pronadjite  ]]></b:skin> tag.
  • Iznad  ]]></b:skin> nalepite sledeci kod:
.share_button {
width: 300px;
height: 50px;
margin: 10px auto;
}
.share_button ul {
width: 50%;
height: inherit;
float: left;
list-style: none;
margin: 0 !important;
padding: 0 !important;
}
.share_button ul h1 {
margin-top: 9%;
overflow: hidden;
width: 100%;
color: #4889F0;
font-size: 18px;
text-shadow:2px 2px 2px #fff;
}
.share_button ul li {
position: absolute;
height: inherit;
width: 150px;
margin: 0 !important;
padding: 0 !important;
background: #EEEEEE;
-webkit-transition: all 600ms;
-moz-transition: all 600ms;
-o-transition: all 600ms;
-ms-transition: all 600ms;
transition: all 600ms;
text-align: center;
}
.share_button ul li h2 {
display: inline-block;
width: 32%;
height: 40px;
overflow: hidden;
margin-top: 5%;
cursor: pointer;
border: 0 !important;
}
.share_button ul:first-child li:first-child{
text-align: right;
}
.share_button ul:last-child li:first-child{
text-align: left;
}
.share_button ul:first-child li:last-child,
.share_button:hover ul:first-child li:first-child {
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
transform: rotateY(90deg);
}
.share_button ul:last-child li:last-child,
.share_button:hover ul:last-child li:first-child {
-webkit-transform: rotateY(-90deg);
-moz-transform: rotateY(-90deg);
-o-transform: rotateY(-90deg);
-ms-transform: rotateY(-90deg);
transform: rotateY(-90deg);
}
.share_button:hover ul:first-child li:last-child,
.share_button:hover ul:last-child li:last-child {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
}
  • Sledeci korak, pronadjite  <div class='post-footer'> i odmah iznad njega nalepite sledeci kod:
<div class='share_button'>

<ul>
<li><h1>
Share t
</h1></li>

<li><h2>
<a  expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; +  data:post.canonicalUrl + &quot;&amp;t=&quot; +  data:post.title ' title='Share on Facebook'><img src="http://2.bp.blogspot.com/-UK3OEVM0cVw/UwJfjtO-exI/AAAAAAAAGPA/CqQmlIlNJAE/s1600/Facebook.png"/></a></h2>

<h2><a  expr:href='&quot;http://twitter.com/home?status=&quot; +  data:post.title + &quot; &quot; + data:post.canonicalUrl '  title='Share on Twitter'><img src="http://4.bp.blogspot.com/-XyPHPVsfdz4/UwJfkJmI3JI/AAAAAAAAGPQ/QRGykJJtGow/s1600/Twitter.png"/></a></h2>
</li>
</ul>
<ul>
<li><h1>his page</h1></li>

<li>
<h2><a  expr:href='&quot;https://plus.google.com/share?url=&quot; +  data:post.canonicalUrl ' title='Share on Google Plus'><img src="http://3.bp.blogspot.com/-_YGvQ_Nrw10/UwJfjhXOGGI/AAAAAAAAGPU/tv1WNfkHdgg/s1600/Google-plus.png"/></a></h2>

<h2>
<a  href='javascript:void((function(){var%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)})());'  title='Share on Pinterest'><img src="http://4.bp.blogspot.com/-oZgH_AD169o/UwJfjl3ON0I/AAAAAAAAGPE/BLj5lWbsZyE/s1600/Pinterest.png"/></a>
</h2>
</li>
</ul>

</div>
  • Sacuvajte sablon.
To je to!

28.03.2016.

Internet Zarada - Google AdSense

internet-zarada-google-adsense

Sta je Google AdSense?

Google AdSense je servis jedne od najvecih kompanija na svetu i predstavlja besplatan i jednostavan nacin na koji objavljivaci veb-sajtova svih profila ostvaruju zaradu prikazivanjem ciljanih Google oglasa na svojim veb-sajtovima.

Kako funkcionise Google AdSense?

AdSense nudi vlasnicima veb-sajtova, blogova, foruma, da zarade novac od onlajn sadrzaja. AdSense funcionise tako sto podudara tekstualne i multimedijalne oglase sa sajtom na osnovu sadrzaja i posetilaca. Oglase prave i placaju oglasivaci koji zele da promovisu svoje proizvode. Posto ti oglasivaci placaju razlicite cene za razlicite oglase, iznos koji zaradjujete ce varirati. Drugacije receno, firme placaju Google-u reklame, a Google nudi sajtovima/ljudima da te reklame objavljuju, a svakim klikom na reklamu, daje vam odredjen procenat.

Zaradi novac preko Google AdSense

Svako ko ima sajt, blog, forum, trebao bi da razmisli o AdSense jer on spada u grupu najpopularnijih programa koje je potrebno samo jednom podesiti i to je to, ne morate ni misliti vise o njemu. Online zarada preko Google AdSense nije nesto sto ce vam doneti novac preko noci, potrebno je vreme, trud i rad. Kada sve to dodje na svoje onda se moze misliti i o zaradi.

Oni koji imaju sajt, blog, forum ili youtube kanal mogu se prijaviti za Google AdSense. Potrebno je registrovati se na ovom linku, prijavite svoj sajt/blog , koji ce Google analizirati i odobriti za nekih 48 casova. Nakon toga ce na vas email stici poruka koja sadrzi kod koji trebate da unesete u vas nalog. Kada ste uneli taj kod, vasa adsresa prebivalista ce biti verifikovana i na nju ce Google poslati cek sa vasom zaradom (minimalno 100 dolara) koji mozete naplatiti u bilo kojoj banci. 

Posle toga potrebno je da sa sajta Google AdSense prekopirate odredjen kod u zeljeni prostor na vašoj stranici i Google oglasi ce se poceti prikazivati u zavisnosti kakav je sadrzaj na toj stranici. Google je prilagodio vise vrsta prozora za oglase, sa razlicitim dimenzijama, vi odaberite i podesite kako vama odgovara.

zarada-putem-google-adsense

Da bi zaradili novac sa Google AdSense potrebno je da imate dobar web promet na svoj sajt/blog kako bi imao ko da klikne na oglase. A da bi vas sajt/blog bio posecen, morate da ga optimizujete za internet pretrazivace. Sto je veca poseta, veca je i zarada. Morate da imate sadrzaj koji bi mogao privuci oglase koji imju najvisu stopu PPC, relevantnih za taj sadrzaj. 

Pokretanje web sajta ili bloga

Na internetu mozete pronaci dosta platformi gde mozete jednostavno da se prijavite za blog. Preporucujem WordPress ili Blogger. Ja koristim Blogger platformu. Otvaranje bloga na ovim platformama je besplatno. Na ovom linku mozete pogledati tutorijal kako da napravite blog na bloggeru besplatno. Blogger platforma ima opciju koja omogucava vrlo lako prijavljivanje vaseg bloga na Google AdSense.

Sadrzaj na vasem blogu

Tekst na stranici mora biti relevantan sa temom vaseg sajta/bloga. Morate imati dobar  i originalan sadrzaj na vasim stranicama. AdSense vam nece biti odobren ako imate premalo teksta na sajtu/blogu. Potrebno je zadrzati posetioce sto duze na stranicama jer sto duze ostanu, vece su sanse da ce kliknuti na oglas. 


Najefikasnije velicine oglasa su veliki pravougaonik 336×280, srednji pravougaonik 300×250, gornji baner 728×90, oglas na pola stranice 300×600, i na mobilnim uredjajima veliki baner 320×100.

najbolje-oglasne-jedinice-adsense


Vise o tome mozete procitati ovde.


Dodajte Widget Za Najvise Komentarisane Postove

widget-za-najvise-komentarisane-postove

Widget Za Najvise Komentarisane Postove

Jos jedan jedinstveni Blogger Widget koji ce prikazati top komentatore sa vaseg bloga na bocnoj traci. Ovo je widget koji prikazuje postove sa najvecim brojem komentara sa lepim CSS3 efektima koji ce vas blog uciniti lepsim, atraktivnijim i privlacnijim za vase posetioce. Ukoliko ste zainteresovani za ovaj widget i zelite ga dodati na vas blog, samo ispratite sledece korake:

Kako instalirati ovaj widget za najvise komentarisane postove? 

  • Ulogujte se na Blogger > Kontrolna tabla
  • Idite na "Izgled" > Dodaj Gadget
  • Izaberite HTML/JavaScript
  • Sada kopirajte kod koji se nalazi ispod, dodajte i sacuvajte.

<div id="most-comments"></div>
<style scoped='' type='text/css'>
#most-comments li,#most-comments ul,#most-comments ul li{margin:0;list-style:none;color:#444;font-family:'Open Sans',Helvetica,Arial,sans-serif;font-size:14px}#most-comments ul li{position:relative;overflow:hidden;background:#fff;margin:3.5px 0;padding:7px 10px 7px 50px;white-space:nowrap;text-overflow:ellipsis;box-shadow:inset 0 0 #fc4f3f;border:1px solid #e6e6e6;transition:all .6s}#most-comments ul li:hover{box-shadow:inset 310px 0 #fc4f3f}#most-comments ul li a{color:#444;font-weight:700;text-decoration:none;transition:all .3s}#most-comments ul li a:hover,#most-comments ul li:hover a{color:#fff}.count-most{position:absolute;left:0;top:0;width:40px;height:100%;margin:0;padding:7px 0;background-color:#383838;color:#fff!important;text-align:center;transition:all .3s}#most-comments ul li:hover .count-most{background-color:#fc4f3f}
</style>
<script type='text/javascript'>
//<![CDATA[
var numPosts=10;
var homePage="bloggerisanje.blogspot.com";
var postTitlear=new Array();
var postUrlar=new Array();
var postCommentar=new Array();
var totalpost;document.write('<div id="most-comments"><ul>');
function mostComment(j){var a=j.feed.entry.length;totalpost=a;
for(var f=0;f<a;f++){
var h=j.feed.entry[f];
var c=h.title.$t;var b;
var g;if(f==j.feed.entry.length){break}
for(var d=0;d<h.link.length;d++){
if(h.link[d].rel=="alternate"){g=h.link[d].href;break}}
for(var d=0;d<h.link.length;d++){
if(h.link[d].rel=="replies"&&h.link[d].type=="text/html"){b=h.link[d].title.split(" ")[0];}};
postTitlear.push(c);
postUrlar.push(g);
postCommentar.push(b)}sortPosts();
for(var f=0;f<numPosts;f++){var e='<li><span class="count-most">'+postCommentar[f]+'</span><a href="'+postUrlar[f]+'" title="'+postTitlear[f]+'" target="_blank">'+postTitlear[f]+'</a>';
document.write(e)}}
function sortPosts(){function c(d,f){var e=postTitlear[d];
postTitlear[d]=postTitlear[f];
postTitlear[f]=e;
var e=postUrlar[d];
postUrlar[d]=postUrlar[f];
postUrlar[f]=e;
var e=postCommentar[d];
postCommentar[d]=postCommentar[f];
postCommentar[f]=e}
for(var b=0;b<postTitlear.length-1;b++){
for(var a=b+1;a<postTitlear.length;a++){
if(parseInt(postCommentar[b])<parseInt(postCommentar[a])){c(b,a)}}}}
document.write('<script src="http://'+homePage+'/feeds/posts/default?max-results=9999&orderby=published&alt=json-in-script&callback=mostComment"><\/script>');
document.write('</li>')
document.write('</ul>')
document.write('</div>');
//]]>
</script>

Zamenite URL u kodu "bloggerisanje.blogspot.com" sa vasim URL-om.
Broj 10 u kodu oznacava broj naslova posta i mozete smanjiti, povecati, kako vama odgovara.

To je to.

27.03.2016.

Kako Automatski Ukloniti Spam Linkove Iz Komentara


Kako se izboriti protiv nezeljenih komentara koji su vrlo iritantni i smaraju?  

Ne zelite da brisete sve komentare zbog par spam linkova?
Veoma cesto se pojavljuju spam URL-ovi koji vode ka nekim drugim stranicama, pokusavajuci da podignu saobracaj i page rank. Mnogi ljudi cesto postavljaju komentare na raznim blogovima kako bi izgradili sto vise backlinkova. To je obicno opcija u sablonu komentara "Ime/URL". To se zove Blackhat SEO.

Blogger nema opciju za detektovanje i brisanje spam komentara, ali postoji nacin da se oni automatski uklone. Ja cu vam u ovom postu objasniti kako da automatski budu obrisani svi nezeljeni spam komentari sa vaseg bloga.

Metoda #1 - Koristeci CSS za uklanjanje spam linkova iz komentara.

Uz pomoc ove CSS skripte uklonicete spam komentare ali i zaustaviti pretrazivace da ih indeksiraju.
  • Idite na Blogger > Sablon > Prilagodi
  • Idite na opciju "Napredno" i tu dodajte sledeci kod:
  • Sacuvajte
.comment-content a {
display: none;
}

Metoda #2 - Koristeci jQuery uklonite linkove.

  • Idite na Blogger > Sablon > Izmeni HTML
  • Pronadjite (Ctrl+F)  <body>  tag i ispod njega nalepite sledeci kod:
<!--Stop Blog Comments -->
<script>$('.comment-content a[rel$=nofollow]').replaceWith(function(){return ($(this).text());});
</script>
<!--Stop Blog Comments -->
  • Sacuvajte sablon.
Sada mozete mirno da spavate jer vise nece biti spam komentara! Skripta ce ih automatski ukloniti nakon nekoliko sekundi.

25.03.2016.

Automatsko otvaranje eksternih linkova u novom prozoru na blogu

Automatsko otvaranje eksternih (spoljasnjih) linkova u novom prozoru

Ukratko da objasnimo sta su eksterni (spoljasnji) i interni (unutrasnji) linkovi

Sigurno ste videli citajuci clanke na raznim stranicama reci koje su drugacije boje (obicno plave) ili podvucene. Kada kliknete na njih odvode vas na drugu stranicu. Te reci ili fraze se zovu hiperlinkovi koji mogu da budu spoljasnji i unutrasnji. Gradjenje linkova je vrlo bitan deo u SEO optimizaciji.

Unutrasnji (Interni) linkovi - Su veze koje upucuju citaoce na razlicite stranice ili oblasti bloga ili sajta u okviru istog domena. Unutrasnje (Interno) povezivanje je vazan faktor u optimizaciji sajta za pretrazivace. Interne veze mogu biti korisne pretrazivacima da pronadju novi sadrzaj. Poboljsavaju i rangiranje vaseg bloga/sajta na pretrazivacima.
Spoljasnji (Eksterni) linkovi - Oni usmeravaju citaoce na druge sajtove/blogove i povezuju vas blog/sajt sa njima. Sa unutrasnjim linkovima pruzate citaocima mogucnost da vise saznaju o temi o kojoj pisete. U tu svrhu koristite vase ranije postove koji pripadaju istoj kategoriji. Time postizete da citaoci imaju uvid u vas obim znanja i strucnost u vasoj oblasti o kojoj pisete.

Kako podesiti automatsko otvaranje eksternih linkova u novom prozoru na blogu?

Ako zelite da otvorite sve svoje eksterne linkove u novom prozoru ili novoj kartici kada kliknete i da ne biste rucno dodavali za svaku frazu ili rec posebno target="_blank" unutar hiperlinka. Ovo je jednostavna jQuery skripta koja ce proveriti sve linkove unutar vasih stranica, postova i automatski ce dodati target="_blank" atribut za sve spoljasnje (eksterne) veze. Ova skripta nece ostaviti nikakve posledice po unutrasnje veze u blogu. Skripta ce detektovati samo spoljasnje linkove  i onog momenta kada pronadje, ubacuje target="_blank" atribut koji govori browseru da otvori link u novom prozoru.

Ovo se moze odraditi i rucno za svaki link koji zelite da otvorite u novom prozoru dodavanjem target="_blank" u linku. Pogledajte sliku.


Automatsko otvaranje eksternih linkova u novom prozoru - sledite korake

  • Ulogujte se > Sablon 
  • Uradite Backup sablona za svaki slucaj
  • Kliknite na Izmeni HTML
  • Pronadjite (CTRL+F)  </head> i iznad dodajte sledecu skriptu:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(function() { 
  $("a[href^='http://']").each( 
    function(){ 
     if(this.href.indexOf(location.hostname) == -1) { 
        $(this).attr('target', '_blank'); 
      } 
    } 
  );
$("a[href^='https://']").each( 
function(){ 
if(this.href.indexOf(location.hostname) == -1) { 
$(this).attr('target', '_blank'); 
} 
} 
);
  
});
</script>

Napomena: Nemojte dodati crveni kod ako vec imate jQuery biblioteku na vasem blogu.

  • Sacuvajte.

24.03.2016.

CSS3 padajuci meni u jednom koraku!

Dodajte CSS3 padajuci meni u jednom koraku


Ovaj padajuci meni je prelep i jednostavan za dodavanje. Odlican je za pocetnike jer nema nikakvog komplikovanja oko jQuery-a, JavaScripts, dodavanja slika, itd..

U ovom postu cete videti kako da u jednom koraku dodate ovaj CSS3 animirani padajuci meni.

Navigacija koristi CSS3 i ima efekat glatkog pomeranja zbog cega je jedinstvena i prelepa.

Trebate uraditi sledece:

  • Idite na Blogger > Izgled
  • Kliknite na "Dodaj Gadzet"
  • Izaberite opciju HTML/JavaScript i nalepite sledeci kod

<style>
/*------ CSS3 Drop Down Menu By Bloggerisanje (www.bloggerisanje.blogspot.com)---------*/
#bgs-menu, #bgs-menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#bgs-menu {
width: 960px;
margin: 60px auto;
border: 1px solid #222;
background-color: #111;
background-image: -moz-linear-gradient(#444, #111);
background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
background-image: -webkit-linear-gradient(#444, #111);
background-image: -o-linear-gradient(#444, #111);
background-image: -ms-linear-gradient(#444, #111);
background-image: linear-gradient(#444, #111);
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 0 1px 1px #777;
-webkit-box-shadow: 0 1px 1px #777;
box-shadow: 0 1px 1px #777;
}
#bgs-menu:before,
#bgs-menu:after {
content: "";
display: table;
}
#bgs-menu:after {
clear: both;
}
#bgs-menu {
zoom:1;
}
#bgs-menu li {
float: left;
border-right: 1px solid #222;
-moz-box-shadow: 1px 0 0 #444;
-webkit-box-shadow: 1px 0 0 #444;
box-shadow: 1px 0 0 #444;
position: relative;
}
#bgs-menu a {
float: left;
padding: 12px 30px;
color: #999;
text-transform: uppercase;
font: bold 12px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#bgs-menu li:hover > a {
color: #fafafa;
}
*html #bgs-menu li a:hover { /* IE6 only */
color: #fafafa;
}
#bgs-menu ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
z-index: 9999;
background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-box-shadow: 0 -1px rgba(255,255,255,.3);
-webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
box-shadow: 0 -1px 0 rgba(255,255,255,.3);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
#bgs-menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#bgs-menu ul ul {
top: 0;
left: 150px;
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/
-moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
-webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
box-shadow: -1px 0 0 rgba(255,255,255,.3);
}
#bgs-menu ul li {
float: none;
display: block;
border: 0;
_line-height: 0; /*IE6 only*/
-moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
-webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}
#bgs-menu ul li:last-child {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#bgs-menu ul a {
padding: 10px;
width: 130px;
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#bgs-menu ul a:hover {
background-color: #0186ba;
background-image: -moz-linear-gradient(#04acec, #0186ba);
background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background-image: -webkit-linear-gradient(#04acec, #0186ba);
background-image: -o-linear-gradient(#04acec, #0186ba);
background-image: -ms-linear-gradient(#04acec, #0186ba);
background-image: linear-gradient(#04acec, #0186ba);
}
#bgs-menu ul li:first-child > a {
-moz-border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
#bgs-menu ul li:first-child > a:after {
content: '';
position: absolute;
left: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #444;
}
#bgs-menu ul ul li:first-child a:after {
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #3b3b3b;
}
#bgs-menu ul li:first-child a:hover:after {
border-bottom-color: #04acec;
}
#bgs-menu ul ul li:first-child a:hover:after {
border-right-color: #0299d3;
border-bottom-color: transparent;
}
#bgs-menu ul li:last-child > a {
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}

</style>

<ul id="bgs-menu"> 
<li><a href="#">Home</a></li> 
<li> 
<a href="#">Categories</a> 
<ul> 
<li><a href="#">CSS</a></li> 
<li><a href="#">Graphic design</a></li> 
<li><a href="#">Development tools</a></li> 
<li><a href="#">Web design</a></li> 
</ul> 
</li> 
<li><a href="#">Work</a></li> 
<li><a href="#">About</a></li> 
<li><a href="#">Contact</a></li> 
</ul>

Ovaj Widzet vrlo lako mozete da menjate. Naslov kartica jednostavno zamenite svojim, a # zamenite sa odgovarajucim linkovima.

  • Sacuvajte i to je to.