Cara Desain Blog Tetap Responsive

Cara Membuat Desain Blog Tetap Responsive

Desain blog merupakan salah satu faktor penting yang dapat mempengaruhi kenyamanan pengunjung, oleh karena itu dalam mendesain blog harus tetap memperhatikan Cara Desain Blog Tetap Responsive. Sehingga blog dapat diakses pengunjung dengan berbagai ukuran layar, mengingat pada massa sekarang begitu banyak pengguna phonsel dengan berbagai ukuran layar berselancar di dunia internet untuk mencari berbagai informasi yang merekan butuhkan. Oleh karenanya Cara Desain Blog Tetap Responsive harus menjadi salah satu pokok perhatian setiap blogger jika ingin blognya tetap ramai pengunjung. Hal yang juga mempengaruhi blog agar tetap ringan adalah penggunaan fitur yang bijak(tidak berlebihan), penggunaan css, dan java script yang tidak memperhatikan UX/UI design. Oleh karena itu Cara Desain Blog Tetap Responsive juga harus memperhatikan hal-hal tersebut diatas. Agar desain blog yang powerfull didapat namun tetap responsive sebaiknya hanya menggunakan widget yang disediakan di blogger, adapun jika ingin menambahkan widget dari pihak ke 3 sebaiknya tetap mempertahankan akselerasi blog itu sendiri.

Menggunakan desain tema yang responsive

Sebelumnya saya mohon maaf.... Dalam hal ini saya anggap kalian sudah familiar dengan blog atau ngeblog. Jika kalian baru ingin belajar membuat blog, silahkan baca artikel tentang Cara Membuat Blog Gratis, atau jika kalian ingin membuat blog menggunakan platform wordpress kalian bisa membaca artikel tentang Cara Membuat blog di Wordpress.
Desain tema untuk blog yang responsive bisa kalian dapatkan secara gratis, atau kalian juga bisa menggunakan tema responsive premium. Banyak sekali blogger kawakan dan senior yang menyediakan tema responsive baik yang gratis maupun premium. Kalian bisa searching di google dengan kata kunci "tema blog responsive gratis", maka kalian akan dapatkan banyak blogger senior yang menyediakan tema responsive. Contohnya adalah 2 blog milik blogger senior idblanter.com dan fvdesain.blogspot.com, silahkan cek tkp untuk mendapatkan tema responsive yang disediakan para senior. Kuncinya adalah, bahwa seperti apapun desain tema yang anda inginkan dan cara apapun yang kalian lakukan untuk sebuah desain tema, harus tetap memegang prinsip Cara Mempercantik blog Yang Baik.

Cara agar Desain Blog Tetap Responsive menggunakan css dan meta

Agar desain blog tetap responsive dan menyesuaikan disemua ukuran layar termasuk phonsel, buat penambahan css untuk @media screen and (max-width: .....px). Berikut adalah contoh kode css untuk menyesuaikan desain blog di beberapa ukuran layar phonsel:

/*****************************************
Responsive styles
******************************************/
@media screen and (max-width: 1100px) {
.main-wrapper { margin: 0 !important; width: 100%; }
.sidebar-wrapper { float: left; padding: 0 15px; width: auto; }
.sidebar-wrapper .widget { border: none; margin: 0px auto 10px auto; }
}
@media screen and (max-width: 960px) {
#header { float: none; }
#header h1, #header h1 a { text-align: center; }
.main-nav { display: block; width: 100%; float: none; }
.main-nav ul { text-align: center; }
.main-nav ul { display: none; height: auto; }
.main-nav a#pull { background-color: #1E1E1E; border-bottom: 1px solid #2e2e2e; color: #fff; display: inline-block; font-family: raleway; font-size: 13px; font-weight: bold; padding: 10px 3%; position: relative; text-align: left; text-transform: uppercase; width: 94%; }
.main-nav a#pull:after { content:""; background: url('http://2.bp.blogspot.com/-LwR9Bn5wyRQ/U10FzXsJXMI/AAAAAAAAC8M/ng-HiAmed9Q/s1600/nav-icon.png') no-repeat; width: 30px; height: 30px; display: inline-block; position: absolute; right: 15px; top: 10px; }
.main-nav li { display: block; float: none; width: 100%; }
.main-nav li a { background: #333; padding: 15px 20px; display: block; }
.main-nav li a:hover, nav a:active { border: none; color: #eee; }
.ct-wrapper { padding: 0 10px; }
}
@media screen and (max-width: 768px){
#comment-editor { margin: 10px; }
}
@media screen and (max-width: 600px){
#header img { width: 100%; }
h1.post-title, h2.post-title { font-size: 36px; }
.btnt-img { margin: 0; width: 100%; height: auto; }
.btnt-img img { min-height: 0; }
.rmlink { display: none; }
}
@media screen and (max-width: 420px){
.comments .comments-content .datetime{ display: block; float: none; }
.comments .comments-content .comment-header { height: 70px; }
}
@media screen and (max-width: 320px){
.sidebar-wrapper .PopularPosts ul li img { max-width: 300px; width: 100%; }
.comments .comments-content .comment-replies { margin-left: 0; }
}

Pada tema blogspot, kode css terletak diatas kode ]]></b:skin>

Selain kode css, kalian juga harus menambahkan meta pada tag <head> agar blog dapat di detect oleh layar phonsel. Berikut adalah meta detect untuk layar phonsel:

<meta content='width=device-width, initial-scale=1' name='viewport'/>

kode meta diatas harus terletak diantara tag <head> pembuka dan </head>penutup

Cara agar Desain Blog Tetap Responsive dalam setiap penambahan konten

Untuk menjaga Agar Desain Blog Tetap Responsive juga harus dilakukan melalui setiap penambahan konten, terutama konten berupa gambar, video, table, dan konten lain yang memungkinkan dan mempengaruhi desain blog. Cara agar setiap penambahan konten dapat menjaga desain blog tetap responsive adalah dengan pengaturan lebar konten yang diatur melalui penambahan kode css. Contoh untuk pengaturan lebar pada konten gambar harus menggunakan width="100%". Kuncinya adalah untuk menjaga desain blog tetap responsive harus mengganti ukuran width="....px" dengan menggunakan width="....%", jadi dalam hal ini merubah format px menjadi %.