Cara Mengatur Lebar Halaman Blog Dengan Edit CSS/HTML di Blogspot

27 April
Cara Mengatur Lebar Halaman Blogspot Dengan Edit HTML | Googelio - Halo sobat, punya blog yang tampilannya rapi pastilah jadi impian bagi sobat semua. Salah satu yang perlu diperhatikan adalah lebar blog. Kali ini kami akan mengulas bagaimana mengedit template blogger pada bagian lebar halaman melalui edit CSS/HTML.

Cara Mengedit dan Mengatur Lebar Halaman Blog Di Blogspot Dengan CSS/HTML



Mengatur Lebar Halaman Template Blog



Tampilan blog yang menarik merupakan daya tarik tersendiri bagi para pengunjung blog agar betah berlama-lama di sebuah web. Lebar template blog merupakan salah satu aspek yang perlu dipertimbangkan para blogger pemula, agar bisa menyesuaikannya dengan web browser di perangkat.

Manfaat Mengatur dan Mengedit Lebar Halaman Blog


Hal ini sangat beralasan, karena web browser punya coding tertentu yang akan menampilkan konten sebuah web atau blog, termasuk lebar halaman. Banyak sekali manfaat yang diperoleh bila mengelola lebar halaman template blog dengan baik, yaitu :


1. Memberikan Kesan Kerapian

Tampilan blog yang rapi menjadi salah satu faktor ketertarikan visitor agar mau mengunjungi blog kita. Kalau tampilannya sudah awut-awutan, orang malas berkunjung ke website tersebut. 


2. Meningkatkan Visitor

Tidak ada aturan khusus yang menyatakan lebar blog dan tampilan blog berpengaruh terhadap visitor, tapi berdasarkan pengalaman orang lebih suka mengunjungi situs yang rapi, teratur dan enak dilihat serta template memenuhi kaidah SEO. Hal ini sejalan dengan poin 1 di atas.Baca juga : Kriteria Template Blog SEO Friendly yang Mendatangkan Visitor.


3. Kesesuaian Dengan Platform Gadget (Responsive)

Website atau blog sekarang sudah bisa diakses di smartphone. Oleh karena itu, sangat penting untuk mengatur lebar blog agar tampilannya sesuai dengan web browser di komputer/laptop (versi desktop) maupun versi mobile. 


4. Memberikan Ruang Untuk Widget Maupun Iklan

Blog merupakan salah satu jenis web yang bisa dimonetisasi, misalnya sebagai media penayangan iklan dari Google atau biasa juga disebut Google Ads Publisher. Dengan mengedit lebar halaman blog, sobat bisa memasang kode iklan Google Ads dan tampilan iklan yang muncul terkesan rapi. 


5. Bisa Menjadikan Blog Sebagai Media Yang Menguntungkan Secara Bisnis

Blog yang punya tampilan rapi, dengan lebar halaman yang responsive di berbagai platform gadget berpotensi menarik minat para publisher, atau marketing perusahaan tertentu untuk menjadikan blog sobat sebagai media rekanan. Menjadi rekanan dari perusahaan memberikan banyak keuntungan, salah satunya keuntungan finansial dimana blog sobat akan diberikan honor tertentu untuk mempublish konten milih perusahaan, atau menayangkan iklan mereka. 

Nah, sampai di sini sobat sudah tahu mengapa mengedit lebar blog di blogspot untuk versi desktop maupun versi mobile itu sangat perlu. 

Lalu bagaimana caranya mengedit lebar blog ?

Cara Mengedit Kode CSS/HTML Lebar Halaman Blogspot/Blogger

Blogspot.com atau sering juga disebut blogger.com adalah sebuah media website gratisan yang dipunyai oleh Google. Meningkatnya kebutuhan akan aneka informasi yang bisa diakses lewat website, menginisiasi Google untuk menyediakan platform web gratis yang bisa digunakan untuk berbagai kebutuhan. Dan salah satu yang menarik, yaitu dengan menyediakan fitur monetisasi blog sehingga weblog bisa menjadi media penayang iklan dari para advertiser. 

Tapi setiap blogger punya selera masing-masing tentang tampilan blognya. Ada yang ingin punya blog dengan tampilan lebar yang maksimal, ada juga yang ingin lebar tampilan blognya minimalis. Secara umum, beberapa blog gratisan seperti blogspot.com atau blogger.com punya settingan masing-masing, misalnya 720 pixel, atau 960px, atau lebih lebar lagi, 1080px misalnya. Dengan settingan otomatis di dashboard blogger.com, sobat bisa mengatur lebar blog tersebut sesuai keinginan sobat.

Sobat harus sudah punya akun email di Gmail, sehingga bisa mendaftar blogspot.com. Kalau sobat punya akun lain sudah barang tentu tidak bisa mengakses blogger.com. Kalau belum punya, sobat mesti buat dulu akunnya. Sobat bisa mengikuti panduannya dari awal sampai selesai. 


Karena kita sedang mengulas trik mudah mengatur lebar blog di blogspot.com atau blogger.com, maka sobat tentunya sudah punya blog sendiri di blogspot/blogger. Bagaimana memulai cara edit HTML lebar halaman blog di blogspot kalau sobat sendiri belum punya blog, ya toh ? 

Langkah 1 : Masuk Dashboard Blogspot Sebelum Mengedit


Masuk Ke Dashboard Blogger Dengan Sign Ini Terlebih Dahulu. Kalau sobat sudah punya email Gmail dan sudah punya blogspot sendiri, sobat cukup "Sign In" agar bisa masuk ke tampilan dashboard blogspot.

Langkah-langkahnya seperti ini : 
  • "Sign in" terlebih dahulu di blogger.com agar bisa masuk ke dashboard blog.  
  • Setelah sign in masuk ke opsi "Design" pada bilah kiri dashboard blogger, 
  • Kemudian pilih "Template", lalu klik edit HTML
  • Setelah masuk dalam editor template yang berisi kode-kode permograman HTML, CSS, javascript dan jQuery, terlebih dahulu centang tanda expand template widget. 
  • Lakukan Back Up Template terlebih dahulu, agar sewaktu-waktu terjadi error anda bisa kembali ke template semula.
  • Setelah melakukan back up, maka cara edit HTML lebar blog di blogger.com sudah bisa dimulai. 

Langkah 2 : Edit Kode CSS/HTML Blog 


Selanjutnya pada editor template, cari kode yang akan di lebarkan, yaitu : #Outer-Wrapper. Bila anda mengedit blog di browser Mozilla tekan Shift+F3 agar lebih mudah dalam pencarian. Hasilnya tampak seperti ini : 

#outer-wrapper {background:#000;width:960px;margin:0 auto;padding:0;text-align:left;border:2px solid #1A1A1A;}


Keterangan :

#outer-wrapper : kode lebar halaman total
width : besarnya satuan lebar halaman
margin : jarak antar sisi
padding: celah antar sisi
text-align: arah awal text/tulisan
border:garis sisi  

  • Lihat tulisan yang dicetak miring di atas, ada kode width:960px. Kode inilah yang mempengaruhi lebar #outer-wrapper.
  • Ganti angka tersebut sesuai keinginan anda, apakah ingin diperlebar atau diperkecil/dipersempit. Tidak semua orang memiliki selera yang sama terhadap tampilan blog khususnya lebar halaman template.
  • Bila ingin tampilan mobilenya responsive sesuai dengan lebar gadget, ganti 960px dengan 100%, sehingga hasilnya menjadi width:100%.
Pastikan dulu apakah lebarnya sudah sesuai keinginan. Anda bisa melihat tampilan blog anda dengan lebar yang diperbarui dengan klik Pratinjau

Bila lebar halaman blog sudah sesuai dengan selera sobat, silakan simpan template melalui opsi save template.

Baca Juga : 



Nah, bagaimana, mudah kan menerapkan cara edit HTML blog mengatur lebar halaman di blogspot ? Saran Googelio, sobat bisa banyak bertanya di group-group blogger di media sosial, supaya lebih cepat mahir mengedit kode HTML. 

Share this

Related Posts

Previous
Next Post »

1 Comments:

Write Comments
3/7/18 16:50

Saya sangat tertarik untuk mengikuti tutorial ini namun karena saya masih pemula saya sedikit takut untuk mempraktekan dan apakah kode tersebut sama dengan kode template yang saya gunakan ?, walaupun template yang saya gunakan masih template default dari blogger.

Namun saya sangat berterimakasih karena mendapatkan tempat belajar mengenai kode template apa lagi cara anda memberi penjelasan sangat detail, lugas dan mudah di pahami.

avatar