5 Najboljih HTML Editora Za Windows

5 najboljih HTML editora koji su potpuno besplatni.

Ukoliko zelite da razvijete sajt, moracete da koristite HTML editor. Vi naravno mozete koristit i Window Notepad za izgradnju sajta, ali to bi bilo poprilicno tesko i neudobno. HTML editor mora da odradi dve stvari veoma dobro, a to su sintakse (obojenost koda) i automatsko dovrsavanje. Ima to jos dosta funkcija koje su nam potrebne, ali ove dve su dosta bitne. Ja sam izabrao, po meni 5 najboljih editora za Windows.

#1 Notepad++

Notepad++ je moj omiljeni besplatan editor za editovanje tekstualnih fajlova i pisanje koda. Ovaj program je potpuno besplatan i mozete ga preuzeti besplatno sa njihove stranice - ovde. 

Podrzava vise programskih jezika pod Windows okruzenjem, kao sto su: C, C++, Java, C#, XML, HTML, PHP, Javascript, RC file, makefile, nfo, doxygen, ini file, batch file, ASP, VB/VBS, SQL, Objective-C, CSS, Pascal, Perl, Python, Lua, Unix Shell Script, Fortran, NSIS and Flash action script.

Notepad++ je ustvari nesto izmedju klasicnog Window Notapade-a i WordPad-a. Prednosti u odnosu na WordPad je podrska za rad sa tabovima, mozda cak i najvaznija prednost i to vam omogucava da radite sa vise fajlova istovremeno. Jos jedna od prednosti je numerisanje linija koda, tako da uvek mozete lako da se snadjete.

Notepad++ je napisan u programskom jeziku C++ i koristi cist Win32 API i STL koji osigurava vecu brzinu izvrsavanja i manju velicinu programa.

#2 Komodo Edit

Postoje dve verzije na raspolaganju, Komodo Edit i Komodo IDE. Komodo Edit je open source i preuzimanje je besplatno.

Komodo Edit je veoma dobar tekst web editor. To ukljucuje puno odlicnih karakteristika za HTML i CSS razvoj.

Komodo koristi Mozilla i Scintilla bazu kodova jer oni dele mnoge karakteristike i podrsku istih jezika (ukljucujuci, Perl, PHP, Руби, Tcl, SQL, Smarty, CSS, HTML i XML) i operating systems (Linux, OS X i Windows). Komodo Edit mozete preuzeti - ovde.

#3 Eclipse

Eclipse je besplatan program, otvorenog koda, za razvoj softvera i razlicitih aplikacija. Ovaj program je pogodan za ljude koji rade puno kodiranja na razlicitim platformama sa razlicitmi jezicima.

Moze se reci i da predstavlja standardnu platformu koja je prvenstveno namenjena za mobilne programere, programiranju za Android operativni sistem, a moze se koristiti i za rad sa PHP-om i drugim programskim jezicima, ukljucujuci C, C++, Perl, Python, Ruby, Ada, COBOL itd. Tamo su i Java, JavaScript i PHP pluginovi, kao i dodatak za mobilne programere.

Eclipse mozete preuzeti - ovde.

#4 SynWrite

SynWrite je jos jedan besplatan program, otvorenog koda, za pisanje i uredjivanje tekstualnih fajlova i kodova.

Prvenstveno namenjen programerima, webmasterima, html editorima, a potom i svim ostalim korisnicima koji zele da se isprobaju u razvijanju razlicitih projekata.

Podrzava rad sa preko 70 programskih jezika, podrzava vise kodiranja, podrzano snimanje, postavljanje i pokretanje makronaredbi, integracija sa spoljasnjim alatima i dodacima napisanih u Python programskom jeziku, omogućeni pregled izvornog koda u vidu stabla, posedovanje prilagodljivih precica, visejezicni interfejs itd...

SynWrite sigurno spada medju najbolje programe za obradu tekstualnih fajlova. Preporucujemo.

SynWrite mozete preuzeti - ovde.

#5 Aptana Studio 3

Aptana je IDE (IDE – integrisano razvojno okruzenje) (IDE je - Integrisano razvojno okruzenje poznato i kao IDE (engl. Integrated Development Environment) je softver koji programerima pruza sirok skup objekata za razvoj softvera.)  otvorenog koda i potpuno sveobuhvatno, besplatno resenje napisano u Javi i dostupno za Linux, Mac i Windows operativne sisteme. Veoma je mocan i popularan alat sa pregrst funkcija koje programeru mogu olaksati rad. Isprobajte!

Aptanu mozete preuzeti - ovde.

Continue Reading →

CSS3 download dugme za vas blog

CSS3 Download dugme za blogger 

Ovo dugme se sastoji od CSS3, odnosno bez upotrebe bilo kakvih slika ili JavaScript-a. Ovo dugme moze biti zaista korisno za blogove koji nude preuzimanje nekog sadrzaja, softvera, igrica...

Ovde mozete pogledati kako to izgleda.

Dodavanje CSS koda u Sablon

• Idite na vas blog
• Idite na opciju iz menija Tema > Izmeni HTML
• Pronadjite </body>  (ctrl+f)
• Sledeci kod nalepite iznad </body>

<style>

.abt-button {
    margin: 50px auto;
    width: 200px;
}

 /* Get this button at bloggerisanje.blogspot.com */ 

.abt-button a {
    background: -moz-linear-gradient(center top , #00B7EA 0%, #009EC3 100%) repeat scroll 0 0 transparent;
    color: white;
    display: block;
    font: 17px/50px Helvetica,Verdana,sans-serif;
    height: 50px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    width: 200px;
    position: relative;
    z-index: 2;

  /*TYPE*/
  color: white;
  font: 17px/50px Helvetica, Verdana, sans-serif;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;

  /*GRADIENT*/ 
  background: #00b7ea; /* Old browsers */
  background: -moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* IE10+ */
  background: linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#00b7ea&#39;, endColorstr=&#39;#009ec3&#39;,GradientType=0 ); /* IE6-9 */
}

.abt-button a, .abt-button p {
    -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
          border-radius: 10px;

  -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
     -moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
          box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
}
.abt-button p {
    background: #222222;
    color: #FFFFFF;
    display: block;
    font: 12px/45px Helvetica,Verdana,sans-serif;
    height: 40px;
    margin: -40px 0 0 10px;
    position: absolute;
    text-align: center;
    transition: margin 0.5s ease 0s;
    width: 180px;
    z-index: 1;
  /*TRANSITION*/ 
  -webkit-transition: margin 0.5s ease;
     -moz-transition: margin 0.5s ease;
       -o-transition: margin 0.5s ease;
      -ms-transition: margin 0.5s ease;
          transition: margin 0.5s ease;

}
.abt-button:hover .up {
    margin: -5px 0 0 10px !important;
}
.abt-button:hover .down {
    line-height: 35px !important;
    margin: -85px 0 0 10px !important;
}
.abt-button a:active {

background: #00b7ea; /* Old browsers */
background: -moz-linear-gradient(top,  #00b7ea 36%, #009ec3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(36%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* IE10+ */
background: linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#00b7ea&#39;, endColorstr=&#39;#009ec3&#39;,GradientType=0 ); /* IE6-9 */

}
.abt-button:active .up {
    margin: -20px 0 0 10px !important;
}
.abt-button:active .down {
    margin: -70px 0 0 10px !important;
}
</style>

• Posle dodavanja koda sacuvajte i pratite sledeci korak.

Dodavanje dugmeta

Kada smo dodali CSS kod, trebamo da dodamo HTML na zeljeno mesto. Dakle, kada god zelite da dodate ovo dugme na neku stranicu ili na nekom postu, potrebno je da uredjivac prebacite na HTML opciju i nalepite vas HTML kod koji cu ostaviti ispod.

<div class="abt-button">
      <a href="#">Download</a>
      <p class="up">click to begin</p>
      <p class="down">1.2MB .zip</p>
    </div>

Posle dodavanje HTML-a potrebno je samo da na mestu gde je # dodate vas url za preuzimanje datoteke. Takodje, 1.2MB  .zip promenite i stavite vasu velicinu datoteke.

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 →

HTML Kontakt Forma

Obrazac za kontakt na posebnoj stranici

U ovom tutorijalu ću vam pokazati kako možete da dodate zaista sjajnu sa cool izgledom kontakt formu na vašoj stranici. Ovaj kontakt formular izgleda zaista elegantno i veoma dopadljivo.

Dodavanje CSS koda:

• Ulogujte se na Blogger Account > Kontrolna tabla vaseg bloga
• Sada je potrebno da kliknete na opciju Šablon > Izmeni HTML i da pronađete ]]></b:skin> tag i odmah iznad njega da nalepite sledeći css kod

#ContactForm1{
display:none;
}
#contact_wrap {
margin: auto;
width: 321px;
height: 380px;
padding: 25px;
border-radius: 1em;
border-top:1px solid #dbdbdb;
border-right:1px solid #b2b2b2;
border-left:1px solid #dbdbdb;
border-bottom:1px solid #9d9d9d;
background-color:#cccccc;
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#f2f2f2', endColorstr='#cccccc');
background-image:-webkit-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
background-image:-moz-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
background-image:-ms-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
background-image:-o-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
background-image:linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
box-shadow: 1px 1px 5px #ccc;
}
#contact_wrap h3{
color: #e8f3f9;
font-family:Georgia;
font-size: 20px;
font-style:italic;
font-weight:bold;
margin: 0 -36px 20px -36px;
padding: 12px;
text-align: center;
text-shadow: 2px 0 0 #1f4962;
-webkit-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;
-moz-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;
box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;
background-color: #3689b9;
position: relative;
}
#contact_wrap h3:before {
content: ' ';
position: absolute;
bottom: -10px;
left: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 0 0 10px;
border-color: #333 transparent transparent transparent;
}
#contact_wrap h3:after {
content: ' ';
position: absolute;
bottom: -10px;
right: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 10px 10px;
border-color: transparent transparent transparent #333;
}
#ContactForm1_contact-form-name{
width: 270px; 
height:auto;
margin: 5px auto; 
padding: 10px 10px 10px 40px;
background:#f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZPHJEexX7d4-2hvZBPxi4eUxQjmX_C4TgDF7AizX3gajPdSe3vogYxl99PCPopLmGcVwb4NORrOofy-FtioWNH0waDnKwdQxt7-Eptsrpa60Vx0Hz_pF5qufsa00jeEEuCwHa6rzpQkc/s1600/user.png)no-repeat 10px center; 
color:#777;
border:1px solid #ccc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
}
#ContactForm1_contact-form-email{
width: 270px; 
height:auto;
margin: 5px auto; 
padding: 10px 10px 10px 40px;
background: #f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh_EVGhVNsOZImhsyhS1VKumfcCrPeHn2QYb02P0RoEL6GepKFkeCFIAcyzQpzsIwTBlEUj_3ifyYQ6NTSVoyrFdBzi6zWcttA_0PqhtNN7HEH5He0bdTjeaz9blxhS2C_MWEjHbUTBFk/s1600/pen.png)no-repeat 10px center; 
color:#777;
border:1px solid #ccc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
}
#ContactForm1_contact-form-email-message{
width: 270px; 
height: 150px; 
margin: 5px auto; 
padding: 10px 10px 10px 40px;
font-family:Arial, sans-serif;
background: #f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ5Ldje9aFedPZ0GU6mUj9OjSGliy-Qsom-POS6f2HKdY7Y0KGtWMqZuoGkyzdUeSz2Iwr6PCQnnJrh_7iHNB1X26XDJnOJfHdfwGqKkXvYfEb9pDXNrtE0_1_kCi-H80bC3muJ3DrJAk/s1600/msg2.png)no-repeat 10px 10px; 
color:#777;
border:1px solid #ccc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
}
#ContactForm1_contact-form-submit {
width: 95px; 
height: 30px; 
float: right; 
color: #FFF;
padding: 0; 
cursor:pointer;
margin: 25px 0 3px 0 0;
background-color:#005a8a;
border-radius:4px;
text-shadow: 1px 0 0 #1f4962;
-webkit-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;
-moz-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;
box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;
background-color: #3689b9;
border:1px solid #194f6d;
}
#ContactForm1_contact-form-submit:hover {
background:#4c9bc9;
}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{
width: 320px;
margin-top:35px;
}

• Kada ste ga dodali sačuvajte i vratite se na kontrolnu tablu.

Dodavanje HTML na stranici

• Prvo moramo da kreiramu novu stranicu na blogu, a to ćete uraditi na sledeći način: Kliknite na opciju Stranice > Nova stranica > Stranicu ostavite praznom. Kada se stranica otvori kliknite na opciju HTML i nalepite sledeći kod:

<div id="contact_wrap">
<h3>Contact Us</h3>
<form name="contact-form">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" />
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Submit" />
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>

<style type="text/css">
#comments, #blog-pager, .breadcrumbs, .post-footer{display:none}
</style>

• Posle dodavanja koda iznad, objavite stranicu. 

To je to! Sada vi i vaši posetioci možete da vidite ovaj elegantan kontakt obrazac na vašem blogu.

Continue Reading →

Kako dodati SlideShow

U ovom postu ću vam objasniti kako da dodate SlideShow na vašem blogu. Koristićemo CSS3 i HTML. Ovaj SlideShow učiniće vaš blog atraktivnijim, privlačnijim i lepšim, što automatski znači i više poseta.

DEMO

Pratite sledeća uputstva:

• Ulogujte se na vaš Blogger Account
• Kliknite na opciju Šablon > Izmeni HTML
• Pronađite  (ctrl+f) ]]></b:skin>
• Dodajte sledeći kod iznad ]]></b:skin>

/* fade slider www.bloggerisanje.blogspot.com*/
.slides {
    height:300px;
    margin:50px auto;
    overflow:hidden;
    position:relative;
    width:600px;
}
.slides ul {
    list-style:none;
    position:relative;
}

/* keyframes #anim_slides */
@-webkit-keyframes anim_slides {
    0% {opacity:0;}
    6% {opacity:1;}
    24% {opacity:1;}
    30% {opacity:0;}
    100% {opacity:0;}
}
@-moz-keyframes anim_slides {
    0% {opacity:0;}
    6% {opacity:1;}
    24% {opacity:1;}
    30% {opacity:0;}
    100% {opacity:0;}
}
.slides ul li {
    opacity:0;
    position:absolute;
    top:0;
    /* css3 animation */
    -webkit-animation-name: anim_slides;
    -webkit-animation-duration: 24.0s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;

    -moz-animation-name: anim_slides;
    -moz-animation-duration: 24.0s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
}
/* css3 delays */
.slides ul  li:nth-child(2), .slides ul  li:nth-child(2) div {
    -webkit-animation-delay: 6.0s;
    -moz-animation-delay: 6.0s;
}
.slides ul  li:nth-child(3), .slides ul  li:nth-child(3) div {
    -webkit-animation-delay: 12.0s;
    -moz-animation-delay: 12.0s;
}
.slides ul  li:nth-child(4), .slides ul  li:nth-child(4) div {
    -webkit-animation-delay: 18.0s;
    -moz-animation-delay: 18.0s;
}
.slides ul li img {
    display:block;
}
/* keyframes #anim_titles */
@-webkit-keyframes anim_titles {
    0% {left:100%;
        opacity:0;}
    5% {
        left:10%;
        opacity:1;
    }
    20% {
        left:10%;
        opacity:1;
    }
    25% {
        left:100%;
        opacity:0;
    }
    100% {
        left:100%;
        opacity:0;
    }
}
@-moz-keyframes anim_titles {
    0% {
        left:100%;
        opacity:0;
    }
    5% {
        left:10%;
        opacity:1;
    }
    20% {
        left:10%;
        opacity:1;
    }
    25% {
        left:100%;
        opacity:0;
    }
    100% {
        left:100%;
        opacity:0;
    }
}
.slides ul li div {
    background-color:#000000;
    border-radius:10px 10px 10px 10px;
    box-shadow:0 0 5px #FFFFFF inset;
    color:#FFFFFF;
    font-size:26px;
    left:10%;
    margin:0 auto;
    padding:20px;
    position:absolute;
    top:50%;
    width:200px;

    /* css3 animation www.bloggerisanje.blogspot.com*/
    -webkit-animation-name: anim_titles;
    -webkit-animation-duration: 24.0s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;

    -moz-animation-name: anim_titles;
    -moz-animation-duration: 24.0s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
}

• Kada ste dodali kod, sačuvajte, vratite se na kontrolnu tablu bloga i kliknite na opciju Izgled.
• Kliknite na Dodaj Gadget i izaberite HTML/JavaScript
• Dodajte sledeći kod

<div class="slides">
            <ul> <!-- slides -->
                <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgML2pRUktzoP0P9NDHdBpwVA9TGvN7ZdPJ1pgcq6qjZP1ANsZRiNsS5ep-C3AP-gYaFr9P2YUTB49Ojmzt7bWYYCWhQ97USfptxTZ2A1jimM-T4P-pwXdx77lO4SavDOHL-L1JH3JraTI/s1600/bloggertrix-pic1.jpg" alt="image01" />
                    <div>Title 1</div>
                </li>
                <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN_Hbqw28DwUSkx7inTT3tJUjnTmRgi6zQd2u92QDfYGDCVqdOAGYk5YMKnhYpfw5_7egw_EMZp9vA87sfkUZHrzJ6dya2bYjWEErW98-4YftQ67sVM0Tc-H-uva2PXxsDbYoO0bTz1IE/s1600/bloggertrix-pic2.jpg" alt="image02" />
                    <div>Title 2</div>
                </li>
                <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlISQVf0XF-iWDGbbdMF3AEBVn34c9AQn4lSuFNZW9LHT83jo7uONjOFZ1Qnlox4xtbzfvNlNb40QKQdYlK1Cv1zATo4wa9E0qXj9zgpMavFd5if1Cneu2lSYUplKruLvrIsuvFRVeqU4/s1600/bloggertrix-pic3.jpg" alt="image03" />
                    <div>Title 3</div>
                </li>
                <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzoMO8OYvEQsGOxM9Q-27eV2fElrxtHACuBVCOkxTvSdpR-MITAL4cxEsPQ0uBA-NfXGWuvdw_aThBhZOgMbVYnoRXR6En6tmVEQhWh2izLKFVFy1k-vIuEjieP0XB6ANMqwgMjNJNOok/s1600/bloggertrix-pic4.jpg" alt="image04" />
                    <div>Title 4</div>
                </li>
            </ul>
        </div>

• Zamenite naslov (title) i link slike sa vašim.
• Sačuvajte i to bi bilo to.

Continue Reading →

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW9H5nNGfX8RJLGbH1RIsIiiggGgNZEOys1hDyA5NFL9PX5wg0KzMlq0YZMZpCgrRPkw87HH7bU8u8WwNKNkRmkh4z2t7kes1Cray83jTur2ejK5UNTTboGH8jUmC37xWudLHhyrXC-Mqm/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW9H5nNGfX8RJLGbH1RIsIiiggGgNZEOys1hDyA5NFL9PX5wg0KzMlq0YZMZpCgrRPkw87HH7bU8u8WwNKNkRmkh4z2t7kes1Cray83jTur2ejK5UNTTboGH8jUmC37xWudLHhyrXC-Mqm/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW9H5nNGfX8RJLGbH1RIsIiiggGgNZEOys1hDyA5NFL9PX5wg0KzMlq0YZMZpCgrRPkw87HH7bU8u8WwNKNkRmkh4z2t7kes1Cray83jTur2ejK5UNTTboGH8jUmC37xWudLHhyrXC-Mqm/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW9H5nNGfX8RJLGbH1RIsIiiggGgNZEOys1hDyA5NFL9PX5wg0KzMlq0YZMZpCgrRPkw87HH7bU8u8WwNKNkRmkh4z2t7kes1Cray83jTur2ejK5UNTTboGH8jUmC37xWudLHhyrXC-Mqm/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.

Continue Reading →