Panduan blogspot [Lengkap]

Tutorial cara mengganti dan mengedit tampilan Template Blog

Panduan Blogspot [Lengkap]

Setelah berhasil Membuat Blog menggunakan Blogspot selanjutnya perlu mengganti Template dan menyetingnya sehingga sempurna.

Yang menjadikan sebuah blog terlihat menarik pengunjung, tidak hanya isi dari artikel saja, penampilan atau pemilihan Thema atau Template juga sangat mempengaruhi pengunjung blog untuk berlama-lama di blog kita. Saya sendiri lebih nyaman bila berkunjung ke blog dengan tampilan menarik. Penampilan menarik tidak hanya dari segi desainnya, tetapi pemilihan warna juga berpengaruh terhadap keindahan sebuah blog. Contohnya saja bila berkunjung ke blog dengan warna background dan tulisannya sangat kontras, sehingga menyilaukan mata, saya rasa pengunjung juga tidak akan betah berlama-lama membaca artikel yang tersedia di situ. Sebaliknya bila membuka blog dengan tampilan dan warna yang sesuai, pastinya akan lebih nyaman untuk membaca dan berlama-lama di blog tersebut.

Untuk itu dihalaman ini saya akan membagikan Tutorial cara mengganti dan mengedit tampilan atau Template Blog. Jika kalian tertarik dengan tutorial ini, silahkan lanjutkan membacanya ya, dan bisa juga langsung di praktek kan di blog kalian sendiri.

Mengganti Template Blog

Sebelum memulai untuk mengganti template blog, siapkan terlebih dahulu Template atau Theme nya. Kalian bisa mendownload nya di sini. Koleksi Template Blogspot SEO, Fast Loading dan Responsive atau bisa juga mencari dari sumber yang lain.
Jika sudah di download, silahkan lanjutkan langkah berikut.

Masuk ke dashboard Blogger
Pilih Menu Tema kemudian di sebelah kanan atas pilih Backup / Pulihkan.
Klik tombol Browse dan ambil file Template (*.XML File) yang telah di download atau disiapkan sebelumnya, kemudian klik tombol Upload.
Selesai. Seperti ini lah cara mengganti tema atau template blogspot.

Sangat mudah sekali bukan cara mengganti tampilan atau Template Blog. Tapi tidak cukup sampai disini untuk mendapatkan hasil yang sempurna. Kita juga perlu mengedit menu-menu navigasinya atau bagian-bagian lain yang perlu di edit. Lanjut ke langkah berikutnya.

Mengedit Template Blog

Untuk mengedit tampilan Template atau Theme blog memerlukan waktu yang lumayan lama, karena ada beberapa yang perlu dibenahi. Jadi akan saya bagi menjadi beberapa bagian, diantaranya:

Mengedit Meta Tag dan Meta Content.
Mengedit Judul atau Nama Blog.
Mengganti ICON Blog (Favicon).
Mengedit menu navigasi Blog.
Mengedit Warna Template Blog (Optional).
Mengganti Domain Blogspot dengan Domain TLD (Optional).
Menambahkan tombol Download pada Blog secara Otomatis dengan CSS (Optional).
Menambahkan tombol menyerupai tombol keyboard pada Blog secara Otomatis dengan CSS (Optional).
Memasang Icon Font Awesome pada Blog (Optional).
Mengubah tampilan komentar blogspot versi lama menjadi versi baru (Optional).

#1. Mengedit Meta Tag dan Meta Content

Buka Dasboard Blogger kamu, Masuk ke Menu Tema - Edit HTML
Hal-hal yang perlu di edit antara lain:


<meta content='keyword1,keyword2,keyword3,dst' name='keywords'/>
<meta content='YOUR DESCRIPTION HERE' name='description'/>
<meta content='XXXXX' name='google-site-verification'/>
<meta content='XXXXX' name='msvalidate.01'/>
<meta content='XXXXX' name='alexaVerifyID'/>
<meta content='XXXXX' name='p:domain_verify'/>
<meta content='XXXXX' name='yandex-verification'/>
<link href='//plus.google.com/XXXXX/posts' rel='publisher'/>
<link href='//plus.google.com/XXXXX/about' rel='author'/>
<link href='//plus.google.com/XXXXX' rel='me'/>
<meta content='Indonesia' name='geo.placename'/>
<meta content='xxxxxxx' name='Author'/>
<meta content='https://www.facebook.com/xxxx' property='article:author'/>
<meta content='https://www.facebook.com/xxxx' property='article:publisher'/>
<meta content='XXXXX' property='fb:app_id'/>
<meta content='XXXXX' property='fb:admins'/>
<meta content='@XXXXX' name='twitter:site'/>
<meta content='@XXXXX' name='twitter:creator'/>

Kode-kode diatas dapat di temukan di bawah kode <head>.

#2. Mengedit Judul atau Nama Blog

Setelah mengganti template blog, biasanya Judul atau Nama Blog yang terdapat pada Header akan mengikuti dari Template bawaan. Bila Judul pada Header tidak sesuai dengan Judul Blog kita, berarti Judul Blog atau Header tersebut berupa Image. Untuk itu kita harus mengeditnya sesuai dengan Identitas Blog kita. Kalo kita ingin menggantinya dengan Gambar atau Image, siapkan terlebih dahulu Gambar nya.

Buka Dashboard Blog - Tata Letak, klik Edit pada kotak Header.
Pada bagian gambar, Klik pada tombol Browse, pilih gambar sesuai yang kita inginkan atau yang kita siapkan.
Selanjutnya klik Simpan dan Simpan Setelan.

Hasilnya bisa dilihat pada header Blog ini.

#3. Mengganti ICON Blog (Favicon)

Icon standar Blogspot biasanya Huruf B berwarna Orange. Kita bisa menggantinya sesuai selera kita. Persiapkan dulu Gambar Icon / favicon nya.

Buka Dashboard Blog - Tata Letak, klik Edit pada kotak Favicon.
Klik Browse dan ambil Favicon nya, kemudian Simpan dan Simpan Setelan.

Untuk mengetesnya, silahkan buka Blog kamu, atau Refesh bila halaman blog sudah terbuka.

#4. Mengedit menu navigasi Blog

Setelah Meta Tag, Judul, dan Favicon sudah kita edit, langkah berikutnya mengedit menu Navigasi. Menu navigasi biasanya berada di atas sendiri disampingnya Judul.

Langsung saja. Buka Tema - Edit HTML. Temukan kode berikut atau yang menyerupai:


 <ul>
 <li><a href='/'>Home</a></li>
 <li><a href='#'>Menu 1</a>
  <ul>
  <li><a href='#'>Sub Menu 1</a></li>
  <li><a href='#'>Sub Menu 2</a></li>
  <li><a href='#'>Sub Menu 3</a></li>
  </ul>
 </li>
 <li><a href='#'>Menu 2</a>
  <ul>
  <li><a href='#'>Sub Menu 1</a></li>
  <li><a href='#'>Sub Menu 2</a></li>
  <li><a href='#'>Sub Menu 3</a></li>
  </ul>
 </li>
 <li><a href='#'>Menu 3</a></li>
</ul>

Edit Menu 1, Menu 2 dan seterusnya, Sub Menu 1, Sub Menu 2 dan seterusnya atau yang menyerupai, sesuai dengan yang ingin kamu tampilkan di menu.
Pada bagian tanda (pagar) itu merupakan Link dari menu atau halaman, bisa juga label.
contoh:
<li><a href='/search/label/Software'>Windows</a></li>
bisa juga lengkap dengan URL blog nya
<li><a href='https://www.domain.com/search/label/Software'>Windows</a></li>
Bisa juga pada Nama Menu nya di tambahi Icon tertentu menggunakan fasilitas Font Awesome.
Contoh:
<li><a href='/search/label/Software'><i class="fa fa-windows" aria-hidden="true"></i> Windows</a>/li>
Windows

Social Widget

Menu

Panduan blogspot [Lengkap]