News Breaking
Live
wb_sunny

Breaking News

Modifikasi template yang belum mobile friendly menjadi mobile friendly

Modifikasi template yang belum mobile friendly menjadi mobile friendly

S P C E.com – Assalamualikum wr wb pembaca setia saifulcomelektronik.com, Tahukah anda cara Modifikasi template yang belum mobile friendly menjadi sebuah template mobile friendly ? Nah, dalam kesematan kali ini saya mencoba mengulas sedikit tentang hal ini, Karna S P C E.com baru saja mengalami hal seperti ini, template yang saya gunakanakan awal sebelumnya bukan mobile friendly dan sekarang sudah saya modifikasi sedikit kode HTML dan akhirnya template yang saya gunakan untuk website blog S P C E.com menjadi mobile friendly. Seperti gambar di bawah ini :

Modifikasi template yang belum mobile friendly menjadi mobile friendly

Cara memodifikasi template yang belum mobile friendly menjadi mobile friendly sebenarnya mudah saja, Namun tentunya kita harus tahu sedikit tentang bahasa kode HTML.  Kasus yang sering di alami sahabat blogger pemula termasuk S P C E.com adalah template yang bukan mobile friendly desainnya lebih bagus, karna desainya bagus namun engan untuk mengganti template tersebut ke template mobile friendly.

Template yang belum mobile friendly, Jika kita gunankan tentunya akan mempengaruhi jumlah visitor website kita yang kurang begitu banyak. Nah, tentunya anda bertanya bagaimana merubahnya template tersebut ? Tentunya pertanyaan ini ini sering sekali di tanyakan oleh seorang yang baru melakoni dunia blogging. Baik langsung saja pada kasus cara modifikasi template tersebut agar mobile friendly. Ikuti sugestinya di bawah ini

1. Pertama Login ke Dasbor Blog (user/pass)
2. Setelah login Klik >> TEMPLATE << Kemudian ketahap selanjutnya
3. Setelah terbuka Halaman template blog anda, tampilannya seperti gambar di bawah ini, kemudian cari kode <head>

Modifikasi template yang belum mobile friendly menjadi mobile friendly

Untuk lebih cepat mencarinya tekan tombol >> Ctrl + F << maka akan tampil menu nafigasi pencarian di pojok kanan atas halaman HTML. Setelah anda menemukan kode tersebut copy paste kode di bawah ini, tepat di bawah kode <head> kemudian simpan. Lebih jelasnya seperti gambar di atas.

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

 4. Klik >> Template << kembali, nonaktifkan template seluler, caranya klik menu grid ( gerigi ) di bawah menu template seluler, setelah terbuka pilih ○● ( Tidak, tampilkan template seluler di perangkat seluler ) seperti gambar di bawah ini.

Modifikasi template yang belum mobile friendly menjadi mobile friendly

5. Sesudah selesai melakukan poin yang ke 4, kembali lagi ke halaman HTML template. Cari kode >> ]]></b:skin>  << Untuk lebih cepat mencarinya tekan tombol >> Ctrl + F << maka akan tampil menu nafigasi pencarian di pojok kanan atas halaman HTML. Kemudian copy paste kode di bawah ini tepat di bawah kode ]]></b:skin>  

<style>
@media only screen and (min-width:768px) and (max-width:989px) {
#outer-wrapper {width:730px; margin:0 auto }
#main-wrapper {width:640px;}
#sidebar-wrapper {width:320px;}
#footer {width:940px;}
}

@media only screen and (max-width:767px) {
#outer-wrapper {width:540px; margin:0 auto }
#main-wrapper {width:640px;}
#sidebar-wrapper {width:320px;}
#footer {width:940px;}
}

@media only screen and (max-width: 580px) {
#outer-wrapper { width: 500px }
#main-wrapper {width:640px;}
#sidebar-wrapper {width:320px;}
#footer {width:940px;}
}

@media only screen and (max-width: 490px) {
#outer-wrapper { width: 430px }
#main-wrapper {width:640px;}
#sidebar-wrapper {width:320px;}
#footer {width:940px;}
}

@media only screen and (max-width: 479px) {
#outer-wrapper { width: 280px }
#main-wrapper {width:640px;}
#sidebar-wrapper {width:320px;}
#footer {width:940px;}
}

@media screen and (max-width: 260px) {
#outer-wrapper { width: 210px }
#main-wrapper {width:640px;}
#sidebar-wrapper {width:320px;}
#footer {width:940px;}
}
</style>

Modifikasi template yang belum mobile friendly menjadi mobile friendly

Keterangan :

Untuk kode { width:…..px } silakan anda rubah sendiri, sesuai dengan kode template yang anda gunakan, kode { width:…..px } di atas adalah kode template website blog S P C E sendiri, tentunya setiap template ukuranya berbeda.

6. Klik >> SIMPAN << template anda telah menjadi mobile friendly ( responsif ). Lebih jelasnya saya sudah siapkan video tutorialnya di bawah ini, silakan anda lihat. Selamat mencoba,.....
 

Demikian dulu yang dapat S P C E.com shere, semoga apa yang S P C E shere ini bermanfaat buat teman – teman semua, khususnya buat pembaca setia SPCE.com dimanapun berada. Dukung terus website S P C E.com yang sederhana ini dengan cara LIKE dan SHERE agar website ini lebih maju lagi.
Baca Artikel Berikutnya

Tags

Langganan Artikel

Temukan Tips dan Berita menarik setiap harinya. GRATIS!