Merubah Template Blog Menjadi Responsive

Assalumalikum Wr.wb Saya Ijin Berbagi Ilmu Sebentar Ya... Mungkin Disini Sebagian Banyak Mempunyai Blog Dong Mungkin Gunanya Untuk Jualan, Belajar, Atau Tugas dari Guru :D . Yap Pada Saaat Mencari Template Blog Anda Pasti Dong Hanya Melihat Dari Sisi Desain Nya Doang Tanpa Memikirkan Blog Anda Pada Saat Di Lihat Orang Lain Blog Anda Itu Dianggap Jelek Apalgi Kebanyakan Para Blog Walking Rata-rata Nyaman Membaca Di Gadget Nya Masing-masing Bukan Di Laptop Atau PC Mungkin Terlalu Ribet Bagi Para Blog Walking Nya. Yok Kita Ubah Blog Kita Menjadi Responsive Fakta Tentang Web Menunjukkan Di Tahun 2013 Kemarin Design Web Yang Berada Pada NO.1 Adalah Responsive Web :)

1. Pergi ke Blogger > Template > Edit HTML
2. Seperti Biasa Cari Kode ]]></b:skin>
3. Pastekan Kode Ini Tepat Di Atas ]]></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; } }

5. Catatn Ubah Dulu Di Bagian Kategori Template Pilih Template Seluler, Catatan Bagi Blog Nya Yang Tidak Responsive Jangan Terlalu Banyak Widget Di Blognya :)

Semoga Bermanfaat Dan Berhasil Mencobanya Ya.
Like Fans Page Facebook Saya Disini

Written by Nulled

Blogger Muda Yang Masih Berstatus Pelajar, Yang Berkecimpung Di Dunia IT Semenjak Tahun 2013 Dan Ingin Berbagi Ilmu Pengetahuan Tentang Programming Web Design,Desktop Application, Tips Blogging, Google Adsense, Dan Internet Marketing. Temukan Celotehan Saya Di Twitter @Anaksmkti