Layout
Tampilan layout adalah tampilan yang terdapat dihalaman wysiwyg Tata Letak
Di halaman tersebut seluruh widget yang terdapat di halaman blog dapat diubahsuaikan.
Kustom Widget Tata Letak
Demo TampilanUntuk mendapatkan tampilan seperti diatas, tambahkan CSS dibawah ini kedalam tag <b:skin id=''>
body#layout .locked-widget .widget-content{border-left:1px solid #3c97ef}
body#layout .locked-widget .widget-content:hover{border-left-color:#00b140}
body#layout .widget .widget-content a.editlink{border-radius:2px}
body#layout .visibility .editlink{background:#3c97ef url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuBvuqgvOnvOc_bai3gEJO3jdWqKPgzRfhF7wQwrK7YXUldZX77yt615nA8hgK47fTMUWfYwJYucoWG7OaITrCZ5oAbDiBzG7VDKcVB9ZDPFbeDS4ceA9NeFeQrGOzs9O8aidjhjjR0zk/s18-c/mode_edit_w600_24dp.png) no-repeat center!important}
body#layout .visibility .editlink:hover{background-color:#00b140!important}
body#layout .draggable-widget .widget-wrap2{background:#3c97ef url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdLGXY1VDUuhZ_vo-DWwzjc9fJNshBqIU0Z2zWKP0r5RKCDqibMaXg_gZOJOV6keFkSOyf4ExAdgeYx1IZ9e0EM75c_dq60rC4O75hWhAGivScOCSje9L_9lMH0RY4Pwe6-98c-Tk0IXs/s22/draggable.png) no-repeat 4px 50%!important}
body#layout .add_widget a:hover{color:#00b140}
body#layout .draggable-widget .widget-wrap1:hover .widget-wrap2{background-color:#00b140!important}
body#layout .visibility .layout-widget-state.visible{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin6J1jvf1x8vMd9FF1aMQK8fZF3_uSBBBNbQx2Z1W-fD1ZmPWf3c9YWilV-fufjhhD8uwdCcuxNTcjao-6SswwFUNIH0JzGITiqJSZH8A8VNNK6j51YXmP1INL8J-8DQ4kE_8ckC3QtFo/s1600/visibility_c3_600_24dp.png)!important}
body#layout .visibility .layout-widget-state.not-visible{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzm0E55TG5Ul_nQH_YAlTeaSeTJ6_ZQghttAQwxNlHH-QpYMwKmQsPf9QmRGBm1hx3IMayPTdWNpO2sk7PqZJV7eZXRc44zlyXuCRtNu-9Qlimg4PEBNm0eMdgq4V5WLMfmFlF49AKB-U/s1600/visibility_off_c3_600_24dp.png)!important;opacity:1}
body#layout:after{content:'Dimodifikasi oleh Handy Eko C';display:block;font-family:Roboto,sans-serif;font-size:14px;color:#555;line-height:1;text-align:center;visibility:visible;padding:20px 0}
CSS Default Layout
Berikut ini CSS bawaan (default) tampilan Layout widget untuk membantu riset dan kustom elemen widget dihalaman wysiwyg Tata Letak.
*{-moz-box-sizing:border-box}
html{background-color:#fff;user-select:none;-moz-user-select:none;-khtml-user-select:none}
body#layout{_height:auto;background-color:#f1f1f1;border:1px solid #e5e5e5;font-size:small;margin:0;min-height:0;padding:87px 0 0;text-align:center}
body#layout.layout-nofavicon{padding:15px 0 0}
body#layout:after{clear:both;content:" ";display:block;visibility:hidden}
body#layout #sidebar-wrapper{overflow:visible}
body#layout #main-wrapper{overflow:visible}
body#layout div.section{background-color:#f8f8f8;border:1px solid #ccc;font-family:Roboto,sans-serif;margin:0 4px 8px;overflow:visible;padding:16px;position:relative}
body#layout div.section > div{margin-top:8px}
body#layout div.section .dr_inactive.dropregion{margin-top:0}
body#layout div.section > div:first-child{margin-top:0}
body#layout .section-columns{margin:0}
.section{width:auto}
body#layout div.widget{float:none;margin:0;padding:0;position:relative;width:auto}
body#layout div.widget ~ div.widget{margin-top:8px}
body#layout .widget-content{box-shadow:rgba(0,0,0,0.12) 0 0 2px 0,rgba(0,0,0,0.24) 0 2px 2px 0;color:#666;line-height:24px;overflow:hidden;padding:16px;position:relative;text-align:left;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
body#layout .section-columns .widget-content{padding-bottom:32px}
body#layout .widget-content a{font-size:11px;text-decoration:none}
body#layout .draggable-widget .widget-wrap2{background:#bbb url(/img/widgets/draggable.png) no-repeat 4px 50%;cursor:move}
body#layout .draggable-widget .widget-wrap3{margin-left:12px;background:#fff}
body#layout #navbar{box-sizing:content-box;height:auto;margin:8px auto;max-width:718px;z-index:0}
body#layout .locked-widget .widget-content{background-color:#fff}
body#layout .Blog .widget-content{height:16em}
body#layout #navbar .Navbar{width:auto}
body#layout #navbar .Navbar .widget-wrap2{outline:none!important}
body#layout #navbar .dropregion{height:0}
body#layout .add_widget{border:1px dashed #ccc;padding:16px;position:relative;text-align:left}
body#layout .add_widget a{color:#2196F3;display:block;font-size:16px;line-height:24px;margin-left:40px;cursor:pointer;text-decoration:none}
body#layout .section-columns .add_widget a{margin-left:32px}
body#layout .add_widget a::before{content:}
body#layout a:visited{color:#15c}
body#layout a:hover{text-decoration:none}
body#layout div.layout-title{font-size:16px}
body#layout div.layout-widget-description{color:rgba(0,0,0,0.52);font-size:14px}
body#layout div.layout-widget-status{font-size:11px}
body#layout .visible{color:#00B800}
body#layout .not-visible{color:#B80000}
body#layout .editlink{bottom:8px;color:#7f9acc!important;cursor:pointer;margin:0;padding:0;position:absolute;right:10px;text-decoration:underline}
body#layout .dropregion{font-size:1px;line-height:0;height:0;margin:0 4px;position:relative}
body#layout .el_active{z-index:10}
body#layout .dr_active{border:1px dashed #d4e1ff;background-color:#fff;margin:0 4px 3px}
body#layout #header-wrapper{min-height:0}
body#layout .columns{overflow:visible}
body#layout .header-outer,body#layout .tabs-outer,body#layout .main-outer,body#layout .footer-outer{margin:0}
body#layout .header-inner,body#layout .tabs-inner,body#layout .main-inner,body#layout .footer-inner{overflow:visible}
body#layout .main-inner .column-center-outer .column-center-inner,body#layout .main-inner .column-left-outer .column-left-inner,body#layout .main-inner .column-right-outer .column-right-inner{padding-left:0;padding-right:0}
#layout .content-outer,#layout .content-fauxcolumn-outer,#layout .region-inner{max-width:800px;min-width:0;width:auto}
body#layout .content-inner{padding:0 10px 10px}
body#layout .clearfix{*zoom:1k}
body#layout .clearfix:before,body#layout .clearfix:after{content:"";display:table;line-height:0}
body#layout .clearfix:after{clear:both}
body#layout .page-container{padding:0}
body#layout .page-container .section.main{float:left;width:55%}
body#layout .page-container aside{float:right;width:31.62%}
body#layout .section h4{font-size:16px;line-height:24px;margin:2px 24px 8px;text-align:left}
body#layout .section-columns .section h4{margin:2px 12px 8px}
body#layout .add-icon,body#layout .visibility .layout-widget-state,body#layout .visibility .editlink.icon{background-position:center;background-repeat:no-repeat;height:24px;width:24px}
body#layout .layout-widget-state{float:left}
body#layout .editlink.icon{font-size:0;line-height:0;position:absolute;right:16px;top:16px}
body#layout .visibility .layout-widget-state.visible{background-image:url(//www.gstatic.com/images/icons/material/system/1x/visibility_grey600_24dp.png)}
body#layout .visibility .layout-widget-state.not-visible{background-image:url(//www.gstatic.com/images/icons/material/system/1x/visibility_off_grey600_24dp.png);opacity:.5}
body#layout .visibility .editlink.icon{background:url(//www.gstatic.com/images/icons/material/system/1x/mode_edit_grey600_24dp.png)}
body#layout .add-icon{background-image:url(//www.gstatic.com/images/icons/material/system/1x/add_grey600_24dp.png);float:left}
body#layout div.widget-content.visibility div.layout-title,body#layout div.widget-content.visibility div.layout-widget-description{margin:0 40px}| Selektor / elemen | Keterangan |
|---|---|
| h4 | judul section |
| add_widget | area untuk menambah widget baru |
| add_widget a | link tambah widget baru |
| add-icon | ikon / gambar plus pada area tambah widget baru |
| locked-widget | widget tidak dapat digeser (locked:'true') |
| draggable-widget | widget bisa digeser (locked:'false') |
| visible | widget terlihat (visible:'true') |
| not-visible | widget tidak terlihat (visible:'false') |
| editlink | link edit widget |