Thank you so much, that indeed got me pointed in the right direction. Here’s what I did in case anyone else would like buy now buttons in their posts.
I visited http://www.bestcssbuttongenerator.com/#/n8Rgg1tdWz and created my button.
I named my button BenjiButton. Obviously anyone can name it whatever they like.
I generated the following code using the generator. And then inserted it under Theme Panel/YOUR CUSTOM CSS/
.BenjiButton {
-moz-box-shadow:inset 0px 1px 0px 0px #fff6af;
-webkit-box-shadow:inset 0px 1px 0px 0px #fff6af;
box-shadow:inset 0px 1px 0px 0px #fff6af;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffec64), color-stop(1, #ffab23));
background:-moz-linear-gradient(top, #ffec64 5%, #ffab23 100%);
background:-webkit-linear-gradient(top, #ffec64 5%, #ffab23 100%);
background:-o-linear-gradient(top, #ffec64 5%, #ffab23 100%);
background:-ms-linear-gradient(top, #ffec64 5%, #ffab23 100%);
background:linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffec64', endColorstr='#ffab23',GradientType=0);
background-color:#ffec64;
-moz-border-radius:42px;
-webkit-border-radius:42px;
border-radius:42px;
border:1px solid #ffaa22;
display:inline-block;
cursor:pointer;
color:#333333;
font-family:arial;
font-size:25px;
font-weight:bold;
padding:10px 37px;
text-decoration:none;
text-shadow:0px 1px 0px #ffee66;
}
.BenjiButton:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffab23), color-stop(1, #ffec64));
background:-moz-linear-gradient(top, #ffab23 5%, #ffec64 100%);
background:-webkit-linear-gradient(top, #ffab23 5%, #ffec64 100%);
background:-o-linear-gradient(top, #ffab23 5%, #ffec64 100%);
background:-ms-linear-gradient(top, #ffab23 5%, #ffec64 100%);
background:linear-gradient(to bottom, #ffab23 5%, #ffec64 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffab23', endColorstr='#ffec64',GradientType=0);
background-color:#ffab23;
}
.BenjiButton:active {
position:relative;
top:1px;
}In all my posts at the bottom, I inserted the code:
<p style="text-align: center;"><a title="BUY NOW for $85.99" href="http://www.mywebsitedomain.c0m" rel="nofollow"><span class="BenjiButton">BUY NOW for $85.99</span></a></p>
The result is a great button. Thanks for your help.
I just viewed the newspaper demo (http://demo.tagdiv.com/newspaper/), and noticed the banner for the desktop is 728 x 90.
When viewing it on ipad portrait mode I see that it is 468 x 60.
My problem is that I have not put in the 468 x 60 code.
I assume this is the correct code:
<div class="td-visible-desktop">
</div>
<div class="td-visible-tablet-l">
</div>
<div class="td-visible-tablet-tp">
</div>
<div class="td-visible-phone">
</div>
And that code goes in ads/header ad ?
Thank you Emil!
I dropped the following code into the post:
<div class="wrapper">
<div class="ribbon-wrapper-green"><div class="ribbon-green">$85.99</div></div>
</div>I also only used this part of the code:
.ribbon-wrapper-green {
width: 85px;
height: 88px;
overflow: hidden;
position: absolute;
top: 52px;
right: -2px;
}
.ribbon-green {
font: bold 15px Sans-Serif;
color: #333;
.ribbon-green {
font: bold 15px Sans-Serif;
color: #333;
text-align: center;
text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
position: relative;
padding: 7px 0;
left: -5px;
top: 15px;
width: 120px;
background-color: #BFDC7A;
background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45));
background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -moz-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -ms-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: -o-linear-gradient(top, #BFDC7A, #8EBF45);
color: #6a6340;
-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
}
.ribbon-green:before, .ribbon-green:after {
content: "";
border-top: 3px solid #6e8900;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
position:absolute;
bottom: -3px;
}
.ribbon-green:before {
left: 0;
}
.ribbon-green:after {
right: 0;
}It seems to work. I adjusted the position slightly.
The problem that I have, is that some of the featured images seems to be different sizes? Thus the ribbon seems off on some pics.
Also how can this also be put on the thumbnails?
Thank you
OMG!
What is going on here?
Just did a site search in google and noticed a bunch of these pages/posts have been indexed. How is this possible?
I’m using Yoast. And have my permalinks done right, why are these showing up in the engine?
http://www.mydomain.com/td_d_slug_4/page/4/
http://www.mydomain.com/td_d_slug_5/
and many others, they shouldn’t be published…. they are not in the ste map..
please what is going on? If this is demo post content how is it being spidered? when it is not published?
NOTE: looks like I left some of the pages demo content published, that i can fix..but where are the other posts slugs coming from? I don’t see any demo post content?
thank you
