Documentation

Get Started

MeDes Blogger CSS 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

Another Plugin CDN Embed:

<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'/>

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 ▴


Structure

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.


Sample Paragraph + Paragraph Modifier Class:

this is paragraph content with modifier

Sample Code:

<p class="text-center text-left-res text-capitalize">this is paragraph content with modifier</p>

On big screen text appear align center and than when on small screens text will appear align left. Text transform on big or small screen text appear capitalize.

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.

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-btnThis is Descriptionbtn-a
btn-b
MeDes-btn-oThis is Descriptionbtn-c
btn-d
Possible to add Utility Class
<a class="[Main Value] [Color Value] [Utility Value]">[Button Text]</a>

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 > 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


Page Style Builder & Generator

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 ▴