Cara bikin template blogger menjadi responsive

Oky met yah wene Sobat MAKNYUSblogger.
Kali ini ane mau coba berbagi cara bikin template blogger menjadi responsive.

Jika blog anda ingin menjadi responsive seperti blog ane, jangan meninggalkan artikel ini sebelum sebelum membaca tulisan yang ada di postingan Cara bikin template memjadi responsive ini.
Sebelum ane mulai membahas Cara bikin template blogger menjadi responsive, anda cek terlebih dahulu url blog ane sudah responsive apa belom KLIK DI SINI .

dengan cara mengecilkan ukuran lebar browser, bisa juga dengan mengganti resolusi yang lebih kecil atau di bawah resolusi asli monitor pc anda. Cek juga menggunakan handphone atau perangkat mobile Seperti : smartphone, tablet , atau hp dengan resolusi kecil.

Bagaimana sobat sudah cek belum. ? ini cuma sebagai bukti saja, bahwa trik ini yang akan saya bagikan ini sudah saya terapkan pada blog ini yang ternyata sekarang sudah menjadi responsive. 

Oky. kita lanjut. kalau ditanya susah atau gampang membuat blog menjadi responsive jawabanyha adalah sangat gampang-gampang susah karena butuh ketekunan dan konsentrasi yang tinggi :)
Jika anda sudah paham tentang CSS mungkin akan lebih mudah untuk membuat template responsive , inilah beberapa hal yang harus diperhatikan untuk membuat blog anda menjadi responsive :

1. Lebar kolom atau Columm
2. Gambar atau Image
3. Font atau Teks

1. Lebar kolom.
Pertama kita akan membahas lebar kolom. kenapa blog tidak responsive itu karena lebar kolom melebihi layar perangkat hardwere yang digunakan. sebagai contoh jika lebar outer-wrapper blog anda 900px. ketika kita membuka blog blog tersebut menggunakan hp yang mempunyai lebar hanya 320px,176px, atau lebig kecil lagi maka anda pasti sudah tahu kan apa yang terjadi. tentu saja yang terjadi adalah blog anda tidak sepenuhnya terlihat dan yang terlihat hanya beberapa bagian saja yang sebelah kiri, Sedangkan jika kita ingin melihat bagian lainya yang sebelah kanan maka kita harus menggeser scroll bagian bawah layar. inilah yang dimaksud blog tidak responsive Sedangkan blog responsive adalah blog yang bisa menyesuaikan lebar secara otomatis mengikuti lebar perangkat yang digunakan, dan blog responsive tidak mempunyai scroll bagian bawah.
Supaya kolom blog menjadi responsive anda bisa menggunakan bantuan media-query untuk mengatur kolom header, main, footer, atau sidebar.

Carranya :
Tambahkan kode di bawah inik dan teruh di atas kode ]]></b:skin> atau </style>

@media screen and (max-width:1024px) {
kode css
}
@media screen and (max-width:940px) {
kode css
}
@media screen and (max-width:820px) {
kode css
}
@media screen and (max-width:370px){
kode css
}

Kode media-query di atas bisa ditambahkan atau dikurangi . Kode berwarna biru bisa anda gantgi sesuka hati anda.
Cara pengaturan media-query : anda ganti " kode CSS " yang berwarna biru di atas dengan kode CSS.
Contohnya :

Kode di atas dibaca :
Jika di resolusi layar di bawah 330px maka outer-wrapper mempunyai lebar 95% dari ukuran layar perangkat hardwere. sedangkan jika diatas 330px outer-wrapper mempunyai lebar 900px,

Jika diresolusi layar di bawah 330px maka main dan sidebar mempunyai lebar 100% atau memenuhi outer-wrapper, margin : 0 auto; float : none; sedangkan jika di atas 330px main dan sidebar mempunyai lebar 510px, margin : 0 10px 0 0, float : left.

Mungkin ada yang masih bingung di resolusi pas 330px ukuran lebar outer-wrapper nya 900px atau 95% jawabanya adalah 900px. karena media-query mengatur resolusi di bawah 330px.

Kode margin : 0 auto; float : none; digunakan di resolusi kecil supaya menjadi satu kolom. Sedangkan di resolusi besar seperti 800px tidak perlu dipakai.
yang diatas hanya contoh untuk outer, main, sidebar-wrapper, sedangkan untuk pengaturan yang lainya seperti header, menu navigasi, post, comment, footer, dll nanti saya kasi full CSS-nya.

Agar di resolusi kecil bisa menyesuaikan lebar kolom otomatis. Gunakan pengaturan widh : menggunakan % bukan px. Sedangkang untuk resolusi besar gunakan px saja soalnya kalau menggunakan % takutnya nanti tampilan blog jadi berantakan. Jadi % sangat cocok digunakan untuk single colum.

2. Gambar :
Perbedaan gambar responsive dan tidak responsive, untuk gambar tidak responsive biasanya akan terlihat keluar dari garis posting ( outer-wrapper) sehingga biasanya akan muncul sroll di bawah.

inilah gambar yang responsif di bawah ini :

Dari gambar di atas terlihat bahwa gambar tidak melewati batas outer-wrapper dan tidak muncul scroll di bagian bawah. dan ketika lebar browser dikecilkan ataupun dibesarkan, maka gambar bisa menyesuaikan lebar secara otomatis.

Supaya gambar atau image bisa jadi responsive, tambahkan kode di bawah ini kedalam kode CSS :

.img,object,embed{border:none;vertical-align:middle;max-width:98%;width:auto;height:auto;}

Kode CSS di atas fungsinya supaya img atau gambar postingan menjadi responsive, sedangkan gambar iklan dan iframe untuk kode CSS-nya adalah :

.largebanner .widget, #bottombar {padding:10px;float:left;max-width:50%;width:auto;height:auto;
}

Ketika anda menambahkan iklan di sidebar cari kodentya di edit html bagian sidebar. Contohnya kode div di iklan-nya seperti ini :

 <b:widget id='HTML1' locked='false' title='Advertisement' type='HTML'>
Maka supaya tidak tampil di resolusi 320Px anda setting media-query-nya menjadi seperti ini :
@media screen and (max-width:330px){#html1 {display:none;}}

Jiak anda menginginkan iklan di sidebar anda tampil maka sebaliknya di cari sendiri caranay oky :)

Kalau hanya memakai kode CSS saja gambar tidak akan bisa responsive karena ada faktor lain yang menyebabkan gambar tidak responsive yaitu di dalam kode html. biasanya kode image itu seperti ini :

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1kr6lbRwwLnxqXUo-SYgorKbYoZy6ixD0FFjRkMCdOqxPVEK7rGRCXu91qqxNfBx7dq5gM10STQD0lCjmXU3Gj45yH2WzJey3B__d6OSVncXv1zpmUrlJ4WhWbdw2k_61rPqI91RS33Y/s1600/image+tidak+responsive.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1kr6lbRwwLnxqXUo-SYgorKbYoZy6ixD0FFjRkMCdOqxPVEK7rGRCXu91qqxNfBx7dq5gM10STQD0lCjmXU3Gj45yH2WzJey3B__d6OSVncXv1zpmUrlJ4WhWbdw2k_61rPqI91RS33Y/s320/image+tidak+responsive.jpg" width="277" /></a></div>

anda hapus saja kode yang berwarna biru. sehingga hasilnya menjadi seperti ini :

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1kr6lbRwwLnxqXUo-SYgorKbYoZy6ixD0FFjRkMCdOqxPVEK7rGRCXu91qqxNfBx7dq5gM10STQD0lCjmXU3Gj45yH2WzJey3B__d6OSVncXv1zpmUrlJ4WhWbdw2k_61rPqI91RS33Y/s1600/image+tidak+responsive.jpg" ><img  height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1kr6lbRwwLnxqXUo-SYgorKbYoZy6ixD0FFjRkMCdOqxPVEK7rGRCXu91qqxNfBx7dq5gM10STQD0lCjmXU3Gj45yH2WzJey3B__d6OSVncXv1zpmUrlJ4WhWbdw2k_61rPqI91RS33Y/s320/image+tidak+responsive.jpg" width="277" /></a></div>

Setelah anda menerapkan tips di atas saya jamin gambar postingan akan menjadi responsive. funsi menghapus kode di atas selain agar bisa responsive keuntungan lain nya agar gambar jadi vailid html5 anda hanya perlu menambahkan title dan alt-nya.

3. Font.
Untuk font yang panjang dan tanpa spasi sehingga teks tersebut melewati outer-wrapper sehingga muncul scrool di bawahnya.
Supaya font atau text menjadi responsive anda harus menambahkan kode css di bawah ini ke dalam kode css tepatnya satu group dengan kode font-family ini dia kode css-nya :

word-wrap:break-word;

Jadi ketika berada dalam mode edit html template tekan ctrl+f lalu cari kode word-wrap di belakang kode font-family.
Contoh kode css di bagian header :

 #header {font-family:Arial, san-serief;}

Setelah ditambahkan kode word-wrap sekarang menjadi seperti ini :

#header {font-family:Arial, san-serief;word-wrap:break-word;}

Jadi jika di blog anda ada banyak kode font-family maka semakin banyak juga anda harus menambahkan kode word-wrap nya.

Jiaka menggunakan kode word-wrap : maka jika ada teks yang panjangnya melebihi lebar outer-wrapper dan tanpa spasi maka teks tersebut tidak akan melewati batas kolom post sehingga kelebihan teks yang panjang akan terpotong dan akan berada di bawahnya dan hasilnya responsive.

Untuk pengaturan dalam wdget template Supaya blog anda benar-benar menjadi responsive
di mobile version ikuti langkah-langkah berikut ini :
1. Login ke blogger lalu pilih Template lalu klik tombol pengaturan template seluler.

Ubahlah pengaturan template mobile version anda yang semula berada di deafult sekarang ubah menjadi khusus pilih pengaturan khusus.

2. anda harus menambahkan kode di bawah ini dan taruh  di bawah kode ]]></b:skin> atau  </style> ini kodenya :

@media screen and (max-width:370px){
    kode css
    }
    </style>
    <b:if cond='data:blog.isMobile'>
    <style type='text/css'>
    #header h1, #header p, #header h1 a:link, #header h1 a:visited, #comments h4, #comments-block .comment-footer, #comments-block .comment-author, #comments h5, #footer h6, #comments-block .comment-body, .owner-Body, #nav ul li {font-size:100%;}
    #nav ul li a:link, #nav ul li a:visited {padding:2px 4px;}
    #main, #sidebar {width:100%;margin:0 auto;float:none;}
    .post blockquote, .post-body blockquote {margin:0 auto;font-size:90%;}
    .post, .post-body, #comments {font-size:100%;padding:5px;}
    .comment-timestamp {font-size:65%;}
    #sidebar {display:none;}
    </style>
    </b:if>

Kode berwarna biru adalah kode yang harus ditambahkan. Sedangkan kode berwarna hijau adalah kode pengaturan CSS yang ane gunakan pada blog lain di versi mobile. jadi untuk kode yang berwarna hijau ini hanya sebagai contoh saja dan anda harus mengaturnya sendiri.
Untuk cara pengaturanya sema saja dengan mengatur media-query, ane rekomendasikan agar disamakan saja dengan media-query resolusi 330px atau resolusi dibawahnya.

Supaya responsive di internet Explorer tambahkan script di bawah ini di atas kode <b:skin><![CDATA[ :

  <!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

Untuk kode media-query yang terpasng di templatte saya untuk selenggapnya berikut ini :

/* MEDIA QUERY */
@media only screen and (max-width:1066px){
#wrapper {
margin:0 auto;
}
}
@media only screen and (max-width:760px){
#wrapper {
 width:95%;
max-width:94%

padding:0 12px;
}


.active {
display: block;
}
#search-form {
width:95%;
margin:0 0 0 0 !important;
}
.nav li ul:before {
display:none;
}
.nav > li {
float: none;
overflow:hidden;
}
.nav ul {
display: block;
width: 97%;
float:none;
}
.nav-menu2 li ul {
background:#eee;
border:none;
box-shadow:none;
}
.nav-menu2 li li ul {
background:#f5f5f5;
}
.nav-menu2 li li a:hover {
background:#ddd;
}
.nav > li.hover > ul , .nav li li.hover ul {
position: static;
}
#search-form {
width:99%;
background:#444;
}
#search-form td.search-box {
padding:0 10px !important;
}
#search-form td.search-button {
padding:0 10px;
width:1%;
}
#search-form input#search-box[type="text"] {
margin:0 0 0 0;
}
#search-form input#search-button[type="submit"] {
margin:0 0 0 0;
}
.post-body img {
max-width:90%;
}
.img-thumbnail {
margin:0 10px 0 0;
}
.recent-post-one-thumb .widget {
padding:0 0 10px 0;
}
#recent-post-one-thumb-1 .widget, #recent-post-one-thumb-3 .widget, #recent-post-one-thumb-5 .widget {
padding:0 5px 10px 0;
}
#recent-post-one-thumb-2 .widget, #recent-post-one-thumb-4 .widget, #recent-post-one-thumb-6 .widget {
padding:0 0 10px 5px;
}.sidebar-container, .post-container {
padding:0px 0 10px;
}

@media only screen and (max-width:640px){
#wrapper {
padding:0 10px;
}


#footer-wrapper, #bottombar .left, #bottombar .center, #bottombar .right {
float:none;
width:83%;
max-width:83%
}

#post-wrapper,.nav-social,   #sidebar-wrapper {
float:none;
width:100%;
max-width:100%
}
.header, .header-right {
margin:10px 0;
}

.sidebar-container, .post-container{
padding:0px 0 10px;
}

.largebanner .widget, #bottombar {
padding:10px;
}
.post, .breadcrumbs {
margin:0 0 10px;
padding:10px;
}
.pagenavi {
margin: 10px 0 10px;
}
.recent-post-one-thumb .widget-content {
padding:10px;
}
#bottombar .left .widget, #bottombar .center .widget, #bottombar .right .widget, .sidebar .widget {
margin:0 0 0px 0;
}
}
@media only screen and (max-width:480px){
#wrapper {
padding:0 8px;
}
.header, .header-right, .recent-post-one-thumb {
float:none;
width:100%;
max-width:100%
}
.header img {padding:10px;float:center;max-width:100%;width:auto;height:auto;
}

.largebanner .widget, #bottombar {padding:10px;float:left;max-width:50%;width:auto;height:auto;
}
.post, .breadcrumbs {
margin:0 0 8px;
padding:8px;
}
.recent-post-one-thumb .widget-content {
padding:8px;
}
h2.post-title, h1.post-title {
font-size:16px;
}
.img-thumbnail, .img-thumbnail img {
width:90px;
height:90px;
}
.img-thumbnail {
margin:0 8px 0 0;
}
#recent-post-one-thumb-1 .widget, #recent-post-one-thumb-3 .widget,    #recent-post-one-thumb-2 .widget, #recent-post-one-thumb-4 .widget, #recent-post-one-thumb-5 .widget, #recent-post-one-thumb-6 .widget {
padding:0 0 8px 0;
}
.comments .comment-block, .comments .comments-content .inline-thread {
padding:10px !important;
}
.comment .comment-thread.inline-thread .comment {
margin: 0 0 0 0 !important;
}
.footer-left, .footer-right {
width:99%;
max-width:95%

float:none;
text-align:center;
}
}
@media screen and (max-width:320px){
#wrapper {
padding:0 6px;
}
.post, .breadcrumbs {
padding:6px;
}
.recent-post-one-thumb .widget-content {
padding:6px;
}
.img-thumbnail, .img-thumbnail img {
width:99%;
height:80%;
}
}

Sekian terimakasih moga bermanfaat dan berguana :ng

Anda baru saja membaca artikel tentang - Cara bikin template blogger menjadi responsive. Silahkan baca artikel berikutnya Tentang - Next - Jangan lupa g+1 / fb / twit :)