Z59 NEWS & STORIES: How to Position your Picture anywhere on Blogger Background

If you want to position a photo and make it float anywhere on your blogspot's background that is possible by simply using this code. Just follow these enumerated instruction and you will be delighted of its look on your blog.

Here's how;

Log-in to your blogger account
Select the blog that you wish to customized.
On the left set of tabs, click Theme
Click the drop sown arrow on te CUSTOMIZE box
On the drop down tab click on Edit HTML
Type this HTML code after the <head></head>

7. It must be inside the body. (please see example below; add the code that are highlighted in color yellow)

<body>

<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>

<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'>

<b:includable id='main'><script type="text/javascript">

function setAttributeOnload(object, attribute, val) {

if(window.addEventListener) {

window.addEventListener('load',

function(){ object[attribute] = val; }, false);

} else {

window.attachEvent('onload', function(){ object[attribute] = val; });

}

</script>

gapi.load("gapi.iframes:gapi.iframes.style.bubble", function() {

if (gapi.iframes && gapi.iframes.getContext) {

gapi.iframes.getContext().openChild({

url: 'https://www.blogger.com/navbar.g?targetBlogID\x3d4452017802081974483\x26blogName\x3dPage+Impressions\x26publishMode\x3dPUBLISH_MODE_BLOGSPOT\x26navbarType\x3dBLUE\x26layoutType\x3dLAYOUTS\x26searchRoot\x3dhttps://pageimpressions.blogspot.com/search\x26blogLocale\x3den\x26v\x3d2\x26homepageUrl\x3dhttp://pageimpressions.blogspot.com/\x26vt\x3d-4539045759770711905',

where: document.getElementById("navbar-iframe-container"),

id: "navbar-iframe"

});

}

});

</script><script type="text/javascript">

(function() {

var script = document.createElement('script');

script.type = 'text/javascript';

script.src = '//pagead2.googlesyndication.com/pagead/js/google_top_exp.js';

var head = document.getElementsByTagName('head')[0];

if (head) {

head.appendChild(script);

}})();

</script>

</b:includable>

</b:widget>

</b:section>

<div style='position:absolute;top:75px;left:360px'>

</div>

</body>

8. The highlighted red texts's value can be change to your desired sizes and appearance.

9. You can adjust the <div style='position:absolute;top:75px;left:360px'> value of the top and left according to the position or location of the photo.

The picture above is th screenshot of this HTML code

But if you tap Ctrl + (+) to zoom in the image will be displaced.

You may use other HTML code to fix this.

How to Position your Picture anywhere on Blogger Background

No comments: