Documentation

Get Started

MeDes Blogger Style Framework

Media Desain Blogger CSS Framework is the first library CSS for google blogger. Make layouting post, statistic page, widget, responsive, more simple and include elegan web assests (button, collumns, icon, embed responsive, etc).

You can download or embed MeDes CDN and apply to your template free. And we make some premium sample template & includ support (paid inlucde). And than we're ready to developing your dream weblog from your mockup design. Lets upgrade your own blog more profesional.

Back to top ▴


Lasted Version

The lasted version MeDes Blogger CSS Framework now is version 1.0

Others Plugin CDN have to Add:

<link crossorigin='anonymous' href='https://use.fontawesome.com/releases/v5.0.10/css/all.css' integrity='sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg' rel='stylesheet'/>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'/>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js'/>

CSS:

<b:skin><![CDATA[/*
/* Variable definitions
====================
<Group description="Navigation Bar" selector="nav">
<Variable name="topnav.font.style" description="List Menu - Font Family" type="font" default="normal normal 17px Open Sans" value="normal normal 17px Open Sans"/>
<Variable name="topnav.background" description="Top Nav - Background" type="color" default="#87c312" value="#87c312"/>
<Variable name="topnav.content.color" description="Text - Color" type="color" default="#fff" value="#ffffff"/>
<Variable name="topnav.element.color" description="Border Box Color" type="color" default="rgba(0, 0, 0, 0)" value="rgba(0, 0, 0, 0)"/>
</Group>

<Group description="Header" selector="header#header-wrapper">
<Variable name="headerTitle.font.style" description="Title - Font Family" type="font" default="normal normal 38px Open Sans" value="normal normal 38px Open Sans"/>
<Variable name="headerSubTitle.font.style" description="Sub Title - Font Family" type="font" default="normal normal 20px Open Sans" value="normal normal 20px Open Sans"/>
<Variable name="header.bgcolor" description="Background Color" type="color" default="#9acd32" value="#9acd32"/>
<Variable name="header.txtcolor" description="Text Color" type="color" default="#ffffff" value="#ffffff"/>
</Group>

<Group description="Main Content" selector="main">
<Variable name="thumb.font.style" description="Font Family on Mainpost" type="font" default="normal normal 16.5px Open Sans" value="normal normal 16.5px Open Sans"/>
<Variable name="thumbcontent.font.style" description="Font Family Content on Mainpost" type="font" default="normal normal 15px Open Sans" value="normal normal 15px Open Sans"/>
<Variable name="body.bgcolor" description="Background Color" type="color" default="#ffffff" value="#ffffff"/>
<Variable name="element.color" description="Element Color" type="color" default="#8bc53f" value="#8bc53f"/>
<Variable name="thumb.link.color" description="Link Color on Mainpost" type="color" default="#8bc53f" value="#8bc53f"/>
<Variable name="thumb.bgcolor" description="Backgroud Color on Mainpost" type="color" default="#fbfbfb" value="#fbfbfb"/>
<Variable name="thumb.txtcolor" description="Content Color on Mainpost" type="color" default="#666666" value="#666666"/>
<Variable name="sidabar.link.color" description="Link Color on Sidebar" type="color" default="#8bc53f" value="#8bc53f"/>
<Variable name="sidabar.bgcolor" description="Backgroud Color on Sidebar" type="color" default="#fbfbfb" value="#fbfbfb"/>
<Variable name="sidabar.txtcolor" description="Content Color on Sidebar" type="color" default="#666666" value="#666666"/>
</Group>

<Group description="Footer" selector="footer#footer-wrapper">
<Variable name="footer.font.style" description="Footer Font Family" type="font" default="normal normal 16px Open Sans" value="normal normal 16px Open Sans"/>
<Variable name="footer.bgcolor" description="Background color" type="color" default="#F9F9F9" value="#F9F9F9"/>
<Variable name="footer.txtcolor" description="Text color" type="color" default="#888888" value="#888888"/>
<Variable name="footer.link.color" description="Footer Link color" type="color" default="#999999" value="#999999"/>
<Variable name="footer.bdrcolor" description="Footer Element Color" type="color" default="#8BC53F" value="#8BC53F"/>
<Variable name="credit.font.style" description="Credit Font Family" type="font" default="normal normal 16px Open Sans" value="normal normal 16px Open Sans"/>
<Variable name="credit.bgcolor" description="Credit Background color" type="color" default="#f3f3f3" value="#f3f3f3"/>
<Variable name="credit.txtcolor" description="Credit Text color" type="color" default="#cccccc" value="#cccccc"/>
<Variable name="credit.link.color" description="Credit Link color" type="color" default="#aaaaaa" value="#aaaaaa"/>
</Group>

<Group description="Color Swatch - Shortcodes" selector="">
<Variable name="main.color" description="Btn Swatch - Main Color" type="color" default="#87c312" value="#87c312"/>
<Variable name="second.color" description="Btn Swatch - A Color" type="color" default="#ffa500" value="#ffa500"/>
<Variable name="third.color" description="Btn Swatch - B Color" type="color" default="#ff0000" value="#ff0000"/>
<Variable name="fourth.color" description="Btn Swatch - C Color" type="color" default="#49c3ff" value="#49c3ff"/>
<Variable name="netral.color" description="Btn Swatch - D Color" type="color" default="#a5a5a5" value="#a5a5a5"/>
<Variable name="accordion.bgcolor" description="Accordion - Color" type="color" default="#f9f9f9" value="#f9f9f9"/>
<Variable name="accordion.bgcolor.active" description="Accordion - Active Button Color" type="color" default="#f6fbec" value="#f6fbec"/>
<Variable name="accordion.txtcolor" description="Accordionton - Text Button Color" type="color" default="#444444" value="#444444"/>
<Variable name="ct.form.bgcolor" description="Contact Form - From BG-Color" type="color" default="#ffffff" value="#ffffff"/>
<Variable name="ct.form.bdrcolor" description="Contact Form - From Border Color" type="color" default="#dddddd" value="#dddddd"/>
<Variable name="ct.form.plcholdercolor" description="Contact Form - Placeholder Color" type="color" default="#666666" value="#666666"/>
<Variable name="ct.submit.color" description="Contact Form - Submit Btn Color" type="color" default="#87c312" value="#87c312"/>
<Variable name="ct.submit.txtcolor" description="Contact Form - Submit Text Color" type="color" default="#ffffff" value="#ffffff"/>
</Group>

<Group description="Box Model Skin" selector="">
<Variable name="bg.dark.color" description="Dark Skin - Background Color" type="color" default="#222222" value="#222222"/>
<Variable name="txt.dark.color" description="Dark Skin - Text Color" type="color" default="#ffffff" value="#ffffff"/>
<Variable name="bg.light.color" description="Light Skin - Background Color" type="color" default="#f8f8f8" value="#f8f8f8"/>
<Variable name="txt.light.color" description="Light Skin - Text Color" type="color" default="#666666" value="#666666"/>
</Group>

<Group description="404 Page Not Found" selector="">
<Variable name="404.bg.color" description="Background Color" type="color" default="#8BC53F" value="#8BC53F"/>
<Variable name="404.link.color" description="Link Color" type="color" default="#f9fff0" value="#f9fff0"/>
<Variable name="404search.bg.color" description="Search Box - Background Color" type="color" default="#83bf34" value="#83bf34"/>
<Variable name="404search.txt.color" description="Search Box - Text Color" type="color" default="#fff" value="#ffffff"/>
<Variable name="404submit.bg.color" description="Search Submit - Background Color" type="color" default="#6ba91b" value="#6ba91b"/>
<Variable name="404submit.txt.color" description="Search Submit - Text Color" type="color" default="#fff" value="#ffffff"/>
</Group>
*/

/*
Default CSS Mediadesain
=========================================
mediadesain.com
Google Blogger Styler & Premium Themes
Mediadesain Structure Collumns v1.1.13 (1807XX)
Medes Theme (Blogger CSS Framework)
*/

*,:before,:after{box-sizing:inherit}body{font-family:Open Sans,sans-serif;color:$(thumb.txtcolor);background:$(body.bgcolor);height:100%;box-sizing:border-box}img{max-width:100%}h1,h2,h3,h4{font-weight:400}ol,ul,.widget ul{-webkit-padding-start:2em}small{opacity:.7}input{-webkit-appearance:none;-moz-appearance:none;appearance:none}:focus{outline:unset}.blog-feeds,.post-feeds{display:none}.Blog,.section{margin:0 1em}#MeDes-QuickAccess{background-color:#fff;font-family:roboto}.material-icons,.icon-text{vertical-align:middle}.navbar-admin{overflow:hidden}.navbar-admin a{float:left;font-size:16px;color:#888!important;text-align:center;padding:14px 16px}.dropdown{float:left;overflow:hidden}.dropdown .dropbtn{font-size:16px;border:none;outline:none;color:#666;padding:14px 16px;margin:0}.navbar a:hover,.dropdown:hover .dropbtn{background-color:#f9f9f9}.dropdown-content{display:none;position:absolute;background-color:#f9f9f9;box-shadow:0 8px 16px 0 rgba(0,0,0,0.2);z-index:1;top:45px}.dropdown-content a{float:none;padding:12px 16px;text-decoration:none;display:block;text-align:left}.dropdown-content a:hover{background-color:#ddd}.dropdown-content a.builder-link{background:#9acd32;color:#FFF!important;margin:5px}.dropdown:hover .dropdown-content{display:block}.widget-item-control{z-index:3}.separator a{padding:0;margin:0!important}a.quickedit:hover{opacity:1;transition:.3s ease;transform:scale(1.2)}a.quickedit{position:absolute;right:10px;top:-10px;opacity:.3}a.quickedit:before{content:'\f013';font-family:FontAwesome;font-size:15px;color:#fff;background:rgba(154,205,50,0.95);border:1px solid #7ba527;padding:5px;border-radius:25%;z-index:10}a.quickedit img{display:none}.status-msg-body{padding:1em 0}.status-msg-border{opacity:0;padding:1em}.error-container{position:fixed;width:100%;height:100%;background:$(404.bg.color);z-index:5}.error-page{width:80%;position:absolute;margin:0 10%;top:20%;text-align:center}.error-page a,.error-page i{color:$(404.link.color)!important}.searchBox{display:inline;margin:20px auto;background:$(404search.bg.color);color:$(404search.txt.color);border:0;padding:10px}.searchButton{background:$(404submit.bg.color);color:$(404submit.txt.color);border:none;padding:10px;cursor:pointer}.loading{-webkit-animation:loading 3s 1;animation:loading 3s 1}@-webkit-keyframes loading{0%{opacity:0}25%{opacity:0}75%{opacity:0}100%{opacity:1}}@keyframes loading{0%{opacity:0}25%{opacity:0}75%{opacity:0}100%{opacity:1}}header#header-wrapper{position:relative;overflow:hidden;background:$(header.bgcolor);color:$(header.txtcolor);text-align:center}#header .widget,#main-post.section{margin:0}.author-profile{padding:2em 1em 1em;background-color:$(sidabar.bgcolor);color:$(sidabar.txtcolor);margin:1em 0}.author-profile img{border:none;float:none;margin:0;width:100%;max-width:100px;border-radius:100%}#blog-pager{height:auto;text-align:center}#blog-pager button{background:$(element.color)}footer#footer-wrapper{font:$(footer.font.style);color:$(footer.txtcolor);background:$(footer.bgcolor);border-top:2px solid $(footer.bdrcolor);font-weight:lighter}footer#footer-wrapper .simple-menu-B a,footer .widget-content a{color:$(footer.link.color)}#credit{font:$(credit.font.style);background:$(credit.bgcolor);color:$(credit.txtcolor)}#credit a{color:$(credit.link.color)}#credit .columns{margin:0;padding:1em 0}#script{display:none}.first-img{overflow:hidden;position:relative;height:400px;margin-bottom:1em;display:none}.first-img img{width:100%!important;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}#header-inner img{max-width:350px;height:auto;width:100%;margin:0 auto}h1.title{font:$(headerTitle.font.style)}.description span{font:$(headerSubTitle.font.style)}.MeDes-header{height:100%;width:100%;top:0;position:absolute}.MeDes-parallax{height:150%;width:100%;top:0;position:absolute}.header-small{padding:93.5px 0 35px}.header-medium{padding:128.5px 0 70px}.header-large{padding:158.5px 0 100px}.widget h2{font-size:larger;margin:10px 0}.Profile .widget-content{text-align:center}.Profile img{max-height:50%;float:unset;margin:0 auto;border-radius:100%}.Profile a.profile-link:after{font-family:Fontawesome;content:' \f105'}.label-size{background:$(element.color);display:block;float:left;margin:0 3px 3px 0;color:#fff;font-size:14px;overflow:hidden}.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5{font-size:100%;filter:alpha(100);opacity:10}.cloud-label-widget-content{text-align:left;margin-top:1em}.label-size a,.label-size span{display:inline-block;color:#fff!important;padding:6px 8px}.label-size:hover{opacity:.8}.label-count{white-space:nowrap;margin-left:-3px;background:rgba(0,0,0,0.07);font-size:12px;padding:10px!important;opacity:.8}.label-size{line-height:1.2}h2.date-header{font-size:small;font-weight:unset;color:#ddd;margin:0}h3.post-title.entry-title{padding:10px 0 0;font-size:x-large}.post-header{line-height:1.6;font-size:80%;color:#aaa}.post-header a{color:#ccc!important}.post-author,.post-timestamp,.comment-total{margin-right:1em;margin-left:0}.MeDes-share-button{position:relative;width:100%;padding:5px 0;display:inline-block;margin:0 auto;border-bottom:1px solid rgba(0,0,0,.08);overflow:hidden}.MeDes-share-button .share-wrap{display:block;overflow:hidden;max-width:700px;margin:0 auto}.MeDes-share-button .share-wrap .icon-wrapper{display:inline-block;width:31px;float:left;text-align:center;color:#FFF;background:rgba(0,0,0,0.08)}.MeDes-share-button .share-wrap .text-wrapper{text-align:center;margin:0 auto;display:inline-block;min-width:41px;color:#FFF}.MeDes-share-button .share-wrap ul{margin:0;padding:0!important}.MeDes-share-button .share-wrap ul li{list-style:none;list-style-type:none;padding:0;margin:2px;float:left;width:16%;max-width:115px;display:inline-block;font-size:13px;overflow:hidden;text-align:left;height:32px;line-height:32px;color:#fff;border-radius:3px;transition:all .4s}.MeDes-share-button .share-wrap ul li a,.MeDes-share-button .share-wrap ul li a:hover{color:#fff;cursor:pointer;line-height:32px;height:100%;display:block;text-decoration:none}.MeDes-share-button .share-wrap ul li .fa{color:#fff;font-size:16px;font-weight:400;font-family:FontAwesome;display:inline-block;text-align:center;padding:0;height:32px;line-height:inherit;width:30px;background-color:rgba(0,0,0,.1)}.MeDes-share-button .share-wrap .btn_fb .share-btn,.MeDes-share-button .share-wrap .btn_twet .share-btn,.MeDes-share-button .share-wrap .btn_gplus .share-btn,.MeDes-share-button .share-wrap .btn_pinterst .share-btn,.MeDes-share-button .share-wrap .btn_linkdin .share-btn,.MeDes-share-button .share-wrap .btn_whatsapp .share-btn{position:relative;color:#fff;display:inline-block;text-align:center;font-weight:700;font-size:11px;float:right;min-width:12px;padding:0 8px 0 0}.MeDes-share-button .share-wrap .btn_fb{background:#3a579a}.MeDes-share-button .share-wrap .btn_fb:hover{background:#314a83}.MeDes-share-button .share-wrap .btn_twet{background:#00abf0}.MeDes-share-button .share-wrap .btn_twet:hover{background:#0092cc}.MeDes-share-button .share-wrap .btn_gplus{background:#df4a32}.MeDes-share-button .share-wrap .btn_gplus:hover{background:#be3f2b}.MeDes-share-button .share-wrap .btn_pinterst{background:#cd1c1f}.MeDes-share-button .share-wrap .btn_pinterst:hover{background:#ae181a}.MeDes-share-button .share-wrap .btn_linkdin{background:#2554BF}.MeDes-share-button .share-wrap .btn_linkdin:hover{background:#224EB4}.MeDes-share-button .share-wrap .btn_whatsapp{background:#25D366}.MeDes-share-button .share-wrap .btn_whatsapp:hover{background:#22bf5d}@media only screen and (max-width: 980px){.MeDes-share-button .share-wrap .btn_pinterst,.MeDes-share-button .share-wrap .btn_linkdin,.MeDes-share-button .share-wrap .btn_whatsapp,{width:34px}.MeDes-share-button .share-wrap .btn_fb .share-btn,.MeDes-share-button .share-wrap .btn_twet .share-btn,.MeDes-share-button .share-wrap .btn_gplus .share-btn,.MeDes-share-button .share-wrap .btn_pinterst .share-btn,.MeDes-share-button .share-wrap .btn_linkdin .share-btn,.MeDes-share-button .share-wrap .btn_whatsapp .share-btn{display:none}}@media only screen and (max-width:900px){.MeDes-share-button .share-wrap ul li a,.MeDes-share-button .share-wrap ul li a:hover{color:#fff;cursor:pointer;line-height:32px;font-size:11px;height:100%;display:block}.MeDes-share-button .share-wrap .text-wrapper{min-width:34px}.MeDes-share-button .share-wrap .btn_linkdin,.MeDes-share-button .share-wrap .btn_whatsapp,.MeDes-share-button .share-wrap .btn_pinterst{width:32px}.MeDes-share-button .share-wrap ul li{margin:1px 3px}}@media only screen and (max-width:479px){.MeDes-share-button .share-wrap .share{border:0;margin:0 5px 0 1px;overflow:visible;width:80px}.MeDes-share-button .share-wrap ul li{width:32px;margin:2px}.MeDes-share-button .share-wrap .text-wrapper{display:none}.MeDes-share-button .share-wrap ul li .fa{width:32px}}nav{position:absolute;z-index:3;width:100%}.fixed,.fixed-autohide,.fixed-autohide-res{position:fixed;z-index:4;width:100%}nav.transparent .simple-menu-A,nav.fixed-transparent .simple-menu-A{background:transparent;transition:.5s ease}nav.fixed-transparent{position:fixed;z-index:4;width:100%}nav.transparent.nav-transparent .simple-menu-A,nav.fixed-transparent.nav-transparent .simple-menu-A{background:$(topnav.background)}.nav-down{top:0;transition:.3s ease}.nav-up{top:-65px;transition:.3s ease}.simple-menu-A{background-color:$(topnav.background);font:normal normal 14px Lato;z-index:3;padding:7px 0;opacity:.95}.simple-menu-A .logonav img,.simple-menu-A .logonav-center,.simple-menu-A .logonav-center-res{height:32px;margin:5px 10px 0}.simple-menu-A .logonav-center{position:absolute;left:45%;transform:translateX(-45%)}.simple-menu-A ul{margin:0;padding:0;list-style:none;overflow:hidden}.simple-menu-A li a{display:block;padding:15px 20px;text-decoration:none;color:$(topnav.content.color);font-size:smaller}.simple-menu-A li a:hover,.simple-menu-A .menu-btn:hover{opacity:1}.simple-menu-A .menu{clear:both;max-height:0;transition:max-height .5s ease-out}.simple-menu-A ul.menu{font:$(topnav.font.style);padding:0!important}.simple-menu-A ul.menu-center{position:sticky;float:left;left:50%;transform:translateX(-50%)}.simple-menu-A .sociallink{padding:12px 10px 10px;font:$(topnav.font.style)}.simple-menu-A .sociallink a{color:#FFF}.simple-menu-A .sociallink span{padding:10px 5px;border-right:1px solid $(topnav.element.color)}.simple-menu-A .sociallink span i,.simple-menu-A .sociallink span a{color:$(topnav.content.color)}.simple-menu-A .sociallink a:last-child{padding-right:5px}.simple-menu-A span.widget-item-control{position:absolute;left:80px;top:40px}.simple-menu-A .menu-icon-v,.simple-menu-A .menu-icon{cursor:pointer;padding:18px;position:relative;user-select:none;background:$(topnav.element.color)}.simple-menu-A .menu-icon-v .navicon,.simple-menu-A .menu-icon .navicon{display:block;height:2px;position:relative;transition:background .2s ease-out;width:18px}.simple-menu-A .menu-icon-v .navicon:before,.simple-menu-A .menu-icon-v .navicon:after,.simple-menu-A .menu-icon .navicon:before,.simple-menu-A .menu-icon .navicon:after{background:$(topnav.content.color);content:'';display:block;height:100%;position:absolute;transition:all .2s ease-out}.simple-menu-A .menu-icon-v .navicon:before,.simple-menu-A .menu-icon-v .navicon:after{width:100%}.simple-menu-A .menu-icon .navicon:before,.simple-menu-A .menu-icon .navicon:after{width:120%}.simple-menu-A .menu-icon-v .navicon:before{top:0;right:5.5px;transform:rotate(45deg)}.simple-menu-A .menu-icon .navicon:before{top:10px}.simple-menu-A .menu-icon-v .navicon:after{top:0;left:5.5px;transform:rotate(-45deg)}.simple-menu-A .menu-icon .navicon:after{top:0}.simple-menu-A .menu-btn{display:none}.simple-menu-A .menu-btn:checked ~ .menu{max-height:450px}.simple-menu-A .menu-btn:checked ~ .menu-icon-v .navicon,.simple-menu-A .menu-btn:checked ~ .menu-icon .navicon{background:transparent}.simple-menu-A .menu-btn:checked ~ .menu-icon-v .navicon:before,.simple-menu-A .menu-btn:checked ~ .menu-icon .navicon:before{transform:rotate(-45deg)}.simple-menu-A .menu-btn:checked ~ .menu-icon-v .navicon:after,.simple-menu-A .menu-btn:checked ~ .menu-icon .navicon:after{transform:rotate(45deg)}.simple-menu-A .menu-btn:checked ~ .menu-icon-v:not(.steps) .navicon:before,.simple-menu-A .menu-btn:checked ~ .menu-icon-v:not(.steps) .navicon:after,.simple-menu-A .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,.simple-menu-A .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after{top:0}.search-box{background:$(topnav.background);float:right;width:270px;padding:10px}.search-box .search-form{padding:10px;width:175px;border:none}.search-box .search-submit{width:65px;padding:11px;border:none;background:none;background:rgba(0,0,0,0.1);color:$(topnav.content.color)}.show-search{display:none}#nav-bottom .simple-menu-B{padding:0}#nav-bottom .simple-menu-B li{list-style-type:none;padding:10px 0}#nav-bottom .simple-menu-B li a{margin:10px}.container,nav .container{max-width:1200px;padding:0;margin:0 auto;overflow:hidden}.container-small,nav .container-small{max-width:950px;padding:0;margin:0 auto;overflow:hidden}.container-large,nav .container-large{max-width:1400px;padding:0;margin:0 auto;overflow:hidden}.container-fluid{max-width:100%}.container,.container-small,.container-large{padding:40px 0}.row{display:flex;flex-wrap:wrap}.row-top{align-items:flex-start}.row-center{align-items:center}.row-bottom{align-items:flex-end}.MeDes-row{margin:0 -1em;display:flex;flex-wrap:wrap}.column,.columns{float:left;position:relative;min-height:1px}.content{margin:0 1em}.hide-all,.show-res,.hide-res{display:none}.one,.one-res,.one-half-res{width:8.333%}.two,.two-res,.two-half-res{width:16.666%}.three,.three-res,.three-half-res{width:25%}.four,.four-res,.four-half-res{width:33.333%}.five,.five-res,.five-half-res{width:41.666%}.six,.six-res,.six-half-res{width:50%}.seven,.seven-res,.seven-half-res{width:58.334%}.eight,.eight-res,.eight-half-res{width:66.667%}.nine,.nine-res,.nine-half-res{width:75%}.ten,.ten-res,.ten-half-res{width:83.334%}.eleven,.eleven-res,.eleven-half-res{width:91.667%}.twelve,.twelve-res,.twelve-half-res{width:100%}.one-fifth,.one-fifth-res,.one-fifth-half-res{width:20%}.two-fifth,.two-fifth-res,.two-fifth-half-res{width:40%}.three-fifth,.three-fifth-res,.three-fifth-half-res{width:60%}.four-fifth,.four-fifth-res,.four-fifth-half-res{width:80%}.one,.two,.three,.four,.five,.six,.seven,.eight,.nine,.ten,.twelve,.one-res,.two-res,.three-res,.four-res,.five-res,.six-res,.seven-res,.eight-res,.nine-res,.ten-res,.eleven-res,.twelve-res,.one-fifth,.two-fifth,.one-half-res,.two-half-res,.three-half-res,.four-half-res,.five-half-res,.six-half-res,.seven-half-res,.eight-half-res,.nine-half-res,.ten-half-res,.eleven-half-res,.twelve-half-res,.three-fifth,.four-fifth{margin:0 0 1em}.thumbnail-box .thumb-wrapper a{color:$(thumb.link.color)}.thumbnail-box .thumb-wrapper{background-color:$(thumb.bgcolor)!important;border-color:$(element.color)!important;color:$(thumb.txtcolor)!important}.thumbnail-box .item-title,#sidebar .widget h2{font:$(thumb.font.style)}.thumbnail-box .thumb-wrapper,#sidebar .widget{font:$(thumbcontent.font.style)}#sidebar .widget a{color:$(sidabar.link.color)}#sidebar .widget{background-color:$(sidabar.bgcolor);color:$(sidabar.txtcolor);border-color:$(element.color)!important}.pull-left{float:left}.pull-right{float:right}.pull-none{float:none}.box-dark .content{background:$(bg.dark.color);color:$(txt.dark.color)}.box-light .content{background:$(bg.light.color);color:$(txt.light.color)}.box-rounded-small{border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;overflow:hidden}.box-rounded,.box-rounded-normal{border-radius:7px;-webkit-border-radius:7px;-moz-border-radius:7px;overflow:hidden}.box-rounded-large{border-radius:9px;-webkit-border-radius:9px;-moz-border-radius:9px;overflow:hidden}.box-rounded-x-large{border-radius:40px;-webkit-border-radius:40px;-moz-border-radius:40px;overflow:hidden}.box-shadow{box-shadow:rgba(0,0,0,0.15) 0 0 20px 0}.box-shadow-soft{box-shadow:0 0 20px 1px rgba(0,0,0,0.08)}.img-border{margin:-5px;padding:5px;box-shadow:rgba(0,0,0,0.1) 1px 1px 20px 1px}.reveal{opacity:0;-webkit-transform:translate3d(0,100px,0);transform:translate3d(0,100px,0);-webkit-transition:opacity 0.8s,-webkit-transform .8s;transition:opacity 0.8s,-webkit-transform .8s;transition:opacity 0.8s,transform .8s;transition:opacity 0.8s,transform 0.8s,-webkit-transform .8s}.reveal_visible{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.hover-scale,.hover-jump{transition:.3s ease}.hover-scale:hover{transform:scale(1.03)}.hover-jump:hover{transform:translate3d(0,-5px,1px)}a:link{text-decoration:none;color:$(thumb.link.color);transition:.3s ease-out}a:visited{text-decoration:none;color:$(thumb.link.color)}a:hover{text-decoration:none;opacity:.7;transition:.3s ease-out}header#header-wrapper a{color:$(header.txtcolor)}.post-wrapper h1{font-size:xx-large}.post-wrapper h2{margin:0;font-size:x-large}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.text-unset{text-transform:unset}.text-uppercase{text-transform:uppercase}.text-lowercase{text-transform:lowercase}.text-capitalize{text-transform:capitalize}.post-wrapper ol,.post-wrapper ul{padding:0 0 0 1.5em !important}ul.no-style,ol.no-style{list-style:none;margin:1em 0!important;padding:0 .5em!important}.post-wrapper ul li{text-align:left}hr{border-style:solid;border-width:0 0 1px;margin:1em 0;opacity:.5}hr.MeDes-bold{border-width:0 0 2px}hr.MeDes-dashed{border-style:dashed}hr.MeDes-dashed-bold{border-style:dashed;border-width:0 0 2px}hr.MeDes-dotted{border-style:dotted}hr.MeDes-dotted-bold{border-style:dotted;border-width:0 0 2px}blockquote{display:block;padding:20px;background:#f7f7f7;color:#adadad;margin:10px 0;position:relative;border:1.5px solid #f0f0f0;overflow:hidden;font-style:normal;box-shadow:0 7px 10px rgba(206,206,206,0.15)}blockquote small{opacity:1}blockquote:before{position:absolute;content:"\f10e";font-family:FontAwesome;font-size:4rem;opacity:.1;right:10px;top:-10px}.MeDes-success{background-color:#4ce883!important;border:1.5px solid #43da78;color:#fff}.MeDes-success:before{position:absolute;content:"\f00c";font-family:FontAwesome;font-size:4rem;opacity:.4;right:10px;top:-10px}.MeDes-alert{background-color:#8ac5ff!important;border:1.5px solid #79baf9;color:#fff}.MeDes-alert:before{position:absolute;content:"\f05a";font-family:FontAwesome;font-size:4rem;opacity:.4;right:10px;top:-10px}.MeDes-warning{background-color:#fbb91a!important;border:1.5px solid #f3b00f;color:#fff}.MeDes-warning:before{position:absolute;content:"\f071";font-family:FontAwesome;font-size:3.5rem;opacity:.4;right:10px;top:-10px}.MeDes-error{background-color:#ff4835!important;border:1.5px solid #f53a27;color:#fff}.MeDes-error:before{position:absolute;content:"\f06a";font-family:FontAwesome;font-size:4rem;opacity:.4;right:10px;top:-10px}.post-wrapper img{margin:.5em 0}.Medes-Responsive-Video{position:relative;padding-bottom:56.25%;height:0;margin:1em 0 1.5em}.Medes-Responsive-Video iframe{position:absolute;top:0;left:0;width:100%;height:100%}#MeDes-accordion .accordion{background-color:$(accordion.bgcolor);color:$(accordion.txtcolor);cursor:pointer;padding:18px;width:100%;margin-bottom:10px;border:none;text-align:left;outline:none;font-size:15px;transition:.4s}#MeDes-accordion .active,.accordion:hover{background-color:$(accordion.bgcolor.active)}#MeDes-accordion .accordion:after{content:'\002B';color:$(accordion.txtcolor);font-weight:700;float:right;margin-left:5px}#MeDes-accordion .active:after{content:"\2212"}#MeDes-accordion .content{max-height:0;overflow:hidden;transition:max-height .2s ease-out}.MeDes-btn{background-color:$(main.color);border:none;color:#fff!important;padding:15px 32px;display:inline-table;font-size:16px;margin:4px 2px;cursor:pointer;transition:.3s ease-in-out!important;vertical-align:middle}.MeDes-btn:hover{opacity:.8;box-shadow:0 3px 10px 0 rgba(0,0,0,0.3)}.MeDes-btn-o{background:transparent!important;border:1px solid $(main.color);color:$(main.color);padding:15px 32px;display:inline-table;font-size:16px;margin:4px 2px;cursor:pointer;transition:.3s ease-in-out}.MeDes-btn-o:hover{background:$(main.color)!important;color:#FFF}.btn-a{background-color:$(second.color)}.btn-b{background-color:$(third.color)}.btn-c{background-color:$(fourth.color)}.btn-d{background-color:$(netral.color)}.MeDes-btn-o.btn-a{color:$(second.color);border-color:$(second.color)}.MeDes-btn-o.btn-a:hover{background-color:$(second.color)!important;color:#FFF}.MeDes-btn-o.btn-b{color:$(third.color);border-color:$(third.color)}.MeDes-btn-o.btn-b:hover{background-color:$(third.color)!important;color:#FFF}.MeDes-btn-o.btn-c{color:$(fourth.color);border-color:$(fourth.color)}.MeDes-btn-o.btn-c:hover{background-color:$(fourth.color)!important;color:#FFF}.MeDes-btn-o.btn-d{color:$(netral.color);border-color:$(netral.color)}.MeDes-btn-o.btn-d:hover{background-color:$(netral.color)!important;color:#FFF}.btn-block{width:100%;display:block}#MeDes-pager{padding:10px;background-color:$(sidabar.bgcolor);color:$(sidabar.txtcolor);margin:1em 0}#MeDes-pager .MeDes-pages-right{width:50%;float:left;margin:0;text-align:left;transition:all .3s ease-out}#MeDes-pager .MeDes-pages-left{width:50%;float:right;margin:0;text-align:right;transition:all .3s ease-out}#MeDes-pager .current-pageleft{padding:0 0 0 15px}#MeDes-pager .current-pageright{padding:0 15px 0 0}#MeDes-pager .pager-title-left{font-size:22px;font-weight:700;text-transform:uppercase;transition:all .3s ease-out}#blog-pager-newer-link{float:left;padding:0 0 0 15px}#blog-pager-older-link{float:right;padding:0 15px 0 0}#MeDes-pages h1,#MeDes-pages h3.post-title.entry-title{font:$(headerTitle.font.style);padding-bottom:10px}#MeDes-pages h2{font:$(headerSubTitle.font.style);padding-bottom:10px;opacity:.8}#MeDes-pages p,#MeDes-pages ol,#MeDes-pages ul{opacity:.8}#MeDes-pages .column{margin-top:10px}.MeDes-labpost{margin:0}.labpost-button{padding:0 10px}.labpost-button span{padding:15px 20px;cursor:pointer;position:relative;display:inline-block}.labpost-button span.active{border-bottom:4px solid $(element.color);font-weight:700}.labpost-content{padding-top:1em}.loader{position:absolute;left:50%;top:50%;margin-left:-27.5px;margin-top:-27.5px;transition:all .3s linear}.hide-load .loader{opacity:0}.squarin{background:#374140;width:15px;height:15px;float:left;top:-10px;margin-right:5px;margin-top:5px;position:relative;opacity:0;-webkit-animation:enter 6s infinite;animation:enter 6s infinite}.enter{top:0;opacity:1}.squarin:nth-child(1){-webkit-animation-delay:1.8s;-moz-animation-delay:1.8s;animation-delay:1.8s}.squarin:nth-child(2){-webkit-animation-delay:2.1s;-moz-animation-delay:2.1s;animation-delay:2.1s}.squarin:nth-child(3){-webkit-animation-delay:2.4s;-moz-animation-delay:2.4s;animation-delay:2.4s;background:#09c}.squarin:nth-child(4){-webkit-animation-delay:.9s;-moz-animation-delay:.9s;animation-delay:.9s}.squarin:nth-child(5){-webkit-animation-delay:1.2s;-moz-animation-delay:1.2s;animation-delay:1.2s}.squarin:nth-child(6){-webkit-animation-delay:1.5s;-moz-animation-delay:1.5s;animation-delay:1.5s}.squarin:nth-child(8){-webkit-animation-delay:.3s;-moz-animation-delay:.3s;animation-delay:.3s}.squarin:nth-child(9){-webkit-animation-delay:.6s;-moz-animation-delay:.6s;animation-delay:.6s}.MeDes-timeline{position:relative}.MeDes-timeline.box-light::after{content:'';position:absolute;width:3px;background-color:$(bg.light.color);top:0;bottom:0;left:50%}.MeDes-timeline.box-dark::after{content:'';position:absolute;width:3px;background-color:$(bg.dark.color);top:0;bottom:0;left:50%}.timeline-box{padding:10px 40px;position:relative;background-color:inherit;width:50%}.timeline-box h2{color:$(main.color)}.timeline-box::after{content:'';position:absolute;width:15px;height:15px;right:-9px;background-color:$(main.color);top:25px;border-radius:50%;z-index:1}.timeline-box .content{padding:20px 30px;margin:0;position:relative}.left{left:0}.right{left:50%}.box-light .left::before{content:" ";height:0;position:absolute;top:22px;width:0;z-index:1;right:30px;border:medium solid;border-width:10px 0 10px 10px;border-color:transparent transparent transparent $(bg.light.color)}.box-light .right::before{content:" ";height:0;position:absolute;top:22px;width:0;z-index:1;left:30px;border:medium solid;border-width:10px 10px 10px 0;border-color:transparent $(bg.light.color) transparent transparent}.box-dark .left::before{content:" ";height:0;position:absolute;top:22px;width:0;z-index:1;right:30px;border:medium solid;border-width:10px 0 10px 10px;border-color:transparent transparent transparent $(bg.dark.color)}.box-dark .right::before{content:" ";height:0;position:absolute;top:22px;width:0;z-index:1;left:30px;border:medium solid;border-width:10px 10px 10px 0;border-color:transparent $(bg.dark.color) transparent transparent}.right::after{left:-5px}.pricing-A ul,.pricing-B ul{list-style-type:none;text-align:center;padding:0!important;margin:0}.pricing-A .price-package{color:#FFF;padding:.5em!important;margin:0;font-size:25px}.pricing-A h2{background:rgba(255,255,255,.2);border-radius:25px;font-size:15px!important;padding:10px}.pricing-B .price-package{color:#FFF;font-size:25px}.pricing-B .price-package h3{padding:.5em 1em}.pricing-B .price-package h2{background:rgba(255,255,255,.2);border-radius:0;font-size:15px!important;padding:10px}.box-dark .pricing-include li{text-align:center!important;padding:.7em;border-bottom:1px solid rgba(238,238,238,0.05)}.box-light .pricing-include li{text-align:center!important;padding:.7em;border-bottom:1px solid rgba(255,255,255,0.5)}.columns:nth-child(1) .content .price-package{background:$(fourth.color)}.columns:nth-child(2) .content .price-package{background:$(third.color)}.columns:nth-child(3) .content .price-package{background:$(second.color)}.columns:nth-child(4) .content .price-package{background:$(main.color)}.select-price{padding:5px}.contact-form-name,.contact-form-email,.contact-form-email-message{max-width:100%;padding:15px 10px;background:$(ct.form.bgcolor);border:1px solid $(ct.form.bdrcolor);color:$(ct.form.plcholdercolor)}.contact-form-email:hover,.contact-form-name:hover,.contact-form-email-message:hover{border:1px solid $(ct.form.bdrcolor);box-shadow:none}.contact-form-email:focus,.contact-form-name:focus,.contact-form-email-message:focus{border:1px solid $(ct.form.bdrcolor);box-shadow:none}.contact-form-button-submit{width:100%;height:40px;border:1px solid $(ct.submit.color);background:$(ct.submit.color);color:$(ct.submit.txtcolor)}.contact-form-button-submit:hover{background:$(ct.submit.color);border:1px solid $(ct.submit.color);opacity:.8}.contact-form-button-submit.disabled,.contact-form-button-submit.disabled:hover,.contact-form-button-submit.disabled:active{background:$(ct.submit.color)!important;border:1px solid $(ct.submit.color)!important;opacity:.8}@media (min-width: 480px){.hide-res{display:block!important}.simple-menu-A li{float:left}.simple-menu-A li a{display:block;padding:10px 20px}.simple-menu-A .menu{clear:none;max-height:none}.simple-menu-A .menu-icon,.simple-menu-A .menu-icon-v{display:none}.simple-menu-B li{display:inline}}@media (max-width: 480px){.show-res{display:block!important}.nav-down-res{top:0;transition:.3s ease}.nav-up-res{top:-60px;transition:.3s ease}.simple-menu-A ul.menu{width:100%;background-color:$(topnav.background)}.simple-menu-A .logonav-center-res{position:absolute;left:45%;transform:translateX(-45%)}.search-box{margin:0 auto;float:unset}.show-hide-search{display:none}.one-res,.two-res,.three-res,.four-res,.five-res,.six-res,.seven-res,.eight-res,.nine-res,.ten-res,.eleven-res,.twelve-res,.one-fifth-res,.two-fifth-res,.three-fifth-res,.four-fifth-res{width:100%}.one-half-res,.two-half-res,.three-half-res,.four-half-res,.five-half-res,.six-half-res,.seven-half-res,.eight-half-res,.nine-half-res,.ten-half-res,.eleven-half-res,.twelve-half-res,.one-fifth-half-res,.two-fifth-half-res,.three-fifth-half-res,.four-fifth-half-res{width:50%}.first-img{height:180px}ul.menu.pull-right{float:left}.MeDes-parallax{top:0!important;height:100%!important}.pull-none-res{float:none}#thumbnail-posts-view .content{margin:0 0 1em}.text-left-res{text-align:left}.text-center-res{text-align:center}.text-right-res{text-align:right}.text-unset-res{text-transform:unset}.text-uppercase-res{text-transform:uppercase}.text-lowercase-res{text-transform:lowercase}.text-capitalize-res{text-transform:capitalize}#MeDes-pages h1{font-size:30px}#MeDes-pages h2{font-size:25px}.MeDes-timeline::after{left:31px!important}.timeline-box{width:100%;padding-left:70px;padding-right:25px}.box-light .timeline-box::before{left:60px;border:medium solid $(bg.light.color);border-width:10px 10px 10px 0;border-color:transparent $(bg.light.color) transparent transparent}.box-dark .timeline-box::before{left:60px;border:medium solid $(bg.dark.color);border-width:10px 10px 10px 0;border-color:transparent $(bg.dark.color) transparent transparent}.left::after,.right::after{left:25px}.right{left:0}}
]]></b:skin>

Back to top ▴


How to Install

Follow the step bellow to instal theme:

  • Login to your Blogger account.
  • Select Blog.
  • Go to Blogger > format_paint Theme > Backup/Restore
  • Choose Theme (.xml)
  • Klik Upload
  • Don't Forget disable Mobile Theme. Go to Blogger > format_paint Theme > > No. Show desktop theme ...
  • After upload template inject script controller to your template.
    Get your Blog ID > Paste Blog Id to this Form > Get Code > Paste to [Script] Widget.

    How to identify blog id


    With inject the script will showing content like Logo icon on navbar, social media link, navigation pager, contact form notification massage, copyright footer etc.
    Advance Setting
  • Done, Enjoy it.
We recomended remove and clean all of widget before install this template. Or backup before install.

Back to top ▴


Element & Assets Design

Sample Text Format & Heading

Sample Text Format:

This is a Heading h1

This is a Heading h2

This is a Heading h3

This is a Heading h4

This is text Bold style

This is text Italic style

This is text Strike style

This is sample Link text

1st Winner

1st Winner

Code:

<h1>This is a Heading h1</h1>

<h2>This is a Heading h2</h2>

<h3>This is a Heading h3</h3>

<h4>This is a Heading h4</h4>

This is text <b>Bold</b> style

This is text <i>Italic</i> style

This is text <strike>Strike</strike> style

This is sample <a href="#">Link</a> text

1<sup>st</sup> Winner

1<sub>st</sub> Winner

Back to top ▴

Paragraph

Sample Paragraph:

Sea adipisci repudiare ei, mei dicit iuvaret ei. An nec dictas percipit. Habeo libris definitionem vis eu, audire mediocritatem ei cum. Cum omnesque legendos cu, impetus laboramus ei vix. Dolorum percipit dignissim nam ea, no omnis albucius invidunt vis. Tibique suscipiantur no eam, dolore delicatissimi eos ei. Affert aliquip patrioque id nec, per et aliquam theophrastus.

Code:

<p>Sea adipisci repudiare ei, mei dicit iuvaret ei. An nec dictas percipit. Habeo libris definitionem vis eu, audire mediocritatem ei cum. Cum omnesque legendos cu, impetus laboramus ei vix. Dolorum percipit dignissim nam ea, no omnis albucius invidunt vis. Tibique suscipiantur no eam, dolore delicatissimi eos ei. Affert aliquip patrioque id nec, per et aliquam theophrastus.</p>

Add Values with Paragraph Modifier Class:

ValueDescription
text-leftSet text align left
text-centerSet text align center
text-rightSet text align right
text-uppercaseSet text transform Uppercase
text-lowercaseSet text transform Lowercase
text-capitalizeSet text transform Capitalize
text-unsetSet text transform unset
text-left-resSet text align left (When small screens view).
text-center-resSet text align center (When small screens view).
text-right-resSet text align right (When small screens view).
text-uppercase-resSet text transform Uppercase (When small screens view).
text-lowercase-resSet text transform Lowercase (When small screens view).
text-capitalize-resSet text transform Capitalize (When small screens view).
text-unset-resSet text transform unset (When small screens view).
<p class="[Values]">[Your Content]</p>

Add class value to modify text format. Possible to fill more than one value modifier, if want to set different style between big or small screens. Try it with builder:

Paragraph Builder

Preview

Code

<!-- Paragraph -->
<p class="{{textAlign}} {{textAlignRes}} {{textTransform}} {{textTransformRes}}">{{sampleText}}</p>
<!-- Paragraph END -->

Modifier

Content

More sample click here

Back to top ▴


Utility Class

MeDes Utility class design for corner box styling, box sahding, visibility element on big or small screen, hover animation style, scrolling animation style, floating style etc.

Utility Class ValueDescription
box-rounded-smallMake corner style small rounded
box-rounded / box-rounded-normalMake corner style rounded
box-rounded-largeMake corner style large rounded
box-rounded-x-largeMake corner style extra large rounded
box-shadowAdd shadow around box rounded
box-shadow-softAdd soft shadow around box rounded
hover-scaleMake animation scaling when hovering
hover-jumpMake animation jumping when hovering
show-all (no input)Without input automaticly showing all size screen
hide-all/hideHide all size screen
show-resOnly showing item on small screen
hide-resOnly hidding item on small screen

Read next part to know how to use utility class.

Back to top ▴


Image

  

Sample image:

 

Code:

<img src="https://4.bp.blogspot.com/-gLTuBWsVEq0/W13KhGze72I/AAAAAAAACVU/Hnh1bLfFfX4LowvqCGBKybgvwuhxDE-1ACLcBGAs/s400/why-blogger.jpg" class="box-rounded-large">

Just standard img html but you can modify with Add MeDes Utility class.

Structure:

<img src="[IMG URL]" class="[Utility Value]">

Image Builder

Preview

Code

<!-- Img -->
<img src="{{imgBuider}}" class="{{imgModifier}}">
<!-- Img END -->

Modifier

Back to top ▴


Button

Sample Button:

Button (X) Button A Button B Button C Button D
Button (X) Button A Button B Button C Button D
Hover Solid Button X or A to test Utility Class

Code:

<a href="[URL]" class="MeDes-btn box-rounded-x-large hover-jump">Button (X)</a>
<a href="[URL]" class="MeDes-btn btn-a box-rounded-large hover-scale">Button A</a>
<a href="[URL]" class="MeDes-btn btn-b box-rounded">Button B</a>
<a href="[URL]" class="MeDes-btn btn-c box-rounded-small">Button C</a>
<a href="[URL]" class="MeDes-btn btn-d">Button D</a>

<a href="[URL]" class="MeDes-btn-o">Button (X)</a>
<a href="[URL]" class="MeDes-btn-o btn-a box-rounded-small">Button A</a>
<a href="[URL]" class="MeDes-btn-o btn-b box-rounded">Button B</a>
<a href="[URL]" class="MeDes-btn-o btn-c box-rounded-large">Button C</a>
<a href="[URL]" class="MeDes-btn-o btn-d box-rounded-x-large">Button D</a>
Replace [URL] with target button link

Function Values of Button Modifier Class:

Main ValueDescriptionColor Value
MeDes-btnSolid Bottonbtn-a
btn-b
MeDes-btn-oOutline Bottonbtn-c
btn-d
Possible to add Utility Class
<a class="[Main Value] [Color Value] [Utility Value]">[Button Text]</a>

Try it with builder:

Button Builder

Preview

{{btntext}}

Get Code

<!-- Button -->
<a href="{{linktarget}}" class="{{btnStyle}} {{btnSwatch}} {{boxRounded}}">{{btntext}}</a>
<!-- Button END -->

Modifier

Setting your color swatch in blogger theme Designer


By Default MeDes Button Assets have 5 colors (green, orange, red, blue, gray). You can change color swatch button in Blogger Template Designer. Go to Blogger > format_paint Theme > Customize

Back to top ▴

Blockquotes & Box Model

Sample Button:

This is blockquote Paragraph
Alert message : This alert needs your attention.
Alert message : This alert needs your attention.
Warning message : Warning! Best check yo self.
Error message : Oh snap! Change a few things up.
Hover error message to test Utility Class

Code:

<blockquote>This is blockquote Paragraph</blockquote>
<blockquote class="MeDes-success box-rounded-small">Alert message : This alert needs your attention.</blockquote>
<blockquote class="MeDes-alert box-rounded">Alert message : This alert needs your attention.</blockquote>
<blockquote class="MeDes-warning box-rounded-x-large">Warning message : Warning! Best check yo self.</blockquote>
<blockquote class="MeDes-error hover-scale">Error message : Oh snap! Change a few things up.</blockquote>

Function Values of Button Modifier Class:

Main ValueDescription
(no input)Standard Blockquote
MeDes-successSuccess notification box
MeDes-alertAlert notification box
MeDes-warningWarning notification box
MeDes-errorError notification box
Possible to add Utility Class

Back to top ▴

Diver (Spacing)

Sample diver:


Content
Content
Content
Content
Content
Content

Code:

<hr>
Content
<hr class="MeDes-dashed">
Content
<hr class="MeDes-dotted">
Content
<hr class="MeDes-bold">
Content
<hr class="MeDes-dashed-bold">
Content
<hr class="MeDes-dotted-bold">
Content

Function Values of Diver Modifier Class:

Main ValueDescription
MeDes-boldBold Line
MeDes-dashedDashed Line
MeDes-dashed-boldDashed Bold Line
MeDes-dottedDotted Line
MeDes-dotted-boldDotted Bold Line

Back to top ▴

Accordion

Sample Accordion:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Code:

<div id="MeDes-accordion">
    <button class="accordion">Section 1</button>
    <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>

    <button class="accordion box-rounded hover-jump">Section 2</button>
    <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>

    <button class="accordion box-rounded-x-large hover-scale">Section 3</button>
    <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
</div>

Follow the structure to make your own accordion.

<div id="MeDes-accordion">
    <!--Start Looping-->
    <button class="accordion [Utility Value]">[Button Togle Title]</button>
    <div class="content">
    <p>[Content Accordion]</p>
    </div><!--End Looping-->
</div>

Edit item with [-] symbol with your content and loop to make next item accordion. Posible to utility class like style corner, shadow, animation hover etc.

You can change button color swatch accordion in Blogger Template Designer. Go to Blogger > Theme > Customize


MeDes Style Structure

Container Wrapper

Set container wrapper class to set maximal width.

ValueDescription
container-smallSet maximal width small.
containerSet maximal width medium.
container-largeSet maximal width very wide.
(No Input)Set maximal width following your screen.

Back to top ▴


Columns Grid System

Media Design grid system make simple to make grid layout. Structure code grid system are row and collumns. Start with row structure.

Sample Row Structure:

Sea adipisci repudiare ei, mei dicit iuvaret ei. An nec dictas percipit.

Sea adipisci repudiare ei, mei dicit iuvaret ei. An nec dictas percipit. Habeo libris definitionem vis eu, audire mediocritatem ei cum. Cum omnesque legendos cu, impetus laboramus ei vix.

Sea adipisci repudiare ei, mei dicit iuvaret ei. An nec dictas percipit. Habeo libris definitionem vis eu, audire mediocritatem ei cum.

Sea adipisci repudiare ei, mei dicit iuvaret ei. An nec dictas percipit. Habeo libris definitionem vis eu, audire mediocritatem ei cum. Cum omnesque legendos cu, impetus laboramus ei vix.

Sea adipisci repudiare ei, mei dicit iuvaret ei. An nec dictas percipit. Habeo libris definitionem vis eu, audire mediocritatem ei cum.

Sea adipisci repudiare ei, mei dicit iuvaret ei. An nec dictas percipit.

Code:

<div class="MeDes-row">
    [Columns Code Structure]
</div>

Function Values of Row Modifier Class:

Main ValueValueDescription
MeDes-rowrow-top / (no input)Set vertical item align top.
row-centerSet vertical item align center.
row-bottomSet vertical item align bottom.
<div class="[Main Value] [Value]">
    [Columns Code Structure]
</div>

Put the main value and select one value to set vertical align.

Sample Row Structure + Row Modifier Class:

Sea adipisci repudiare ei, mei dicit iuvaret ei. An nec dictas percipit. Habeo libris definitionem vis eu, audire mediocritatem ei cum.

Sea adipisci repudiare ei, mei dicit iuvaret ei. An nec dictas percipit. Habeo libris definitionem vis eu, audire mediocritatem ei cum. Cum omnesque legendos cu, impetus laboramus ei vix.

Sea adipisci repudiare ei, mei dicit iuvaret ei. An nec dictas percipit.

Code:

<div class="MeDes-row row-center">
    [Columns Code Structure]
</div>

After know how to make row structure now going to how to make columns. View this sample columns sructure

Sample Columns Structure:

Sea adipisci repudiare ei, mei dicit iuvaret ei. An nec dictas percipit.

Sea adipisci repudiare ei, mei dicit iuvaret ei. An nec dictas percipit.

Sea adipisci repudiare ei, mei dicit iuvaret ei. An nec dictas percipit.

Code:

<div class="MeDes-row">
    <div class="columns four">
        <div class="content">
            <p>Sea adipisci repudiare ei, mei dicit iuvaret ei. An nec dictas percipit.</p>
        </div>
    </div>
    <div class="columns four">
        <div class="content">
            <p>Sea adipisci repudiare ei, mei dicit iuvaret ei. An nec dictas percipit.</p>
        </div>
    </div>
    <div class="columns four">
        <div class="content">
            <p>Sea adipisci repudiare ei, mei dicit iuvaret ei. An nec dictas percipit.</p>
        </div>
    </div>
</div>
two-res
two-res
two-res
two-res
two-half-res
two-half-res
three-half-res
three-half-res
three-half-res
three-half-res
four
four
four
six
six
two-res
ten-res
three
nine
four
eight

View this square columns before going to making a grid:

For make columns just makesure total columns are tweleve. For example:

  1. Make 2 column that's mean 6+6=12 or 8+4=12 first column bigger than second column
  2. Make 3 column that's mean 4+4+4=12 or 5+5+2=12 first, second columns bigger and third column small
  3. Just custom your own size.

And if add modifier x-res that's mean in small screen will appearing 1 column and x-half-res that's mean in small screen will appearing 2 columns.

Function Values of Columns Modifier Class:

Main ValueValue Alt1Value Alt2Value Alt3
columns/columnoneone-resone-half-res
two-restwo-restwo-half-res
threethree-resthree-half-res
fourfour-resfour-half-res
fivefive-resfour-half-res
sixsix-ressix-half-res
sevenseven-resseven-half-res
eighteight-reseight-half-res
ninenine-resnine-half-res
tenten-resten-half-res
eleveneleven-reseleven-half-res
twelvetwelve-restwelve-half-res
DescriptionBig or Small Screens columns Still fixed.Every columns in small screens will appearing one collumnsEvery columns in small screens wil appearing two collumns
[Row Structure]
<div class="[Main Value] [Value]">
    <div class="content [Paragraph Modifier Value]">
        [Content]
    </div>
</div><!--Loop & Make sure total count twelve-->
[Row Structure END]

Put the main value and the alternative value. Loop items and don't forget warp them with row structure code. Make sure total column on inline if calculate is twelve and next inline automaticly repaeat.

<div class="MeDes-row row-center">
    <div class="columns six-res">
        <div class="content text-center">
            <p>Sea adipisci repudiare ei, mei dicit iuvaret ei. An nec dictas percipit. Habeo libris definitionem vis eu, audire mediocritatem ei cum.</p>
        </div>
    </div>
    <div class="columns six-res">
        <div class="content text-center">
            <p>Sea adipisci repudiare ei, mei dicit iuvaret ei. An nec dictas percipit. Habeo libris definitionem vis eu, audire mediocritatem ei cum. Cum omnesque legendos cu, impetus laboramus ei vix.</p>
        </div>
    </div>
</div>

Results:

Sea adipisci repudiare ei, mei dicit iuvaret ei. An nec dictas percipit. Habeo libris definitionem vis eu, audire mediocritatem ei cum.

Sea adipisci repudiare ei, mei dicit iuvaret ei. An nec dictas percipit. Habeo libris definitionem vis eu, audire mediocritatem ei cum. Cum omnesque legendos cu, impetus laboramus ei vix.

The sample use column 2 times six-res that's mean total 12. -res mean on small screen will change to one column.

And much more, possible to custom your own collumns. Just make sure total twelve.

More sample click here

Back to top ▴