Dodavanje pokretnog naslova stranice na vas blog

Kako dodati pokretni naslov stranice na vas blog koristeci JavaScript?

U ovom postu cu vam pokazati kako da dodate pokretni naslov stranice na statusnoj traci.

• Ulogujte se na vas Blogger Account
• Iz menija izaberite opciju "Tema"
• Kliknite na opciju "Izmeni HTML"

• Pronadjite (crtl+f) sledeci kod </head> i iznad njega nalepite sledece:

<b:if cond='data:blog.pageType ==  &quot;index&quot;'><script>var title=&quot;  <data:blog.pageTitle/> &quot;;var speed=200;var  mpse=null;function  rotulo_title(){document.title=title;title=title.substring(1,title.length)+title.charAt(0);mpse=setTimeout(&quot;rotulo_title()&quot;,speed)}rotulo_title();</script>  <b:else/><script>var title=&quot;  <data:blog.pageName/> &quot;;var speed=200;var  mpse=null;function  rotulo_title(){document.title=title;title=title.substring(1,title.length)+title.charAt(0);mpse=setTimeout(&quot;rotulo_title()&quot;,speed)}rotulo_title();</script></b:if>

• Sacuvajte.
• Vas naslov ce biti pokretan.

Continue Reading →

Kako dodati PDF na blog

Dodavanje PDF i druge dokumente na vas blog

U ovom postu cu vam objasniti kako da ugradite ili dodate (Embed) bilo koji PDF ili neki drugi dokument na vasu stranicu. Postoji mnogo nacina kako se mogu dodati, ugraditi neki PDF dokumenti ili neki drugi kao sto su Microsoft Word, PowerPoint prezentacije, tabele, Excel tabele na nekoj vasoj stranici, u ovom slucaju je to Blogger platforma.

Najlaksi nacin i najpouzdaniji u ovom slucaju je Google Docs ili Google dokumenti. Zbog toga cu u ovom clanku objasniti kako da dodate PDF ili bilo koje druge dokumente na vas blog.

Prvi korak, idite na https://drive.google.com i prijavite sa na vas gmail nalog da biste mogli uci na vas Google Disk. Nakon prijave na vas Google nalog, mozete koristiti Google Disk.

Sledeca stvar je da postavite/uploadujete PDF fajl iz vaseg kompjutera na Google Disk. Desnim klikom na opciju "Moj disk" pojavice vam se meni prikazan kao na slici. Kliknite na "Otpremi datoteke..."

Sledeci korak je da iz vaseg kompjutera izaberete PDF dokument koji zelite da dodate.

Pritiskom na dugme 'Open' otpremanje odabrane datoteke ce poceti. To obicno traje minut ili dva, sve zavisi od velicine datoteke i brzine vaseg interneta.

Kada se upload zavrsi, kliknite na ime datoteke koju ste dodali i ona ce vas odvesti na novu stranicu.

Pre nego sto ugradite zeljeni dokument na vasu stranicu/blog, potrebno je promenite dozvolu datoteke u javnosti. Promenu vrsite tako sto kliknete desnim klikom na zeljeni dokument i izaberete opciju 'Deli...'

Otvorice vam se prozor za deljenje sa ljudima. Vi cete kliknuti na opciju 'Napredno' koja se nalazi u donjem desnom uglu prozora.

Kada ste kliknuli na opciju 'Napredno' otvorice vam se nov prozor.

Ovde mozete videti link za deljenje samo sa saradnicima. Datoteku trenutno mozete videti samo vi (Privatno). Mi zelimo da odabranu datoteku delimo sa sa svima na webu, a to cemo promeniti tako sto kliknemo na opciju 'Promeni'.

Izaberite opciju 'Ukljuceno - javno na vebu' i sacuvajte promene.

Nakon promene podesavanja dozvola o deljenju, sada je vreme da uzmete vas link za deljenje.

Sada desnim klikom idemo na zeljeni dokument i izaberemo opciju za 'Deli...'. Postupak mozete videti na slici iznad. Kopirajte link.

Ono sto je sada potrebno jeste da u ovom kodu koji cu ostaviti dole za deljenje zamenite vasim linkom koji ste kopirali.

<iframe src="https://drive.google.com/file/d/0B9Jlfj07XxktS3JYZ3lYTkVQVk0/view?usp=sharing" width="600" height="300"></iframe>

Zeleni link zamenite vasim.

Sada ostaje samo da ga dodate na vasu stranicu.

Sacuvajte o objavite. To bi bilo to. :)

Continue Reading →

Animirano ucitavanje stranica na blogu

Page Loading Effect na vasem blogu

Svaki bloger zeli da njegov blog izgleda sto bolje u odnosu na konkurenciju i tako stekne sto veci broj citalaca. Ovaj vidzet ce svakako dodati malo vise ozbiljnosti vasem blogu.

Ovaj vidzet radi tako sto kada vasi posetioci kliknu na bilo koju stranicu, post ili link, kada zeli da napusti trenutnu stranicu, ucitavanje ce biti animirano.

Kako radi ovaj vidzet mozete videti na samom blogu, samo jednostavno kliknite na bilo koji post.

Da biste dodali ovaj efekat na vas blog potrebno je da uradite sledece:

• Idite na opciju Tema > Izmeni HTML
• Pronadjite (ctrl+f)  </body>
• Iznad njega nalepite sledeci kod

<style>
#abt-page-loader {
        position: fixed!important;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 9999;
        background:#000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVVCJt3JGOMZQjyU-UKDgEqdH_2-W9ecP_lFUEjfKChiPEasM49lcq5YdgppY8XizctcT0g_ukeB3r8kxBIUMvjLGjLP2DbmCby26Ka2YRO_he9W80laRrZjfIBokz5JIhRDHfM2Q60vo/s200/load6.gif') no-repeat 50% 30%;
        color: #FFF;
        display: none;
        font: 0/0 a;
        text-shadow: none;
        padding: 1em 1.2em;
}
</style> 
<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="abt-page-loader">Loading...</div>');
$(window).on("beforeunload", function() {
    // ... Show the Animation `.fadeIn()`
    $('#abt-page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>

• Posle dodavanja koda, sacuvajte.

To bi bilo to. :)

Continue Reading →

Kako dodati Sitemap stranicu na vasem blogu?

Dodavanje Sitemap stranice (Sadrzaj) na blogu

HTML Sitemap ili sadrzaj pokazuje organozovanu listu postova koji se nalaze na vasem blogu. U ovom clanku cu vam objasniti kako da u par jednostavnih koraka dodate vasu Sitemap stranicu koja ce olaksati vasim citaocima da se lakse snadju.

1. Idite na Blogger i ulogujte se na vas Account
2. Idite na opciju Stranice. Napravite novu stranicu i dodelite joj ime koje zelite, kod mene je to "Sadrzaj"
3. Kopirajte sledeci kod:

<style type="text/css">#toc{width:99%;margin:5px auto;border:1px solid #dddddd;-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);}.labl{color:#eb3131;font-weight:bold;margin:0 -5px;padding:1px 0 2px 11px;background:-moz-linear-gradient(right,#eb3131 0%,#eeeeee 40%);background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#eb3131),color-stop(1,#f06060));border:1px solid #transparent;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;-moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;}.labl a{color:#fff;}.labl:first-letter{text-transform:uppercase;}.new{color:#444444;font-weight:bold;font-style:none;}.postname{font-weight:normal;background:-moz-linear-gradient(right,#C2EAFE 0%,#fff 40%);background:-webkit-gradient(linear,left 80,right 10,color-stop(0.60,#fff),color-stop(1,#eeeeee));}.postname li{border-bottom: #ddd 1px dotted;margin-right:5px}
</style>

<br /><div id="toc"><script src="https://rawgit.com/101Helper/docs/master/sitemap.js" type="text/javascript"></script><script src="https://bloggerisanje.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script></div>

-Potrebno je da ga nalepite na vasoj stranici tako sto cete klinkuti na opciju HTML koja se nalazi u gornjem levom uglu.
-Sada je potrebno da samo zamenite moj link sa vasim koji je oznacen https://bloggerisanje.blogspot.com
-Sacuvajte stranicu, objavite i to bi bilo to.

Ovde mozete da vidite kako to izgleda.

Continue Reading →

Napravite CSS tabelu

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!

Continue Reading →

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.

Continue Reading →

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.

Continue Reading →

Kako da dodate tri kolone u podnozju vaseg bloga

Dodavanje tri kolone u podnozju Blogger bloga (3 Column Footer)

Trebaju vam vise kolona u podnozju vaseg bloga? Zelite da dodate widgete u podnozju?

U ovom tutorijalu cu pokazati kako da dodate tri kolone u podnozju bloga kako biste mogli da dodate vise widgeta. Dodavanje ove tri trake je vrlo jednostavno samo pratite moje sledece korake:

• Ulogujte se na vas blogger nalog i idite na opciju Sablon > Izmeni HTML
• Pronadjite (Ctrl + F)  <b:section class='footer' id='footer'/>
• Zamenite  <b:section class='footer' id='footer'/> sa sledecim kodom:

<div id='footer-column-container'>
<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/></div>
<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div><div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/></div>
<div style='clear:both;'/>
<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>
<b:section class='footer' id='col-bottom' preferred='yes'><b:widget id='Text2' locked='false' title='' type='Text'/>
</b:section></div><div style='clear:both;'/></div>

• Sada pronadjite (Ctrl+F)  ]]></b:skin>
• Iznad  ]]></b:skin> nalepite sledeci kod:

/* Footer by www.bloggerisanje.blogspot.com */
#footer-column-container {clear:both;}
#footer-column-container h2{font-size:18px;text-align:left;color:#ddd;Times New Roman",Times,serif;
font:normal bold 18px Arial,Georgia,"text-transform:none}
.footer-column {padding: 10px;}

• Sacuvajte sablon.

Sada vase podnozje ima tri kolone i mozete da dodajete widgete!

Continue Reading →

Dodajte Vertikalni Meni Na Vasem Blogu

Vertikalni Meni Za Vas Blog

Zelite da vas sadrzaj bude sto pristupacniji za vase korisnike? Ovo je CSS vertikalni meni koji ce ulepsati vas blog. Jednostavan je za dodavanje, bez komplikovanja i u samo dva koraka imacete prelep meni na vasem blogu.

1.

• Ulogujte se na Blogger
• Kliknite na Sablon > Izmeni HTML
• Pronadjite (CTRL+F) kod ]]></b:skin>
• Iznad njega nalepite iznad ]]></b:skin> sledeci CSS kod:

.mbw_menu{
width: 190px; /*width of menu*/
}

.mbw_menu .headerbar{
font: bold 13px Verdana;
color: white;
background: #606060 url(http://img407.imageshack.us/img407/6162/arrowstop.gif) no-repeat 8px 6px; /*last 2 values are the x and y coordinates of bullet image*/
margin-bottom: 0; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 7px 0 7px 31px; /*31px is left indentation of header text*/
}

.mbw_menu ul{
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 0; /*bottom spacing between each UL and rest of content*/
}

.mbw_menu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
}

.mbw_menu ul li a{
font: normal 12px Arial;
color: black;
background: #E9E9E9;
display: block;
padding: 5px 0;
line-height: 17px;
padding-left: 8px; /*link text is indented 8px*/
text-decoration: none;
}

.mbw_menu ul li a:visited{
color: black;
}

.mbw_menu ul li a:hover{ /*hover state CSS*/
color: white;
background: black;
}

</style>

• Sacuvaj

2.

• Sada idite na Izgled > Dodaj Gadget
• Izaberite HTML / JavaScript
• Nalepite sledeci kod:

<div class="mbw_menu">

<h3 class="headerbar">MENU</h3>
<ul>
<li><a href="#">Blog Trikovi</a></li>
<li><a href="#">Tutorijali Na Srpskom</a></li>
<li><a href="#">Widgeti Za Blog</a></li>
<li><a href="#">Bloggerisanje</a></li>
<li><a href="#">Alati</a></li>
<li><a href="#">SEO</a></li>
<li><a href="#>Blogger</a></li>
</ul>


</div>

• Sacuvaj

- Umesto # dodajete vas URL

- Sadrzaj je oznacen Zelenom bojom

Continue Reading →