Buddies,
When I startd bloggin, I dint know SHIT about it. And when I say that, Im talkin bout stuff relatin t blog / website dsign. I always knowd what I wannad The Joey Polanski Show t be. I jus dint know nothin bout HTML & CSS & shit like att.
Fortunatly, wif free blog-servrs like Blogger & WordPress, you dont NEED t know none o that stuff in ordr t get a decent blog up n runnin. In othr werds, there are free blog-servrs out there thatr, like, real usr-friendly: they give ya nice, attracktive, blog-templates t use. Almost all th HTML (Hypr-Text Markup Language) ya need is already built inta a pre-fab Cascadin Style-Sheet (CSS) — also known as a template — that dtermines evry aspeckt o yer blogs apearance.
The Joey Polanski Show, a Blogger blogski, is built on th “Minima” template that is one o th standard templates offerd by Blogger. I chosed thatn cause part o th Polanski principple has always been simplicity — also known as FOCUS, substance bfore form. Th Polanski Show has a PRPOSE and, in my efferts t fulfill that prpose, Ive avoided dressin th JPS up in lotsa nifty “doodads.” Strippd-down was th look I was lookin fer.
Ive recountd, time & time again, how th JPS was, at first, sorta a private joke — a joke that only me & my brother Piet woud realy “get”; and how, aftr a while, I set out to acqwire a more extensive readrship. Acqwirin that readrship involvd my addin th first of what woud become many links at th JPS. Back in em days, Blogger had not yet added its “Easy Template-Editing” mode; so addin a linkski meant I had t learn a little bit about HTML & CSS. Luckily, Blogger offerd convenient & easily accessible tutorials on th subjeckt; and it was probly in only its third week that th first links was added at th JPS.
As it turnd out, Blogger also offerd some tutorials on how to altr colors & fonts, and I lookd inta them — long aftr learnin such simple things as how to supplement a blogs links-list. Pretty soon, I was able to change th fonts & colors at th JPS, & did so quite a few times ovr th course o th 2+ years th JPS been around.
Learnin that much by usin th offerd Blogger tutorials, I went on t teach myself some othr stuff. I taught myself that stuff jus by applyin what I already learnt, and by tryin diffrent shit whilst eithr messin round in my Blogger template or just messin round in th process o creatin a post ovr at JPS.
Tho I aint by ANY stretch a EXSPURT eithr in HTML or in CSS, I ended up bfore long tutorin some o my bloggin buddies in basick HTML. I evn offerd t help some o them tinkr wif their blog-templates. So far, tho, my help been cnfined to helpin fokes learn howta put into their posts links to erlier posts on their own blogskis & howta put links inta coments on othr fokes blogskis.
Well, very recently, a friend o Polanski — a chick callin erself Here Today, Gone Tomorrow — who gots a blog calld The Daily Narcissist, said sompm bout bein inexperiencd in template-manipulation. In light o THAT, I thougt maybe Id share — here at th Hole — some o what I learnt about such mattrs.
Preliminarys:
- Here, I aint talkin t none o you fokes who aint got Blogger blogs. I aint yet realy tryd t tinkr wif my WordPress blog. Thats bcause (a) Joey’s Hole is primarily a-spposta be my “utility” blogski — th blog at which fokes can leave me coments when, fer whatevr reasn, Blogger aint werkin right. Its only seckondarily that th Hole is a-spposta be a place fer me to post stuff that aint really JPS material — stuff like a tutorial on HTML and CSS tinkerin. I dont realy give a shit how my Hole looks; & therefore I aint took th time t learn how to tinkr wif shit here on WordPress. Moreovr, (b) WordPress — not t put too fine a point onnit — SUCKS, cmpared to Blogger. Here, Im a-talkin to th small numbr o my Blogger pals who bothr, on ockasion, to read my stoopit lil WordPress blogski.
- Blogger recently undrwent a transformation. And wif that transformation, there come a drammatick diffrence in th “tinkrabilty” o th standard templates — or, rathr, a diffrence in th means by which tinkrability is t be attaind. You followin me? Evn if you fully made th transition from Old Blogger to New Blogger, you can still tinkr extensively wif yer Blogger template — you jus need t go about if diffrently.
- Lets draw a importnt set o distincktions. Firs, theres th distincktion btween Old Blogger and New Blogger. Old Blogger you signd inta usin yer Blogger account & passwerd. New Blogger you sign inta usin yer Google account & passwerd. Get it? Old Blogger wunt fully … ummm … Googlized. New Blogger IS. Now, wiffIN New Blogger, therer TWO “modes”: theres intrducktory mode, and theres FULL mode. Full mode is th mode that offrs “Easy Template-Editing.”
- A good bit o what Im about t say applys only to those o yous that made th FULL switch from Old Blogger to New Blogger in FULL mode. Those o yous thatr still usin Old Blogger and those o yous that are usin New Blogger in its INTRDUCKTORY mode, — yer all in th same boatski. Tinkerin wif yer blogs template mus be done th ol fashiond way, and if ya want a Polanski tutorial on howta do it, youll hafta ASK me fer one. Yer in th minority nowski; and, while I once resistd th switch from Old t New, and evn hesitatd, aftr switchin from Old t New, in makin th full switch from INTRDUCKTORY to FULL, I now decklare that New Blogger in FULL mode (wif Easy Template-Editing) is FAR superior to Old Blogger & New Blogger in INTRDUCKTORY mode. MAKE TH SWITCH AWREADY!
A Little Basick HTML:
- HTML is a kinda language that you can use to tell a browsr “Display THIS part o th page in THAT way!” Thats how ya make it show a piece o text in a certain style, or a page-backgroun or piece o text in a certain color. Cmmands writtn in HTML always involve a pair o “tags” — a openin tag & a closin tag. Th openin tag says “Start displayin such-n-such a style HERE,” while th closin tag says “Stop displayin that style HERE.” Closin tags are typickly idennickle wif th openin tags, cept th closin tags will start wif a forward slash (/). That forward slash is like sayin “Ix-nay on th yle-stay!” (Or “Nix on th style,” fer those o yous that dont know Pig-Latin!)
- By th way, in case yer intrestd, Joey Polanski ALWAYS types his posts in EDIT HTML mode rathr than in COMPOSE mode — i.e., in “Code” mode rathr than in “Visual” mode, in WordPress. I nevr use th “buttns” thatr prvided to make a piece o text bold, or italicizd, or whatevr. I certainly nevr use th prvided buttn fer insertin a linkski. In my opinion, its smartr, in th long run, to learn a little basick HTML.
- HTML tags, whethr openin or closin, always occur inside o <angle-brackets>. Thus, i make th werd boldface, display in boldface by typin in sompm like iss:
<b>boldface</b>
or
<strong>boldface</strong> - Got th idea? Th piece o text (th word ‘boldface’) you want “styled” in a crtain way (in boldface) goes btween th appropriate openin & closin HTML tags. Now that yer probly gettin th idea, lemme give ya some othr frequenly-usd HTML tags. To make italics diplay in italics, use these tags:
<em>italics</em>
or
<i>italics</i>For undrlining, use these:
<u>undrlining</u>
For bold, italics, AND undrlining, use these:
<b><em><u>bold, italics, AND underlining</u></em></b>
- You can also use HTML cmmands to change th color of a piece o text. Th trick is to learn th “numerickle” names o th various colors. Th numerickle name fer th red color I jus used is #ff0000. (By th way, em are zeroes rathr than capital Os. ) Th HTML tags I usd were these:
<span style=”color:#ff0000;”>th red color I jus used</span>
Notice here that only btween ’span’ and ’style’ is there a blank space in th openin tag. Notice also th semicolon btween th numerickle name & th closin quotation marks. Notice, finaly, that th closin tag is th nixin o th ’span’ in th openin tag. You dont need to repeat all th rest o th stuff thats in th openin tagski.
- Here are th numerickle names o some othr colors:
#3333ff = BLUE
#ffff00 = YELLOW
#33cc00 = GREEN
#6600cc = PURPLEAnd you can “discovr” othr colors by playin a bit wif a six-place combination o numbrs & lettrs, thinkin o th six-place figgr as bein cut up in three sets o two figgrs — like 66/00/cc — each pair a pair o idennickles. As o this postin, th color o th main text at The Joey Polanski Show has #dd0000 as its numerickle name. I call that color “rust.” Th backgroun color at The Joey Polanski Show has #ffaa77 as its numerickle name. I call th color “melon.” (Ill say more about alterin th GLOBAL aspeckts o yer blog — i.e., template manipulation — below.)
- You can also use HTML cmmands to sleckt th kind o font you wanna use — font style and font size. Once again, th trick is learning, not jus th proppr HTML tags t use, but also th proppr “font famly” names. Jus now, I changd th font style and th font size by typin in these HTML codes:
<span style=”font-family:copperplate gothic bold;”>font style</span>
and
<span style=”font-size:200%;”>font size</span>As you mighta guessd, “copperplate gothic bold” is th name o th “font famly” I chose; and “200%” indickates th “font size” I chose. You can learn othr font-famly names jus by playin wif yer word-processin program — like MS Word or MS Works (which I imagine comes wif any cmputer thats got WINDOWS loaded onta it). Herer a few ya might try:
<span style=”font-family:kristen itc;”>This is the present-day Polanski Show main-text font.</span>
<span style=”font-family:bradley hand itc;”>This font is also used, in one place, at JPS.</span>
- HTML tags can also be usd to insert a link — eithr inta a post on yer own blogski, or inta a coment you leave at somone elses blogski. Spposin you wannad to insert a link to one o yer favorit innernet site — like, say, The Joey Polanski Show. Well, heres th HTML youd type in:<a href=”http://thepolanskishow.blogspot.com/” mce_href=”http://thepolanskishow.blogspot.com/”>The Joey Polanski Show</a>Th URL o th Polanski Show is “http://thepolanskishow.blogspot.com/” (ooooh! I get a CHILL whenevr I type that!). It goes tween quotation marks and is insertd inta a HTML openin tag that starts wif a href= (theres a blansk space btween th a and th href, but none btween th href and th =). Th whole tag is encasd in em all-important angle-brackets. Th closin tag is jus th ix-nay o th a part o th openin tagski.
- Insertin a linkski inta yer sidebar proceeds somwhat on th same principple, tho Bloggers “Easy Template-Editing” allows you to dispense wif th HTML rigmarole. If yer still usin Old Blogger, or are using New Blogger in Introducktory Mode, youll hafta know th HTML, and also howta navigate yer template, in ordr to add linkskis to yer sidebar.
- But you fokes know howta achieve these effeckts jus by usin th buttns that is givn yas in Bloggers COMPOSE mode, right? Yer more intrsted in knowin howta manipulate yer ovrall Blogger template, rightski? RIGHTski! KAY! Ill tell yas howta do thatski.
- By th way, if yer wondrin how to creat a indentd, numberd list like this jus by usin HTML codes insteada th prvided buttns in Blogger or WordPress, th whole indentd segment shoud fall btween a openin tag & a closin tag like these:
<ol> </ol>
To get th numberin inside th indentation, use tags like these, fer each o th “numberd” items:
<li> </li>
(em bein lowr-case Ls, rathr than numeral 1s.)
Template Manipulation in New Blogger, FULL Modeski (Part I):
- Those o yous whove swtchd to New Blogger in FULL mode (wif Easy Template-Editing) probly awready been playin wif fonts & colors, cause its, like, EASY in that mode. From yer dashboard, ya jus click LAYOUT. Thatll take ya inta a template-editin area where you can altr yer “Page Elements” — th kindsa stuff thatr included on yer blog: profile, links-list, arckives, etc. (By th way, you can get there from yer POSTS page — or yer EDIT POSTS page, howevr ya wanna call it — by clickin th TEMPLATE tagski.) This is where you can pick & choose what you put in yer sidebar. Do you wanna display a profile? How bout a list o linkskis? And maybe a arckive? Yeah. Heres where you can PICK what you DO and DO NOT include in yer sidebar.
- This is especially addressd to Here Today, Gone Tomorrow. Near as I can tell, you done made th full switch. I blieve you said you dint know howta add to yer blog a list o arckivd posts. Well … I see you got a pull-down menu that seems t cntain a blog-arckive. You call it: “oops, I ripped my pants.” Im pretty sure that if you go to the “Add & Arrange Page Elements” page I jus mentiond, you can click th EDIT buttn associatd wif yer Arckive element, whichll opm up a popup-type window. IN that window, youll be able to select th WAY in which yer blog arckive is displayd. Presntly, you got th “Dropdown Menu” option slecktd. Alternatively, you coud select “Flat List,” whichd be like a Old Blogger-style arckive list; or you could seleckt “Hierarchy,” whichd be a arckive-list that coud be collapsd or expanded as yer readrs please (like youll find at The Joey Polanski Show). Click one o them othr options, and yer blogll have a list o arckivd posts instead o th Dropdown Menu thatcha now gots.
- In “Easy Template-Editing,” you can also click on a buttn that says “Fonts and Colors.” Thatll take you to a page that enables you to pick & choose, from a pre-set “palette,” th color o yer blogs background, yer blogs main text, yer blogs title, yer blogs dscription, yer blogs post-titles, date-headrs, post-footrs, etc., etc. Itll also allow you to choose, from a rathr limitd range o fonts, th font fer yer main text, blog-title, post-titles, date-headrs, post-footrs, & sidebar stuff.
- Heres th main prpose o this post: What if you wanna use colors that aint included in th pre-set palette o colors offrd in “Easy Template-Editing,” or fonts that aint included in th pre-set range o options?
- Heres th answr: Yer a-gonna hafta ADD EM OPTIONS IN YER TEMPLATE. Thats right, fokes! Yer a-gonna hafta git inside yer template and INTRDUCE em colors & fontskis. So yer a-gonna hafta know some numerickle names fer colors, & some font-famly names. Youll especialy hafta know how to navigate a New Blogger template.
- If youve awready clickd yer TEMPLATE tab, and are on th PAGE ELEMENTS page, you can click th EDIT HTML buttn. Thatll take you INTA yer template, th same way that simply clickin th TEMPLATE tab woud in Old Bloggr. At th top o yer template, youll see lotsa stuff that simply relates GLOBALLY to yer template & to HTML and CSS genrally. Right below that, youll see a part that says sompm like /* Variable definitions. Thats th part that sets forth yer available colors & fonts. Youll probly see sompm that looks like iss:<Variable name=”bgcolor” description=”Page Background Color” type=”color” default=”#000000″ value=”#000000″>and might have a diffrent #numerickle color name innit. (Note that there are b l a n k s p a c e s occurrin here. Note also that there aint no semicolon (;) immediately followin th numerickle color-name, like thered be if you was jus changin a font-color wiffin a partickular blog-post.)
- Whats mentiond here as th “Variable name” — namely, “bgcolor” — is th expression that gets entered at th appropriate place in th lowr part o yer template. (Ill get to THAT in Part II, below.) Ocourse, “bgcolor” stans fer “background color.” Th “description” makes this clear: this “variable definition” stans fer yer “Page Background Color”. See? Then theres th nonsense o specifyin th TYPE o definition thats being offerd (COLOR or FONT, fer example), and also a “DEFAULT” value and a atchual “VALUE”. These values is numerickle color names, & what youll find here initially will represent eithr th default colors associatd wif th template you chose or th colors you mighta awready selecktd usin “Easy Template-Editing.”
- Where th TYPE is “font”, therell also be a specifickation o th basick style — like “normal” — and a specifickation o th SIZE — like “100%”. So you might see sompm like iss:<Variable name=”bodyfont” description=”Text Font” type=”font” default=”normal normal 100% Georgia, Serif” value=”normal normal 120% bradley hand itc”>Dont ask me why it says “normal” twice. As is already evident, I aint no friggin genyus!
- So, heres whatcha gotta know, if ya wanna ADD some colors & fonts to them that are awready available in New Blogger, FULL Mode: To add a COLOR, add to yer “Variable definitions” sompm like iss:<Variable name=”PICK A NAME” description=”PICK A DESCRIPTION” type=”color” default=”#SELECKT A NUMERICKLE COLOR-NAME” value=”#GO AHEAD & ENTR TH SAME NUMERICKLE COLOR NAME“>When I say “pick” a name & “pick” a dscription, I mean jus that: PICK EM! It dont mattr what they are. Yer inventin here! Imagine yer layin out a palette o paint. Yer sayin, “Thisll be my warm red, thisll be my cool red, thisll be my warm blue, thisll be my …” Blogger picks DESCRIPTIONs accordin to where th color will apply in th blog-template — fer example (as we awready seen), “Page Background Color.” I say FUCK THAT! Give th color a description that is IDENNICKLE wif its name! So, what Ive named “melon” — the current JPS “background color” — I also describe as “melon.” (Th only thing ya gotta note here is that a DESCRIPTION can contain blank spaces, whereas a NAMEs gotta be all like one word. So, if you DESCRIBE a color as “light red”, youll hafta NAME it “lightred”.) Nfackt, I gone so far as to DELETE th whole dangd palette o colors that was awready containd in my Blogger template, and I intrduced about ten colors I wannad t use. (I think I only use about six ubm at any givn time.) I describe em as I name em. Whats namd “melon” is described as “melon”; whats namd “rust” is describd as “rust.” So, as a illustration, heres one o th “Variable definitions” I intrduced inta th JPS templateski:<Variable name=”brightblue” description=”Bright Blue” type=”color” default=”#0000ff” value=”#0000ff”>
To add a FONT, add to yer “Variable definitions” sompm like iss:
<Variable name=PICK A NAME description=PICK A DESCRIPTION type=”font” default=”normal normal 100% SELECKT A FONT-FAMLY NAME” value=”normal normal 100% GO AHEAD & ENTR TH SAME FONT-FAMLY NAME“>
Now yer welcome to do whatevr ya please here; but, prsonally, I think that usin a gazillion diffrent fonts would make a MESS of a blogski. I use, at any givn time, only TWO font-famlys ovr at JPS. Virtually evrything is in th same font — namd “kristen itc”. Only th link that says “view my complete profile” is in a diffrent font — namd “bradley hand itc”. Howevr, I use th kristen itc font in at least three diffrent sizes — th large size ya see in each post-title, th medium size that ya see in th text o each post, and th small size ya see in th date-headrs & post-footrs, etc. So I intrduced THREE “kristen itc” fonts — which I namd “largekristen”, “mediumkristen”, and “smallkristen”. In Polanskiland, “medium” is “100%”; large is “200%”; and “small” is about “78%”. So, as a illustration, heres anothr o th “Variable definitions” I intrduced inta th JPS templateski:
<Variable name=”mediumkristen” description=”Medium Kristen” type=”font” default=”normal normal 100% Kristen ITC” value=”normal normal 120% Kristen ITC”>
Template Manipulation in New Blogger FULL Modeski (Part II):
- Now heres where Im a-gonna hafta stop a-holdin yer handskis. Twoud take WAY too long fer me to tell ya ZACKLY what t do when ya move down inta th bowels o yer template. Yer a-gonna hafta explore, lookin fer th places where partickular aspeckts o yer blogski is affecktd. I CAN give yas some pointrs, tho.
- Firs, not alla yous is usin th “Minima” template like I am. So yer templates gonna have diffrent … ummm … dmensions that youll be able t play wif. Like, fer instance, Tomski Serafini uses a template that gots, like, side panels that could be changd — changd wif respeckt to color, & changd wif respeckt to width. Some o what yous might find in yer templates might be cmpletely unfamiliar t me, since I’m usin th supr-simple template.
- Still, what youll probly see first, as ya scroll down from yer “Variable definitions,” is sompm like iss:body {
background:and immediatly followin th colon (:) aftr “background” (no blank space intrvening), youll see a dollar-sign ($) followed imediatly by what amounts to a color name from yer “Variable definitions” — probly “bgcolor” (meanin “Page Background Color” — th description o that color). This is where you can entr in ANY color name already included in yer “Variable definitions,” and thus change th color o yer blogs background. Whatcha gotta remembr is this: Whenevr a color-name or font-name is enterd inta th bowels o yer template, its gotta be preceded immediately by a dollar-sign ($). Dont ask me why. Thats just how it is in New Blogger. - Now heres where ya gotta start playin it by ear. Look throughout th rest o yer template FER DOLLAR-SIGNS. Evrywhere ya see one o them, you can pick a color-name or a font-name from th list o “Variable definitions” you awready inventd.
- Herer some o th things you can altr:Yer blogs background color
Yer blogs main text font & color
Yer post-title font & color
Yer date-headr font & color
Yer post-footr font & color
Yer sidebar text font & color
Yer sidebar heading font & color
Yer blog title font & color
Yer blog description font & color
Yer link color
Yer visitd-link color
How a link is affecktd by a cursor bein run ovr it
MUCH MUCH MORE! - As yer playin in yer template, alls ya gotta do is figgr out WHAT is affecktd by each $ markr thatcha find. You can do this pretty easily jus by readin whats around it; but if yer not sure, then try changin sompm & then click th PREVIEW buttn. Youll get to see what yer blog WOUD look like IF you dcided to KEEP th change. If ya dont like th result, then you can click th CLEAR EDITS buttn. In fackt, Ill reckommend here that you ALWAYS CLICK PREVIEW BFORE YOU CLICK SAVE TEMPLATE. (And evn if you screw up wif this, you can always click PICK NEW TEMPLATE and start tinkerin all over again.)
- That havin been said, dont hold Joey Polanski responsible if yer blog ends up gettin fuckd up. You gotta make sure you PREVIEW bfore you SAVE. And you shoud know bettr than to attribute too much tecknickle competence to a guy namd Polanski. Im jus tellin ya, as best I can undr norml limitations, how I done what I done ovr at JPS. I cant guarantee that there aint some typos herein (in th prescribed HTML codes) that I aint yet caugt. So … LETS BE CAREFUL OUT THERE.
And now, th Perfessr is tired. He will, howevr, be happy to take yer questions.