Cara membuat blog responsive adalah langkah untuk menjadikan platform Anda terasa lebih menyenangkan dan nyaman karena mudah diakses. Pastinya blog yang responsive menjadi dambaan semua blogger dan juga pembaca.
Apalagi pembuatan blog yang responsive tersebut sudah terdapat template HTML sehingga bisa menghasilkan platform dengan fast loading. Anda hanya perlu mengganti kode HTML yang diperlukan sesuai dengan informasi pada blog tersebut.
Walaupun begitu, sudahkan Anda memahami penerapan dari blog yang responsive? Jika belum, maka Anda perlu mempelajarinya karena hal ini merupakan pengetahuan dasar bagi seorang blogger.
Apa yang Dimaksud Blog Responsive?
Sebelum mengetahui cara membuat blog responsive, Anda perlu mengenal terlebih dahulu mengenai apa itu blog yang responsive. Ketika membuka sebuah platform, Anda pasti sudah tidak asing dengan waktu loading ketika mengaksesnya.
Setiap platform yang dikunjungi pasti memiliki loading time yang berbeda. Semakin cepat kemampuan akses suatu platform, artinya blog itu semakin baik dan berkualitas. Namun, jika sebaliknya, pengunjung blog hanya akan menutup situs tersebut dengan segera.
Blog yang responsive sendiri berasal dari istilah RWD (responsive Web Design) dan itu merupakan cara suatu platform untuk mengoptimalkan tampilan layar. Tampilan layar yang baik adalah mudah diakses dan tidak terlalu banyak animasi serta navigasi.
Hal ini akan meringankan beban kerja dari website sehingga mampu memiliki waktu loading yang lebih singkat. Namun, hal tersebut bukan hanya tentang navigasi dan animasi tetapi juga kapasitas hosting serta template responsive yang dipasang.
Memang benar, dalam sebuah platform terdapat cara membuat blog responsive menggunakan template HTML yang sudah tersedia. Anda hanya perlu menyesuaikan dengan blog sendiri sehingga bisa memiliki loading time yang lebih baik.
Bagaimana Cara Membuat Blog Responsive?
Lantas bagaimana supaya Anda bisa membuat blog yang responsive? Kemudian, bisakah blog yang responsive tersebut terkait dengan SEO sehingga selain cepat diakses, konten yang diposting juga dapat muncul di halaman utama google?
Tentunya hal tersebut bisa dilakukan asalkan Anda mampu mengikuti instruksi dengan benar. Cara membuat blog responsive supaya bisa terkait dengan SEO adalah dengan mencari template responsivenya terlebih dahulu.
Untuk template tersebut Anda bisa mencarinya di berbagai situs yang menyediakan secara gratis. Setelah itu, silakan Anda memilih template yang paling sesuai dan unduh ke dalam bentuk file .zip.
Kemudian, silakan masuk ke akun blog Anda dan klik menu cadangkan yang terletak di sebelah kiri tombol template. Klik menu tersebut dan masukkan file xml yang tadi diunduh, lalu tunggu prosesnya hingga selesai.
Setelah itu, atur format template sesuai dengan isi blog Anda seperti internal, header, foto dan lain sebagainya. Lalu tekan tombol simpan sehingga blog sudah memiliki template responsive yang SEO friendly.
Selain cara tersebut, bagi Anda yang ingin memiliki situs unik dan orisinil, maka bisa mencoba membuat template sendiri. Cara membuat blog responsive dengan template sendiri tentunya akan lebih menyenangkan dan membanggakan.
Cara bisa Anda lakukan adalah dengan masuk ke bagian tema pada blog dan klik opsi “edit HTML”. Maka, Anda akan melihat kode navbar yang muncul dan hapus kode tersebut untuk digantikan dengan yang lain, yaitu menjadi:
.post-body img, .post-body .tr-caption-container { padding: 0; width:auto; max-width:100%; height:auto; }
Kemudian, Anda juga perlu mengganti kode berikut ini:
<b:if cond=‘data:blog.isMobile’> <b:else/> </b:if>
Lalu ubah menjadi kode seperti ini:
Jika sudah, maka Anda bisa menyimpannya di atas “head” dan blog sudah memiliki template responsive. Namun, terdapat satu lagi kode untuk membuat template yang paling direkomendasikan, yaitu:
Setelah selesai mengubah kode HTML, maka Anda bisa mengecek tampilan blog kembali. Namun, bisa dipastikan jika cara ini cukup ampuh untuk mempercepat waktu loading sebuah website.
Cara Membuat Blog Responsive untuk Mobile
Selain cara yang sudah disebutkan di atas, lantas bisakah membuat template blog yang sesuai dengan sistem mobile? Faktanya, cara ini dapat dilakukan sehingga bagi para pengguna mobile tidak perlu kebingungan lagi.
Cara membuat blog responsive untuk tampilan mobile yang pertama adalah dengan membuka blog Anda. Jika belum memilikinya, maka Anda bisa memulai dengan membuatnya terlebih dahulu.
Setelah itu, Anda bisa masuk ke halaman dashboard dan memilih template yang sedehana. Pada bagian tema terdapat beberapa opsi dan salah satunya adalah “edit HTML”, maka pilih opsi tersebut sehingga muncul template dengan kode:
Untuk membuat blog responsive, Anda perlu menghapus kode tersebut dan menggantinya hanya dengan tulisan JavaScript seperti ini:
/*Responsive*/
@media screen and (max-width:1024px){
body{width:100%!important;padding:0;}
.content-inner{overflow: hidden;}
}
@media screen and (max-width:768px){
.main-inner .column-center-outer, .main-inner .column-right-outer{float:none;width:100%!important;}
.footer-inner, .main-inner .column-center-inner, .main-inner .column-right-inner{padding:0;}
.Header h1{font-size:30px;text-align:center;}
.Header .description{font-size:14px;text-align:center;}
}
@media screen and (max-width:414px){
.footer-inner .section, .main-inner .column-center-inner .section, .main-inner .column-right-inner .section {margin:10px;}
}
@media screen and (max-width:320px){
.fauxcolumn-right-outer .fauxcolumn-inner{border-left:none;}
.fauxcolumn-left-outer .fauxcolumn-inner{border-right:none;}
.footer-inner .section, .main-inner .column-center-inner .section, .main-inner .column-right-inner .section{margin:0;}
}
Jika sudah selesai mengetik template tersebut, cara membuat blog responsive selanjutnya adalah dengan menyimpan kode tersebut menjadi sebuah template sehingga blog Anda menjadi situs yang responsive terhadap pengunjung.
Diharapkan dengan blog yang lebih responsive, menjadikan pengunjung betah untuk berlama-lama membaca di blog yang Anda miliki.
Kelebihan Menggunakan Template Blog Responsive
Setelah berhasil membuat blog menjadi responsive, lalu kelebihan apa yang akan diperoleh platform Anda? Tentunya yang pertama Anda akan merasakan pengalaman bahwa mengakses blog bisa menjadi lebih simpel dan ringan.
Cara membuat blog responsive seperti ini akan membuat pengunjung tertarik karena tidak membuang banyak waktu untuk mencari sebuah informasi. Apalagi jika situs responsive support semua bentuk screen seperti mobile dan desktop.
Kelebihan lain yang pasti akan dirasakan oleh pengunjung adalah kenyamanan dalam mengakses sebuah platform karena tidak ribet. Pada akhirnya hal ini berbanding lurus dengan pendapatan adsense yang meningkat.
Bahkan dengan platform yang responsive juga akan mendongkrak SEO tools untuk menampilkan blog Anda berada di halaman utama google sehingga bisa lebih populer dari sebelumnya.
Meskipun begitu, Anda tidak serta merta akan merasakan dampaknya secepat itu. Anda tetap harus menjalankan blog dengan konsisten supaya mudah dikenali oleh pengunjung dan semakin banyak diakses.
Blog yang responsive pasti akan disukai oleh para blogger maupun pembaca. Oleh karena itu, jika Anda masih pemula sebaiknya memahai cara membuat blog responsive ini dengan baik.