Home
how to
tips and tricks

How To Make Product Post View

Step 1 :- Go to Blogger's dashboard and click theme. Step 2 :- Click the arrow down icon next to the 'customize' button. Step 3 :- Click Edit Html.

Hello Guys and welcome to Wolv Themes Our Tutorial today is about How To Make Product Post View.

What is the Product Post Page :-

the product post view is used to make posts to sell products on your website

It's Benefits :-

  1. Nice Look and attractive
  2. Includes 2 or 3 Tabs For Description and features, the third tab is for questions
Let's Start

How To Make Product Post View :- 

this tutorial is for median ui, fletro pro, imagz users only

if you already have this code then you don't have to add this css code

Step 1 :- Go to Blogger's dashboard and click theme.
Step 2 :- Click the arrow down icon next to the 'customize' button.
Step 3 :- Click Edit Html.
Step 4 :- Click on any word then Press CTRL + F and type in the search form ></b:skin>.
Step 5 :- Copy the provided below code and paste it just above ></b:skin>.

  /* Changelog */
.changeLog, .purchase{position:fixed;bottom:0;left:0;right:0;margin:0;padding:40px 0;width:100%;height:100%;background-color:#fefefe;font-size:15px;z-index:22;-webkit-transition:all .1s ease;transition:all .1s ease;overflow-y:auto;opacity:0;visibility:hidden}
.changeLog .logClose, .purchaseClose{display:flex;align-items:center;height:22px;position:absolute;top:20px;right:25px}
.changeLog .logClose:before, .purchaseClose:before{content:'Close';font-size:11px;padding-right:8px;font-family:var(--font-body)}
.Blog .post .logContent h2{margin-top:10px}
.Blog .post .logContent ol, 
.Blog .post .logContent ul{padding-left:30px}
.logInput:checked ~ .changeLog, .purchaseInput:checked ~ .purchase, .purchaseInput:checked ~ .purchase .fullClose{opacity:1;visibility:visible}

/* Purchase */
.purchase{background-color:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;padding:0;overflow:hidden}
.purchaseContent{width:calc(100% - 40px);max-width:780px;max-height:calc(100% - 40px);overflow-y:auto;position:relative;background-color:#fefefe;display:flex;flex-wrap:wrap;border-radius:2px;margin-top:-100%;-webkit-transition:all .1s ease;transition:all .1s ease;z-index:3}
.purchaseDetail{width:55%;flex-shrink:0;background-color:#f1f1f0;padding:50px 25px 20px}
.purchaseMethod{width:45%;flex-shrink:0;padding:50px 25px 20px}
.Blog .post .purchaseTitle{margin-top:0;margin-bottom:30px;font-size:1.3rem}
.purchaseName, .purchasePrice{font-weight:900;margin-bottom:20px;color:var(--head-color)}
.purchaseName:before, .purchasePrice:before{content:attr(data-text);font-size:12px;display:block;font-weight:400;color:var(--body-color)}
.purchasePrice{font-size:2rem} .purchasePrice span{font-size:15px}
.purchasePrice .Paypal:before{content:'/ $'}
.purchaseInfo{font-size:13px;line-height:1.7em;margin-top:40px}
.purchaseLink .button{display:flex;margin-right:0;padding:12px 20px}
.purchaseLink .button svg{margin-right:12px}
.purchaseLink .button svg.line{fill:none;stroke-width:1.8}
.purchaseLink .transfer svg{height:18px;stroke:#05275b}
.purchaseLink .paypal svg{fill:#0079C1}
.purchaseLink .payoneer{}
.purchaseLink .stripe{}
.purchaseLink .gumroad svg{height:18px;fill:#1d1d1d}
.purchaseLink .themeforest{}
.purchaseConfirm{font-size:13px;text-align:right;margin-top:35px}
.purchaseInput:checked ~ .purchase .purchaseContent{margin-top:0}
@media screen and (max-width:480px){
.purchaseContent{display:block}
.purchaseDetail{width:100%;background-color:transparent;padding-top:16px}
.purchaseMethod{width:100%;background-color:#f1f1f0;border-radius:5px 5px 0 0;padding-top:25px}
.purchaseName{display:none}
.purchaseInfo{margin-top:0;font-size:12px}
.Blog .post .purchaseDetail .purchaseTitle{margin-bottom:10px}
Step 6 :- Come Back To Blogger's Dashboard and click posts.
Step 7 :- Create New Post.
Step 8 :- Click the pen button and press HTML view.
Step 9 :- Remove any codes then Copy and paste the following provided code.
<div class="separator" style="clear: both;"><a href="yourimglink" style="display: block; padding: 1em 0; text-align: center; "><img alt="product name" border="0" data-original-height="1080" data-original-width="1920" src="yourimglink"/></a></div>

<!--[ Price to show in homepage ]-->
<div class='proPrice' data-text='Price'>USD yourpricehere$ Sale!</div>
<a name='more'></a>

<div class='proInfo'>
  <div class='proInfoL'><small>Name</small><span>ProductName <span style="font-size: x-small;">v1.5</span></span></div>
  <div class='proInfoR'><small>Size</small><span>prductsize</span></div>
</div>
<div class='proInfo one'><a class="button" href="demolinkhere"><i class="icon demo"></i>Demo</a>
<label class="button" for="offpurchase"><i class="icon cart"></i>Buy now</label>
  <label for="offchangeLog"><u>Changelog</u></label></div>

<!--[ Active function ]-->
<input class='allTabs hidden' id='forall-tabs1' type='radio' name='postTabs' checked>
<input class='allTabs hidden' id='forall-tabs2' type='radio' name='postTabs'>
<input class='allTabs hidden' id='forall-tabs3' type='radio' name='postTabs'>
<div class='postTabs'>
  <div class='tabsHead'>
    <!--[ Change atribute data-text='...' to replace tabs title ]-->
    <label for='forall-tabs1' data-text='Description'></label>
    <label for='forall-tabs2' data-text='Features'></label>
    <label for='forall-tabs3' data-text='Common questions'></label>
  </div>

  <div class='tabsContent'>
    <!--[ Tabs content ]-->
    <div class='tabsContent-1'>

      <!--[ Your Description goes here ]-->
      

    </div>

    <!--[ Tabs content ]-->
    <div class='tabsContent-2'>

      <!--[ Your Product Features goes here ]-->
      <center><table><tbody>
<tr><th>Feature</th> <th>Test</th></tr>
<tr><td>Feature 1</td> <td>True</td></tr>
<tr><td>Feature 2</td> <td>True</td></tr>
<tr><td>Feature 3</td> <td>True</td></tr>
<tr><td>Feature 4</td> <td>True</td></tr>
<tr><td>Feature 5</td> <td>True</td></tr>
<tr><td>Feature 6</td> <td>True</td></tr>
<tr><td>Feature 7</td> <td>True</td></tr>
<tr><td>Feature 8</td> <td>True</td></tr>
<tr><td>Feature 9</td> <td>True</td></tr>
<tr><td>Feature 10</td> <td>True</td></tr>
<tr><td>Feature 11</td> <td>True</td></tr>
<tr><td>Feature 12</td> <td>True</td></tr>
<tr><td>Feature 13</td> <td>True</td></tr>
<tr><td>Feature 14</td> <td>True</td></tr>
<tr><td>Feature 15</td> <td>True</td></tr>
  </tbody> </table></center>

    </div>

    <!--[ Tabs content ]-->
    <div class='tabsContent-3'>

      <!--[ Your questions goes here ]-->
      <!--[ Accordion start ]-->
<ul class='accordion'>
  <!--[ Accordion line 1 ]-->
  <li>
    <div class='accorContent'>
      <input class='accorMenu hidden' id='offaccor-menu1' name='accordion-menu' type='checkbox'/>
      <label class='accorTitle' for='offaccor-menu1'>
        <i class='accorIcon'></i>
        
        <!--[ Question ]-->
        <span>question 1?</span>
      </label>

      <!--[ Answer ]-->
      <div class='content'>
        Answer 1.
      </div>
    </div>
  </li>
  
  <!--[ Accordion line 2 ]-->
  <li>
    <div class='accorContent'>
      <input class='accorMenu hidden' id='offaccor-menu2' name='accordion-menu' type='checkbox'/>
      <label class='accorTitle' for='offaccor-menu2'>
        <i class='accorIcon'></i>
        
        <!--[ Question ]-->
        <span>question 2?</span>
      </label>

      <!--[ Answer ]-->
      <div class='content'>
        Answer 2.
		</div>
    </div>
  </li>
  
  <!--[ Accordion line 3 ]-->
  <li>
    <div class='accorContent'>
      <input class='accorMenu hidden' id='offaccor-menu3' name='accordion-menu' type='checkbox'/>
      <label class='accorTitle' for='offaccor-menu3'>
        <i class='accorIcon'></i>

        <!--[ Question ]-->
        <span>question 3?</span>
      </label>

      <!--[ Answer ]-->
      <div class='content'>Answer 3.</div>
    </div>
  </li>
  
  <!--[ Accordion line 4 ]-->
  <li>
    <div class='accorContent'>
      <input class='accorMenu hidden' id='offaccor-menu4' name='accordion-menu' type='checkbox'/>
      <label class='accorTitle' for='offaccor-menu4'>
        <i class='accorIcon'></i>

        <!--[ Question ]-->
        <span>question 4?</span>
      </label>

      <!--[ Answer ]-->
      <div class='content'>Answer 4.</div>
    </div>
  </li>
</ul> 
    </div>
</div>

<!--[ Product and Payment method  ]-->
<input class='purchaseInput hidden' id='offpurchase' type='checkbox'/>
<div class='purchase'>
  <div class='purchaseContent'>
    <label class='purchaseClose' for='offpurchase'>
      <svg class='line' viewBox='0 0 24 24'><line x1='18' x2='6' y1='6' y2='18'/><line x1='6' x2='18' y1='6' y2='18'/></svg>
    </label>
    <div class='purchaseDetail'>
      <h2 class='purchaseTitle'>Purchase</h2>
      <div class='purchaseName' data-text='Detail'>Product name <span style="color: red;">Sale!</span></div>
      <div class='purchasePrice langIn' data-text='Price'><span>USD</span> <strike>15$</strike> 10$ </div>
      <div class='purchasePrice langIn' data-text='Price'><span>USD</span> <strike>20$</strike> 15$ </div>
      <div class='purchaseInfo langIn'>*Purchase can be made through MoMo, MB Bank, USDT and others. <!--<a href='https://theme.jagodesain.com/p/purchase.html' target='_blank'>Detail info</a>--></div>
    </div>
    <div class='purchaseMethod'>
      <h2 class='purchaseTitle'>Payment Method</h2>
      <div class='purchaseLink'>
        <a class='button outline transfer langIn' href='https://www.yourbanktransferlink.com' rel='noreferrer noopener' target='_blank'>
          <svg class='line' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect height='16' rx='2' ry='2' width='22' x='1' y='4'></rect><line x1='1' x2='23' y1='10' y2='10'></line></svg>
          <span>Bank Transfer</span>
        </a>
        <a class='button outline paypal' href='https://yourpaypallink.com/' rel='noreferrer noopener' target='_blank'>
          <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><g><path d='M26.28,9.58A6.64,6.64,0,0,0,19.65,3H10a1,1,0,0,0-1,.84L5.58,25.29a1,1,0,0,0,.23.8,1,1,0,0,0,.76.36H10.7l-.22,1.39a1,1,0,0,0,1,1.16h4.65a1,1,0,0,0,1-.83l1-6.11h3.15a7.46,7.46,0,0,0,7.43-7.45v-.28A5.87,5.87,0,0,0,26.28,9.58ZM10.85,5h8.8a4.64,4.64,0,0,1,4.51,3.61,5.68,5.68,0,0,0-1.32-.15H14.5a1,1,0,0,0-1,.84L12.91,13a1,1,0,0,0,2,.32l.46-2.88h7.49a3.87,3.87,0,0,1,1.4.27,6.47,6.47,0,0,1-6.4,5.69H13.22a1,1,0,0,0-1,.83L11,24.45H7.74Zm15.86,9.61a5.46,5.46,0,0,1-5.43,5.45h-4a1,1,0,0,0-1,.83l-1,6.11H12.64l.22-1.39h0l1.2-7.19h3.78A8.46,8.46,0,0,0,26,12.1a3.82,3.82,0,0,1,.71,2.23Z'/></g></svg>
          <span>Paypal</span>
        </a>
        <!--<a class='button payoneer' href='#' rel='noreferrer noopener' target='_blank'>Payoneer</a>
        <a class='button stripe' href='#' rel='noreferrer noopener' target='_blank'>Stripe</a>-->
        <!--<span>Other method</span>
        <a class='button outline gumroad' href='#' rel='noreferrer noopener' target='_blank' style='cursor:not-allowed'>
          <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><g><path d='M26.28,9.58A6.64,6.64,0,0,0,19.65,3H10a1,1,0,0,0-1,.84L5.58,25.29a1,1,0,0,0,.23.8,1,1,0,0,0,.76.36H10.7l-.22,1.39a1,1,0,0,0,1,1.16h4.65a1,1,0,0,0,1-.83l1-6.11h3.15a7.46,7.46,0,0,0,7.43-7.45v-.28A5.87,5.87,0,0,0,26.28,9.58ZM10.85,5h8.8a4.64,4.64,0,0,1,4.51,3.61,5.68,5.68,0,0,0-1.32-.15H14.5a1,1,0,0,0-1,.84L12.91,13a1,1,0,0,0,2,.32l.46-2.88h7.49a3.87,3.87,0,0,1,1.4.27,6.47,6.47,0,0,1-6.4,5.69H13.22a1,1,0,0,0-1,.83L11,24.45H7.74Zm15.86,9.61a5.46,5.46,0,0,1-5.43,5.45h-4a1,1,0,0,0-1,.83l-1,6.11H12.64l.22-1.39h0l1.2-7.19h3.78A8.46,8.46,0,0,0,26,12.1a3.82,3.82,0,0,1,.71,2.23Z'/></g></svg>
          <span>Paypal</span>
        </a>
        <!--<a class='button payoneer' href='#' rel='noreferrer noopener' target='_blank'>Payoneer</a>
        <a class='button stripe' href='#' rel='noreferrer noopener' target='_blank'>Stripe</a>-->
        <!--<span>Other method</span>
        <a class='button outline gumroad' href='#' rel='noreferrer noopener' target='_blank' style='cursor:not-allowed'>
          <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M337.6,321.5c29,0,29,43.4,0,43.4C308.7,364.9,308.7,321.5,337.6,321.5z M455,23.7c28.9,0,28.9,43.4,0,43.4   C426,67.1,426,23.7,455,23.7z M70.8,66.3h343.8c7.8,15.1,23.3,24.6,40.3,24.6c25.1,0,45.4-20.3,45.4-45.4C500.4,20.3,480.1,0,455,0 c-19,0-35.3,11.7-42.1,28.3H70.8c-33.2,0-59.2,25.2-59.2,57.4v366c0,32.7,27.2,60.3,59.2,60.3h366c32.3,0,58.4-27,58.4-60.3V234.6 c0-32.7-26.2-59.2-58.4-59.2H219.7c-33.2,0-61.2,27.2-61.2,59.2v68.3c0,31.7,27.4,57.4,61.2,57.4h75.8c6.9,17.2,23.6,28.3,42,28.3 c25.1,0,45.4-20.3,45.4-45.4c0-25.1-20.3-45.4-45.4-45.4c-16.9,0-32.5,9.5-40.3,24.6h-77.6c-11.2,0-23.2-7.4-23.2-19.5v-68.2 c0-11.2,11.1-21.3,23.2-21.3h217.1c11.5,0,20.5,9.4,20.5,21.3v217.2c0,12.1-9.4,22.3-20.5,22.3h-366c-11.3,0-21.3-10.5-21.3-22.3 v-366C49.5,74.7,58.8,66.3,70.8,66.3L70.8,66.3z'></path></svg>
          <span>Gumroad</span>
        </a>-->
        <!--<a class='button themeforest' href='#' rel='noreferrer noopener' target='_blank'>ThemeForest</a>-->
      </div>
      <div class='purchaseConfirm'>Already made a payment? <a href='https://www.facebook.com/themewiki.blogger'>Confirm here</a></div>
    </div>
  </div>
  <label class='fullClose' for='offpurchase'></label>
</div>  <!--[ Changelog ]-->
  <!--<input class='logInput hidden' id='offchangeLog' type='checkbox'/>
<div class='changeLog'>
  <label class='logClose' for='offchangeLog'>
    <svg class='line' viewBox='0 0 24 24'><line x1='18' x2='6' y1='6' y2='18'/><line x1='6' x2='18' y1='6' y2='18'/></svg>
  </label>
  <div class='logContent postSection'>
    <h2>Product Name Changelog</h2>
    
    <p>- Update time here 1</p>
    <ol>
      <li>changelog name</li>
      <li>changelog subname 1
        <ul>
          <li>changelog subname 2</li>
        </ul>
      </li>
      <li>Feature 1</li>
      <li>Feature 2</li>
      <li>Feature 3</li>
      <li>changelog subname 3:
        <ul>
      <li>Feature 1</li>
      <li>Feature 2</li>
      <li>Feature 3</li>
      <li>Feature 4</li>
      <li>Feature 5</li>
      <li>Feature 6</li>
      <li>Feature 7</li>
      <li>Feature 8</li>
        </ul>
      </li>
      <li>Improvements:
        <ul>
      <li>Feature 1</li>
      <li>Feature 2</li>
      <li>Feature 3</li>
      <li>Feature 4</li>
      <li>Feature 5</li>
      <li>Feature 6</li>
      <li>Feature 7</li>
      <li>Feature 8</li>
        </ul>
      </li>
    </ol>
    
    <p>- Update time here 2</p>    
    <ol>
      <li>changelog name</li>
      <li>changelog subname
        <ul>
          <li>Feature 1</li>
          <li>Feature 2</li>
        </ul>
      </li>
      <li>Feature 1</li>
      <li>Feature 2</li>
      <li>Feature 3</li>
      <li>Feature 4</li>
      <li>Feature 5</li>
      <li>Feature 6</li>
      <li>Feature 7</li>
      <li>Feature 8</li>
        </ul>
      </li>
    </ol>
    
    <p>- Update time here 3</p>    
    <ol>
      <li>changelog name</li>
      <li>changelog subname 1:
        <ul>
      <li>Feature 1</li>
      <li>Feature 2</li>
      <li>Feature 3</li>
      <li>Feature 4</li>
      <li>Feature 5</li>
      <li>Feature 6</li>
      <li>Feature 7</li>
      <li>Feature 8</li>
        </ul>
      </li>
      <li>changelog subname 2:        
      <ul>
      <li>Feature 1</li>
      <li>Feature 2</li>
      <li>Feature 3</li>
      <li>Feature 4</li>
      <li>Feature 5</li>
      <li>Feature 6</li>
      <li>Feature 7</li>
      <li>Feature 8</li>
        </ul>
      </li>
      <li>changelog subname 3:        
      <ul>
      <li>Feature 1</li>
      <li>Feature 2</li>      
      <li>Feature 3</li>      
      <li>Feature 4</li>
      <li>Feature 5</li>      
      <li>Feature 6</li>      
      <li>Feature 7</li>      
      <li>Feature 8 </li>
        </ul>
      </li>
    </ol>
    
    <p>- Update time here 4</p>    
    <ol>
      <li>Feature 1</li>
      <li>Feature 2</li>      
      <li>Feature 3</li>      
      <li>Feature 4</li>
      <li>Feature 5</li>      
      <li>Feature 6</li>      
      <li>Feature 7</li>
      <li>Feature 8</li>
    </ol>
    
    <p>- Update time here 5</p>    
    <ol>
      <li>Feature 1</li>
      <li>Feature 2</li>      
      <li>Feature 3</li>      
      <li>Feature 4</li>
      <li>Feature 5</li>      
      lt;li>Feature 6</li>      
      <li>Feature 7</li>      
      <li>Feature 8</li>    
      </ol>
    
    <p>- Update time here 6</p>    
    <ol>
      <li>Feature 1</li>
      <li>Feature 2</li>      
      <li>Feature 3</li>      
      <li>Feature 4</li>
      <li>Feature 5</li>      
      <li>Feature 6</li>      
      <li>Feature 7</li>      
      <li>Feature 8</li>    
      </ol>
    
    <p>- Update time here 7</p>    
    <ol>
      <li>changelog subname 1</li>
    </ol>
    
    <p>- Update time here 8</p>        
    <ol>
      <li>changelog subname 1:
        <ul>
      <li>Feature 1</li>
      <li>Feature 2</li>
      <li>Feature 3</li>
      <li>Feature 4</li>
      <li>Feature 5</li>
      <li>Feature 6</li>
      <li>Feature 7</li>
      <li>Feature 8</li>
        </ul>
      </li>
      <li>changelog subname 2</li>
    </ol>
  </div>-->
Step 4 :- Edit Everything to your content

Fast Documentation

  1. yourimglink is the image link 
  2. yourproductname is the product
  3. yourdemolink is the demo link (remove it if you don't have a demo for it)
  4. write your description after <!--[ Your Description goes here ]-->
  5. write your features after <!--[ Your Product Features goes here ]-->
  6. write your question after <!--[ Your questions Features goes here ]-->
  7. change product Name with your Product name
  8. change productsize with your Product Size
  9. change USD with your currency
  10. change the prices with yours
  11. to enable the disabled features remove <!-- from the first and remove --> from the last
  12. replace Dates with the real dates
  13. replace changelog name with the changelog name of your product
  14. replace changelog subname with the changelog subname
  15. replace feature 1,2,3,4,5,6,7,8 with your changelog features
  16. to remove feature remove from <li> to </li>
  17. to add feature copy this code       <li>Feature 1</li>
  18. to enable the changelog go to it's button that will be next to the demo and remove <!-- from it's first and remove --> from it's last then go to the changelog code in the last and remove  <!-- from it's first and remove -->

Post a Comment