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.
Lasted Version
The lasted version MeDes Blogger CSS Framework now is version 1.2.0
Others Plugin CDN have to Add:
<link crossorigin='anonymous' href='https://use.fontawesome.com/releases/v5.5.0/css/all.css' integrity='sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU' rel='stylesheet'/>
<link href='https://fonts.googleapis.com/icon?family=Material+Icons' 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'/>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-sanitize.js'/>
CSS:
Copy to your template for update Newest Version
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 you can setting nav style, social link, default header style, maximal width container of main content in MeDes Template Configuration, get code and paste on MeDes Config Script Widget. MeDes Template Configuration include your purchase in Documentation folder.
- Done, Enjoy it.
We recomended remove and clean all of widget before install this template. Or backup before install.
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
<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> WinnerParagraph
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.
<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:
| Value | Description |
|---|---|
| text-left | Set text align left |
| text-center | Set text align center |
| text-right | Set text align right |
| text-uppercase | Set text transform Uppercase |
| text-lowercase | Set text transform Lowercase |
| text-capitalize | Set text transform Capitalize |
| text-unset | Set text transform unset |
| text-left-res | Set text align left (When small screens view). |
| text-center-res | Set text align center (When small screens view). |
| text-right-res | Set text align right (When small screens view). |
| text-uppercase-res | Set text transform Uppercase (When small screens view). |
| text-lowercase-res | Set text transform Lowercase (When small screens view). |
| text-capitalize-res | Set text transform Capitalize (When small screens view). |
| text-unset-res | Set 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:
More sample click here
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 Value | Description |
|---|---|
| box-rounded-small | Make corner style small rounded |
| box-rounded / box-rounded-normal | Make corner style rounded |
| box-rounded-large | Make corner style large rounded |
| box-rounded-x-large | Make corner style extra large rounded |
| box-shadow | Add shadow around box rounded |
| box-shadow-soft | Add soft shadow around box rounded |
| hover-scale | Make animation scaling when hovering |
| hover-jump | Make animation jumping when hovering |
| show-all (no input) | Without input automaticly showing all size screen |
| hide-all/hide | Hide all size screen |
| show-res | Only showing item on small screen |
| hide-res | Only hidding item on small screen |
Read next part to know how to use utility class.
Image
Sample image:
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4wiY153aYzF83c1R6aUZfQxSgQ6sjsOrVRSFBNGFMzuclMJkrBUZdXUlcadGA3d9kDH1A788-qzCi3lzAzFBlqhXuCVRDsahQP2i1cxtRsTf-ZXigFUYrOYJqsbuvjGc5eYI5O79rg8w/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]">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
Button (X) Button A Button B Button C Button D
Hover Solid Button X or A to test Utility Class
<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>Function Values of Button Modifier Class:
| Main Value | Description | Color Value |
|---|---|---|
| MeDes-btn | Solid Botton | btn-a |
| btn-b | ||
| MeDes-btn-o | Outline Botton | btn-c |
| btn-d |
<a class="[Main Value] [Color Value] [Utility Value]">[Button Text]</a>Try it with builder:
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
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
<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 Value | Description |
|---|---|
| (no input) | Standard Blockquote |
| MeDes-success | Success notification box |
| MeDes-alert | Alert notification box |
| MeDes-warning | Warning notification box |
| MeDes-error | Error notification box |
Diver (Spacing)
Sample diver:
Content
Content
Content
Content
Content
Content
<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">
ContentFunction Values of Diver Modifier Class:
| Main Value | Description |
|---|---|
| MeDes-bold | Bold Line |
| MeDes-dashed | Dashed Line |
| MeDes-dashed-bold | Dashed Bold Line |
| MeDes-dotted | Dotted Line |
| MeDes-dotted-bold | Dotted Bold Line |
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.
<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.
| Value | Description |
|---|---|
| container-small | Set maximal width small. |
| container | Set maximal width medium. |
| container-large | Set maximal width very wide. |
| (No Input) | Set maximal width following your screen. |
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.
<div class="MeDes-row">
[Columns Code Structure]
</div>Function Values of Row Modifier Class:
| Main Value | Value | Description |
|---|---|---|
| MeDes-row | row-top / (no input) | Set vertical item align top. |
| row-center | Set vertical item align center. | |
| row-bottom | Set 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.
<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:
- Make 2 column that's mean 6+6=12 or 8+4=12 first column bigger than second column
- Make 3 column that's mean 4+4+4=12 or 5+5+2=12 first, second columns bigger and third column small
- 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 Value | Value Alt1 | Value Alt2 | Value Alt3 |
|---|---|---|---|
| columns/column | one | one-res | one-half-res |
| two-res | two-res | two-half-res | |
| three | three-res | three-half-res | |
| four | four-res | four-half-res | |
| five | five-res | four-half-res | |
| six | six-res | six-half-res | |
| seven | seven-res | seven-half-res | |
| eight | eight-res | eight-half-res | |
| nine | nine-res | nine-half-res | |
| ten | ten-res | ten-half-res | |
| eleven | eleven-res | eleven-half-res | |
| twelve | twelve-res | twelve-half-res | |
| Description | Big or Small Screens columns Still fixed. | Every columns in small screens will appearing one collumns | Every 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
Navbar Style
| Value | Description |
|---|---|
| fixed | Set navbar fixed when scrolling |
| fixed-autohide | Set navbar fixed when scrolling & autohide. |
| fixed-autohide-res | Set navbar fixed when scrolling & autohide only in smartphone view. |
| transparent | Set navbar background transparent. |
| fixed-transparent | Set navbar fixed, background color transparent and filled color when scrolling. |
[Logo on Navbar]
| Main Value | Value | Description |
|---|---|---|
| logonav | pull-left pull-right | Set logo on navbar align left or right. |
| logonav-center | - | Set Logo image on navbar align center. |
| logonav-center-res | pull-left pull-right | Set Logi image algin center when on small screen and second value to set align when on big screen. |
[List Menu]
| Main Value | Value | Description |
|---|---|---|
| menu | pull-left pull-right | Set menu text align when on big screen. |
| Main Value | Value | Description |
|---|---|---|
| menu-icon | pull-left pull-right | Set icon toggle menu () align when on small screen |
| menu-icon-v | pull-left pull-right | Set icon toggle menu () align when on small screen |
[Social Link]
| Main Value | Value | Description |
|---|---|---|
| menu | pull-left pull-right | Set menu text align when on big screen. |
Header
[Content]
| Value | Description |
|---|---|
| header-small | Set Header padding height short. |
| header-medium | Set Header padding height medium. |
| header-large | Set Header padding height tall. |
[Content]
| Value | Description |
|---|---|
| MeDes-header | Set Header background flat. |
| MeDes-paralax | Set Header background with parallax effect when scrolling. |
No comments:
Post a Comment