Kerangka Tema Blog Pirsaloka

Tema blog yang disediakan oleh Blogger.com sangat beragam dan udah siap diterapin. Tapi Admin Pirsaloka memilih untuk mengkustomasi tema sendiri mengacu pada Demo Flexbox 3.

Tampilan Flexbox

Tampilan Flexbox (Viewport)

Bagian Flexbox Yang Diterapkan Pirsaloka

Pada Pirsaloka, bagian yang diterapkan hanya Aside1 dan Main. Kode sumbernya:

.wrapper {display:flex;flex-flow:row wrap;}
.wrapper > * {flex:1 100%;}
@media all and (min-width:600px) {.aside {flex:1 0 0;}}
@media all and (min-width:800px) {.main {flex:3 0px;} .aside-1 {order:1;} .main {order:2;}}
<div class="wrapper">
    <article class="main">
        <b:section id='main' name='Main' showaddelement='yes'>
            <b:widget id='Blog1' locked='true' title='Postingan Blog' type='Blog'/>
        <b:section/>
    </article>
    <aside class="aside aside-1">
        <b:section id='aside' name='Sidebar' showaddelement='yes'/>
            <b:widget id='PopularPosts1' locked='false' title='Postingan Popular' type='PopularPosts'/>
        <b:section/>
    </aside>
</div>