Cara mengganti cursor di blog

Sabtu, 07 Februari 2009

Cara Mengganti Cursor di Blog

Saya yakin, Anda pasti bosan dengan cursor berbentuk panah itu. Dengan trik kali ini, Anda bisa mengganti cursor panah tersebut dengan gambar-gambar yang menarik setiap kali blog Anda dibuka. Caranya pun sangat mudah.

Langsung saja, begini caranya:

1. Pilih tab “Tata Letak”.
2. Klik “tambah gadget” baik itu berada di bawah, atas atau samping.
3. Pilih “HTML/JavaScript”
4. Copy kode di bawah ini pada tempat pengetikan:
<style type="text/css">body {cursor:url("http://www.123cursors.com/freecursors/7676.gif"),default}</style>

5. Nah, ganti alamat cursor http://www.123cursors.com/freecursors/7676.gif tersebut dengan alamat cursor yang lain. Untuk mengetahui alamat cursor yang lain, kunjungilah www.123cursors.com dan pilih cursor yang Anda inginkan. Supaya lebih mudah, cari berdasarkan kategori. Bila Anda sudah menemukan, copy alamat cursornya dengan cara klik kanan pada gambar cursor tersebut, lalu pilih “copy image location”.
Mudah kan?

READMORE - Cara mengganti cursor di blog

cara pasang readmore otomatis

z

Fungsi Readmore/baca selengkapnya pada posting adalah untuk menghemat halaman depan website/blog agar tidak terlalu panjang, selain itu juga dapat merangsang pengunjung untuk membaca salah satu posting di halaman depan website/blog tersebut.

Nah jika berkeinginan untuk pasang readmore otomatis pada blogspot Anda, silahkan ikuti langkah-langkahnya sebagai berikut:

Sebelum memulai memasang readmore otomatis pada blogspot/blogger Anda, ada baiknya perhatikan hal-hal sebagai berikut :

1. Download dan simpan template Anda terlebih dahulu, karena jika pemasangan gagal anda masih bisa mengembalikan blog anda seperti semula;
2. Jangan lupa untuk memberi tanda centang pada tulisan Expand widget template;
3. Untuk memudahkan pencarian code, gunakan tombol Find, caranya pada browser Anda klik pada menu Edit lalu pilih Find atau melalui keyboard komputer Anda, tekan Ctrl + F, lalu copy paste code yang mau dicari ke dalam kotak Find lalu Enter/Next;
4. Ini yang paling penting, apabila sebelumnya Anda sudah menggunakan Readmore versi lama, maka hapus dulu codenya.

Adapun langkah-langkah Cara Pasang Readmore Otomatis adalah sebagai berikut:

1. Login ke Account Blogger Anda;
2. Masuk ke halaman Edit HTML, lalu diatas kode </head> letakkan script di bawah 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[
   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>
   
3. Cari dan ganti kode <data:post.body/> dengan semua 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'>READMORE - <data:post.title/></a></span>
   </b:if>
   <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
   
   
   Keterangan:
   
   Biasanya kode: <data:post.body/> berada di bawah kode: <div class='post-body'>, maka untuk memudahkan pencarian kode tersebut gunakan tombol Find seperti penjelasan di atas.
4. Simpan/Save Template, selesai.

Keterangan:

Kita dapat menentukan letak tumbnail (gambar), jumlah karakter tulisan baik tanpa maupun dengan tumbnail serta tinggi dan lebar tumbnail pada postingan dengan cara merubah kode merah tebal di atas dan berikut penjelasannya :

1. var thumbnail_mode = "float";: Letak thumbnail berada di “float” kiri atau jika tidak silahkan ganti dengan “no-float”;
2. summary_noimg = 250;: Jumlah karakter yang akan ditampilkan di posting tanpa gambar / thumbnail;
3. summary_img = 250;: Jumlah karakter yang akan ditampilkan di posting dengan gambar / thumbnail;
4. img_thumb_height = 120;: Tinggi thumbnail dalam ukuran piksel;
5. img_thumb_width = 120;: Lebar thumbnail dalam ukuran piksel;
6. READMORE-<data:post.title/>: Tulisan READMORE bisa diganti misalnya dengan “Baca Selengkapnya” dan apabila anda tidak ingin menampilkan judul dibelakang Readmore, Anda bisa menghapus code script ini <data:post.title/>.

Sumber : Link

READMORE - cara pasang readmore otomatis

cara menampilkan/memasang emotion kaskus di blogger

Apakah kotak komentar anda pengen seperti diatas????
oke saya akan menjelaskan bagaimana cara membuat kotak komentar seperti diatas
saya akan menjelaskan  cara memasukan emoticon kaskus diblog anda seperti yang dibawah ini
:k7 :k8 :k9 :a1 :a2 :a3 :a4 :a5 :a6 :a7 :a8 :a9 . 

1.Seperti biasa anda login dengan akun blogger anda
2.Masuk ke Tata Letak ---> Edit Html
3.Centang pada bagian "Expand Widget Template"
4.Copy kode dibawah ini dan letakan sebelum kode </body>
<script src='http://markbill.fileave.com/Kaskus%20emo%20by%20kompinter2.js' type='text/javascript'/>
<script src='http://markbill.fileave.com/Emotion%20kasku%20by%20Kompinter.js' type='text/javascript'/>
5.Cari kode <b:if cond='data:post.embedCommentForm'>,letakan kode dibawah ini setelah kode tersebut 
<b><img height='50' src='http://img202.imageshack.us/img202/4846/kompinterjuara1.gif' width='50'/>
:k1
<img height='50' src='http://img72.imageshack.us/img72/398/kompinterbatamerah.gif' width='50'/>
:k2
<img height='50' src='http://img687.imageshack.us/img687/1351/kompintercendol.gif' width='50'/>
:k3
<img height='50' src='http://img94.imageshack.us/img94/4219/kompinterlovindo.gif' width='50'/>
:k4
<img height='50' src='http://img8.imageshack.us/img8/3483/kompintermarah.gif' width='50'/>
:k5
<img height='50' src='http://img532.imageshack.us/img532/931/kompintermalu2.gif' width='50'/>
:k6
<img height='50' src='http://img693.imageshack.us/img693/7193/kompinterkecewa.gif' width='50'/>
:k7
<img height='50' src='http://img171.imageshack.us/img171/4809/kompinterngacir2.gif' width='50'/>
:k8
<img height='50' src='http://img412.imageshack.us/img412/3662/kompintersempurna.gif' width='50'/>
:k9
<img height='50' src='http://img291.imageshack.us/img291/6651/kompinterbingung.gif' width='50'/>
:a1
<img height='50' src='http://img709.imageshack.us/img709/2609/kompinterngakak.gif' width='50'/>
:a2
<img height='50' src='http://img641.imageshack.us/img641/3540/kompintertakut.gif' width='50'/>
:a3
<img height='50' src='http://img514.imageshack.us/img514/7169/kompinterterimahkasi.gif' width='50'/>
:a4
<img height='50' src='http://img169.imageshack.us/img169/5500/kompinteralay.gif' width='50'/>
:a5
<img height='50' src='http://img28.imageshack.us/img28/4954/kompintertkp.gif' width='50'/>
:a6
<img height='50' src='http://img138.imageshack.us/img138/3621/kompinternosara.gif' width='50'/>
:a7
<img height='50' src='http://img202.imageshack.us/img202/8307/kompinterliat.gif' width='50'/>
:a8
<img height='50' src='http://img693.imageshack.us/img693/8240/kompintersundul.gif' width='50'/>
:a9


<a href='http://riszpanic.blogspot.com'>.</a>

</b><BR/>  

6.Langkah terakhir anda hanya perlu menyimpan klik "Simpan Template" . 

READMORE - cara menampilkan/memasang emotion kaskus di blogger

cara menampilkan/memasang emotion yahoo di blogger

Apakah kotak komentar anda pengen seperti diatas????
oke saya akan menjelaskan bagaimana cara membuat kotak komentar seperti diatas
saya akan menjelaskan cara memasukan emoticon yahoo seperti yang dibawah

1. Pertama login ke blogger, trus ke "Layout (Tataletak) --> Edit HTML "
2. Beri tanda centang pada kotak "expand widget template"
3. Lalu letakkan kode <script src='http://kendhin.890m.com/emoticon/smile1.js' type='text/javascript'/>  sebelum kode </body>

4. Kemudian cari kode berikut ini :

<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>

5. Kalo sudah ketemu letakkan kode2 berikut setelah kode <p class='comment-footer'> 

<b><img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/>
:))
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif'/>
:)]
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif'/>
;))
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif'/>
;;)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/>
:D
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/>
;)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/>
:p
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif'/>
:((
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/>
:)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/>
:(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/>
:X
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif'/>
=((
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif'/>
:-o
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/>
:-/
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/>
:-*
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif'/>
:|
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif'/>
8-}
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif'/>
~x(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif'/>
:-t
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif'/>
b-(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif'/>
:-L
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'/>
x(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/>
=))
</b> 

6. Kalo sudah trus di "save" dan coba lihat hasilnya 

READMORE - cara menampilkan/memasang emotion yahoo di blogger

cara memberi animasi bergerak di blog

mungkin agan2x sekalian dah pada tau bagaimana cara membuat animasi bergerak. tapi semoga saja ada yang belum tau cara membuat animasi bergerak. biar ada yang mau melirik blog saya . . hehehe
oke langsung saja ya
Cara membuat animasi bergerak :
1.log in ke blogger
2. rancangan
3. Edit HTML

4.lalu cari kode </body>
5. lalu copy paste kode ini

<script language="JavaScript" src="http://adiwidget.com/js/adiWidget.js" type="text/javascript"></script><script language="JavaScript" type="text/javascript">eXl1lXc('http://www.adiwidget.com/flash/adiWidget_Clock_13.swf','top','0px','left','0px','123241','125','125','transparent','ffffff');</script>

catatan : untuk kata yang berwarna merah itu adalah url gambar bisa dirubah terserah anda
              untuk kata yang  berwarna hijau  itu posisi bisa dirubah terserah anda

buat lebih detailnya lagi kunjungi link ini
disini

READMORE - cara memberi animasi bergerak di blog