Skip to main content

Cara Mudah Mengubah Tampilan Blog Menjadi Lebih Menarik

Cara Mudah Mengubah Tampilan Blog Menjadi Lebih Menarik
Seo v6 - Cara mengubah tampilan blog menjadi lebih menarik, topik kali ini lebih mengarah kepada pembahasan pada CSS. Walau tidak begitu mendalam namun hal ini bisa menjadi keharusan yang harus di pelajari kalau kita hendak mau merubah tampilan pada blog supaya terlihat menarik. Apa itu CSS? , CSS adalah singkatan dari Cascading style sheet, yang merupakan code pemrograman untuk mengatur gaya tampilan atau layout web. Misalnya Warna tampilan, Font, Ukuran, Posisi, Bentuk, Border, dll.

Bagaimana cara mudah untuk mengetahui code CSS dan merubah CSS web atau blog? . Kalau kita sudah mendengar kata code pasti yang terngiang dikepala kita adalah code pemrogaman yang sulit yang susah untuk dipelajari, apakah seperti itu?. Kabar baiknya Css merupakan code yang paling mudah dipelajari dari struktur pemrograman web yang lainnya, jadi langsung saja kita siapkan prangkat yang mau kita gunakan .

Memanfaatkan web brouser untuk mengelola css 

Kita ambil contonya saja menggunkan crome brouser, bagi yang tidak punya bisa langsung diinstal dan gratis. Setelah itu perhatikan langkah-langkah berikut ini:

1. Buka web atau blog yang mau kita olah.

2. Tekan Ctrl + Shift + i , maka akan muncul tampilan seperti dibawah ini

Cara melihat code css web

Bisa kita lihat letak code css dan htmlnya , Setiap element web tentunya disusun oleh code HTML, sedangkan code CSS memberikan peranan untuk gaya tampilan pada setiap element HTMLnya. Sampai disini pahami dulu struktur code pada web blog yang mau kita kerjakan - seo v6.

Tentunya pada setiap web akan kita temukan berbagai macam struktur data yang berbeda-beda namun pada intinya mempunyai kerangka yang sama. 

3. Menyeleksi struktur code menggunkan Ctrl + shift + C , ini berfungsi memudahkan kita menemukan code html dan css yang menyusun sebuah element pada web.

4. Setelah menemukan element html yang mau kita ubah selanjutnya mengubah atau menambahkan code CSS yang kita ingikan.

5. Mengcopy code css nya lalu ganti atau tambahkan pada template web atau blog , biasanya code css blog berada didalam code style dan skin.

Cara di atas merupakan garis besarnya saja, belum mengarah kepada spesifiknya. Di harapkan untuk memahami dulu dan membiasakan untuk melihat berbagai macam element code nya dan sembari mencoba-coba untuk mengubah-ubah code cssnya , misalnya color, size, posisi. 

Untuk lebih meperdalam lagi dalam memahami fungsi setiap code cssnya akan saya bahas pada artikel selanjutnya, Seo v6.

Comments

  1. itu gmna ya mas tampilan nya kok beda sama versi comtempo yg pertama side barnya kok disebelah kiri?
    dan juga contak us nya ga baerfungsi itu mas trma ksih

    ReplyDelete
    Replies
    1. Untuk contact us nya coba buka halaman baru, langsung masuk mode html lalu paste codenya lalu edit url dan no id blog, lalu langsung di publikasikan, jangan buka mode composenya atau pratinjau, karena bisa terjadi perubahan code.

      Template contempo versi setandar sidebarnya memang disebelah kiri, yang berbeda apanya gan?

      Delete
  2. Malam om randi,,, apa kabar? kayaknya makin rame orderan template premiumnya nih hehe :)

    Btw saya perhatikan artikel diblog SEO V6 ini kalau diarahkan kursor mouse ke kotak (kolom artikelnya) seakan menjadi timbul,,, kesannya seperti 3 dimensi. Itu cara bikinnya gimana om? bagi script css nya dong? hehe :)

    ReplyDelete
    Replies
    1. Alhamdulillah rezeki gak kemana om.

      Masukkan CSS ini

      body.feed-view article.post-outer-container:hover {
      box-shadow: 0 0 4px rgba(0,0,0,.14), 0 4px 8px rgba(0,0,0,.28);
      }

      Delete
    2. kalau yang CSS ini untuk bagian blog postingannya

      body.item-view .Blog:hover {
      box-shadow: 0 0 4px rgba(0,0,0,.14), 0 4px 8px rgba(0,0,0,.28);
      }

      Delete
    3. Alhhamdulillah udah berhasil dengan sukses saya pasang om,,, makasih banyak ya :D

      Delete
  3. Pliss help me

    Saya mau tanya cara buat font pada postingan agar tidak mengecil pada tampilan hp gimana ya mas,saya sudah buat google font, tapi error terus, sudah edit ukuran font di pengaturan,pada tampilan desktop memang sesuai, tapi masih mengecil di tampilan seluler

    supaya bagus cara nya gimana ya mas,? saya ingin memodel font pada blog seo v6 ini karena tampilan font nya tetap stabil di seluler,

    template yang saya gunakan "notable"

    sory mas,agak panjang pertanyaan nya,pliss di beri pencerahan ya.
    Terimakasih

    ReplyDelete
    Replies
    1. cari code ini

      body.item-view .Blog .post-body {
      font-size: 14px;
      }

      hapus code ini font-size: 14px;

      Delete
  4. WOoow,thank you brother, thank so much, WORKS :)
    terimakasih banyak

    ReplyDelete

Post a Comment