Desain Blog Simple Untuk Blogspot [DIY]

Masih suka galau sama template blog ?. Salah satu elemen penting dalam nge-blog adalah template, apalagi kalau cewek hehe suka ngga ada puasnya. Ada banyak situs-situs yang memberikan template gratis dengan berbagai macam model. Template gratisan juga banyak yang bagus, banyak yang keren dan sesuai keinginan.Β Tapi sayangnya begitu templatenya selesai di rilis, suka tidak update alias tidak mengikuti perkembangan dari blogspot.

Banyak keluhan template gratisan ini seperti tidak support threaded comment, tidak support template designer blogspot sampai bingung lihat struktur html nya hihihi. Yah namanya juga sudah dimodifikasi dan gratisan jadi kita taunya jadi aja. Jadi gimana dong? kalau saran saya ya buat template sendiri, utak atik sendiri. Suer ngga susah, saya ajarin yang paling basic yang paling gampang hehe. Yah nanti jelek gimana dong? ngga harus yang kuerenn abis kan, dengan gradasi di mana, rame dengan karakter yang imut dan lainnya. Kalau saya, bisa langsung menilai karakter orangnya seperti apa loh kalo saya lihat dari template blognya qeqeqe #BukanPeramal #Sotoy.

Hanya dengan sedikit sentuhan, kita bisa kok membuat template yang cantik dengan desain yang simple. Keuntungannya apa sih? kita ngga bakalan repot dengan berbagai macam update yang terjadi sama blogspot karena sudah mengikuti basicnya. Dan yang pasti bukannya ngeblog itu difokuskan untuk menulis ya, jadi ngga perlu repot sama tampilan yang aneh-aneh ^^.

Nah sebelumnya saya sudah share beberapa tutorial untuk mendesain blog sendiri. Cuman mungkin karena selang-seling jadinya tidak berurutan dan bingung cara mengaplikasikannya. Yuk kita mulai belajar utak atik blog sendiri, hasil dari utak atik simple bisa dilihat di bawah ini :

TEST SITE

BEFORE
AFTER

 

Caranya gimana buat seperti diatas? yuk ikuti step by stepnya dengan pelan, sabar, tenang dan luangkan waktu ya hehe namanya juga belajar ^^. Kalau ada kesulitan feel free banget buat tinggalkan komentar atau kalau belum ada yang saya bahas bisa request melalui form contact.

Langkah Pertama

Lihat tulisan saya dibawah ini, kenapa saya menerapkan desain seperti diatas sebagai kondisi ideal seorang blogger yang fokus untuk menulis ataupun ikut perlombaan.

http://shintaries.co/prinsip-desain-blog-untuk-lomba.html

Langkah Kedua

Kenali bagian-bagian blog, tak kenal maka tak sayang ^^. Ini penting untuk mengidentifikasikan bagian yang mau diutak atik.

http://shintaries.co/mengenal-bagian-blog.html

Langkah Ketiga

Masuk ke akun blogspot, buat blog baru sebagai latihan terlebih dahulu sebelum mengaplikasikannya pada blog yang sebenarnya. Isi dengan 2 buah postingan dan diisi dengan gambar. Pilih template simple/sederhana dari menu dashboard -> template. Kalau tampilan sudah sesuai nanti tinggal copy paste kode yang sudah dibuat.

Langkah KeempatΒ 

Kita mulai mengerjakan dari atas ke bawah, yang artinya dari header sampai footer. Pertama kali, buat header yang mencerminkan tulisan kita atau pribadi kita atau sesukanya aja hehe. Kalau tidak ingin pakai header tapi sekedar judul diatas bisa lewatkan langkah ini.

http://shintaries.co/membuat-header-pada-blog-menggunakan-pixlr.html

Langkah Kelima

Pilih background yang mau digunakan untuk memberikan kesan berbeda. Cara mendownload dan memilih background bisa dilihat di sini :

http://shintaries.co/background-gratis-dari-colourlovers.html

Langkah Keenam

Pasang background yang sudah di download di menu dashboard -> template -> sesuaikan -> latar belakang :

Langkah Ketujuh

Tentukan font yang ingin digunakan, caranya bisa dilihat disini :

http://shintaries.co/mengganti-font-blog-dengan-google-web-fonts.html

Sebagai referensi bisa dilihat font yang menurut saya bagus digunakan dan nyaman dimata :

http://shintaries.co/font-gratis-pilihan-dari-google-fonts.html

http://shintaries.co/google-font-pilihan-untuk-body-posting.html

Langkah Kedelapan

Tentukan kombinasi warna yang diinginkan, caranya mendapatkan warna bisa dilihat :

http://shintaries.co/inspirasi-warna-untuk-blog.html

Langkah Kesembilan

Download panduan CSS Basic untuk memahami kode sederhana dari CSS DISINI

Langkah Kesepuluh

Masukkan kode berikut ke dalam template -> sesuaikan -> tingkat lanjut -> CSS

 

 

Langkah Kesebelas

Setelah memasukkan kode css diatas, klik terapkan dan lihat perubahan dari blognya. Kalau masih ada yang berbeda dengan test site milik saya, silahkan utak atik menu template designernya ya. Bisa mulai dari warna tab menu, warna background tanggal, garis batas gambar dan lain-lain. Sempatkan waktu untuk eksplorasi warna dan tampilan yang sesuai. Jangan lupa untuk di save dan lakukan hal yang sama untuk menerapkan di blog yang sebenarnya. Selamat belajar ^^.

Jangan lupa untuk follow saya di G Plus, Facebook Pages dan Twitter untuk update info terbaru tutorial πŸ˜€

Advertisements

45 thoughts on “Desain Blog Simple Untuk Blogspot [DIY]

  1. duh pingin belajar dari postingan ini tapi koneksinya lemot banget nih mbak, nunggu dirumah deh aku balik lagi ya. Makasih ya tutorialnya

  2. Wah panjang ini ya? Ya deh ntar malam habis ngeblog. Kalau udah utak atik gak bisa brenti soalnya. Semalam blogspotku yg traveling aku utak atik sampai hancur lebur, terus aku balikin default aja lagi hehehee…

    1. saya udah ngga pakai blogspot lagi πŸ™‚
      banyak yang sifatnya advanced yang hanya bisa di wordpress

      dan karena masih banyak yang pakai blogspot dan suka bingung ngutak ngatiknya, jadi saya buatkan tutorialnya ^^

  3. sumpah mba keren sekaliii….bermanfaat buat saya yang pemula buat belajar design blog.
    tapi saya coba, yang judul blog nya kok g berubah yaa mba?
    mba kalau tutorial bikin illustrasinya yang disamping kiri header itu bagaimana yaa mba ??

    1. Haii mba elya ^^

      Coba ditambahkan paling bawah ya di advanced -> add CSS :

      h3.post-title, .comments h4 {
      text-align: center;
      font-family: 30px, ‘Just Me Again Down Here’, cursive;
      }

  4. Pingback: Desain Blogspot Simple – Hitam/Putih
  5. Salam kenal mak,

    sy blogger baru, trus mau nyoba design blog dari Mak Shinta yg ini dan ngikutin langkah2nya, smp tahap add css sdh bisa, trus add template … di previewnya keliatannya ok kurang lebih seperti contoh yg punya emak, tp pas di view blog kok penampakannya beda ya mak, terutama dari font, trus social media juga gak muncul, trus yang saya bingung kan tuh navigasi barnya ilang yaa, klo saya mau masuk dashboradnya gimana ya maak.
    Maap pemula banget, tolong bisa di liat kah makk, ke blog saya. http://ophiziadah.blogspot.com
    *tuluuung πŸ˜€ meni lieur euy hahahaha
    thx

    1. Haii mak ophi ^^. Bagus blognya, udah main kesana πŸ™‚

      Untuk font, beberapa sudah keluar mak. Kalau masih belum yakin, bisa mencoba dulu buat test site untuk memastikan fontnya oke. Baru di buat di blog yang sebenarnya.

      Untuk navbar kode :

      #navbar {
      display:none;
      }
      dihilangkan saja mak, nanti muncul lagi ^^

  6. Mak, maaf mampir lagii ini masih penasaran untk font header, klo dipreview sudah oke, seperti punya mak shinta tp pas di apply dan view blognya kok font headernya beda yaa
    kenapa ya mak??

  7. keren-keren tutrialnya makasih mak shinta ries…tapi tetap nggak berani otak -atik sendiri takut hancur lebur blogku soalnya aku sering banget nggak teliti pas baca petunjuknya

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s