Blogspot adalah platform untuk membuat blog/website yang bisa
membuat senang penggunanya terutama web designer seperti ane.hhe Sekitar dua
tahun yang lalu, ane bahkan tidak bisa membuat template sendiri tapi hari ini
ane mulai paham bagaimna cara mebuat template yang mudah di deteksi mesin
pencari.
Sekilas penjelasan yang ane pelajari selama ini..
Jadikan Blogger Sepenuhnya
Responsive Dan user friendly, Saat membuat template kita sendiri, kita harus
mempertimbangkan bahwa blog kita dilihat oleh pengguna laptop, pengguna tablet
dan pengguna ponsel. Karena itu kita harus membuat template yang akan terlihat
rapi di kedua laptop, tablet dan smartphone.
Responsive adalah sebuah
template yang rapi di semua perangkat. Pada awalnya, ketika kita merancang
template, umumnya statis. Artinya tidak fleksibel dan tidak menyesuaikan dengan
sudut psobatng yang berbeda, oleh karena itu perlu menambahkan beberapa kode
dan juga menghapus beberapa kode agar template kita sesuai dengan ukuran
perangkat.
hal ini tidak hanya membuat
template kita terlihat rapi, namun juga menambahkan beberapa kekuatan ke
peringkat blog kita dengan meningkatkan SEO kita. Nah, bagaimana sebenarnya
ini? selain untuk mendapatkan peningkatan optimasi mesin telusur, Sobat
perlu memasukkan tag user friendly yang terpasang template sobat yang mana nantinyamesin pencari google menambahkan lebih banyak preferensi ke blog dan situs web yang user
friendly.
Ini adalah alasan yang sama
sementara lebih dari 90% template premium terbaru dibuat fleksibel dan juga
sementara blog teratas dari Wikipedia, BBC dan banyak blog lainnya dibuat responsive
sehingga bisa mendapatkan skor 100/100 untuk pengalaman pengguna dan juga
mendapat nilai tinggi. pada kemudahan seluler.
Sekarang mari kita mulai !.
Mendefinisikan Breakpoint Perangkat untuk Template Blogspot
Apa Breakpoint Perangkat..??? Responsive, itu hanya berarti template blogger Sobat menyesuaikan dengan aturan tertentu di layar tertentu. Breakpoints adalah Query Media CSS3 yang memberitahukan browser yang akan dimuat oleh Layout untuk situs Sobat berdasarkan ukuran layar (viewport). Ini mengontrol tampilan antarmuka pengguna (UI) Sobat di perangkat seluler.
Tanpa break point, template tidak berjalan sempurna karena breakpoints adalah nilai yang memungkinkan Sobat mengatur berbagai peraturan ke layar perangkat yang berbeda. Untuk ukuran layar mobile kira kira 580px, jadi tetapkan aturan yang harus dipatuhi saat layar sampai 580px, disebut pengaturan breakpoint.
Mari kita Nonaktifkan Template Blogger Default
Seperti yang ane katakan sebelumnya, Sobat ganti template default yang disediakan oleh BlogSpot dan merancang templatenya sendiri atau mendownload template yang lain bisa di download pada artikel ini. Jadi pertama mari kita matikan template custom dan aktifkan kita.
Langkah 1 - Nonaktifkan Template Blogger Default
Nonaktifkan Template Blogger Default
Kunjungi blogger dan kemudian arahkan ke edit template
klik icon pengaturanyang berada di samping template desktop
Dan kemudian Pilih "Tidak, Tampilkan template desktop pada perangkat mobile"
Sekarang simpan.
Langkah 2 - Tetapkan Aturan Breakpoint ke Browser
Klik pada Edit HTML tepat di bawah pratinjau template dan cari kode di bawah ini dengan menggunakan CTRL + F
- Catatan: kode ini ditemukan di bagian atas kode template Sobat , tepat sebelum tag "<head>".
<b:if cond='data:blog.isMobile'> <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/> <b:else/> <meta content='width=1100' name='viewport'/>
Ganti kode diatas dengan kode di bawah ini.
- Kode ini akan membantu kita mengatur aturan dan template apa yang harus ditunjukkan pada perangkat tertentu.
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
Simpan template. Ini hanya beberapa langkah pertama dan kode di atas memberikan informasi ke browser web tentang ukuran layar perangkat mobile atau tablet.
Sekarang mari kita tambahkan Breakpoints !!
Menambahkan Break Breaks Mobile Friendly Untuk Blogspot
Setelah menonaktifkan template mobile default, dan mengatur aturan breakpoint browser, sekarang saatnya membuat template, kita sesuai dengan semua ukuran layar dan perhatikan bahwa apa pun untuk menambahkan breakpoint di bawah ini akan bekerja pada breakpoint tersebut. misalnya ketika Sobat menetapkan breakpoint pada 1024px, kode yang Sobat tambahkan akan bekerja pada semua breakpoint di bawah 1024px kecuali Sobat menetapkan breakpoint yang lebih rendah untuk memberi tahu kami 580px yang kemudian akan mengecualikan CSS dan kode di bawah 580px dari aturan sebelumnya 1024px.
Perhatikan bahwa kami telah menggunakan Query Media CSS3 dengan Menjaga Perangkat Apple sebagai stsobat r untuk kesederhanaan namun titik balik di bawah mencakup semua merek utama seperti Samsung, Blackberry, Nokia, Windows Phone, Kindle, Nexus dan sebagainya.
1. Pergi ke Blogger >> Template >> Backup template sobat
2. Klik Edit HTML
3. Cari "]]> </ b: skin"
<style>
/* ######## Responsive Cheat Sheet ########### */
/*-----Mobile Devices ZONE1 ----------*/
@media only screen and (max-width:320px) {
}
/*-----Tablet Devices ZONE2 ----------*/
@media only screen and (max-width:480px) {
}
/*-----Small Laptops ZONE3 ----------*/
@media only screen and (max-width:568px) {
}
</style>
dan paste Kode CSS berikut di atas ini:
Sekarang akan ditambahkan naskah umum. Yang perlu kita lakukan sekarang adalah mengatur aturan untuk setiap breakpoint. Ane akan menyiapkan dasar-dasar untuk perangkat seluler dan tablet. Sobat nantinya dapat memutuskan apakah akan menambahkan lebih banyak CSS atau membiarkannya pada dasarnya responsif.
Jadikan Template BlogSpot Perangkat Mobile.
Kini di perangkat breakpoint diatas, kita akan memilih ZONE2 yang untuk perangkat mobile dengan layar besar seperti perangkat iPhone 5, 6, blackberry 10, Nokia Lumia dan perangkat lain dengan layar lebar.
Jadi sekarang, Ane sudah mengonfigurasi blog percobaan Ane agar pas dengan ukuran 568px. Sekarang yang harus Sobat lakukan adalah mengganti unit untuk Ponsel (ZONE2) dengan kode di bawah ini.
/*-----For Mobile Devices ZONE1 ----------*/
@media only screen and (max-width:568px){
}.post{height:auto;width:100%!important;display:inline-block;text-decoration:none;float:left;margin:0 1.1% 2%;padding:0!important}.main-inner .column-right-outer{width:100%!important;padding-bottom:50px!important;padding-top:50px}}
}
Jadikan Template BlogSpot Cocok dengan Perangkat Tablet.
Setelah perangkat mobile, zona berikutnya adalah untuk Tablet yang diberi peringkat di ZONE2. Kode di bawah ini akan membuat template blogger sesuai dengan semua jenis template. Cukup gunakan kode di bawah ini untuk mengganti unit di ZONE2 di atas.
/*-----Tablet Devices ZONE2 ----------*/
@media only screen and (max-width:800px){
.main-inner .column-center-inner {padding: 0px;}
.main-inner .columns{padding-left:0;padding-right:310px;width:100%!important;position:relative;right:0!important}
.main-inner .column-right-outer{width:310px!important;margin-right:0!important;position:relative;right:10px!important}
.main-inner .column-right-outer{padding-top:50px!important;padding-bottom 50px!important}}
Jadikan Template BlogSpot Fit Laptop Kecil
Zona akhir bekerja dengan baik untuk laptop dan tablet kecil dalam tampilan horizontal. Cukup ganti unit dengan ZONE3 diatas dengan kode berikut.
./*-----SmaLL laptops ZONE3 ----------*/
@media only screen and (max-width:1010px) {
body .navbar {height: 0px !important;}
body{min-width:0!important;width:100%!important;padding:0!important}
.content{width:100%!important;min-width:0!important;overflow:hidden!important}
.header-outer{width:100%}
.fauxborder-left{width:100%!important}
html body .region-inner{min-width:0!important;max-width:100%!important;width:100%!important;padding-left:0}
.header-inner .section{margin:0;width:100%!important}
.footer-outer{width:100%!important}
.content-outer,.content-fauxcolumn-outer,.region-inner{min-width:0!important;max-width:100%!important}
#sidebar-right-1{width:100%!important}
.main-inner .column-right-outer{width:45%!important;margin-right:-310px;position:relative;right:10px!important}
.main-inner .columns{padding-left:0;padding-right:310px;width:70%!important;position:relative;right:20px!important}
#sidebar-right-1 a img{max-width:100%!important}
.post-body img, .post-body .tr-caption-container {
max-width: 100%;
height: auto;
}
}
Ini adalah kode dasar yang Sobat butuhkan untuk membuat blog Blogspot Sobat 100% responsive dan user friendly. Ane coba untuk membuat penerapannya sangat mudah dan jika Sobat ingin menambahkan warna latar belakang yang berbeda ke tampilan seluler, cukup cari ZONE yang sesuai dan tambahkan kode Sobat .
Hati-hati jangan sampai mengacaukan kode. Posting ini untuk mereka yang menggunakan template blogger bawan. Jika Sobat membeli template Sobat dari seorang desainer atau penyedia template premium gratis.
bisa juga lihat artikel ini.
selamat neblog sobat!!
0 Response to "Cara Membuat Template Bawaan Blogger Jadi Responsive"
Posting Komentar