One Page Love Logo
The Top 20 One Page Websites from 2014
The Top 20 One Page Websites - Here are our Top 20 picks out the 725 we reviewed in 2014. See the list

Date: November 19, 2012
Category: Announcements, Blog
Comments: Comments

Sweet & Subtle – Introducing One Page Love ‘Design Award’ Ribbons!

Below is a little tutorial on how to add a subtle little design award banner to your website! Feel free to hot link the image file, it is hosted on AmazonS3 and optimized to 1kb so load time should be sweet:)

Preview:

One Page Love Award Banner

One Page Love Award Banner Example

Direct image link:

Hot linking is all good!

https://s3.amazonaws.com/onepagelove/one-page-love-award.png

Code

Simply add the HTML in your page just after your first <body> tag, then the CSS in your stylesheet. Make sure you replace the link in the HTML code to the link of your feature.

HTML:

<div class="opl"><a href="http://onepagelove.com/AddYourFeatureLinkHere" target="_blank">Your Site Name featured on One Page Love</a></div>

CSS:

The code below is for the banner to stay visible while the rest of the page content moves when scrolling

.opl {
position:fixed;
top:100px;
left:0px;
z-index:99999;
}
.opl a {
width:73px;
height:56px;
text-indent:-9999px;
display:block;
background:url('https://s3.amazonaws.com/onepagelove/one-page-love-award.png') no-repeat;
}

The code below is for the banner to move with the rest of content when scrolling

.opl {
position:relative;
top:100px;
left:0px;
z-index:99999;
}
.opl a {
width:73px;
height:56px;
text-indent:-9999px;
display:block;
background:url('https://s3.amazonaws.com/onepagelove/one-page-love-award.png') no-repeat;
}

Feel free to modify/tweak/add your own!