How to add 2 float banner between blog body [blogger] Updated

Updated 
Due to requests from members who support KHMERWING want us to show how to make floating banner between blog body 2 widget. So, I will show how to do the following :

How to add the scrolling banner  bar:

Step 1 . Log in to your Blogger Dashboard, select your blog and go to Layout
Step 2. Click on Add A Gadget link

Step 3. From the pop-up window, scroll down and select HTML/Javascript

Step 4. Copy the code below and paste it inside the empty box

Step 5. Save the gadget

The code to copy-paste

<style type="text/css">
#khmer-wing {
position:fixed;
bottom:15%; 
margin-left:-800px;
float:left;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
background-color:#fff;
padding:0 0 2px 0;
z-index:10;
}
#khmer-wing .button-share {
float:left;
clear:both;
margin:5px 5px 0 2px;
}
#khmer-wing2 {
position:fixed;
bottom:15%; 
margin-left: 310px;
float:right;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
background-color:#fff;
padding:0 0 2px 0;
z-index:10;
}
#khmer-wing2 .button-share {
float:right;
clear:both;
margin:5px 5px 0 2px;
}
</style>
<div id='khmer-wing' title="Get this from khmerwing.com">
<div class='button-share' id='like' style='margin-left:7px;'>

<a target="_blank" href="http://khmerwing.com">
<img alt="khmerwing" src="http://4.bp.blogspot.com/-MtW2aBFr7-Y/UvRRDHiGc2I/AAAAAAAAB6E/VSS9lL5ovoI/s1600/khmerWing.png" />
</a></div>
<div style="clear: both;font-size: 9px;text-align:center;">Get <a style="color: #3399BB;" href="http://khmerwing.com/">widget</a></div></div>
<div id='khmer-wing2' title="Get this from khmerwing.com">
<div class='button-share' id='like' style='margin-left:7px;'>

<a target="_blank" href="http://khmerwing.com">
<img alt="khmerwing2" src="http://4.bp.blogspot.com/-MtW2aBFr7-Y/UvRRDHiGc2I/AAAAAAAAB6E/VSS9lL5ovoI/s1600/khmerWing.png" />
</a></div>

<div style="clear: both;font-size: 9px;text-align:center;">Get <a style="color: #3399BB;" href="http://khmerwing.com/">widget</a></div></div>

Customization:

=> Just change image url on Red link: http://4.bp.blogspot.com/-MtW2aBFr7-Y/UvRRDHiGc2I/AAAAAAAAB6E/VSS9lL5ovoI/s1600/khmerWing.png

Vertical alignment - Change the 15% value of bottom. The code positions the Banner bar relative to the bottom of your browser window. To fix the distance even when window is resized, specify the value in px (pixels) instead of %.
Horizontal alignment - Change the left-850px value from margin-left.Change the right 310px value margin-. Negative value pushes the button to the left of the main blog column, positive value pushes it to the right. Increase or decrease the value based on your needs.
Enjoy!!! :) Thanks for support KhmerWing or KhmerBlogger.
Sorry for my bad English.

Posted by Best Skills

Tweet