NEW Amazon & Twitter Graphics to Choose From

Lots of girls seem to love the Amazon & Twitter graphics that highlight when you hover the cursor over them. 

So I thought I'd make them in a few different colors to choose from.

Edit the bold red text before pasting this HTML code in the about me section on the edit profile page.

<div class="link-amazon">
<a href="Your wishlist url" target="_blank">Amazon Wishlist</a>
</div>
<div class="link-twitter">
<a href="http://twitter.com/Your_Twitter_user_name" target="_blank">Twitter</a>
</div>

CSS Code:

.link-amazon a { display:block; width:258px; height:140px; float:left; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggruNnTUTEoaY2k2d2ni9MxUhXh_Tof0mxnpMgqWKL9An6u7r-gy0q2WgNn_SX9Aya5LRtjNcZe7RgFe2hbHzU2Gv2DVTCQuZEEEIN3rfu8Rw9JCP0BUfcpnwcuTSPjbapofnjpOP1MDs/s1600/amazon_blue.png) no-repeat; position:relative; margin:215px 0 0 -185px; text-indent:-3000px; } .link-amazon a:hover { background-position:0 -140px; }

CSS Code:

.link-amazon a { display:block; width:258px; height:140px; float:left; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJBme4Rs7BI5gGH3pNNYbSe6yqDMH50PmXg9hQdxicDwx6rbfExfmuliiq3vJv3faEoWFF_B8Bng6DoSPYTdWKzJdxjoLu0SuYYf4q4_nciCkdeMUBmiBMWNx8M5TgFPxW_whLXs8yzV4/s1600/amazon_gold.png) no-repeat; position:relative; margin:215px 0 0 -185px; text-indent:-3000px; } .link-amazon a:hover { background-position:0 -140px; }

CSS Code:

.link-amazon a { display:block; width:258px; height:140px; float:left; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj629uZEB_weSmDRUuLBATDnpkbuR2HRSS8uEm_d-CakE3nh45Mq2G6MAwNrYpKBRnM53hQ_fuaL533xWyhOs8Iop54yfu9wQ4LEoAL_rZ1Co8eQVexQPDD7TqjHLVrTLXiwotxp2UsvuI/s1600/amazon_pink.png) no-repeat; position:relative; margin:215px 0 0 -185px; text-indent:-3000px; } .link-amazon a:hover { background-position:0 -140px; }

CSS Code:

.link-amazon a { display:block; width:258px; height:140px; float:left; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPMDNOG3z9o_UJ0zyDf_lHucZXptieWHYIsUlnS7k6IxrnP19pZ2fbu6KiyCnl51fPgk1qAbcylL9NhXM33tzhPEwSHIZqmF1ICBBCafoXdX1p4-h5B3rcotXf7qvdSbGfjkD_LWxaEK4/s1600/amazon_purple.png) no-repeat; position:relative; margin:215px 0 0 -185px; text-indent:-3000px; } .link-amazon a:hover { background-position:0 -140px; }

CSS Code:

.link-twitter a { display:block; width:249px; height:160px; float:left; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjxsm3Po5FUhfDZNve-4dNnxPVn7rnmhCb6UUgdeiFWYotB46shRpshFBL4bWoLafbu9OQ3vnlLgabvGIUEB3ewIyID8CB2TuXxlVQtHUDT1R6BREp2B4FjAKQ4PJH_-ZSjOcNBDlJ4ok/s1600/twitter_blue.png) no-repeat; position:relative; margin:215px 0 0 -5px; text-indent:-3000px; } .link-twitter a:hover { background-position:0 -160px; }

CSS Code:

.link-twitter a { display:block; width:249px; height:160px; float:left; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyyuxaa41tccY0eoB1TSC67ipAi9jv-TxYOJmkuloR5Zv6Ghv3J1QrKzaHmVTyCqB5vwebfdCne2DxPaWtTcon5m_-sMISLLQ6vHK6BLPxKbhBIFJyDCBnwt0_Dc82BGiYCvytc6rD8Lc/s1600/twitter_gold.png) no-repeat; position:relative; margin:215px 0 0 -5px; text-indent:-3000px; } .link-twitter a:hover { background-position:0 -160px; }

CSS Code:

.link-twitter a { display:block; width:249px; height:160px; float:left; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFLDNL1LFZ0Q56hm6CE8hueQn5xKRjcLnaGRi5brUEcq0WBYYKDJEdUfnLshOEBko2Yy7BJkUsYg9uAj399OPCwPPaCcIlVFuvupm3MJtETC0Xpehnp0ogkU2mWL6-FLt-368MhVHBBB0/s1600/twitter_pink.png) no-repeat; position:relative; margin:215px 0 0 -5px; text-indent:-3000px; } .link-twitter a:hover { background-position:0 -160px; }

CSS Code:

.link-twitter a { display:block; width:249px; height:160px; float:left; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxruIAYzYGg03cMDEGjkEKzj7p_14S7raMuL5J32mEXf515v8yJY2ZZ3_JKDeUl-gBpyjaxaiPmgYdEYgjYV4NrqNZf3bE2id4jEjG3_4ChpDSovRKwJOx7Kjx5OT9GEq9m1nz6ZRZKSM/s1600/twitter_purple.png) no-repeat; position:relative; margin:215px 0 0 -5px; text-indent:-3000px; } .link-twitter a:hover { background-position:0 -160px; }

Add this to your Clips4Sale Store

New image/link effect I put together to add to your clips4sale store

Amazon, Twitter, and Tumblr clickable icons,
the colors invert when you scroll over them with your mouse,

Paste the HTML code where ever on your page that you want it to show up. (Change the highlighted links to your specific URL)

HTML Code:

<div style="text-align: center;">

<a href="http://www.amazon.com/" target="_blank"><img alt="http://www.amazon.com/" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiikugKVjUHqNQ1Iv0UmpLf4oG6-GAk8qf7bifso3WY03kKBYGCFBLrGGngFQfTth44k7IvPC0LO4r9WOBBxfk8v5YOI8OYuE1dZrkTZI7Njnfe4aHoNbNIa8Z2dvXJd8YyWLdH-knF3X8/s1600/amazon-logo-8.png" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiikugKVjUHqNQ1Iv0UmpLf4oG6-GAk8qf7bifso3WY03kKBYGCFBLrGGngFQfTth44k7IvPC0LO4r9WOBBxfk8v5YOI8OYuE1dZrkTZI7Njnfe4aHoNbNIa8Z2dvXJd8YyWLdH-knF3X8/s1600/amazon-logo-8.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3OJju0UI7fMNy9FtnpWE8QvgKbEdTT8PO10ZqnO0oFksD1sPHfmIPmGW1QZRpDbZya2nkJlrhgrAgEn-iTKaT_KAylKdHqq-nZ2YOP1XF7M_4Bv4V8eiT5gEbWnfqZ1ukxB5o1w6q4bM/s1600/amazoninvert.png'" /></a>

<a href="https://twitter.com/" target="_blank"><img alt="https://twitter.com/" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg6rLQLvOUDU141Dole56C8GBBSi0iJ-phi5-kbCdT0HS_JkBcC7vPrG0PuByk2M4AV-qzb7L3itsIJSg08r8asbPxmWDr2Hkb570mZbFAPTr4w_PppC37ptOk_L2Vwq6Kv42WWyjQb10/s1600/twitter+(1).png" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg6rLQLvOUDU141Dole56C8GBBSi0iJ-phi5-kbCdT0HS_JkBcC7vPrG0PuByk2M4AV-qzb7L3itsIJSg08r8asbPxmWDr2Hkb570mZbFAPTr4w_PppC37ptOk_L2Vwq6Kv42WWyjQb10/s1600/twitter+(1).png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrqBvEFhaksY0l2kNM9WG-LI46cOu6taksAKIbQGv5-jIXcYzgkPcECMhIz4cwlLcPdlf5KnhZGvzJOKDh6x9op6zQThT3nGAKi4Di-YnBwKqzbnGJA5Kx_oLfoEVcNVPO6xEq1EELqC8/s1600/twitterinvert.png'" /></a>

<a href="http://tumblr.com/" target="_blank"><img alt="http://tumblr.com/" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3MTP_NddKm6p7glacFTm9ohq_d7ff9c7Rpb4-aaInHIBZ6BTUlXV5MgeRjchLxP9QC61-sEZmB8kXv5DERNMvCfgrudjC-D9iuLCr8JKdmq5P09lpkm0OuhQ9IssIIYIWF8q-DfsdSnI/s1600/tumblr.png" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3MTP_NddKm6p7glacFTm9ohq_d7ff9c7Rpb4-aaInHIBZ6BTUlXV5MgeRjchLxP9QC61-sEZmB8kXv5DERNMvCfgrudjC-D9iuLCr8JKdmq5P09lpkm0OuhQ9IssIIYIWF8q-DfsdSnI/s1600/tumblr.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFYbsU5J0Cp1EEzSwUSZ2073D3J9gHBzYpJUjvEpDXG3kkUAVMZsn_ObPmn0aufiGOevSZbP_qCY4_opkVJpGaMzQE7IiMZNvKXcrI7hTp3qaWeY7te3sSfkgu-5u7K_1xXiIY6ikffnU/s1600/tumblrinvert.png'" /></a> </div>

Cool New Navigation Bar

Here's a screen cap of what it looks like:

Here's an example of the navigation images normal:

Here's what it looks like when you hover over them:

To get the code click here.

Amazon, Instagram, & Twitter Twirling Transition Effect

If you would just like to use the amazon, instagram, and twitter link effects that are in the last post, but not the whole profile layout; here's where you can find the code...

https://gist.github.com/anonymous/7956163


See it in action here:
http://codepen.io/pokerbabe69mfc/full/zbHxu

Highlighted Twitter & Amazon Links

This summary is not available. Please click here to view the post.

Personalized 3D Black Navigation Bar

This summary is not available. Please click here to view the post.

To make your link image change when you scroll over it with your cursor:

If you look at my premium MFC account profile you'll see that I have a image that links to my amazon wishlist that looks like this,



but when you scroll over it, it changes to this,




What you want to do is add this css code in the "customize profile" section:
(note: I highlighted the parts in red that you need to change if you want to change the link and the images)

.amazonlink{
     width: 500px;
     height:166px;
     display:block;
     background:transparent     url('http://25.media.tumblr.com/143165aafabe89068970153c6a0de7ef/tumblr_mqojnoBvEl1rjl0hwo2_500.jpg') center top no-repeat;
}
.amazonlink:hover {
   background-image:url('http://24.media.tumblr.com/65e9059f9021a11b7177b532881223cd/tumblr_mqojnoBvEl1rjl0hwo1_500.jpg');
}


Then you want to add this html code in the "edit profile" section where ever you want your images to appear on your profile,
(note: the part highlighted in red is where you want to paste your link instead)


'amazonlink' title='amazonlink'>