title: iframe + picture button + a href
body: <p>First, I am still noob yet and I need some help from everyone... for my blogspot....
  I try to make my own button click, with png and the button will direct to another url link once it clicked. And also I wish it able in iframe so people who use android/ios/pc can see it my blogspot. </p>
  
  <p>(Just blogspot, no css and no php, beside I am still use blospot about 2 months....)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;head&gt;
  &lt;br&gt;
  &lt;div style="position:relative;"&gt;
  &lt;iframe frameborder="0" scrolling="no"  src="http://4.bp.blogspot.com/-pPllYfg1wF8/VUDnsXa3feI/AAAAAAAAABM/KLVqubELa9Q/s1600/button%26player2.PNG" /&gt;&lt;/iframe&gt;
  &lt;a href="http://www.google.com" style="position:absolute; top:0 ; left:0; right:0; down:0; display:outline-block;  width:279px; height:31px;"&gt;&lt;/a&gt;
  &lt;/div&gt;
  &lt;div style="position:relative;"&gt;
  &lt;iframe frameborder="0" scrolling="no"  src="http://4.bp.blogspot.com/-pPllYfg1wF8/VUDnsXa3feI/AAAAAAAAABM/KLVqubELa9Q/s1600/button%26player2.PNG" /&gt;&lt;/iframe&gt;
  &lt;a href="http://www.youtube.com" style="position:absolute; top:0; left:0; right:0; down:0; display:outline-block; width:279px; height:31px;"&gt;&lt;/a&gt;
  &lt;/div&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The wide between 2 button are very far, and I wish someone can able help me fix it the button like this image:
  <a href="http://4.bp.blogspot.com/-7XZRNzt3gSY/VUOXiKCy2qI/AAAAAAAAABg/TjJBXBMsYdw/s1600/zz.PNG" rel="nofollow">http://4.bp.blogspot.com/-7XZRNzt3gSY/VUOXiKCy2qI/AAAAAAAAABg/TjJBXBMsYdw/s1600/zz.PNG</a></p>
  
  <p>Thank you!!</p>