template satu: 2015

Jumat, 26 Juni 2015

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 .

Rabu, 24 Juni 2015

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
}

9 - mengatur margin header dan footer terhadap jarak selainnya

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 .

susunan margin di header bawaan template adalah ;

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

agar susunan diatas menjadi simpel adalah merubah margin kalau mau .
kalau dibiarkan begitu , juga tak apa .
bila ingin di edit maka hasilnya;

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

ukuran 10px itu tak baku , terserah tampilan jarak yang kalian suka ,
dan itu adalah jarak 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-bottom:10px;
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
}

dikarenakan header dan footer telah terpisah dari auter-wrapper , maka pakai saja margin-bottom .
hasilnya ;

#footer {
width: 660px;
clear: both;
margin-bottom:20px;
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
<style type="text/css">
<!-- /*<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
 </body>

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

Selasa, 23 Juni 2015

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 :

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 .

Sabtu, 20 Juni 2015

xml template minima 2004 blogger

        <data:blog.pageTitle/>
        <![CDATA[/*
    -----------------------------------------------
    Blogger Template Style
    Name:     Minima
    Date:     26 Feb 2004
    Updated by: Blogger Team
    ----------------------------------------------- */

    /* Variable definitions
       ====================
                        type="color" default="#fff" value="#ffffff">
                        type="color" default="#333" value="#333333">
                        type="color" default="#58a" value="#5588aa">
                        type="color" default="#666" value="#666666">
                        type="color" default="#999" value="#999999">
                        type="color" default="#c60" value="#cc6600">
                        type="color" default="#ccc" value="#cccccc">
                        type="color" default="#999" value="#999999">
                        type="color" default="#666" value="#666666">
                        type="color" default="#999" value="#999999">
                        type="font" default="normal normal 100% Georgia, Serif" value="normal normal 100% Georgia, Serif">
                        type="font"
                 default="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif">
                        type="font"
                 default="normal normal 200% Georgia, Serif" value="normal normal 200% Georgia, Serif">
                        type="font"
                 default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">
                        type="font"
                 default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">
                        type="automatic" default="left" value="left">
                        type="automatic" default="right" value="right">
    */

    /* Use this with templates/template-twocol.html */

    body {
      background: $bgcolor;
      margin: 0;
      color: $textcolor;
      font: x-small Georgia Serif;
      font-size/* */:/**/small;
      font-size: /**/small;
      text-align: center;
    }
    a:link {
      color: $linkcolor;
      text-decoration: none;
    }
    a:visited {
      color: $visitedlinkcolor;
      text-decoration: none;
    }
    a:hover {
      color: $titlecolor;
      text-decoration: underline;
    }
    a img {
      border-width: 0;
    }

    /* Header
    ----------------------------------------------- */

    #header-wrapper {
      width: 660px;
      margin: 0 auto 10px;
      border: 1px solid $bordercolor;
    }

    #header-inner {
      background-position: center;
      margin-left: auto;
      margin-right: auto;
    }

    #header {
      margin: 5px;
      border: 1px solid $bordercolor;
      text-align: center;
      color: $pagetitlecolor;
    }

    #header h1 {
      margin: 5px 5px 0;
      padding: 15px 20px .25em;
      line-height: 1.2em;
      text-transform: uppercase;
      letter-spacing: .2em;
      font: $pagetitlefont;
    }

    #header a {
      color: $pagetitlecolor;
      text-decoration: none;
    }

    #header a:hover {
      color: $pagetitlecolor;
    }

    #header .description {
      margin: 0 5px 5px;
      padding: 0 20px 15px;
      max-width: 700px;
      text-transform: uppercase;
      letter-spacing: .2em;
      line-height: 1.4em;
      font: $descriptionfont;
      color: $descriptioncolor;
    }

    #header img {
      margin-$startSide: auto;
      margin-$endSide: auto;
    }

    /* Outer-Wrapper
    ----------------------------------------------- */
    #outer-wrapper {
      width: 660px;
      margin: 0 auto;
      padding: 10px;
      text-align: $startSide;
      font: $bodyfont;
    }

    #main-wrapper {
      width: 410px;
      float: $startSide;
      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 */
    }

    #sidebar-wrapper {
      width: 220px;
      float: $endSide;
      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 */
    }

    /* Headings
    ----------------------------------------------- */

    h2 {
      margin: 1.5em 0 .75em;
      font: $headerfont;
      line-height: 1.4em;
      text-transform: uppercase;
      letter-spacing: .2em;
      color: $sidebarcolor;
    }

    /* Posts
    ----------------------------------------------- */
    h2.date-header {
      margin: 1.5em 0 .5em;
    }

    .post {
      margin: .5em 0 1.5em;
      border-bottom: 1px dotted $bordercolor;
      padding-bottom: 1.5em;
    }
    .post h3 {
      margin: .25em 0 0;
      padding: 0 0 4px;
      font-size: 140%;
      font-weight: normal;
      line-height: 1.4em;
      color: $titlecolor;
    }

    .post h3 a, .post h3 a:visited, .post h3 strong {
      display: block;
      text-decoration: none;
      color: $titlecolor;
      font-weight: normal;
    }

    .post h3 strong, .post h3 a:hover {
      color: $textcolor;
    }

    .post-body {
      margin: 0 0 .75em;
      line-height: 1.6em;
    }

    .post-body blockquote {
      line-height: 1.3em;
    }

    .post-footer {
      margin: .75em 0;
      color: $sidebarcolor;
      text-transform: uppercase;
      letter-spacing: .1em;
      font: $postfooterfont;
      line-height: 1.4em;
    }

    .comment-link {
      margin-$startSide: .6em;
    }
    .post img, table.tr-caption-container {
      padding: 4px;
      border: 1px solid $bordercolor;
    }
    .tr-caption-container img {
      border: none;
      padding: 0;
    }
    .post blockquote {
      margin: 1em 20px;
    }
    .post blockquote p {
      margin: .75em 0;
    }

    /* Comments
    ----------------------------------------------- */
    #comments h4 {
      margin: 1em 0;
      font-weight: bold;
      line-height: 1.4em;
      text-transform: uppercase;
      letter-spacing: .2em;
      color: $sidebarcolor;
    }

    #comments-block {
      margin: 1em 0 1.5em;
      line-height: 1.6em;
    }
    #comments-block .comment-author {
      margin: .5em 0;
    }
    #comments-block .comment-body {
      margin: .25em 0 0;
    }
    #comments-block .comment-footer {
      margin: -.25em 0 2em;
      line-height: 1.4em;
      text-transform: uppercase;
      letter-spacing: .1em;
    }
    #comments-block .comment-body p {
      margin: 0 0 .75em;
    }
    .deleted-comment {
      font-style: italic;
      color: gray;
    }

    #blog-pager-newer-link {
      float: $startSide;
    }

    #blog-pager-older-link {
      float: $endSide;
    }

    #blog-pager {
      text-align: center;
    }

    .feed-links {
      clear: both;
      line-height: 2.5em;
    }

    /* Sidebar Content
    ----------------------------------------------- */
    .sidebar {
      color: $sidebartextcolor;
      line-height: 1.5em;
    }

    .sidebar ul {
      list-style: none;
      margin: 0 0 0;
      padding: 0 0 0;
    }
    .sidebar li {
      margin: 0;
      padding-top: 0;
      padding-$endSide: 0;
      padding-bottom: .25em;
      padding-$startSide: 15px;
      text-indent: -15px;
      line-height: 1.5em;
    }

    .sidebar .widget, .main .widget {
      border-bottom: 1px dotted $bordercolor;
      margin: 0 0 1.5em;
      padding: 0 0 1.5em;
    }

    .main .Blog {
      border-bottom-width: 0;
    }

    /* Profile
    ----------------------------------------------- */
    .profile-img {
      float: $startSide;
      margin-top: 0;
      margin-$endSide: 5px;
      margin-bottom: 5px;
      margin-$startSide: 0;
      padding: 4px;
      border: 1px solid $bordercolor;
    }

    .profile-data {
      margin: 0;
      text-transform: uppercase;
      letter-spacing: .1em;
      font: $postfooterfont;
      color: $sidebarcolor;
      font-weight: bold;
      line-height: 1.6em;
    }

    .profile-datablock {
      margin: .5em 0 .5em;
    }

    .profile-textblock {
      margin: 0.5em 0;
      line-height: 1.6em;
    }

    .profile-link {
      font: $postfooterfont;
      text-transform: uppercase;
      letter-spacing: .1em;
    }

    /* Footer
    ----------------------------------------------- */
    #footer {
      width: 660px;
      clear: both;
      margin: 0 auto;
      padding-top: 15px;
      line-height: 1.6em;
      text-transform: uppercase;
      letter-spacing: .1em;
      text-align: center;
    }
    ]]>

template satu

crosscol

Pages

diatas main wrapper