How To Create Product Page On Median Ui 1.5 Or 1.6 Version Median Ui Documentation Free Script
Hello guys, welcome to Vlogger-Blogger. In today's article, we will share the codes for creating a product page in Median Ui v1.5.
Well, if you have officially purchased the Median UI theme, you will also find the code for the product page in the theme set, but many people cannot afford the theme and therefore illegally download it. But if you download this theme illegally, you will only get the theme, not the product page code. So, in this post today, we're going to share the product page code so that even those without a product page code can now create a product page on their blog.
How do I create a product page in Median UI?
You just need to use the html code to create the product page because the product page CSS is already in the theme. We have provided below HTML codes, wherever you would like to create a product page, paste these codes there.
Use the following HTML codes to create a product page in Median Ui v1.5.
PAGE CODE
<div class='separator'>
<img alt="Image Text" src="Image Url Here"/>
</div>
<!--[ Price to show in homepage ]-->
<div class='proPrice' data-text='Price'>Rs. 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>Red, Yellow, Green, Blue</span></div>
</div>
<div class='proInfo one'><small>Sample</small><span>Nullam congue euismod euismod, mauris lacinia pellentesque vehicula</span></div>
<div class='proMarket'>
<small>or Shop through your favorite <b>"Market Place"</b> :</small>
<!--[ Change attribute href='#' to add url ]-->
<a title='Tokopedia' href='#' target='_blank' rel='noopener'>
<img class="lazy" data-src="https://cdn.statically.io/favicons/tokopedia.com" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=">
</a>
<a title='Daraz' href='#' target='_blank' rel='noopener'>
<img class="lazy" data-src="https://cdn.statically.io/favicons/bukalapak.com" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=">
</a>
<a title='Amazon' href='#' target='_blank' rel='noopener'>
<img class="lazy" data-src="https://cdn.statically.io/favicons/shopee.co.id" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=">
</a>
<a title='Alibaba' href='#' target='_blank' rel='noopener'>
<img class="lazy" data-src="https://cdn.statically.io/favicons/lazada.co.id" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=">
</a>
</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='Tab 1'></label>
<label for='forall-tabs2' data-text='Tab 2'></label>
<label for='forall-tabs3' data-text='Tab 3'></label>
</div>
<div class='tabsContent'>
<!--[ Tabs content ]-->
<div class='tabsContent-1'>
<p>Tab 1 Content</p>
</div>
<!--[ Tabs content ]-->
<div class='tabsContent-2'>
<p>Tab 2 Content</p>
</div>
<!--[ Tabs content ]-->
<div class='tabsContent-3'>
<p>Tab 3 Content</p>
</div>
</div>
</div>Although the middle UI theme already contains the CSS for the product page, if your illegally loaded theme does not contain CSS, add the following CSS to your theme as well.
Steps to Add Product Page CSS Codes
Step 01 : Log into your Blogger dashboard, click on "Theme".
Step 02 : Click the down arrow icon next to the customize button.
Step 03 : Click Edit HTML, you will be redirected to the edit page.
Step 04 : Now find the code ]]></b:skin>and paste the following CSS codes just above it.
CSS CODE
.post .proPrice,.post .proInfoL,.post .proInfoR,.post .proInfo.one{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.6em}
.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 .proInfo.one,.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}
.postEntry.snippet.productPrice,.itemEntry.productPrice{display:block;font-size:14px;color:var(--link-color);opacity:1}
.itemFeatured .itemEntry.productPrice{font-size:14px}It's about creating product pages in Median UI. I hope this article will be very useful for those who did not have codes for the product page. Share this article as much as possible so that even people who don't have product page codes can now create product pages on their blogs.
If you have any questions or are faced with a problem in any section, let us know in the comments. And don't forget to leave your feedback in the comments.
Post a Comment
Post a Comment