About Me
Subscribe
Postingan
Semua Komentar
Memasang Kalender Untuk Mempercantik Blog
08.36 | 
Diposting oleh
popo
Salah satu gadget yang penting buat anda yang super sibuk sampai-sampai tidak ingat tanggal dan hari apa sekarang adalah kalender. Selain mempercantik tampilan blog anda, tentunya juga bisa jadi pengingat hari-hari penting bagi anda.
Ada banyak situs penyedia gadget kalender ini. Gratis. Salah satu di antaranya beralamat di http://www.free-blog-content.com. Situs ini menyediakan berbagai kalender dengan berbagai bentuk gaya yang berbeda. Anda dapat memperoleh kodenya secara mudah, karena tidak harus mendaftar. Berikut langkah-langkahnya:
1. Masuklah ke http://www.free-blog-content.com.
2. Lihat halaman bagian bawah. Anda akan menemukan menu yang berisi berbagai pilihan tipe kalender. Klik salah satu dari beberapa pilihan jenis kalender tersebut. Misalkan anda memilih Car Calendars.
3. Seperti pada menu sebelumnya, pilihan dalam Car Calendars juga bermacam-macam. Pilih salah satu yang anda sukai.
4. Tepat di bagian bawah kalender yang anda pilih terdapat kode dari kalender tersebut. Blok kode tersebut dan salin (Ctrl+C).
Setelah anda mendapatkan kodenya, selanjutnya anda tinggal menempelkannya di blog anda. Caranya adalah sebagai berikut:
1. Masuk dan login ke www.blogger.com.
2. Masuklah pada halaman Dasbor.
3. Klik menu Tata Letak.
4. Klik menu Tambah Gadget.
5. Klik pada link menu HTML/JavaScript.
6. Pada bagian Judul, ketikkan judul menu yang dibuat. Misal : My Calendar.
7. Pada bagian konten, copy (Ctrl+C) kode yang sudah anda dapatkan di atas dan tempel (Ctrl+V) di sini.
8. Klik tombol Simpan jika sudah selesai.
9. Lihat blog anda untuk melihat hasilnya.
NB : Selain kalender, biasanya blogger juga memasang jam di blognya. Cara memasang jam pada blog bisa anda lihat di sini.
Label:
Memasang Jam Untuk Mempercantik Blog
Di internet banyak sekali situs yang menyediakan aplikasi jam untuk dipasang pada blog. Salah satu di antaranya adalah dari www.clocklink.com. Berikut akan saya uraikan caranya.
1. Kunjungi www.clocklink.com.
2. Pada halaman muka situs clocklink.com, cari kotak dialog berjudul Special Instruction for Blog Users, kemudian klik menu Want a clock on your website?
3. Akan tampil halaman yang memperlihatkan berbagai bentuk jam (newest, analog, animation, wallpaper, dan lain-lain). Klik pada salah satu bentuk untuk melihat format dari masing-masing jam.
4. Bila sudah menentukan pilihan, klik tombol View HTML tag yang berada di bawahnya.
5. Setelah itu anda klik tombol Accept sebagai tanda anda setuju.
6. Lalu anda masuk ke halaman pengaturan (warna, zona waktu, dan ukuran).
7. Setelah selesai dengan pengaturan, pilih semua kode yang muncul pada kotak di bawah pengaturan. Salin kode tersebut dengan menekan tombol Ctrl+C.
Setelah anda mendapatkan kodenya, selanjutnya anda tinggal menempelkannya di blog anda. Caranya adalah sebagai berikut:
1. Masuk dan login ke www.blogger.com.
2. Masuklah pada halaman Dasbor.
3. Klik menu Tata Letak.
4. Klik menu Tambah Gadget.
5. Klik pada link menu HTML/JavaScript.
6. Pada bagian Judul, ketikkan judul menu yang dibuat.
7. Pada bagian konten, copy (Ctrl+C) kode yang sudah anda dapatkan di atas dan tempel (Ctrl+V) di sini.
8. Klik tombol Simpan jika sudah selesai.
9. Lihat blog anda untuk melihat hasilnya.
Membuat Automatic Read More Pada Blog
Beberapa waktu yang lalu, salah satu rekan saya yang menggunakan template bikinan saya, meminta saya agar dibuatkan automatic read more pada template yang dia gunakan. Untuk memuaskan ‘pelanggan’, maka saya pun mencari ‘ilmu’ ke blog tetangga, dan ternyata ‘tetangga’ saya Ade’s Trick membagi ilmunya buat saya. Nah, sekarang saya ingin berbagi dengan anda semua. Semoga bermanfaat.
Pada artikel sebelumnya saya sudah pernah membahas fungsi Read More versi manual, untuk mengingat kembali silakan baca artikel di sini atau di sini. Fungsi Read More kali ini memang agak berbeda dengan Read More yang pernah dibahas sebelumnya. Bila versi terdahulu kita harus mengatur tulisan yang akan di tampilkan dengan yang di minimalisasi tulisan menggunakan cara manual dengan melakukan pemangilan fungsi :
....<span class="fullpost">.............</span>
dimana kode ini biasanya kita tanamkan secara manual ke dalam halaman postingan yang ada di template posting. Untuk versi Auto Read More kali ini akan lebih mudah, karena fungsi pemenggalan kalimat langsung bekerja secara otomatis tanpa harus menambahkan kode di atas.
Yang hebatnya lagi, fungsi Auto Read More ini mampu menampilkan image pertama dalam posting dan mem-float image tersebut di awal paragraf awal, meskipun gambar yang kita letakkan berada di tengah atau di akhir postingan. Mungkin lebih tepat disebut fitur image thumbnail.
Tidak hanya itu saja, kita dapat juga mengatur jumlah karakter yang akan ditampilkan. Disini ada 2 opsi untuk jumlah karakter yang akan ditampilkan, yaitu:
1. Jumlah karakter yang ditampilkan, jika ada image yang diikutsertakan dalam postingan
2. Jumlah karakter tanpa image.
Penting! Yang sudah memasang Read More versi lama kodenya dikembalikan dulu ke seperti semula, caranya hapus kode yang berwarna putih di bawah ini (Setiap template mungkin berbeda, jadi tinggal disesuaikan saja).
Kode Read More Versi manual tampilannya seperti di bawah ini :
<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>
jika sudah ikuti langkah-langkah selanjutnya.
Pertama, silahkan tuju langsung ke halaman EDIT HTML, Cari kode </head> kemudian letakkan script dibawah ini di atas kode </head> Kalo sudah, jangan lupa di simpan terlebih dahulu.
Langsung copy paste saja kode dibawah ini:
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)
(C)2008 by Anhvo
visit http://en.vietwebguide.com to get more cool hacks
********************************************/
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img
src="'+img[0].src+'" width="'+img_thumb_width+'px"
height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
Kedua, Masih pada halaman EDIT HTML, Beri tanda centang pada "Expand widget template" lalu temukan kode seperti dibawah
<data:post.body/>
Kalo sudah, ganti kode <data:post.body/> menjadi seperti kode dibawah ini :
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>
createSummaryAndThumb("summary<data:post.id/>");
</script>
<span class='rmlink' style='float:left'>
<a expr:href='data:post.url'>Read More... <data:post.title/></a>
</span> </b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/>
</b:if>
*) Tulisan yang berwarna biru muda menandakan Read More + judul posting. Jika tidak menghendaki adanya judul, hapus saja kode berwarna biru muda tersebut.
*) Tulisan left berwarna ungu menandakan posisi tulisan Read More pada posting.
*) Bila tulisan left diganti dengan right, maka posisi tulisan Read More berada di sebelah kanan.
Keterangan:
var thumbnail_mode = "float"; (kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)
summary_noimg = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)
summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)
img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)
img_thumb_width = 120; (Thumbnail 'lebar dalam piksel)
Semoga Berhasil.
Sumber : Ade’s Trick.
Memasang Status Online Yahoo! Messenger
Saya akan tunjukkan bagaimana cara memasangnya di blog anda. Format dasarnya adalah:
<a href="ymsgr:sendim?idyahoo">
<img border=0 src="http://opi.yahoo.com/online?u=idyahoo&m=g&t=1" /> </a>
Keterangan dari kode tersebut:
· Silakan anda ganti idyahoo dengan id Yahoo! Messenger anda, misalkan id anda adalah juni2508, sehingga kode di atas menjadi :
<a href="ymsgr:sendim?juni2508">
<img border=0 src="http://opi.yahoo.com/online?u=juni2508&m=g&t=1" /> </a>
· t=1, kode ini digunakan untuk memilih ikon/gambar yang akan anda pasang di blog. Angka 1 mewakili tipe dari ikon/gambar. Selengkapnya anda bisa lihat pada tabel di bawah.
Sekarang mari pasang kode tersebut di blog, ikuti langkah-langkah berikut ini:
1. Masuk dan login ke www.blogger.com.
2. Masuklah pada halaman Dasbor.
3. Klik menu Tata Letak.
4. Klik menu Tambah Gadget.
5. Klik pada link menu HTML/JavaScript.
6. Pada bagian Judul, ketikkan judul menu yang dibuat. Misal : Status YM.
7. Pada bagian konten, copy (Ctrl+C) kode yang sudah anda siapkan di atas dan tempel (Ctrl+V) di sini.
8. Klik tombol Simpan jika sudah selesai.
9. Lihat blog anda untuk melihat hasilnya.
| Style Id | Online | Offline |
| t = 0 | | |
| t = 1 | | |
| t = 2 | | |
| t = 3 | | |
| t = 4 | | |
| t = 5 | | |
| t = 6 | | |
| t = 7 | | |
| t = 8 | | |
| t = 9 | | |
| t = 10 | | |
| t = 11 | | |
| t = 12 | | |
| t = 13 | | |
| t = 14 | | |
| t = 15 | | |
| t = 16 | | |
Tabel Tipe Ikon