Membuat Template Lebih Responsive

Di masa lalu sebagian besar situs telah dikembangkan berdasarkan layout tetap, dan layar lebar 1024px umum telah dianggap sebagai ukuran yang relatif aman untuk digunakan  website/blog, Metode tradisional untuk menghadapi ini telah menciptakan dua sifat yang terpisah, di mana satu pengalaman yang dioptimalkan untuk mobile dan yang lainnya untuk desktop - namun ini berarti bahwa dua website harus dipertahankan, meningkatkan biaya pengembangan dan pemeliharaan. Hal ini juga mengabaikan banyak perangkat yang sekarang duduk antara mobile dan desktop - misalnya iPad.

Desain Responsif, di sisi lain, adalah suatu pendekatan  web desainer dan pengembang yang diperlukan untuk menyesuaikan tata letak situs untuk mengaktifkan perangkat layar kecil dan besar untuk berbagi basis kode yang sama dan konten, tanpa perlu sifat situs web yang terpisah. Melalui desain responsif Anda hanya perlu mengembangkan satu basis kode untuk semua pengguna, tidak peduli apa perangkat yang mereka gunakan.

Atas dasar hal tersebut diatas maka Kolom Tutorial™ merasa perlu untuk memposting sebuah kode yang memungkinkan sebuah blog/website akan tampak lebih responsive, kode tersebut insya allah akan sedikit mengubah blog atau website sobat menjadi lebih responsive, dan penerapannya pun cukup mudah.

Tutorial Penerapan kode :-

1. Login ke Akun Blogger sobat

2. Klik Template >>> Klik Edit HTML

3. Klik kode '►' di sebelah nomor seperti pada gambar dibawah :

 

4. Cari kode ]]></b:skin>  ( Tekan Ctrl + F untuk mempercepat pencarian ) setelah ketemu letakan kode dibawah ini tepat diatas kode ]]></b:skin> 

UNTUK KODE CSS 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}

Demikian artikel ini semoga bermanfaat untuk sobat Blogger semuanya, dan jika sobat ingin mengecek Sudah Responsive atau tidaknya blog sobat silakan klik link dibawah kemudian masukan Url blog Sobat dan Klik GO. Terimakasih .

 

TEST RESPONSIVE

M. Alex Joenaedi

Saya hanyalah seorang Newbie di dunia Blogger, Aktivitas Ngeblog dilakukan hanya pada waktu senggang saja atau tidak teratur.

Share this post