11 - membuat responsive auter wrapper , main wrapper dan sidebar serta post img

header dan footer telah responsive secara otomatis tanpa ada tambahan susunan .

demo diatas menunjukkan responsive nya sebuah tampilan .

sekarang membuat tampilan auter-wrapper , main-wrapper serta sidebar menjadi responsive ,
maka dibutuhkan beberapa pendukung
antara lain :
letakkan meta ini dibawah <head> untuk tampilan mobile .
<meta content='width=device-width, initial-scale=1' name='viewport'/>

HASILNYA ;

<HTML>
<head>
<meta charset='utf-8'/>
<meta content='width=device-width, initial-scale=1' name='viewport'/>

lalu susun @media query yang di butuhkan .
penggunaan media query yang simpel adalah ;

<style type='text/css'>
@media screen and (max-width:1240px){
#outer-wrapper{width:auto}
}
@media screen and (max-width:700px){
#header-wrapper,#outer-wrapper,#main-wrapper,#sidebar-wrapper,#footer
{width: auto;float:none}
}
</style>

susunan media query diatas letakkan dibawah <style> atau ]]></b:skin>

media query diatas membuat template tampil utuh di ukuran layar 700 keatas sampai 1250.
sedang dibawah 700 semua sejajar turun .
bila memakai media query 1240 keatas , maka kemungkinan tampilan auter-wrapper akan berubah tak kala layar makin diperlebar .
jadi kesimpulannya , ukuran 1240 telah mencakup seluruh jenis layar yang lebar .

dua ukuran media query diatas telah cukup untuk mencakup tampilan layar lebar hingga terkecil .

lalu posting gambar juga turut di buat responsive .
susunannya adalah ;
.separator a{margin-left:0 !important;margin-right:0 !important;}
.post img{max-width:100%;height:auto;}
letakkan diakhir susunan POST .

HASILNYA ;

/* Posts
---------------------------*/
h2.date-header {
BLA BLA BLA
}

CSS BLA BLA BLA

.post blockquote p {
BLA BLA BLA
}
.separator a{margin-left:0 !important;margin-right:0 !important;}
.post img{max-width:100%;height:auto;}

SELESAI . tampilan telah responsive .

langkah selanjutnya mengedit bagian dalam tiap bagian template .

10 - merapikan tampilan outer-wrapper , main-wrapper dan sidebar-wrapper

lihat gambar dibawah ,

disitu terlihat tata letak main-wrapper dan sidebar menjorok keatas dikotak auter-wrapper ,
kemudian sisi outer-wrapper ke bawah tak sejajar dengan main-wrapper dan sidebar .
sebenarnya ini tak jadi masalah , kalau mau tampil beda .
hanya disini bagaimana membuat tampilan sejajar .

untuk membuatnya sejajar maka ubah nilai padding pada auter-wrapper agar menjadi sejajar kebawah .

#outer-wrapper {
BLA BLA BLA
padding: 10px; UBAH INI MENJADI 0 .
BLA BLA BLA
}

HASILNYA ;

#outer-wrapper {
BLA BLA BLA
padding:0;
BLA BLA BLA
}

sekarang menurunkan main-wrapper dan sidebar-wrapper dengan merubah nilai MARGIN nya .

#main-wrapper {
BLA BLA BLA
margin:30px 0 10px 0;
BLA BLA BLA
}
#sidebar-wrapper {
BLA BLA BLA
margin:30px 0 10px 0;
BLA BLA BLA
}

30px adalah jarak turun kedua kotak tersebut . terserah kalian mau berapa nilainya .

9 - mengatur jarak header dan footer di bagian luar

untuk mengatur JARAK LUAR atau JARAK ANTARA KOLOM YANG SATU DENGAN LAINNYA , maka berlaku MARGIN .
bila melihat kedua gambar dibawah , jelas terlihat header ada jarak dari auter-wrapper.
dan footer berdempetan dengan main-wrapper .
disinilah fungsi margin digunakan atau di edit . cara menghitung margin pada template ini [minima 2004] adalah ;
0[atas] 0[kanan] 0[bawah] 0[kiri].

susunan margin di header bawaan template adalah ;

#header-wrapper{
width:auto;
margin:0 auto 10px;
bla bla bla
}

agar susunan diatas tak membuat kalian bingung maka ubah susunan marginnnya kalau mau .
kalau dibiarkan begitu , juga tak apa .
bila ingin di edit maka hasilnya;

#header-wrapper{
width:auto;
margin:0 0 10px 0;
bla bla bla
}

ukuran 10px itu tak baku , terserah tampilan jarak yang kalian suka ,
dan itu adalah jarak antara kotak header dan kotak auter-wrapper .

adapun jarak footer dan main-wrapper, maka ubah marginnya di main-wrapper .
jikalau margin tak ada , maka tambah susunannya .

pada susunan bawaan minima 2004 , margin tak ada , maka tambah susunannya .

#main-wrapper {
width: 410px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

hasilnya ;

#main-wrapper {
width: 410px;
border:1px solid #000;
float: left;
margin:0 0 10px 0; DISINI 10PX UKURAN JARAK BAWAH
word-wrap: break-word;
overflow: hidden;
}

bentuk tagalog keterangan dibawah ini , itu hapus saja , kalau mau ;

/* fix for long text breaking sidebar float in IE */
/* fix for long non-text content breaking IE sidebar float */

adapun jarak footer ke atribut maka edit di footernya [ kalau atributnya tak dihapus ] ,
minima 2004 margin footernya telah ada , tinggal di edit;

#footer {
width: 660px;
clear: both;
margin: 0 auto;
bla bla bla
}

#footer {
width: 660px;
clear: both;
margin:0 0 20px 0; JARAK ATRIBUT DAN FOOTER KEBAWAH .
bla bla bla
}

 

8 - membuat responsive header dan footer

caranya:
jadikan  width nya auto .

#header-wrapper{width:auto;
#footer {width:auto;
maka dengan ini tampilan wrapper nya full responsive tanpa perlu memakai @media query

coba tes di situs tes responsive.
atau pakai saja Ctrl-Shift+m , tekan semuanya .

namun pada gambar kedua ini , ketika tampilan makin di perkecil , huruf tak responsive .

adapun agar huruf tak melewati batas tampilan di header,
maka tambah kode ini word-wrap:break-word; pada susunan H1 .

#header h1{
bla bla bla
font:normal normal 200% Georgia,Serif;
word-wrap: break-word;
}

hasilnya jadi begini :

begitupun di footer ,
namun apabila huruf telah responsive di footer , maka tak usah di tambah kode seperti di header tsb .

7 - memisahkan header dan footer dari wrapper agar full width

wrapper bila diartikan secara bebas adalah batasan lebar dari sebuah tampilan blog selain body.
didalam wrapper ada header sampai footer .

untuk membuat full width header dan footer tanpa menambah susunan adalah dengan mengeluarkan susunan header dan footer dari outer-wrapper .
caranya cukup pindahkan susunan tersebut .

letak susunan header ketika dipindahkan

awal posisi susunan header

awal posisi susunan footer

letak susunan footer ketika dipindahkan

tampilan yang dihasilkan

6 - menonaktifkan bundel css , Plusone.js dan Widgets.js

sebelum mengedit susunan template apakah menambah susunan atau widget ,
alangkah baiknya bundel css bawaan blogger di non aktifkan terlebih dahulu .
agar nanti tak repot di dalam mengedit ketika terjadi perubahan pada tampilan template tsb .
MENONAKTIFKAN BUNDEL CSS :

mengurangi sekitar 60% waktu respon
&lt;style type=&quot;text/css&quot;&gt;
&lt;!-- /*<b:skin><![CDATA[*/]]></b:skin>

<style type='text/css'>

/* -----------------------------------------------
Blogger Template Style
Name: Minima
Date: 26 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */
CSS TEMPLATE
/* Footer
----------------------------------------------- */
#footer { BLA BLA BLA .... }

]></b:skin> ubah </style>

DISABLE Plusone.js and Widgets.js

ganti kode</body> dengan yang di bawah
&lt;!--</body>--&gt; &lt;/body&gt;

sumber :
http://stackoverflow.com/questions/16911018/how-to-remove-blogger-css-widget-bundle
http://www.bloggerdiy.com/2013/10/disable-widget-css-bundle.html?m=0

5- menghilangkan variable pada template

klik view source atau lihat sumber halaman pada template  .
maka akan nampak susunan variable serta css tanpa ]]></b:skin>
karna telah terganti dengan --> </style>
copy seluruh css mulai dari
#navbar-iframe{height:0;visibility:hidden;display:none}

sampai sebelum --> </style>dengan kata lain sampai akhir css footer .
lalu simpan di notepad kalau mau

. pada edit html template ,
copy seluruh css mulai dari
/* Variable definitions
<Variable
<Variable
sampai sebelum ]]></b:skin>

lalu pastekan atau ganti susunan css ditemplate tersebut
dengan yang telah kalian simpan dinotepad .

hasilnya susunan css kalian telah terisi dengan kode yang ada di variable.

lihat isi template sebelum view source [pada edit html template].
#navbar-iframe{height:0;visibility:hidden;display:none}
body {
background: $bgcolor;

kode ini $bgcolor; ada pada variable .

pada tampilan view source :
#navbar-iframe{height:0;visibility:hidden;display:none}
body {
background: #ffffff;

jadi intinya ;
copy seluruh css melalui view source ,
mulai dari #navbar sampai akhir susunan footer .
lalu ganti css template mulai dari awal variable sampai akhir susunan footer.

klik simpan , maka hasilnya sama , namun isi template sudah berkurang .
coba klik view source tempate kalian , variable telah hilang.

4- menghilangkan navbar dan memberi border

masuk ke edit html template .
tambahkan kode ini di awal css untuk menyembunyikan navbar.
#navbar-iframe{height:0;visibility:hidden;display:none}

hasilnya :
#navbar-iframe{height:0;visibility:hidden;display:none}
    body {

lalu beri border pada 4 bagian ini :

 #outer-wrapper {
     width: 660px;
     border:1px solid #000;

#main-wrapper {
      width: 410px;
      border:1px solid #000;

#sidebar-wrapper {
      width: 220px;
      border:1px solid #000;

#footer {
      width: 660px;
      border:1px solid #000;

hasilnya :

pada navbar ada script yang perlu ditutup atau dihapus saja .
cara menutup :

      <!--b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
        <b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'>
          <b:includable id='main'>&lt;script type=&quot;text/javascript&quot;&gt;
    function setAttributeOnload(object, attribute, val) {
      if(window.addEventListener) {
        window.addEventListener(&#39;load&#39;,
          function(){ object[attribute] = val; }, false);
      } else {
        window.attachEvent(&#39;onload&#39;, function(){ object[attribute] = val; });
      }
    }
  &lt;/script&gt;
&lt;div id=&quot;navbar-iframe-container&quot;&gt;&lt;/div&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;https://apis.google.com/js/plusone.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
        gapi.load(&quot;gapi.iframes:gapi.iframes.style.bubble&quot;, function() {
          if (gapi.iframes &amp;&amp; gapi.iframes.getContext) {
            gapi.iframes.getContext().openChild({
                url: &#39;https://www.blogger.com/navbar.g?targetBlogID\0754313872146618290830\46blogName\75template+satu\46publishMode\75PUBLISH_MODE_BLOGSPOT\46navbarType\75LIGHT\46layoutType\75LAYOUTS\46searchRoot\75//1234templ.blogspot.com/search\46blogLocale\75in\46v\0752\46homepageUrl\75http://1234templ.blogspot.com/\46blogFollowUrl\75https://plus.google.com/106678127394610146227\46vt\75-1720728449089344806&#39;,
                where: document.getElementById(&quot;navbar-iframe-container&quot;),
                id: &quot;navbar-iframe&quot;
            });
          }
        });
      &lt;/script&gt;&lt;script type=&quot;text/javascript&quot;&gt;
(function() {
var script = document.createElement(&#39;script&#39;);
script.type = &#39;text/javascript&#39;;
script.src = &#39;//pagead2.googlesyndication.com/pagead/js/google_top_exp.js&#39;;
var head = document.getElementsByTagName(&#39;head&#39;)[0];
if (head) {
head.appendChild(script);
}})();
&lt;/script&gt;
</b:includable>
        </b:widget>
      </b:section>

      <div style='clear: both'/-->

langkah ketiga menampilkan seluruh tampilan

kembali ke tata letak ,
lihat gambar :

pop up muncul

centang keseluruhannya ,
tujuannya agar seluruh tampilannya nampak di template ,
lalu klik judul posting kalian kalau mau , agar tulisan disekitar ruang komentar dapat terlihat .

hasilnya:

sampai disini seluruh tampilan telah ada .
tinggal menambah susunan serta menghilangkan yang tak dibutuhkan .

langkah kedua

langkah selanjutnya buatlah sebuah posting dengan memakai gambar . lalu publikasikan .
lihat langkah pertama .
tak usah utak atik kode gambarnya , yang penting dia tampil .

setelah itu kalian menuju ke tata letak untuk menambah widget terlebih dahulu .
tujuannya untuk memberi tampilan utuh , agar kalian dapat mengedit css atau lainnya .
widget yang ditambah adalah :
crosscol - diatas dan dibawah posting - sidebar - footer ,
hasilnya :
perhatikan ukuran tulisan serta tipenya , link , tata letak huruf , dll  terhadap gambar bawah ini .
inilah susunan yang terdapat didalam template .

catatan :
yang dibutuhkan adalah menampilkan karakter susunan template . ini tujuannya .

langkah pertama

diatas adalah tampilan awal ketika kalian memakai template minima 2004 .
tak responsive disamping sangat sederhana .