One Page Love Logo
Foundation WordPress Theme by Obox
The Top One Page Websites Here are our top 20 picks out of the 79 One Pagers we awarded "Most Loved"in 2013.

Date: November 19, 2012
Category: 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!

Related posts