Tutorial Blog

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.


LINK TARGET BLANK

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

2. ketik kata / kalimat yang ingin ditampilkan dalam web, misalnya: Our sponsor
Our sponsor

3. sisipkan target pada tag link
target="_blank">Our sponsor

DONE

MEMBUAT BORDER

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:

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

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:

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:

isian

-- Keliatannya ribet tapi tidak loh --


GAMBAR BERLINK SEPERTI SPONSOR

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:

1. Harus mempunyai gambar (image) yang sudah di-upload.
2. 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 --




MENU LINK

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.

Untuk membuat menu link , 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:

Kemudian diakhiri dengan kode:

Tepat di atas kode , letakkan kode baru ini:

• Home

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 --

MEMBUAT READ MORE PADA ARTIKEL


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

Contohnya:

Keutamaan Membaca Al-Qur'an

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

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

Langkah-langkah pada bagian layout adalah:

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



6. Hapuslah kode itu, lalu ganti menjadi:
   
   
   
   
   

   
   
   
   

   
   Read More......
   


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

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

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


3. Simpan/save.

Langkah terakhir adalah membuat artikel postingannya, yaitu:

1. Masuklah ke bagian New Posting.
2. Antara 2 tab, 'Compose' dan 'Edit HTML', pilihlah Edit HTML.Akan terlihat kode template yang telah kita simpan sebelumnya.
3. Pecahlah artikel menjadi 2 bagian. Bagian pertama, yang akan terlihat di bagian depan, letakkan di atas kode . Bagian kedua diletakkan setelah kode itu dan sebelum kode .
   
   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...
   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.


4. Publish

-- Selesai -- Alhamdulillah --