http___www.kroativ.net_izdvojeno_kako-napraviti-magazin-style-dizajn_comment-page-1__1.xml
1.1 2.1 2.2 2.3 2.4 4.1 18.1 19.1 42.1 43.1 44.1 44.2 44.3 45.1 45.2
Follow the steps given below to apply the hack. Log in to Blogger. Go to Layout > EditHTML. Check Expand Widget Templates. Add the codes highlighted in red at the right places as shown in the code given below. var CommentsCounter=0; CommentsCounter=CommentsCounter+1; document.write(CommentsCounter) Add the code given below to the CSS area in your template, right before ]]> : Save Template..comment-number { float: right; display: block; width: 50px; margin-right: 5px; margin-top: -35px; /*comments-counter position*/ text-align: right; font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif; font-size: 30px; font-weight: normal; } /*since the numbers are actually links, we need to force the color properties*/ .comment-number a:link, .comment-number a:visited { color: #445566 !important; text-decoration: none !important; } .comment-number a:hover, .comment-number a:active { color: #FF9933 !important; text-decoration: none !important; } That's it. Let me know your views on this hack. Do contact me if you face any trouble in applying the hack. If this hack was useful for you then please leave comments so that I'll be able to know who all benefited from this hack. Also post the URL of the blog in which the hack is applied so that it will help the visitors to check how the hack is working in various blogs.
1.1 1.2 1.3 1.4 2.1 2.2 2.3 2.4 2.5 2.6 2.7 3.1 3.2 4.1 4.2 5.1 5.2 5.3 5.4 5.5 6.1 7.1 9.1 12.1 13.1 15.1 18.1 19.1 19.2 20.1 21.1 23.1 26.1 27.1 28.1 31.1 34.1 35.1 36.1 39.1 42.1 43.1 43.2 44.1 46.1 48.1 48.2 49.1 50.1 51.1 52.1 53.1 54.1 55.1 56.1 57.1 58.1 61.1 62.1 64.1 65.1 68.1 69.1 70.1 76.1 81.1 81.2 81.3 82.1 84.1 85.1 86.1 87.1 88.1 89.1 90.1 91.1 93.1 95.1 97.1 99.1 102.1 103.1 104.1 106.1 107.1 108.1 109.1 110.1 111.1 113.1 114.1 115.1 116.1 118.1 119.1 120.1 122.1 123.1 124.1 125.1 126.1 127.1 128.1 129.1 132.1 133.1 134.1 136.1 137.1 138.1 139.1 140.1 141.1 142.1 143.1 144.1 145.1 146.1 147.1 149.1 150.1 151.1 154.1 155.1 156.1 157.1 158.1 159.1 160.1 161.1 162.1 165.1 165.2 166.1 167.1 168.1 169.1 171.1 172.1 173.1 174.1 176.1 177.1 178.1 179.1 180.1 181.1 182.1 183.1 184.1 186.1 187.1 188.1 189.1 191.1 193.1 194.1 196.1 197.1 199.1 199.2 199.3 200.1 201.1 202.1 203.1 206.1 208.1 209.1 210.1 216.1 217.1 221.1 222.1 223.1 224.1 225.1 231.1 234.1 235.1 236.1 241.1 241.2 241.3 241.4 242.1 243.1 243.2 243.3 243.4 243.5 244.1 245.1 246.1 248.1 250.1 251.1 252.1 255.1 256.1 260.1 261.1 262.1 263.1 264.1 265.1 268.1 269.1 270.1 272.1 273.1 275.1 276.1 277.1 278.1 279.1 280.1 281.1 283.1 284.1 285.1 285.2 285.3 285.4 285.5 285.6 287.1 288.1 289.1 290.1 291.1 292.1 293.1 294.1 296.1 297.1 299.1 300.1 302.1 303.1 304.1 305.1 306.1 312.1 315.1 316.1 317.1 321.1 322.1 322.2 323.1 323.2 325.1 325.2 325.3 325.4 325.5 325.6 326.1 327.1 328.1 330.1 331.1 332.1 333.1 334.1 335.1 336.1 337.1 339.1 340.1 342.1 345.1 348.1 349.1 350.1 351.1 352.1 354.1 355.1 356.1 357.1 358.1 360.1 360.2 361.1 362.1 363.1 363.2 364.1 365.1 367.1 369.1 370.1 371.1 372.1 372.2 372.3 372.4
Dragi posjetitelji ovo je naš prvi veliki tutorial. Prvo pa muško rekli bi naši stari. Po toj uzrečici i mi ćemo probiti led sa kapitalcem. Upoznat ćemo vas sa CSS frameworks, naučit ćete kako koristiti jedan od njih i prateći ovaj tutorial napravit ćete super dizajn za magazin. CSS Frameworks su unaprijed napravljeni css kosturi. Fleksibilni su i praktički naprave više od polovice posla za vas. Cijela konstrukcija stranice je već napravljena i vi samo slažete kockice. Razmišljajte o njim kao o lego kockama no ipak je na kraju presudna vaša kreativnost. Nemojte sada pomisliti da ćete sa CSS frameworkom postići čuda. Oni su jednostavno alat kojem je cilj pomoći vam u procesu dizajniranja stranica. Odlični su jer imate gotov kostur, rade u svim browserima i jednostavno su rođeni za brzu produkcija. Sa druge strane problem nastaje ako želite izraditi malo kompleksniji dizajn, tada ćete ipak morati upregnuti moždane vijuge i baciti se na posao. Po mom mišljenju trebali bi gledati na njih kao i na svaki drugi alat, ponekad vam dobro dođe, a ponekad od njega nemate koristi… CSS frameworks-a ima stvarno puno i mi ćemo se ovdje fokusirati samo na jedan, po mišljenju autora najbolji. Pogledajte njegove specifikacije. Grid System je kao što ćete vidjeti vrlo jednostavan za korištenje, a dobiti su višestruke. Grid 960 radi na principu tokova klasa, međusobno povezanih u cjelinu. Imate dvije opcije na korištenje, verziju sa 12 i 16 kolumni. Glavni wrapper je uvijek širok 960px jer svi danas imaju barem 1024×768 rezoluciju. Pogledajte 960gs demo stranicu za grafički prikaz i bit će vam malo jasnije. Za lakše snalaženje napravili smo vam i tablicu sa veličinama layera i njihove pripadajuće klase, ostalo ćete naučiti tokom tutoriala. Pogledajmo kako to izgleda u stvarnosti: 940px - header 700px - sadržaj 220px - sidebar 940px - footer Samo imajte na umu da vam zbroj brojeva klasa (grix_XX + grid_XX = 12) uvijek mora biti 12 i to je to, imate savršenu strukturu. Za kraj samo da napomenemo, veličina kompresirane css datoteke je samo 4kb! Sada krenimo na malo konkretnije stvari… Skinite 960gs CSS framework, napravite novu stranicu i uključite css datoteke iz grid 960 paketa. Ok, započnimo sa izradom kostura za naš magazin 940px - Dobrodošli poruka 220px - Datum 460px - Logo 220px - Search Forma 940px - Navigacija 300px - Vijesti 300px - Centralni projekti 300px - Sidebar 940px - Footer Ako imamo dva ili više layera u jednom redu onda prvom moramo dodati klasu alpha, a zadnjem omega Dobro, kostur smo napravili i sada možemo kreirati naš CSS, on se nalazi u source datoteci koju ste skinuli, folder css i pod imenom moj_style.css. Podijelili smo CSS na segmente za lakše snalaženje. Krenimo redom, prvo ćemo dodati dobrodošli (.naslov_ad) poruku u header. Dobrodošli na stranice kroativ magazina • Svakodnevno služimo svježi sadržaj iz područja web dizajna Klasi grid_12 dodali smo klasu light_bg_color za pozadinsku boju i dodali smo stil za donji border style=”border-bottom:1px dotted #ccc”. Mogli smo koristiti i klase za bordere no imamo 2 različita bordera koji se ne mijenjaju. Pogledajmo css koji smo koristili za dobrodošli header dio: .naslov_ad { font-family: "Gill Sans", Verdana; font-size: 10px; line-height: 14px; text-transform: uppercase; letter-spacing: 2px; font-weight: normal; text-align:center; margin:5px auto; .light_bg_color { background-color:#f8f4e8; Krenimo na datum, logo i formu za pretraživanje. Ovdje smo koristili 3 horizontalno poredana layera te kao što smo već i rekli, prvom moramo dodati klasu alpha, a posljednjem klasu omega. Danas, document.write(cijeli_datum); Danas,   Poslužujemo samo kroativnost Pretraživanje Klasi grid_3 (datum – lijeva strana) dodali smo klasu alpha, grid_6 (logo) je u centru i onda dolazi grid_3 (forma – desna strana) sa dodatnom klasom omega. U sourcu našeg tutoriala imate i PSD file za logo. Logo je veličine 460x128px. Za prikaz datuma uzeli smo ovaj JavaScript i prilagodili ga za prikaz hrvatskog vremena. var dani = new Array("Nedjelja","Ponedjeljak","Utorak","Srijeda","Četvrtak","Petak","Subota"); var mjeseci = new Array("Siječanj","Veljača","Ožujak","Travanj","Svibanj","Lipanj","Srpanj","Kolovoz","Rujan","Listopad","Studeni","Prosinac"); var vrijeme = new Date(); //vrati trenutno vrijeme var dan = vrijeme.getDay(); //izvuci dan u tjednu var datum = vrijeme.getDate(); //izvuci dan u mjesecu var mjesec = vrijeme.getMonth(); //izvuci ime mjeseca var godina = vrijeme.getYear(); //izvuci godinu if (godina < 1000) godina+= 1900; //fix Y2K problem if (godina == 101) godina = 2001; //fix Netscape browsers - pokazuje godinu kao 101! var cijeli_datum = dani[dan] + ", " + datum + " " + mjeseci[mjesec] + ", " + godina; //spoji sve i ispiši datum Skriptu pozivamo na sljedeći način: document.write(cijeli_datum); CSS stilovi koje smo koristili za datum, logo i pretragu: font-family:"Gill Sans", Arial, Sans, serif; font-size:10px; font-weight:bold; letter-spacing:2px; text-transform:uppercase; margin:0; .datum { font-family: Georgia, "Times New Roman", serif; font-size: 10px; line-height: 18px; text-align:center; margin:40px 10px 0 auto; width:200px; .datum em { font-family: "Gill Sans", Verdana; font-size: 10px; letter-spacing:2px; font-style:normal; text-transform:uppercase; margin:0; padding:0; #searchf { text-align:center; margin-top:35px; .search_box { width:150px; height:16px; font-size:10px; color:#e43a3a; padding:0 16px 0 0; margin-top:5px; background:url(../images/srch.gif) no-repeat right 1px; border-top:1px solid #999; border-right:1px solid #ccc; border-bottom:1px solid #ccc; border-left:1px solid #999; Nekih posebnih napomena nema, ovo su praktički osnove CSS-a no da se lakše snađete sada znate koje su klase korištene. Sada dolazimo do navigacije. Navigaciju smo napravili kao horizontalno poredanu listu. Članci O Nama Download Autori Kontakt Suradnja Izdvojeno Linkovi Sponzori Opet smo dodali klasu light_bg_color za malo boje i dodali smo ID navigacija. Prvom LI elementu dodali smo klasu .no_border da bi maknuli lijevi border. javascript:void(null); je samo fancy način stavljanja praznih linkova, bolja zamjena za #. Pogledajmo css za navigaciju: #navigacija { padding: 5px 0; border-top:1px dotted #ccc; #navigacija ul { list-style: none; display: block; margin: 0 auto; #navigacija ul li { float: left; margin: 0; font: bold 12px Georgia; color:#e43a3a; text-transform:uppercase; border-left:1px dotted #ccc; width:102px; text-align:center; #navigacija ul li a:link, #navigacija ul li a:visited { color:#e43a3a; text-decoration:none; border-bottom:2px solid #f8f4e8; #navigacija ul li a:hover, #navigacija ul li a:active { text-decoration:underline; border-bottom:2px solid #000; #navigacija ul li.no_border { border-left:medium none; Ovdje je u principu sve jasno, UL (unordered list) elementu maknuli smo stilove, definirali prikaz i margine. LI elementu dodali smo lijevi border, veličinu od 104px i lijevi float. Klasičan CSS horizontal list menu. Sa navigacijom smo završili header i on sada izgleda ovako: Gotov header sa pripadajućim 960gs klasama Centralni Sadržaj Sadržaj je dosta velik pa ćemo ovdje proći samo njegov kostur i neke dijelove, a cijelu working verziju možete pogledati u DEMU ili u sourcu kojeg ste skinuli. Vijesti Naslov Vijesti Autor i Datum Sadržaj vijesti Naslov Izdvojenih Vijesti Sadržaj izdvojenih vijesti Naš RSS feed Tekst i link na RSS sa pozadinskom RSS ikonom Izdvojeno Izdvojeni tekst Naš  Flick r   stream Linkovi Link Link Link grid_12 klasi wrappera našeg centralnog sadržaja dodali smo klasu center_bgimage koja sadrži pozadinsku sliku i top/bottom bordere. Iz razloga što nam se sadržaj neravnomjerno širi po dužini u tri kolone i zato što imamo statičnu širinu dodali smo ovdje pozadinsku sliku. Jednostavan gif (images/bg.gif u sourcu) sa drugom pozadinskom bojom i borderima centralne kolumne. Na taj način smo izbjegli komplikacije sa ravnomjernim širenjem svih triju kolumni. Lijevi Sidebar Između linija 3 i 10 nalazi se naša lijeva kolumna odnosno vijesti. Naslov  koristimo za glavne naslove kategorija. Koristimo   sa stiliziranim tekstom i 3px donjim borderom. Sve vijesti spremamo u klasu vijesti (od 5. do 9. linije) i ponavljamo koliko god vijesti imamo. Klasa post_meta sadrži ime autora i datum objave,   sadrži naslov vijesti sa linkom na cijeli tekst ako je to potrebno. Lijeva kolumna Pogledajmo kako nam izgleda css za lijevi kolumnu: h4 a:link, h4 a:visited { text-decoration: none; h4 a:hover, h4 a:active { color: #e43a3a; text-decoration: none; font-size:16px; margin-bottom:5px; font-family:"Gill Sans", Arial, Sans, serif; font-size:10px; font-weight:bold; letter-spacing:2px; text-transform:uppercase; margin:0; border-bottom:3px solid #ccc; margin:5px 0; padding:0 0 5px 0; .vijest { margin:10px 0 20px 0; .post_meta { font-family: Georgia, "Times New Roman", serif; font-size: 10px; line-height: 22px; text-transform: uppercase; letter-spacing: 2px; color:#e43a3a; Kolumna Centar Centar smo namijenili za izdvojene stvari koje želimo naglasiti i držati u centru pažnje. Pozadinskom slikom bg.gif izdvojili smo tu kolumnu te je ujedno i naglasili. Sve centralne vijesti stavljamo u klasu pade_ten koja ima 10px paddinga sa svake strane (od 13. do 17. linije). Male slike moraju biti široke 276px, a visina nije bitna. Stavljamo ih unutar klase sample_pic koja daje border i padding te pozadinsku boju. Za naslov opet koristimo klasu post_meta i ispod nje dolazi sadržaj vijesti. Umjesto standardnog linka saznajte više uključili smo sliku strelice (images/more.gif) Sadržaj centralne kolumne Pogledajmo CSS stilove za centralnu kolumnu: .sample_pic { background:#fff none repeat scroll 0 0; border:1px solid #cecfc6; display:block; margin:0 0 5px 0; padding:1px; .pade_ten { padding:10px; Desni Sidebar U desnu kolumnu smjestili smo link za RSS kanal, izdvojeni/uvod tekst, Flickr stream i linkove. Naš RSS feed Tekst i link na RSS sa pozadinskom RSS ikonom Izdvojeno Izdvojeni tekst Naš  Flick r   stream Linkovi Link Link Link Sadržaj desne kolumne Opet koristimo   tag za naslove, napravili smo klasu rss koja sadrži RSS pozadinsku sliku i stilski uklopljen broj pretplačenih korisnika. Ovu je izradila Maja Benčić za Smashing Magazin. Ako imate svoje radove na Flickr servisu možete ih uključiti na sljedeći način. Koristit ćemo njihov Flickr badge kod sa malo našeg formatiranja count=9 definira koliko slika želimo prikazati i user=29734147@N07 je ID našeg računa. Da bi saznali svoj id potrebno je otići na http://idgettr.com/ i upisati adresu vašeg streama. Naš je npr. http://www.flickr.com/photos/2bpxcom/. Na ovaj način možete prikazivati i grupe. Princip je isti samo morate promijeniti source=user&user=29734147@N07 u source=group&group=921758@N20. U tom slučaju svoj ID na http://idgettr.com/ tražite tako da upišete npr. http://www.flickr.com/groups/kroativ/ Pogledajmo CSS za desnu kolumnu: #flickr a:hover img { border:2px solid #A8AA99; #flickr a img { background:#FFFFFF none repeat scroll 0 0; border:2px solid #CECFC6; display:block; float:left; margin-bottom:10px; margin-left:10px; padding:3px; .flikr { margin-bottom:10px .flikr span span { .flikr span { .fix { clear:both; height:1px; margin:-1px 0 0; overflow:hidden; .rss { background:url(../images/rss_abeja_org.png) no-repeat 240px 0px; padding-left:10px; padding-right:60px; margin:10px 0; Za Flickr stream napravili smo hover efekt i ravnomjerni razmak, rss klasi dodali smo pozadinsku sliku. Ništa posebno, osnove CSS-a. Ovako nam sada izgleda cijeli sadržaj Footer Došli smo do kraja stranice odnosno footera. Za ovaj tutorial smo u njega stavili samo copyright informacije no vi po želji možete konstruirati i puno kompleksniji footer. Kako izgleda footer Pogledajmo html za footer: © 2008 Naš MAGAZIN, Sva prava pridržana • Ovaj tutorial i dizajn možete slobodno koristiti za sve vaše potrebe • Ako želite možete postaviti i link na  Kroativ Dodali smo klasu light_bg_color za pozadinsku boju, kreairali inline css border te smo cijeli sadržaj footera stavili u klasu pade_ten za 10px razmak na sve strane. Pogledajte kako izgledaju naše stranice ako to već niste učinili. Zaključak U ovom ste tutorijalu naučili što su to CSS frameworks i kako se njima koristiti. Izradili ste svoj magazin i naučili poneku stvar o CSS. Vjerujem da ste i vi sada uvidjeli koliku korist možete izvući iz ovih alata, opet napominjem da se ne bi trebali striktno i samo osloniti na CSS frameworks no u svakom slučaju dobro dođu. Ako želite pogledati i elastičnu verziju 960gs frameworka pogledajte ove stranice…