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 Preview:
Direct Ribbon links:
Left-aligned SVG ribbon:
http://ift.tt/2oEQ3cN
Left-aligned Retina PNG ribbon:
http://ift.tt/2k3MFZ9
Right-aligned Retina PNG ribbon:
http://ift.tt/2kmR7Qy
Left-aligned non-Retina PNG ribbon:
http://ift.tt/2k3MFs7
Right-aligned non-Retina PNG ribbon:
http://ift.tt/2kmOiic
Quick Embed Code
Simply add this HTML code in your page just after your first <body> tag.
Make sure you replace the link to your feature link.
<a href="https://onepagelove.com" style="display: inline-block; position: fixed; left: 0; top: 100px; z-index:999999;"><img width="73" height="56" src="http://ift.tt/2k3MFZ9" srcset="http://ift.tt/2k3MFs7 1x , http://ift.tt/2k3MFZ9 2x"></a>
Cleaner 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:
<a href="https://onepagelove.com" class="opl"><img width="73" height="56" src="http://ift.tt/2k3MFZ9" srcset="http://ift.tt/2k3MFs7 1x , http://ift.tt/2k3MFZ9 2x"></a>
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 {
display: inline-block;
position: fixed;
left: 0;
top: 100px;
z-index:999999;
}
CSS for non-fixed position:
The code below is for the ribbon to move with the rest of content when scrolling
.opl {
display: inline-block;
position: relative;
left: 0;
top: 100px;
z-index:999999;
}
CSS for Right align position:
The code below is for the ribbon to move with the rest of content when scrolling
.opl {
display: inline-block;
position: relative;
right: 0;
top: 100px;
z-index:999999;
}
Feel free to modify or add your own!
Help? rob@onepagelove.com
by Rob Hope via One Page Love
No comments:
Post a Comment