Menunggu...

Cara Edit Template Agar Responsive

Untuk sahabat blogger pemula yang ingin merubah penampilan blog agar menjadi responsive disini caranya, sobat tidak perlu mengganti template baru karena selain ribet dengan urusan edit ini itu keseringan mengganti template blog juga akan membuat pengunjung setia kebingungan dan berpengaruh kurang baik terhadap SEO.

Sekedar informasi template responsive adalah sebuah template yang penampilanya kontibel dengan berbagai ukuran layar dimana tampilan tatap muka menyesuaikan dengan ukuran layar yang kita gunakan seperti dekstop (komputer, laptop dan sejenisnya), mobile (HP, smartphone dan sejenisnya) dan tablet.
Seperti yang kita ketahui sekarang ini jaman sudah sangat canggih dimana akses internet tidak lagi terbatas pada komputer atau laptop, tapi perangakat lain seperti HP, smartphone, blackbarry, tablet dan lainya bisa berselancar di dunia maya yang tak kenal batas waktu dan jarak.

Sobat tidak perlu mengganti template responsive yang baru  yang akan merepotkan dan membuat pikiran sobat pusing, solusinya sangat sederhana sobat cukup melakukan beberapa langkah edit HTML agar blog menjadi responsive, berikut cara sederhana edit template agar penampilan blog lebih responsive :

  • Yang pertama adalah masuk ke pengaturan Template
  • Klik Edit HTML
  • Tambahkan kode berikut diatas kode ]]></b:skin>
@media screen and (max-width: 1230px){ #header { float:none; max-width:none; text-align:center; } #header-inner { margin-bottom:0px; } #header h1 { margin-right:0px; } #header p.description { margin:0; } #header-right { position:relative; right:0; text-align: center; margin : 0 !important; } .header-right-inner { margin: 0 30px ! important; } .main-nav-top{ clear:both; float:none; } .main-nav-main { margin:10px 0 0 0; } #nav-search { float:none; margin:0; } } @media screen and (max-width: 960px) { .sidebar-wrapper{ position:relative; top:auto; right:auto; clear:both; left:auto; width:auto; margin: 0 -15px; background: none; } .subscribe_outer { margin: 0 -20px; } .main-wrapper{ margin-right:0; width:100%; min-height: 0px; } .ct-wrapper{ padding:0 15px; } #content { padding: 5px; clear: both; border-radius: 0; } .sidebar-wrapper .sidebar{ margin: 15px; } .sidebar-wrapper .widget{ border: none; margin: 0px auto 10px auto; padding: 10px 20px; } } @media screen and (max-width: 768px){ .header-wrapper { margin-right: 0; min-height: 0; width: 100%; } #header { text-align: center; width: 100%; max-width: none; } #header-inner { margin:30px 0 0; } #header h1 { font-size:35px; } .main-nav-top, .main-nav-main, .main-nav-top ul, .main-nav-main ul{ text-align:center; } .related-post { width:auto; } #comment-editor { margin:10px; } .footer { margin:15px; width:auto; } .footer-credits .attribution{ display:none; } } @media screen and (max-width: 500px){ #header img { width:100%; } } @media screen and (max-width: 420px){ #header h1 { font-size: 30px; margin: 10px; } .main-nav-main ul li{ margin:4px 10px; float:none; } .comments .comments-content .datetime{ display:block; float:none; } .comments .comments-content .comment-header { height:70px; } } @media screen and (max-width: 320px){ .ct-wrapper{ padding:0; } .footer .footer-inner { padding: 45px 10px 10px 10px; } .comments .comments-content .comment-replies { margin-left: 0; } }

  • Simpan template sobat
Cara di atas adalah cara yang blogger pemula dapatkan dari blog sahabat idbloggertrick. Jika sobat mengalami permasalahan sobat bisa langsung tanyakan ke sumbernya.
Terimakasih semoga bermanfaat..
Advertise Here
By adjieumbara.blogspot.com
300x250

Klik disini untuk berkomentar 35 komentar:

avatar

nahh.. boleh dicoba nih kang. sipp.. makasih..makasihh :)

avatar

Silahkan sob, semoga bermanfaat.. :)

avatar

Hmmmm...cukup simple juga sih... ga usah ganti banyak kode heehehe :D

avatar

Ya kang tp blm saya test.. hehee :))

avatar

.untuk template mobilenya ada pengaturannya apa tidak sob? biarkan default, atau khusus?

avatar

Dinonaktifkan saja sob, secara otomatis akan berfungsi menyesuaikan gadget..

avatar

maaf tolong ganti url nya dari idbloggertrick.com ke trikblogger.net , sudah diganti soalnya

avatar

gak mempan om, msh gk responsif

avatar

Gan, blog ane kok nggak bisa responsive ya margin kanan-kirinya?
Percobaan awal-awal dulu bisa, namun ntah kenapa saya utek-utek lagi akhirnya marginnya tidak responsive lagi? adakah script yang hilang/tambahan yang akhirnya menyebabkan hal itu?
blog ane : sharing-of-hussein.blogspot.com

Tolong dianalisa ya gan..
Jawaban bisa diteruskan di email: surya[dot]mujahid[at]gmail[dot]com

avatar

(b) pusing main responsive gak ada yang benar-benar jelas tutorialnya,,, wes gak sah responsive gak po-po wong yo gak dihkum ae :d Nur Qolbu

avatar

Saya lihat sepertinya mudah yah Mas Ajie saya belum pernah coba
Trik responsive itu Mas? ijin coba belajar Mas makasih salam sukses :)

avatar

Kalau sekarang pastinya Mas Adjie sudah mencobanya yah Mas? (c)

avatar

Sama gan punya blog saya juga gak mempan nih (m) sampe pusing sendiri

avatar

Saya setuju gan, untuk tutorialnya saya belum menemukan yang mudah dicerna bagi orang2 yang tidak mengerti kodingkodingan... :d

avatar

Makasih mas, kunjungi juga situs adik

http://www.prediksibola888.blogspot.com
http://www.kis33.net

avatar

Gimana bisa gan, wong yg punya artikel ja belum mencoba, secara logika sangat tidak masuk akal cuma paste kode css, css default disisip kedalam media screen, contoh :

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

begitu seterusnya, termasuk penamaan css harus sesuai dengan templatenya

avatar

kok aku gak bisa ya mas,,,? aku pake template default bawaan blogger.

avatar

Nggak Bisa Gan:)
Eror ntu :)

avatar

Terimakasih informasinya, kunjung balik y :)
http://goo.gl/2WYzzb

avatar

thanks buat infonya gan,, sangat bermanfaat sekali..

http://goo.gl/7kJRyb

avatar

Wah barhasil gan, tapi cara ceknya gimana ya? ini blog ane gifidia.blogspot.com

avatar

nah ini yang saya cari gan, saya coba terapin dulu di blog saya, makasih

avatar

sudah saya coba memang lognya jd responsiv,,ini paling pas totornya,yg lain malah bibkin pusing.. kunjungi blog saya gan http://myblog-168.blogspot.co.id/2015/10/manfaat-yoghurt.html

Komentar ini telah dihapus oleh pengarang.
avatar

numpang nitip link ya gan.nofolow jg ga apalah. mksih yah,, manfaat yoghurtnumpang nitip link ya gan.nofolow jg ga apalah. mksih yah,, manfaat yoghurt heavely blush

avatar

numpang nitip link ya gan.nofolow jg ga apalah. mksih yah,, manfaat yoghurtnumpang nitip link ya gan.nofolow jg ga apalah. mksih yah,, manfaat yoghurt heavely blush

avatar

keren www.uniknegeriku.ga makasih tipsnya gan...

avatar

Yang terlihat berubah sementara ini, hanya judul dan deskripsi blongya dari samping kiri menjadi di tengah...

Berkomentarlah dengan bijak karena setiap perkataan yang kita ucapkan merupakan cermin pribadi seperti apa diri kita..

Terima kasih atas komentar Anda