Cara Desain Blog Sendiri

Cara Desain Blog Sendiri

Cara Desain Blog Sendiri. Desain blog sendiri menggunakan template blogger bisa dibilang cukup susah. Apalagi pemula seperti saya ini. Susahnya kita harus banyak membaca dan mempelajari cara mengedit HTML template, menambahkan kode css dan lain-lain. Tapi untungnya menggunakan template asli blogger. Kita bisa dengan mudah untuk mengedit warna, tata letak, mengatur lebar posting, dan masih banyak lagi yang disediakan oleh desainer template.

Jika menggunakan template buatan sendiri, atau download template dari situs lain. Kita tidak bisa menggunakan desainer template dari blogger, karena blogger tidak mendukung template luar. Kalau sudah begitu, mau mengganti warna saja susah, harus edit-edit html lagi, salah sedikit eror template. Masih mending menggunakan template asli blogger, susah diawal, karena harus banyak belajar, tapi seterusnya kita bisa edit template dengan mudah, menggunakan desainer template blogger. Berikut ini adalah daftar cara desain blog sendiri untuk pemula, menggunakan template asli blogger. Semoga Bermanfaat.

1. Cara Membuat Menu Di Blog.
2. Cara Buat Daftar Isi Blog.
3. Cara Buat Contact Us
4. Cara Buat Label atau Kategori.
5. Cara Membuat Read More Versi Blogger. 
6. Cara Buat Tombol Share.
7. Cara Buat Gambar Untuk Header Blog.
8. Cara Buat Tulisan Bayangan Pada Judul Blog.
9. Cara Buat Scroll.
10. Mengatur Gambar posting tidak melebihi halaman blog. 
11. cara menambahkan widget disamping header. 
12. Cara Membuat Menu Dropdown dengan Mudah.
13. Mengganti Tulisan Home-Previous-Next dengan Gambar.
14. Cara Mengganti Warna Background Judul Sidebar.
15. Memberi Warna Background di Judul Posting.
16.  Mangatur Ukuran Kotak Komentar Blog.
17. Cara Menghilangkan Navbar Blog.
18. Menghilangkan Sidebar Pada Posting Tertentu.
19. Menghapus Tulisan Jumlah Komentar.
20. Menghilangkan Tulisan Langganan Entri Atom.
21. Menghilangkan Gambar Tang-Obeng.
22. Menghilangkan Tombol Share di Halaman Awal Blog.
23. Menghapus tulisan tampilkan posting dengan label.

Cara Mudah Merombak / Mengedit / Memodifikasi Template Blog / Website

Mengedit atau memodifikasi tampilan blog itu menyenangkan dan sebenarnya tidak sulit jika kita mengetahui sedikit banyak tentang script CSS (Cascading Style Sheets), HTML, dan Javascript. Hal tersebut ingin kita lakukan biasanya karena ingin membuat tampilan blog agar lebih keren, memberi warna dan suasana baru, atau mungkin kita bosan dengan tampilan blog yang itu-itu saja.

Membaca script / kode tentu adalah hal yang menyebalkan terkhusus untuk blogger pemula termasuk Saya dulunya. Namun bila kita mengerti sedikit banyak tentang kode itu, hal yang tadinya menyebalkan bisa menjadi menyenangkan loh. Langsung saja simak cara / tutorialnya berikut ini.

• Pertama-tama login ke akun blogger.com > Buka blog yang akan diedit > Pada menu bar blogger sebelah kiri, klik Template > Pada menu Template klik Edit HTML
• Jika sudah membuka Edit HTML biarkan dahulu, sekarang buka blog Sobat, kita akan melakukan pengeditan tampilan blog dari Inspect Elemen terlebih dahulu.
• Inspect Elemen/ Periksa Elemen yang akan kita edit gaya, warna, ukuran dan lain sebagainya. Klik kanan pada bagian yang akan di edit, pilih Periksa Elemen / Inspect Element. 

Bingung cari ide kata kunci? gunakan Alat Pencari Keyword Ini sekali klik dapatkan ribuan ide

• Untuk pengeditan Saya sarankan menggunakan browser Mozilla Firefox, download disini, karena untuk memodifikasi CSS lebih mudah dan leluasa, atau Chrome juga tidak masalah.
• Kode HTML yang sebelah kiri, dan kode CSS yang disebelah kanan Inspect Element.
• Mengedit kode HTML dengan klik kanan kode HTML yang diinginkan,  kemudian Edit As HTML, atau tekan F2 saja pada kode tersebut. Maka tampilannya seperti pada Gambar 1 (Lihat di bawah postingan).
• Mengedit kode CSS yaitu klik Property / Value CSS yang ada disebelah kanan Inspect Elemen, kemudian ganti atau modifikasi sesuai keinginan. Pada contoh dibawah ini, Saya mengganti value / nilai dari warna background elemen .menu. Contoh pada Gambar 2 (Lihat di bawah postingan).
• Pengguna Firefox, pada bagian inspect element, pilih Style Editor/ Editor Gaya, untuk fokus ke pengeditan CSS. Editing HTML nya pada Inspector / Inspektur tab Inspect Element. Contoh pada Gambar 3 (Lihat di bawah postingan).
• Pilih style utama blog Sobat yang hendak diedit, atau periksa satu persatu kumpulan CSS yang ada disebelah kiri gambar berikut. Silahkan Sobat, mengotak atik CSS yang ada pada kolom tengah. Contoh pada Gambar 4 (Lihat di bawah postingan).
• Jangan sungkan untuk menghapus atau menambahkan kode pada CSS maupun HTML, karena pengeditan ini sifatnya sementara saja, dan hanya terjadi pada komputer Sobat.
• Tetap lanjutkan saja pengeditan, jika sudah menemukan atau menyelesaikan desain yang diinginkan, save atau salin kode HTML dan CSS yang baru tersebut, ke Edit HTML yang ada pada Blog sobat, search saja di blog dengan CTRL+F agar memudahkan menemukan kode yang akan diganti.
• Dan lagi lagi, jangan berhenti berusaha mencoba terus menerus, jika belum berhasil coba dan coba lagi, karena semakin sering kita menemukan masalah dan memecahkannya, semakin banyak pula pengalaman kita dalam mendesain web.
• Gunakan juga tool color generator dan editor HTML CSS blog ini, yang mungkin memudahkan Sobat dalam pengeditan.

Semoga tutorial atau penjelasan yang Saya tuliskan pada artikel ini dapat membantu Sobat blogger sekalian untuk memodifikasi tampilan blog atau websitenya. Lebih dan kurangnya Saya mohon maaf, Terima Kasih.

Belajar Dasar Web Design (Cara mudah memahami perintah HTML dan CSS)

Halo Sobat!, salam designer pemula :D.

Pada kesempatan ini, Saya ingin membagikan pengalaman Saya dalam mempelajari HTML dan CSS, barangkali dapat membantu sobat lebih mudah memahami ke-2 kode pokok untuk membangun atau mendesain web ini. Baiklah simak secara perlahan kelanjutan dari artikel ini.

Bingung cari ide kata kunci? gunakan Alat Pencari Keyword Ini sekali klik dapatkan ribuan ide

HTML

Apa itu HTML?

Yaitu salah satu dari bahasa pemrograman yang berbasis Web  yang digunakan untuk membuat sebuah halaman web, didalam HTML inilah kita membuat kepala / header website, badan / body, footer, dan lain sebagainya, intinya struktur utama dari website ada pada HTML, bila dianalogikan dalam tubuh manusia seperti tulang yang membentuk kerangka tubuh manusia.

Ciri-ciri script / perintah HTML 

• Selalu diawali oleh tag <awal elemen> dan diakhiri oleh </akhir elemen>.
• Perbedaan awal dan akhir hanya pada bentuk tag nya perhatikan untuk awal (Pembuka tag) "< >" dan untuk akhir (Penutup tag) "</ >". 
• Bila menemukan kode yang seperti ini berarti adalah kode HTML. Contoh : <html> dan </html> , <div> dan </div>

Contoh perintah atau tag HTML

• <html> : Sebagai tempat / tubuh utama dari sebuah halaman website
• <head> :
• Sebagai kontainer/ tempat diletakkannya gaya atau style (CSS) untuk memperindah tampilan halaman HTML / website <style>.
• Sebagai tempat meletakkan javascript <script>.
• Meletakkan judul halaman website <title>.
• Meletakkan meta yaitu tag untuk membungkus keperluan SEO seperti deskripsi/ keterangan website, keyword/ kata kunci, dan lain sebagainya <meta>.
• Meletakkan css external/ css dari luar halaman HTML <link>. Contohnya : <link rel="stylesheet" href="style.css"/>.
• <body> : Sebagai kontainer/ tempat dari elemen-elemen yang akan ditampilkan pada halaman HTML. Seperti <div>, <span>, <nav>, <ul>, <img> dan lain sebagainya.

Struktur dasar halaman HTML

Berikut ini kode untuk struktur dasar halaman HTML pada umumnya.

<html>

<head>

<!-- Tempat diletakkannya elemen <style>, <script>, <title>, <meta>, <link> -->

</head>

<body>

<!-- Didalam body ini tempat diletakkan apa yang akan ditampilkan pada halaman HTML, seperti content wrapper/ elemen konten , sidebar / widget samping, footer / kaki dari halaman website, dan lain sebagainya -->

</body>

</html>

CSS

Lalu apa itu CSS?

Yaitu bahasa pemrograman yang digunakan untuk mengatur tampilan suatu halaman HTML. Dalam konteks sebuah website, CSS dapat diartikan sebagai bahasa yang digunakan untuk mengatur, mentata rapi, dan mempercantik tampilan / desain suatu halaman HTML.

Ciri-ciri script / perintah CSS 

• Bila digabungkan bersama dengan file HTML, diletakkan pada tag <head>, dan diletakkan didalam tag <style>.

Contoh: 

<head>

<style>

</style>

<head>

• Bila tidak tergabung pada file HTML, atau file berdiri sendiri, biasanya menggunakan perintah / kode <link rel="stylesheet" href="alamat_file_css">, untuk me-load atau memanggilnya ke halaman HTML.
• Penulisannya seperti ini, elemen_atau_selector{property: value;} , artinya elemen atau selector (ID / Class) yang akan kita berikan gaya/ css kita buat terlebih dahulu kemudian properti css diletakkan pada kurung kurawal "{ }", dan sebagai pemisah antar CSS  menggunakan semi kolon (Titik Koma)";". Contoh: #menu{background: blue; width: 100%;}
• Kode CSS juga dapat terletak dibagian elemen terkait / yang membutuhkan itu sendiri, contohnya : <div id="header-wrapper" style="height: 200px; background: red;>. Disini elemen header-wrapper menggunakan tinggi 200 pixel dan background berwarna merah, dan yang mendapatkan pengaruh dari CSS tersebut hanya elemen "header-wrapper".

Contoh kode CSS

• Background 
• CSS yang mengatur warna dari suatu elemen, contoh :#footer{background:brown;}
• Dapat juga digunakan untuk menjadikan gambar sebagai background suatu elemen.
• Agar lebih detail bisa menggunakan background-color untuk warna, dan background-image untuk gambar. Selengkapnya tentang Background pada artikel ini
• Color
• CSS yang mengatur warna huruf atau kata-kata yang ada pada halaman website atau suatu elemen, contoh: #article{color: #000;}
• Width
• CSS yang mengatur lebar suatu elemen, contoh: body{width: 1200px;};
• Height
• CSS yang mengatur tinggi suatu elemen, contoh: header{height: 200px;}
• Border
• CSS yang mengatur bingkai suatu elemen, contoh: .sidebar{border: 2px solid #000} 
• Dan lain sebagainya

Bingung cari ide kata kunci? gunakan Alat Pencari Keyword Ini sekali klik dapatkan ribuan ide

Saya rasa sekian saja artikel Belajar Dasar Web Design Memahami Perintah HTML & CSS ini Saya buat. Mohon maaf bila ada kesalahan penulisan, kata-kata atau penjelasan. Semoga bermanfaat, Terima Kasih, dan salam Newbie.