Cara Membuat Cursor Jam dengan Identitas BloGGeR: Tutorial BloGGeR Spesial Cursor

Cursor Animasi Jam Dengan Identitas BloGGeR dapat digunakan di seluruh desain blog yang disediakan BloGGeR dan dengan amat sempurna tampil di browser manapun. Sebuah cursor yang cukup elegan sebagai pelengkap tampilan blog sekaligus bisa digunakan sebagai pengingat waktu bagi siapapun agar nggak lupa janji atau jadwal kondangan. Javascript yang kita gunakan untuk membangun cursor jam ini tidaklah terlalu besar sehingga loading blog juga tetap prima. Javascript cursor jump tidak berdiri sendiri, melainkan kita dukung dengan secuil kode css yang berfungsi untuk membentuk karakter teks (font), yang meliputi warna, jenis font (font-family) dan ukurannya. Sampeyan bisa menyimpan javascript dan kode CSS melalui penambahan gadget atau dengan cara meng-upload-nya ke javascript hosting (file hosting) supaya blog tidak terlalu berjubel. Untuk KODE CSS-nya silahkan sampeyan simpan di template saja karena jumlah kodenya tak seberapa.

Cara membuat cursor jam dilengkapi identitas BloGGeR :

Copy dan simpan kode CSS dan javascript berikut dalam template sampeyan!
KODE CSS Cursor Jam :

Kode CSS:

.BGS1csrjam1GR{
        background:transparent;
        position:absolute;
        z-index: 999999;
        top:0px;
        left:0px;
        width:16px;
        height:16px;
        font-family:cursive;
        font-size:16px;
        text-align:center;
        font-weight:bolder;
}
.BGS1csrjam2GR{
        position:absolute;
        z-index: 999999;
        top:0px;
        left:0px;width:12px;
        height:12px;
        font-family:cursive;
        font-weight:bolder;
        font-size:10px;
        text-align:center;
}

Javascript:

<script src="http://gubhugreyotprojects.googlecode.com/svn/GR_cursor-Jam.js" type="text/javascript"></script>

1. Simpan CSS : Letakkan dan simpan KODE CSS di atas kode ]]></b:skin>.
2. Untuk cari kode tersebut secara cepat silahkan buka panduan berikut:
   Panduan cara mencari kode html (css, javascript dan xHTML).
3. Simpan javascript di atas kode </body>
   
4. Cara lain menyimpan kode css dan javascript:
   Simpan melalui Tambah Widget (Add a Gadget) :
   Kode CSS dan Javascript juga bisa disimpan dalam template dengan cara menambah gadget. Letakkan kode css di atas javasript.
   
   Cara penulisan sebagai berikut :
   
   

   Menyimpan kode lewat Add a Gadget:

   <style type="text/css">
   Letakkan kode CSS di sini !
   </style>
   
   <script src="http://gubhugreyotprojects.googlecode.com/svn/GR_cursor-Jam.js" type="text/javascript"></script>




5. Cara Menambah Widget :
   Panduan menambah widget untuk menyimpan kode css dan javascript melalui Add a Gadget, silahkan buka panduannya dengan membuka link di bawah ini:
   
   Cara Menambah Gadget (Add a Gadget)



6. Amankan Template :
   Selalu saya mengingatkan untuk mengamankan template terlebih dahulu dengan tujuan supaya tidak terlalu banyak masalah timbul setelah perubahan yang dilakukan terhadap desain blog (template), baik berupa penambahan kode baru atau kurangisasi kode (he ... he ... nggak ada ya , kurangisasi?).
   Untuk mengetahui cara mengamankan template silahkan langsung anda klik link berikut:
   
   Panduan Cara Backup Template

Oho ..... ada yang kelewatan, nich :

1. Jika ingin menggunakan javascript tersebut dalam bentuk teks script, sampeyan bisa menyimpannya di atas kode </body>, tambahkan kode menjadi seperti ini :
   

   Cara Lain simpan javascript

   <script type="text/javascript">
   //<![CDATA[
   Letakkan javascript di sini!
   //]]>
   </script>

2. Silahkan kode CSS di simpan di atas ]]></b:skin>
3. Ganti Pembentuk Nama Blogger di javascript yang bertuliskan :
   
   R E Y O T - G U B H U G
   
   dengan identitas baru yang ingin anda tampilkan ! Oye ...?!

D E M O Cursor Jam Dengan Nama BloGGer

Silahkan klik link berikut untuk melihat bentuk cursor jam dengan nama blogger di dalamnya!

D E M O

Selamat mencoba, selamat ngelembur dan semoga berhasil dengan baik. Barangkali ada kesulitan, silahkan sampaikan lewat komentar. Posisi teks reyot-gubhug terletak di bagian atas javascript dan jumlah teksnya harus tidak lebih dari 12 huruf. Lihat di bawah ini :

Posisi kode yang harus di rubah:

"JANUARI","FEBUARI","MARET","APRIL","MEI","JUNI","JULI","AGUSTUS","SEPTEMBER", "OKTOBER","NOVEMBER","DESEMBER"); date=new Date();  day=date.getDate(); year=date.getYear();if (year < 2000) year=year+1900; tmpdate=" "+theDays[date.getDay()]+" "+day+" "+theMonths[date.getMonth()]+" "+year;D=tmpdate.split(""); 
N='R E Y O T - G U B H U G'

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

Update » Rabo PON, February, 29, 2012

» Happy Blogging - gubhugreyot «