Cara Mengatur Lebar Template Blogspot Degan Edit CSS/HTML

Panduan bagaimana cara mengatur /mengedit lebar halaman blogspot dengan CSS / HTML agar terlihat rapi.
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated

Cara Mengatur Lebar Template Blogspot Dengan Edit HTML | Googelio - Blog yang rapi tampilan dan desainnya tentu memberikan kenyamanan bagi visitor. Lebar blog adalah salah satu hal yang perlu diperhatikan agar desain blog terlihat menarik. Kali ini kami akan mengulas bagaimana mengedit template blogger pada bagian lebar halaman dengan cara edit CSS/HTML.

Manfaat Mengatur Lebar Halaman Blog

edit template bog

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.

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
  2. 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.

  3. Meningkatkan Visitor
  4. 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 : Contoh SEO Onpage Blog

  5. Kesesuaian Dengan Platform Gadget (Responsive)
  6. 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.

  7. Memberikan Ruang Untuk Widget Maupun Iklan
  8. 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.

  9. Bisa Menjadikan Blog Sebagai Media Yang Menguntungkan Secara Bisnis
  10. 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 penting.

Lalu bagaimana caranya mengedit lebar blog ?

Cara Mengatur Lebar Template Blogspot Dengan Edit Kode CSS/HTML

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.

Baca Juga : Cara Membuat Akun Gmail Baru

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 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: Cara Membuat Blog Yang Menghasilkan Uang di Blogspot

Nah, bagaimana, mudah kan menerapkan cara 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.

Getting Info...

2 komentar

  1. 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.
  2. GOOD SIMPLE
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.