Free Islamic Blogger Templates

Free Wordpress Theme Gratisan

2009-12-23T22:54:00.003-11:00

Alhamdulillah, Azzahrah Design mulai memberikan theme wordpress secara gratis.

Untuk edisi perdana, Azzahrah Design mengambil Pulau Nias sebagai tema. Sebelumnya, Pulau Nias telah dibuat template blogger. Designnya juga tak banyak berubah, hanya disesuaikan dengan kebutuhan-kebutuhan wordpress.

Melihat Pulau Nias Theme

Atau

Langsung Download

Silahkan mendownload. Mudah-mudahan bermanfaat dan mudah-mudahan segera keluar edisi kedua. Insya Allah.

Theme creator / Generator

2009-12-20T19:26:00.004-11:00

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

URL Path Forwarding

2009-12-11T17:33:00.006-11:00

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

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

2009-12-09T21:40:00.007-11:00

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

Diskon untuk Para Ibu

2009-12-04T20:37:00.009-11:00

Di bulan Desember ini, Azzahrah Design memberikan kesempatan emas para ibu yang memiliki usaha rumahan untuk mengembangkan usahanya agar lebih maju lagi. Kesempatan emas itu berupa potongan harga dalam pembuatan website Online Shopping.

Syarat :

Pemilik usaha seorang ibu rumah tangga
Barang yang dijual adalah barang-barang yang berkaitan dengan:

pakaian
seprei, selimut, handuk>
barang pecah belah, seperti gelas, piring, dll
makanan

Yang Anda dapatkan :

Domain .com selama 1 tahun
Hosting selama 1 tahun
Website Online Shop yang memiliki fitur shopping cart, bilingual, kurs mata uang, newsletter, sistem voucher, program referral, dan online costumer support.
Email

Demo website : Azzahrah Online Shop

Harga cukup hanya Rp 1.000.000,-

Hubungi:

Telefon : (021) 99593409
Email : info@azzahrah.com
YM chat : azzahrah_kursus

Software & Application development Company Itsolusenz.com

Web Editor - Software sederhana membuat web

2009-11-17T13:06:00.005-11:00

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:

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

^_^

Lihat tutorial lainnya di Azzahrah Design

Kami di Facebook

2009-11-12T12:48:00.004-11:00

Alhamdulillah, sudah ada halaman kami di Facebook. Di sini, kami menyediakan layanan diskusi berkaitan dengan design, web, dan blog.

Silahkan bergabung bersama kami. Klik di sini.

Mudan-mudahan bermanfaat.

Penawaran Spesial Bulan Oktober

2009-10-09T16:55:00.003-11:00

Mempunyai blog pribadi dengan nama sendiri merupakan kebanggaan tersendiri, seperti www.namaanda.com, www.namaanda.info ataupun www.namaanda.net.

Lagi-lagi Azzahrah Design memberikan penawaran spesial. Pemesanan untuk pembuatan blog pribadi diberikan harga khusus super hemat, hanya Rp 700.000,-.

Harga sudah termasuk:

domain 1 tahun,
hosting 1 tahun,
website blog,
dan email pribadi

Ayo segera ambil kesempatan ini....

Kabar dari Geocities-nya Yahoo

2009-09-14T17:33:00.003-11:00

GeoCities is closing on October 26, 2009.

On October 26, 2009, your GeoCities site will no longer appear on the Web, and you will no longer be able to access your GeoCities account and files.

If you'd like to move your web site, or save the images and other files you've posted online, please act now by downloading your files or upgrading to Yahoo! Web Hosting. See details in the help center or upgrade to Web Hosting now for only $4.99 a month.

Wah, Geocities mau ditutup. Mengingat semua template telah disimpan di Geocities, ini artinya harus dipindah ke hosting gratisan lainnya. Ada ide ?

Dalam beberapa waktu ke depan, untuk sementara tidak akan bisa men-download template karena (sepertinya) belum sempat memindahkan file dari geocities ke tempat lain.

Harap maklum.

XML Skin - Pulau Nias

2009-09-10T15:33:00.012-11:00

View : Live Demo

Download : p-nias.txt

Catatan:
Pulau Nias adalah salah satu pulau indah yang ada di Indonesia.
Thanks to Lee for the beautiful photo.

Lihat Template lainnya di Azzahrah Design

Edisi Indonesia

2009-09-03T16:39:00.000-11:00

Untuk menunjukkan keindahan Indonesia dan kekayaan budayanya maka selanjutnya dibuat kategori baru, yaitu template dengan tema Indonesia, Insya Allah, dengan tema:

1. Daerah yang indah seperti pantai.
2. Kain daerah.
3. Gedung tua yang memiliki nilai sejarah tinggi.
4. Dan tentu saja masjid.

Tentu saja tema-tema di atas tidak bertentangan dengan tema utama blog ini, yaitu Islami. Dalam artian semua tema tidak bertentangan dengan syari'at Islam, diantaranya:

- tidak bertentangan dengan Tauhid
- gambar tidak berbentuk makhluk hidup (tak mengapa jika sekedar siluet)
- tidak mengandung sesuatu yang maksiat
- bukan termasuk tarian dan nyanyian.

Bagi teman-teman yang memiliki info yang berkaitan dengan tema-tema di atas atau memiliki gagasan yang bagus atau kritikan, hendaklah segera memberikan informasinya di sini.

Terima kasih.

Update

2009-08-31T16:36:00.001-11:00

Ya, blog ini direncanakan akan kembali diaktifkan. Tunggulah postingan-postingan terbaru. Insya Allah.

Selamat menunaikan ibadah shaum. Semoga amal ibadah kita diterima Allah Ta'ala. Amiin.

Menggunakan Template pada Blogger

2009-02-09T03:15:00.004-11:00

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

YM! Pingbox

2009-01-10T22:59:00.005-11:00

Pernah lihat YM! Pingbox ? Yang gini loh tampilannya:

Cara buatnya (required flash player 10) :

Masuk ke web ini http://messenger.yahoo.com/pingbox/
Klik tombol 'Create a Pingbox".
Masuk ke halaman pengaturan Pingbox.
Pilihlah disain yang disukai.
Masukkan nama yang akan dipajang pada 'Display Name'.
'Show Yahoo! Messenger display image' maksudnya adalah menampilkan gambar avatar yang sesuai dengan YM kita.
'Online Greeting' adalah kalimat sapaan bagi pengunjung. Pilih 'Enter custom message' untuk membuat kalimat yang kita inginkan.
'Offline Message' adalah kalimat yang muncul saat kita sedang offline. Pilih 'Enter custom message' untuk membuat kalimat yang kita inginkan.
Centangkan checkbox 'Require visitors to enter Nickname to send IM' agar pengunjung yang ingin chat dengan kita harus menuliskan nickname-nya.
'Save Pingbox as' adalah nama grup pada list friend di YM.
Klik tombol 'Save'
Akan muncul window baru untuk memasukkan account yahoo.
Pingbox telah selesai. Klik tombol 'Copy to Clipboard' dan kemudian paste ke blog.

Catatan:
YM! Pingbox ini dapat digunakan bila menggunakan YM 9.0
Download Yahoo! Messenger 9.0

Memperkenalkan: Az Zahrah Kursus Web

2009-01-06T03:38:00.005-11:00

Bismillahirrahmanirrahiim. Hanya kepada-Nyalah segala puja dan puji.
Alhamdulillah, web kursus telah selesai dibuat dengan nama Az Zahrah Kursus Web (azzahrah.com).

Mudah-mudahan usaha baru ini dapat berjalan dengan mulus dan penuh keridhaan dari Allah Ta'ala. Juga teman-teman mendapat banyak manfaat dari web ini karena akan diberikan tutorial dan template secara gratis. Tutorial yang diberikan ada yang berupa video tutorial sehingga lebih mudah untuk dipahami.

Live Streaming Radio Islam

2008-12-28T04:12:00.011-11:00

1. Radio Rodja Cileungsi - 756 am

Minicaster Radio Playhead

To listen you must
install Flash Player
. Visit
Draftlight Networks for more info.

Kode Pemajangan:

2. Radio Assunnah Cirebon 92.3 FM

Kode pemajangan:

3. Radio Muslim

Kode Pemajangan :

Mengecek status YM teman

2008-12-23T23:34:00.005-11:00

Punya teman yang doyan invis? Susahnya kalau kita lagi butuh dia, kitanya gak tau apakah dia lagi online atau offline. Ada nih cara jitu untuk mengetahui status teman-teman YM'ers.

Caranya?

Kunjungi web ini http://invisibleyahoo.net/

Akan muncul gambar ini:

Masukkan saja ID teman kita itu. Klik tombol 'check'.

Nah, kita sudah mengetahui statusnya. Selamat mencoba.

XML Skin : Just for You

2008-12-19T22:24:00.007-11:00

View : Live Demo

Download : just-for-you.txt

Lihat template lainnya di Azzahrah Design.

Dibuka Kursus Web Design Khusus Wanita

2008-11-15T01:36:00.005-11:00

Telah dibuka kursus belajar Web Design, khusus wanita.
Kenapa khusus wanita?
1. Karena aku wanita
2. Karena aku wanita, dan
3. Karena aku wanita.

Maksa ya alasannya ? Lengkap ya gini loh....
Ada beberapa kelompok wanita (muslimah) yang malu harus bergabung dengan para pria, termasuk dalam hal menuntut ilmu. Dan ada juga yang malu harus mengajar di depan para pria. Dua kebutuhan itu bergabung.

Disamping itu, kebutuhan akan ilmu IT semakin meningkat. Dunia bisnis sudah merambah ke dalam IT. Banyaknya muncul web-web seperti e-shop, e-marketing, e-commerce membuktikan bahwan ilmu IT semakin berkembang. Para wanita pun jangan mau ketinggalan dalam urusan ini. Tidak sedikit para wanita bahkan ibu-ibu rumah tangga memilih untuk berjualan online lewat web. Ini berarti ilmu IT tidak melulu berguna bagi web designer. Berguna juga bagi mereka-mereka yang ingin terjun dalam dunia jualan online.

Tertarik belajar web secara semi privat?
Hubungi aku di: a_rinii@yahoo.com atau chat di YM dengan ID: a_rinii

Biaya bulanan, dimulai dengan harga Rp 250.000,-
Fasilitas: materi, 1 komputer, dan internet.
Lokasi: Cempaka Putih, Jakarta Pusat

Ungkapkan Idemu

2008-10-13T03:28:00.013-11:00

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:

Hapus tulisan 'isi' dan ganti dengan kalimatmu sendiri.

--Selamat Mencoba--

Lihat tutorial lainnya di Azzahrah Design

Shortcut Icon

2008-10-05T02:27:00.008-11:00

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:

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

Selamat Berlebaran

2008-10-01T02:52:00.001-11:00

السلام عليكم ورحمة الله

تقبل الله منا ومنكم صالح الأعمال
و جعلنا جميعا من عتقاء رمضان

نتمنى لكم عيدا مباركا
من العائدين والفائزين
وكل عام و أنتم بخير

Anti Spam, How to Block Spam

2008-09-23T05:25:00.004-11:00

Email and instant messaging (IM) play a mission-critical role in your company. But the more you rely on these technologies, the more open you are to the risks and threats. It is not only the traditional security threats like spam and viruses that you need to control but also the internal threats of losing critical and confidential corporate information. In this case, you need Email Spam Protection.

Spam is annoying. Period. Spam was once just an annoyance, but it has now become the tactic of choice for online deception, fraud, and abuse. Spam and fraudulent e-mail messages are major issues for computer users and businesses of all sizes. Companies are being forced to commit significant resources to protect their messaging infrastructure and their brand from these abuses, and computer users must work to protect themselves from the influx of deceptive e-mail. Email Spam Blocker is the best way to help detect and prevent onslaught of abuse and deception.

More About Spam

How in the heck did those spammers get your address in the first place? Actually, they use a variety of techniques. They use programs called spambots to search the web and pick up any email addresses that could be listed on websites. They use what's called the "Dictionary" technique, where they take a well-known email extension (earthlink.net, for instance), and make up all kinds of possible user names to go with it. Like going page by page through the dictionary.

Many internet service providers use a variety of methods to block spam before it ever gets to you. Nevertheless, we all know that some spam inevitably gets through to our inboxes. That's when we need to take a proactive stance and install some sort of software to filter it out! You can use Barracuda Spam to solve your problems.

Memasukkan Ayat Al-Qur'an

2008-09-16T17:58:00.009-11:00

Keren juga kan jika kita bisa memasukkan ayat Al-Quran dalam blog kita. Gini nih:

Ayat-ayat Al-Qur'an itu berupa image. Kita berterima kasih pada orang yang telah bersusah payah membuatnya, yaitu http//web1hari.com/ dan http://www.islamic-council.com/

http//web1hari.com/

Cara penggunaan gambar:
Kita tinggal memanggil gambar-gambar yang sesuai dengan ayat dan surah yang dikehendaki. Kodenya adalah:

Catatan: nomor surah dan ayat tidak perlu menggunakan angka ‘0′, misal 1, tidak perlu 01 atau 001

Contohnya: Bassmallah atau ayat pertama dari surah pertama (Al-Fatihah):
<img src="http://web1hari.com/file/gif/1/1_1.gif" />

http://www.islamic-council.com/

Cara penggunaan gambar:
Kita tinggal memanggil gambar-gambar yang sesuai dengan ayat dan surah yang dikehendaki. Kodenya adalah:

Catatan: nomor surah tidak perlu menggunakan angka ‘0′, misal 1, tidak perlu 01 atau 001 tetapi nomor ayat selalu 3 digit, untuk ayat yang < 100 harus menggunakan angka 0 sebagai pelengkap.

Contohnya: Bassmallah atau ayat pertama dari surah pertama (Al-Fatihah):
<img src=http://www.islamic-council.com/quran/image/1_001.gif>

-- Alhamdulillah --

GoodReads

2008-09-09T01:32:00.007-11:00

Lihat widget di bawah ini. Ingin memilikinya?

Widget ini diberikan oleh web komunitas penulis dan pembaca buku, Goodreads. Karena ini berupa komunitas, berarti langkah awalnya adalah mendaftar di web tersebut. Setelah proses pendaftaran kelar, langkah selanjutnya adalah memilih buku-buku agar masuk ke dalam daftar bacaan.

Langkah selanjutnya adalah, masuklah ke link ini, widget. Goodreads memberikan bermacam-macam jenis widget untuk blog. Perhatikan satu persatu, pilihlah widget mana yang ingin ditampilkan di blog. Semuanya sudah tersedia berserta coding HTML yang bisa langsung diletakkan di gadget blogger kita.

-- Selamat Mencoba --

Google Chrome

2008-09-03T19:50:00.006-11:00

Google launching browser seri pertamanya, dinamakan Google Chrome, masih BETA (uji coba).

Google Chrome adalah browser yang dibuat dengan desain praktis agar Anda dapat mengakses Web dengan lebih cepat, mudah, dan aman.

Tim Google telah menghabiskan banyak waktu untuk membuat browser ini. Mereka berkeinginan untuk tidak hanya membuat sebuah browser tapi juga sebuah platform baru untuk sebuah web pages dan aplikasi. Itulah sebabnya tim Google mengejavascript:void(0)luarkan semua daya upayanya untuk menciptakan sebuah browser yang multifungsi namun juga simpel.

Sampai saat ini, aku belum mencoba browser baru ini. Belum juga men-downloadnya. Untuk teman-teman yang ingin mempelajarinya lebih jauh, kunjungi Official Google Blog atau informasinya dalam bahasa Indonesia. Silahkan download.

Sedikit info yang didapat dari Detik. Sundar Pichai, VP Product Management Google, mengatakan bahwa Google yakin bisa memberikan nilai tambah pada pengguna sekaligus membantu inovasi di web lewat Google Chrome. Sundar berjanji Google Chrome akan terasa seperti halaman depan klasik Google.com, yaitu bersih dan tidak mengganggu.

"Di bawahnya, kami berhasil membangun pondasi browser yang bisa menjalankan aplikasi web saat ini yang rumit dengan lebih baik," tulis Sundar.

Disebutkan bahwa Google Chrome akan menerapkan teknologi yang 'memisahkan' setiap tab yang dibuka pada browser sehingga mengurangi risiko crash dan melindungi komputer dari situs berbahaya. Selain itu disebutkan pula bahwa Google Chrome menggunakan JavaScript engine V8 yang saat ini belum tersedia di browser manapun.

Untuk versi uji coba itu akan tersedia bagi sistem operasi Windows, nantinya akan menyusul versi untuk Macintosh dan Linux. Google Chrome akan tersedia dalam lisensi Open Source.

Lihat tutorial lainnya di Azzahrah Design

Marhaban Ya Ramadhan...

2008-08-31T16:56:00.007-11:00

Alhamdulillah, bulan yang ditunggu-tunggu telah datang. Syaikh Muhammad bin Sholih Al ‘Utsaimin rohimahulloh mengatakan,

“Tujuan dari puasa bukanlah sekedar mengekang tubuh dalam rangka menahan haus dan lapar serta kesulitan, akan tetapi tujuannya adalah menundukkan jiwa dengan meninggalkan sesuatu yang dicintai demi meraih keridhoan Dzat yang dicintai. Adapun perkara dicintai yang ditinggalkan adalah makan, minum dan jima’, inilah nafsu syahwat. Adapun sesuatu yang dicintai yang dicari keridhoan-Nya adalah Alloh ‘Azza wa Jalla. Maka kita harus senantiasa menghadirkan niat ini bahwasanya kita meninggalkan pembatal-pembatal puasa ini demi mencari keridhoan Alloh ‘Azza wa Jalla.” (Tsamaniyatu Wa Arba’uuna Su’aalan Fish Shiyaam hal. 10)

Artikel yang berhubungan dengan puasa:
- Amalan Harian Ramadhan
- Qiyam Ramadhan
- Berpuasa
- Amalan yang Berhubungan Dengan Puasa

Penghitungan Statistik Pengunjung

2008-08-30T05:01:00.004-11:00

Mempunyai data statistik pengunjung blog merupakan hal yang penting. Sistem penghitungan ada 2 jenis, berdasarkan IP pengunjung (unique user) dan berdasarkan jumlah klikan per halaman (page hit) pada blog. Jika berdasar pada IP pengunjung, maka nominal dari jumlah pengunjung akan lebih sedikit dibanding dengan berdasarkan pada jumlah klikan per halaman. Jadi, kalau ingin terlihat banyak pengunjung, maka ambilah sistem penghitungan jenis kedua.

Ada banyak web yang menawarkan layanan penghitungan pengunjung secara gratis. Untuk yang bayar, juga tentunya ada. Dan seperti biasanya, yang bayar adalah versi premium atau upgrade dari layanan gratis. Yang akan dibahas kali ini adalah beberapa web yang memberikan layanan yang gratisan. Tentunya, yang gratisan lebih menarik bagi kita pengguna blog gratisan pula :D

1. Site Meter

Ini adalah web yang paling menonjol diantara web-web lainnya. Informasi yang diberikan cukup lengkap. Mulai dari jumlah pengunjung berdasarkan IP, jumlah halaman yang dikunjungi, hingga informasi si pengunjung tersebut. URL asal dia masuk ke blog kita, waktunya, negaranya, lengkapnya klik di data statistik ini. Data ringkasan statistik pengunjung akan dikirimkan ke email secara teratur.

Untuk mendapatkan layanan ini, kamu harus mendaftar terlebih dahulu. Klik di sini untuk pendaftarannya. Ikutilah proses pendaftarannya hingga nantinya mendapatkan kode yang harus dimasukkan ke dalam gadget blogger.

2. BlogPatrol

Hampir sama dengan Site Meter, tapi tidak ada layanan pengiriman info melalui email. Namun, ada kekurangannya. Beberapa lama saya menggunakan BlogPatrol, sering terjadi blank info, dimana ketika kita ingin melihat data pengunjung, data tidak ada.

Untuk pendaftaran, klik di sini.

3. eFreeCounter

Berbeda dengan 2 di atas, untuk mendapatkan data statistik kita tidak perlu melakukan proses pendaftaran. Lebih ringkas dan mudah, tentunya. Cukup dengan masuk ke halaman ini, kemudian ikuti langkah-langkah selanjutnya.

Berbeda dengan layanan yang mengharuskan pendaftaran, layanan yang ringkas ini kita tidak akan diberikan info tentang data pengujung.

Salah satu kelemahan dari web ini adalah, pada counter yang diberikannya akan diselipkan link iklan produk. Jika tidak ingin menampilkan iklan tersebut di blog, jangan memakai jenis counter ini.

4. FreeLogs

Web ini juga menawarkan counter tanpa harus ada proses pendaftaran. Cukup masuk ke halaman ini, lalu ikuti isi kolom-kolom yang dibutuhkan dan ikuti langkah-langkahnya. Kita akan diberikan pilihan, apakah statistik berdasarkan unique user (IP) atau berdasarkan klikan tiap halamannya (Every Page Hit).

Masih banyak lagi web yang memberikan layanan penghitungan pengunjung blog secara gratis. Tinggal kita mau pilih yang mana ....

Rating

2008-08-27T19:56:00.007-11:00

Contohnya:

Cara membuatnya adalah, masukan kode berikut ini:

Kode diambil dari JS-Kit

Modifikasi:

Score View

Kode:

Split View

Kode:

Warna Bintang
Ruby :

Kode:

Merah :

Kode:

Golden :

Kode:

Green :

Kode:

Emerald :

Kode:

Blue :

Kode:

Indigo :

Kode:

Violet :

Kode:

XML Template : Stroberi

2008-08-25T01:20:00.005-11:00

View : Live Demo

Download : stroberi.txt

Lihat template lainnya di Azzahrah Design.

Kalender Hijriah

2008-08-24T01:01:00.007-11:00

Script untuk membuatnya:

Script diambil dari hijriah.jentayu.com

Kalender Hijriah versi lain:

Scriptnya:

Modifasi kalender di mukmin.info

Membuat Ruang Diskusi

2008-08-21T17:26:00.007-11:00

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:

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

XML Template : Simple Blue

2008-08-18T18:48:00.006-11:00

View : Live Demo

Download txt file : simple-blue.txt

Cara Penggunaan:

1. Untuk Kalender
Masuk ke bagian Setting > Formatting. Timestamp Format ganti dengan pilihan Monday, August 18, 2008.

2. Untuk Menu
Masuk ke Layout. Tambahkan menu-menu lainnya. Jika tidak, maka bagian menu ini tidak akan terlihat.

Lihat template lainnya di Azzahrah Design.

Membuat Border

2008-08-17T16:25:00.006-11:00

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

Gambar ber-link, Seperti Kolom Sponsored

2008-08-16T01:22:00.004-11:00

Beberapa pertanyaan teman-teman yang masuk adalah tentang kolom 'Sponsored' yang ada di blog ini, yaitu:

Bagaimana cara membuatnya?

Pembuatannya tidaklah susah. Dua hal yang harus diketahui adalah:

Harus mempunyai gambar (image) yang sudah di-upload.
Coding yang benar dengan alamat URL link yang dituju, yang valid juga.

Coding untuk banner Visit Indonesia 2008 adalah:

Penggunaan gadget/widget adalah dengan mencantumkan title 'Sponsored', lalu diisi dengan coding yang telah disebutkan di atas. Banner New Face Center dan Best_Computer adalah promosi dari dua usaha keluarga. Meletakkan banner Visit Indonesia 2008 adalah murni ide sendiri yang sedikit berpromosi negara tercinta.

-- Selamat Mencoba --

Blogger Update

2008-08-13T22:30:00.010-11:00

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

Membuat Widget Cuaca

2008-08-11T20:16:00.008-11:00

Lihat widget informasi cuaca di sebelah ini. Bagaimana cara membuatnya?

Caranya, cukup menuliskan script di bawah ini. Tentunya di tempat yang diinginkan. Scriptnya:

<!-Weather in jakarta, Indonesia on your site - HTML code - weatherforecastmap.com
--><script src="http://www.weatherforecastmap.com/weather.php?zona=indonesia_jakarta"></script><noscript><a
class="weather_widget" href="http://www.weatherforecastmap.com/"
><img class="weather" src="http://weatherforecastmap.com/img/widgets/1217950.gif"
alt="weather_widget" ></a></noscript><!-end of code-->

--Alhamdulillah, berhasil--

Untuk daerah Indonesia lainnya, klik di sini.
Untuk negara lainnya, klik di sini.

Menu Link / Top Tabs

2008-08-09T18:17:00.011-11:00

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:

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

FAQ

2008-08-07T02:04:00.014-11:00

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

Cara Membuat 'Read More' pada Artikel

2008-08-03T19:45:00.008-11:00

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:

Anda harus login terlebih dahulu.
Pada halaman dashboard, klik link layout.
Selanjutnya klik link Edit HTML.
Cari checkbox 'Expand Widget Template', centanglah (cek).
Pada kolom HTML itu, carilah kode ini:

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

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>

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

Langkah selanjutnya adalah membuat template/pola untuk setiap artikel yang akan kita post, yaitu:

Masuklah pada bagian/menu Setting - Formatting.
Cari kotak 'Post Template'. Isi kotak itu dengan kode:

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

Simpan/save.

Langkah terakhir adalah membuat artikel postingannya, yaitu:

Masuklah ke bagian New Posting.
Antara 2 tab, 'Compose' dan 'Edit HTML', pilihlah Edit HTML.Akan terlihat kode template yang telah kita simpan sebelumnya.
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>

Publish

-- Selesai -- Alhamdulillah --

Lihat tutorial lainnya di Azzahrah Design

Rini's Discussion Room

2008-07-31T20:25:00.010-11:00

-- Terima Kasih --

XML Skin : Green

2008-07-25T03:30:00.006-11:00

View : Live Demo

Download : green.txt

Lihat template lainnya di Azzahrah Design.

Free HTML editor

2008-07-17T06:54:00.004-11:00

Kali ini, sebuah software HTML Editor. Ada 2 buah software yang ditampilkan, yaitu:

EasyHtml

It features tabbed documents, tag colorization, 18 helpers (including JavaScript, Image Map Helper, etc), MDI (multi-document-interface), built-in browser, has a customizable environment, it can export to RTF, TXT or PDF, import from RTF or TXT, it can also check the download time of a page or number of pages, good Helpfile, and more.

Download EasyHtml! - 3,05Mb

Stone’s WebWriter

It features tag highlighting, templates; image viewer; search & replace; frames wizard; forms wizard; ImageMap editor; JavaScript editor; StyleSheet editor; code completion; project management; site map; and more.

This HTML editor packs a lot of features into one small package. You can open multiple documents at the same time by highlighting them in the file manager and then pressing the Enter key. The Extended Search & Replace allows you to work with all open documents or with all HTML documents in a specified folder. Neat.

Registration Stone's WebWriter must be registered. See prices and registration form. Stone's WebWriter can be registered for free if it is used in your home only to make your own personal and non-commercial homepage. Please notice and respect, that no support can be offered with free registration.

Download Now! - 970 KB

Lihat tutorial lainnya di Azzahrah Design

Free Image & Photo Editing Software Download - PhotoPlus

2008-07-15T18:27:00.007-11:00

Buat yang pengen ngedit foto, nih ada software gratisan yang bisa digunakan. Namun, jika yang gratisan ini dirasa kurang, bisa di-upgrade ke versi 8, tapi mesti bayar loh....

Sedikit Review dan Screenshot-nya:

PhotoPlus is a fully-functional graphics editor for bitmap files. It features include a powerful image export optimizer, editable text, comprehensive image enhancement, image export optimizer, image slicing & image maps, 'smart' shapes, etc.

There are also additional download options: CMYK printing (2.7MB); online documentation (3.8MB); sample images (6.1MB); and 15 extra import & export filters, including WMF, PSD, PCD, PCX & EPS (1.6MB).
PhotoPlus is a professional quality tool which uses its own native SPP file format to save images but can export to the major formats: GIF, JPG & BMP.
This is an easy editor to use. The toolbars have been well thought out and implemented and the program allows an extremely high standard of image creation and editing. We liked the selection-options where you can select a portion of an image in the shape of, say, a star. There are over a dozen shapes and each are customizable.
The built-in Helpfile is extremely good and provides most of the basic information you would want to get the best from this program.
This isn't something we normally say, but PhotoPlus is almost too good to be free!
Grab a copy quick before Serif changes its mind!

Download PhotoPlus 6 for Free! - 19.4MB

Lihat tutorial lainnya di Azzahrah Design

BTemplates

2008-06-25T04:34:00.005-11:00

Salah satu web yang menampilkan hasil karya template buatan orang lain, termasuk Free Islamic Blogger Template ini. Silahkan lihat-lihat.

My Blog - XML Skin

2008-04-18T16:32:00.011-11:00

View : Live Demo

Download : my-blog.txt

Cara Modifikasi:
Kutipan Al-Quran dapat diganti dengan yang lainnya. Menggantinya langsung pada kolom pengeditan HTML.

Lihat template lainnya di Azzahrah Design.

Purple, My Days - XML Skin

2008-04-10T16:45:00.009-11:00

View : Live Demo

Download : purple.txt

Cara Mengubah Ayat Al-Qur'an: ubah langsung pada kolom pengeditan HTML.

Lihat template lainnya di Azzahrah Design.

XML Skin - The Book / Al Kitab / Al Qur'an

2008-04-05T17:51:00.006-11:00

View : Live Demo

Download : kitab.txt

Catatan:
Pencantuman 2 ayat Al-Quran ((Surah Ali Imran: 2-3 dan Surah an-Nahl: 89) dapat diganti. Namun harus diperhatikan ukurannya, yang mana harus pas dan sesuai dengan ukuran lebar dari gambar latar / background.

Lihat template lainnya di Azzahrah Design.

Ganti Skin

2008-03-21T18:17:00.004-11:00

Alhamdulillah, berhasil ganti skin. Sebenarnya masih cinta sama skin lama. Tapi, untuk kenyamanan user, ana berinisiatif mengganti lay out. Inilah hasilnya. Mudah-mudahan lebih adem di mata.

Tapi nih, pernah ana baca bahwa warna hitam pada monitor sebenarnya lebih hemat dalam penggunaan listrik. Warna putih sangat boros. Hal itulah yang mendasari mengapa ana menggunakan hitam, waktu lalu.

Blog Directory

Mawar / Rose - XML Skin

2008-03-17T16:46:00.007-11:00

View : Live Demo

Download : mawar.txt

Lihat template lainnya di Azzahrah Design.

Islam Pictures

2008-03-07T18:41:00.003-11:00

Ada permintaan foto-foto yang Islam. Kalau foto pribadi, aku tak punya banyak. Foto-foto tersebut sebenarnya cukup banyak tersedia di internet.

Dua diantaranya terdapat di web galeri foto Flickr dan webshots. Penggunaan foto, secara etika haruslah dengan izin yang punya foto.

Park - XML Skin

2008-03-02T18:26:00.008-11:00

View : Live Demo
Download : park.txt

Thanks to petermarteinsson for the image.

Lihat template lainnya di Azzahrah Design.

Computer - XML Skin

2008-02-23T18:40:00.009-11:00

View : Live Demo

Download : computer.txt

Lihat template lainnya di Azzahrah Design.

Tutorial Pengaturan dan Pengubahan Skin / Template

2008-02-11T15:57:00.001-11:00

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

Dunia Anak - XML Skin

2008-01-10T18:15:00.004-11:00

View : Live Demo

Download : dunia_anak.txt

Size : 9 kb

Info : Permintaan nih. Tapi, bolehlah dipakai oleh yang lain.

Lihat template lainnya di Azzahrah Design.

Love - XML Skin

2008-01-03T17:34:00.005-11:00

View : Live Demo

Download : lets_talk_bout_love.txt

Size : 12 kb

Lihat template lainnya di Azzahrah Design.

Tutorial : Memajang Twitter di Web (Blogger)

2008-01-01T13:42:00.001-11:00

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

Here with me... - XML Skin

2007-12-21T17:20:00.004-11:00

View : Live Demo

Download : bangku.txt

Size : 12 kb

Lihat template lainnya di Azzahrah Design.

Ottoman - XML Skin

2007-11-16T16:16:00.006-11:00

View : Live Demo

Download : ottoman.txt

Size : 12 kb

Lihat template lainnya di Azzahrah Design.

Pregnant - XML Skin

2007-11-01T15:33:00.006-11:00

View : Live Demo

Download : pregnancy.txt

Size : 12 kb

Info : My first Blogger XML Skins. This skin request by Nunu, my friend from Mesir. Hope you like this skin.
So sorry for being late :D

Lihat template lainnya di Azzahrah Design.

Jendela - Classic Skin

2007-09-22T18:14:00.001-11:00

Download : jendela-old.txt

Size : 12 kb

Info : Ada kesempatan tuk membuat skin sederhana. "Less is more", begitu pendapat seorang arsitek terkenal, Van De Rohe.
Skin ini masih dalam format blogger lama (Classic Skin), mudah-mudahan ada kelapangan waktu tuk ngutak-ngatik blogger versi baru ^_^

Link Me Up

2007-09-11T18:24:00.002-11:00

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 :

Lihat tutorial lainnya di Azzahrah Design

Avatar Sizer

2007-09-01T18:23:00.001-11:00

Adakalanya ketika menginginkan sebuah avatar, ukuran gambar terlalu besar. Ukuran gambar harus diperkecil. Ada langkah mudah untuk memperkecil ukuran gambar. Dengan menggunakan sofware Avatar Sizer, pekerjaan dapat lebih mudah.

Aktifkan program ini.
Klik tombol 'Next'
Pilihlan gambar yang ingin diperkecil.
Tentukan ukuran gambar. Ukuran gambar yang disediakan nilai maksimumnya adalah 150x150 px.
Tentukan tingkat kualitas gambar. Semakin tinggi kualitas gambar akan semakin besar ukuran byte-nya.
Klik tombol 'Save'
Tentukan nama file avatar baru dan lokasi penyimpanan.
Done.

Avatar dengan ukuran baru sudah dapat digunakan.

Download di sini

What is an Avatar?
An Avatar is a small image used in Forums, Mobile Phones, Instant Messenger programs (IMs), PDAs etc. to identify yourself or your contacts. In Forums Avatars are usually displayed to the left of your post, directly beneath your Username. In IMs, Mobile Phones, PDAs etc. Avatars are used to show your caller a graphical representation of who they are talking to and/or, as part of the phone book/address entry.

Why would I need an Avatar Sizer?
Avatars should be quite small, check your Forum or IM rules for the exact size. Usually Avatars should be no larger than 150x150 pixels in size and less than 36KB. If you don't already have an image editing program you need Avatar Sizer to resize your image to make it into an Avatar. The Avatar you create with Avatar Sizer can be any size from 1x1 pixels to 150x150 pixels.

Can any image be made into an Avatar?
In theory, Yes! Provided you have the rights to use the image and the image you have is one of the ones Avatar Sizer can handle, you can turn it into an Avatar. So, for example, if you've taken a picture with your digital camera or camera phone, you can turn it into an Avatar.

Read More | Donate and Download

Lihat tutorial lainnya di Azzahrah Design

Link Target Blank

2007-08-28T16:22:00.001-11:00

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

Intermezo (Posisi dalam shalat berjama'ah)

2007-08-05T12:56:00.000-11:00

Dari Nu’man bin Basyir, dia berkata,
“… Dan aku melihat semua laki-laki yang shalat saling mendekatkan antara pundak dengan pundak lainnya dan antara mata kaki dengan mata kaki lainnya.”
[HR Imam Bukhari]

***

Dari Abu Mas’ud al-Anshari berkata,
“Rasulullah shalallahu ‘alaihi wa sallam pernah menyentuh pundak-pundak kami dalam shalat seraya berkata, “Samakanlah dan janganlah kalian berselisih maka akan berselisih pula hati-hati kalian’.”
[HR Imam Muslim]

***

Use of CSS

2007-06-10T17:26:00.001-11:00

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

About CSS

2007-05-22T17:29:00.001-11:00

In web development, Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can be applied to any kind of XML document, including SVG and XUL.

CSS is used by both the authors and readers of web pages to define colors, fonts, layout, and other aspects of document presentation. It is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation (written in CSS). This separation can improve content accessibility, provide more flexibility and control in the specification of presentational characteristics, and reduce complexity and repetition in the structural content. CSS can also allow the same markup page to be presented in different styles for different rendering methods, such as on-screen, in print, by voice (when read out by a speech-based browser or screen reader) and on Braille-based, tactile devices. CSS specifies a priority scheme to determine which style rules apply if more than one rule matches against a particular element. In this so-called cascade, priorities or weights are calculated and assigned to rules, so that the results are predictable.

The CSS specifications are maintained by the World Wide Web Consortium (W3C). Internet media type (MIME type) text/css is registered for use with CSS by RFC 2318 (March 1998).

Lihat tutorial lainnya di Azzahrah Design

Tutorial : 3 Kolom

2007-03-27T21:55:00.001-11:00

Salah satu cara membuat 3 kolom adalah menggunakan tabel dengan 3 kolom. Adapun coding dasarnya adalah:

<table width="100%" border="0" cellspacing="0"
cellpadding="0">
<tr>
<td>Kolom kiri atas</td>
<td>Kolom tengah atas</td>
<td>Kolom kanan atas</td>
</tr>
<tr>
<td>Kolom kiri bawah</td>
<td>Kolom tengah bawah</td>
<td>Kolom kanan bawah</td>
</tr>
</table>

Mari kita telaah baris perbaris.

<table width="100%" border="0" cellspacing="0"
cellpadding="0">

width="100%"
Gunakan ukuran 100% bila ingin membuat tabel memenuhi 1 layar. Atau masukkan angka 770px untuk ukuran kecil.

border="0"
Ukuran border. Jika tidak ingin border terlihat, maka tulislah angka 0. Jika ingin menggunakan border, isilah dengan angka. Lalu, tetapkan warna boder, misalnya bordercolor="#000000" (hitam).

cellspacing="0" cellpadding="0"
Jarak antara kolom, baris, dan tulisan. Jika tidak ingin ada jarak, tetaplah gunakan angka 0 dan isi dengan angka lain bila menginginkan jarak. Idealnya adalah gunakan angka 2 untuk cellpadding.

<td>Kolom kiri atas</td>

Merupakan kolom di bagian kiri barisan atas. Tetapkan ukurannya dengan memasukkan tag width. Boleh menggunakan satuan % (25%) atau menggunakan satuan px (150px). Jika ingin menggunakan background, tambahkan tag background untuk file gambar dan bgcolor untuk warna saja.

<td>Kolom tengah atas</td>

Merupakan kolom bagian tengah barisan atas. Tetapkan ukurannya dengan memasukkan tag width. Boleh menggunakan satuan % (50%) atau menggunakan satuan px (470px). Sama seperti kolom kiri, dapat menggunakan variasi background.

<td>Kolom kanan atas</td>

Merupakan kolom di bagian kanan barisan atas. Tetapkan ukurannya dengan memasukkan tag width. Boleh menggunakan satuan % (25%) atau menggunakan satuan px (150px). Sama seperti kolom kiri, dapat menggunakan variasi background.

Perhatikan bahwa komulatif semua width (kiri, tengah, dan atas) harus sama dengan ukuran table.

Selanjutnya adalah baris berikutnya dengan coding:

<tr>
<td>Kolom kiri bawah</td>
<td>Kolom tengah bawah</td>
<td>Kolom kanan bawah</td>
</tr>

Bila ingin menambahkan baris, gunakanlah coding seperti di atas.

Hasil coding tabel 3 kolom (dan 2 baris) kita menjadi:

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="25%">Kolom kiri atas</td>
<td width="50%">Kolom tengah atas</td>
<td width="25%">Kolom kanan atas</td>
</tr>
<tr>
<td>Kolom kiri bawah</td>
<td>Kolom tengah bawah</td>
<td>Kolom kanan bawah</td>
</tr>
</table>

Atau lihat contoh ini:

Perilaku Seindah Az-Zahrah - coretan harian seorang muslimah -
Link 1 Link 2

Dengan coding :

<table width="400px" border="1" cellpadding="3" cellspacing="0" bordercolor="#E2BBD7">
<tr bgcolor="#E2BBD7">
<td height="70px" colspan="3"><div align="center"><font
color="#813D6E"><strong>Perilaku Seindah Az-Zahrah<br>-
coretan harian seorang muslimah -</strong></font></div></td>
</tr>
<tr>
<td width="25%" valign="top" bgcolor="#EFCAE4">
<a href="#">Link 1</a><br>
<a href="#">Link 2</a> <br>
</td>
<td width="50%" valign="top" bgcolor="#FDF3FA">
<p> </p></td>
<td width="25%" valign="top" bgcolor="#EFCAE4"> </td>
</tr>
</table>

selamat mencoba....

Lihat tutorial lainnya di Azzahrah Design

Blue Sky - Classic Skin

2006-10-16T17:29:00.001-11:00

Download : blue-sky.txt

Size : 8 kb

Referensi Tutorial Photoshop

2006-09-20T18:30:00.001-11:00

Salah satu cara agar bisa membuat web / blog adalah memiliki kemampuan untuk mengolah gambar. Salah satu software untuk mengolah gambar adalah adobe photoshop. Semakin sering menggunakannya dan berlatih maka semakin tinggi kemampuan mengolah data.

Kali ini, aku memberikan beberapa referensi url yang berisi tutorial menggunakannya. Semoga refernsi kecil ini bermanfaat. So, enjoy your image. *apa coba? ^_^

Lihat tutorial lainnya di Azzahrah Design

Tutorial 3 : Membuat Template dengan CSS

2006-09-19T21:33:00.001-11:00

Tutorial sebelumnya mengenai pembuatan template Non CSS. Tutorial kali ini membahas penggunaan CSS atau Cascading Style Sheet. Merupakan pengumpulan data style yang kita gunakan dalam pembuatan template.
Template kita sebelumnya:
-----------------------------------------
<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title><$BlogPageTitle$></title>
<$BlogMetaData$>
</head>
<body style="background:#ADD2FF url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-bgcontent.jpg) repeat-y center; font:12px verdana; color:#01244F;" link="#000000" vlink="#000000" leftmargin="0" topmargin="0" rightmargin="0" marginwidth="0" marginheight="0">
<div align="center">
<div id="content" align="left" style="width:750px; border-top:5px solid #FFE53C">
<div id="header">
<img src="http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-header1.jpg" /><img src="http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-header2.jpg" /><img src="http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-header3.jpg" />
</div>
<div id="sidebar" style="float:left; width:230px; border-top:5px solid #FFE53C; font-size:11px;">
<h2 style="background:#D6E9FD url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-title.jpg) no-repeat 0 0; font-weight:bold; font-size:14px; color:#A93101; padding-left:20px; padding-top:5px; padding-bottom:5px;">...Hari Kemarin</h2>
<ul style="list-style:none; margin-left:0; line-height:1.5em;">
<BloggerPreviousItems>
<li style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-item.gif) no-repeat 0 .45em; padding-left:16px;">
<a href="<$BlogItemPermalinkURL$>"><$BlogPreviousItemTitle$></a>
</li>
</BloggerPreviousItems>
</ul>
<h2 style="background:#D6E9FD url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-title.jpg) no-repeat 0 0; font-weight:bold; font-size:14px; color:#A93101; padding-left:20px; padding-top:5px; padding-bottom:5px;">...Kumpulan Arsip</h2>
<MainOrArchivePage>
<ul style="list-style:none; margin-left:0; line-height:1.5em;">
<BloggerArchives>
<li style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-item.gif) no-repeat 0 .45em; padding-left:16px;">
<a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a>
</li>
</BloggerArchives>
<ArchivePage>
<li style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-item.gif) no-repeat 0 .45em; padding-left:16px;">
<a href="<$BlogURL$>">Current Posts</a>
</li>
</ArchivePage>
</ul>
</MainOrArchivePage>
<$BlogMemberProfile<$BlogMemberProfile<$BlogMemberProfile<$BlogMemberProfile$>
amp;gt;
amp;gt;
<h2 style="background:#D6E9FD url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-title.jpg) no-repeat 0 0; font-weight:bold; font-size:14px; color:#A93101; padding-left:20px; padding-top:5px; padding-bottom:5px;">...Blog Teman</h2>
<ul style="list-style:none; margin-left:0; line-height:1.5em;">
<li style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-item.gif) no-repeat 0 .45em; padding-left:16px;">
<a href="http://riniaisyah.blogspot.com/" target="_blank">rini medan</a>
</li>
<li style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-item.gif) no-repeat 0 .45em; padding-left:16px;">
<a href="http://blogger-skin-resources.blogspot.com/" target="_blank">free skin</a>
</li>
<li style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-item.gif) no-repeat 0 .45em; padding-left:16px;">
<a href="http://moeslimah.blogspot.com/" target="_blank">muslimah</a>
</li>
</ul>
</div>
<div id="main" style="float:right; width:500px; padding:5px;">
<Blogger>
<BlogDateHeader>
<h2 style="text-align:right; font:bold 85% Georgia,Serif; color:#4487CD; text-transform:uppercase; letter-spacing:.3em;">
........... <$BlogDateHeaderDate$> </h2>
</BlogDateHeader>
<BlogItemTitle>
<BlogItemUrl><a href="<$BlogItemUrl$>" title="external link"></BlogItemUrl>
<h3 style="background: url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-title.jpg) no-repeat 0 0; padding:2px 14px 2px 25px; font:bold Georgia,Serif; color:#A93101; border-bottom:1px dashed #000000;"><$BlogItemTitle$></h3>
<BlogItemUrl></a></BlogItemUrl>
</BlogItemTitle>
<p style="background:#D6E9FD url("http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-bgpost.jpg") no-repeat bottom right; line-height:1.5em;">
<$BlogItemBody$>
</p>
<p style="line-height:1.5em; color:#4487CD; text-align:right;">
<em style="float:left; text-align:left;">posted by <$BlogItemAuthorNickname$>@ <a href="<$BlogItemPermalinkUrl$>" title="permanent link"><$BlogItemDateTime$></a>
</em>
<MainOrArchivePage>
<BlogItemCommentsEnabled>
<a style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-comment.gif) no-repeat 0 .3em; padding-left:14px;" href="<$BlogItemPermalinkUrl$>#komentar"><$BlogItemCommentCount$> comments</a>
</BlogItemCommentsEnabled>
</MainOrArchivePage><$BlogItemControl$>
</p>
<ItemPage>
<BlogItemCommentsEnabled><a name="comments"></a>
<h4 style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-comment.gif) no-repeat 0 1em; padding-left:14px; padding-top:10px; font-size:14px; border-top:1px dashed #000000;"><$BlogItemCommentCount$> Comments:</h4>
<dl>
<BlogItemComments>
<dt style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-comment.gif) no-repeat 0 .3em; padding-left:14px;" id="c<$BlogCommentNumber$>"><a name="c<$BlogCommentNumber$>"></a>
At <$BlogCommentDateTime$>, <$BlogCommentAuthor$> said...
</dt>
<dd>
<p>"<$BlogCommentBody$>"</p>
<$BlogCommentDeleteIcon$>
</dd>
</BlogItemComments>
</dl>
<p><$BlogItemCreate$></p>
<p><a href="<$BlogURL$>"><< Home</a></p>
</BlogItemCommentsEnabled>
</ItemPage>
</Blogger>
</div>
<div id="footer" style="clear:both; background:#FFE43B; text-align:center; padding:2px;"><$BlogPageTitle$></div>
</div>
</div>
</body>
</html>
--------------------------------

Kalau diperhatikan, ada banyak tag style bahkan ada yang berulang penggunannya. Dengan menggunakan CSS, penulisan style dapat diringkas.
Tag style CSS diletakkan di antara tag <head>, yaitu:

<head>
<title><$BlogPageTitle$></title>
<$BlogMetaData$>

<style type="text/css">
</style>
</head>

1. Body
<body style="background:#ADD2FF url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-bgcontent.jpg) repeat-y center; font:12px verdana; color:#01244F;" link="#000000" vlink="#000000" leftmargin="0" topmargin="0" rightmargin="0" marginwidth="0" marginheight="0">
Ambil isi dari style dan pindahkan pada CSS. Setiap titik koma (;) dibuat perbaris. Untuk url background diberi tanda petik, menjadi:

<style type="text/css">
body {
background:#ADD2FF url("http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-bgcontent.jpg") repeat-y center;
font:12px verdana;
color:#01244F;
}
</style>

Margin dituliskan dengan: margin:0 auto;.
Padding diatur: padding:0;.
Tentukan align dengan menulis text-align:center;.

Hasilnya menjadi:
<style type="text/css">
body {
background:#ADD2FF url("http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-bgcontent.jpg") repeat-y center;
font:12px verdana;
color:#01244F;
margin:0 auto;
padding:0;
text-align:center;
}
</style>

2. TD

Pada bagian element body CSS, copy font, color, margin, padding, dan text-align kemudian buat element baru CSS yang dinamai TD :

td {
font:12px verdana;
color:#01244F;
margin:0 auto;
padding:0;
text-align:center;
}

3. Link

Pada bagian tag <body> masih terdapat unsur link, yaitu:
<body link="#000000" vlink="#000000">
Link ini, pada CSS dipisahkan menjadi elemen-elemen:

a:link {
color:#000000;
}
a:visited {
color:#000000;
}
a:hover {
color:#01244F;
}

a:link merupakan pengaturan link. a:visited pengaturan link yang sudah pernah dibuka. a:hover pengaturan link yang disorot.

Untuk sementara, CSS yang sudah ada:
------------------------------
<style type="text/css">
body {
background:#ADD2FF url("http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-bgcontent.jpg") repeat-y center;
font:12px verdana;
color:#01244F;
margin:0 auto;
padding:0;
text-align:center;
}
td {
font:12px verdana;
color:#01244F;
margin:0 auto;
padding:0;

text-align:center;
}
a:link {
color:#000000;
}
a:visited {
color:#000000;
}
a:hover {
color:#01244F;
}

</style>
---------------------------

4. Content

<div id="content" align="left" style="width:750px; border-top:5px solid #FFE53C">
Ambil style dan align untuk content, pindahkan pada CSS. Karena content merupakan tag id, maka pada CSS, penamaan content diawali dengan karakter # atau #content.

#content {
width:750px;
border-top:5px solid #FFE53C;
text-align:left;
}

5. Sidebar
<div id="sidebar" style="float:left; width:230px; border-top:5px solid #FFE53C; font-size:11px;">
Ambil style untuk sidebar, pindahkan pada CSS. Karena sidebar merupakan tag id, maka pada CSS, penamaan sidebar diawali dengan karakter # atau #sidebar.

#sidebar {
float:left;
width:230px; >
border-top:5px solid #FFE53C;
font-size:11px;
}

Selanjutnya, atur juga jarak antar baris pada paragraph sidebar, yaitu:

#sidebar p {
line-height:1.5em;
}

6. Sidebar Title
<h2 style="background:#D6E9FD url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-title.jpg) no-repeat 0 0; font-weight:bold; font-size:14px; color:#A93101; padding-left:20px; padding-top:5px; padding-bottom:5px;">...Hari Kemarin</h2>

Ambil style untyk h2, pindahkan pada CSS, namakan sidebar-title (boleh juga diberi lain, misal 'judul-sidebar' dengan aturan dasar tidak boleh ada spasi) dengan tata cara penulisan diawali dengan tanda titik atau .sidebar-title :

.sidebar-title {
background:#D6E9FD url("http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-title.jpg")
no-repeat 0 0;
font-weight:bold;
font-size:14px;
color:#A93101;
padding-left:20px;
padding-top:5px;
padding-bottom:5px;
}

Untuk menggunakan element sidebar title ini pada tag <h2> harus ditambahakan tag class, yaitu :
<h2 class="sidebar-title">...Hari Kemarin</h2>

Hal yang sama berlaku untuk semua judul yang ada di bagian sidebar. Hapus tag style dan tambahkan class-nya. Pada judul 'Kumpulan Arsip' dan 'Blog Teman.

7. Daftar List pada Sidebar (khusus sidebar)
<ul style="list-style:none; margin-left:0; line-height:1.5em;">
Dipindahkan menjadi:

#sidebar ul {
list-style:none;
margin-left:0;
line-height:1.5em;
}

Hapus semua style yang terdapat pada tag <ul>.
<li style="background:url("http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-item.gif") no-repeat 0 .45em; padding-left:16px;">
Pindahkan menjadi:

#sidebar ul li {
background:url("http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-item.gif") no-repeat 0 .45em;
padding-left:16px;
}

Sama seperti tag <ul>, hapus juga semua style yang ada pada tag <li>.

8. Main
<div id="main" style="float:right; width:500px; padding:5px;">
Pindahkan style ke CSS menjadi :

#main {
float:right;
width:500px;
padding:5px;
}

9. Tanggal
<h2 style="text-align:right; font:bold 85% Georgia,Serif; color:#4487CD; text-transform:uppercase; letter-spacing:.3em;">........... <$BlogDateHeaderDate$> </h2>

Ambil style untuk penulisan tanggal dan masukkan ke dalam CSS beri nama date-header :

.date-header {
text-align:right;
font:bold 85% Georgia,Serif;
color:#4487CD;
text-transform:uppercase;
letter-spacing:.3em;
}

Gunakan CSS ini dengan menggunakan class:

<h2 class="date-header">........... <$BlogDateHeaderDate$> </h2>

10. Judul Posting
<h3 style="background: url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-title.jpg) no-repeat 0 0; padding:2px 14px 2px 25px; font:bold Georgia,Serif; color:#A93101; border-bottom:1px dashed #000000;"><$BlogItemTitle$></h3>

Ambil style untuk penulisan judul posting, masukkan ke dalam CSS dan beri nama post-title :

.post-title {
background: url("http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-title.jpg") no-repeat 0 0;
padding:2px 14px 2px 25px;
font:bold Georgia,Serif;
color:#A93101;
border-bottom:1px dashed #000000;
}

Gunakan CSS ini dengan menggunakan class:

<h3 class="post-title"><$BlogItemTitle$></h3>

11. Isi Postingan

<p style="background:#D6E9FD url("http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-bgpost.jpg") no-repeat bottom right; line-height:1.5em;">
<$BlogItemBody$>
</p>

Ambil style ini dan masukkan ke dalam CSS, beri nama post :

.post {
background:#D6E9FD url("http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-bgpost.jpg") no-repeat bottom right;
line-height:1.5em;
}

Gunakan CSS ini dengan menggunakan class:

<p class="post"><$BlogItemBody$></p>

12. Post Footer

<p style="line-height:1.5em; color:#4487CD; text-align:right;">
<em style="float:left; text-align:left;">posted by <$BlogItemAuthorNickname$>

@ <a href="<$BlogItemPermalinkUrl$>" title="permanent link"><$BlogItemDateTime$></a>
</em>

Ada dua style:
Pindahkan style paragraph (p) menjadi:

.post-footer {
line-height:1.5em;
color:#4487CD;
text-align:right;
}
Gunakan CSS ini dengan menggunakan class:
<p class="post-footer>

Pindahkan style em menjadi:
.post-footer em {
float:left;
text-align:left;
}

13. Hyperlink Post Footer Komentar

<a style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-comment.gif) no-repeat 0 .3em; padding-left:14px;" href="<$BlogItemPermalinkUrl$>#komentar"><$BlogItemCommentCount$> comments</a>

Ambil style untuk link komentar, pindahkan ke CSS, beri nama comment-link. Karena ini merupakan link, maka diawali dengan a. :
a.comment-link {
background:url("http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-comment.gif") no-repeat 0 .3em;
padding-left:14px;
}

Gunakan CSS ini dengan menggunakan class:
<a class="comment-link" href="<$BlogItemPermalinkUrl$>#komentar"><$BlogItemCommentCount$> comments</a>

NOTE !
Untuk penggunanan IE5/Mac, CSS yang digunakan:

html>body a.comment-link {
background:url("http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-comment.gif") no-repeat 0 .3em;
padding-left:14px;
}

Sehingga kedua CSS ini dituliskan / digunakan.

14. Judul Komentar

<h4 style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-comment.gif) no-repeat 0 1em; padding-left:14px; padding-top:10px; font-size:14px; border-top:1px dashed #000000;"><$BlogItemCommentCount$> Comments:</h4>

Ambil style-nya, pindahkan ke CSS, beri nama comment-title :
.comment-title {
background:url("http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-comment.gif") no-repeat 0 1em;
padding-left:14px;
padding-top:10px;
font-size:14px;
border-top:1px dashed #000000;
}

Gunakan CSS dengan menggunakan class :
<h4 class="comment-title"><$BlogItemCommentCount$> Comments:</h4>

15. Komentar

<dt style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-comment.gif) no-repeat 0 .3em; padding-left:14px;" id="c<$BlogCommentNumber$>">
Ambil style, pindahkan ke CSS beri nama .comment-poster :
.comment-poster {
background:url("http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-comment.gif") no-repeat 0 .3em;
padding-left:14px;
}

Aktifkan CSS ini dengan menggunakan class :
<dt class="comment-poster" id="c<$BlogCommentNumber$>">

16. Footer
<div id="footer" style="clear:both; background:#FFE43B; text-align:center; padding:2px;"><$BlogPageTitle$></div>
Ambil style, pindahkan ke CSS, beri nama .footer :
#footer {
clear:both;
background:#FFE43B;
text-align:center;
padding:2px;
}

17. Blockquote

Blockquote atau kutipan bisa kita disain, misalnya:
blockquote {
margin:5px 90px 5px 5px;
border:1px dashed #01244F;
background:#CAD8E6;
border-width:1px 0;
padding:5px 15px;
font-style:italic;
}

18. Border untuk Gambar

Terakhir, bila ingin, kita dapat mengatur border gambar. Kalau ingin semua gambar pada #main memiliki border, maka element CSS yang digunakan adalah #main img. Namun, bila yang ingin diberi border hanya gambar-gambar postingan, maka element CSS nya .post img.
Misalnya, aku ingin memberi border untuk tiap gambar yang kuposting, maka element CSS yang kugunakan:

.post img {
margin:0 0 5px 0;
padding:3px;
border:1px solid #C86FC7;
}

-- Selesai --

Lihat tutorial lainnya di Azzahrah Design

Feminin

2006-09-15T18:51:00.001-11:00

[Click on image]



Ini skin diinspirasi oleh seorang sahabat, Nora. Untuk sementara, skin ini tidak untuk umum. Alasan utamanya adalah masih adanya tulisan nama sabahatku itu di sudut kiri atas.

Si Imoet - Classic Skin

2006-09-12T17:21:00.001-11:00

Download : imoet-old.txt

Size : 9 kb

Info : Diawali dengan permintaan si imoet Zaa. Akhirnya muncullah skin model ini.

Car - Classic Skin

2006-09-07T16:12:00.001-11:00

Download : car-old.txt

Size : 20 kb

Sun Flowers - Classic Skin

2006-09-05T16:33:00.004-11:00

View : Live Demo

Download : sunflower.txt

Info :
Skin permintaan Diah. Ngakunya dia suka bunga matahari.... sama dung

Lihat Template lainnya di Azzahrah Design

Oxalis - Classic Skin

2006-09-03T18:27:00.001-11:00

Download : oxalis-old.txt

Size : 22 kb

SMile Maker

2006-08-30T17:44:00.001-11:00

[klik pada gambar untuk memperbesar]



Ket:
Skin khusus untuk my honey bunny, miling, eh Hnim. Kalau dia sudah mengganti skin ini dari blognya maka skin ini pun dapat berubah menjadi umum. ^_^

Tutorial 2 : Membuat Template Non CSS

2006-08-27T18:46:00.001-11:00

Sekarang kita akan membuat sebuah template sederhana. Template ini tidak menggunakan style CSS.
Agar tidak mengganggu blog yang sedang dipakai dan untuk memudahkan proses belajar membuat template sederhana, buatlah blog khusus untuk ini.
Hapus semua isi template yang ada. Copy HTML pokok di bawah ini dan paste ke dalam template yang sudah kosong:
--------------------------------------------------------
<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title></title></head>
<body></body>
</html>
-------------------------------------------------------

Ide disain aku kali ini adalah sebuah blog yang isinya berada di tengah dan memiliki border di tepinya. Gambar utama yang menunjang adalah gambar untuk header dan sebuah gambar untuk background. Ditambah beberapa gambar tambahan lainnya.

1. Pengaturan <head>

Tambahkan kode blogger untuk title page:
<title><$BlogPageTitle$></title>

Tambahkan kode <$BlogMetaData$> sebelum
</head>.

Hasil sementara menjadi:

------------------------------------------------------
<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title><$BlogPageTitle$></title>
<$BlogMetaData$>
</head>
<body></body>
</html>
--------------------------------------------------------

2. Pengaturan <body>

Set background template

Dapat menggunakan warna, image atau keduanya. Pada tutorial sebelumnya sudah diungkapkan bagaimana penggunaan background.

Untuk tutorial kali ini, aku menggunakan background warna biru muda dengan kode #ADD2FF dan sebuah image yang sudah diupload di http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-bgcontent.jpg.
Background image ini dibuat berulang-ulang ke bawah (repeat-y) dan diletakkan di bagian tengah dari monitor (center).

Pengaturan background dilakukan di tag <body>:

Set warna font text, jenis font, dan ukuran

Untuk tutorial ini, aku menggunakan verdana dengan ukuran 12px dan warna biru tua #01244F.
Pengaturan font juga diletakkan di dalam tag <style> yang ada di dalam tag <body>.

Hasil penambahan menjadi:

<body style="background:#ADD2FF url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-bgcontent.jpg) repeat-y center; font:12px verdana; color:#01244F;">

Tentukan warna untuk link dan visited link

Visited link maksudnya adalah link yang sudah pernah di-klik, sudah pernah dilihat. Untuk kali ini, aku menggunakan link yang berwarna hitam: link="#000000" vlink="#000000".

Hasil penambahannya:

<body style="background:#ADD2FF url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-bgcontent.jpg) repeat-y center; font:12px verdana; color:#01244F;" link="#000000" vlink="#000000">

Seting margin

Margin mengatur posisi isi keseluruhan template dari bagian atas, kiri, kanan, dan bawah. Sama seperti saat menulis di word.

Kali ini aku memakai keseluruhan monitor, ini berarti margin keseluruhannya adalah 0 atau leftmargin="0" rightmargin="0" marginwidth="0" marginheight="0".
Ditambahkan di tag <body>

Untuk margin bagian atas (margin-top) ada sedikit pengecualian. Pengaturan margin ini ditempatkan di bagian style. Agar blog kita tepat berada di bawah nav bar blogger, maka titk awal dari blog dimulai dari angka di atas 0, misalnya 33px (margin-top:33px;).

Hasil akhir untuk tag <body> menjadi:

Hasil sementara keseluruhan template:

-------------------------------------------------------
<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title><$BlogPageTitle$></title>
<$BlogMetaData$>
</head>
<body style="margin-top:33px; background:#ADD2FF url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-bgcontent.jpg) repeat-y center; font:12px verdana; color:#01244F;" link="#000000" vlink="#000000" leftmargin="0" rightmargin="0" marginwidth="0" marginheight="0">
</body>
</html>
-------------------------------------------------------

3. Tahap selanjutnya adalah membuat bentukkan layout, pembagian template.

Kali ini, template yang ingin aku buat terdiri dari 4 bagian, yaitu header, sidebar, main, dan footer. Karena itu kita menggunakan 4 tag <div>. Ditambah 2 tag <div> induk. Yaitu 1 <div> untuk mengatur agar posisi isi blog berada di tengah dan 1 <div> menjadi content. Kesemuanyanya menjadi 6 tag <div>. Tag <div> ini diletakkan di antara tag <body> dan </body>.

<div> utama

Yang mengatur posisi isi blog. Kita akan membuat isi blog berada di tengah monitor, sehingga align diposisikan center atau kodenya:

<div align="center"></div>

<div> content

Penulisannya: <div id="content"></div>

Tag <div id="content"> ini akan kita atur posisinya, ukuran, background, dan bordernya. Sebelumnya kita telah membuat posisi isi blog rata tengah. Kita akan mengembalikan posisi blog rata kiri sesuai dengan arah text dari kiri ke kanan dan kodenya:

<div id="content" align="left"></div>

Kode sementara untuk bagian <body> adalah:

-------------------------------------------------------
<body style="margin-top:33px; background:#ADD2FF url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-bgcontent.jpg) repeat-y center; font:12px verdana; color:#01244F;" link="#000000" vlink="#000000" leftmargin="0" rightmargin="0" marginwidth="0" marginheight="0">
<div align="center">
<div id="content" align="left"> </div>
</div>
</body>
-------------------------------------------------------

Selanjutnya adalah tahapan memberi 'sentuhan' style untuk content. Sentuhannya berupa ukuran atau kreasi-kreasi lainnya. Ide awalnya adalah sebuah blog yang berada di tengah. Untuk itu, ukuran lebar yang sesuai adalah sebesar 750px (width:750px). Selanjutnya adalah border. Dengan melihat image yang dipakai, telah ada border di tepinya, namun tidak ada di tepi atasnya. Berarti kita menambahkan border tepi atas (border-top) dengan warna kuning (#FFE53C) dan bentuk border solid.

Kodenya:

<div id="content" align="left" style="width:750px; border-top:5px solid #FFE53C;">

4. Header

Header ( <div id="header"></div> ) ini diletakkan di dalam tag content, yaitu:

Di dalam header ini kita akan meletakkan image. Ambil image yang ingin dijadikan header. Sedikit tips dariku. Sebelum membuat template coba cari warna yang kira-kira senada dengan header dan ukurannya juga sesuai dengan lebar content (750px). Kalau image memilki kb yang tinggi (lebih dari 60kb) lebih baik, image dibagi atas dua bagian atau lebih agar proses loading gambar lebih cepat.

Template kali ini, aku juga membagi image atas 3 bagian:

http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-header1.jpg
http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-header2.jpg
http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-header3.jpg

Kode untuk menampilkan image:

<img src="http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-header1.jpg"/>
<img src="http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-header2.jpg"/>
<img src="http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-header3.jpg"/>

Note. jangan ada jarak diantara image seperti spasi, dll.

Agar image tepat berada di posisi atas, maka margin haru diatur, dibuat di angka 0 (style="margin:0;")

Hasil sementara untuk content:

-------------------------------------------------------
<div id="content" align="left" style="width:750px; border-top:5px solid #FFE53C;">
<div id="header" style="margin:0;">
<img src="http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-header1.jpg"/>
<img src="http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-header2.jpg"/>
<img src="http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-header3.jpg"/>
</div>
</div>
--------------------------------------------------------

*Coba lihat dulu hasilnya, biar lebih semangat .....
Eh, kayak skin siapa ya ....:D

5. Sidebar

Sidebar ( <div id="sidebar"> </div> ) ini diletakkan masih di dalam content dan setelah header:

Mendisain sidebar

Tahap selanjutnya adalah mendisain bagian sidebar, seperti memberi ukuran lebar, background, dan lainnya. Untuk disainku kali ini, background yang diletakkan pada <body> sudah termasuk background untuk sidebar.

Hal yang penting adalah membuat letak sidebar agar berada di kiri, yaitu dengan menentukkan float (float:left;)

Lebar sidebar harus ditentukan. Aku membuat sidebar berukuran 230px (width:230px;)

Sama seperti pada content, sidebar aku disain juga mempunyai border pada tepi atasnya (border-top:5px solid #FFE53C;)

Tentukan ukuran dan text font. Aku menginginkan ukuran text pada sidebar lebih kecil (font-size:11px;)

Kode style untuk sidebar:

Mengisi sidebar

Kita sudah sampai pada tahap mengisi sidebar. Sidebar ini umumnya berisi daftar postingan sebelumnya, arsip postingan, dan profil pemilik blog.

Sebelum mengisi, kita tentukan dulu style untuk tiap judul bagian isi sidebar. Aku menggunakan background image untuk judul (background:#D6E9FD url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-title.jpg) no-repeat 0 0;).

Untuk font juga ada perubahan, yaitu (: font-weight:bold; font-size:14px; color:#A93101; ). Penambahan style lainnya adalah dengan mengatur ukuran kotak untuk judul serta posisi text digeser ke kanan agar tidak menimpa image background. Pengaturannya dilakukan dengan menambah padding:

padding-left:20px; padding-top:5px; padding-bottom:5px;

Mari kita langsung gunakan. Bila telah dilihat hasilnya, bisa kita adakan perubahan kecil untuk membuatnya lebih menarik.

Yang pertama, kita memunculkan bagian Recent Posts.

Kode dasar untuk Recent Posts adalah:

Kita tambahkan judul di atasnya, "...Hari Kemarin" dengan menggunakan tag <h2> yang telah kita rancang sebelumnya, menjadi:

<div id="sidebar" style="float:left; width:230px; border-top:5px solid #FFE53C; font-size:11px;">
<h2 style="background:#D6E9FD url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-title.jpg) no-repeat 0 0; font-weight:bold; font-size:14px; color:#A93101; padding-left:20px; padding-top:5px; padding-bottom:5px;">...Hari Kemarin</h2>
<ul>
<BloggerPreviousItems>
<li><a href="<$BlogItemPermalinkURL$>"><$BlogPreviousItemTitle$></a></li>
</BloggerPreviousItems>
</ul>
</div>

Lihat dulu deh hasilnya. Listnya masih menggunakan bulatan kecil :D. Mau diganti? Bisa aja, asal dah ada image yang cucok tuk itu. Aku menggunakan image ini,
http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-item.gif.

Pertama yang kita atur adalah bagian tag <ul>. Non aktifkan dulu style list (list-style:none;) Text terlalu ke kanan, sehingga kita atur margin-leftnya lebih ke kiri (margin-left:0;). Jarak antara list agar tidak terlalu rapat, kita atur ketinggiannya (line-height:1.5em;).

Tag <ul> menjadi:

<ul style="list-style:none; margin-left:0; line-height:1.5em;">

Lanjut untuk mendisain bagian tag <li>. Di tag inilah image background untuk list diletakkan. Posisi tepat dari image juga harus diatur (background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-item.gif)
no-repeat 0 .45em;) Posisi text digeser ke kanan agar tidak menimpa gambar background dengan menggunakan padding-left (padding-left:16px;).

Hasil dari tag <li>:

<li style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-item.gif)
no-repeat 0 .45em; padding-left:16px;">

Hasil kode untuk menampilkan Recent Posts:

--------------------------------------------------------
<div id="sidebar" style="float:left; width:230px; border-top:5px solid #FFE53C; font-size:11px;">
<h2 style="background:#D6E9FD url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-title.jpg) no-repeat 0 0; font-weight:bold; font-size:14px; color:#A93101; padding-left:20px; padding-top:5px; padding-bottom:5px;">...Hari Kemarin</h2>
<ul style="list-style:none; margin-left:0; line-height:1.5em;">
<BloggerPreviousItems>
<li style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-item.gif) no-repeat 0 .45em; padding-left:16px;">
<a href="<$BlogItemPermalinkURL$>"><$BlogPreviousItemTitle$></a>
</li>
</BloggerPreviousItems>
</ul>
</div>
-------------------------------------------------------

Archieves

Kode dasar untuk archieves adalah:

<MainOrArchivePage>
<ul>
<BloggerArchives><li><a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a></li></BloggerArchives>
<ArchivePage><li><a href="<$BlogURL$>">Current Posts</a></li></ArchivePage>
</ul>
</MainOrArchivePage>

Kemudian diberi penambahan title "...Kumpulan Arsip" gambar untuk tiap list-nya. Sama seperti kode pada Recent Posts, yang diubah pada tag <h2> <ul> dan <li>.

Kode keseluruhan untuk Archieves menjadi:

--------------------------------------------------------
<h2 style="background:#D6E9FD url(white-love/images/white-love-title.jpg) no-repeat 0 0; font-weight:bold; font-size:14px; color:#A93101; padding-left:20px; padding-top:5px; padding-bottom:5px;">...Kumpulan Arsip</h2>
<MainOrArchivePage>
<ul style="list-style:none; margin-left:0; line-height:1.5em;">
<BloggerArchives>
<li style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-item.gif) no-repeat 0 .45em; padding-left:16px;">
<a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a>
</li>
</BloggerArchives>
<ArchivePage>
<li style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-item.gif) no-repeat 0 .45em; padding-left:16px;">
<a href="<$BlogURL$>">Current Posts</a>
</li>
</ArchivePage>
</ul>
</MainOrArchivePage>
-------------------------------------------------------

Selanjutnya, bisa kita tambahkan kode untuk profil dengan kode:

<$BlogMemberProfile$>

Begitu juga dengan aksesoris-aksesoris lainnya yang ingin diletakkan di bagian sidebar ini, seperti daftar list blog teman:

<h2 style="background:#D6E9FD url(white-love/images/white-love-title.jpg) no-repeat 0 0 font-weight:bold; font-size:14px; color:#A93101; padding-left:20px; padding-top:5px; padding-bottom:5px;">...Blog Teman</h2>
<ul style="list-style:none; margin-left:0; line-height:1.5em;">
<li style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-item.gif) no-repeat 0 .45em; padding-left:16px;">
<a href="http://riniaisyah.blogspot.com/" target="_blank">rini medan</a>
</li>
<li style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-item.gif) no-repeat 0 .45em; padding-left:16px;">
<a href="http://blogger-skin-resources.blogspot.com/" target="_blank">free skin </a>
</li>
<li style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-item.gif) no-repeat 0 .45em; padding-left:16px;"> <a href="http://moeslimah.blogspot.com/" target="_blank">muslimah</a>
</li>
</ul>

Kode akhir untuk sidebar kita adalah:

---------------------------------------------------------
<div id="sidebar" style="float:left; width:230px; border-top:5px solid #FFE53C; font-size:11px;">

<h2 style="background:#D6E9FD url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-title.jpg) no-repeat 0 0; font-weight:bold; font-size:14px; color:#A93101; padding-left:20px; padding-top:5px; padding-bottom:5px;">...Hari Kemarin</h2>
<ul style="list-style:none; margin-left:0; line-height:1.5em;">

<BloggerPreviousItems>

<li style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-item.gif) no-repeat 0 .45em; padding-left:16px;">
<a href="<$BlogItemPermalinkURL$>"><$BlogPreviousItemTitle$></a>
</li>
</BloggerPreviousItems>
</ul>

<h2 style="background:#D6E9FD url(white-love/images/white-love-title.jpg) no-repeat 0 0; font-weight:bold; font-size:14px; color:#A93101; padding-left:20px; padding-top:5px; padding-bottom:5px;">...Kumpulan Arsip</h2>
<MainOrArchivePage>
<ul style="list-style:none; margin-left:0; line-height:1.5em;">
<BloggerArchives>
<li style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-item.gif) no-repeat 0 .45em; padding-left:16px;">
<a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a>
</li>
</BloggerArchives>
<ArchivePage>
<li style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-item.gif)
no-repeat 0 .45em; padding-left:16px;">
<a href="<$BlogURL$>">Current Posts</a>
</li>
</ArchivePage>
</ul>
</MainOrArchivePage>

<$BlogMemberProfile$>

<h2 style="background:#D6E9FD url(white-love/images/white-love-title.jpg) no-repeat 0 0; font-weight:bold; font-size:14px; color:#A93101; padding-left:20px; padding-top:5px; padding-bottom:5px;">...Blog Teman</h2>
<ul style="list-style:none; margin-left:0; line-height:1.5em;">
<li style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-item.gif) no-repeat 0 .45em; padding-left:16px;">
<a href="http://riniaisyah.blogspot.com/" target="_blank">rini medan</a>
</li>
<li style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-item.gif) no-repeat 0 .45em; padding-left:16px;">
<a href="http://blogger-skin-resources.blogspot.com/" target="_blank">free skin</a>
</li>
<li style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-item.gif) no-repeat 0 .45em; padding-left:16px;">
<a href="http://moeslimah.blogspot.com/" target="_blank">muslimah</a>
</li>
</ul>

</div>

*Ribet ya .... ^_* Tarik napas dulu deh.
Atau ambil minum.. gleg glek, yang puasa jangan minum ya. Yang puasa, semogapuasa diterima Allah SWT, semangat !!
Ayo lanjut lagi . .. .....

6. Main

<div id="main"></div>. Main masih berada di dalam content. Kita letakkan setelah sidebar.

Main berada di sisi kanan, gunakan float (float:right;).
Lebarnya berukuran 500px (width:500px;).
Warna background sama dengan warna content. Karena main masih berada di dalam content, maka background tak perlu lagi ditulis ulang. Padding juga ditentukan agar isi blog rapih dengan semua ukuran padding atas, bawah, kanan, dan kiri sama yaitu 5px (padding:5px;).

Kode lengkapnya:

<div id="main" style="float:right; width:500px; padding:5px;"></div>

Mengisi Main

Pada tutorial sebelumnya, sudah diterangkan bagaimana trik mengisi main ini. Main ini berisi postingan. Terdapat 5 bagian postingan, yaitu tanggal, judul, isi, footer, dan komentar. Bagian posting ini diawali dengan tag <Blogger>.

Hasil sementara untuk bagian main:

--------------------------------------------------------
<div id="main" style="float:right; width:500px; padding:5px;">
<Blogger>
</Blogger>
</div>
-------------------------------------------------------

Tanggal
Kode dasar untuk menampilkan tanggal adalah:
<BlogDateHeader><h2><$BlogDateHeaderDate$></h2></BlogDateHeader>

Pada bagian ini, aku disain menjadi:

<BlogDateHeader>
<h2 style="text-align:right; font:bold 85% Georgia,Serif; color:#4487CD; text-transform:uppercase; letter-spacing:.3em;"> ...........|| <$BlogDateHeaderDate$> ||</h2>
</BlogDateHeader>

Keterangannya:
- text-align:right; posisi text diawali dari sisi kanan
- font:bold 85% Georgia,Serif; font bold denganukuran 85% dari 12 px dan jenis font adalah Georgia,serif.
- color:#4487CD; warna font biru muda.
- text-transform:uppercase; huruf kapital, semuanya.
- letter-spacing:.3em; jarak antar huruf.

Judul Postingan

<BlogItemTitle>
<BlogItemUrl><a href="<$BlogItemUrl$>" title="external link"></BlogItemUrl>
<h3><$BlogItemTitle$></h3>
<BlogItemUrl></a></BlogItemUrl>
</BlogItemTitle>

Pada bagian ini, ideku:

<BlogItemTitle>
<BlogItemUrl><a href="<$BlogItemUrl$>" title="external link"></BlogItemUrl>
<h3 style="background: url(white-love/images/white-love-title.jpg) no-repeat 0 0; padding:2px 14px 2px 25px; font:bold Georgia,Serif; color:#A93101; border-bottom:1px dashed #000000;"><$BlogItemTitle$></h3>
<BlogItemUrl></a></BlogItemUrl>
</BlogItemTitle>

Keterangannya:
- background: url(white-love/images/white-love-title.jpg) no-repeat 0 0; background yang tak diulang dengan posisi image di titik 0 dan 0
- padding:2px 14px 2px 25px; padding tulisan, atas 2px, kanan 14px, bawah 2px, dan kiri 25px. Coba utak atik angka ini, disesuaikan dengan selera aja.
- font:bold Georgia,Serif; font bold dengan tipe Georgia,serif
- color:#A93101; warna font, sama dengan judul pada sidebar.
- bottom:1px dashed #000000; merupakan garis bawah, aksen saja.

Isi.
Kodenya:
<p>
<$BlogItemBody$>
</p>

Kreasinya:
<p style="background:#D6E9FD url("http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-bgpost.jpg") no-repeat bottom right; line-height:1.5em;">
<$BlogItemBody$>
</p>

Keterangannya:
- background:#D6E9FD url("http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-bgpost.jpg") no-repeat bottom right; menggunakan background warna dan image. image tidak berulang dan posisinya ditentukan selalu berada di sisi bawah dan samping kanan untuk setiap postingan.
- line-height:1.5em; jarak antara baris text.

Footer.
Kode aslinya:
<p>
<em>posted by <$BlogItemAuthorNickname$>
@ <a href="<$BlogItemPermalinkUrl$>" title="permanent link"><$BlogItemDateTime$></a>
</em>
<MainOrArchivePage>
<BlogItemCommentsEnabled>
<a href="<$BlogItemPermalinkUrl$>#komentar"><$BlogItemCommentCount$> comments</a>
</BlogItemCommentsEnabled>
</MainOrArchivePage><$BlogItemControl$>
</p>

Yang berwarna merah adalah tag yang bisa kita beri style. Gini nih idenya:

<p style="line-height:1.5em; color:#4487CD; text-align:right;">
<em style="float:left; text-align:left;">posted by <$BlogItemAuthorNickname$>
@ <a href="<$BlogItemPermalinkUrl$>" title="permanent link"><$BlogItemDateTime$></a>
</em>
<MainOrArchivePage>
<BlogItemCommentsEnabled>
<a style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-comment.gif) no-repeat 0 .3em; padding-left:14px;" href="<$BlogItemPermalinkUrl$>#komentar"><$BlogItemCommentCount$> comments</a>
</BlogItemCommentsEnabled>
</MainOrArchivePage><$BlogItemControl$>
</p>

Keterangannya:
<p style="line-height:1.5em; color:#4487CD; text-align:right;"> :
- tag paragraph <p> diberi style
- line-height:1.5em; jarak antara baris text besarnya 1.5em
- color:#4487CD; warna font
- text-align:right; posisi text diawali dari kanan ke kiri

<em style="float:left; text-align:left;"> :
- tag untuk mengaktifkan tulisan miring (italic) yaitu <em> juga diberi style. Berisi nama yang membuat postingan dan waktunya dibuat huruf miring.
- float:left; nama dan waktu posting dibuat di sisi kiri.
- text-align:left; begitu juga dengan arah tulisan dari kiri ke kanan.

<a style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-comment.gif) no-repeat 0 .3em; padding-left:14px;" href="<$BlogItemPermalinkUrl$>#komentar"> :
- background:url(white-love/images/white-love-comment.gif) no-repeat 0 .3em; untuk memberi image pada tulisan link komentar.
- padding-left:14px; menggeser text ke kanan agar tidak menimpa image.

Komentar

<ItemPage>
<div id="comments">
<BlogItemCommentsEnabled><a name="comments"></a>
<h4><$BlogItemCommentCount$> Comments:</h4>
<dl>
<BlogItemComments>
<dt id="c<$BlogCommentNumber$>"><a name="c<$BlogCommentNumber$>"></a> At <$BlogCommentDateTime$>, <$BlogCommentAuthor$> said...
</dt>
<dd>
<p><$BlogCommentBody$></p>
<$BlogCommentDeleteIcon$>
</dd>
</BlogItemComments>
</dl>
<p><$BlogItemCreate$></p>
<p><a href="<$BlogURL$>"><< Home</a></p>
</BlogItemCommentsEnabled>
</div>
</ItemPage>

Yang diberi warna merah adalah tag yang dapat diberi style. Hasilnya gini nih:

<ItemPage>
<BlogItemCommentsEnabled><a name="comments"></a>
<h4 style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-comment.gif) no-repeat 0 1em; padding-left:14px; padding-top:10px; font-size:14px; border-top:1px dashed #000000;"><$BlogItemCommentCount$> Comments:</h4>
<dl>
<BlogItemComments>
<dt style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-comment.gif) no-repeat 0 .3em; padding-left:14px;" id="c<$BlogCommentNumber$>"><a name="c<$BlogCommentNumber$>"></a>
At <$BlogCommentDateTime$>, <$BlogCommentAuthor$> said...
</dt>
<dd>
<p>"<$BlogCommentBody$>"</p>
<$BlogCommentDeleteIcon$>
</dd>
</BlogItemComments>
</dl>
<p><$BlogItemCreate$></p>
<p><a href="<$BlogURL$>"><< Home</a></p>
</BlogItemCommentsEnabled>
</ItemPage>

Keterangannya:

<h4 style="background:url(white-love/images/white-love-comment.gif) no-repeat 0 1em; padding-left:14px; padding-top:10px; font-size:14px; border-top:1px dashed #000000;"> :
- diberi image background, ukuran font diperbesar, padding diberi ukuran serta diberi border di bagian atas dengan tipe border dashed atau garis-garis.

<dt style="background:url(white-love/images/white-love-comment.gif) no-repeat 0 .3em; padding-left:14px;" :
- setiap komentar diberi image dan text digeser ke kanan dengan menggunakan padding.

<p>"<$BlogCommentBody$>"</p> :
- hanya menambahkan tanda petik untuk setiap isi komentar.

Hasil akhir kode untuk main adalah:

------------------------------------------------------
<div id="main" style="float:right;
width:500px; padding:5px;">
<Blogger>

<BlogItemTitle>
<BlogItemUrl><a href="<$BlogItemUrl$>" title="external link"></BlogItemUrl>
<h3 style="background: url(white-love/images/white-love-title.jpg) no-repeat 0 0; padding:2px 14px 2px 25px; font:bold Georgia,Serif; color:#A93101; border-bottom:1px dashed #000000;"><$BlogItemTitle$></h3>
<BlogItemUrl></a></BlogItemUrl>
</BlogItemTitle>

<p style="line-height:1.5em; color:#4487CD; text-align:right;">
<em style="float:left; text-align:left;">posted by <$BlogItemAuthorNickname$>
@ <a href="<$BlogItemPermalinkUrl$>" title="permanent link"><$BlogItemDateTime$></a>
</em>
<MainOrArchivePage>
<BlogItemCommentsEnabled>
<a style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-comment.gif) no-repeat 0 .3em; padding-left:14px;" href="<$BlogItemPermalinkUrl$>#komentar"><$BlogItemCommentCount$> comments</a>
</BlogItemCommentsEnabled>
</MainOrArchivePage><$BlogItemControl$>
</p>

<ItemPage>
<BlogItemCommentsEnabled><a name="comments"></a>
<h4 style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-comment.gif) no-repeat 0 1em; padding-left:14px; padding-top:10px; font-size:14px; border-top:1px dashed #000000;"><$BlogItemCommentCount$> Comments:</h4>
<dl>
<BlogItemComments>
<dt style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-comment.gif) no-repeat 0 .3em; padding-left:14px;" id="c<$BlogCommentNumber$>"><a name="c<$BlogCommentNumber$>"></a>
At <$BlogCommentDateTime$>, <$BlogCommentAuthor$> said...
</dt>
<dd>
<p>"<$BlogCommentBody$>"</p>
<$BlogCommentDeleteIcon$>
</dd>
</BlogItemComments>
</dl>
<p><$BlogItemCreate$></p>
<p><a href="<$BlogURL$>"><< Home</a></p>
</BlogItemCommentsEnabled>
</ItemPage>

</Blogger>

</div>
-------------------------------------------------------

7. Footer

<div id="footer"></div>
Merupakan bagian yang berisi tulisan penutupan di paling bawah dari template. Ideku adalah membuatnya berwarna kuning dan berisi tulisan yang sesuai dengan title dari blog. Isi tulisannya adalah sama denga kode title (<$BlogPageTitle$>):

Selanjutnya mengatur style.
- menonaktifkan float left dan right (clear:both;)
- background berwarna kuning (background:#FFE43B;)
- posisi text rata tengah (text-align:center;)
- atur ukuran padding (padding:2px;)

Kode untuk footer:

8. Hasil akhir template:

------------------------------------------------

<div align="center">

<h2 style="background:#D6E9FD url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-title.jpg) no-repeat 0 0; font-weight:bold; font-size:14px; color:#A93101; padding-left:20px;padding-top:5px; padding-bottom:5px;">...Hari Kemarin</h2>
<ul style="list-style:none; margin-left:0; line-height:1.5em;">
<BloggerPreviousItems>
<li style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-item.gif) no-repeat 0 .45em; padding-left:16px;">
<a href="<$BlogItemPermalinkURL$>"><$BlogPreviousItemTitle$></a>
</li>
</BloggerPreviousItems>
</ul>

<h2 style="background:#D6E9FD url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-title.jpg) no-repeat 0 0; font-weight:bold; font-size:14px; color:#A93101; padding-left:20px; padding-top:5px; padding-bottom:5px;">...Kumpulan Arsip</h2>
<MainOrArchivePage>
<ul style="list-style:none; margin-left:0; line-height:1.5em;">
<BloggerArchives>
<li style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-item.gif) no-repeat 0 .45em; padding-left:16px;">
<a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a>
</li>
</BloggerArchives>
<ArchivePage>
<li style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-item.gif) no-repeat 0 .45em; padding-left:16px;">
<a href="<$BlogURL$>">Current Posts</a>
</li>
</ArchivePage>
</ul>
</MainOrArchivePage>

<$BlogMemberProfile$>

<h2 style="background:#D6E9FD url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-title.jpg) no-repeat 0 0; font-weight:bold; font-size:14px; color:#A93101; padding-left:20px; padding-top:5px; padding-bottom:5px;">...Blog Teman</h2>
<ul style="list-style:none; margin-left:0; line-height:1.5em;">
<li style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-item.gif) no-repeat 0 .45em; padding-left:16px;">
<a href="http://riniaisyah.blogspot.com/" target="_blank">rinimedan</a>
</li>
<li style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-item.gif) no-repeat 0 .45em; padding-left:16px;">
<a href="http://blogger-skin-resources.blogspot.com/" target="_blank">free skin</a>
</li>
<li style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-item.gif) no-repeat 0 .45em; padding-left:16px;">
<a href="http://moeslimah.blogspot.com/" target="_blank">muslimah</a>
</li>
</ul>

</div>

<BlogDateHeader>
<h2 style="text-align:right; font:bold 85% Georgia,Serif; color:#4487CD; text-transform:uppercase; letter-spacing:.3em;"> ...........|| <$BlogDateHeaderDate$> ||</h2>
</BlogDateHeader>

<BlogItemTitle>
<BlogItemUrl><a href="<$BlogItemUrl$>" title="external link"></BlogItemUrl>
<h3 style="background: url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-title.jpg) no-repeat 0 0; padding:2px 14px 2px 25px; font:bold Georgia,Serif; color:#A93101; border-bottom:1px dashed #000000;"><$BlogItemTitle$></h3>
<BlogItemUrl></a></BlogItemUrl>
</BlogItemTitle>

<p style="line-height:1.5em; color:#4487CD; text-align:right;">
<em style="float:left; text-align:left;">posted by <$BlogItemAuthorNickname$>
@ <a href="<$BlogItemPermalinkUrl$>" title="permanent link"><$BlogItemDateTime$></a>
</em>
<MainOrArchivePage>
<BlogItemCommentsEnabled>
<a style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-comment.gif) no-repeat 0 .3em; padding-left:14px;" href="<$BlogItemPermalinkUrl$>#komentar"><$BlogItemCommentCount$> comments</a>
</BlogItemCommentsEnabled>
</MainOrArchivePage><$BlogItemControl$>
</p>

<ItemPage>
<BlogItemCommentsEnabled><a name="comments"></a>
<h4 style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-comment.gif) no-repeat 0 1em; padding-left:14px; padding-top:10px; font-size:14px; border-top:1px dashed #000000;"><$BlogItemCommentCount$> Comments:</h4>
<dl>
<BlogItemComments>
<dt style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-comment.gif) no-repeat 0 .3em; padding-left:14px;" id="c<$BlogCommentNumber$>"><a name="c<$BlogCommentNumber$>"></a>
At <$BlogCommentDateTime$>, <$BlogCommentAuthor$> said...
</dt>
<dd>
<p>"<$BlogCommentBody$>"</p>
<$BlogCommentDeleteIcon$>
</dd>
</BlogItemComments>
</dl>
<p><$BlogItemCreate$></p>
<p><a href="<$BlogURL$>"><< Home</a></p>
</BlogItemCommentsEnabled>
</ItemPage>

</Blogger>
</div>

</div>

</div>

</body>

</html>

----------------------------------------------

Hasil kode template dalam file txt

Hasil dapat dilihat di http://skin-test.blogspot.com/

Lihat tutorial lainnya di Azzahrah Design

Nature - Classic Skin

2006-08-15T20:24:00.001-11:00

Download : nature-old.txt

Size : 12 kb

Tutorial Template Blogger (1)

2006-08-14T10:27:00.001-11:00

Dalam pembuatan Template / Skin / Theme, ada 2 faktor yang mendukungnya, yaitu:

1. Pengetahuan dasar tentang bahasa HTML
2. Kemampuan dalam mengolah image dengan menggunakan software image editor, seperti Adobe Photoshop.

Untuk tutorial yang pertama ini, hal yang dibahas adalah dasar-dasar penataan template blogger melalui HTML.

Secara umum, sebuah page HTML terdiri dari <HEAD> dan <BODY>.

<HEAD> berisi tag:
<title> yang merupakan judul dari page. Title bisa dibuat penambahan tulisan dengan catatan tidak mengubah kode <$BlogPageTitle$>
<style> yang merupakan tempat kita dalam menata disain dan style blogger.

<BODY>.merupakan isi dari page keseluruhan.

Untuk blogger, isinya diawali dengan tag <blogger>. Tag ini secara garis besar terdiri dari:

1. Tanggal
<BlogDateHeader><h2><$BlogDateHeaderDate$></h2></BlogDateHeader>
Kalau ingin membuat perubahan, bisa dilakukan diantara tag <h2>.
Misalnya: <h2>Tanggal dibuat<$BlogDateHeaderDate$></h2>
Atau ingin menambahkan image: <h2><img src="http://i79.photobucket.com/albums/j152/riniaisyah/aza-aza-fighting-arrow.gif" /><$BlogDateHeaderDate$></h2>

2. Judul Postingan
<BlogItemTitle>
<BlogItemUrl><a href="<$BlogItemUrl$>" title="external link" class="title-link"></BlogItemUrl>
<h3><$BlogItemTitle$></h3>
<BlogItemUrl></a></BlogItemUrl>
</BlogItemTitle>
Sama seperti pada Tanggal, untuk Judul dapat juga dibuat perubahan seperti penambahan tulisan atau gambar. Perubahan dapat dilakukan diantara tag <h3>.

3. Isi Postingan
<div><p><$BlogItemBody$></p></div>
Perubahan seperti Tanggal dan Judul dapat dilakukan dengan penambahan diantara tag <p>. Selain itu, bisa juga ditambahkan image untuk background.

Caranya dengan menambahkan tag style pada tag <p>:
<p style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-bgpost.jpg);">

Penulisan style background seperti di atas akan memberi perintah image yang berulang-ulang (repeat). Penambahan no-repeat akan menghentikan perulangan image:
<p style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-bgpost.jpg) no-repeat;">
Perulangan image dapat dibuat secara horizontal dengan mengubah no-repeat menjadi repeat-x ataupun vertikal dengan menggunakan repeat-y.

Selain itu, posisi image juga dapat diatur dengan menambahkan align posisinya, misal bottom, top, middle, center, left, right atau fixed:
<p style="background:url(http://i79.photobucket.com/albums/j152/riniaisyah/blogger/white-love-bgpost.jpg) no-repeat bottom right;">

4. Footer Postingan
Bagian ini berisi informasi tentang author, penulis postingan (posted by), tanggal postingan dan jumlah komentar.
<p><em>posted by <$BlogItemAuthorNickname$> @ <a href="<$BlogItemPermalinkUrl$>" title="permanent link"><$BlogItemDateTime$></a></em>
<MainOrArchivePage>
<BlogItemCommentsEnabled>
<a class="comment-link" href="<$BlogItemPermalinkUrl$>#comments"><$BlogItemCommentCount$> comments</a>
</BlogItemCommentsEnabled>
</MainOrArchivePage><$BlogItemControl$></p>
Kalimat 'posted by' bisa diubah, disesuaikan dengan bahasa Indonesia, misal: 'ditulis oleh', 'dikirim', dll.
Kata 'comments' juga bisa diubah, misalnya menjadi 'komentar'.

5. Komentar
<ItemPage>
<div id="comments">
<BlogItemCommentsEnabled><a name="comments"></a>
<h4><$BlogItemCommentCount$> Comments:</h4>
<dl>
<BlogItemComments>
<dt class="comment-poster" id="c<$BlogCommentNumber$>"><a name="c<$BlogCommentNumber$>"></a>
At <$BlogCommentDateTime$>, <$BlogCommentAuthor$> said...
</dt>
<dd>
<p>"<$BlogCommentBody$>"</p>
<$BlogCommentDeleteIcon$>
</dd>
</BlogItemComments>
</dl>
<p><$BlogItemCreate$></p>
<p><a href="<$BlogURL$>"><< Home</a></p>
</BlogItemCommentsEnabled>
</div>
</ItemPage>
Merupakan bagain dari komentar yang tidak terlihat di halaman depan.

Judul berada di <h4><$BlogItemCommentCount$> Comments:</h4>
Sama seperti sebelumnya, bisa diubah, ditambahkan image. Kata 'Comments' boleh diubah, misalnya menjadi 'komentar'.

At <$BlogCommentDateTime$>, <$BlogCommentAuthor$> said...
Dapat diberi variasi, misal tambahkan image, ubah kalimat, misalnya menjadi:
<img src="http://i79.photobucket.com/albums/j152/riniaisyah/aza-aza-fighting-arrow.gif" />Jam <$BlogCommentDateTime$>, <$BlogCommentAuthor$> nulis...

Variasi lainnya, bisa dengan menambahkan garis horizontal yang letaknya diantara footer postingan dan komentar. Menjadi:
<ItemPage>
<hr noshade="noshade" color="#4487CD" size="1" width="500px" align="center">
...
Selain garis, juga bisa ditambahkan image. Garis atau image ini tidak akan terlihat di halaman depan, hanya terlihat di page yang terdapat komentar.

Untuk penambahan image di setiap postingan, tag <img> diletakkan setelah tag <blogger> bila ingin image berada di atas.
Bila image ingin di bawah, tag <img> diletakkan di atas tag komentar, <ItemPage>.

Sedangkan untuk bagian SideBar, umunya terdiri dari:

1. Recent Posts
<ul>
<BloggerPreviousItems>
<li><a href="<$BlogItemPermalinkURL$>"><$BlogPreviousItemTitle$></a></li>
</BloggerPreviousItems>
</ul>

2. Archieves
<MainOrArchivePage>
<ul>
<BloggerArchives><li><a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a></li></BloggerArchives>
<ArchivePage><li><a href="<$BlogURL$>">Current Posts</a></li></ArchivePage>
</ul>
</MainOrArchivePage>

3. dll

<Tutorial Selanjutnya Membuat Blog Sederhana. InsyaAllah>

Artikel tambahan:
- tentang tag HTML
- tentang kode karakter (simbol)

Lihat tutorial lainnya di Azzahrah Design

White Love - Classic Skin

2006-08-03T17:37:00.001-11:00

Download : white-love.txt

Size : 22 kb

Info : Skin untuk Maisara.

Pinker

2006-07-31T17:59:00.001-11:00

[klik pada gambar untuk memperbesar]



Download:	pinker.txt
Size:	8 kb
Ket:
Skin ini pernah kugunakan tahun 2005 yang lalu.

Select All --> copy semuanya

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><title><$BlogPageTitle$></title><link rel="Shortcut Icon" href="http://i79.photobucket.com/albums/j152/riniaisyah/pinker-title.gif"><$BlogMetaData$><style type="text/css">/*-----------------------------------------------Blogger Template StyleName: PinkerDesigner: Bunga AyeshaURL: http://blogger-skin-resources.blogspot.com/Date: Juni 2005----------------------------------------------- */body {background: #a2c7f6 url("http://photos1.blogger.com/blogger/6126/69/1600/latar.gif") no-repeat top; margin:0 auto; padding:0 0;font-family: Verdana, Arial, Helvetica, sans-serif;font-size/* */:/**/11px;font-size: /**/11px;color: #4B1D2D;}th {font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;font-size/* */:/**/11px;font-size: /**/11px;padding:0 0;margin:0 auto;}.kotak {border-style: dashed;border-color: #ffffff;border-width: thin;background-color: #EFDFE5;height: 100%;padding:0 0;margin:0 auto;}.footer {font-weight: bold;color: #F1DBE4;background-color: #C8829D;text-align: center;font-size/* */:/**/11px;font-size: /**/11px;}a:link {color: #137FC6;text-decoration: none;font-size: 11px;}a:visited {color: #137FC6;text-decoration: none;font-size: 11px;}a:hover {text-decoration: none;font-size: 11px;color: #B6587C;}a:active {color: #B6587C;font-size: 11px;}/*----- sidebar---*/#sidebar {background-color: #D9AABC;font-size/* */:/**/11px;font-size: /**/11px;}.sidebarisi {background-color: #E3B9C9;padding-left:8px;}h2.sidebar-title {padding-left:23px;background:url("http://i79.photobucket.com/albums/j152/riniaisyah/pinker-title.gif") no-repeat -8px 0;font-size: 14px;color: #bd8095;}#sidebar p {font-size: 11px;line-height: 17px;margin-bottom: 20px;}#sidebar ul {margin: 0 0 5px 0;padding: 0;list-style-type: none;font-size: 11px;line-height: 12px;}#sidebar li {padding: 0 0 4px 14px;background: url("http://i79.photobucket.com/albums/j152/riniaisyah/pinker-item.gif") no-repeat 0 3px;}/*---main---*/#main-content {padding:0;}.author {margin-left:95px;margin-top: 65px;font-weight:bold;font-size:26px;font-family:Georgia, Times New Roman, Times, serif;color:#BF606D; }h2.date-header {margin:0 auto;padding:0 0 0 22px;font-size: 10px;text-transform: uppercase;color: #c88fa2;}.post h3.post-title {margin: 3px 0 0 0;background:url("http://i79.photobucket.com/albums/j152/riniaisyah/pinker-title.gif") no-repeat -8px 0;padding:0 23px;font-size: 15px;color: #ba476b;}h3.post-title a {color: #ba476b;font-size: 15px;text-decoration: none;}h3.post-title a:hover {color: #902245;font-size: 15px;}.post {margin: 0 12px 12px 12px;padding: 0;}.post-body div {font-size: 11px;line-height: 16px;margin: 10px, 0px;}p.post-footer {font-size: 11px;color: #bd8095;text-align: right;}p.post-footer em {display: block;float: left;text-align: left;font-style: normal;}blockquote {margin: 0;padding: 0 10px 0 10px;border-left: 6px solid #f7d8e2;border-right: 6px solid #f7d8e2;color: #9A7381;}.post-body blockquote {margin: 10px 0px;}/*----comments--*/#comments {margin: 0 12px 12px 12px;padding: 10px;border: 1px solid #f0ced8;background-color: #f5e4e9;}#comments h4 {margin-top: 0;font-size: 14px;}p.comment-data {font-size: 11px;}.comment-body p {font-size: 11px;line-height: 14px;}#comments ul {margin: 0;padding: 0;list-style-type: none;}#comments li {padding: 0 0 1px 17px;background: url("http://i79.photobucket.com/albums/j152/riniaisyah/pinker-comment.gif") no-repeat 0 3px;}.deleted-comment {font-style:italic;color:#bd8095;}</style></head><body><table width="770" border="0" align="center" cellpadding="0" cellspacing="0" class="kotak"><tr><td height="120px" colspan="2" background="http://s79.photobucket.com/albums/j152/riniaisyah/atas.gif"></td></tr><tr><td id="sidebar" width="250" height="100%" valign="top" border="0" cellpadding="0" cellspacing="0"><table width="245" height="100%" valign="top" border="0" cellpadding="0" cellspacing="0" class="sidebarisi"><tr height="100%"><td valign="top" height="100%"> <table width="230" height="100%" border="0" cellpadding="0" cellspacing="0" align="center"><tr><td valign="top" height="100%"><br /><$BlogMemberProfile$> <h2 class="sidebar-title">Previous</h2><ul id="recently"><BloggerPreviousItems><li><a href="<$BlogItemPermalinkURL$>"><$BlogPreviousItemTitle$></a></li></BloggerPreviousItems></ul> <MainOrArchivePage><h2 class="sidebar-title">Archive</h2><ul><BloggerArchives><li><a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a></li></BloggerArchives><ArchivePage><li><a href="<$BlogURL$>">Current Posts</a></li></ArchivePage></ul></MainOrArchivePage><h2 class="sidebar-title">Links</h2><ul><li><a href="">link 1</a></li></ul><p><a href="http://blogger-skin-resources.blogspot.com/" target="_blank"><img src="http://i79.photobucket.com/albums/j152/riniaisyah/logo-bunga.gif" alt="Designed by Bunga Ayesha" border="0"></a></p><p><a href="http://www.blogger.com/" target="_blank"><img src="http://buttons.blogger.com/bloggerbutton1.gif" alt="Powered by Blogger" border="0"></a></p><br /></td></tr></table> </td></tr></table> </td><td id="main" width="520" valign="top"><Blogger><div align="center"><img src="http://i79.photobucket.com/albums/j152/riniaisyah/pinker-spasi.gif" /></div><BlogDateHeader><h2 class="date-header"><$BlogDateHeaderDate$></h2></BlogDateHeader><div class="post"><a name="<$BlogItemNumber$>"></a><BlogItemTitle><h3 class="post-title"><BlogItemUrl><a href="<$BlogItemUrl$>" title="external link"></BlogItemUrl><$BlogItemTitle$><BlogItemUrl></a></BlogItemUrl></h3></BlogItemTitle><div class="post-body"><div><$BlogItemBody$></div></div><p class="post-footer"><em>posted by <$BlogItemAuthorNickname$> @ <a href="<$BlogItemPermalinkUrl$>" title="permanent link"><$BlogItemDateTime$></a></em> <MainOrArchivePage><BlogItemCommentsEnabled><a class="comment-link" target="_blank" href="<$BlogItemCommentCreate$>"><$BlogItemCommentCount$> comments</a></BlogItemCommentsEnabled></MainOrArchivePage><$BlogItemControl$></p></div><ItemPage><div id="comments"><BlogItemCommentsEnabled><a name="comments"></a><h4><$BlogItemCommentCount$> Comments:</h4><ul><BlogItemComments><li id="c<$BlogCommentNumber$>"><a name="c<$BlogCommentNumber$>"></a><p class="comment-data">At <a href="#c<$BlogCommentNumber$>" title="comment permalink"><$BlogCommentDateTime$></a>, <$BlogCommentAuthor$> said&hellip;</p><div class="comment-body"><p>"<$BlogCommentBody$>"</p><$BlogCommentDeleteIcon$></div></li></BlogItemComments></ul><p class="comment-data"><$BlogItemCreate$></p></BlogItemCommentsEnabled><p class="comment-data"><a href="<$BlogURL$>">&lt;< Home</a></p></div></ItemPage></Blogger></td></tr></table><table width="100%" height="35" border="0" cellspacing="0" cellpadding="2" class="footer"><tr><td class="footer">:: <$BlogPageTitle$> - Designed by <a href="http://blogger-skin-resources.blogspot.com/" target="_blank">Bunga Ayesha</a> ::</td></tr></table></body></html>

Secercah Kasih - Classic Skin

2006-07-23T19:52:00.001-11:00

Download : secercah-kasih-old.txt

Info : Skin dibuat untuk seorang teman, Amee.

Aza aza Fighting

2006-07-17T17:11:00.002-11:00

[klik pada gambar untuk memperbesar]

Ket:

Skin khusus untuk teman, Rahmah. Atas permintaannya, maka skin ini tidak untuk umum.

^_^

Love Cheers - Classic Skin

2006-07-10T18:19:00.001-11:00

Download : love-cheers.txt

Size : 12 kb

Info : Skin ini diilhami saat melihat-lihat buku novel remaja di sebuah toko buku di Medan. Pulangnya, langsung tangan ini jadi gatal tuk nyoret. Jadilah skin ini.

Kaba - Classic Skin

2006-06-30T18:00:00.002-11:00

Download : kaba.txt

Size : 11 kb

Info : Merupakan skin pertama. Skin ini bertemakan kebesaran Allah SWT melalui rumah-Nya atau disebut Baitullah, Ka'bah.

Select All --> copy semuanya

<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><title><$BlogPageTitle$></title><$BlogMetaData$><style type="text/css">/*-----------------------------------------------Blogger Template StyleName: KabaDesigner: Bunga AyeshaURL: http://blogger-skin-resources.blogspot.com/Date: 30 Juni 2006----------------------------------------------- */body {background: #C6CBD8 url("http://i79.photobucket.com/albums/j152/riniaisyah/kaba-1-content.gif") repeat-y center top;margin:0 auto;padding:0 0 0 0;font:12px Verdana;color:#050E23;font-size/* */:/**/13px;font-size: /**/13px;text-align:center;}td {font:12px Verdana;color:#050E23;font-size/* */:/**/13px;font-size: /**/13px;}#content {background: url("http://i79.photobucket.com/albums/j152/riniaisyah/kaba-1.jpg") no-repeat;background-position: center top;margin:0 auto;width:741px;color:#050E23;padding-bottom: 20px;text-align:right;}/*blog judul--------*/#blog-judul {margin:0 auto;padding:8px 0 0 0;height: 199px;width:741px;text-align:right;}#judul {margin:0 auto;padding:8px 0 0 0;}#judul p {margin:0 auto;padding:0 5px 0 0;font:bold 140% Georgia, Serif; text-transform:uppercase;color:#FFFFFF;}#description {margin:0 auto;padding:18px 5px 0 0;}#description p {margin:0 auto;font:italic bold 13px Georgia, Serif;color:#32569A;}#main {float: left;margin:0 auto;width: 495px;line-height:1.4em;text-align: left;padding-bottom: 20px;}#sidebar {float: right;padding-top:40px;padding-left:5px;padding-right:5px;width: 225px;font-size:85%;color:#FFD478;text-align:left;}.sidebar-title {margin:2.2em 0 .15em;padding-bottom:.35em;border-bottom:1px dashed #9b9;font:bold 100%/1.4em Georgia,Serif;text-transform:uppercase;letter-spacing:.3em;color:#F6F8FC;text-align:center;}#sidebar p {line-height:1.6em;font:110% verdana;}#sidebar ul {margin:0 0 .75em;padding:5px 0;list-style:none;line-height:1.5em;}#sidebar ul li {margin:0 auto;background:url("http://i79.photobucket.com/albums/j152/riniaisyah/kaba-1-item.gif") no-repeat 3px .45em;padding:0 0 5px 15px;}.list {width:180px;font-size:90%;}/*link-------------*/a:link {color:#FFD478;}a:visited {color:#FFD478;}a:hover {color:#000000;}a img {border-width:0;}#main a:link {color:#335A9D;}#main a:visited {color:#335A9D;}#main a:hover {}/*profil-----------------*/.profile-datablock {margin:0 0 1em;}.profile-img {display:inline;}.profile-img img {float:left;margin:0 8px 5px 0;border:2px solid #F6F8FC;.profile-data {margin:0;line-height:1.5em;}.profile-data strong {display:block;}.profile-textblock {clear:left;} /* Postingan -------- */ .date-header {margin:0 28px 0 43px;font:bold 85%/1.4em Georgia,Serif;text-transform:uppercase;letter-spacing:.3em;color:#D1981A;padding-top:17px;}.post {margin:.3em 0 25px;padding:0 13px;border:1px dotted #8791AC;border-width:1px 0;}.post-title margin:0 auto;font-size:110%;line-height:1.5em;background:url("http://i79.photobucket.com/albums/j152/riniaisyah/kaba-1-arrow.gif") no-repeat 13px .45em;display:block;border:1px dotted #8791AC;border-width:0 1px 1px;padding:2px 14px 2px 29pxcolor:#335A9D;}a.title-link, .post-title strong {text-decoration:none;display:block;} a.title-link:hover {background-color:#E9ECF3;}.post-body {border:1px dotted #8791AC;border-width:0 1px 1px;border-bottom-color:#E5E7EA;padding:10px 14px 1px 29px;}html>body .post-body {border-bottom-width:0;}.post p {margin:0 0 .75em;}p.post-footer {background:#E9ECF3;margin:0;padding:2px 14px 2px 29px;border:1px dotted #8791AC;border-width:1px;border-bottom:1px solid #E5E7EA;font-size:100%;line-height:1.5em;color:#8791AC;text-align:right;}html>body p.post-footer {border-bottom-color:transparent;}p.post-footer em {display:block;float:left;text-align:left;font-style:normal;}a.comment-link {background/* */:/**/url("http://i79.photobucket.com/albums/j152/riniaisyah/kaba-1-comment.gif") no-repeat 0 45%;padding-left:14px;}html>body a.comment-link {/* Respecified, for IE5/Mac's benefit */background:url("http://i79.photobucket.com/albums/j152/riniaisyah/kaba-1-comment.gif") no-repeat 0 45%;padding-left:14px;}.post img {margin:0 0 5px 0;padding:4px;border:1px solid #8791AC;}blockquote {margin:.75em 0;border:1px dotted #8791AC;border-width:1px 0;padding:5px 15px;font-style:italic;}.post blockquote p { margin:.5em 0;}/* Comments----------------------------------------------- */#comments {margin:-25px 13px 0;border:1px dotted #8791AC;border-width:0 1px 1px;padding:20px 0 15px 0;}#comments h4 {margin:0 0 10px;padding:0 14px 2px 29px;border-bottom:1px dotted #8791AC;font-size:110%;line-height:1.4em;color:#335A9D;}#comments-block {margin:0 15px 0 9px;}.comment-poster {background: url("http://i79.photobucket.com/albums/j152/riniaisyah/kaba-1-comment.gif") no-repeat 6px .4em;margin:.5em 0;padding:0 0 0 20px;font-weight:bold;color:#335A9D;}.comment-body {margin:0 0 1.25em;padding:0 0 0 20px;}.comment-body p {margin:0 0 .5em;}.comment-timestamp {margin:0 0 .5em;padding:0 0 .75em 15px;color:#335A9D;}.comment-timestamp a:link {color:#335A9D;}.deleted-comment {font-style:italic;color:#ccc;}</style><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head><body><div id="wrapper"><div id="content"> <div id="blog-judul"></div><div id="main"><p align="center"><img src="http://i79.photobucket.com/albums/j152/riniaisyah/kaba-1-bismillah.gif" /></p><Blogger> <BlogDateHeader><h2 class="date-header"><$BlogDateHeaderDate$></h2></BlogDateHeader><div class="post"><a name="<$BlogItemNumber$>"></a><BlogItemTitle><BlogItemUrl><a href="<$BlogItemUrl$>" title="external link" class="title-link"><h3 class="post-title"><$BlogItemTitle$></h3></a></BlogItemUrl></BlogItemTitle><div class="post-body"><p><$BlogItemBody$></p></div><p class="post-footer"><em>ditulis <$BlogItemAuthorNickname$> @ <a href="<$BlogItemPermalinkUrl$>" title="permanent link"><$BlogItemDateTime$></a></em> <MainOrArchivePage><BlogItemCommentsEnabled> <a class="comment-link" href="<$BlogItemCommentCreate$><$BlogItemCommentFormOnclick$>"><$BlogItemCommentCount$> komentar</a></BlogItemCommentsEnabled></MainOrArchivePage><$BlogItemControl$></p></div><ItemPage><div id="comments"><BlogItemCommentsEnabled><a name="komentar"></a><h4><$BlogItemCommentCount$> Komentar:</h4><dl id="comments-block"><BlogItemComments><dt class="comment-poster" id="c<$BlogCommentNumber$>"><a name="c<$BlogCommentNumber$>"></a><$BlogCommentAuthor$> berkata...</dt><dd class="comment-body"><p><$BlogCommentBody$></p></dd><dd class="comment-timestamp"><a href="#c<$BlogCommentNumber>" title="comment permalink"><$BlogCommentDateTime$></a><$BlogCommentDeleteIcon$></dd></BlogItemComments></dl><p class="comment-timestamp"><$BlogItemCreate$></p><p class="comment-timestamp"><a href="<$BlogURL$>"><< Home </a> </p></BlogItemCommentsEnabled></div></ItemPage></Blogger></div> <div id="sidebar"><div align="center"><h2 class="sidebar-title">Mutiara</h2><p><em>Seorang mukmin adalah seorang yang tidak pernah kenyang dari mendengarkan kebaikan sampai dengan berakhir di syurga.</em> <br><strong>IMAM SYAFI'I</strong></p></div><$BlogMemberProfile$> <h2 class="sidebar-title">Arsip</h2><ul><BloggerPreviousItems><li><a href="<$BlogItemPermalinkURL$>"><$BlogPreviousItemTitle$></a></li></BloggerPreviousItems><MainOrArchivePage><BloggerArchives><li><select class="list" name="archivemenu" onchange=" document.location.href=this.options[this.selectedIndex].value;"><option selected>Bulanan</option><option value="<$BlogArchiveURL$>"><$BlogArchiveName$></option><option value="<$BlogURL$>">Tulisan Sekarang</option></select></li></BloggerArchives></MainOrArchivePage></ul><h2 class="sidebar-title">Link</h2><ul><li><a href="http://www.myquran.org/">myQuran</a></li><li><a href="http://blog.muslimblog.net/">IMB</a></li><li><a href="http://riniaisyah.blogspot.com/">Blog Teman</a></li></ul><div align="center"><p><a href="http://blogger-skin-resources.blogspot.com/"><img src="http://i79.photobucket.com/albums/j152/riniaisyah/logo-bunga.gif" alt="Powered by Bunga Ayesha" border="0"></a></p><p><a href="http://www.blogger.com/"><img src="http://buttons.blogger.com/bloggerbutton1.gif" alt="Powered by Blogger" border="0"></a></p></di></div></div></div></body></html>

Free Islamic Blogger Templates

Free Wordpress Theme Gratisan

Theme creator / Generator

URL Path Forwarding

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

Diskon untuk Para Ibu

Web Editor - Software sederhana membuat web

Kami di Facebook

Penawaran Spesial Bulan Oktober

Kabar dari Geocities-nya Yahoo

XML Skin - Pulau Nias

Edisi Indonesia

Update

Menggunakan Template pada Blogger

YM! Pingbox

Memperkenalkan: Az Zahrah Kursus Web

Live Streaming Radio Islam

Minicaster Radio Playhead

Mengecek status YM teman

XML Skin : Just for You

Dibuka Kursus Web Design Khusus Wanita

Ungkapkan Idemu

Shortcut Icon

Selamat Berlebaran

Anti Spam, How to Block Spam

Memasukkan Ayat Al-Qur'an

http//web1hari.com/

http://www.islamic-council.com/

GoodReads

Google Chrome

Marhaban Ya Ramadhan...

Penghitungan Statistik Pengunjung

Rating

Modifikasi:

XML Template : Stroberi

Kalender Hijriah

Membuat Ruang Diskusi

XML Template : Simple Blue

Membuat Border

1. Tidak menggunakan CSS.

2. Menggunakan CSS.

Gambar ber-link, Seperti Kolom Sponsored

Blogger Update

Membuat Widget Cuaca

Menu Link / Top Tabs

FAQ

Cara Membuat 'Read More' pada Artikel

Rini's Discussion Room

XML Skin : Green

Free HTML editor

Free Image & Photo Editing Software Download - PhotoPlus

BTemplates

My Blog - XML Skin

Purple, My Days - XML Skin

XML Skin - The Book / Al Kitab / Al Qur'an

Recent Comments / Komen Terbaru

Ganti Skin

Mawar / Rose - XML Skin

Islam Pictures

Park - XML Skin

Computer - XML Skin

Tutorial Pengaturan dan Pengubahan Skin / Template

Dunia Anak - XML Skin

Love - XML Skin

Tutorial : Memajang Twitter di Web (Blogger)

Here with me... - XML Skin

Ottoman - XML Skin

Pregnant - XML Skin

Jendela - Classic Skin

Link Me Up

Avatar Sizer

Link Target Blank

Intermezo (Posisi dalam shalat berjama'ah)

Use of CSS

About CSS

Tutorial : 3 Kolom

Blue Sky - Classic Skin

Referensi Tutorial Photoshop

Tutorial 3 : Membuat Template dengan CSS

Feminin