Teaching myself CSS - The Rss subscription box
Written by shaners on December 9th, 2007If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!
Lately I’ve been trying to teach myself CSS.
What a nightmare it is, and what fun it is all at the same time.
If you don’t know what CSS or maybe you’re interested in designing your own wordpress them from scratch then I suggest you pop over to Lorelle’s blog. and having a peek see at the Css and wordpress tutorials she has layed out.
The first thing I wanted to know how to do was how to include that nifty Rss sign up box you see on the bottom of this post. Oh feel free to subscribe to my rss feed I’d appreciate it :-P.
I first saw it on Yaro Starak’s blog entrepreneurs journey.
So I figured what I’d do Is use firefox to view the css and the page source to see how he did it. Sorry Yaro I ripped it off. Ah well I’m a blogmastermind mentorship student of his, so I hope this makes it alright!!
I personally like deconstructing things and re-doing it. You know digging in and figuring out things are done and then hopefully not breaking it. Oh if this blog looks a little wonky for the next little while you’ll know why.
So in the inetrest of sharing and caring I figured I’d show you what this little box thingy looks like and how it gets put on your blog.
SO the first thing you need is the CSS
He titles this box Johnson box. Kinda funny really, I donno maybe the guy who made is named johnson? Anyways….
SO you copy this , or in this case you hand code it because I didnt just put the css code in this post. Sorry ’bout that.
I just plopped in at random, I’m not sure if the placing of the css code means anything, unless you think code is poetry and has to look all pretty. I like the hack and bash method. Like Nke says: JUST DO IT!!
The CSS isnt really all that hard to understand.
Background color: Obvious
Width:? I’m guessing that means how much space in the single post area I placed the next bit of code it occupies or how far it spans the post area?
Margin:? No freaking clue what all that means
Border:, thats little grey line around the "johnson box"
And text align: Left thats which direction the text is going to start from
The second piece of CSS code follow pretty much in the same format as the first. Fool about with it so you’ll understand what it all does. That’s my motto anyways.
So once you have the CSS code all the way way you want it. NExt you have to figure out how to get it to display.
Again I found the piece of code on Yaro’s blog where this box sites and just copied it.
Ok so this picture doesnt really do it any justice at all, so here is the code:
*<*div class="johnsonbox"><*div align="center"><*A HREF="http://feeds.feedburner.com/Shanehigginbottomcom"><*IMG SRC="http://www.making-money-blogging.com/shanehigginbottom/wp-content/images/rsssmall.gif" border="0"></A*> Like this article? <*A HREF="http://shanehigginbottom.com/subscribe-now/">Subscribe to my RSS feed</A>.<*/div><*/div*>
Just remove all the stars you see in the code.
I just realized that I placed this in the single.php file and thats why it doesn’t display on the main page until you go to the actual post.
I guess next I’ll have to try and figure out how to get it to display on the main page when visitors come here, because you just love coming here don’t you!!!
Oh you’ll notice that there’s a pretty little feed icon in the Rss subscribe box.
You’ll have to either find an image you like or just rip the one on my page, upload it to your hosting account someplace you’ll remember where!!
and link to it in the code.
<*IMG SRC="http://www.making-money-blogging.com/shanehigginbottom/wp-content/images/rsssmall.gif" border="0">
what Does SRC mean, its an Images or Graphics tag <img src="image.gif">Inserts an image or graphic in this location. This tag does not have an end command. The
"image.gif" part of the tag must be the location of the graphic. Graphic names usually end with ".gif "or ".jpg".
Ok enough geek speak, it basically just tells the blog where to the image is located and to display it.
<*div class="johnsonbox"> whats the deal with this line of code. I may get corrected because I’m no CSS coding guru, but what I get is that "div class =" basically just tells the blog or website what to look for in the css and what to display, maybe an Identifier?, its a selector. Ok there’s alot of gobbledy gook I just looked it up on google, what it does basically is just tell the html how to display what the selector is point to or attached to.
So in this case div class=johnsonbox, or HTMl go get the Johnsonbox css code and display it.
Simple huh.
No for linking the Rss gif to my feed from feedburner.
It’s just as simple as creating a link: <*A
HREF="http://feeds.feedburner.com/Shanehigginbottomcom"><*IMG
SRC="http://www.making-money-blogging.com/shanehigginbottom/wp-content/images/rsssmall.gif"
border="0"></A*>
Notice where the <a starts and ends </A> basically in laymans term it tells the htm to create a link out of the image, or when you click on the image you’ll be taken to some link address.
Also you’ll notice I include a link to a page to subscribe, I learned this little tip from blogmastermind, always a good idea to include a page to give your readers a so they subscribe how they want to and so they wont feel so intimidated , some just don’t know what RSS is, so a little edumaction goes along way
Not so difficult huh.
If you’re like me and you’re a hands on sort guy, here’s some links to some other CSS design and coding sites I’m currently looking at.
If you have any great CSS resources I’d be happy to see them or maybe you know how to do the CSS thingy yourself leave a comment so I can learn a little more, Heck just be friendly and say HI
This blog is powered by Tim Hortons
shanehigginbottom
