Blogger Update

4 komentar

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

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

Bagaimana menggunakannya?


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

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

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

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

-- Selamat ber-gadget ria --


Lihat tutorial lainnya di Azzahrah Design

Read More......

Membuat Widget Cuaca

3 komentar



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


Read More......

Menu Link / Top Tabs

19 komentar

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

Menu Link

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

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

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

Kemudian diakhiri dengan kode:

</b:section>

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

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

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

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

Simpan (save) hasil kerjaan.

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


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

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

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

-- Alhamdulillah, selesai juga --

Lihat tutorial lainnya di Azzahrah Design

Read More......

FAQ

5 komentar

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

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

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

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

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

Lihat tutorial lainnya di Azzahrah Design

Read More......

Cara Membuat 'Read More' pada Artikel

55 komentar

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

Contohnya:

Keutamaan Membaca Al-Qur'an

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

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

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

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

  6. Hapuslah kode itu, lalu ganti menjadi:

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

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

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

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

  3. Simpan/save.

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

    Contoh kodenya menjadi:

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

  4. Publish

-- Selesai -- Alhamdulillah --

Lihat tutorial lainnya di Azzahrah Design

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

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