Viewing Instagram badge HTML
Instagram badge HTML
|
User: Anita W. 8 years ago
|
|
|
I am brand spankin' new to EW. I added an HTML snippet for an Instagram badge, but it disappears when I remove focus on the box. It is an empty box. What am I doing wrong? This is the HTML I am using, per the Instagram website: [code]<style>.ig-b- { display: inline-block; } .ig-b- img { visibility: hidden; } .ig-b-:hover { background-position: 0 -60px; } .ig-b-:active { background-position: 0 -120px; } .ig-b-48 { width: 48px; height: 48px; background: url(//badges.instagram.com/static/images/ig-badge-sprite-48.png) no-repeat 0 0; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { .ig-b-48 { background-image: url(//badges.instagram.com/static/images/ig-badge-sprite-48@2x.png); background-size: 60px 178px; } }</style> <a href="https://www.instagram.com/shiphranita/?ref=badge" class="ig-b- ig-b-48"><img src="//badges.instagram.com/static/images/ig-badge-48.png" alt="Instagram" /></a>[/code] |
|
|
User: Roddy 8 years ago
|
|
|
The styles have been written so that the image only appears on hover. To change this you edit this ... .ig-b- img { visibility: hidden; } ... to this ... .ig-b- img { visibility: visible; } Also, you don't put all the code into an HTML snippet. Paste this into the Head Code box in the page inspector... <style>.ig-b- { display: inline-block; } .ig-b- img { visibility: visible; } .ig-b-:hover { background-position: 0 -60px; } .ig-b-:active { background-position: 0 -120px; } .ig-b-48 { width: 48px; height: 48px; background: url(//badges.instagram.com/static/images/ig-badge-sprite-48.png) no-repeat 0 0; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { .ig-b-48 { background-image: url(http://badges.instagram.com/static/images/ig-badge-sprite-48@2x.png); background-size: 60px 178px} </style> Paste this into an HTML Snippet widget... <a href="https://www.instagram.com/shiphranita/?ref=badge" class="ig-b- ig-b-48"><img src="http://badges.instagram.com/static/images/ig-badge-48.png" alt="Instagram" /></a> ------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
| Post Reply |
| You must login or signup to post. |