Posts Tagged ‘Code’

Email a Friend Add-ons for Traffic

Tuesday, May 20th, 2008

Many bloggers think it’s important when you’re trying to get backlinks and traffic to have a way for your readers to send your blog url to a friend. There are some great plugins for Wordpress and some good scripts out there that can achieve this function on any blog or website. On my blog I have used Gamerz’s Wp-Email for quite some time. It works really well for posts and pages and can be incorporated through the addition of a simple line of php code.

Recently, I wanted to put a similar call in my sidebar so visitors could share it via email from the sidebar. I looked for about an hour for the right script until I found one that worked just right for my blog. If you’re looking for more readers, one way to help that along might be through “email to a friend” blog add-ons. Have you used these on your blog or site yet? If not, why not give ‘em a try. Is this a purely promotional item? Not totally. If this blog had promotional products like pens or fridge magnets, they’d be about you. I think everyone can achieve their dreams if she/he puts their mind to it and that’s what I try to spread through this blog. Hope the email a friend add-ons help you out.


If you're new here, you may want to subscribe via rss -or- inspiration, psychology, blogging

Related posts

Deck-Shoes Minimalist Theme for WordPress

Saturday, January 12th, 2008

I’m pleased to release my first publicly available WordPress 2-column theme entitled: “Deck Shoes.”

I chose the name due to its simplicity and reliability and I made it as a teaching start-point for CSS but it works out-of-the-box as a powerful and cool theme. Deck shoes is a culmination of all the tumblelog and specially css styled themes I have dissected over the past year along with features I have found useful to my style of “tumble-hybrid” blogging. Its features include:

Specially styled CSS options*
Rotating images in header (customizeable with your own)
Gravatars show up in comments
RSS links by category with RSS images
Customized Adsense areas under header and in posts
Chunky big blockquote graphic
CSS comments throughout as tutorials for changing options

Deck Shoes Theme

*The specially styled CSS options add variety to your posts. To use them, simply use the div or p class calls in your post (in the code entry editor only. They will not work through the rich text input editor). e.g.,

p class example

Will look like this:

This is a test of an aside and now is the time for all good men to come to the aid of their party whether Democrat or Republican we all have toes so we should all wear deck shoes.

NOTE: due to Wordpress self correcting feature, once a DIV special style is inputted it will revert to a P if opened for editing after being saved. You have to change it back if you choose to re-edit. ALSO: To get the photo styling to center with a border, just add class=”center” in the img line. Questions? Leave a comment.

Here are the p, div classes included out-of-the-box:

aside, thought, code, notepad, photo

When you get the hang of it, it is fairly easy to create your own special styles. I made this theme for beginners mostly to learn css and special styling from my examples. Enjoy! I appreciate your feedback.

Demo it here

Download latest version of it here


Related posts

Special Style Your Wordpress Theme Like a Tumblelog

Monday, December 31st, 2007

I’ve tweaked my theme from this:

Simplr by Scott Wallick

To this:

Simplr as tweaked by Riley

This is getting to be a familiar ritual. When I change themes I have to extend the name character limit to accomodate my good friend’s long name: Jessica the Rock Chick. Most themes come out of the box with 20 charcater limit so I have to go in and make it 30. I hope she knows I am not bothered by this in the slightest. It serves as a great example though of how much is really invloved when you see me change a theme.

Every time I change themes I have to adjust many other things beside name character limits in comments. things. I’ve tried and tried but there is absolutely no theme out there that does what I want and need without a good amount of tweaking. A friend Nick Mercer asked me once, “Have you considered making your own theme?” The answer is yes and I have made several themes. I don’t offer them for download because frankly, they aren’t that innovative. You can get the same out there far more styled and strongly built. That’s why I work with simple themes and tweak them to “make them my own.” For example: The latest theme here at my blog is called Simplr, here are the credits directly from the CSS stylesheet:

/*
THEME NAME: Simplr
THEME URI: plaintxt.org/themes/simplr/
DESCRIPTION: Single column and content-centered. A different type of theme. For WordPress 2.3+.
VERSION: 4.0
AUTHOR: Scott Allan Wallick
AUTHOR URI: http://scottwallick.com/
*/

Here’s just some of what I’ve done to it so far:

  1. Added background img url to via css
  2. Used a container DIV to separate the header.php from the index.php template files.
  3. Added Adsense Ads to the header.php template file
  4. Created a custom css DIV to make the sidebars (at bottom) have a white background.
  5. Added blogrolling.com javascript to the primary sidebar with a li id. (Blogrolling.com javascript allows me to add my blogroll to all my blogs the same and as I edit with one click, the add or deletion shows across all my blogs through the script. I’m a big fan of tossing the “link” php within Wordpress in favor of Blogrolling.com)
  6. Added a li id for ‘Credits’ where I post image button links to my various”condos” online where I hang out. I also posted a typewriter image button to ‘Cheese Enchiladas’ my Best of Weekly Writing blog.
  7. Added the Gravatar code (my hope is that many more of my readers down the road will join the free avatar generator Gravatar.com.

At this stage in my blog career, special styling is a must. Therefore, with a new blog, I paste in the many class elements I’ve created into the style.css file - I am posting them below for you to tweak and/or borrow as much as you want (giving back ya know). When I migrate themes, I post this (or parts of it) at the footer and it usually works. Because CSS is “cascading” you can have overlaps/etc so some styles need to be put right under the element they are modifying. Usually I don’t have to do this though. These all worked pasted at the bottom of the Simplr stylesheet. They allow me to make postcards, post-it type posts, specially framed photos, and anything else I can dream up.

/*[[ --- Special Class Styling created by Damien Riley ---]]*/
/*[[ --- DIV: styling a background image and style for entire posts or chunks of posts) ---]]*/

DIV.journal {
padding-top: 100px;
height: auto;
background: url(’images/journal.jpg’) 0% 6px no-repeat;
}

DIV.aside {
margin-bottom: 0px; width: 498px; padding-left: 5px; padding-right: 5px; padding-bottom: 15px;
background-image:url(images/page-curl.gif);
background-color:#ffffcc;
background-position:bottom right;
background-repeat:no-repeat;
}

DIV.thought {
margin-bottom: 0px; width: 498px; padding-left: 5px; padding-right: 5px; padding-bottom: 15px;
background-image:url(images/page-curl.gif);
background-color:#eee;
background-position:bottom right;
background-repeat:no-repeat;
}

DIV.code {
background:#F2F2F2 url(images/code.gif) top left no-repeat;
border-top:1px dashed #CCC;
border-bottom:1px dashed #CCC;
font-family:”Courier New”, Courier, monospace;
padding:5px 10px 5px 30px;
margin-bottom: 15px;
}

DIV.conversation {
margin-top: 1.5em;
margin-bottom: 50px;
border-top: 2px solid #CCE5FF;
border-left: 2px solid #CCE5FF;
border-right: 2px solid #CCE5FF;
width: 496px;
padding: 1px 5px;
margin-bottom: 0px;
font-family: Courier New, Courier, monospace;
font-size: 11px;
background: #E7F3FF;
border-bottom: 2px solid #CCE5ff;
}

DIV.photo {
margin-bottom: 5px;
width: 510px;
height: auto; padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
padding-bottom: 5px;
background: url(’images/photo_bg.gif’);
}

DIV.postcard {
height: auto; padding-left: 10px;
padding-top: 125px;
padding-right: 70px;
font-family: Courier New, Courier, monospace;
background: url(’images/postcards/postcard.jpg’) 0% 6px no-repeat;
padding-bottom:15px;
margin-bottom:15px;
}

DIV.twitterpost {
height: auto; padding-left: 10px;
padding-top: 125px;
padding-right: 10px;
font-family: Courier New, Courier, monospace;
background: url(’images/twitterpost.jpg’) 0% 6px no-repeat;
padding-bottom:5px;
margin-bottom:15px;
}

DIV.video {
background: url(images/spool.gif) top left no-repeat;
padding-left: 45px;
margin-top: 5px;
margin-bottom: 15px;
}

/*[[ --- p and span class styling (for styling lines or paragraphs inside of division styles) ---]]*/

.notepad {
height: auto; padding-left: 10px;
padding-top: 60px;
padding-right: 80px;
font-family: Lucida Console, Fixedsys, monospace;
background: url(’images/notepad.jpg’) 0% 6px no-repeat;
padding-bottom:0px;
margin-bottom:5px;
}

.aside {
margin-bottom: 0px; width: 498px; padding-left: 5px; padding-right: 5px; padding-bottom: 15px;
background-image:url(images/page-curl.gif);
background-color:#ffffcc;
background-position:bottom right;
background-repeat:no-repeat;
}

.thought {
margin-bottom: 0px; width: 498px; padding-left: 5px; padding-right: 5px; padding-bottom: 15px;
background-image:url(images/page-curl.gif);
background-color:#eee;
background-position:bottom right;
background-repeat:no-repeat;
}

.code {
background:#F2F2F2 url(images/code.gif) top left no-repeat;
border-top:1px dashed #CCC;
border-bottom:1px dashed #CCC;
font-family:”Courier New”, Courier, monospace;
padding:5px 10px 5px 30px;
margin-bottom: 15px;
}

.url {
padding-left: 10px; background: url(’images/url_bg.gif’) 0% 6px no-repeat;
}

.conversation {
margin-top: 1.5em; margin-bottom: 50px; border-top: 2px solid #CCE5FF; border-left: 2px solid #CCE5FF; border-right: 2px solid #CCE5FF; width: 496px; padding: 1px 5px; margin-bottom: 0px; font-family: Courier New, Courier, monospace; font-size: 11px; background: #E7F3FF; border-bottom: 2px solid #CCE5ff;
}

.photo {
margin-bottom: 5px; width: 510px; padding-top: 15px; padding-bottom: 15px; background: url(’images/photo_bg.gif’);
}

.postcard {
height: auto; padding-left: 10px;
padding-top: 125px;
padding-right: 70px;
font-family: Courier New, Courier, monospace;
background: url(’images/postcards/postcard.jpg’) 0% 6px no-repeat;
padding-bottom:15px;
margin-bottom:15px;
}

img.center {
display: block;
margin: 5px auto;
border: 5px solid #000;
max-width: 480px;
}

/*[[ --- Archive.php and other special page templates ---]]*/

DIV.pagecontent {
padding-left: 15px;
padding-right: 15px;
}

What kinds of tweaks do you make to your blog? How’s your css hangin’? I help people for free, so if you have questions or want to do something feel free to ask. Are you happy with your current theme? Would you like me to post the best ways to find and tweak themes in future posts?


Related posts

1 Step Gravatars on your WordPress Blog

Monday, November 26th, 2007

Get Gravatars on your WordPress Blog in 1 step

No plugin required! Just one copy/paste in your comments.php file will make gravatars miraculously show up ( for commenters that have gravatar accounts) 1 step:

Directly before: <?php comment_text() ?>

paste:

<?php
if ( !empty( $comment->comment_author_email ) ) {
$md5 = md5( $comment->comment_author_email );
$default = urlencode( 'http://use.perl.org/images/pix.gif' );
echo "<img style='float: right; margin-left: 10px;' src='http://www.gravatar.com/avatar.php?gravatar_id=$md5&size=60&default=$default' alt='' />";
}
?>

SAVE changes.

Voila! You’re done. Easy as pie.

Let me know when you’ve done it and I will head over and test it.

Related posts