TUTORIAL™

-✽ ✽ ✽--ASSALAMU'ALAIKUM--✽ ✽ ✽--
apa kabar sobat semuah pada kesempatan kami kali ini mau berbagi
Cra membut body layout keren
Fungsiny untuk mempercanti
Tampilan  body layout nada keren dan enak di pandang.

Lihat Chonto2 Gambar Layout Yang Sudah Di Tambain Code Css.


Gmbar Di Atas Adalah Gambar Pertama Tampilan Layout nya

Layot yang Kami buat Adalah Menggunakan Template Selmag Makanya
makan Ruang Banyak. klu gk di Sesuwekan akan rebet heheheh

Gmbar Di atas adalah Gambar ke3 soalnya kalu di jadikan satu terlalu panjang heheh..

nah buat sobat yang masu masang Cra membut body layout keren
Masuk ke dasbor Lalu Edil Template. copy Code Di bawah ini
di atas </b:skin> tau di bawah </b:skin> pun bisa..

<b:template-skin><![CDATA[
/*------Layout (No Edit)----------*/
body#layout #outer-wrapper,body#layout .row{padding:0;width:1000px}
body#layout .section h4{margin:2px 0 8px;color:#333!important}
body#layout .ibpanel{background-color:#2c3e50!important;overflow:hidden!important;border-color:#213243!important}
body#layout .ibpanel h4{font-size:16px;padding:0;color:#fff!important}
body#layout .ibpanel .widget{float:left;width:49.5%;margin-right:1%}
body#layout .ibpanel #HTML201,body#layout .ibpanel #HTML204,body#layout .ibpanel #HTML206{margin-right:0}
body#layout .ibpanel #HTML200{width:100%}
body#layout .ibpanel .widget.locked-widget .widget-content{background-color:#34495e!important;border-color:#455668!important;color:#fff!important}
body#layout .ibpanel .widget.locked-widget .widget-content a.editlink{color:#fff!important;border:1px solid #233648;border-radius:2px;padding:0 5px;background-color:#233648}
body#layout #topnav,body#layout .tm-head{height:auto}
body#layout .tm-menu{margin:0;width:70%}
body#layout .social-area{margin:0;width:30%}
body#layout .social-ico{background:rgba(155,89,182,0.1)!important;border-color:#9b59b6!important}
body#layout .FollowByEmail .widget-content:before{display:none}
body#layout .header-content,body#layout #header-blog{height:auto;padding:0}
body#layout .header-logo{float:left;width:30%;max-width:30%;max-height:none;margin:0;padding:0}
body#layout .header-logo .section{background:rgba(26,188,156,0.1);border-color:#1abc9c}
body#layout .header-ads{height:auto;width:70%}
body#layout #menu,body#layout #menu1{height:auto;background:rgba(231,76,60,0.1)!important;border-color:#e74c3c!important}
body#layout #menu .widget,body#layout #slider-sec .widget,body#layout .featured-sec .widget{display:block}
body#layout #main-nav,body#layout .header-menu{height:auto}
body#layout #search-icon,body#layout #nav-search{display:none}
body#layout .header-menu{float:left;width:100%;margin:4px 0 0;padding:0}
body#layout #content-wrapper{margin:0 auto}
body#layout #main-wrapper{float:left;width:70%;margin:0;padding:0}
body#layout .posts-title{display:none}
body#layout #sidebar-wrapper{float:right;width:30%;margin:0;padding:0}
body#layout #sidebar-wrapper .section{background:rgba(41,128,185,0.1);border-color:#2980b9}
body#layout #sidebar-wrapper .section .add_widget{border-color:#2980b9}
body#layout #sidebar-wrapper .section .draggable-widget .widget-wrap2{background-color:#2980b9!important}
body#layout #sidebar-wrapper .widget{overflow:inherit}
body#layout #sidebar-tabs{background:rgba(39,174,96,0.1);border:1px solid #27ae60;margin:0 4px 8px}
body#layout #sidebar-tabs .section{background:transparent;margin:0;border:0}
body#layout .tab-widget{display:block}
body#layout #sidebar-tabs .section .add_widget{border-color:#27ae60}
body#layout #sidebar-tabs .section .draggable-widget .widget-wrap2{background-color:#27ae60!important}
body#layout .sect-left{width:26%;float:left;margin:0 2% 8px!important}
body#layout #blocked-widgets{display:none!important}
body#layout #slider-sec{background:rgba(46,204,113,0.1)!important;border-color:#2ecc71!important}
body#layout #slider-sec .draggable-widget .widget-wrap2{background-color:#2ecc71!important}
body#layout #slider-sec .add_widget{border-color:#2ecc71}
body#layout .featured-sec{background:rgba(251,143,61,0.1)!important;border-color:#fb8f3d!important}
body#layout .featured-sec .draggable-widget .widget-wrap2{background-color:#fb8f3d!important}
body#layout .featured-sec .add_widget{border-color:#fb8f3d}
body#layout #main-wrapper #main{margin-right:4px;background:rgba(52,73,94,0.1);border-color:#34495e}
body#layout .layout-widget-description{display:none!important}
body#layout #sidebar{margin-top:10px}
body#layout .widget-content .editlink{color:#fff!important;border:1px solid #233648;border-radius:2px;padding:0 5px;background-color:#233648}
body#layout #footer-wrapper{overflow:hidden;padding:0 5px}
body#layout #footer{float:left;width:100%;border:1px solid #1abc9c;background:rgba(26,188,156,0.1);padding:0}
body#layout #footer .section{background:transparent;padding:16px 0!important;margin:0 1%!important;width:31.33%!important;border:0!important}
body#layout #footer #footer-sec3{margin-right:0!important}
body#layout #footer .section .draggable-widget .widget-wrap2{background-color:#1abc9c!important}
body#layout #footer .section .add_widget{border-color:#1abc9c}
body#layout #footer-sec3{margin-right:0}
body#layout .footer-wrapper .footer-copy{width:100%}
body#layout .footer-wrapper .footer-copy .section{margin-right:0}
body#layout #ads-content{background:rgba(241,196,16,0.1);border-color:#f1c410}
body#layout #ads-content .add_widget{border-color:#f1c410!important}
body#layout #ads-content .draggable-widget .widget-wrap2{background-color:#f1c410!important;cursor:move}
body#layout #social-footer{width:25%}
/*------Layout (end)----------*/
]]></b:template-skin>

nah itulah kode nya sobat selamat mencoba.

Tapi setiap Template berbeda-beda antara 
footer-wrapper,outer-wrapper dll.

slamat mencoba.......?