How to create "Call to Action" tab below the post?

Hi, I would like to create a call to action tab below the post as what this site doing.

http://gadgetviper.com/transcend-esd400-external-ssd-review/

The “Buy Online” tab below the post.

May I know how to do this? Any shortcode to call this tab?

Thanks.

Hi, I’m glad you like it Mabrel, it’s actually just good old fashioned html and css. I don’t actually use VC on posts, I think I read somewhere that it slows the page down, not sure if that’s true or not.

I just cut and paste the html into the post and edit the link.

@GadgetViper

For the same reason, I’ve been using the custom HTMl code for product boxes, which is pretty inconvenience to edit for each of the product.

Hi GadgetViper,

I really like it.

Can you share the example of html you use for me to refer?

I would like to do the call action box without VC.

Thanks.

Best Regards.

Well I’m certainly no web design purist, I just fiddle around with it until it looks as good as I can get it, but here is what I use, it could probably be improved and refined.

HTML
———————

<div class=”block-title”><span>Buy Online </span></div>
<div class=”link”>PRODUCT</div>
<div class=”link”>VENDOR</div>
<div class=”link”>reviews (100)</div>
<div class=”link”>price: £200.00 £100.00</div>
<div class=”link-view”>view</div>

CSS
—————-

.link {
border-right: 1px dotted lightgray;
display: block;
float: left;
padding: 2px 10px 2px 10px;
font-family: “Roboto”,sans-serif;
font-size: 12px;
text-transform: uppercase;
}

.link-view a {
background-color: #5aaf0b;
color: #fff;
display: block;
float: left;
font-family: “Roboto”,sans-serif;
font-size: 12px;
font-weight: 700;
margin-left: 15px;
padding: 2px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 75px;
}

By the way, I should mention it doesn’t collapse up that well when viewed on smaller screens, I’ve sort of replaced it with a new design that seems to work better over all platforms:

http://gadgetviper.com/foldable-keyboard-full-size-bluetooth/

Best of luck..

• This reply was modified 10 years by GadgetViper.

Hi, thank you so much.