Sunday 25 March 2007

Pullquotes to Break the Boredom

I have been wanting a new pullquote in the worse way, but I have been putting out fires all across the blogosphere, with no time for pullquote shopping!

...A pullquote is a nifty little item...

Well, it seems that tonight all fires have been extinguished. And surprise, surprise, I can actually make a change on my blog!

I have loved the blockquotes on Buttermilk Clouds ever since I started working with it. The lines are simple, elegant, and it sets off the text within the blockquote without distracting from the overall feel of the post. Tonight I started playing with the code to see if I could modify it enough to become a pullquote. The results are outstanding! (I get excited easily by the strangest things...when the code actually works the way I want, pullquotes, CSS...the list goes on.) So, here 'tis. As you can see, I made the font different, a bit larger, and centered.

To get your own new snazzy pullquote, open your Dashboard/ Template/ Edit HTML The following code goes in the CSS style sheet:

.pullquote {
float: right;
width: 150px;
margin: 5px 5px 5px 10px;
padding: 3px 0;
font: Verdana, sans-serif;
color: #555;
text-align: center;
font-size: 1.4em;
border-top: 3px double #ccc;
border-bottom: 3px double #ccc;
}
.pullquote p {
padding: 0;
margin: 0;
}
If you wanted a different color font, change this value. Change this value for a different size font. You can make the border solid, dotted or dashed and change the border color here. Save your template. Now, when you create a new post, put this code in the post editor window - or - a little tip: if you plan to use pullquotes often, or just don't want to go digging for code, you can automate this process. Open Dashboard/ Settings/ Formatting/ Post Template and paste this code there:
<blockquote class="pullquote"><p>...THIS IS YOUR PULLQUOTE TEXT...</p></blockquote>

<p>TYPE POST HERE...
A pullquote is a nifty little item. Why? Because, everyone reads them! And that is that. Have fun!

post signature

Friday 23 March 2007

The Thinking Blogger Award

Let me start out by saying that I don't do meme's. But, this one does not involve 50 things you wish you didn't know about me. Instead it showcases blogs that make me think...for one reason or another. So, to me this is a good way to share with my readers blogs that have made me think. I was given this award by Janet from Life in Westcliffe who has made me think on more than one occasion. Thanks, Janet!


Without further ado, here is my list:
  1. Tweak; by Mantissa - She is a member of PowderPuff Geeks and a kindred spirit. I was amazed by the similarities in our lives.
  2. Geeky Streak - The newest member of PowderPuff Geeks that has a great new geeky blog.
  3. Beautiful Beta - My old friend, Hans, that always gives me something to think about.
  4. Barrier Island Girl - I have never left a comment on her blog, but I read it often because it keeps me centered...and keeps my dream alive of the day we will be back there.
  5. Confessions of a Pioneer Woman - This woman is a hoot and makes me laugh. But she also makes me think because she is an amateur photographer and talks about her photography experiences. I love that.
That is the beginning and end of memes for me!

post signature

Sunday 18 March 2007

Join the BlogU Students Blogroll!!

NOTICE...as of April 2011, the blogrolling site is no longer in operation, so I am removing the blogroll.

It seems the majority decided that having a blogroll for BlogU Students is a good idea! This will, of course, be on a voluntary basis. If you have learned how to personalize your blog from reading posts at BlogU and want to have your blog added to the BlogU Students Blogroll, now is your big chance!

First, please add the blogroll to your blog. I'm giving different options for presenting this in your blog.

Option #1 - Full blogroll:
  • For Classic Blogger - put this code in your sidebar where you want it to appear ~OR~
  • For Blogger Beta - Open Dashboard/ Template/ Page Elements/ Add a Page Element/ HTML/JavaScript and paste this code in that window:
<script language="javascript" type="text/javascript" src="http://rpc.blogrolling.com/
display.php?r=10fb2ff44d81d6db5d565673f96537a4"></script>
Option #2 - Full blogroll with button:

Follow the steps for Option #1 but use this code instead:
<a title="Students of BlogU" target="_blank" href="http://www.bloggeruniversity.blogspot.com/">
<img border="0" src="http://h1.ripway.com/anniebluesky/blogustudent.png" width="80" height="15"></a><script language="javascript" type="text/javascript" src="http://rpc.blogrolling.com/
display.php?r=10fb2ff44d81d6db5d565673f96537a4"></script>
Option #3 - Expand/Collapse blogroll:

First...Put this code in your CSS style sheet (between the <head> and </head> tags). Note, if you already have the Expand/Collapse code set up for your blog, skip to the third step.
.commenthidden {display:none}
.commentshown {display:inline}
Second...Put this between the <head> and </head> tags, but not in the style sheet:
<script type="text/Javascript">
function togglecomments (postid) {
var whichpost = document.getElementById(postid);
if (whichpost.className=="commentshown") { whichpost.className="commenthidden"; } else { whichpost.className="commentshown"; }
} </script>
Third...
  • For Classic Blogger - put this code in your sidebar where you want it to appear ~OR~
  • For Blogger Beta - Save template then open Dashboard/ Template/ Page Elements/ Add a Page Element/ HTML/JavaScript and paste this code in that window:
<a aiotitle="click to expand" href="javascript:togglecomments('blogustudents')" title="Students of BlogU">+/- BlogU Students blogroll</a><br><br>
<div id="blogustudents" class="commenthidden">
<script language="javascript" type="text/javascript" src="http://rpc.blogrolling.com/
display.php?r=10fb2ff44d81d6db5d565673f96537a4"></script>
</div><br>
Option #4 - Expand/Collapse blogroll with button:

Follow the instructions for Option #3, but use this code in the third step. (Note this option is not like what is in my sidebar. I opted for the button outside of the +/- and not on the inside. This option shows the button only if you click on the +/-.)
<a aiotitle="click to expand" href="javascript:togglecomments('blogustudents')">+/- BlogU Students Blogroll</a><br /><br>
<div class="commenthidden" id="blogustudents">
<a title="Students of BlogU" target="_blank" href="http://www.bloggeruniversity.blogspot.com/">
<img border="0" src="http://h1.ripway.com/anniebluesky/blogustudent.png" width="80" height="15"></a>
<script language="javascript" type="text/javascript" src="http://rpc.blogrolling.com/
display.php?r=10fb2ff44d81d6db5d565673f96537a4"></script>
</div>
My personal favorite option is #4 because you get this very artsy button
in the ever popular expand/collapse blogroll! After you have the blogroll in your blog, send me an email to:
  1. blogger.university@gmail.com
  2. Include the title of your blog
  3. Include the URL of your blog
When I see you have the blogroll up and running, I will add your blog!

post signature

Saturday 10 March 2007

Backgrounds and Clickable Images (From My Inbox)


Dear Prof. Annie,

I came across your blog this afternoon and I must say, it's been a real help! I am rather a new blogger although I am pretty enthusiastic about learning a bit more - have just this minute managed to add a favicon to my blog and am pretty happy with it .

My question today, is how I can add small pictures which link to other websites ('badges', I think they call them) to my blog - there are a couple of links that I would like to have on there to show my support for some other websites and organisations and things but all I seem to be able to do is to either add another picture or else add a link list ... no way to add a badge/picture that is a link

Another thing is that I would really like to add the e-mail icon (email button) to my blog too - I've been to the site but I'm not sure where to put the HTML code back on my own template...

I really do appreciate your kindness in reading this and would be most grateful for any help

Warmest wishes,

Rev. Abhipanyo

P.S. Can you recommend anything for me in terms of doing up my template a bit? I'd like to add a nice black/grey picture background to it (perhaps some old scriptures) - I've been googling for a while now but finding any information on backgrounds and how to do them is really tough!



My response:

I am happy you came across my blog and that it has been a help. Your favicon is really good. I love looking at different favicons. Your blog is very nice...good work!

First question...
You want an image that also serves as a link. That is easy. This code inserts a clickable link and if you hoover over the image, a 'tool' window pops up with your text in it...a little something about the link.
<a href="
http://www.bloggeruniversity.blogspot.com/" rel="alternate" title="Steal my button! BlogU...the best of the blogosphere!!
" type="BlogU">
<img alt="BlogU Button link" style="border: 0pt none ;" src="
http://h1.ripway.com/anniebluesky/-blogu.png" height="15" width="80">
</a><br>
This code comes from my blog, so you can see it in action by clicking on my "Chicklet Love" button in the middle column under "Random Sidebar Clutter". The sizes in this code is for a standard chicklet, 15 x 80 px. If your image is a different size, change the values accordingly.

1. Insert the URL of where you want the link to go.
2. Put the text you want to pop up here....or leave blank.
3. This is like a place holder that describes what the image is (not necessary, but more HTML compliant)
4. This is the URL of the image where your image is stored (from your webhost...you can see I use Ripway)

To put this clickable image into your blog:

1. Open your dashboard/ template/ page elements
2. Click on 'Add a Page Element'
3. Choose ' HTML/JavaScript'
4. Paste the above code into the window with your changes in place
5. Give this widget a title if you wish, or leave blank
6. Save changes

Or, if you want the streamline version, this will work, but not web compliant:
<a href="http://www.bloggeruniversity.blogspot.com/" >
<img src="http://h1.ripway.com/anniebluesky/-blogu.png" height="15" width="80">
</a><br>
For some reason, Blogger doesn't save the <br>'s correctly when you re-open a widget to add another link. So, what I do is keep a fresh backup of the widget code on my computer. Then when I open the widget to add a link, I first paste the saved code into the window, then add my new link, then save the new code to my computer again. A bit bothersome, but not impossible. If you are wondering what the <br>'s do, they separate each image (I think the br stands for break). That way all your images are in a row...not piled up.

Queston 2...
Adding the e-mail icon...If you have the code you need from the link below my email address, then you do the same thing as what I described above to get it into your blog. You will create another page element using the 'HTML/JavaScript' widget.

Third question...
If you look at my other blog, Buttermilk Clouds , you will see a green striped background. That background is really an 81 x 81 px image that repeats. And this is the code that puts it in my blog:
body
{
background: transparent url('http://img151.imageshack.us/img151/3294/bg2.png') top left repeat;
}
So, when you find an image or pattern:

1. Save it to your webhost.
2. Insert the URL of that image in the code.
3. Add the code to your template in the CSS style sheet (between the and tags).

If you need image manipulation, try IrfanView to do simple editing of images. For more involved projects try GIMP ... both are free programs and well worth downloading and becoming familiar with. Not to mention lots and lots of fun!

I think this should keep you busy for awhile!! IMPORTANT. Save your template before beginning any template modifications...that way you can always fall back to where you began if things go wrong. Have fun with it...experiment.

UPDATE: 03/12/07 - Regarding blogger not saving the <br>'s correctly, DarkUFO so kindly left a comment telling me why. All I need is a little /. Instead of <br>, it should be </br>. I love simple solutions!!! Thanks, DarkUFO!
03/13/07 - This added information was given to me by Shelly ... the code should have the / following the br like this: <br/>. Thanks to Shelly and all my readers for all the useful information.

post signature