Showing posts with label Tutorial. Show all posts
Showing posts with label Tutorial. Show all posts

Theme creator / Generator

22 komentar

Bosan dengan theme yang itu-itu saja ?
Bosan dengan theme yang sama seperti punya orang lain ?
Pengen theme yang beda ?
Pengen theme dengan ciri khas sendiri ?
Pengen buat theme sendiri ?
Atau paling tidak, pengen nyobain buat theme sendiri ?
Ga ngerti HTML dan CSS tapi pengen buat theme sendiri ?
Pengen majangin gambar sendiri untuk theme sendiri?

Untuk Wordpress, berkreasilah dengan Wordpress Theme Generator-nya di:

Wordpress Theme Generator

Untuk Joomla, berkreasilah dengan Joomla Template Builder-nya di:

Joomla Template Builder

Selamat mencoba. Tunjukin hasilnya ya, kalau berkenan.

Lihat tutorial lainnya di Azzahrah Design

Read More......

URL Path Forwarding

4 komentar

Fungsi dari URL Path Forwarding adalah untuk melink pindah dari domain awal ke domain lainnya secara otomatis. Salah satu fungsinya adalah apabila kita mempunyai domain baru, domain lama sudah tidak dipakai. Namun kita tidak ingin kehilangan pengunjung setia web. Untuk itulah kita gunakan Path Forwarding ini sehingga apabila pengunjung masuk ke web lama kita maka secara otomatis akan menuju website baru.

Fungsi lainnya adalah apabila kita memiliki nama website yang agak susah diingat orang atau penulisannya susah sehingga orang sering salah mengetik alamat domain. Misalnya, www.azzahrah.co.cc. Ada kemungkinan orang akan salah mengetik, dengan menuliskan www.az-zahrah.co.cc. Untuk itulah kita gunakan www.az-zahrah.co.cc sebagai Path Forwarding. Cobalah klik ke www.az-zahrah.co.cc.

Masuklah ke web www.co.cc dan buatlah sebuah domain baru yang diperkirakan menjadi objek kesalahan ketik para pengunjung. Langkahnya seperti yang telah dituliskan pada tutorial sebelumnya, Tutorial: Mendapatkan domain gratis www.WebAnda.co.cc.

Yang berbeda adalah saat mengeset bagian [3. URL Forwarding], pada bagian Frame, pilihlah 'Path Forwarding (Display real address)'.



Klik tombol 'Set up'.



Selanjutnya, apabila pengunjung salah mengetikkan domain www.az-zahrah.co.cc, maka web akan tetap menuju ke alamat yang benar, yaitu http://blogger-skin-resources.blogspot.com/

Lihat tutorial lainnya di Azzahrah Design

Read More......

Tutorial: Mendapatkan domain gratis www.WebAnda.co.cc

21 komentar

Ingin punya domain sendiri? Seperti www.WebAnda.co.cc ? Yang lebih keren, gratis pula. Kemudian domain gratis ini dapat Anda gunakan di hosting gratis seperti blogger dan wordpress. Wah, keren sekali ya.

Langkah pembuatannya:

1. Buka web www.co.cc

Awalilah dengan mendaftar di web tersebut.

2. Pilih nama web Anda

Tentukan domain nama web Anda dan ceklah apakah sudah ada yang pakai atau belum. Ketiklah nama web yang Anda inginkan.



Misalnya adalah "azzahrah", kemudian kliklah tombol 'check availability'.

3. Hasilnya

Jika domain yang Anda pilih sudah ada yang gunakan, carilah domain lain.



Untuk kasus "azzahrah" belum ada yang gunakan sehingga dapat digunakan. Domain yang kita punya saat ini adalah:

www.azzahrah.co.cc dan www.azzahrah.cc.cc

Selanjutnya kliklah tombol 'Continue to Registration'

4. Pendaftaran

Anda akan masuk ke halaman pendaftaran web. Jika sebelumnya Anda belum login maka, halaman ini akan muncul.



5. Berhasil.

Domain baru telah berhasil dibuat. Domain baru ini harus di-set up dalam waktu 48 jam (2 hari).



6. Set up blogger Anda

Klik tombol 'set up'.



Pastikan domain yang dipilih adalah domain Anda. Kemudian klik tombol 'Set Up'.
Diantara pilihan hosting di bawah ini, pilihlah URL blog Anda, nomer 3.



7. Pengisian data



Redirect To(URL) --> Masukkan URL blog Anda, misalnya:
blogger-skin-resources.blogspot.com

Page Title --> Masukkan judul blog Anda, misalnya:
Template Gratis

Frame --> Ada dua pilihan, apakah URL blog Anda dipakai atau disembunyikan. Pilih URL hiding untuk menyembunyikannya.

Description --> Masukkan keterangan singkat web.

Keywords --> Kata kunci untuk pencarian.

Jika telah selesai, klik tombol 'Set up' untuk menyimpan data.

Catatan. Perubahan ini dapat memakan waktu 48 jam.

Selanjutnya akan muncul informasi bahwa data telah disimpan, klik tombol 'OK'

8. Selesai

Domain baru Anda dengan isi blogger Anda telah berhasil.



Untuk langkah selanjutnya, akan dilanjutkan di tutorial berikutnya (InsyaAllah)...

Lihat tutorial lainnya di Azzahrah Design

Read More......

Web Editor - Software sederhana membuat web

0 komentar

Untuk membuat coding HTML, sebenarnya hanya menggunakan NOTEPAD Anda sudah dapat membuat sebuah halaman web. Bukalah NOTEPAD Anda dan ketiklah tulisan di bawah ini:


<html>
<head>
<title>Halaman Web Saya</title>
</head>
<body>Isi web saya.</body>
</html>

Kemudian simpan hasil kerja Anda ke dalam format .html. Langkahnya:


  1. Klik : File > Save As
  2. Berilah nama dangan jenis file .hmtl, contoh : " index.html "
  3. Ganti " Save As Type " menjadi " All Files "
  4. Klik tombol "Save "
  5. Bukalah browser kesayangan Anda dan bukalah file baru kita ini: index.html
  6. Lihatlah hasilnya.


^_^

Lihat tutorial lainnya di Azzahrah Design

Read More......

Menggunakan Template pada Blogger

11 komentar

Salah satu keunggulan dari blogger ini adalah kemudahan dalam mengganti tema / skin / template / theme. Blogpun dapat dibuat berbeda dengan lainnya dan mempunyai ciri khas sediri. Kemudahan lainnya, begitu banyak tersedia template gratis yang dapat digunakan langsung.

Kali ini, saya akan menjelaskan penggunaan template karena begitu banyak yang bertanya tentang hal ini. Padahal sebelumnya saya telah menerangkannya. Perbedaannya adalah, kali ini akan diterangkan dengan menggunakan media video.











Lengkapnya, baca di sini http://azzahrah.com/modules/AMS/article.php?storyid=13

Lihat tutorial lainnya di Azzahrah Design

Read More......

Ungkapkan Idemu

5 komentar

Jika ingin mengungkapkan ide di blog, jangan ragu ungkapkanlah.

Ungkapkan idemu.
Jika ingin mengungkapkan ide di blog, jangan ragu ungkapkanlah.

Mungkin saja idemu dapat berguna bagi orang lain.

Cara Membuatnya:

Pada saat ngepost tulisan, klik bagian 'Edit HTML'. Kemudian masukkan kode ini:
<div style="background:url('http://img361.imageshack.us/img361/5148/ideaju3.gif')
no-repeat 14px 24px; border:1px dashed #CCCC33;padding:8px 8px 8px 75px;">isi</div>

Hapus tulisan 'isi' dan ganti dengan kalimatmu sendiri.

--Selamat Mencoba--

Lihat tutorial lainnya di Azzahrah Design

Read More......

Shortcut Icon

7 komentar

Lihat contoh penggunaan Shortcut Icon. Lihat gambar hati merah.



Langkah awalnya adalah, carilah gambar yang ingin dijadikan icon. Beberapa icon yang dapat digunakan:


url = http://www.iconarchive.com/icons/shiftercat/japanese-mon/Gold-Kikyo-32x32.png


url = http://www.iconarchive.com/icons/indeepop/shiny/Star-32x32.png


url = http://www.iconarchive.com/icons/arrioch/orbz/orbz-water-24x24.png


url = http://www.iconarchive.com/icons/fasticon/fruits/strawberry-32x32.png


url =http://www.iconarchive.com/icons/afterglow/new-zealand/Bach-32x32.png


url = http://www.iconarchive.com/icons/zyotism/digital-video-techniques/DVD-32x32.png


url = http://www.iconarchive.com/icons/afterglow/new-zealand/Jandals-32x32.png


url = http://www.iconarchive.com/icons/flameia/aqua-smiles/make-fun-32x32.png


url = http://www.iconarchive.com/icons/everaldo/desktoon/library-32x32.png


url = http://www.iconarchive.com/icons/fasticon/toon-system/favorits-32x32.png


url = http://www.iconarchive.com/icons/fasticon/apples/emac-32x32.png

Selanjutnya, kita menuliskan kodenya.
Letakkan kode ini setelah tag title.
Kodenya:

<link href='http://blabla' rel='Shortcut Icon'/>

gantilah http://blabla dengan url gambar yang ingin dijadikan icon.

Gambar yang dapat digunakan berekstensi .png .gif dan .jpg

Selamat Mencoba.

Lihat tutorial lainnya di Azzahrah Design

Read More......

Membuat Ruang Diskusi

5 komentar

Sudah melihat Ruang Diskusi yang saya buat? Kalau belum, silahkan main dulu ke sana. Tutorial kali ini, saya akan membahas cara membuatnya.

Langkah pertama adalah membuat postingan baru. Sama caranya seperti membuat postingan baru biasa. Di bagian judul (title) isi dengan "Ruang Diskusi" atau isi dengan lainnya sesuai dengan keinginan.

Langkah selanjutnya adalah membuat isi postingan. Kliklah tab Edit HTML. Isilah kotak text dengan code script ini:

<div class="js-kit-comments" permalink=""></div>
<script src="http://js-kit.com/comments.js"></script>

Script ini diambil dari JS-Kit.

Klik tombol Publish Post.
Lihatlah bloglah.
Waaadaaaa .... sekarang sudah ada ruang diskusi.

-- Alhamdulillah, bisa berdiskusi --

Lihat tutorial lainnya di Azzahrah Design

Read More......

Membuat Border

8 komentar

Border dapat dibuat pada tulisan dan gambar. Contoh pada tulisan adalah:

Tulisan ber-border. Ukuran border 1px dan jenisnya solid.

Membuatnya tidaklah susah.

Ada 2 cara pembuatan, yaitu tidak menggunakan CSS dan menggunakan CSS. Keduanya sama mudahnya. Saya akan mengulas kedua.

1. Tidak menggunakan CSS.

Keuntungannya adalah, kita dapat membuat border yang kita sukai dan berbeda-beda untuk tiap kotaknya.
Kekurangannya adalah, kita harus mengetik code untuk tiap kotak. Ini memakan waktu dan tenaga.

Cara membuatnya:
Untuk kasus tulisan dalam kotak yang di atas. Codingnya adalah:
<div style="border:1px #ff0000 solid; padding:10px; background-color:#F3F2E8;">Tulisan ber-border. Ukuran border 1px dan jenisnya solid.</div>

border:1px #ff0000 solid;
1px --> ukuran border
#ff0000 --> warna border, terdiri dari 6 digit angka
solid --> tipe border, untuk bergaris putus-putus adalah 'dashed', titik-titik 'dotted'

padding: 10px;
Padding adalah ukuran jarak antara text dan border

background-color:#F3F2E8;
Warna latar belakang. Jika tidak ingin mengubah latar belakang warna, hapus saja.

2. Menggunakan CSS.

Keuntungannya adalah lebih mudah menggunakannya.
Kekurangannya adalah semua kotak sama.

Cara membuatnya:
Perhatikan kembali coding isi tag style yang di atas. Yaitu yang berisi:
border:1px #ff0000 solid; padding:10px; background-color:#F3F2E8;

Copy-lah bagian itu kemudian nanti akan diletakkan (paste) di bagian CSS. Masuklah ke bagian 'Edit HTML' pada layout. Perhatikan seluruh HTML yang ada. Bagian CSS diawali dengan tag coding:
<b:skin><![CDATA[/*

dan diakhiri dengan:
]]></b:skin>

Tepat di atas akhiran CSS ini, buatlah elemen baru CSS dengan mengetik:
.border {

Kemudian hasil copy-an tadi letakkan (paste) setelahnya. Akhiri dengan tanda tutup:
}

Hasilnya adalah:
.border { border:1px #ff0000 solid; padding:10px; background-color:#F3F2E8; }

Langkah terakhir adalah memanggil elemen CSS border ini melalui tag div. Yaitu:
<div class="border">isian</div>

-- Keliatannya ribet tapi tidak loh --

Lihat tutorial lainnya di Azzahrah Design

Read More......

Blogger Update

4 komentar

Tim blogger membuat perubahan baru, disebut Google Gadgets. Versi yang lama, blogger mengunakan widget, sekarang menggunakan gadgets. Kelebihan gadget ini adalah langsung terintegerasi dengan iGoogle Gadgets pada sidebar kita. Selain itu, kita langsung bisa browsing mencari gadget yang kita inginkan yang terdapat dalam Gadget directory. Ini berarti, ribuan gadget bisa kita cari dan langsung kita tampilkan di blog kesayangan kita. Ribuan gadget siap pakai? Hmm, fantastis...

Gadget yang kita buat mengikuti ukuran sidebar yang telah kita tetapkan.

Bagaimana menggunakannya?


Caranya tidak jauh beda dengan cara yang lama. Masuklah lewat dashboard ke bagian layout. Jika kamu teliti, kamu akan mendapatkan perubahan kecil. Sekarang kamu akan melihat tulisan 'Add a Gedget'. Nah, kliklah link tersebut. Kamu akan masuk ke window baru yang berisi ribuan gadget siap pakai.

Pada menu kiri, akan kita lihat pembagian gadget. Gadget basic yang dulunya ditawarkan blogger masih dapat kita pakai. Blogger juga telah membagi gadget lainnya menjadi beberapa kategori.

Cara memasukkan gadget ke blog adalah cukup dengan klik tanda tambah di sampingnya.

Pencarian gadget dilakukan dengan memasukkan kata kunci ke dalam form pencarian yang terdapat di atas, contohnya : 'Searching Gadget'. Kemudian klik tombol pencarian di sampingnya.

-- Selamat ber-gadget ria --


Lihat tutorial lainnya di Azzahrah Design

Read More......

Menu Link / Top Tabs

19 komentar

Menu Link / Top Tabs adalah link yang diletakkan di bagian atas. Link dapat berupa alamat link dari blog kita ataupun blog/web lain yang ingin ditampilkan di blog. Contohnya:

Menu Link

Untuk membuat menu link seperti di atas, dilakukan dalam beberapa tahap.

Tahap pertama, mengubah code HTML.
Pada bagian 'layout', kliklah link 'Edit HTML'. Centangkan 'Expand Widget Templates'. Carilah kode widget untuk header, kodenya awalnya seperti di bawah ini:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Kemudian diakhiri dengan kode:

</b:section>

Tepat di atas kode </b:section>, letakkan kode baru ini:

<b:widget id='LinkList1' locked='false' title='Menu Link' type='LinkList'>
<b:includable id='main'>
<div class='widget-content'>
<b:if cond='data:title'/>
<div class='Menu'>
<ul>
<li class='page_item'><a href='/'><span>Home</span></a></li>
<b:loop values='data:links' var='link'>
<li class='page_item'><a expr:href='data:link.target'><span><data:link.name/></span></a></li>
</b:loop>
</ul>
</div>
</div>
</b:includable>
</b:widget>

Tahap kedua, mengubah code CSS.
Pada bagian CSS, tambahkan elemen berikut ini:

/*-- (Menu Link) --*/
.Menu { padding: 0px 0px 0px 0px; float: right; position: absolute; top: 100px; }
.Menu em { display: none}
.Menu ul { list-style: none; margin: 0px; padding: 0px;}
.Menu ul li { background:#FFFFFF; padding: 0px; margin: 0px; display: inline; font-weight: bold;}
.Menu ul li a { padding: 5px 11px 6px 11px; background:#FFFFFF;}
.Menu ul li a:hover { background:#CC0000; color:#FFFFFF; text-decoration: none;}
.Menu ul li ul { display: none;}

Simpan (save) hasil kerjaan.

Tahap ketiga, menambahkan link.
Masuklah ke bagian 'Page Elements'. Akan terlihat widget 'Menu Link' yang baru kita tambahkan, tepat di bawah header. Kliklah link 'Edit'.


Kemudian, akan terbuat widget baru. Tambahkan link-link kamu melalui widget ini.

Tahap keempat, mengubah tampilan menu.
Bagian ini adalah pilihan. Warna latar (background) menu atau warna link dapat diubah sesuai dengan keinginan. Pada bagian tahap kedua, yaitu mengubah CSS. Coba perhatikan tulisan background:#FFFFFF;. Ubahlah kode warna #FFFFFF dengan kode warna lainnya. Begitu juga untuk mengubah warna font. Carilah kode color:#FFFFFF;. Ubahlah kode warna dengan kode lainnya.

Letak menu juga dapat diubah-ubah. Mengganti letak ketinggian, ubah ukuran yang terdapat pada code top: 100px;. Mengganti letak kanan-kiri dengan cara mengubah nilai dari padding: 0px 0px 0px 0px;. Contohnya, membuat menu lebih ke arah kanan, kodenya menjadi padding: 0px 0px 0px 100px;.

-- Alhamdulillah, selesai juga --

Lihat tutorial lainnya di Azzahrah Design

Read More......

FAQ

5 komentar

1. Apakah bisa mengubah setingan Classic Template menjadi XML Template dan kebalikannya?
--> Bisa. Langkah-langkah pengubahannya dapat dilihat di halaman Tutorial Pengaturan dan Pengubahan Skin / Template.

2. Mana yang lebih baik, Classic Template atau XML Template?
--> Keduanya sama baiknya. Kelebihan XML Template adalah adanya widget.

3. Bagaimana cara mengganti XML Template dengan yang baru?
--> Ada dua cara. Yang pertama dengan cara meng-copy semua kode HTML template baru ke dalam kolom 'Edit HTML'. Cara kedua adalah dengan cara upload file txt atau xml. Cara kedua ini lebih mudah penggunaannya. Penjelasan lebih lengkap baca di halaman Tutorial Pengaturan dan Pengubahan Skin / Template.

4. Apakah dapat mempertahankan widget yang lama saat mengubah XML Template?
--> Ya bisa. Caranya adalah dengan meng-copy widget lama yang ingin tetap digunakan lalu kemudian memindahkannya ke template yang baru.

5. Apakah mengubah template dapat menghapus semua postingan/artikel yang lama?
--> Tidak akan mengapus data postingan/artikel lama. Penghapusan postingan/artikel harus dilakukan langsung pada postingan/artikel tersebut.

Lihat tutorial lainnya di Azzahrah Design

Read More......

Cara Membuat 'Read More' pada Artikel

55 komentar

Pada umumnya, artikel yang dipajang di halaman depan akan ditampilkan secara penuh. Jika pada halaman depan ditampilkan 5 artikel, maka halaman depan akan menjadi panjang. Hal ini akan mengurangi kenyamanan para pembaca. Ada langkah mudah untuk memecah isi artikel menjadi 2 bagian. Bagian pertama, bagian kecil dari artikel yang ditampilkan di halaman depan. Bagian kedua adalah bagian lainnya yang akan ditampilkan bila artikel dibuka/diklik.

Contohnya:

Keutamaan Membaca Al-Qur'an

Segala puji bagi Allah. Shalawat dan salam semoga tercurahkan kepada junjungan dan kekasih kita, Rasulullah, keluarga beserta para sahabat beliau, shalallahu 'alaihi wasalam. Al-Qur'an adalah kalam (firman) Allah. Keutamaannya atas segala perkataan seperti keutamaan Allah atas seluruh makhluk-Nya. Membacanya adalah amalan yang paling utama dilakukan oleh lisan... Read More

Cara membuatnya tidaklah susah. Saya mendapatkan beberapa refernsi untuk membuat link ini. Referensi dari blog tips n trik menurut saya lebih mudah digunakan. Secara garis besar, pembuatannya dilakukan dalam 3 tahap, yaitu pada bagian layout, setting, dan pada bagian post.

Langkah-langkah pada bagian layout adalah:
  1. Anda harus login terlebih dahulu.
  2. Pada halaman dashboard, klik link layout.
  3. Selanjutnya klik link Edit HTML.
  4. Cari checkbox 'Expand Widget Template', centanglah (cek).
  5. Pada kolom HTML itu, carilah kode ini:

    <p><data:post.body/></p>

  6. Hapuslah kode itu, lalu ganti menjadi:

    <b:if cond='data:blog.pageType == "item"'>
    <style>.fullpost{display:inline;}</style>
    <p><data:post.body/></p>
    <b:else/>
    <style>.fullpost{display:none;}</style>
    <p><data:post.body/></p>
    <a expr:href='data:post.url'>Read More......</a>
    </b:if>

  7. Tulisan 'Read More' dapat diganti menjadi 'Baca Selengkapnya' atau dengan tulisan lainnya.
  8. Pengeditan HTML telah selesai, diakhiri dengan menyimpannya, klik tombol save.

Langkah selanjutnya adalah membuat template/pola untuk setiap artikel yang akan kita post, yaitu:
  1. Masuklah pada bagian/menu Setting - Formatting.
  2. Cari kotak 'Post Template'. Isi kotak itu dengan kode:

    <span class="fullpost">
    </span>

  3. Simpan/save.

Langkah terakhir adalah membuat artikel postingannya, yaitu:
  1. Masuklah ke bagian New Posting.
  2. Antara 2 tab, 'Compose' dan 'Edit HTML', pilihlah Edit HTML.Akan terlihat kode template yang telah kita simpan sebelumnya.
  3. Pecahlah artikel menjadi 2 bagian. Bagian pertama, yang akan terlihat di bagian depan, letakkan di atas kode <span class="fullpost">. Bagian kedua diletakkan setelah kode itu dan sebelum kode </span>.

    Contoh kodenya menjadi:

    Segala puji bagi Allah. Shalawat dan salam semoga tercurahkan kepada junjungan dan kekasih kita, Rasulullah, keluarga beserta para sahabat beliau, shalallahu 'alaihi wasalam. Al-Qur'an adalah kalam (firman) Allah. Keutamaannya atas segala perkataan seperti keutamaan Allah atas seluruh makhluk-Nya. Membacanya adalah amalan yang paling utama dilakukan oleh lisan...<span class="fullpost">
    Al-Khaththabi mengatakan: "Disebutkan dalam atsar bahwa jumlah ayat al-Qur'an adalah sesuai dengan jumlah tingkatan dalam surga. Dikatakan kepada pembaca (al-Qur'an), 'Naiklah dalam tingkatan sesuai dengan ayat al-Qur'an yang sebelumnya kamu baca (di dunia).' Karena itu siapa yang membaca dengan sempurna seluruhnya al-Qur'an, maka ia menempati tingkatan surga yang paling atas di akhirat. Sedang siapa yang membaca sesuatu juz darinya, maka kenaikannya dalam tingkatan surga sesuai dengan bacaannya itu. Dengan demikian, akhir pahalanya adalah pada akhir bacaannya. </span>

  4. Publish

-- Selesai -- Alhamdulillah --

Lihat tutorial lainnya di Azzahrah Design

Read More......

Rini's Discussion Room

25 komentar


-- Terima Kasih --

Read More......

Recent Comments / Komen Terbaru

8 komentar

Pernah melihat widget yang berisi komentar-komentar terbaru? Seperti ini contohnya:


Ada langkah mudah untuk membuat widget seperti ini. Pastikan bahwa Anda sudah log in di Blogger. Langkah selanjutnya adalah, klik URL ini:

http://blogger-templates.blogspot.com/2007/03/recent-comments.html

Kemudian isi bagian Customize Widget:

  • Widget title = judul dari widget, misalnya Komentar Terbaru
  • Blog address = isi alamat bloggernya tanpa blogspot
  • Comments to display = jumlah komentar yang akan dipajang
  • Show comment date = pilihan apakah tanggal dipajang atau tidak
  • Show post title = pilihan apakah judul dari artikel dipajang atau tidak
  • Summary size = jumlah karakter dari komnter yang akan dipajang
Sebagai masukkan, ada baiknya agar show comment date dan Show post title dicentang. Kemudian klik tombol 'Apply'. Selanjutnya klik tombol 'Add widget to my blog'. Secara otomatis, akan membuka halaman baru yang menuju ke web blogger. Pilihlah blog yang akan diletakkan widget ini beserta judulnya. Langkah terakhir, klik tombol 'Add Widget'. Secara otomatis, widget sudah masuk ke dalam blog.

Lihat tutorial lainnya di Azzahrah Design

Read More......

Tutorial Pengaturan dan Pengubahan Skin / Template

22 komentar

Mengubah Classic Skin menjadi XML Skin:

1. Login Blogger
2. Masuk ke halaman Dashboard
3. Klik link 'Template' pada blog yang akan diubah

4. Masuk ke halaman Template - Edit HTML
5. Klik link 'Customize Design'
6. Klik tombol di bawah yang bertuliskan 'Upgrade Your Template'

7. Ikutilah langkah selanjutnya yang akan memilih Template XML Skin Anda.

Mengubah XML Skin menjadi Classic Skin:

1. Login Blogger
2. Masuk ke halaman Dashboard
3. Klik link 'Layout' pada blog yang akan diubah

4. Masuk ke halaman Template - Page Elements
5. Klik link 'Edit HTML'
6. Sorot ke halaman bawah dari halaman Edit HTML ini
7. Klik link 'Revert to Classic Template'

8. Ikutilah langkah selanjutnya yang akan memilih Template Classic Skin Anda.

Mengubah HTML dari XML Skin:

1. Login Blogger
2. Masuk ke halaman Dashboard
3. Klik link 'Layout' pada blog yang akan diubah
4. Masuk ke halaman Template - Page Elements
5. Klik link 'Edit HTML'
6. Sebelum melakukan pengubahan, ada baiknya HTML disimpan terlebih dahulu sebagai back-up. Klik link 'Download Full Template'

7. Ubahlah HTML yang ada. Pastikan semua tag benar-benar telah tertutup dengan tag yang sama.
8. Bila Anda mempunyai XML Skin yang telah ada dalam format txt. Lakukanlah pengubahan Skin dengan cara yang gampang, yaitu upload HTML. Uploading berada di bagian atas, tepat di bawah link 'Download Full Template'. Pilih dulu Skin yang akan digunakan dengan menggunakan tombol 'Browse' dan kemudian aktifkan dengan tombol 'Upload'.

9. Untuk melihat hasil sementara, tekan tombol 'Preview'
10. Jangan lupa tekan tombol 'Save Tamplate' di akhir pengeditan.

Lihat tutorial lainnya di Azzahrah Design

Read More......

Tutorial : Memajang Twitter di Web (Blogger)

3 komentar

Twitter, www.twitter.com memiliki layanan pesan singkat pada web. Pesan singkat dapat ditulis dari web twitter sendiri, dari mobile phone (hp), dan dari layanan messanger.

Pesan-pesan singkat ini dapat juga ditampilkan dalam web ataupun blog seperti pada gambar ini (widget).



Adapun langkah-langkahnya adalah:

1. Masuk ke web twitter, login.

2. Masuk ke halaman / url berikut ini, http://twitter.com/badges

3. Bagi pengguna blogger, pilihlah blogger. Dapat juga memilihi "Other". Namun untuk toturial ini, saya memilih "Blogger".



4. - Number of updates, merupakan jumlah dari pesan yang ditampilkan.
- Title, Judul atas dari pesan. Jika tidak ingin memiliki judul, maka centang bagian "No Title"
- Insert into your blog. Klik pada gambar jika kamu menggunakan XML Skin. Jika masih menggunakan skin classic, maka klik link yang bertuliskan "grab the code".

5. Bagi yang meng-klik gambar, ikuti saja langkah selanjutnya. Secara otomatis, widget akan muncul pada blogger kamu.

6. Bagi yang mengambil kode. Setelah meng-klik link "grab the code", selanjutnya akan muncul kode / source untuk menampilkan twitter.



Copy kode ini dan paste ke tempat yang diinginkan. Kode ini dapat dimodifikasi dengan CSS sehingga dapat disesuaikan dengan keinginan sendiri.

Lihat tutorial lainnya di Azzahrah Design

Read More......

Link Me Up

2 komentar


Sewaktu melakukan blogwalking, aku menemukan satu aksesoris blog yang bagus. Namanya Link Me Up. Link Me Up memberikan fasilitas penambahan link secara online dan bebas kepada pengunjung blog kita.

Cara pengaktifannya cukup mudah. Lakukan registrasi di : http://www.linkme-up.com/register.php

Selanjutnya, sign in dengan menggunakan account yang baru didaftarkan. Kita akan masuk ke dalam halaman linkManager. Klik link paling pertama dari barisan Get the linker HTML codes. Copy script yang ada lalu letakkan pada blog.

Selanjutnya, link dapat ditambahkan.

Daftar link :








Powered by : Powered by linker

Lihat tutorial lainnya di Azzahrah Design

Read More......

Link Target Blank

12 komentar

Ada pertanyaan, "Bagaimana membuat link yang membuka halaman baru?"

Sebenarnya mudah, ikutin saja langkah-langkah di bawah ini:

1. ketik tag untuk link disertai link yang dituju
<a href="http://www.itbestcompu.com"></a>

2. ketik kata / kalimat yang ingin ditampilkan dalam web, misalnya: Our sponsor
<a href="http://www.itbestcompu.com">Our sponsor</a>

3. sisipkan target pada tag link
<a href="http://www.itbestcompu.com" target="_blank">Our sponsor</a>

DONE

Lihat tutorial lainnya di Azzahrah Design

Read More......

Use of CSS

0 komentar

Prior to CSS, nearly all of the presentational attributes of HTML documents were contained within the HTML markup; all font colors, background styles, element alignments, borders and sizes had to be explicitly described, often repeatedly, within the HTML. CSS allows authors to move much of that information to a separate stylesheet resulting in considerably simpler HTML markup.

Headings (h1 elements), sub-headings (h2), sub-sub-headings (h3) etc. are defined structurally using HTML. In print and on the screen, choice of font, size, color and emphasis for these elements is presentational.

Prior to CSS, document authors who wanted to assign such typographic characteristics to, say, all h2 headings had to use the HTML font and other presentational elements for each occurrence of that heading type. The additional presentational markup in the HTML made documents more complex, and generally more difficult to maintain. To render all h2 tags in this manner, the markup had to be repeated for each heading. In CSS, presentation is separated from structure. In print, CSS can define color, font, text alignment, size, borders, spacing, layout and many other typographic characteristics. It can do so independently for on-screen and printed views. CSS also defines non-visual styles such as the speed and emphasis with which text is read out by aural text readers. The W3C now considers the advantages of CSS for defining all aspects of the presentation of HTML pages to be superior to other methods. It has therefore deprecated the use of all the original presentational HTML markup.

Lihat tutorial lainnya di Azzahrah Design

Read More......
-- -- --

Copyright © 2008 - Free Islamic Blogger Templates - powered by Blogger