http___www.kroativ.net_izdvojeno_kako-napraviti-magazin-style-dizajn_comment-page-1__1.xml
1.1 2.1 3.1 3.2 3.3 4.1 5.1 6.1 7.1 7.2 7.3 7.4 7.5 8.1 9.1 9.2 9.3 10.1 11.1 12.1 16.1 17.1 20.1 21.1 22.1 28.1 29.1 31.1 35.1 35.2 38.1 39.1 40.1 40.2 41.1 42.1 43.1 44.1 44.2 44.3 44.4 45.1 46.1 47.1 48.1 49.1 50.1 50.2 51.1 51.2 51.3 52.1 53.1 53.2 54.1 55.1 55.2 57.1 58.1 59.1 60.1 61.1 61.2 62.1 63.1 64.1 64.2 65.1 65.2 66.1 66.2 67.1 68.1 69.1 70.1 70.2 70.3 70.4 71.1 72.1 73.1 74.1 75.1 75.2 75.3 76.1 76.2 77.1 77.2 78.1 79.1
Thursday, 21 March 2013 How to Add Read More Link in Blogger Posts? Your read far more option as well as hyperlink is mainly made within custom made blogger layouts however, you will need to put in this hyperlink someplace as part of your submit within Doodlekit default layouts and you will need to made it also. Mainly because there may be an alternative inside submit publisher called "JUMP BREAK" used for you to put in any read far more hyperlink inside your blog posts. That submit will also teach you about how precisely precisely to vary your current Read far more text to a beautiful photo such as your weblog. Read More »Tags: Blogging Basics Tuesday, 12 February 2013 New Facebook Pop Up Like Box for Blogger 2013 Truly We've developed a whole new web site due to this blog site on Zynga, considering that the old web site got a number of identify trouble. I started the revolutionary ZYNGA enjoys through absolutely no as well as soon after by using show up you can see the results. Thus if you don't have ZYNGA enjoys to your webpages then should use this golf widget. The straightforward procedure for putting in that golf widget in your doodlekit sites is actually offered under. Well, i don't believe you'd probably encounter any difficulty even though putting in. Tips on how to Put Pop up like pack to help blog site? Right now it is entirely a short time online game, as well as you should not increase further scripts for a blog site. The full coding will be discussed under. And you just have to follow these kind of simple actions so that you can set up that golf widget in your blog site: Visit doodlekit Structure web site Give a Tool >> Choose HTML/JavaScript system Paste under rule inside of that will HTML/JavaScript system. jQuery(document).ready(function(){ if (document.cookie.indexOf('visited=true') == -1) var expires = new Date((new Date()).valueOf() + fifteenDays); document.cookie = "visited=true;expires=" + expires.toUTCString(); $.colorbox({width:"400px", inline:true, href:"#exestylepopups"}); ColorBox v1.3.16 (Copyright (c) 2011 Jack Moore - jack@colorpowered.com) #colorbox,#cboxOverlay,#cboxWrapper{position:absolute;top:0;left:0;z-index:9999;overflow:hidden}#cboxOverlay{position:fixed;width:100%;height:100%}#cboxMiddleLeft,#cboxBottomLeft{clear:left}#cboxContent{position:relative}#cboxLoadedContent{overflow:auto}#cboxTitle{margin:0}#cboxLoadingOverlay,#cboxLoadingGraphic{position:absolute;top:0;left:0;width:100%}#cboxPrevious,#cboxNext,#cboxClose,#cboxSlideshow{cursor:pointer}.cboxPhoto{float:left;margin:auto;border:0;display:block}.cboxIframe{width:100%;height:100%;display:block;border:0}#cboxOverlay{background:#000;opacity:0.5 !important}#colorbox{box-shadow:0 0 15px rgba(0,0,0,0.4);-moz-box-shadow:0 0 15px rgba(0,0,0,0.4);-webkit-box-shadow:0 0 15px rgba(0,0,0,0.4)}#cboxTopLeft{width:14px;height:14px;background:url(http://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) no-repeat 0 0}#cboxTopCenter{height:14px;background:url(http://3.bp.blogspot.com/-dJQm3QEd5Iw/TxohpCter-I/AAAAAAAAF0Q/GRny7olLbv8/s400/border.png) repeat-x top left}#cboxTopRight{width:14px;height:14px;background:url(http://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) no-repeat -36px 0}#cboxBottomLeft{width:14px;height:43px;background:url(http://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) no-repeat 0 -32px}#cboxBottomCenter{height:43px;background:url(http://3.bp.blogspot.com/-dJQm3QEd5Iw/TxohpCter-I/AAAAAAAAF0Q/GRny7olLbv8/s400/border.png) repeat-x bottom left}#cboxBottomRight{width:14px;height:43px;background:url(http://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) no-repeat -36px -32px}#cboxMiddleLeft{width:14px;background:url(http://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) repeat-y -175px 0}#cboxMiddleRight{width:14px;background:url(http://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) repeat-y -211px 0}#cboxContent{background:#fff;overflow:visible}#cboxLoadedContent{margin-bottom:5px}#cboxLoadingOverlay{background:url(http://2.bp.blogspot.com/-bMneOFi_UDo/Txohpge3Z9I/AAAAAAAAF0s/AbVgxX9pXtQ/s400/loadingbackground.png) no-repeat center center}#cboxLoadingGraphic{http://3.bp.blogspot.com/-SKktU1-SCCw/TxohpRB19LI/AAAAAAAAF0Y/iwIo3LnjoE0/s400/loading.gif) no-repeat center center}#cboxTitle{position:absolute;bottom:-25px;left:0;text-align:center;width:100%;font-weight:bold;color:#7C7C7C}#cboxCurrent{position:absolute;bottom:-25px;left:58px;font-weight:bold;color:#7C7C7C}#cboxPrevious,#cboxNext,#cboxClose,#cboxSlideshow{position:absolute;bottom:-29px;background:url(http://4.bp.blogspot.com/-_VSGGUcsUPE/TwNIXL6W2qI/AAAAAAAAFwQ/5KR8F-N3Mqk/s1600/controls.png) no-repeat 0px 0px;width:23px;height:23px;text-indent:-9999px}#cboxPrevious{left:0px;background-position:-51px -25px}#cboxPrevious.hover{background-position:-51px 0px}#cboxNext{left:27px;background-position:-75px -25px}#cboxNext.hover{background-position:-75px 0px}#cboxClose{right:0;background-position:-100px -25px}#cboxClose.hover{background-position:-100px 0px}.cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px;right:27px}.cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px}.cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px;right:27px}.cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px}#mdfb{font:12px/1.2 Arial,Helvetica,san-serif;color:#666}#mdfb a,#mdfb a:hover,#mdfb a:visited{text-decoration:none}.mdbox-title{background:#000;color:#fff;font-size:20px !important;font-weight:bold;margin:10px 0;border:20px solid #ddd;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;box-shadow:5px 5px 5px #CCC;padding:10px;line-height:25px;font-family:arial !important} Receive all updates via Facebook. Just Click the Like Button Below... Help save the particular widget and pull the particular widget down below your blog blog posts Therefore you are common completed. Customization: Automagically this kind of widget are going to be showing up from every per visitor exactly who go to your website, nonetheless, if you need this kind of to seem for each webpage rekindle next simply just alter the particular red color "true" worth to "false". But I recommend that you keep the idea since it is. The particular glowing blue color text message would be the text message which is displayed above the particular Facebook or myspace just like container within the appear, to help you change it out to in any respect that suits you. Lastly the particular red color text message "tomakemoneyon" would be the user identify involving the zynga webpage, which means you should swap the idea with your FACEBOOK webpage user identify, and you can discover that through browsing your current zynga webpage. Most completed right now conserve the particular widget once again and go to your website regarding seeing the particular beautiful pet upwards just like container. Peacefulness & Joys brothers and sisters. Along with thoughts down below the particular publish should you confronted any problem while adding this kind of widget with your blog. I'll be always at your program. Content Showing up! Read More »Tags: Blogging Basics Sunday, 10 February 2013 Find Free Images for your blog Yahoo and google has higher system for images' research in addition to Google's protocol closely filtration the actual images and also the meta data inside them, and so today duplicating images via Yahoo and google in addition to immediately release these with your website will be wii process, nonetheless, We'll present you with some ways to cause them to helpful. Exactly how Yahoo and google Search engine spiders Graphics? Google's spiders in fact did not learn about the actual fact inside an image, nonetheless, today the device has become increased in addition to Yahoo and google today may distinguish images via their meta data and also other tag words. And also meta data is really the results when the image has been often captured or even developed by an individual, and that means you can not very easily alter in which data, in which data signifies the actual video camera or even software program brand in which the actual image has been created/taken, the actual sizes of the image, the actual keywords in the image, the type of the actual image and much more. Today in the event you delivered electronically a similar image via Yahoo and google. com in addition to submitted in which in your website after that Yahoo and google would not very easily index your image, given it by now features in which within their index. And so things you need should be to alter the actual image's data a little bit in addition to allow it to become exclusive. Requirements Graphics you need to use? Today handful of issues are usually in this article, to begin with I recommend someone to simply develop images by yourself utilizing a image manager including Photoshop, Illustrator, 3d Xara and so forth, however unless you understand these kind of software program in addition to need to use Yahoo and google images after that make certain, you won't release these images that are often having copyrights or even water-marks in the images. Right after all of these, if your image isn't obtaining the water-mark after that you are welcome to alter in which image in addition to use on your website. How you can alter Graphics Files? Today anything will be distinct, so that you can use free images on your website. But once again, in the event you delivered electronically the actual image in addition to submitted in your website because comparable to it was after that in which wouldn't always be found, and so you have to switch the following factors in images: Modify the actual Title of the image Modify the actual ALT point of the image Modify the actual Name of the image Re-size the actual image in Photoshop or even Fresh paint [Important] You can even alter necessary . of the image Getting done over changes today the actual image is going to be exclusive one particular in addition to search engine optimization will likely index the item, because it truly is data has become diverse from in which image that was delivered electronically previous. Bottom line: It is only my own perspective in addition to as outlined by my own practical knowledge in addition to judgement, I've truly with all this concept to your account. Furthermore, primary seek to develop your images, if you can't after that use Google's images however at least alter these when i told over, in addition to re-sizing the actual image will be should to make the actual image exclusive. An occasion you had will be; the celebrities' images are usually free for use like Cricketers, Footballers, Stars, personalities and so on, however make certain an individual haven't added the actual water-marks towards images. Water-marked images cannot be used naturally. We'll likewise give you a report on websites that supply you free images on your information sites, however you will have to supply a website link here we are at these within your post, you'll find just about all types images presently there. Simply just delay a bit. Read More »Tags: Blogging Basics Wednesday, 6 February 2013 Google Page Rank Update on 4 February 2013 Very good news, most recent Google Page rank up-date is being conducted guys in 4 January 2013. Google will be stimulating and changing Google Toolbar page ranking in today 4 feb . 2013 and think me personally it's an important Google pagerank up-date connected with 2013 which usually not too long ago taking place. We have been seeing Google changing every web site page ranking right now and and giving brand-new PUBLIC RELATIONS to help every web site according to good quality connected with web site information and good quality connected with back links they may be possessing for their internet pages. We have seen a webpage position up-date before inside January thirty days also Check out Below, yet which was not a key a single, yet here is the recent and most recent google toolbar page ranking up-date Read More »Tags: Blogging Basics Sunday, 3 February 2013 Valentine's Day 2013 Love Advice Should you be sitting there for hours on end weeping and expecting to get the lover returning to devote your Romantic evening along with in a very romantic holiday establishing, you are probably experience dependent at the moment. The reality is that there's generally some thing you can apply to create him or her fall in love with you once more. We will get suitable within now having a foundational notion that is most certainly about to enhance your chances of getting the lover returning regardless of induced the split up initially. There are numerous tested techniques to employ to obtain your soulmate to understand exactly why the two of you are actually for one another. When you abide by the points below, you will be able to take pleasure from Romantic evening 2013 as part of your second half's arms. There are numerous tested techniques to employ to obtain your soulmate to understand exactly why the two of you are actually for one another. When you abide by the points below, you will be able to take pleasure from Romantic evening 2013 as part of your second half's arms. Read More »Tags: Blogging Basics Subscribe to: Posts (Atom)
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…