Membuat Desain Template Mobile-friendly Responsif Blogger
Desain Template Ramah Seluler yang Responsif –
Banyak blogger yang digunakan untuk mencari; bagaimana cara membuat blog blogger saya benar-benar responsif di semua ponsel? Bagaimana cara membuat blog yang ramah seluler untuk menghindari hukuman Google? Bagaimana cara membuat template Blogger Responsif & ramah seluler? Bagaimana saya tahu kalau template blog saya mobile friendly? Dan seterusnya…
Dengan satu survei yang dilakukan 2015-17, terlihat bahwa; lebih dari 55% dari Anda lalu lintas organik datang dari perangkat seluler terutama di AS, Asia & Afrika, sehingga kini Anda dapat membayangkan apa yang akan terjadi di masa depan. Anda semua blogger yang membaca ini perlu mulai membangun templat situs web yang kompatibel dengan seluler untuk situs blogger Anda.
Google telah memperbarui kebijakan dan ini menunjukkan bahwa respons seluler memiliki dampak signifikan pada peringkat pencarian situs web; jadi untuk menghindari hukuman, blog Anda harus memiliki tampilan seluler untuk semua perangkat.
Sekarang pertanyaannya adalah cara membuat template blogger responsif dan bagaimana kita mulai mengembangkan template blogger responsif. Dan itu adalah salah satu tugas berat di membuat ponsel situs web responsif karena itu adalah pekerjaan hebat untuk mengelola HTML5 dan CSS dengan permintaan @media. Jika Anda melihat, ada banyak tempat yang mudah Anda dapatkan templat situs web dasar responsif gratis untuk situs web Anda. Tetapi Anda harus meninggalkan desain yang ada.
Belajar Pengembangan Web Responsif dari awal untuk membangun & mengembangkan a web seluler responsif tata letak menggunakan termasuk tata letak yang fleksibel, kueri media CSS3 sederhana yang menghasilkan media fleksibel untuk mengubah tema Anda saat ini menjadi tampilan responsif yang ramah mobile. Tutorial lanjutan ini memberi Anda pengantar untuk membangun desain web responsif untuk seluler tata letak situs apa pun, tetapi terutama untuk blogger. Ini adalah panduan utama yang harus Anda ikuti yang menjelaskan semua tentang desain situs web yang ramah seluler dengan bantuan dari CSS ramah seluler dalam HTML5 yang memungkinkan Anda membuat template blogger ramah & responsif.
|
| Pengembangan Web Responsif |
Terakhir kali kita lihat pemeriksa situs responsif. Pelajari lebih lanjut tentang perancangan situs web yang responsif dan faktor-faktor yang memengaruhi dalam mendesain situs web. Saya tahu, setiap pengunjung seperti pelanggan kami, dan itu adalah orang yang sangat penting untuk blog Anda, jadi saya membuat tutorial ini setelah banyak pemecahan masalah dengan template blogger untuk membantu Anda membangun desain situs web seluler sehingga pengunjung seluler Anda tidak akan kembali dan menjadi pembaca reguler blog Anda.
Baca juga: 3 Tips Untuk Membuat Blog Anda Muat 10x Lebih Cepat | Kiat Blogging
Pengembangan Web Responsif – Beberapa Layar, SATU DESAIN
Desain web responsif untuk seluler – Desain situs Anda bagus untuk desktop tetapi beberapa di antaranya gagal jika menyangkut layar kecil. Berikut ini adalah tutorial lanjutan yang dijelaskan untuk membuat templat HTML blogger responsif dibandingkan dengan templat tata letak tetap lama di mana Anda tidak hanya dapat mengonfigurasi widget untuk menampilkan konten alternatif untuk tampilan seluler tetapi juga Anda dapat menyesuaikan templat ramah seluler lengkap , tempatkan unit iklan AdSense hanya untuk kerangka seluler juga.
Anda mungkin juga ingin tahu; Tingkatkan Peringkat Mesin Pencari (PageRank) dengan Menghasilkan Tag Meta HTML
Membuat Website Seluler Responsif
Desain situs web yang ramah seluler – Semua situs web baru sekarang dibangun dalam HTML5. Tetapi secara default blogger hanya menyediakan 7 templat yang TIDAK dapat Anda edit sesuai kebutuhan Anda, atau mungkin menyebabkan tampilan yang berbeda dari yang Anda miliki sekarang. Juga ada banyak situs yang dapat menyediakan templat seluler gratis untuk blog Anda, meskipun mereka membuat templat yang bagus untuk situs Anda, mereka memiliki beberapa kelemahan karena Anda tidak dapat menempatkan widget iklan AdSense, mereka akan menempatkan spanduk mereka di templat Anda lebih dari beberapa situs menempatkan iklan dan mendapatkan uang dari pengunjung seluler Anda. Kerugian utama dari situs ini menurut saya adalah membuat tautan situs web Anda berbeda dari aslinya, sehingga status berbagi sosial bervariasi.
Membangun Situs Web Responsif
Anda sekarang seperti pengembang situs web responsif dan belajar sesuatu yang baru untuk masa depan yang lebih baik. Template fleksibel atau responsif berarti satu desain yang secara otomatis dirancang ulang sesuai dengan ukuran layar. Pertimbangkan keuntungan-keuntungan berikut dari tutorial ini untuk membangun situs web yang responsif;
- Lupakan tentang mempertahankan situs web terpisah untuk seluler.
- Ini bagus untuk SEO.
- Tautan situs Anda tetap sama, sehingga tidak menimbulkan efek apa pun dalam statistik berbagi sosial.
- Agen pengguna browser tidak menyebabkan efek pada desain.
Pengembangan Responsif – Mulai
Note: Sebelum memulai pekerjaan apa pun di sini atau di mana saja, Anda perlu mencadangkan semua yang Anda butuhkan, untuk memulihkan semua hal jika terjadi kesalahan. Jadi buat cadangan semua pengaturan dan templat yang Anda gunakan sekarang.
- Pertama pergi ke Templat >> Pilih Templat seluler >> Pilih Adat.
- Menyimpan
Anda bisa lihat pratinjau dari situs Anda. Ini mungkin terlihat bagus untuk beberapa blogger. Tapi kami di sini untuk membuatnya menyenangkan dan fleksibel.
Ukuran layar untuk desain web responsif: Deteksi Layar
- Pergi ke Templat >> Edit HTML
- Tambahkan kode berikut di bawah ini menandai
Meta viewport ini digunakan untuk mendeteksi ukuran layar kemudian mengumpankannya ke CSS untuk mendesain ulang yang sesuai.
Sebagai seorang profesional, Anda harus tahu; Blog vs. Situs Web Untuk Menghasilkan Uang | Bagaimana Blog Berbeda dari Situs Web
Mobile friendly CSS – Merancang Situs Web
Kita perlu memuat properti CSS sesuai dengan tampilan layar:
Menemukan dan ganti dengan kode berikut:
Kustomisasi Widget
Sekarang kita dapat mengizinkan widget tertentu untuk ditampilkan pada tampilan seluler. Bagaimana?
Biasanya dalam widget HTML itu didefinisikan sebagai:
<b: widget id = 'Tipe ID'terkunci =' benar 'judul ='Judul-Widget'/>
Di sini Anda hanya perlu menambahkan tag seluler ke sana
<b: widget id = 'Tipe ID'locked =' true 'mobile =' yes 'title ='Judul-Widget'/>
Tag properti seluler ini akan menyebabkan widget tersebut ditampilkan di tampilan seluler.
| ponsel = ‘ya’ | tampilkan dalam tampilan seluler |
| ponsel = 'tidak' | jangan tampilkan di tampilan seluler |
| seluler = 'hanya' | hanya tampil di tampilan seluler |
Kustomisasi CSS yang ramah seluler
Sekarang kerja keras yang sebenarnya sudah dimulai sekarang. Jika Anda tahu pengeditan CSS dengan baik maka Anda bisa mengikuti kelas untuk mendesain template seluler Anda.
.mobile # sidebar-wrapper { | Kelas ini tidak akan mengizinkan bilah sisi ditampilkan di tampilan seluler. |
Seperti dijelaskan di atas, Anda hanya perlu meletakkannya .mobile kelas untuk setiap bagian dari kelas CSS lama Anda dan tentukan sesuai kebutuhan Anda.
DIREKOMENDASIKAN: 25 Cara Teratas untuk TETAP DIMotivasi untuk BLOGGING | Paksa dirimu
Anda mungkin juga ingin tahu; Pendaftaran Undang-Undang Toko Online @ Rs.29 Untuk Blogger / YouTube Pemilik Saluran / Pemilik / Bisnis Online
Kustomisasi CSS bersyarat tingkat lanjut
Belajar membuat desain web sesuai dengan kondisi ukuran layar.
Layar @ media dan (max-width: 320px) { # sidebar-wrapper { Tampilan: tidak ada; } | Kelas ini tidak akan mengizinkan bilah sisi ditampilkan di tampilan seluler jika ukuran layar kurang dari 320px smartphones. |
Contoh: untuk tablet
Layar @ media dan (max-width: 768px) { / * CSS untuk layar ukuran besar seperti tablet * / } | Kelas ini akan memuat CSS yang telah Anda tentukan di dalamnya ketika ukuran layar kurang dari 768px seperti tablet. |
Anda perlu membaca untuk tutorial CSS terperinci lengkap: Cara Membangun Template Blogger Responsif CSS: Tutorial Lanjutan
Kustomisasi Template Responsif Seluler HTML5
Sekarang kami juga membuat perubahan dalam HTML secara bersamaan. Untuk ini, Anda hanya perlu tahu kondisi ponsel berikut
Apa yang kamu pelajari
Templat responsif juga penting karena templat Anda saat ini berperan bagi pengunjung. Itu membuat perubahan besar dalam rasio pentalan Anda. Kami benar-benar harus sadar dan harus mengambil posisi yang baik di pasar. Untuk sampel situs web responsif, periksa halaman ini di seluler dan desktop, Anda akan mendapatkan apa yang Anda pelajari dan apa yang perlu Anda lakukan dengan desain situs web seluler.
Apa selanjutnya?
Dalam tutorial berikutnya, kita benar-benar akan mengedit CSS dan HTML lengkap dari template blogger dan akan melihat bagaimana mengembangkannya sesuai dengan tampilan layar.
Tetap kecanduan.
