Tutorial Slide Box


Assalammualaikum.
Classic Template

1. Dashboard > Template
2. Ctrl + F to search </style>
3. Copy code below and paste after </style>

<style>.y {border-radius: 0px 15px 15px 0px;width:10px;padding:10px;height:25px;margin-top:30px;margin-left:255px;background: #faafbe;color:white;font-size:12px;-webkit-transition: 1.0s;-moz-transition: 1.0s;}#boxx {position:fixed;border:4px double #000000;width:250px;left:-265px;top:50px;height:100px;padding:4px;text-align:left;font-size:8pt;font-family:trebuchet ms;background-color:white;background-image:url(URLIMG);background-repeat:no-repeat;background-position:right;color:#333333;-webkit-transition: 1.0s;-moz-transition: 1.0s;}#boxx:hover {left:1px;}</style><center><div id="boxx"><div class="y">Y</div><div style="margin-top: -80px;">DESCRIPTION / WORDS HERE</div></div></center>

4. Change where necessary. Preview > Save Template.

Template Designer

1. Dashboard > Layout > Add a Gadget > HTML / Javascript.
2. Paste code below and paste in HTML / Javascript space.
<style>.y {border-radius: 0px 15px 15px 0px;width:10px;padding:10px;height:25px;margin-top:30px;margin-left:255px;background: #faafbe;color:white;font-size:12px;-webkit-transition: 1.0s;-moz-transition: 1.0s;}#boxx {position:fixed;border:4px double #000000;width:250px;left:-265px;top:50px;height:100px;padding:4px;text-align:left;font-size:8pt;font-family:trebuchet ms;background-color:white;background-image:url(URLIMG);background-repeat:no-repeat;background-position:right;color:#333333;-webkit-transition: 1.0s;-moz-transition: 1.0s;}#boxx:hover {left:1px;}</style><center><div id="boxx"><div class="y">Y</div><div style="margin-top: -80px;">DESCRIPTION / WORDS HERE</div></div></center>

cr : nurulatiqahjaidin

8 comments:

  1. Heyyo ! Kak Nafaa. Dah lama kite cri tuto ni. Btw, kite guna eh ?

    ReplyDelete
  2. thank u sgt2 for the tutorials...dah lme sye cari, tapi tak tau ape name benda nih..nasib jumpe ur tutorials..hewhew,,tq n saye guna tau..:)

    ReplyDelete
  3. Akak , boleh tak nak ubah untuk belah kanan ?

    ReplyDelete
  4. I had visited your website which was really good Slide Products

    ReplyDelete

I don't approve harsh comments (: