dina's storylineʕ•ᴥ•ʔ: Slide Cbox (Tumblr)

#FANFIksi Refresh Author Stuff buddies

Slide Cbox (Tumblr)


↓ STEP 1 If you haven’t got a chatbox yet, make an account here.
↓ STEP 2 Open your chatbox account. In the Look & Feel tab at the top, go to Layout options. For this tutorial, we’re using this chatbox size:190px (width) and 300px (height). Save at the bottom.
↓ STEP 3 You can change the colours in the Colours & fonts if you wish at this point.
↓ STEP 4 Go to Publish at the top, and keep the cbox website tab open in your browser. We will copy the chatbox HTML coding later.
↓ STEP 5 Copy this code.<link href='http://fonts.googleapis.com/css?family=Codystar'rel='stylesheet' type='text/css'>
↓ STEP 6 Go to Customize Theme, and then Edit HTML. Paste the codeAFTER the <head> line of code. It will be at the top of the Custom CSS.
↓ STEP 7 Then copy this entire code (This places the chatbox in the bottom left corner as you can see in the preview.):
#cboxdiv {z-index: 9999;position: fixed;bottom: -300px;left: 20px;-webkit-transition: all 1s ease-in-out;-moz-transition: all 1s ease-in-out;-o-transition: all 1s ease-in-out;transition: all 1s ease-in-out;}#cboxdiv:hover {bottom: 0px;}#cboxtitle {text-align: center;font-size: 20px;font-family: codystar;letter-spacing: 8px;color: #fff;text-shadow: 1px 1px 1px #fff;width: 180px;background-color: #aaa;padding: 3px 5px 5px 5px;border-top-left-radius: 10px;border-top-right-radius: 10px;}
↓ STEP 8 Return to the customizer, and click anywhere within the coding space. Use CTRL + F (Windows) or Cmd + F (Mac) to find <style type=”text/css”>. Paste the coding you've just copied AFTER<style type=”text/css”>.
↓ STEP 9 And then copy this coding:<div id="cboxdiv"><div id="cboxtitle">CHATBOX</div>YOUR CBOX CODE</div>
↓ STEP 10 Return to the customizer, and click anywhere within the coding space. Use CTRL + F (Windows) or Cmd + F (Mac) to find <body>. Paste the coding you've just copied AFTER <body>.
↓ STEP 11 Go back to your chatbox website. Replace YOUR CBOX CODE with the chatbox HTML code you have from that website. Once you have done that, REMOVE THE FOLLOWING CODE from the cbox code you’ve just pasted in:<div id="cboxdiv"style="text-align: center; line-height: 0">
↓ STEP 12 Click Update Preview, and Save at the top. And then Exit out of the customizer.TO MOVE THE CHATBOXChange the value of left: 20px;. The higher the value, the more right it will go across the blog.
FULL CREDITS-COCORINI

Tidak ada komentar: