How To Make Floating Widget

Good morning bloggers, on this occasion I will explain how to create a floating widget on your blog. The point is to create a widget of this drift is located in the code "position: fixed;", this is what makes widget code we seemed to float.

It's how to make the widget:

1. Select a blog on blogger dashboard that you want to edit (if more than one blog). then click the menu to edit the template. before continuing, we should first download our template. so that if an error occurs, we can repeat it again.
2. Then click the button "Edit HTML" button and click "Proceed".
3. After that, look for the code "</ head>" and paste the code below in the code "</ head>".
   
   #widget-floating{margin:10px 0 10px 10px; padding: 4px; background: #eee; background: -moz-linear-gradient(top, rgba(255, 255, 255, .10), rgba(211, 211, 211, .10)); background: -webkit-gradient(linear,left top,left bottom,from(rgba(255, 255, 255, .10)),to(rgba(211, 211, 211, .10))); border: 1px solid #fff;border-radius: 10px;-webkit-border-radius: 10px;-moz-border-radius: 10px;-webkit-box-shadow: #600 0 2px 12px;-moz-box-shadow: #600 0 2px 7px; text-shadow:0 1px 0 #FFFFFF; width:100px; height:auto; position: fixed; top: 200px; left: 2px; font-family: Helvetica, arial, sans-serif; float:left;}
4. Then place the existing code is also below the above code "</ body>"
   <div id='widget-melayang'> Fill in content as you like... </div> 
5. After that clicks save

 Description:

• Green color code can be replaced with a favorite color. Click here to choose a color.
• Yellow color code can be replaced with the desired size in pixels.
• Code orange color or code located on the "top: 200px; left: 2px;" is the placement from the widget. code "top" for measuring the distance from the top, and the code "left" for measuring the distance from the left in pixels. code "top" can be replaced with code "bottom:" (to measure the distance from the bottom) while the code "left" can be replaced with code "right" (to measure the distance from the right).
• Purple color code can be filled with content that will be filled on the blog.

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di CBM