Median UI 1.7 Premium Blogger Template Download FREE Join our Telegram Channel to get Latest Blogging Tips, Blogger Templates, Wordpress Theme and Plugins. Also, you'll get premium accounts and resources for free.
Demo Here
<!--[ Active function ]-->
<input class='tbIn hidden' id='fTabs-1' type='radio' name='postTabs' checked>
<input class='tbIn hidden' id='fTabs-2' type='radio' name='postTabs'>
<input class='tbIn hidden' id='fTabs-3' type='radio' name='postTabs'>
<input class='tbIn hidden' id='fTabs-4' type='radio' name='postTabs'>
<!--[ Tabs header/title ]-->
<div class='tbHd scrlH'>
<!--[ Change atribute data-text='...' to replace tabs title ]-->
<label for='fTabs-1' data-text='Chapter 1'></label>
<label for='fTabs-2' data-text='Chapter 2'></label>
<label for='fTabs-3' data-text='Chapter 3'></label>
<label for='fTabs-3' data-text='Chapter 4'></label>
</div>
<div class='tbCn'>
<!--[ Tabs content ]-->
<div class='tbText-1'>
content_here
</div>
<!--[ Tabs content ]-->
<div class='tbText-2'>
content_here
</div>
<!--[ Tabs content ]-->
<div class='tbText-3'>
content_here
</div>
<!--[ Tabs content ]-->
<div class='tbText-4'>
content_here
</div>
</div>
<div class='separator'>
<img alt='Product Post Feature' src='https://4.bp.blogspot.com/-OhiwDawFr6I/YJyEqW7fpXI/AAAAAAAAQr8/Pbr9BeN0BPsXw4CVVta1q_6c-vOBlT1gwCNcBGAsYHQ/s0/median-product.png'/>
</div>
<!--[ Price to show in homepage ]-->
<div class='pPric pPad' data-text='Price'>
<i class='strike'>Rp 250.000</i>
<i class='price'>Rp 200.000</i>
</div>
<!--more-->
<div class='pInfo pPad'>
<div class='L'><small>Size</small><span>Small, Medium, Large, X Large</span></div>
<div class='R'><small>Color</small><span>Merah, Kuning, HIjau, Biru</span></div>
</div>
<div class='pInfo o pPad'><small>Sample</small><span>Nullam congue euismod euismod, mauris lacinia pellentesque vehicula</span></div>
<div class='pMart'>
<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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2q2TAH2DGUbjHWkDBUJS_pa-t_U9wnTS54dZN3W7ysCBd8oHg4_8yr5YK0xAXCAtfj2m4KPx5DmKSJ0CKIQSutPJq0lPrrCM5fYw6a5AJX8OCv47_Az2zNKyFPpqdy39i7KAjcE72G_2wqVEIy_Df1Z_4SmiBN_-kwaygO0jGYlTUCh_3gqovVG6U/s1600/tokopedia.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='>
</a>
<a title='Bukalapak' href='#' target='_blank' rel='noopener'>
<img class='lazy' data-src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7Eu1GKzcG-_qHbu0pcgoPBcapffIXTIXrOgrdMbz878w2mNIiCrjWuDDBbiUJ1hKyZlE6wgHJjtFvGAWzHAW9pwG6Qob3tMIrVHhajufQ0gvVO2kyk8hMZBmyXum32MlSWWfkC_xsoLTEnAOl_6Wn2qbsQU_gUi19w71-kUTUqd31a5Jj8CP-597g/s1600/bukalapak.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='>
</a>
<a title='Shopee' href='#' target='_blank' rel='noopener'>
<img class='lazy' data-src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGh2TGRoxrpQRDRJazQpp7kcy08C7E_wNvToVLetrH731qoHgVPt_rXIja06sE15vVL38App6ckdcD038uGcdR1l6hGBbQ4iVi9oe5BeKtoKDf7u8_C4ip32Xlj0KGp_rOHRX1C4tFr63zxcPO1PAZ37MR-EpXrejwb7qI84TbBaDHtOL77BzJ95Yh/s1600/shopee.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='>
</a>
<a title='Lazada' href='#' target='_blank' rel='noopener'>
<img class='lazy' data-src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLrOFpoh1D3AVCVsAROfW8-BXLuiDA6GJUqIQ8VBCjdKHY4OaSeT7A7cm9e6_qIpuAYLZ-dKOrjarNZUVCmjRafvuEwrW-usJSHEH4H76Qe7ObPG6ZswKfNDBcjkt2nMmVxbe-yK81NtONYFSTA33MeZLXHReNPcNbhAh-QB2bvUQsezGBGacFE0WE/s1600/lazada.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='>
</a>
</div>
<!--[ Active function ]-->
<input class='tbIn hidden' id='fTabs-1' type='radio' name='postTabs' checked>
<input class='tbIn hidden' id='fTabs-2' type='radio' name='postTabs'>
<input class='tbIn hidden' id='fTabs-3' type='radio' name='postTabs'>
<!--[ Tabs header/title, replace class attribute to class='tbHd scrlH stick' if you want to create a floating tab title ]-->
<div class='tbHd scrlH'>
<!--[ Change atribute data-text='...' to replace tabs title ]-->
<label for='fTabs-1' data-text='Deskripsi'></label>
<label for='fTabs-2' data-text='Pengiriman'></label>
<label for='fTabs-3' data-text='Keterangan'></label>
</div>
<div class='tbCn'>
<!--[ Tabs content ]-->
<div class='tbText-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>
</div>
<!--[ Tabs content ]-->
<div class='tbText-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>
</div>
<!--[ Tabs content ]-->
<div class='tbText-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>
</div>
</div>
- Telegram : https://t.me/cyberxbd
- Github : https://github.com/Mosaphir
- [Enable] Define your own design, more colors and backgrounds can be changed through Customize Blogger Theme.
- [Enable] Resize the header logo via Customize Blogger Theme.
- [Added] Bookmark this post | igniel.com
- [Added] Copy to clipboard button on Syntax Highlighter.
- [Added] normalize.css v8.0.1 | github.com/necolas/normalize.css
- [Added] New post components: Guide list, Pros/cons list, Manual lightbox image.
- [Added] More style options on table.
- [Added] List of labels at the end of the post.
- [Optimized] darkMode v2.0, added dark mode option based on default system.
- [Optimized] timeAgo v2.0, Easier to choose timestamp format.
- [Optimized] Product post v2.0, Added discount options from 10% to 90%.
- [Optimized] Widget Slider v2.0.
- [Optimized] Easier to learn documentation.
- [Optimized] Simplified code structure writing.
- [Improved] Change the placement of Profile widgets.
- [Improved] Easier to change some default text, now some text can be changed via Blogger Layout.
- [Improved] Partially hide too long description profile.
- [Improved] Moved the Blogger comments column to the first section.
- [Improved] Completely uses Iconsax | vuesax.com.
- [Removed] Auto lightbox image feature, now this feature has to be added manually.
- [Removed] Sitemap on staticPage.
- [Removed] Split post feature.
- [Removed] The Contact Form widget on a static page.
- [Fixed] Some widget layouts didn't fit when re-added.
- [Fixed] Can't add link to image in post.
- [Fixed] Improvements to JSON schema, added alternative profile and photo urls to avoid errors.
- [Fixed] Incorrect thumbnail size on Safari browser.
- [Fixed] Known/reported bugs.