Make the Banner Floated left or Right Blog-perhaps PAL ever seen a blog put up a banner in the left or right side of the blog. That is, the banner remained silent in place even though the mouse scroll down. In terms of another is called fixed banner.
The
idea of this post, I get when visiting the web muslim.or.id, there is a
banner sales book that leads to pustaka.muslim.or.id. From there appeared the idea to create this post. While it may have been a lot of tutorials like this one, with a different code. To see the appearance and demo please see images below.
The banner is installed, can point to our business, or leading to the posting that want always on show. Okay, look how easy the sob!
Make the Banner Floated left or Right Blog
In
this tutorial I provide 2 alternate with "Add Widget HTML/JavaScript"
or "Edit HTML in the Template", please select which like:)
A. By Adding Widgets
Create a new HTML/JavaScript widgets, edit and save this code
< style type = "text/css" >
#fixedbanner {
position: fixed;
top: 160px; /* The distance from the top */
right: 0; /* If you want to replace the right hand right into the left */
}
</style>
< div id = ' fixedbanner ' >
< a href = ' Destination URL ' title = ' title ' > < img alt = ' fixedbanner ' src = ' Banner URL '/> </a>
</div>
B. with the Edit HTML in a Template
1. Login to Blogger
2. click the Template--> Edit HTML
3. save this code above]] > </b: skin >
#fixedbanner {
position: fixed;
top: 160px; /* The distance from the top */
right: 0; /* If you want to replace the right hand right into the left */
}
4. Edit and save this code above </body>
< div id = ' fixedbanner ' >
< a href = ' Destination URL ' title = ' title ' > < img alt = ' fixedbanner ' src = ' Banner URL '/> </a>
</div>
5. save the Template.
C.Add Mark Close (X)
If want to add a Close (X) as in the demo, add this code before < div id = ' fixedbanner ' >
<
a href = ' # ' onclick = ' var el = document. getElementById
(' fixedbanner '); el. parentNode. removeChild (el); '
style = ' right: 5px; position: absolute; top: 5px; z-index: 99; ' >
< img alt = ' ' src = '
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicAwAdAgt5gd-JVz4rv2yOstqoNhwGTd8kl2XRJGBP70t-lhkvwc1tSl5Yhyirn5nrOkZJvaA07-ZOPQ4YcGa94VX_WUtSQRGBSKxq1lE4cn9Ge4FiC2XA3fYkF0f2-eeNcUYhIdXy-wo/s1600/delete2.png
'/> </a>
the end result being:
< div id = ' fixedbanner ' >
<
a href = ' # ' onclick = ' var el = document. getElementById
(' fixedbanner '); el. parentNode. removeChild (el); '
style = ' right: 5px; position: absolute; top: 5px; z-index: 99; ' >
< img alt = ' ' src = '
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicAwAdAgt5gd-JVz4rv2yOstqoNhwGTd8kl2XRJGBP70t-lhkvwc1tSl5Yhyirn5nrOkZJvaA07-ZOPQ4YcGa94VX_WUtSQRGBSKxq1lE4cn9Ge4FiC2XA3fYkF0f2-eeNcUYhIdXy-wo/s1600/delete2.png
'/> </a>
< a href = ' Destination URL ' title = ' title ' > < img alt = ' fixedbanner ' src = ' Banner URL '/> </a>
</div>
Hopefully useful ...
http://amazoassociates.blogspot.com
No comments:
Post a Comment