Menjadikan Template Blog Responsive

Assalamualaikum Hari-hari Ini Banyak Teman-teman Blogger Saya Yang Nanya Gimana Jadiin Template Blog Kita Yang Semula Nya Tidak Responsive Menjadi Responsive Yaitu Compatible Pada Ukuran Layar Berapa Pun, Dapat Di Lihat Di Smartphone, Tab Atau Di Desktop.. Sebelumnya Teman Blogger Saya Juga Udah Pernah Cobain Ini Dan Hasilnya Berhasil.
NOTE : Ini Tergantung Dari Template, Tag-tag HTML Di Blog Sobat WDI, Kemungkinanan Berhasil 50%.
Silahkan Di Coba

1. Yang Pertama Pasti Login Dulu Lah Di Blogger :v, Setelah Itu Pergi Ke Menu Template Lalu Pilih Edit HTML

2. Seperti Biasa Kita Akan Masukkan CSS Nya Di  " <b:skin>  </b:skin> " CTRL+F Aja Lah :)

3. Pastekan CODE Di Bawah Ini Tepat Diatas " </b:skin> " Agar Kalau Gagal Enak Di Hapus Nya :)

@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; } }

NOTE: Terlalu Banyak Widget Sangat Berpengaruh Terhadap Tampilan Blog Sobat WDI Di Tab Maupun Handphone, Saya Saranin Download Aja Template Responsive Yang Simple Terus Ubah Deh Design Nya.

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