About Me

Blog Roll

MagzStyleV11 MagzStyleSlider MagzStyle Rounded MagzStyleBrown HarryPotterII Superbike Superhero GoGreen
Disini letakkan kode untuk tab 2 anda
Disini letakkan kode untuk tab 3 anda

English Articles

Card From Trik-Tips Blog

A d s

ShoutBox

Freeware / Software Free Download

Free Blogger Templates

Gadget Article & Review

Friend's Links

Link Exchange

Special Articles

Blog Directory

Followers

About Windows

Card From Seri Bahasa

Tampilkan postingan dengan label blog tutorial. Tampilkan semua postingan
Tampilkan postingan dengan label blog tutorial. Tampilkan semua postingan
Kamis, 02 Juli 2009

Memasang Kalender Untuk Mempercantik Blog

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.

Image3

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.

Image4

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.

Image5

NB : Selain kalender, biasanya blogger juga memasang jam di blognya. Cara memasang jam pada blog bisa anda lihat di sini.

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?

Image11

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.

Image12

5. Setelah itu anda klik tombol Accept sebagai tanda anda setuju.

6. Lalu anda masuk ke halaman pengaturan (warna, zona waktu, dan ukuran).

Image13

7. Setelah selesai dengan pengaturan, pilih semua kode yang muncul pada kotak di bawah pengaturan. Salin kode tersebut dengan menekan tombol Ctrl+C.

Image14

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.

clip_image010

Senin, 29 Juni 2009

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 :

<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.. &#187;&#187;</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:

<script type='text/javascript'>
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 :

<b:if cond='data:blog.pageType != "item"'>
<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 == &quot;item&quot;'><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.

Minggu, 28 Juni 2009

Memasang Status Online Yahoo! Messenger

image Status online berupa ikon/gambar yang menunjukkan status apakah anda sedang online atau tidak di Yahoo! Messenger bisa anda pasang di blog anda. Pada saat anda sedang online, ikon akan tampak menyala. Sebaliknya pada saat offline, ikon akan tampak seperti ‘tidur’ (berwarna kelabu). Menarik bukan?

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&amp;m=g&amp;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&amp;m=g&amp;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

clip_image002

clip_image004

t = 1

clip_image006

clip_image008

t = 2

clip_image010

clip_image012

t = 3

clip_image014

clip_image016

t = 4

clip_image018

clip_image020

t = 5

clip_image022

clip_image024

t = 6

clip_image026

clip_image028

t = 7

clip_image030

clip_image032

t = 8

clip_image034

clip_image036

t = 9

clip_image038

clip_image040

t = 10

clip_image042

clip_image044

t = 11

clip_image046

clip_image048

t = 12

clip_image050

clip_image052

t = 13

clip_image054

clip_image056

t = 14

clip_image058

clip_image060

t = 15

clip_image062

clip_image064

t = 16

clip_image066

clip_image068

Tabel Tipe Ikon

Kamis, 11 Juni 2009

Posting Menggunakan Windows Live Writer 3

Bagian Ketiga – Membuat Artikel Dengan Windows Live Writer 3

Setelah pada bagian kedua kita telah membahas mengenai cara membuat akun blog di Windows Live Writer, maka kali ini saatnya anda memulai untuk menulis artikel anda.

Catatan: dalam menyiapkan/menulis artikel anda tidak perlu menggunakan koneksi internet.

Apabila anda sudah sering menggunakan software word processor seperti Word, Works ataupun yang lainnya, maka menulis dengan Windows Live Writer boleh dibilang sama.

  1. Jalankan software Windows Live Writer. Setelah jendela Windows Live Writer terbuka, silakan ke toolbar menu, dan pada menu Blog anda pilih blog yang akan anda buat artikel/postingnya (saya asumsikan anda memiliki lebih dari satu blog). Image6b
  2. Setelah itu tuliskan judul artikel/posting yang anda buat di tempat yang sudah disediakan pada bagian bertuliskan “Masukkan Judul Posting”. Image11b
  3. Setelah itu silakan anda menulis artikel anda di bagiah bawah dari judul posting.
  4. Setelah selesai anda bisa melihat pratinjau/preview dari artikel anda dengan memilih Pratinjau pada menu Lihat pada toolbar menu.
  5. Setelah puas dengan hasilnya dan anda ingin menerbitkan artikel/posting anda, terlebih dahulu hubungkan komputer anda ke internet, bila sudah terhubung silakan tekan tombol Terbitkan.
  6. Dan artikel anda sudah berhasil diterbitkan.

Menyisipkan Gambar Pada Posting

  1. Anda juga bisa dengan mudah menyisipkan gambar. Caranya: letakkan kursor di tempat anda ingin menyisipkan gambar. Setelah itu anda menuju toolbar menu Sisip, sorot ke bawah dan pilih Gambar. Akan muncul jendela Sisipkan Gambar. Bila anda lihat gambar di bawah ini, ada 2 tab pada jendela tersebut, yaitu tab Dari File dan tab Dari Web. Apabila file gambar anda ada di komputer anda, pilihlah tab Dari File, lalu browse komputer anda untuk mencari file yang dimaksud lalu tekan tombol sisip. Hasilnya seperti di bawah ini: Image14b
  2. Bila anda memiliki file gambar yang telah anda simpan pada situs penyimpan gambar (seperti flickr, picassa, photobucket, dll) maka anda bisa masukkan url file gambar tersebut. Hanya saja akan muncul pesan “Pratinjau saat ini tidak tersedia…”, artinya anda tidak bisa melihat gambar pratinjau dikarenakan koneksi internet anda tidak terhubung  (untuk mengaktifkan pratinjau anda perlu menghidupkan koneksi internet) sehingga hasilnya seperti ini di bawah ini. (Catatan: hal ini bukanlah masalah, pada saat anda menerbitkan artikel anda menghidupkan koneksi internet, maka hasilnya gambar tersebut akan tampil dengan sendirinya). Image15b
  3. Bila artikel anda sudah siap untuk diterbitkan silakan jalankan langkah 5 di atas.

Menyisipkan Video Pada Posting

  1. Selanjutnya adalah menyisipkan video, caranya hampir sama dengan menyisipkan gambar. Untuk menyisipkan video, anda pilih menu Sisip pada toolbar menu, lalu sorot ke bawah dan pilih Video. Akan tampil jendela seperti di bawah ini.Image16b
  2. Ada tiga tab di sana. Tab pertama adalah Dari Web. Silakan anda masukkan url dari file video yang telah anda simpan di internet.
  3. Tab kedua adalah Dari File, yaitu file video yang anda simpan di komputer anda. Pada tab ini selain anda menyisipkan file video ke posting anda, file tersebut juga akan disimpan/di-upload ke hosting video SoapBox atau YouTube. Judul : isi judul video anda. Deskripsi : uraian singkat mengenai isi/cerita dari video anda. Tag : isi dengan tag yang mewakili isi/konten video anda. Kategori : pilih kategori yang sesuai dengan video anda. Izin : apabila anda menginginkan video tersebut bisa dilihat oleh semua orang pilih Publik, bila tidak pilih Tersembunyi. Dan bila sudah, tekan tombol Sisip.Image17
  4. Tab ketiga adalah Dari Layanan Video. Bila anda sudah mempunyai akun di SoapBox ataupun di YouTube maka anda bisa login dan mencari video yang anda inginkan pada layanan tersebut. (Catatan: anda perlu menghidupkan koneksi internet untuk masuk ke layanan tersebut.)Image18b
  5. Nah, setelah semuanya oke maka artikel anda pun siap diterbitkan.

Tutorial & Make Over Blog