▼

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;
  1. Log-in to your blogger account
  2. Select the blog that you wish to customized.
  3. On the left set of tabs, click Theme 
  4. Click the drop sown arrow on te    CUSTOMIZE   box
  5. On the drop down tab click on Edit HTML
  6. 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'>&lt;script type=&quot;text/javascript&quot;&gt;
    function setAttributeOnload(object, attribute, val) {
      if(window.addEventListener) {
        window.addEventListener(&#39;load&#39;,
          function(){ object[attribute] = val; }, false);
      } else {
        window.attachEvent(&#39;onload&#39;, function(){ object[attribute] = val; });
      }
    }
  &lt;/script&gt;
&lt;div id=&quot;navbar-iframe-container&quot;&gt;&lt;/div&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;https://apis.google.com/js/plusone.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
      gapi.load(&quot;gapi.iframes:gapi.iframes.style.bubble&quot;, function() {
        if (gapi.iframes &amp;&amp; gapi.iframes.getContext) {
          gapi.iframes.getContext().openChild({
              url: &#39;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&#39;,
              where: document.getElementById(&quot;navbar-iframe-container&quot;),
              id: &quot;navbar-iframe&quot;
          });
        }
      });
    &lt;/script&gt;&lt;script type=&quot;text/javascript&quot;&gt;
(function() {
var script = document.createElement(&#39;script&#39;);
script.type = &#39;text/javascript&#39;;
script.src = &#39;//pagead2.googlesyndication.com/pagead/js/google_top_exp.js&#39;;
var head = document.getElementsByTagName(&#39;head&#39;)[0];
if (head) {
head.appendChild(script);
}})();
&lt;/script&gt;
</b:includable>
    </b:widget>
  </b:section>

<div style='position:absolute;top:75px;left:360px'>
<a href='http://www.google.com.ph/' target='_blank' title='How fast is your Search Engine? Goggle it Now'><img height='250' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgejxEQCzA2DRnQU2G6Vlxrobdr3Bvf4THtdlP3Xkwh1Xq4JrKghGdky6jI92U1gqAnMUhPcXmS201cBn73IsHQCgqvOXFuQJq6oKnR7-WxP0-lfZWC84zbkt4J_x-xThHogu7r1Rehgq_X/s144/googlechome.png' width='250'/></a>
</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.





 

 

 

No comments:

Post a Comment

Welcome to Zsite59