1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

How to make this little box - screen inside

Discussion in 'Blogging' started by Brithos10, Oct 28, 2015.

  1. Brithos10

    Brithos10 Regular Member

    Joined:
    Jan 15, 2014
    Messages:
    373
    Likes Received:
    47
    Location:
    Italy
    Hey BHW

    I'm currently working on a big Amaz Aff site so i'm always looking for new tips to boost my conversions...

    I've seen some sites in my niche are using this little box for amaz affiliate but i don't think it's coming from Amazon Aff tools.

    I'm using WP, so if someone can point me in the right direction how can i replicate this box, i will really appreciate.


    Little box.png
     
  2. roadhamster

    roadhamster Regular Member

    Joined:
    Mar 12, 2012
    Messages:
    348
    Likes Received:
    248
    I dunno the plugin or if it's a plugin, but it's nothing more than a little html-div with an image, some text, a little html-markup, and a aff-link ofcourse. With a little html knowledge you can create your own, and if you connect it to the amazon-api with some php you can do some more nice things.
     
    • Thanks Thanks x 1
  3. Brithos10

    Brithos10 Regular Member

    Joined:
    Jan 15, 2014
    Messages:
    373
    Likes Received:
    47
    Location:
    Italy
    I've found some resources here but it's not good enough for my needs..

    There's still someone that can actually tell me how to make a similar one ?

    Thanks
     
  4. blogzandstuff

    blogzandstuff Elite Member

    Joined:
    Jan 1, 2015
    Messages:
    6,422
    Likes Received:
    3,002
    Occupation:
    blog creator
    Location:
    UK
    Looks like a a simple css text box that is good for advertising or alerting your readers to a promotion or a particular point you want to make, you could have a product or service you are selling for example. You can position a simple css text box anywhere in a post or page, just add the class to the text and it will highlight it in a styled box.
    In your child theme style sheet add the code below
    .textbox{padding:2px 6px 4px 6px; color: #000; background-color: #fff; border: 1px solid #000;border-bottom:3px solid #000; border-radius:5px;}
    Then in your post or page add this <p class="textbox">ADD YOUR TEXT HERE</p>
    Change the " ADD YOUR TEXT HERE " to whatever text and change the colour to whatever you want. If you want to add a simple css text box to some existing text then just put <p class="textbox"> before the first word and </p>
    after the last word of the text you want in the box.


    You can also use a plugin called easyazon which automatically does it
     
    • Thanks Thanks x 1
  5. Brithos10

    Brithos10 Regular Member

    Joined:
    Jan 15, 2014
    Messages:
    373
    Likes Received:
    47
    Location:
    Italy
    Thanks for the usefull post.

    Where i need to add the code in css style ? Head ? Footer ?
     
  6. blogzandstuff

    blogzandstuff Elite Member

    Joined:
    Jan 1, 2015
    Messages:
    6,422
    Likes Received:
    3,002
    Occupation:
    blog creator
    Location:
    UK
    The code goes in your style sheet, you are using css for the box so add it there and edit the code for colours, line thickness etc
     
  7. Brithos10

    Brithos10 Regular Member

    Joined:
    Jan 15, 2014
    Messages:
    373
    Likes Received:
    47
    Location:
    Italy
    I've succesfully added your box css code in my sites. Now i'm going to learn more about CSS and how can i implement more design on this box! Thanks for pointing me in the right direction
     
  8. blogzandstuff

    blogzandstuff Elite Member

    Joined:
    Jan 1, 2015
    Messages:
    6,422
    Likes Received:
    3,002
    Occupation:
    blog creator
    Location:
    UK
    No problem i am glad it helped. CSS can do so much, you can make animations, control images, change whole look of a site. Enjoy your CSS