Dasar - Dasar Dalam Blog I


Setiap hal tentunya mempunyai dasar, sekalipun gedung raksasa yang menjulang tinggi pasti mempunyai dasar. Dasar tersebutlah yang biasa menunjang dan mendukung bangunan hingga ke atas.Biasanya tanpa suatu dasar, maka akan sulit untuk memahami sampai ketingkat selanjutnya. Nah mungkin ini kesalahan saya yang tidak memberikan dasar kepada anda sebelumnya. Oleh karena itu saya akan memberikan dasar - dasar dalam mengedit blog anda.

Browser

Hal pertama adalah browser yang anda gunakan. Umumnya orang - orang cendrung memakai Mozzila, IE, ataupun google chrome. Nah tahukah anda?, bahwa browser - browser tersebut dapat dimanfaatkan untuk mendukung anda dalam blogging.

Sebagai contohnya anda ingin mencari kode </head> , <body> , atau ]]></b:skin> , tentunya akan sulit , dan jika harus dicari satu - satu pastinya akan sangat membuang waktu anda yang berharga.

Nah coba anda klik edit - find pada menubar di paling pojok kiri atas pada Mozzila dan IE, sedangkan pada google chrome pada urutan kedua di pojok kanan atas. Anda bisa menggunakan cara lebih mudah dengan menekan Ctrl+F, untuk semua browser. Setelah itu akan muncul kotak find di pojok kiri bawah (Mozzila & IE) dan pojok kanan atas (Google Chrome).
Lalu ketikan apa yang ingin anda cari di sana, sebagai contoh : </head> , nah sekarang coba anda cari kode - kode lain yang anda ketahui. Mudah bukan? ^^.

Oh iya nantinya ada dasar blog tentang cara membackup template blog , kesalahan umum dalam edit template, dan masih banyak lagi.


sumber gambar :
http://brandingdavid.com/wp-content/uploads/2009/02/basic-blog-cover.jpg
http://www.highposition.net/article/wp-content/uploads/ie8-performance-vs-from-google-chrome-and-firefox-2.jpg

Mengganti Judul Blog Dengan Logo Sendiri


Sudah sebulan sejak terakhir kali saya mengupadate blog ini, entah kenapa ternyata blog ini masih cukup ramai dikunjungi oleh para pembaca yang budiman. Ternyata banyak yang meminta saya membuat tutorial semacam ini, oleh karena itu saya membuat Tutorial tentang " Cara mengganti judul blog dengan logo sendiri ". Baiklah tanpa berlama - lama lagi langsung saja kita baca tutorial di bawah ini

Langkah Pertama / First Step

  • Seperti biasa silahkan ke tata letak - edit html.
  • Silahkan klik download template lengkap untuk menanggulangi kesalahan pada pengeditan template.
Langkah Kedua / Second Step

  • Cari kode yang serupa / mirip kode yang berwarna biru di bawah ini yang biasanya terletak di atas kode header.

<div id='nama'>
 <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Judul blog (Header)' type='Header'/>
</b:section>
</div>

  • Lalu cari kode css, Cth: nama dari kode html tersebut dengan menekan ctrl+F, maka akan keluar kotak.
  • Ketikan #nama ( ingat tambahkan # di depan nama ).
  • Maka anda akan menemukan kode yang mirip seperti di bawah ini. 

#nama {
width:450px;
height:150px;
float:left;
}
  • Lalu tambahkan kode css berikut sehingga menjadi :

#nama {
width:450px;
height:150px;
float:left;
background:url(alamat url gambar/ logo yang ingin anda masukkan) no-repeat;padding:20px 20px 0 0
}

  • Lalu save

Keterangan :
Kode yang harus anda temukan tidaklah harus sama mirip seperti width 450px, height 150px, karena di setiap blog mempunyai ukuran masing - masing yang tentunya berbeda - beda.

Langkah Ketiga / Third Step

  • Silahkan copy kode di bawah ini 
#hidd{
display:none;
}
  • Letakkan kode tersebut tepat di atas kode ]]></b:skin>
  • Lalu save.

Langkah Keempat / Fourth Step

  • Cari kode seperti di bawah ini :
<div id='nama'>
 <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Judul blog (Header)' type='Header'/>
</b:section>
</div>

  • Lalu masukkan kode html berikut hingga menjadi 

<div id='nama'> 

<div id='hidd'>
 <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Judul blog (Header)' type='Header'/>
</b:section>
</div> 
</div>

  • Lalu save.
Keterangan :
Pemasangan kode merah di dalam kode biru bertujuan untuk membuat judul asli tidak terlihat, sehingga pada nantinya logo kita lah yang terlihat.

Jika anda tak mau bersusah payah mengganti judul blog dengan css anda bisa menggunakan cara mudah lainnya yang saya tuliskan di artikel ini, akan tetapi biasanya hasilnya tidak semaksimal dengan menggunakan kode CSS, dan saran saya terkhir adalah baca dan ikutilah semuanya, tidak usah anda pikir pusing - pusing karena itu akan mengacaukan kosenstrasi anda dalam membaca tutorial ini.

Jika ada masalah silahkan bertanya lagi di sini tentang artikel apapun, maafkan saya jika beberapa pertanyaan dari kalian belum sempat saya balas, hal tersebut dikarenakan saya sibuk dengan kegiatan sekolah sehingga saya tidak sempat update dan memperhatikan blog ini. Silahkan anda bertanya lagi dengan pertanyaan yang belum sempat terjawab di bawah ini.

Tutorial Dasar CSS


Setelah saya menjelaskan tutorial tentang HTML, tentunya tidak lengkap jika tanpa CSS. Sebenarnya CSS itu apa?, kegunaanya untuk apa?, dan apa keuntungan memakai CSS?, Oleh karena itu marilah kita simak tutorial dasar CSS yang akan saya berikan kepada anda sekalian.

Apa itu CSS?
CSS (Cascading Style Sheets) adalah bahasa pemograman website yang sederhana yang digunakan untuk mempermudah pengelolahan sebuah website atau blog. Umumnya CSS digunakan pada web / blog yang berbasis HTML atau XHTML, walaupun begitu CSS masih bisa digunakan untuk semua jenis document berbasis XML(Extensible Markup Language). Apa itu XHTML atau XML? akan kita bahas di artikel yang berbeda.

Apa Kegunaannya?
Berbeda dengan HTML yang harus mengetik secara terpisah untuk mengatur sebuah tampilan, CSS hanya cukup menuliskan 1 kali untuk mengatur tampilan suatu halaman. Bayangkan jika kamu ingin mengganti setiap warna huruf atau warna atau hal - hal lainnya kamu harus menulis kode / script di setiap halaman yang berbeda .Hal tersebut tidak akan menjadi kendala jika hanya 1, atau 2 halaman web, tapi jika anda mempunyai 100, atau 1000 halaman web. Pemakaian HTML tentunya menjadi sangat tidak praktis.

Untuk blog tersendiri, pemakaian CSS adalah sebuah dasar dari tampilan blog yang profesional. Tanpa CSS maka akan sangat sulit untuk mendukung tampilan blog, dimulai dari tampilan background, header, sidebar, footer, atau jenis serta warna tulisan.

Apa Keuntungannya?
Bahasa CSS / CSS programming adalah bahasa web yang paling ringan dan mudah di baca oleh Search engine. Karena bahasa CSS yang ringan maka loading blog pun akan semakin cepat, dan jika dilihat dari kecepatan internet di Indonesia, tentunya CSS menjadi pilihan yang sangat tepat. Selain itu Google telah menyampaikan akan memberikan bonus posisi search pada blog / web yang ringan dan tentunya tampil secara profesional.

Sebelum kita ke tahap selanjutnya, sebaiknya kamu membaca Tutorial HTML Untuk Pemula, karena  jika kamu tidak mengerti HTML maka kamu tidak akan bisa CSS. Oh, yah satu lagi yang perlu diingat saya akan mengajarkan CSS untuk blog, walaupun dasarnya sama dengan web, tapi saya khususkan untuk blog.

Dasar- Dasar CSS

Sama dengan HTML yang mempunyai tatanan dan cara penulisan, CSS pun begitu.

Dasar Aturan Pertama


Dalam CSS terdapat 2 bagian yang terpisah yaitu selector dan dan deklarasi. Bisa dilihat yang tunjuk dengan tanda panah biru adalah selector dan tanda panah merah adalah deklarasi. Perlu di ingat juga setiap deklarasi harus di awali dengan tanda kurung kurawal { dan harus di akhiri pula dengan tanda kurung kurawal }.

Dasar Aturan Kedua



Di dalam deklarasi masih terdapat 2 bagian terpisah yaitu property dan value, dalam hal ini anda bisa melihat yang ditunjuk dengan tanda panah hijau adalah property dan yang ditunjuk dengan tanda panah hitam adalah value.

Dasar Aturan Ketiga
Pada CSS, jika jumlah property lebih dari satu maka harus diakhiri dengan tanda ";" (Tidak termasuk tanda petik) dan jika terdapat property yang lebih dari 1 harus dipisahkan dengan tanda , Cth penulisan CSS yang benar :


Bisa dilihat setiap property dipisah dengan ";" jadi fungsinya adalah sebagai pemisah statment agar tidak tercampur (kacau), dan coba dilihat juga bahwa property font-family mempunyai value lebih dari satu yaitu verdana, georgia, arial;, sehingga harus dipisahkan dengan tanda coma "," (Tidak termasuk tanda petik).

Dasar Pemasangan CSS Dengan HTML

Telah saya katakan bahwa CSS dan HTML tidak terpisahkan, oleh karena itu penulisan CSS tidak akan jauh - jauh dari HTML.

Inside Head Code
Maksudnya adalah CSS berada Di antara kode <b:skin><![CDATA[/* dan ]]></b:skin>, sebagai contoh silahkan anda lihat contoh berikut :


Outside Head Code

Maksudnya adalah CSS berada di antara kode ]]></b:skin> dan </head>, seperti contoh di bawah ini :


Biasanya kode seperti css outside harus dituliskan di antara <style type='text/css'> dan </style>.

Untuk sekarang saya sarankan anda mengerti berbagai dasar aturan CSS, karena pada nantinya saya akan membahasnya lebih lanjut dari kode - kode yang lazim dipakai maupun , penulisan CSS yang lebih baik lagi.

Ohh iya, saya ingatkan sekali lagi anda harus membaca Tutorial Belajar HTML Dasar dan kuasilah dasar - dasar HTML, maka menguasai CSS pun hanya seperti membalikan telapak tangan.

sumber gambar :http://www.adobe.com/uk/designcenter/golive/articles/glv7css/main.gif

Tutorial Belajar HTML Untuk Pemula


Pada artikel tentang Related Post sebelumnya, saya telah memberikan tutorial untuk memanipulasi realated post yang terkesan biasa saja. Pada artikel itu juga telah saya singgung bahwa anda minimal harus belajar HTML atau CSS, karena kode tersebut adalah dasar dari pembuatan template blog dan website. Baiklah sebelum melanjutkan ke tahap - tahap Belajar Html untuk pemula, alangkah baiknya anda mengerti apa itu kode Html.

Hypertext Markup Language (HTML) adalah standarisai kode dalam pembangunan website dan menampilkan berbagai informasi di dalam sebuah web browser. Pada dulunya HTML bermula dari SGML (Standart Generalized Markup Language) yang sebelumnya banyak digunakan penerbit dan percetakan.

Versi HTML terakhir pada saat ini adalah HTML 4.01, meskipun lebih cendrung berkembang ke arah XHTML (Extensible Hypertext Markup Language) yang nantinya akan saya bahas di artikel yang lainnya.

Attention!!!

Bagi anda yang masih Newbie atau Pemula usahakan hindari kebiasaan What I See, That's What I Copy (WISTWIC). Maksudnya jangan copy semua code yang saya contohkan kepada anda, tapi cobalah mengetik sendiri dan mulailah untuk menghafalkannya.

Langkah Awal(Pengenalan Kode HTML)

Silahkan buka Notepad, dan cobalah untuk mengetikkan kata - kata di bawah ini :

<i> adalah kode untuk memiringkan sebuah text.
<b> adalah kode untuk menebalkan sebuah text
<u> adalah kode untuk menggaris bawahi sebuah text.
Semua tag - tag atau kode html tersebut haruslah diberi penutup / seperti kode di bawah ini

<i>Hello</i> <b>My name is Kenny</b>, <u>What is your name?</u> 

(Ingat diketik jangan Copy Paste). Lalu simpan dengan nama TEST.HTML bukan test.html.text atau test.text.

Cobalah klik 2 kali pada TEST.HTML, maka akan keluar browser dengan tampilan sebagai berikut :

Hampir semua tag html memiliki tag penutup yang harus ditambahkan /, jadi untuk tag penutup maka anda tinggal menambahkan / seperti contoh : <i>, maka tag penutupnya </i>, dan <u>, maka tag penutupnya adalah </u>, ingat hanya menambahkan /.

Standalone Tag
Walau hampir semua tag memiliki tag penutup, akan tetapi ada beberapa tag / kode html yang tidak memiliki tag penutup.Contoh : <hr> yang memberikan baris dan <br> yang memberikan jarak pada baris. Jika anda ingin mengetahuinya silahkan buka kembali file TEST.HTML 
Caranya :
  • Klik kanan pada file
  • Open with
  • Pilih Notepad
  • Taruh kode <br> di bawah kode semula
  • Kemudian taruh kode <hr> di bawah kode <br&gt.
  • Save.
Coba anda buka kembali kode dengan cara yang sama dengan yang di atas, maka akan terlihat perbedaan , seperti jarak antara text dengan baris yang agak jauh, dan adanya garis di bawahnya.

HTML Entity 
Jika anda ingin memberi spasi antar text lebih dari satu , tentunya tidak akan bisa didalam sebuah template blog atau web , walaupun anda menekan spasi berkali - kali tetap akan dihitung satu spasi. Untuk itulah diperlukan kode khusus. Contoh coba tambahkan kode &nbsp; dan spasi yang banyak pada yang satunya lagi, sehingga
<i>Hello</i> &nbsp&nbsp&nbsp;,<b>My name is Kenny</b>,              <u>What is your name?</u>
anda perhatikan pasti ada bedanya antara yang memakai  &nbsp dengan yang spasi. yang perlu diingat bahwa kode entity selalu di awali dengan (&) dan diakhiri dengan (;) (tidak termasuk kurung).

Atribut HTML
Atribut adalah tambahan dalam tag - tag HTML, baik yang jenis standalone maupun yang biasa. 
Contoh 1 kode 
<div align="center"> Contoh text </div> 
sebenarnya hanya <div> dan </div>, maka align="center" adalah atribut tambahan. Tampilan 
Contoh text

Contoh 2 kode 
<font face="georgia" size="3" color="red">Contoh....!!!!</font>
Tampilan
Contoh....!!!!
 
Teks & Paragraph
Di dalam html ada yang namanya tag , tag tersebut berguna untuk menentukan ukuran text secara praktis, dan juga dapat membantu search engine untuk menentukan seberapa penting text dari suatu blog / web. Contoh :
<h1>Sebesar Apakah Text Ini?</h1>
<h2>Sebesar Apakah Text Ini?</h2>
<h3>Sebesar Apakah Text Ini?</h3>
<h4>Sebesar Apakah Text Ini?</h4>
<h5>Sebesar Apakah Text Ini?</h5>
<h6>Sebesar Apakah Text Ini?</h6>
Tampilan

Untuk lebih jelasnya, coba kita buat kode seperti ini dan save dengan nama Budi.html :
<p>Halo, nama saya <b>Budi</b> dan
saya senang bermain bola</p>
<p>Tutorial ini merupakan <i>Pelajaran pertama saya dalam HTML</i> dan saya ingin <u>Memodiifikasi </u> teks dalam HTML agar lebih menarik </p>

<h3>Terima kasih </h3>

Tampilan


Langkah Kedua (Struktur HTML)

Apakah anda pusing membaca pengenalan diatas?, yah sejujurnya pasti bagi seorang pemula hal tersebut sangat memusingkan, tetapi hal dasar janganlah dilewatkan. Untuk itu sebaiknya anda mengerti baik - baik apa yang saya sampaikan diatas barulah ke tahap selanjutnya.

Struktur HTML

<html>
<head>
<title>Judul</title>
</head>
<body bgcolor="blue"> <i>TEST TEST 1 2 3</i>,<b> ada orang di sini?</b>
</body>
</html>

Text yang berwarna biru adalah text struktur, sedangkan yang berwarna hitam adalah tambahan. Maka tampilannya seperti di bawah ini


Coba lihat pada kata judul yang saya lingkari dan saya beri tanda panah, hal tersebut terjadi karena saya menambahkan <title>Judul</title> di antara kode <head> dan </head>. Jika anda ingin menggantinya tinggal hapus text judul menjadi judul yang anda inginkan.

Jika anda masih tidak percaya coba anda buat notepad baru dengan nama struktur.html, lalu tes lagi seperti cara - cara sebelumnya.

Perlu diketahui di dalam struktur HTML, semua kode HTML ditulis di dalam tag <body>. Tidak boleh di tulis di dalam tag <head>.

Anda bisa mempraktekkan dengan menulis semua kode HTML yang telah saya ajarkan ke dalam tag <body> tag html anda </body>.

Mengapa hal ini menjadi penting?, karena di dalam mengedit template blog maupun di web, anda akan menggunakan kode - kode html tersebut. Setidaknya anda pelajari konsep - konsep di atas dengan cermat dan teliti, maka saya yakin anda pasti bisa. Nantikan Juga artikel berikutnya yang merupakan lanjutan dari artikel ini.
Walau susah, hal tersebut memang wajar, karena biasanya seseorang mengatakan susah karena baru pertama kali dan tidak terbiasa akan hal baru tersebut. Jika tidak mau susah yah tidur saja atau sekedar membalik - balikan telapak tangan, tentunya hal tersebut lebih mudah bukan? hahaha..

sumber gambar :http://www.marcellegros.com/wp-content/uploads/2007/11/html-code.jpg

Orisinil Articles

Semua artikel yang saya tuliskan di sini adalah artikel orisinil / asli tanpa Copas, semua dari pengalaman ngeblog saya. Sekalipun saya mengutip sumber dari yang lain, maka saya memberikan link menuju artikel asli.

Terima kasih.

Alexa Status

Protected by Copyscape Online Plagiarism Check
 

Copyright 2010 Blog Tutorial, Blog Tips, Making Money Online - Blogspot Theme by Kenny G - Gotbloggers