-->
Home
CSS Code
HTML Code

Images Downloadable on Blogger html css code

Images Downloadable on Blogger Source Code एवं Demo

 यदि  ब्लॉगर प्लेटफॉर्म पर Image Downloadable ब्लॉग बनाना चाहते है तो नीचे दिए गए HTML CSS कोड के माध्यम से  ब्लॉगर प्लेटफॉर्म पर Image Downloadable ब्लॉग को बना सकते है 


Image Downloadable HTML CSS Code with Demo

Images Downloadable CSS Code



.post-left {
  flex: 1;  
   border: 1px solid #eee;
   width:50%;
}  

.post-right {
  flex: 1; 
  border: 1px solid #eee;
  text-align: center;
   width:50%;
   
}
@media only screen and (min-width: 600px) {
  .layout {
    display: flex;
    
  }
}
.column {
  padding: 1em;
  margin: 10px;
  background: #fff0;
  width: -webkit-fill-available;
}
 }
.pdt-download-btn {
    display: inline-block;
    width: -webkit-fill-available;
    height: -webkit-fill-available;
    line-height: 46px;
    width: 220px;
    text-align: center;
    background-color: #fff;
    color: #000;
    font-size: 15px;
    border-radius: 26px;
    text-transform: capitalize;
    border: 1px solid #212121;
     margin-top: 50%;
  margin-bottom: 50%;
}

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

Images Downloadable HTML Code


  
  <div class="layout">
    <p class="column post-left">
      
     <img src="your_image_code_here" style='width:50%;' />
    </p>
    <p class="column post-right" role="complementary">
    <a class="pdt-download-btn" href="#" rel="nofollow">PNG Download</a></p>
      <p class="column post-right" role="complementary">
        <a class="pdt-download-btn" href="#" rel="nofollow">Download PSD</a>
    </p>  
</div>

<h4>File Specifications:</h4>
<p><strong>Resolution:</strong> 515x640 px</p>
<p><strong>Name:</strong> Frame PNG and PSD High Resolution, Transparent Download</p>
<p><strong>License:</strong> Personal Use</p>
<p><strong>File Format:</strong> PNG/PSD</p>
<p><strong>File Size:</strong> 13.8 KB</p>

your_image_code_here के जगह पर Image के लिंक को Paste करे

File Specifications Section में Image सम्बंधित जानकारी को लिखे जैसा कि दर्शाया गया है

Edit and Copy Images Downloadable HTML CSS Code

Result

Images Downloadable Demo

Post a Comment