http___www.izrada-webstranica.com_css.html_1.xml
1.1 2.1 2.2 2.3 2.4 2.5 2.6 2.7 2.8 3.1 3.2 3.3 4.1 5.1 6.1 7.1 8.1 9.1 10.1 12.1 13.1 14.1 15.1 17.1 18.1 19.1 20.1 21.1 22.1 23.1 24.1 25.1 26.1 27.1 28.1 29.1 30.1 31.1 32.1 33.1 34.1 35.1 36.1 37.1 38.1 39.1 39.2 42.1 43.1 43.2 44.1 52.1 59.1 65.1 66.1 67.1 68.1 69.1 71.1 72.1 78.1 78.2 78.3 79.1 80.1 80.2 81.1 82.1 83.1 84.1 104.1 107.1 109.1 110.1 110.2 111.1 112.1
You can see that we have replaced Older/Newer Pagination buttons with Post titles. This trick is not a new one and already many developers proposed different solutions using JavaScript or using jQuery. We will also use jQuery but in a more neater and optimized fashion using jquery to fetch URL parameters instead of running long js queries. Blogger blogs are neither optimized nor structured in a user friendly manner. Same applies to default wordpress themes. The pagination buttons make no sense when placed at the bottom of comments container. Anything that provides usability to readers should be placed straight in front of eyes and not pushed down to the page where one would rarely scroll. After checking our analytics stats, I found thatNext/Previous buttons placed just at the bottom of post body generates more pageviews compared to placing them down below comments section. They become even more useful if instead of showing just buttons pointing to succeeding or preceding posts, show your readers the blog post titles. We will learn today how to create this professional looking pager navigation in blogspot blogs. - DEMO: Scroll down to the bottom of this post Add it to blogger First we will add the necessary code for the new pagination and then we will remove the existing default buttons that appear below comment section - Go To Blogger > Template - Backup your template - Click "Edit HTML" - Search for ]]> .mbt-pager { border-top: 2px dashed #ddd; border-bottom: 2px dashed #ddd; margin-bottom: 10px; overflow:hidden; padding:0px;} .mbt-pager li.next { float: right; padding:0px; background:none; margin:0px;} .mbt-pager li.next a { padding-left: 24px; } .mbt-pager li.previous { margin:0px -2px 0px 0px; float: left; border-right:1px solid #ddd; padding:0px; background:none; .mbt-pager li.previous a { padding-right: 24px; } .mbt-pager li.next:hover, .mbt-pager li.previous:hover {background:#333333; } .mbt-pager li { width: 50%; display: inline; float: left; text-align: center; } .mbt-pager li a { position: relative; min-height: 77px; display: block; padding: 15px 46px 15px; outline:none; text-decoration:none;} .mbt-pager li i { color: #ccc; font-size: 18px; } .mbt-pager li a strong { display: block; font-size: 20px; color: #ccc; letter-spacing: 0.5px; font-weight: bold; text-transform: uppercase; font-family:oswald, sans-serif, arial; margin-bottom:10px;} .mbt-pager li a span { font-size: 15px; color: #666; font-family:oswald,Helvetica, arial; margin:0px;} .mbt-pager li a:hover span, .mbt-pager li a:hover i { color: #ffffff; } .mbt-pager li.previous i { float:left; margin-top:15%; margin-left:5%; } .mbt-pager li.next i { float: right; margin-top: 15%; margin-right: 5%; } .mbt-pager li.next i, .mbt-pager li.previous i , .mbt-pager li.next, .mbt-pager li.previous{ -webkit-transition-property: background color; -webkit-transition-duration: 0.4s; -webkit-transition-timing-function: ease-out; -moz-transition-property: background color; -moz-transition-duration: 0.4s; -moz-transition-timing-function: ease-out; -o-transition-property: background color; -o-transition-duration: 0.4s; -o-transition-timing-function: ease-out; transition-property: background color; transition-duration: 0.4s; transition-timing-function: ease-out; } .fa-chevron-right {padding-right:0px;} - To change the black background and white font color of the selected area on mouse hover edit: background:#333333; and for font color edit: color: #ffffff; - Use our Color generator tool for picking the hexadecimal color code Now we will add some fancy Google web font called Oswald, so that our widget stands out. Kindly search for   and just below it paste the following code: Note: Remove the bolded code if you have already added jquery library inside your template. Next we will add the HTML code that will position the pager at the bottom of last paragraph on the blog post. Search for Just below it paste the following HTML code: Next   You are viewing Most Recent Post Previous   You are viewing Last Post (function($){ var newerLink = $('a.newer-link'); var olderLink = $('a.older-link'); $.get(newerLink.attr('href'), function (data) { newerLink.html(' Next   '+$(data).find('.post h3.post-title').text()+' '); $.get(olderLink.attr('href'), function (data2) { olderLink.html(' Previous   '+$(data2).find('.post h3.post-title').text()+' '); Here I used a bit of jquery to fetch the data inside title tags. Since blogger only provides the option to switch between next and previous posts using URLs, therefore we needed jQuery to find the title classes using the heading tags and retrieve the data out of them. The title classes and heading tags may be different for custom blogger templates (you may need my help here by posting your blog urls so that I could tell you the correct title class used inside your blog) In standard blogger templates the correct class is: .post h3.post-title and therefore I will be using the same inside the jquery code above. Save your template and you are almost done! Visit your blogs and you will see the pager navigation working just perfectly! Removing existing Next/Previous buttons Now its time to prevent the default buttons from displaying below comment sections. - Search for - You will see a big chunk of code below it that looks slightly similar to the code below: All that you need to do is to enclose this code inside conditional codes as shown below: THE ABOVE BIG CHUNK CODE IN Save your template and you are all done! Now the default buttons will appear on homepage but not inside posts or static pages. If you wish to permanently delete them, then simply delete the big chunk code above and save your template. Need Help? - If you are looking for free professional set of png buttons for next/previous buttons then check our gallery: MBT Download Zone
1.1 2.1 3.1 3.2 5.1 7.1 7.2 11.1 11.2 14.1 17.1 17.2 20.1 21.1 24.1 24.2 24.3 24.4 25.1 25.2 28.1 29.1 32.1 33.1 36.1 37.1 37.2 42.1 46.1 47.1 50.1 55.1 59.1 60.1 63.1 64.1 69.1 70.1 73.1 73.2 74.1 75.1 76.1 76.2 76.3 76.4 81.1 84.1 85.1 86.1 88.1 89.1 90.1 95.1 96.1 99.1 100.1 102.1 103.1 104.1 105.1 106.1 107.1 108.1 111.1 111.2 112.1 113.1 114.1 115.1 115.2 117.1 118.1 119.1 120.1 121.1 122.1 123.1 126.1 129.1 129.2 129.3 129.4 129.5 131.1 132.1 133.1 134.1 135.1 136.1 137.1 140.1 142.1 143.1 146.1 146.2 146.3 146.4 148.1 149.1 150.1 151.1 152.1 153.1 154.1 157.1 159.1 160.1 166.1 166.2 168.1 169.1 170.1 171.1 172.1 173.1 174.1 177.1 179.1 180.1 185.1 186.1 188.1 189.1 191.1 192.1 193.1 196.1 197.1 198.1 199.1 199.2 199.3 200.1 201.1 202.1 203.1 203.2 203.3 203.4 203.5 204.1 205.1 205.2 205.3 205.4
Što je CSS? CSS je skraćenica za Cascading Style Sheets, to je stilski jezik koji se koristi za definiranje izgleda Web stranice i pozicioniranje njezinih elemenata dok se HTML koristi za kreiranje strukture Web stranice. CSS se može pisati unutar samog HTML dokumenta ili se može pozvati vanjski CSS dokument koji će sadržavati CSS kod. Zbog jednostavnosti, količine dokumenata i činjenice da je ovo tutorijal za početnike mi ćemo CSS pisati unutar HTML dokumenta iako se inače za naprednije korisnike preporučuje da se piše u zasebnom dokumentu. Ovdje se piše sav CSS kod Kada bismo CSS-om htjeli tekst naslova (heading 1) obojati u crnu boju i definirati veličinu fonta od 14 pixela to bismo napravili na sljedeći način. Prvo definiramo koji element (selektor) ćemo stilizirati: Nakon toga definiramo područje unutar kojega ćemo pisati stilove za taj element. Stilovi se pišu unutar najobičnijih vitičastih zagrada: tu ćemo pisati stilove za h1 Unutar vitičastih zagrada napisati ćemo da želimo da font bude crne boje i veličine 14 px. Za one koji neznaju što je px, to je mjerna jedinica koja se koristi prilikom izrade Web stranica, 1 pixel = 0.26 mm to znači da 14 pixela = 3.70 mm.: color: black; font-size: 14px; Na predhodnom primjeru vidi se da se CSS stilovi se sastoje od 2 djela, svojstvo i vrijednost. Svako svojstvo ima neku vrijednost npr. u našem primjeru svojstvo color ima vrijednost black, a svojstvo font-size ima vrijednost 14px. Nakon svojstva piše se dvotočka koja odvaja svojstvo i njegovu vrijednost (color: black) a nakon vrijednosti piše se točka zarez (color: black;). Točka zarez daje nam do znanja da tu svojstvo sa svojom vrijednosti završava. Sada ćemo na isti način stilizirati heading 2 naslov. Njega ćemo samo za primjer obojati bjelom bojom i odrediti veličinu fonta 12 pixela: color: black; font-size: 14px; color: white; font-size: 12px; CSS u HTML dokumentu CSS style tagovi se pišu u headeru HTML dokumenta. Kreirat ćemo jedan prazan HTML dokument, ako neznate kako provjerite prvi dio našeg tutorijala u kojemu je sve objašnjeno: izrada Web stranica Naslov Naslov Podnslov Praznome HTML dokumentu dodat ćemo h1 i h2 naslove te njihove CSS stilove koje smo prethodno napisali da vam prikažemo kako CSS izgleda u svom prirodnom okruženju. Naslov color: black; font-size: 14px; color: white; font-size: 12px; Naslov Podnslov Sada su oba dva naslova stilizirana CSS-om. Mi smo u primjeru koristili samo dva svojstva boju (color) i veličinu fonta (font-size), ali CSS im mnogo više svojstava kojima se može stilizirati cijela Web stranica a ne samo njen tekst. Neka CSS svojstva koje se najčešće koriste i neke njihove vrijednosti: HTML klase Naš HTML kod moramo pripremiti da bi što lakše unutar njega mogli integrirati CSS stilove. Pripremu HTML-a ćemo izvršiti tako da ćemo svim HTML tagovima dodjelit određene klase. HTML klase koriste se da bi se uz pomoć njih HTML elementimd dodijelio nekakav stil. U nastavku ćemo prikazati primjer kako se dodjeljuju HTML klase i kako se definiraju njihovi stilovi: Naslov .glavni-naslov{ color: black; font-size: 14px; .podnaslov{ color: white; font-size: 12px; Naslov Podnslov Stiliziranje Web stranice CSS-om Nakon završetka prvog djela tutoriala izrada web stranica, krećemo na drugi dio u kojemu ćemo stilizirati HTML strukturu Web stranice. body, html{ margin:0px; padding:0px; font-family:Arial, Helvetica, sans-serif; font-size:14px; background-color:white; min-width:291px; - Kao što se   tag odnosi samo na paragraph, tagovi body i html odnose se na cijelo Web sjedište. Unutar ova dva taga unjet ćemo svojstva I njihove vrijednosti koje će se odnositi na cijlo Web sjedište - Svaki preglednik (browser) Web stranicama dodaje razmak na rubovima kojega smo uklonili postavljanjem vrijednosti margin i padding na nulu. - Definirali smo font koji će se koristiti na cijeloj Web stranici. - Boja pozadine koje će se koristiti na cijeloj Web stranici. - Pošto se naša Web stranica prilagođava veličini različitih ekrana postavili smo njenu minimalnu širinu. Širinu smo ograničili jer ispod te širine naša Web stranice nebi dobro izgledala. body, html{ margin:0px; padding:0px; font-family:Arial, Helvetica, sans-serif; font-size:14px; background-color:white; min-width:291px; color:#e4f5fd; Kao što znamo linkovi se pišu na sljedeći način  link . Kada u CSS-u navedemo svojstvo a znači da ćemo njime stilizirati sve linkove. Sada smo sve linkove obojali navedenom bojom. Ovaj kod #e4f5fd; zove se RGB kod, pojednostavljeno to znači da svaka boja koja postoji ima svoj kod, npr. crna boja je #000000; bijela boja je #FFFFFF; crvena boja je #FF0000; itd. RGB kodove svih postojećih boja možete saznati na sljedećoj Web stranici: RGB Color Codes Chart. body, html{ margin:0px; padding:0px; font-family:Arial, Helvetica, sans-serif; font-size:14px; background-color:white; min-width:291px; color:#e4f5fd; a:hover{ text-decoration:none; hover označava stanje kada netko pokazivačem miša pređe preko određenoga elementa (eng. hover = hrv. lebdjeti). a:hover označava stanje kada netko pokazivačem pređe preko nekoga linka. Znači kada netko pređe mišem preko linka ukloniti će se njegovo podcrtavanje. To je standardni efekt koji se koristi zbog bolje preglednosti. Evo primjer kako to funkcionira, pređite mišem preko ovoga linka: primjer hover efekta body, html{ margin:0px; padding:0px; font-family:Arial, Helvetica, sans-serif; font-size:14px; background-color:white; min-width:291px; color:#e4f5fd; a:hover{ text-decoration:none; Ovo vrijedi za sve paragrafe na Web stranici. Ovim stilom definirali smo boju teksta koji se javlja u paragrafima body, html{ margin:0px; padding:0px; font-family:Arial, Helvetica, sans-serif; font-size:14px; background-color:white; min-width:291px; color:#e4f5fd; a:hover{ text-decoration:none; .menu{ height:50px; margin:0px auto; position:relative; color:black; box-shadow:0px 0px 5px 5px #3d78b3; background-color:#3d78b3; Redom ćemo objasniti što smo sada stilizirali u menu klasi. - height:50px; Odredili smo visinu ovog područja - width:100%; Odredili smo širinu područja - margin:0px auto; Vrijednost margine smo definirali na ovaj način nebili centrirali cjeli menu na sredinu ekrana. Prva vrijednost se odnosi na vertikalnu marginu, druga na hosrizontalnu. Postavljanjem horizontalne margina na vrijednost auto centrirali smo taj element na sredinu. - position:relative; Relativno pozicioniranje na Web stranici - z-index:9999; Elementi koji imaju z-index vrijednot npr. 15, prikazivat će is ispod elemenata sa z-index vrijednosti od npr. 16. Postavljanjem z-index vrijednosti na 9999 očito je da želimo da se ovaj element pokazuje iznad svih ostalih. - color:black; Boja teksta unutar ovog elemenata biti će crna - box-shadow:0px 0px 5px 5px #3d78b3; Ovo svojstvo definira sjenu elementa. Svojstvo ima 5 vrijednosti, prve četri su u pixelima a jedna je boja. Prva vrijednost označava vertikalno pozicioniranje sjene, druga horizontalno. Treća vrijednost označava koliko će sjena biti raširena. Četvrta vrijednost označava količinu zamagljenosti sjene a zadnja vrijednost je boja sjene. - background-color:#3d78b3; Definirali smo boju pozadine. Dali smo vam neke osnovne primjere CSS stiliziranja da bi shvatili na koji način funkcioniraju i kako ih se treba koristiti u kombinaciji sa HTML strukturom stranice. Sada ostaje na vama da samostalno eksperimentirate i dizajnirate CSS prema vašim željama i potrebama. Da biste nastavili svoju CSS edukaciju predlažemo jedan od najboljih resursa za učenje, gdje uz praktične primjere možete i samostalno isprobavati vlastite CSS kodove: CSS Tutorial. Sretno :)