How To Create Product Post in Median UI Template ?

How To Create Product Post in Median UI Template

Hello Everyone, In This Post I will share how to create product post in Median UI Template. If you have bought this Median UI Template from the official website of jago desain, then you will easily get many document files in it. Out of all the given files you will also get an html file of a product post. But if you do not know how to use this product post feature, then you can easily use it by reading this post completely.

What is Product Post Features ?

The Median UI Template created by jago desain has a great feature known as product posts. The Product Post feature lets you display any product you sell on your website in a different way. This product will stand out on your blog in a unique way. Because of this product post feature in Median UI Template for the product you sell, you don't need to create any other blog. You can display both blog posts and product posts together on one blog.

Benefits of Product Post Features ?

This product post feature can be very useful for users who sell or provide SEO, coding, vector, mockups, templates etc. With the help of this feature, you can easily display the product you sell on your blogger website. With which your website user will easily know about the product you are selling.

How To Create Product Post in Median UI Template :-

Step 1 :- First Go To Blogger.Com.
Step 2 :- Then Login Your Account.
Step 3 :- After Click on Theme Menu.
Step 4 :- After Click on Edit Html.
Step 5 :- Then Paste The Given Css Code Above The //]]></b:skin> Tag.

/* Product Post Css By SmartTechMukesh.Online */
.post .proPrice,.post .proInfoL,.post .proInfoR,.post{padding:15px 0;margin-bottom:0;border-bottom:1px solid var(--content-border);flex:0 0 50%;display:block}
.post .proPrice{font-size:22px;color:var(--link-color)}
.post .proPrice:before,.post .proInfo small{content:attr(data-text);font-size:small;color:var(--body-color);display:block;opacity:.8}
.post .proInfo{display:flex;font-size:14px;line-height:1.6
.post .proInfoL{padding-right:20px}
.post .proInfoR{padding-left:0}
.post .proMarket{margin:20px 0 30px;display:flex;flex-wrap:wrap;line-height:1.6em}
.post .proMarket > *{display:block}
.post .proMarket > small{width:100%;margin-bottom:10px}
.post .proMarket > a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;margin:0 8px 8px 0;border:1px solid var(--content-border);border-radius:3px}
.post .proMarket > a:last-of-type{margin-right:0}
.post .proMarket > a img{width:20px;height:20px;display:block}
.darkMode .post .proPrice:before,.darkMode .post .proInfo small{color:var(--dark-textAlt)}
.darkMode .post .proPrice,.darkMode .post .proInfoL,.darkMode .post .proInfoR,.darkMode .post,.darkMode .post .proMarket > a{border-color:rgba(255,255,255,.1)}
.blogPosts .hentry.noInfo,.blogPosts .hentry.product,.blogPosts div.hentry,.blogPosts .hentry.noComment{padding-bottom:0}
.listMode .blogPosts .postEntry.snippet.productPrice{display:block}
.gridLayout .postEntry.snippet.productPrice,.gridLayout.listMode .blogPosts .postEntry.snippet.productPrice{font-size:14px}
.itemFeatured .itemEntry.productPrice{font-size:14px}
Step 6 :- Then Don't Forget to Click on Save Theme.
Step 7 :- After Create a New Post Or Edit Old Post.
Step 8 :- Then Add Your Post Title And Description.
Step 9 :- Then Add Post Label Tag Product.
Step 10 :- Then Click on HTML View and paste the HTML code.
<div class='separator'>
  <img alt="Product Post Feature" src=""/>

<!--[ Price to show in homepage ]-->
<div class='proPrice' data-text='Price'>Rp. 200.000</div>
<a name='more'></a>

<div class='proInfo'>
  <div class='proInfoL'><small>Size</small><span>Small, Medium, Large, X Large</span></div>
  <div class='proInfoR'><small>Color</small><span>Merah, Kuning, HIjau, Biru</span></div>
<div class='proInfo one'><small>Sample</small><span>Nullam congue euismod euismod, mauris lacinia pellentesque vehicula</span></div>

<div class='proMarket'>
  <small>atau Belanja melalui "<b>Market Place</b>" favorit anda :</small>
  <!--[ Change attribute href='#' to add url ]-->
  <a title='Tokopedia' href='#' target='_blank' rel='noopener'>
    <img class="lazy" data-src="" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=">
  <a title='Bukalapak' href='#' target='_blank' rel='noopener'>
    <img class="lazy" data-src="" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=">
  <a title='Shopee' href='#' target='_blank' rel='noopener'>
    <img class="lazy" data-src="" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=">
  <a title='Lazada' href='#' target='_blank' rel='noopener'>
    <img class="lazy" data-src="" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=">

<!--[ 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='Deskripsi'></label>
    <label for='forall-tabs2' data-text='Pengiriman'></label>
    <label for='forall-tabs3' data-text='Keterangan'></label>

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

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus. Sed suscipit sapien sed turpis ultrices viverra. Ut quis dui sed odio sollicitudin fermentum. Aliquam vitae metus laoreet, dapibus enim sit amet, feugiat lorem. Sed in dui purus.</p>

      <p>Morbi turpis arcu, eleifend a tortor quis, sagittis dapibus ipsum. Vestibulum in imperdiet arcu, eget fringilla libero. Aenean commodo, felis id fermentum pellentesque, risus elit efficitur augue, at lobortis libero ipsum quis nulla. Suspendisse imperdiet magna at tellus feugiat rhoncus. Donec in massa vitae quam lobortis cursus. Donec tincidunt interdum ex ut finibus.</p>


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

      <p>In imperdiet ultrices iaculis. Proin consequat, massa ut hendrerit lacinia, eros nibh finibus justo, ut consectetur nibh orci vitae massa. Ut sodales lobortis sollicitudin. Phasellus eget mi dictum neque mollis vehicula. Vestibulum et dolor accumsan, volutpat est quis, posuere tortor. Maecenas euismod turpis eu metus elementum tempor. Pellentesque in ullamcorper massa. Pellentesque lectus ipsum, dignissim nec ornare et, laoreet eget ex. Duis convallis lorem vitae consequat mattis. Aenean dui lectus, auctor eu dui et, gravida pellentesque velit. In vitae justo lacus. Vivamus id imperdiet sapien. Mauris non maximus purus. Nulla facilisi.</p>


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

      <p>Praesent at dui scelerisque, laoreet justo eu, egestas justo. Nullam dapibus, dolor quis blandit suscipit, massa odio hendrerit neque, at fermentum dolor tellus ac justo. Cras placerat sit amet libero sit amet rhoncus. Aenean ultrices vitae erat ut malesuada. Vivamus fringilla mollis leo, ut tempus nibh feugiat sollicitudin. Phasellus sodales maximus turpis, eget sollicitudin tortor volutpat ac.</p>


Note :- Edit This Html Code According To You Need.

Step 11 :- Then Don't Forget to Published Post.

Conclusion :-

This product post feature is made for user using Median UI v1.5 only. Absolutely not for users using any other template.

In this post I have explained How to Create Product Post in Median UI Template. I hope this tutorial can be useful for all Median UI v1.5 user. Thank you for visiting our website.

Refrence :

Read Also :