Below is a little tutorial on how to add a subtle award ribbon to your website. Feel free to hot link the image file. The ribbon is hosted on AmazonS3 and optimized so load time should be swift:)
ps. head here if you are after Printable Award Certificates
Ribbon Previews:
Direct Ribbon image links:
Left aligned Retina ribbon:
http://ift.tt/2k3MFZ9
Right aligned Retina ribbon:
http://ift.tt/2kmR7Qy
Left aligned non-Retina ribbon:
http://ift.tt/2k3MFs7
Right aligned non-Retina ribbon:
http://ift.tt/2kmOiic
Code
Simply add this HTML code in your page just after your first <body> tag, then the CSS to 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://ift.tt/2k3LFnO" target="_blank">Your Site Name featured on One Page Love</a></div>
CSS for fixed position:
The code below is for the ribbon 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('http://ift.tt/2k3MFZ9') no-repeat;
background-size: 100%;
}
CSS for non-fixed position:
The code below is for the ribbon 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('http://ift.tt/2k3MFZ9') no-repeat;
background-size: 100%;
}
Feel free to modify or add your own!
Help? rob@onepagelove.com
by Rob Hope via One Page Love
No comments:
Post a Comment