Blog: Remove blogspot topbar

Salam buat semua, moga semuanya sihat walafiat. Alhamdulillah kita telah belajar berkenaan cara untuk membina blog serta menukar beberapa setting. Berikut merupakan senarai tutorial berkenaan blogspot jika anda tertinggal.

• Blog: Layout colour & font
• Blog: Paragraph & Text sctructure
• Blog: Layout
• Create a blog (blogspot)

Di dalam tutorial kali ini, kami akan kongsikan kepada anda bagaimana untuk menghilangkan atau membuang top bar (gambar di bawah) pada laman blogspot anda. Selamat mencuba!

Step 1: Pergi pada bahagian berikut: Layout > Edit HTML

Step 2: Copy code dibawah

#navbar-iframe {
display: none !important;
}

Step 3:Tampalkan di bahagian berikut (arrow yang ditunjukkan pada gambar di bawah)

Step 4: Klik Save Template

Step 5: Lihat hasilnya.

Selamat mencuba!

Blog: Layout colour & font

Sambungan daripada tutorial blog yang lepas, di dalam artikel kali ini, kami akan ajarkan anda bagaimana untuk menukarkan layout blog anda dari segi warna dan font.

Berikut merupakan langkah untuk menukarkan warna untuk blog anda:

1. Klik pada tab Layout (1), kemudian pilih Fonts and Colours (2).
2. Kemudian, pilih apa yang ingin diubah (3).
3. Pilih warna (4)
4. Sewaktu anda klik pada warna, anda akan dapat perhatikan bahawa warna blog anda terus ditukarkan.
5. Setelah anda berasa puas hati, klik pada Save Changes (5).

Selain menukar warna, anda juga boleh menukar font.  Pada bahagian 3 di atas, scroll lagi ke bawah dan anda akan jumpa menu Text Font, Sidebar Font dan lain – lain seperti di dalam screen shot di atas.

Selamat mencuba! Jika ada sebarang pertanyaan, anda boleh tinggalkan komen di bawah. Jumpa lagi!

Blog: Paragraph & Text sctructure

3.0 Paragraph

Sesebuah laman web atau blog akan melibat pelawat untuk membaca isi kandungan (content) laman web anda. Oleh kerana itu, perenggan dan struktur teks merupakan antara elemen penting bagi menarik perhatian pembaca untuk terus membaca isi kandungan blog anda dari awal hingga ke akhir. Sebagai contoh:

Contoh A:

Barack Obama, the US president, has urged Israel and the Palestinian group Hamas to maintain their ceasefires in Gaza in his first remarks on the crisis since taking office. The US leader was speaking at the state department as he named George Mitchell, who helped broker the Good Friday peace accord in Northern Ireland, as US special envoy for the Middle East. Obama said he was “deeply concerned” about the loss of life in Gaza and also reiterated the US view that Israel had a right to defend itself from Palestinian rocket attacks.  It will be the policy of my administration to actively and aggressively seek a lasting peace between Israel and the Palestinians, as well as Israel and its Arab neighbours,” Obama said. “Now we must extend a hand of opportunity to those who seek peace. As part of a lasting ceasefire, Gaza’s border crossings should be open to allow the flow of aid and commerce,” Obama said.

Contoh B:

Barack Obama, the US president, has urged Israel and the Palestinian group Hamas to maintain their ceasefires in Gaza in his first remarks on the crisis since taking office. The US leader was speaking at the state department as he named George Mitchell, who helped broker the Good Friday peace accord in Northern Ireland, as US special envoy for the Middle East. Obama said he was “deeply concerned” about the loss of life in Gaza and also reiterated the US view that Israel had a right to defend itself from Palestinian rocket attacks.

“It will be the policy of my administration to actively and aggressively seek a lasting peace between Israel and the Palestinians, as well as Israel and its Arab neighbours,” Obama said.

“Now we must extend a hand of opportunity to those who seek peace. As part of a lasting ceasefire, Gaza’s border crossings should be open to allow the flow of aid and commerce,” Obama said.

Sumber: Al Jazeera English

Di antara Contoh A dan Contoh B, pelawat akan lebih mudah dan gemar untuk meneruskan pembacaan artikel untuk B kerana ia lebih nampak kemas, teratur dan ringkas. Jika anda mahir di dalam bidang penulisan, setiap perenggan yang baru juga kadang kala bermaksud anda (penulis) ingin menyampaikan idea atau isi baru di dalam penulisannya. Namun ia terpulang pada kreativity anda. Contoh A merupakan contoh yang kurang baik dan sesuai kerana pelawat terpaksa membaca berhati – hati ketika membaca kerana terlalu banyak baris untuk perenggan A.

4.0 Structure of text

Berikut merupakan tag sebagai penanda sebelum sesuatu content atau senarai.

h1

h2

h3

paragraph

h1 biasanya digunakan untuk title kepada laman web anda, contoh tutorial @ iLuvislam. h2 pula biasa digunakan untuk title article atau bahagian – bahagian subcontent di dalam sesebuah laman web manakala h3 biasanya digunakan di dalam perenggan artikel. paragraph merupakan text biasa atau default untuk artikel anda. Contoh yang baik dalam penggunaan tag ini boleh dilihat di bawah:

Credit: ilovetypography.com

Penggunaan tag h1 atau h2 ini boleh dilakukan secara normal pada bahagian Compose – jika anda mahir dengan HTML, anda boleh gunakan Edit HMTL seperti di dalam screen shot di bawah:

Selain itu, quote atau di dalam terma HTML, <blockquote> juga merupakan elemen yang penting di dalam struktur sesebuah text. Ia biasanya digunakan apabila sesuatu ingin diambil terus daripada sumber asal seperti ucapan. Kadangkala, ia juga digunakan untuk menekankan tentang sesuatu perkara. Contoh penggunaan quote adalah seperti berikut:

If you can dream – and not make dreams your master;
If you can think – and not make thoughts your aim;

- If, Rudyard Kipling

Semoga artikel ini dapat menjadi panduan buat anda ketika menulis blog post. Jika ada sebarang soalan, anda boleh tinggalkan komen di bahagian bawah atau emailkan terus ke tutorial@iluvislam.com. Jumpa lagi di dalam siri akan datang! Selamat mencuba!

Blog: Layout

3.0 Layout

Seperti yang dijanjikan di dalam tutorial yang lepas, kami akan ajarkan kepada anda tentang layout asas sesebuah laman web atau blog. Ia terdiri daripada 4 bahagian utama iaitu:

• header
• content
• sidebar
• footer

Sila klik pada gambar untuk lihat imej yang lebih besar

Setiap bahagian ini memainkan peranan mereka tersendiri. Header merupakan intro kepada sesebuah laman web atau blog. Ia umpama cover sesebuah buku, mungkin satu hari nanti kami akan kongsikan kepada anda antara header – header laman web yang menarik sebagai sumber inspirasi anda. Content pula merupakan bahagian isi kandungan sesebuah laman web atau blog. Di dalam konteks ini, ia merupakan pos atau entry blog anda. Sidebar memainkan peranan penting kerana ia merupakan elemen yang pelawat akan lihat selepas atau sebelum content anda.

Pada bahagian sidebar, anda boleh memasukkan maklumat tentang diri anda (seperti siapakah anda dan tujuan anda menulis blog) serta perkara – perkara lain yang kami akan poskan di kemudian hari. Dan yang terakhir ialah footer. Footer memainkan peranan seperti penutup di dalam sesuatu buku atau cerita.

Begitulah secara ringkas layout sesebuah laman web atau blog. Semoga bermanfaat buat kita semua. Di dalam artikel akan datang, kami akan kongsikan dengan anda tentang paragraphing dan teks sesebuah laman web. Jika ada sebarang pertanyaan, anda boleh poskan di bahagian komen di bawah atau emailkan kepada kami di tutorial@iluvislam.com

Sekian, jumpa lagi!

Create a blog (blogspot)

Setelah lama bercuti daripada tutorial HTML, kini kami ingin teruskan pelajaran kita. Kami akan ajarkan anda coding di dalam platform blog kerana dari situ, anda boleh lakukan experimen. Memandangkan ramai yang menggunakan blogspot, kami akan ajarkan tutorial HTML di dalam blogspot di samping menunjukkan anda bagaimana untuk membina blog yang baik.

1.0 Akaun Blogspot

Jika anda masih belum memiliki blog, anda boleh pergi ke laman berikut https://www.blogger.com/signup.g. Jika anda sudah memiliki akaun email Gmail atau Google Mail, anda boleh terus menggunakannya. Dengan klik pada Sign In, kemudian masukkan Username dan Password anda.

2.0 Create New Blog

Walaupun anda sudah memiliki blog, kami syorkan anda buat satu lagi blog yang baru khas untuk belajar di coding HTML dengan tutorial @ iluvislam. Setelah Log In, klik pada Create New Blog.

Kemudian, pilih title blog anda (Blog title) dan alamat blog (Blog address, URL) anda.

Pilih template kegemaran anda buat masa kini.

Tahniah, anda kini memiliki blog sendiri. Poskan entry pertama anda!

Moga tutorial ini bermanfaat buat anda yang masih baru dalam pembinaan blog. Happy blogging! http://iluvislamtutorial.blogspot.com/

Pada artikel akan datang, kita akan belajar elemen sesebuah laman web (layout). Sebelum itu, apa kata jika kami lihat jika anda masih mampu jawab soalan test kami yang pertama. Selamat mencuba!

Untuk terus menerima perkembangan terkini tentang tajuk ini, anda boleh langgan tutorial @ iLuvislam secara percuma. Kongsikan juga dengan rakan – rakan anda.

Browser Compatibility

Biasanya, seorang web designer akan cuba sedaya upaya untuk menjadikan laman web yang direka sama walaupun pelawat menggunakan apa-apa jenis browser. Sama ada Firefox, Safari, Google Chrome, Opera, Internet Explorer dan macam – macam lagi. Di dalam artikel kali ini, tutorial @ iluvislam akan berkongsi dengan anda sebuah laman web yang merakam screenshot laman web anda (atau blog anda) apabila diview menggunakan internet browser yang berbeza.

http://browsershots.org/

Berikut juga merupakan cara untuk menggunakan laman web ini:

1. Masukkan alamat laman web anda di bahagian atas (Enter your web address here:)  Contoh:   http://celikit.com/
2. Pilih browser yang anda ingin laman web anda diview
3. Biarkan ‘Don’t Care‘ jika anda tidak ada pengetahuan tentang Screen size, Colour Depth, Javascript, Java, Flash.
4. Klik submit di bahagian atas.

Ingin mencuba? Lawati http://browsershots.org/

FREE eCommerce Icon

eCommerce atau perniagaan internet kini semakin menjadi perhatian pengguna internet. Jadi, kami juga ingin mengambil kesempatan ini untuk berkongsi dengan anda icon yang boleh anda gunakan jika anda menjual sesuatu di internet. Atau anda boleh juga gunakan icon ini di blog anda sewaktu menulis berkenaan perniagaan di internet. Gunakanlah dengan kreatif koleksi icon ini. Kongsikan hasil pengunaan anda di bahagian komen di bawah dan kami akan lihat bagaimana anda menggunakannya.

Dapatkan Free eCommerce icons sekarang!

Jika anda ada laman dan koleksi ikon yang menarik untuk dikongsi bersama, emailkan kepada kami di tutorial@iluvislam.com atau poskan link di bahagian komen di bawah. Oh ya, kongsikan juga laman tutorial @ iluvislam ini dengan rakan – rakan anda. Semoga kita sama-sama dapat manfaatnya. Jumpa lagi!

Design is different languages

Design merupakan sesuatu yang biasa kita dengar. Tetapi kali ini ianya sedikit berbeza kerana kami ingin sampaikan kepada perkataan design di dalam bahasa lain di dalam dunia ini.

تصميم – Arab

desain – Indonesia

디자인 – Korean

設計する – Japanese

diseñar – Spanish

проектирам – Bulgarian

progettare – Italian

dizajnirati – Croatia

ontwerpen – Dutch

disenyo – Filipino

σχέδιο – Greek

डिज़ाइन – Hindi

Semua berikut telah dialih bahasa dengan menggunakan perkhidmatan Google Translate. Dapatkannya sekarang!

HTML Colours

Tahukah anda bahawa skrin komputer menggunakan kombinasi atau gabungan 3 warna utama iaitu Merah, Hiaju dan Biru. Jika anda ada terlintas tentang RGB, itulah warna gabungan tersebut RGB (Red Green Blue). Di dalam rekaan laman web, gabungan warna ini digunakan bagi menghasilkan warna secondary dan tertiary (atau secara ringkasnya warna lain selain merah, hijau dan biru).

Warna HTML menggunakan hexadecimal notation dari segi gabungan warna berikut. Jadi tanpa membuang masa lagi, kami persembahkan kepada anda table untuk warna HTML serta kod warna yang biasanya digunakan oleh pereka laman web.

Warna	HEX Code
	#000000
	#FF0000
	#00FF00
	#0000FF
	#FFFF00
	#00FFFF
	#FF00FF
	#C0C0C0
	#FFFFFF

Apa yang anda perlu adalah HEX Code berikut untuk mewarnakan text anda. Selamat mencuba! Pada artikel akan datang, kami akan beritahu anda bagaimana untuk generate atau hasilkan HEX code untuk warna pilihan anda. Jumpa lagi!

FREE Mini Icon

Kami suka berkongsi dengan anda apa-apa yang percuma. Semoga anda dapat manfaatkan apa yang kami kongsikan itu. Kali ini, kami ingin berkongsi dengan anda sebuah laman web yang mengandungi mini icon yang boleh dimuat turun secara percuma.

Download FREE mini icon pilihan anda

Biasanya icon ini boleh digunakan oleh anda yang membina laman web sendiri. Jika tidak, jadikan ia hadiah kepada seseorang atau muat turun sahaja. Mungkin satu hari anda akan perlukannya. :)

Next Page »