Bloggerstars1

Merubah Tanggal Posting dalam Bentuk Icon Kalender

2010-12-07T08:48:00.000-08:00

Membuat blog menjadi lebih menarik merupakan kesibukan besar blogger selain aktivitas posting yang sangat menyita waktu, energy dan terutama otak. Banyak cara dilakukan untuk membuat blog terlihat semakin indah dan menarik, dimana salah satunya adalah dengan membuat tanggal posting terlihat bagai sebuah kalender meja dalam ukuran mini (Lihat di sebelah kiri judul posting!). Membuat wajah baru seperti ini dapat dilakukan dengan beberapa cara, namun dari sekian banyak yang termudah adalah dengan cara yang akan tersampaikan di bawah. Tidak banyak kode dan javascript serta kode HTML yang harus digunakan. Pemasangan dan penyimpanannyapun sangatlah simple. Perubahan yang penting dan menjadi keharusan yang harus dilakukan, selain penambahan kode adalah perubahan format tanggal posting. Format tanggal posting ini sekaligus akan menjadi penentu muncul tidaknya desain tanggal posting dalam bentuk icon kalender yang kita buat. Agar tutorial ini lebih mudah dipahami, terlebih dahulu kita akan memulai dari cara pemasangan dan penyimpanan kode yang nantinya akan kita pergunakan.

Langkah untuk Merubah Tampilan Tanggal Posting

Lakukan login terlebih dahulu untuk mempercepat proses pembuatan bentuk tanggal posting yang baru.
- Tulis User Alamat Email (Email Address).
- Tulis Password.
- KLIK "LOGIN"
KLIK "DESIGN/RANCANGAN".
KLIK "EDIT HTML".
KLIK "Download Template Lengkap" untuk melakukan proses BACK-UP Templates.
- Simpan file template di folder PC. Berikan nama yang berkaitan dengan saat perubahan desain dilakukan (contoh: dec10) untuk memudahkan saat file ini diperlukan kembali.
- Setelah proses penyimpanan file template silahkan tetap di "EDIT HTML".
- KLIK "Expan Widget Templates".
Cari kode ]]></b:skin>. Gunakan Ctrl+F untuk memudahkan pencarian kode.
- Setelah anda klik Ctrl+F secara bersamaan, copy-paste kode ]]></b:skin> dalam box pencarian.
- KLIK "Find".
Simpan javascript di bawah kode ]]></b:skin> dan Kode CSS di atas kode ]]></b:skin>.
Lanjutkan dengan mencari kode <data:post.dateHeader/> dengan cara seperti saat mencari ]]></b:skin>, kemudian ganti kode tersebut dengan xHTML yang baru (disertakan di bawah!).
KLIK "SAVE Templates (Simpan Templates)".

Javascript

]]></b:skin>

<script type='text/javascript'>
//<![CDATA[
function date_replace(date) {
var da = date.split('.');
var day = da[1], mon = da[0], year = da[2];
var month =
['0','Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
document.write("<div class='month'>"+month[mon]+"</div> <div class='day'>"+day+"</div>");
}
//]]>
</script>

Kode CSS

h2.date-header{
      margin:1.5em .5em 0.5em;
}
.kalender{
      background:url(http://i964.photobucket.com/albums/ae124/gubhugreyot/anima/bgGreenCalendarAnima.gif) no-repeat;
      width:44px;
      margin:20px 10px 0 8px;
      float:left;
      font-weight:bold;
      height:52px;
      text-align:center;
      border:1px solid #777;
      border-radius:5px;
     -moz-border-radius:5px;
     -webkit-border-radius:5px;
      opacity:0.8;
     -o-transition:all ease-in 1s;
     -moz-transition:all ease-in 1s;
     -webkit-transition:all ease-in 1s;
      filter:alpha(opacity=80);
      padding:1px;
}
.kalender:hover{
      filter:alpha(opacity=100);
      opacity:1.0;
      border-color:red;
}
.month{
      font-size:10px;
      width:33px;
      margin:3px 2px 0 6px;
      text-transform:uppercase; 
      color:#4d010a;
      padding: 2px 0px 0px 0px;
}
.day{
      color:#555;
      font-size:27px;
      width:44px;
      margin:0;padding:0;
}

]]></b:skin>

xHTML

<div class='kalender'>
<script type='text/javascript'>
date_replace(&#39;<data:post.dateHeader/>&#39;);
</script>
</div>

Setelah semua proses selesai, lakukan perubahan format tanggal posting ke bentuk bulan.tanggal.tahun (contoh: 12.22.2010).

KLIK "SETTINGS" (Pengaturan).
KLIK "FORMAT".
Lihat "Format Header Tanggal".
Rubah format tanggal sesuai contoh di atas.
KLIK "SAVE (Simpan).
Buka blog dan lihat hasilnya!

Tutorial Lain

Slahkan buka tutorial lain yang bisa melengkapi tutorial di blog ini!

Cara Membuat Floating Image Link dengan kode CSS dan CSS3

2010-11-04T04:57:00.000-07:00

Jika anda sering menjelajah blog, pasti pernah menjumpai gambar/image yang terpasang di pojok kanan-bawah atau kiri bawah halaman. Gambar-gambar tersebut bisa berupa gambar berekstensi .gif, .jpg atau .png. Beberapa yang lain juga memanfaatkan gambar animasi gif dan flash. Selain berfungsi menambah keindahan, pada gambar bisa ditambahkan sebuah link hingga ketika pengunjung meng-klik gambar tersebut maka dia akan dibawa ke halaman yang baru dari blog tersebut atau ke blog/web dengan alamat berbeda. Floating image yang di dalamnya berisikan link akan memberi manfaat lebih karena sebuah link penting bisa selalu "nongkrong" tepat di sebuah gambar yang terpajang di satu bagian blog yang mudah dan selalu terlihat oleh setiap pengunjung.

Penempatan di pojok kanan-bawah atau di kiri-bawah bertujuan supaya gambar gampang terlihat tidak terlalu mengganggu bagian blog yang lain. Anda bisa menggunakan gambar dengan ukuran "sesuka hati" sepanjang blog tetap nyaman untuk dinikmati pengunjung. Karena di dalamnya sudah diselipkan sebuah link, maka selanjutnya gambar ini kita sebut sebagai floating image link yang akan selalu terlihat sekalipun halaman digulung hingga ujung terbawah.

Kita bisa membuat floating image link dengan 3 macam cara:

Hanya menggunakan xHTML.
Menggunakan kode CSS dan xHTML.
Memadukan kode3 CSS dan CSS3 serta xHTML.

Contoh Floating Image Link yang dibuat hanya menggunakan xHTML dapat anda lihat di halaman ini pada ujung/pojok kanan-bawah.

Jika anda ingin melihat bagaimana sebuah Floating Image Link yang dibangun dengan menggunakan kode CSS, CSS3 transformation dan CSS3 transition serta xHTMl, silahkan klik link DEMO di bawah ini. CSS3 transition dan transformation akan membuat efek yang memperindah tampilan Floating Image Link. Perlu menjadi catatan bahwa karena menggunakan kode CSS3, maka apabila anda ingin melihat bentuk efek dan tampilannya secara sempurna, anda harus menggunakan browser yang sudah mendukung CSS3 seperti Opera 1041 hingga Opera 1063, Google Chrome, Safari dan Mozilla Firefox 4.0 beta 1 hingga beta 6.

D E M O

Kode CSS

#pojok {
        position:fixed;
        left:2px;
        bottom:2px;
}  
#pojok img {
        height:167px;
        width:20px; 
        border:3px solid #888;
        padding:1px;
        background:#aaa;
        border-radius:5px;
       -moz-border-radius:5px;
       -webkit-border-radius:5px;
       -o-transition:all 1.2s ease-out;
       -moz-transition:all 1.2s ease-out;
       -webkit-transition:all 1.2s ease-out;
}  
#pojok:hover img {
        z-index:99;
        background:#993300;
        border-color:#FF0000;
       -o-transform:rotate(380deg) scale(1.3) translate(25px,-30px);
       -moz-transform:rotate(380deg) scale(1.3) translate(25px,-30px);
       -webkit-transform:rotate(380deg) scale(1.3) translate(25px,-30px);
}

]]></b:skin>

xHTMl

<div id="pojok">
<a href="http://bloggerstuars.blogspot.com/" target="_blank" title="You may learn about 500 of blogger tutorial, here!">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQzOjYKgoVfJ5N1oiZuyaZX46M64SVoKSWE519J0w8GAP1P6p_X51kwkOBaPVrHNrdhTAmXRK9Hx9Vgg4kXIykU0LSUl58ec4qEFcQvWa8DTteJQ3Kmx1PM1JnD218-NVYk-EX315fz1eg/s200/gubhugreyot167.20.jpg" /></a>
</div>

</body>

Cara Membuat Floating Image/Floating Image Link

Login : Login ke Blogger.
- Tuliskan Email Address.
- Tuliskan Password.
- KLIK Login.
Dasbor : Setelah login anda akan menjumpai halaman dasbor. Cari dan klik "Design/Rancangan".
Design/Rancangan : klik "Edit HTML".
Cari kode ]]></b:skin>, kemudian letakkan kode CSS di atasnya.
Cari kode </body>, dan letakkan xHTML atasnya.
KLIK SAVE Templates/Simpan Template.
Buka blog dan lihat hasilnya.

Catatan & Keterangan:

Rubah/ganti kode yang berwarna oranye dengan URL yang akan dipasang sebagai link.
Ganti kode yang berwarna kuning dengan teks yang sesuai dengan URL.
Ganti kode yang berwarna merah dengan URL image/gambar.
Ganti nilai width dan height pada kode CSS dengan ukuran yang baru sesuai gambar yang akan ditampilkan.
Gunakan gambar yang tidak terlalu besar agar tidak mengganggu tampilan blog dan kenikmatan pengunjung saat menjelajahi isi blog.

Jika anda ingin membuat Floating Image Link yang khusus hanya menggunakan xHTMl, silahkan buka tutorialnya dengan klik link di bawah ini:

Floating Image Link (xHTML only)

Tutorial Lain

Slahkan buka tutorial lain yang bisa melengkapi tutorial di blog ini!

Cara Menggunakan Onmouseover dan Onmouseout untuk Menciptakan Hover pada Image/gambar

2010-11-03T09:14:00.002-07:00

Hal-hal yang teramat sederhana seringkali dibutuhkan pada saat-saat tertentu. Contohnya adalah membuat atau memunculkan hover sebuah gambar. Jika pada umumnya gambar yang berbeda harus dihasilkan melalui hover dengan menggunakan kode CSS yang disimpan di halaman edit HTML atau widget, dengan memanfaatkan onmouseover dan onmouseout, maka kode CSS tak diperlukan lagi. Cara seperti ini cukup praktis untuk digunakan di halaman posting atau di bagian yang lain seperti halnya di sidebar blog.

Dua buah gambar berbeda, melalui onmouseover dan onmouseout dapat dimunculkan pada satu tempat/ruang yang sama (seperti hover image). Ketika cursor disentuhkan pada gambar maka fungsi onmouseover bekerja sehingga gambar ke-2 terlihat. Saat cursor dijauhkan dari gambar (onmouseout), maka kembali gambar pertama terlihat. Dengan menggerakkan cursor di atas gambar di bawah ini, kemudian melepaskan/menjauhkan kembali cursor dari gambar, maka anda akan melihat bagaimana onmouseover dan onmouseout bekerja.

Fungsi seperti di samping biasanya bekerja dengan cara memanfaatkan hover yang dibangun dalam bentuk kode CSS dimana syntax-nya seperti contoh berikut:

.gambar {height:..px;width:..px;background:url(...jpg) center no-repeat;padding:..px;border:...;margin:..px; ...dst;}
.gambar:hover{background:url(...jpg) center no-repeat; ... dst;}

Untuk membuat efek hover image menggunakan fungsi onmouseover dan onmouseout seperti gambar di atas, kode yang digunakan sbb:

Contoh:

Catatan & Keterangan:

Gunakan dua buah gambar dengan ukuran yang sama.
Penambahkan style berfungsi untuk membentuk berbagai variasi baru serta posisi gambar (border, padding, margin, border-radius, float dan beberapa kode lain yang diperlukan termasuk height dan width).
Jika ingin membuat posisi gambar di kiri, kanan, atau center maka bisa ditambahkan float:left;, float:right; atau display:block;margin:..px auto;
Penggunaan margin disesuaikan dengan posisi gambar (float:left; dan float:right;)
Width dan height disesuaikan dengan ukuran gambar.

Tutorial Lain

Slahkan buka tutorial lain yang bisa melengkapi tutorial di blog ini!

Cara Membuat Menampilkan Widget Label/Categories

2010-11-02T02:13:00.000-07:00

Memahami desain blog hingga penggunaan kode html desain blog merupakan sebuah kewajiban yang harus dilakukan blogger. Pada perkembangan selanjutnya sebuah blog akan cukup banyak memerlukan penambahan widget baru, kode html yang berupa xHTML, kode CSS dan javascript serta CSS3 guna peningkatan performa blog. Terlebih pada saat ini, setiap blogger dituntut untuk mampu mengembangkan diri membangun atau memodifikasi blog hingga halaman blog terlihat rapi dan cantik dengan harapan semakin membuat pengunjung betah berlama-lama membuka halaman demi halaman dan mengikuti setiap posting yang tersaji. Anda harus yakin bahwa penampilan yang lebih menarik dapat segera diciptakan dengan catatan bahwa anda bersungguh-sungguh dan telaten untuk mencoba mempelajari titik demi titik di mana sebuah blog terbangun.

Widget adalah satu dari sekian banyak bagian penyusun dan "kosmetik" bagi blog. Beberapa widget telah disediakan oleh blogger dan anda tinggal menampilkannya di halaman blog. Beberapa widget yang lain disediakan secara gratis ataupun berbayar oleh banyak situs yang tersebar memenuhi jagad maya. Salah satu widget yang telah disediakan blogger adalah widget Label atau Categories. Widget ini berfungsi untuk menampilkan link dari sekelompok posting anda. Sekalipun widget kategori merupakan widget dalam bentuk jadi dan merupakan bawaan blogger/blogspot, nantinya anda bisa melakukan banyak modifikasi hingga widget label yang sederhana ini mampu tampil dengan lebih mempesona. Perubahan pada kode HTML menjadi kuncinya.

Untuk menampilkan sebuah widget label atau categories, ada 1 (satu) syarat khusus yang harus dipenuhi. Karena sifatnya untuk menampilkan "link" bagi sekelompok "link posting", maka anda harus membagi terlebih dahulu posting anda menjadi beberapa kelompok.

Contoh:
Misalnya posting anda berkaitan dengan binatang.
Anda akan mengelompokkan posting dalam bentuk seperti :

Binatang Buas : Isi posting berupa segala macam binatang buas seperti : Harimau, Singa, Kucing Hutan, Beruang, Buaya dsb.
Binatang Melata : Posting akan mengupas tentang segala jenis binatang melata seperti ular, ulat, cicak dsb.
Hewan Memamah Biak : Ulasan posting akan berkisar semua binatang yang menggunakan cara memamah biak dalam proses pencernaan makan, seperti kerbau, sapi, kambing dsb.
Binatang Peliharaan : Dalam posting secara khusus membicarakan/menuliskan segala macam binatang peliharaan seperti kucing, anjing, kelinci, kerbau, kuda, ular dsb.
Hewan Menyususi : Posting akan terkelompokkan dalam beberapa judul posting yang bahasanya berputar soal binatang menyususi, seperti harimau, ikan paus, rusa, dsb.
Hewan Amphibi : Membicarakan katak, buaya dsb.

Keterangan

Pengelompokan berbagai jenis binatang seperti di atas akan memunculkan sebuah label/categories dari beberapa posting yang telah diterbitkan. Kategori Binatang Buas di dalamnya berisi posting tentang harimau, singa serta beberapa binatang buas lainnya. Demikian pula Binatang/Hewan Menyusui adalah 1 (satu) link label/categories yang di dalamnya terdiri dari beberapa link posting tentang hewan menyusui yang jumlahnya bisa mencapai ratusan posting.
Pengelompokan dalam bentuk label dimaksudkan untuk mempermudah pengunjung saat ingin mencari/membaca posting sesuai spesifikasi yang dia inginkan yang tersaji di sebuah blog/web.
Pengelompokkan seperti di atas berlaku untuk semua blog dan semua materi posting. Anda tinggal membuat jenis/nama kategori sesuai keinginan/posting yang menjadi fokus tulisan/artikel di blog anda.
Untuk menciptakan link/kelompok kategori/label, yang nantinya secara otomatis tertampilkan di blog, anda harus mengelompokkan setiap posting dalam kategori yang berbeda dan hal ini dilakukan di halaman posting. Anda bisa melihat gambar di bawah ini:

Gambar di atas akan anda lihat saat anda membuat posting (bagian bawah). Setelah judul dibuat, tuliskan kategori posting anda seperti terlihat pada gambar. Jika anda cermati maka terlihat dalam gambar bahwa label/categori setiap posting tidak harus dibatasi dalam 1 (satu) label. Di sana terlihat CSS3, Modifikasi Blog, Modifikasi Blogger Baru yang digunakan sebagai label atau kategori posting. Hal sama akan terjadi pada contoh tentang posting binatang yang tersampaikan di atas. Ketika artikel/posting mengupas tentang harimau maka anda harus menuliskan label dalam bentuk Binatang Buas, Bintang Menyusui.

Setelah posting terkelompokkan dalam beberapa label, maka langkah terakhir adalah menampilkan widget label/categories. Caranya sebagai berikut:

Login ke Blogger.
Dasboard.
KLIK Design/Rancangan.
KLIK Add a Gadget (Tambah Gadget). Pada box dengan garis terputus-putus. Bisa di sebelah kanan atau kiri (sidebar).
Tunggu hingga widget yang tersedia terlihat. Pilih dan klik Label.
Pilih bentuk Label : Daftar atau Cloud.
KLIK SAVE/Simpan.
Buka blog dan lihat hasilnya.
Jika anda ingin membuat/merubah kebentuk yang berbeda dari yang telah di buat, maka ulangi langkah di atas dan kembali pilih Daftar atau Cloud, baru kemudian klik SAVE/Simpan.

Tutorial Lain

Slahkan buka tutorial lain yang bisa melengkapi tutorial di blog ini!

Cara Membuat Elemen Baru di Bawah Footer & Outer-Wrapper

2010-10-28T04:05:00.000-07:00

Mengapa sebuah elemen baru menjadi sangat penting untuk dibuat? Mengapa pula beberapa elemen ini juga harus dibuat di tempat-tempat tertentu yang sebelumnya tidak pernah tersediakan oleh pembuat desain blog? Sampai seberapa jauh fungsi dan kegunaannya?

Membuat sebuah atau beberapa buah elemen baru harus dilakukan oleh blogger di saat kebutuhan penempatan widget terus bertambah. Widget ini bisa berupa widget dalam bentuk jadi (yang disediakan beberapa situs tertentu termasuk blogger) ataupun widget baru yang kita buat sendiri menggunakan kode HTML yang di simpan melalui Add A Gadget. Mungkin ada suatu pertanyaan lagi? Mengapa tidak secara langsung saja kita masukkan atau simpan kode HTML baru tersebut di "halaman Edit HTML"?

Itulah arti pentingnya sebuah Elemen Baru!
Jika anda menyimpan kode HTML baru langsung di halaman Edit HTML, apabila Kode HTML tersebut berisi teks, maka teks akan selalu terlihat di Page Elements/Elemen Laman. Tentu saja ini akan menjadi gangguan serius bagi kindahan Page Elemen dan juga akan membuat tatanan Page Elements terlihat kacau. Dengan kondisi seperti ini, satu-satunya cara untuk membuat semua halaman dalam blog tetap terlihat rapi dan enak ketika digunakan adalah dengan membuat elemen baru tempat widget tersimpan.

Elemen di bawah footer ini lebih tepatnya berada di bawah outer wrapper (sering disebut juga outer-wrap dan banyak istilah lain) dan tepat di atas tag penutup </body>. Anda bisa melihat di blog ini, dimana beberapa widget yang tidak harus ditampilkan secara menonjol/fulgar bisa kita tempatkan di bagian tersebut (lihat di ujung bawah halaman blog!). Dengan adanya widget baru ini, maka widget footer bisa dimanfaatkan untuk beberapa hal yang "dikhususkan" seperti halnya yang terlihat di bawah. Widget footer ini kita gunakan untuk menempatkan "beberapa hal penting berkaitan dengan identitas blog".

Membuat elemen baru seperti yang telah anda lihat bisa dilakukan dengan sangat cepat dan mudah. Anda tinggal simpan kode CSS dan xHTML di bagian header (Kode CSS) dan di bagian body (xHTML). Jika anda ingin membuatnya, anda bisa mengikuti panduan berikut ini:

Login ke Blogger
Setelah Dasbor terbuka, klik Design (Rancangan).
Kembali klik Edit HTML.
Lakukan prosedur pengamanan template dengan Back-up Templates.
- KLIK Download Full Template (Download Template Lengkap).
- Simpan File Template (berikan nama khusus untuk memudahkan bila diperlukan).
Edit HTML » klik Expand Widget Templates.
Cari kode ]]></b:skin>.
Copy-paste kode CSS dan letakkan di atas kode tersebut.
Lanjutkan dengan mencari kode </body>.
Copy paste kode xHTMl dan letakkan tepat di atasnya.
Silahkan klik "SAVE Templates (Simpan Templates)".
Buka Elemen Laman (Page Elements) dan periksa hasil pembuatan Elemen Baru!
Jika Elemen Baru telah terlihat, cobalah untuk menggunakan elemen baru tersebut guna menempatkan widget. Anda bisa mencobanya dengan beberapa teks atau widget!

Kode CSS-1

#bawahfooter, #bawahfooter1 {
       margin:0;
       padding:0;
       text-align:center;
}
#bawahfooter1 {
       background:#111;
       border-top:4px solid #666;
       border-bottom:6px solid #666;
}
#bawahfooter1 widget{
       margin:2px 0;
       background:#333;    
       padding:5px;
}
#bawahfooter1 widget-content img {
       padding: 2px;
       background:#eee;
       border:2px solid #888;
       border-radius:4px;
      -moz-border-radius:4px;
      -webkit-border-radius:4px;   
}

]]></b:skin>

Kode CSS-2

Jika kode CSS-1 telah dilengkapi dengan beberapa kode sebagai pelengkap elemen dan widget, kode CSS-2 merupakan kode CSS untuk penambah elemen baru dalam bentuk polos. Anda bisa menambahkan beberapa kode CSS baru dan xHTML untuk memberi background, border, padding dan margin serta beberapa kode pelengkap yang lain. Silahkan anda pilih salah satu di antara ke dua macam kode CSS ini. Untuk xHTML-nya tidak ada perubahan.

#bawahfooter {
       margin:0;
       padding:0;
       text-align:center;
}
#bawahfooter1 {
       margin:10px 0 10px 0;
       padding:0;
}

]]></b:skin>

xHTML

<div id='bawahfooter'>
<b:section class='bawahfooter1' id='bawahfooter1' showaddelement='yes'/>
</div>

</body>

Tutorial Lain

Slahkan buka tutorial lain yang bisa melengkapi tutorial di blog ini!

Cara Membuat Drop Caps Otomatis di Posting Blog

2010-10-27T08:59:00.000-07:00

Jika anda membuka sebuah blog dan "huruf pertama" pada posting atau di bagian yang lain selalu berupa huruf dengan ukuran yang berbeda (jauh lebih besar) dengan semua huruf di teks berikutnya, maka itulah yang kita sebut sebagai drop caps. Jadi intinya, dengan menggunakan fungsi drop caps ini maka di semua posting yang diterbitkan, huruf pertamanya akan kita buat dalam ukuran yang jauh lebih besar dari huruf selanjutnya. Cara membuatnya sangat praktis karena kita hanya perlu menambahkan kode CSS dan memanfaatkan tag DIV di pembuka posting. Jika anda ingin melihat seperti apa, sih, sebenarnya drop caps dan apakah drop caps ini akan membuat blog terlihat lebih bagus, silahkan klik link di bawah ini.
D E M O
Untuk membuat drop caps seperti yang telah anda ketahui atau lihat, sebenarnya ada dua cara yang dapat kita gunakan. yang pertama kita gunakan tag span dan yang ke dua kita gunakan tag DIV (sekalipun juga bisa kita gunakan tag p). Jika yang akan kita buat ini kita sebut sebagai Drop cpas otomatis, itu karena selain berfungsi menciptakan efek drop caps, tag DIV ini sekaligus kita manfaatkan sebagai pengatur posting dalam bentuk rata kiri atau rata kanan-kiri (text-align:left; atau text-align:justify;). Dengan kode baru yang kita gunakan, maka anda tidak perlu lagi menambahkan kode <div style="text-align:justify;"> untuk membuat posting rata kanan-kiri.

Kode CSS Drop Caps Otomatis

.post .opening:first-child:first-letter {
       font:50px/18px Georgia, Times New Roman, Times, serif;
       float:left;
       text-align:justify;    
       padding:2px 5px 0 0;
       margin-bottom:-5px;
       color:#0099FF;
       text-shadow:2px 1px 1px #FF9900;
}

]]&lgt;</b:skin>

Copy-paste dan simpan kode tersebut di atas kode ]]></b:skin> dengan cara:

Login ke blogger.
Setelah halaman dasbor terbuka, klik Design/Rancangan.
Lanjutkan dengan KLIK Edit HTML.
Back-up Templates dengan cara klik Download Full Templates/Download Template Lengkap.
SAVE/Simpan file template di folder PC.
Cari kode ]]></b:skin> (gunakan Ctrl+F untuk mempermudah dan mempercepat pencarian kode).
Copy dan letakkan kode CSS Drop Caps Otomatis di atas ]]></b:skin>.
KLIK SAVE Templates/Simpan Templates.
Coba hasilnya dengan membuat posting menggunakan kode HTML (tag DIV) yang baru kemudian buka blog untuk mengetahu berfungsi tidaknya drop caps otomatis yang sudah terpasang.

xHTML untuk Posting

Saat anda membuat posting, gunakan xHTML berikut sebagai tag pembuka posting dan tag penutup posting

<div class="opening">Tuliskan artikel di sini!</div>

Contoh:

<div class="opening">Jika anda membuka sebuah blog dan "huruf pertama" pada posting atau di bagian yang lain selalu berupa huruf dengan ukuran yang berbeda (jauh lebih besar) dengan semua huruf di teks berikutnya, maka itulah yang kita sebut sebagai drop caps. Jadi intinya, dengan menggunakan fungsi drop caps ini maka di semua posting yang diterbitkan, huruf pertamanya akan kita buat dalam ukuran yang jauh lebih besar dari huruf selanjutnya. Cara membuatnya sangat praktis karena kita hanya perlu menambahkan kode CSS dan memanfaatkan tag DIV di pembuka posting. Jika anda .... dst</div>

Catatan & Keterangan

Untuk merubah ukuran font drop caps, silahkan rubah nilai pada
font:50px/18px Georgia, Times New Roman, Times, serif;
Jika pengaturan posisi drop caps diperlukan, lakukan perubahan nilai pada :
padding:2px 5px 0 0;
nilai 2px untuk pengaturan naik turunnya font, 5px untuk mengatur jarak dengan huruf selanjutnya.
text-align:justify; untuk bentuk posting rata kanan-kiri. Untuk merubah ke bentuk rata kiri ganti justify dengan left.
Sesuaikan warna font drop caps dengan merubah warna yang terdapat di code color:#0099FF;. Anda bisa mengganti kode yang berwarna merah dengan kode warna dalam bentuk angka dan huruf atau dalam bentuk teks seperti red, blue, orange dan yang lainnya.
Jika ingin menghilangkan text-shadow, buang kode text-shadow:2px 1px 1px #FF9900;

Tutorial Lain

Slahkan buka tutorial lain yang bisa melengkapi tutorial di blog ini!

Cara Membuat Tag Cloud CSS3 dengan Efek pada Background & Color Link

2010-10-26T12:15:00.001-07:00

Sebelum melangkah lebih jauh untuk membuat tag cloud CSS3 dengan background effect ini, terlebih dahulu kita akan mencoba memahami apa yang dimaksud tagcloud beserta fungsinya seta beberapa jenis tagcloud yang ada.

Tagcloud merupakan sebuah box yang berfungsi sebagai wadah bagi sekelompok link dalam sebuah web. Pada umumnya difungsikan sebagai wadah beberapa link dari posting yang telah diterbitkan. Model penulisan setiap link judul posting pada tagcloud di buat dalam berbagai variasi bentuk, ukuran dan gaya. Variable HTML pembentuk tagcloud dapat menggunakan kode css dan xhtml saja, atau bisa terjadi juga memanfaatkan javascript untuk memperoleh efek-efek yang tidak memungkinkan bila hanya menggunakan kode css. Penggunaan kode yang berbeda ini tentunya juga mempunyai nilai plus dan minus karena disamping efek yang ditimbulkan berbeda, beban yang termuat dalam desain templatepun akan berbeda pula.

Penggunaan kode css (murni) sebagai pembentuk tagcloud mempunyai nilai lebih pada sisi ringannya beban muatan kode html yang ditanggung sebuah blog. Di luar itu dengan hadirnya CSS3, kini banyak efek indah bisa dibuat tanpa bantuan javascript. Jika kita membandingkan dengan tag cloud yang dibuat menggunakan javascrip, tagcloud CSS ini tak akan menjadi terlihat mengecewakan karena background efect dibuat dengan memanfaatkan CSS3 transition hingga ada semacam animasi/fade efect yang muncul saat tersentuh cursor. Untuk menjadi perhatian pula bahwa sekalipun javascript mampu menciptakan berbagai efek yang sangat indah, namun penggunaan script yang berlebihan akan sangat mempengaruhi beban dan loading. Bagi mereka yang mempunyai akses internet dengan kecepatan super, masalah loading tidaklah menjadi problem, tetapi karena akses terhadap sebuah blog bersifat umum (semua orang akan mengakses) dan banyak di antaranya yang loadingnya lambat, maka apabila sebuah blog terlalu berat maka sebagian dari mereka yang menggunakan modem dengan kecepatan lambat akan (malas membuka karena loading yang lama).

Dengan berbagai konskwensi seperti tersebut di atas, sekarang tinggal bergantung kepada pemilik blog. Tagcloud seperti apakah yang akan dimanfaatkan untuk melengkapi penampilan blognya?

Jika anda penasaran untuk melihat CSS3 Tag Cloud, silahkan klik DEMO!

D E M O

Cara Membuat CSS Tag Cloud dengan Background Effect :

Login ke Blogger (Login to Blogger).
Dasbor (Dasboard).
KLIK Design/Rancangan.
KLIK Edit HTML.
Back-up Templates : Amankan template dengan cara :
- KLIK Download Template Lengkap (Download Full Template).
- Simpan Template di folder PC.
- Kembali ke Edit HTML.
Cari KODE ]]></b:skin> .
Copy paste KODE CSS berikut dan letakkan di atas kode ]]></b:skin> .
KLIK Simpan Template (SAVE Template).

KODE CSS :

.tagcloud {
       width:300px;
       margin:10px auto;
       font-family:Times;
       text-align:center;       
       padding:15px 8px;
       border:solid 1px #eee; 
       background:#fff;
}
.tcloud { 
       padding:3px 6px;
       text-decoration:none;
       -o-transition:all 0.6s ease-in;
       -moz-transition:all 0.6s ease-in;
       -webkit-transition:all 0.6s ease-in;       
}
.tcloud:link {
       color:#003EBA;
}
.tcloud:visited {
       color:#ff900;
}
.tcloud:hover {
       color:#ffffff;
       background:#003EBA;
       text-decoration:none;      
}
.tcloud:active {
       color:#ffffff;
       background:#5D7CBA;
}

Cara Menggunakan Kode HTML :

Setelah dasbor anda akan masuk di Page Element/Elemen Laman. KLIK Add a Gadget.
Setelah terlihat beberapa widget, pilih dan KLIK HTML/Javascript.
Akan disediakan sebuah box untuk menambah widget. Copy-paste xHTML ke dalam box.
KLIK Simpan/SAVE.
Buka halaman blog dan lihat hasilnya.

xHTML

<div class="tagcloud">
<a style="font-size:10px" class="tcloud" href="Link-1" title="Title Link-1">Nama Link-1</a>
<a style="font-size:16px" class="tcloud" href="Link-2" title="Title Link-2">Nama Link-2</a>
<a style="font-size:18px" class="tcloud" href="Link-3" title="Title Link-3">Nama Link-3</a>
<a style="font-size:14px" class="tcloud" href="Link-4" title="Title Link-4">Nama Link-4</a>
<a style="font-size:27px" class="tcloud" href="Link-5" title="Title Link-5">Nama Link-5</a>
<a style="font-size:22px" class="tcloud" href="Link-6" title="Title Link-6">Nama Link-6</a>
<a style="font-size:14px" class="tcloud" href="Link-7" title="Title Link-7">Nama Link-7</a>
<a style="font-size:18px" class="tcloud" href="Link-8" title="Title Link-8">Nama Link-8</a>
<a style="font-size:10px" class="tcloud" href="Link-9" title="Title Link-9">Nama Link-9</a>
<a style="font-size:14px" class="tcloud" href="Link-10" title="Title Link-10">Nama Link-10</a>
</div>

Keterangan:

Link-1 s/d Link-10 bisa diperbanyak disesuaikan dengan dengan jumlah link yang akan ditampilkan.
Link-1 s/d Link-10 adalah link posting yang telah diterbitkan dengan URL seperti misalnya :
http://..../....../judul posting.html
Nama Link-1 s/d Link-10 = Judul Posting/menu.
Title Link berisikan penjelasan singkat Nama Link.

Tutorial Lain

Slahkan buka tutorial lain yang bisa melengkapi tutorial di blog ini!

Promosikan Blog Anda di "Tecnorati Baru"

2010-04-20T21:16:00.000-07:00

TECHNORATI BARU

Setelah sekian lama nggak pernah sowan di Technorati, hari ini aku datang meminta maaf karena lupa berterima kasih dengan semua kebaikan yang telah diberikan selama berbulan-bulan. Orang memang biasa melupakan jasa yang telah disemaikan. Sifat yang manusiawi dan terkadang perlu di maklumi serta diberi maaf sebesar-besarnya (kecualui aku, tentunya !). Banyak yang telah berubah ternyata. Tidak hanya dandanannya yang terlihat lebih manis dan bersahabat, ternyata ada perubahan besar di layanan birokrasinya. Kalau dulu untuk sekedar minta tolong mempromosikan blog nggak perlu banyak thethek bengek, ternyata sekarang jauh lebih mremet dan butuh kesabaran extra. Terlalu banyak yang ngantri mungkin, ya? Atau karena nggak ada "markus" yang ikutan menjual jasa? He...he... Bener-bener bikin kepala panas, semangat melorot dan sedikit gondok setelah aku mencoba mempromosikan sebuah blog temanku yang mengeluh sampai meler-meler ingusnya! Aha... ini yang namanya tantangan. Ini yang namanya ujian mental! Dus..., akhirnya aku cuma bisa ngomong sama temanku. Sabar....sabar..., semua memang harus dihadapi dengan hati yang dingin. Nggak perlu kuatir. Segala sesuatu yang diupayakan dengan susah payah dan penuh kesabaran pasti akan mendatangkan berkah yang jauh lebih besar. Sambil menunggu proses penilaian dari Technorati, buatlah posting seperti biasanya. Syukur tantangan ini justru lebih memacu semangatmu. Jika dulu seminggu hanya satu posting, sekarang buatlah menjadi 3 posting. Percayalah Technorati hanya mau melihat kesungguhanmu nge-blog. Temanku hanya manggut-manggut dengan muka masam. Masih dongkol, kali.

Meskipun cara untuk melakukan promosi di Technorati telah aku posting dengan cukup detail (bisa kamu buka di sini.), dengan menyertakan beberapa gambar untuk memvisualisasikan prosedur yang memang cukup sulit, karena banyak hal yang sudah berubah maka kita akan pelajari bersama langkah-langkah yang mesti dilakukan.

Langkah melakukan promosi blog di "Technorati baru" Tahap-1 :

Sign Up
Gunakan alamat ini untuk memulai promosi http://technorati.com/account/signup/. Atau kamu bisa juga "KLIK" di sini.

Real first name :
Isi dengan nama depan kamu seperti di email.

Real last name :
Isi dengan nama belakang kamu seperti di email.

Member name :
Tulis nama untuk member (User Name).

Email address :
Tulis email kamu di box yang telah disediakan. Tulis kembali di box bawahnya (Comfirm Email).

Password
Tulis Password dan ulangi kembali untuk box bawahnya.

Character
Tuliskan karakter yang telah disediakan pada box di sebelah kanannya.

Agreement
Beri persetujuan dengan memberi tanda pada box kecil tanda persetujuan di sebelahnya.

Join
KLIK "KLIK button Join".

Tahap-2

Account Activation
Buka email kamu dan "KLIK" link aktivasi akun dari Technorati dibawah teks :
You're almost ready to start using Technorati! To verify your email address and get started, please go to:

Account Activated!
Akun telah anda telah di aktifkan. oleh Technorati. Segera "KLIK" Sign in.

Member Login!
Tulis Member Name (User Name) kamu kemudian KLIK button Login.

My Profile
Perhatikan ujung atas sebelah kanan. Di sebelah kiri Image Profile terdapat Member Name (User Name). Klik Namamu tersebut untuk masuk ke akun kamu (My Profile).

Starting Claim
Di ujung terbawah halaman My Profile terdapat box dengan kalimat Start a blog Claim - ..... - claim. Ketikkan URL blog yang akan kamu klaimkan
Contoh : http://bloggerstuars.blogspot.com

Claim a New Blog
Terlihat sebuah halaman baru dengan judul seperti di atas. Beberapa hal yang berkaitan dengan identitas dan deskripsi blog yang kamu klaimkan harus di sampaikan di halaman ini.
- Blog title :
  Tulis dengan jelas nama blog kamu.
- URL :
  URL blog ditulis seperti : http://bloggerstars.blogspot.com
- URL Feed :
  URL Feed untuk blogger bisa menggunakan :
  1. URL blog kamu/feeds/posts/default
  2. URL blog kamu/feeds/posts/default
  3. Kalau dari Feedburner misalnya : http://feeds.feedburner.com/blogspot/....
- Linking Blog :
  Tulis URL blog yang ngelink ke blog kamu. Atau kamu tuliskan URL blog-blog yang kamu punya.
- Site Description :
  Tulis dalam bahasa Inggris seputar blog yang kamu ingin klaimkan.
- Site Categories :
  Pilih diantara kategori yang tersedia dengan KLIK box yang tersedia (max=3).
- Site Tags :
  Kamu tulis keyword (kata yang paling sering atau penting digunakan ketika posting dalam setiap kolom-kolom kecil yang disediakan cukup banyak tersebut.
- Proceed to the Next Step
  KLIK button tersebut.

Lihat Email
Tunggu hingga proses di atas selesai kemudian buka email kamu. Ambil Claim Token yang bentuknya seperti ini : FEH2H4GUJKLD (hanya contoh!). Terbitkan di ruang posting blog yang kamu klaimkan. Nggak usah disertakan judul atau apapun karena hanya digunakan sebagai bukti oleh Technorati bahwa kamu pemilik blog yang sedang di daftarkan untuk promosi sekaligus memastikan kamu penulis dari blog tersebut.

Check Claim
Kembali buka halaman My Profile. Langsung ke bagian terbawah. "KLIK" Check Claim box.

Claim Status
Ini hanyalah verifikasi ulang yang dilakukan Technorati. "KLIK" Verify Claim Token.

Periksa Email
Kembali kamu harus membuka email kamu. Perhatikan email yang kamu terima dari Technorati. Thank you for submitting your blog claim on Technorati. We have successfully crawled your blog and found the claim token, and your claim is now awaiting review.

Hapus Claim Token
Hapus Claim Token dari halaman posting anda karena telah terdeteksi oleh Technorati.

Harus Menunggu ?
Buka Halaman My Profile di Technorati. Jika blog anda sudah ditampilkan, berati ada dua kemungkinan.
- Proses registrasi langsung bisa diselesaikan.
  Bila proses registrasi kamu berjalan dengan sangat bagus tanpa diharuskan menunggu penilaian Technorati, ikuti langkah ke-3!
- Masih harus menunggu penilaian.
  Tetaplah rajin membuat posting dan cobalah untuk selalu melakukan cek ulang di Technorati dengan membuka halaman My Profile atau anda coba cek email anda.

Tahap ke-3 :

Favourite Buttons
Kamu akan dipersilahkan memilih beberapa buah button favourite yang berisi link ke Technotrati. Pilih yang kamu suka, copy kode htmlnya dan simpan di template kamu. Terserah mau kasih di sidebar atau di mana yang jelas menggunakan penambahan widget.

Save Blog Info
"KLIK" dan proses klaim blog anda selesai. Silahkan posting serutin mungkin untuk menggapai popularitas. Nantikan rejeki yang akan mengalir ke kantong kamu. dan jangan lupa :

Pesan Eyang Kakung:

Berbagilah kamu senantiasa dalam keadaan susah dan senang ! Maksud eyang kakung tentunya bagi-bagi du'it

Creating a Simple Tag Cloud Using Background Effects

2010-04-15T18:58:00.000-07:00

Sebelum melangkah lebih jauh untuk membuat tagcloud dengan memanfaatkan efek background, terlebih dahulu kita akan mencoba memahami apa yang dimaksud tagcloud beserta fungsinya seta beberapa jenis tagcloud yang ada.

Tagcloud merupakan sebuah box yang berfungsi sebagai wadah bagi sekelompok link dalam sebuah web. Pada umumnya difungsikan sebagai wadah beberapa link dari posting yang telah diterbitkan. Model penulisan setiap link judul posting pada tagcloud di buat dalam berbagai variasi bentuk, ukuran dan gaya. Variable HTML pembentuk tagcloud dapat menggunakan kode css dan xhtml saja, atau bisa terjadi juga memanfaatkan javascript untuk memperoleh efek-efek yang tidak memungkinkan bila hanya menggunakan kode css. Penggunaan kode yang berbeda ini tentunya juga mempunyai nilai plus dan minus karena disamping efek yang ditimbulkan berbeda, beban yang termuat dalam desain templatepun akan berbeda pula.

Penggunaan kode css (murni) sebagai pembentuk tagcloud mempunyai nilai lebih pada sisi ringannya beban muatan kode html yang ditanggung sebuah blog, sehingga relatif tidak mempengaruhi kecepatan loading. Meskipun penggunaan javascript mampu menciptakan berbagai efek yang memperindah penampilan sebuah blog, namun penggunaan script yang berlebihan akan sangat mempengaruhi beban dan loading. Bagi mereka yang mempunyai akses internet dengan kecepatan super, masalah loading tidaklah menjadi problem, tetapi karena akses terhadap sebuah blog bersifat umum (semua orang akan mengakses), maka apabila sebuah blog terlalu berat maka blog tersebut mejadi jarang di buka orang (malas karena nunggunya lama).

Dengan berbagai konskwensi seperti tersebut di atas, sekarang tinggal bergantung kepada pemilik blog. Tagcloud seperti apakah yang akan dimanfaatkan untuk melengkapi penampilan blognya?

Cara Membuat CSS Tacloud menggunakan efek background :

Login ke Blogger (Login to Blogger).
Dasbor (Dasboard).
KLIK Design (Rancangan).
KLIK Edit HTML.
Back-up Template : Amankan template dengan cara :
- KLIK Download Template Lengkap (Download Full Template).
- Simpan Template di folder PC.
Cari KODE ]]></b:skin> .
Copy paste KODE CSS berikut dan letakkan di atas kode ]]></b:skin> .
KLIK Simpan Template (SAVE Template).

KODE CSS :

.tagcloud {
       width:300px;
       font-family:Times;
       padding:15px 8px;
       border:solid 1px #eee; 
       background:#fff;
}
.tcloud { 
       padding:3px 6px;
       text-decoration:none;
}
.tcloud:link {
       color:#003EBA;
}
.tcloud:visited {
       color:#ff900;
}
.tcloud:hover {
       color:#ffffff;
       background:#003EBA;
}
.tcloud:active {
       color:#ffffff;
       background:#5D7CBA;
}

xHTML

Copy xHTML di bawah ini dan simpan melalui Add a Gadget (tambah Gadget) di Elemen Laman.

<div class="tagcloud">
<a style="font-size:10px" class="tcloud" href="Link-1" title="Title Link-1">Nama Link-1</a>
<a style="font-size:16px" class="tcloud" href="Link-2" title="Title Link-2">Nama Link-2</a>
<a style="font-size:18px" class="tcloud" href="Link-3" title="Title Link-3">Nama Link-3</a>
<a style="font-size:14px" class="tcloud" href="Link-4" title="Title Link-4">Nama Link-4</a>
<a style="font-size:27px" class="tcloud" href="Link-5" title="Title Link-5">Nama Link-5</a>
<a style="font-size:22px" class="tcloud" href="Link-6" title="Title Link-6">Nama Link-6</a>
<a style="font-size:14px" class="tcloud" href="Link-7" title="Title Link-7">Nama Link-7</a>
<a style="font-size:18px" class="tcloud" href="Link-8" title="Title Link-8">Nama Link-8</a>
<a style="font-size:10px" class="tcloud" href="Link-9" title="Title Link-9">Nama Link-9</a>
<a style="font-size:14px" class="tcloud" href="Link-10" title="Title Link-10">Nama Link-10</a>
</div>

Keterangan :

1. Link-1 s/d Link-10 : bisa diperbanyak disesuaikan dengan dengan jumlah link yang akan ditampilkan.
2. Link-1 s/d Link-10 : link posting yang telah diterbitkan dengan URL seperti misalnya :
http://..../....../judul posting.html
3. Nama Link-1 s/d Link-10 = Judul Posting.
4. Title Link : berisikan penjelasan singkat Nama Link.

Tutorial Lain

Slahkan buka tutorial lain yang bisa melengkapi tutorial di blog ini!

Cara Posting Kode HTML

2010-04-07T12:18:00.000-07:00

Posting kode html sebenarnya hampir sama dengan posting dalam bentuk teks yang lain. Sedikit perbedaan hanya terjadi pada beberapa kode tertentu seperti tanda lebih kecil dari (<) atau lebih besar dari (>), tanda petik (') atau tanda petik dua ("). Meskipun di luar kode-kode tersebut , masih ada beberapa kode lain yang harus dituliskan secara khusus, tetapi yang paling sering digunakan adalah 4 (empat) kode yang tertulis di atas. Itupun, untuk kode tanda petik dan tanda petik dua bisa dituliskan seperti apa adanya.

A. Tanda < dan tanda > digunakan pada kode html seperti :

<script type="text/javascript">
.....
.....
.....
</script>

atau contoh yang lain misalnya :

<style type="text/css">
.....
.....
.....
</style>

Juga pada KODE seperti :

1. <link href="http://....../...../font.css rel="stylesheet" type="text/css" />

2. < script src="http://...../...../jquery.1.3.2.min.js" type="text/javascript">
3. <img src="http://...../...../...../gadis.jpg" width="200" height="300" />

4. <a href="http://bloggerstuars.blogspot.com>bloggerstars-1</a>

B. Cara menuliskan tanda < dan > dalam kode html :

1. tanda < dituliskan sebagai < .

Contoh : <script .....

ditulis : <script .....

2. Tanda > dituliskan sebagai >

Contoh : ..../gadis.jpg/>

ditulis : ..../gadis.jpg/>

C. Tanda (') dan (") mempunyai fungsi sama dan jika ingin menuliskan dalam bentuk khusus silahkan dituliskan sebagai " .

Cara Menggunakan Link

2009-12-07T13:59:00.000-08:00

Link pada dasarnya merupakan sebuah alamat pada suatu dokumen HTML. Dalam sebuah web atau blog sebuah link dapat dengan cepat dikenali dengan perubahan yang terjadi pada bentuk cursor, warna/ukran teks, perubahan gambar dan banyak bentuk yang lain bergantung kepada pemilik blog dalam menggunakan "KODE" di templatenya. Melalui perintah dalam bentuk KODE tertentu, maka sebuah link akan membuat perpindahan dari satu bagian ke bagian yang lain, baik dalam web itu sendiri ataupun perpindahan ke window yang baru. Berdasarkan fungsinya, link dibedakan menjadi 3 jenis link:

1. Link Relatif.
2. Link Absolut, dan
3. Link dalam dokumen yang sama.

Kode sebuah link :

<a href="Alamat">Nama Alamat</a>

1. Link untuk perpindahan ke web baru :

Contoh :

Untuk membuat blog baru, silahkan kunjungi blogger.com,

Bentuk linknya :

Untuk membuat blog baru silahkan kunjungi <a href="http://www.blogger.com">blogger.com</a>

D E M O :

KLIK di sini untuk membuat blog baru

2. Link untuk window baru (IE) atau tab baru (Opera dan Mozzila).

Apabila kita menggunakan KODE seperti di bawah ini, maka ketika sebuah link di KLIK, maka web yang tertulis dalam link akan di buka di window baru (di IE) atau tab baru (di Mozzila dan Opera).

Untuk membuat blog baru silahkan kunjungi <a href="www.blogger.com" target="_blank" >blogger.com</a>

D E M O :

KLIK di sini untuk membuat blog baru

3. Link untuk perpindahan ke bagian yang lain dalam dokumen yang sama (dalam satu halaman blog).

Dengan menggunakan fungsi link, maka perpindahan dari satu bagian ke bagian yang lain dalam satu dokumen dapat dilakukan dengan sangat cepat tanpa harus melakukan scrolling. Fungsi ini biasanya dimanfaatkan untuk perpindahan secara cepat ke bagian atas blog (TOP), ke paragraf lain, artikel(posting) lain, atau ke bab lain.

KODE yang digunakan :

a. Ke bagian atas blog.

< href="#top">- Kembali ke Atas/TOP -</a>

b. Ke judul artikel, paragraf atau bab lain.

Cara membuat link :

Tambahkan KODE seperti di bawah pada setiap judul, paragraf atau bab dalam sebuah posting.

Untuk Judul, paragraf atau bab:

<a name="Judul/paragraf/bab">Teks lengkap Judul/paragraf/bab</a/a>

Link yang harus dibuat :

<a href="Judul/paragraf/bab">- ke Judul/paragraf/bab -</a/a>

Contoh :

1. Bab 5 adalah Pemanfaatan Link Untuk Perpindahan Bagian Posting

Tulis bab 5 sebagai :

<a name="bab5">ke Bab 5: Pemanfaatan Link Untuk Perpindahan Paragraf/bab Posting</a>

Tulis Link untuk ke bab 5 seperti ini :

<a href="#bab5">KLIK di sini untuk kembali ke Bab 5 : Pemanfaatan Link Untuk Perpindahan Paragraf/bab Posting</a>

D E M O :

KLIK di sini untuk kembali ke bagian : Link untuk perpindahan ke web baru

2. Kembali ke Judul Posting:

<a name="judul">Link pada dasarnya</a>

"Teks Link pada dasarnya" di gunakan untuk link karena tempatnya paling dekat dengan judul posting. Coba lihat teks di bawah judul yang berwarna kuning!!!

Untuk kembali ke judul, KODE yang digunakan adalah :

<a href="judul">Kembali ke Judul Posting</a>

D E M O :

KLIK Kembali ke Judul Posting di bawah ini untuk kembali ke Bagian teratas posting:

Kembali ke Judul Posting

Bouncescroll Text

2009-12-01T13:40:00.000-08:00

Bouncescroll text berfungsi untuk menampilkan animasi teks yang bergerak seperti gelombang sinusoidal dengan kecepatan gerak bounce serta tinggi gelombang sinus (distance) serta kecepatan scroll yang dapat diatur. Dengan perubahan pada variable distance semakin besar, maka bentuk gelombang yang diciptakan akan semakin besar. Demikian juga, penambahan nilai variabel scrollspeed dan bouncespeed akan membuat gerak teks semakin bertambah cepat.

Cara membuat Bouncescroll Text :

Copypaste bouncescroll.js di bawah ini dan upload di file/javascript hosting:

2. Copypaste Javascript berikut dan letakkan di bagian body di antara <body> dan </body> bersama bouncescroll.js hasil upload anda, sehingga dengan susunan seperti di bawah ini :

<script language="JavaScript">
var author="";
var text="Selamat Datang! gubhugreyot-bloggerstars1";
var textfont="Helvetica";
var textcolor="fdb902";
var textstyle="bold";
var textsize="26";
var scrollspeed="4";
var bouncespeed="1";
var distance="600";
var posy="600";
var regkey="";
var reglink="";
var regtarget="";
</script>

<script type="text/javascript" src="http://......./bouncescroll.js"></script>

KODE berwarna kuning dapat di rubah di disesuaikan dengan keinginan pengguna :

- Selamat Datang! gubhugreyot-bloggerstars1 : teks yang ditampilkan.
- Helvetica : jenis font bisa diganti dengan arial, cursive atau verdana.
- fdb902 : warna teks.
- bold : style teks bisa diganti dengan italic.
- 26 : ukuran font.
- 4 : kecepatan scroll (arah atas bawah)--> semakin besar semakin cepat.
- 1 : kecepatan bounce (arah teks bergerak) --> semakin besar semakin cepat.
- 600 : distance --> tinggi gelombang gerak dalam pixel.
- 600 : posisi teks dari batas atas (header).

Catatan :

- Sebelum melakukan penambahan animasi ini sebaiknya amankan template terlebih dahulu.

Drop in Content Box

2009-11-25T09:28:00.000-08:00

Drop in Content Box bisa dimanfaatkan untuk menyampaikan kata sambutan yang berupa ucapan selamat datang, pesan kepada pembaca, iklan, memuat gambar/photo atau mungkin profil blogger dengan menampilkan secara bersamaan antara foto dan identitas yang layak diketahui pemngunjung blog. Fungsi yang cenderung fleksibel ini membuat drop in content box menjadi sangat layak untuk di dayagunakan guna melengkapi dan menambah daya tarik blog.

Cara membuat drop in content box :

1. Lakukan pengamanan template terlebih dahulu dengan cara :

Login ke Blogger --> Tata letak --> Edit HTML -->

Download Template Lengkap --> Simpan di Folder PC

2. Tetap di Edit HTML.

- Cari KODE ]]></b:skin>

3. Letakkan KODE CSS berikut persis di atas ]]></b:skin>

<style type="text/css">
#BGSdropinGRcover{
width: 330px; /*change width to desired */
height: 300px; /*change height to desired. REMOVE if you wish box to be content's natural height */
position:absolute; /*Don't change below 4 rules*/
z-index: 100;
overflow:hidden;
visibility: hidden;
}
#BGSdropinGR{
font-weight:bolder;
color:#00FF99;
width: 302px; /*change width to above width-20. */
height: 280px; /*change height to above height-20. REMOVE if you wish box to be content's natural height*/
margin:0;
border: 8px double magenta; /*Customize box appearance*/
background: #404041;
padding: 4px;
position:absolute; /*Don't change below 3 rules */
left: 0;
top: 0;
}
</style>

4. Letakkan javascript berikut persis di bawah ]]></b:skin>

5. Letakkan KODE berikut pada bagian <body> :

<div id="BGSdropinGRcover">
<div id="BGSdropinGR">
<center><a href="#" onClick="dismissboxv2();return false" style="background:#6699FF; border:2px solid #666666;padding:2px; border:2px solid #CC3300; font-size:12px;"> - CLOSE - </a><br />
<img src="http://www.wallpapers3dvistaxp.com/mfiles/6940hb.jpg" style="width:200px; height:100px;"/><br />
Drop in Content Box bisa dimanfaatkan untuk menyampaikan kata sambutan, ucapan selamat datang, pesan kepada pembaca, iklan, memuat gambar atau mungkin profil blogger dengan menampilkan secara bersamaan antara foto dan identitas yang layak diketahui pemngunjung blog.<br />
<font style=" background:black; border:1px solid #990000; font-weight:bolder; "><a href="http://gubhugreyot.blogspot.com">bloggerstars1 - gubhug reyot</a></font></center>

6. KLIK Simpan Template.

7. Lihat hasilnya dengan membuka blog.

Catatan :

- KODE yang berwarna merah, oranye dan hijau di atas (no. 5), silahkan untuk disesuaikan dengan kebutuhan blog anda !

Duble Click to Top Page

2009-11-25T08:58:00.000-08:00

Memberi kemudahan kepada pengunjung blog merupakan salah satu bentuk layanan yang tentunya akan sangat dihargai. Double Click to Top Page bermanfaat saat pembaca blog hendak kembali ke halaman blog di bagian teratas, setelah menghabiskan waktunya menjelajahi blog hingga ke bagian paling dasar. Rangkaian script di bawah berfungsi untuk menterjemahkan fungsi tersebut. Hanya dengan melakukan KLIK dua kali secara berurutan (doble click) pada mouse, maka halaman teratas blog akan tersaji di depan mata dalam hitungan sepersekian detik.

Cara pembuatan double click to top page:

1. Lakukan pengamanan template terlebih dahulu dengan cara :

Login ke Blogger --> Tata letak --> Edit HTML -->

Download Template Lengkap --> Simpan di Folder PC

2. Tetap di Edit HTML.

- Cari KODE ]]></b:skin>

3. Letakkan KODE berikut persis di bawah ]]></b:skin>

<script language="JavaScript1.2">
function dblclick() {
window.scrollTo(0,0)
}
if (document.layers) {
document.captureEvents(Event.ONDBLCLICK);
}
document.ondblclick=dblclick;
</script>

4. KLIK Simpan Template.

5. Coba hasilnya dengan membuka blog.

Catatan :

- KLIK Ctrl + F pada keyboard secara bersamaan untuk memudahkan pencarian KODE ]]></b:skin>

Slide Calendar

2009-11-25T02:29:00.000-08:00

Slide Calendar merupakan sebuah kalender yang sangat praktis dengan manfaat yang benar-benar terasakan. Meskipun hanya menggunakan secuil javascript yang sangat ringkas, kalender mampu menampilkan penanda hari, tanggal, bulan dan tahun. Bentuknya yang mungil,membuat halaman blog tidak bertambah semrawut melainkan justru membuat tampilannya semakin cakep.

Cara membuat Slide Calendar :

1. Lakukan pengamanan template terlebih dahulu dengan cara :

Login ke Blogger --> Tata letak --> Edit HTML -->

Download Template Lengkap --> Simpan di Folder PC

2. Tetap di Edit HTML.

- Cari KODE <body>

- Copy paste KODE berikut dan letakkan persis di bawah KODE <body>

<b><font size="3" color="#3b32fd" face="cursive"><marquee align="left" behavior="slide" width="250" direction="right" loop="0">
<script type="text/javascript">
/* bloggerstars - gubhug reyot */
var dayNames = new Array("Minggu","Senin","Selasa","Rabu","Kamis","Jum'at","Sabtu");
var monthNames = new Array("Januari","Febuari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember");
var now = new Date();
document.write(dayNames[now.getDay()] + ", " + now.getDate() + " " + monthNames[now.getMonth()] + ", "+ (2009) );
</script>
</marquee></font></b>

3. KLIK Simpan Template.

4. Buka blog untuk melihat hasilnya !

Catatan :

- Gunakan Ctrl + F (di keyboard) untuk memudahkan saat mencari KODE <body>
- Saat tahun 2009 berakhir, ganti 2009 dengan 2010.

Membuat Link Pelangi

2009-11-24T15:51:00.000-08:00

Dari nama pelangi yang dipergunakan, kiranya sudah cukup jelas arti judul di atas. Kalau pada umumnya link pada sebuah blog hanya berupa teks satu warna, dengan memanfaatkan javascript di bawah ini maka seluruh link yang terdapat dalam blog akan terlihat sebagai teks dengan warna yang berubah-ubah seperti warna-warna pelangi.

Cara membuat link pelangi :

1. Amankan template terlebih dahulu dengan cara :

Login ke Blogger --> Tata Letak --> Edit HTML -->

Download Template Lengkap --> Simpan di Folder PC

2. Copy KODE berikut dan tempatkan pada bagian head di atas ]]></b:skin>

3. Ganti KODE <body> dengan KODE <body onLoad="start()">

4. Simpan Template.

5. Buka blog untuk melihat hasilnya.

Catatan :

- Untuk mempermudah pencarian KODE ]]></b:skin> dan <body> , KLIK secara bersamaan Ctrl+F

Mengatasi Trouble Pemasangan Javascript

2009-11-24T15:06:00.000-08:00

Meskipun hampir semua javascript dapat dengan mudah terpasang pada template, beberapa javascript dengan KODE tertentu (seperti misalnya &) menjadi sulit terpasang karena ditolak saat dilakukan proses penyimpanan di bagian tag head atau body. Untuk mengatasi permasalahan ini, biasanya penyimpanan kemudian dilakukan lewat penambahan gadget atau dengan di upload terlebih dahulu di file hosting. Apabila javascript tersebut berisikan KODE dengan variable yang tidak perlu dirubah-rubah tidaklah menjadi persoalan. Berbeda yang terjadi, seandainya beberapa variable javascript yang kita pergunakan tersebut pada saat-saat tertentu harus selalu dilakukan perubahan. Untuk mengatasi persoalan ini, mungkin KODE di bawah bisa menjadi solusinya.

- KODE yang biasa dipakai:

<script type="text/javascript">

ISI JAVASCRIPT

</script>

- Ganti KODE menjadi seperti di bawah ini :

<script type='text/javascript'>
//<![CDATA[

ISI JAVASCRIPT

//]]>
</script>

Mendayagunakan Margin pada Posting Gambar

2009-11-24T07:18:00.000-08:00

Margin pada sebuah posting gambar atau photo sering kali tidak begitu diperhatikan dan dimanfaatkan dengan baik oleh para blogger saat melakukan posting, karena pemahaman yang kurang tentang KODE HTML, khususnya yang berkaitan dengan margin. Keteledoran ini mengakibatkan gambar atau photo terpostingkan begitu saja tanpa ada upaya untuk membuat penataan dengan memanfaatkan margin yang tersedia. Pada dasarnya, besaran angka margin merupakan nilai yang digunakan untuk mengatur jarak antara suatu bidang dengan bidang yang lain, yang pada penggunaanya memberi keleluasaan blogger untuk mengatur jarak pada ke 4 sisi bidang. Margin atas untuk mengatur jarak bagian atas, margin kanan untuk mengatur jarak bagian kanan, margin bawah untuk mengatur jarak dengan bidang di bawahnya dan margin kiri digunakan untuk mengatur jarak dengan bidang (garis, gambar atau teks) yang berada di sebelah kirinya. Pengaturan margin memungkinkan blogger untuk membuat penataan yang diinginkan saat melakukan posting gambar ataupun photo yang disertai teks. Hal yang perlu diperhatikan adalah, pengaturan margin untuk penataan gambar hanya bisa dilakukan pada saat dilakukan posting pada menu POSTING EDIT HTML.

Contoh KODE Gambar atau Photo pada menu Posting Edit HTML:

- Apabila KODE gambar ini dipergunakan seperti apa adanya, maka pola susunan gambar yang di hasilkan saat posting adalah seperti di bawah ini :

Gambar posting yang di buat tanpa perubahan nilai margin akan menghasilkan pola tampilan gambar dan teks seperti ini.
Pada posting ini terlihat betapa gambar bagian atas terlihat terlalu menonjol ke atas melebihi teks

- Pemanfaatan margin untuk merubah pola tampilan (posisi gambar) :

Penataan posisi gambar bisa dilakukan dengan cara merubah nilai margin untuk memperoleh pola penataan yang tertata dan sesuai sehingga mampu memberikan penampilan yang indah serta rapi.

margin yang dipergunakan pada gambar di sebelah adalah : margin: 25px 20px 10px 20px;

- Pemanfaatan penggunaan margin akan lebih terasakan pada saat dalam satu posting menampilkan lebih dari satu gambar/photo.

Tips Memasang KODE CSS baru

2009-11-24T06:55:00.000-08:00

Sebelum memasang KODE HTML baru, terutama yang berupa KODE CSS, beberapa hal yang berkaitan dengan pola pemasangan KODE HTML harus diperhatikan supaya KODE yang baru tidak justru mengakibatkan perubahan yang tidak diharapkan pada blog.

1. Penambahan KODE pada sebuah sintak:

- Contoh :

.sidebar{
color:#c1edec;
line-height:0.5em;
padding-top:5px;
}

Penambahan KODE baru dilakukan dengan cara menempatkan KODE sebelum tanda } ,

Bentuk sintak setelah dilakukan penambahan KODE baru :

.sidebar{
color:#c1edec;
line-height:0.5em;
padding-top:5px;
background:#fff;
border:1px solid blue;
}

2. Penambahan kode pada body :

- Perhatikan bentuk huruf yang digunakan sebagai tambahan. Seringkali KODE body baru menggunakan KODE dalam huruf besar (BODY). Ubah KODE kebentuk seperti yang digunakan pada template. Misalnya :

- contoh :

BODY {
....
}

- KODE baru yang dipergunakan sebaiknya menggunakan standar template, seperti:

body {
....
}

3. Penambahan KODE pada <body>

Penambahan KODE pada biasanya dipergunakan pada saat kita menggunakan penggunaan KODE baru yang berupa Javascript.

- Contoh :

- <BODY on onload="rotate()">

Penggunaan HURUF besar pada KODE body terkadang berpengaruh.

- Rubahlah tetap dalam bentuk standar template, sehingga bentuknya menjadi :

- <body on onload="rotate()">

4. KODE CSS baru yang dibutuhkan saat menambahkan fungsi baru :

- contoh :

. menuddhorz {
background:#fff;
width:auto;
color:green;
border:1px solid #000;
}
.... dst
#menuddhorz li a {
...dst
}

- Letakkan KODE tersebut di atas KODE ]]></b skin> dengan menambahkan KODE :

<style type="text/css">

KODE CSS Baru

</style>

5. Cara menambahkan KODE CSS baru yang tersimpan dalam file hosting :

Contoh alamat CSS yang dipergunakan :

- http://h1.ripway.com/GR_menuhorz.css
- KODE di tempatkan di atas KODE ]]></b skin> dengan bentuk penulisan KODE :

<link href="http://h1.ripway.com/GR_menuhorz.css" rel="stylesheet" type="text/css">

Catatan :

- Sebaiknya semua penulisan KODE HTML pada template selalu menggunakan huruf kecil !!

Menambah Widget di atas Halaman Posting

2009-11-23T11:18:00.000-08:00

Pada blog baru, biasanya widget hanya ada di bagian footer dan sidebar sehingga penambahan gadget baru hanya bisa dilakukan pada elemen tersebut. Supaya mempunyai tempat yang lebih lebih leluasa dalam menempatkan penambahan gadget baru, kita bisa menambahkan widget baru di beberapa bagian pada blog. Salah satunya adalah di atas halaman posting.

Cara menambah widget di atas halaman posting :

1. Amankan template terlebih dahulu dengan cara :

Login ke Blogger --> Tata Letak --> Edit HTML -->

Download Template Lengkap --> Simpan di Folder PC

2. tetap di Edit HTML

Cari KODE :

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>

3. Ganti 'no' menjadi 'yes' , sehingga kode berubah menjadi :

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='yes'>

4. Simpan Template.

5. Lihat hasilnya dengan membuka Elemen halaman.

Membuat Bingkai dan Background Link

2009-11-23T10:33:00.000-08:00

Link yang biasanya hanya berupa teks biasa, dengan sedikit menambahkan KODE css, bisa di tampilkan dalam bentuk berbeda yang membuat pengunjung blog menjadi lebih mudah dalam membedakan antara teks biasa dan teks yang merupakan link. Supaya perbedaan link menjadi lebih kentara, kita akan menambahkan sebuah background dan bingkai yang akan membuat link yang kita berikan juga tampil semakin cantik.

Cara membuat background dan bingkai link :

1. Amankan template terlebih dahulu dengan cara :

Login ke Blogger --> Tata Letak --> Edit HTML -->

Download Template Lengkap --> Simpan di Folder PC

2. Tetap di Edit HTML :

Edit HTML --> Cari KODE a:link ...dst yang berakhir dengan KODE }

KODE ini berada tidak jauh di bawah <head>

3. Ganti KODE di atas dengan :

a:link{
background:#fff url(http://i47.tinypic.com/2iqoc2w.jpg);
border:1px #b5ffb7 solid;
color:#c4c6e0;
text-decoration:none;
}

4. Kode yang berwarna hijau bisa dirubah untuk disesuaikan dengan warna blog:
- http://i47.tinypic.com/2iqoc2w.jpg --> background image link.
- 1px dan #b5ffb7 --> tebal dan warna border.
- #c4c6e0 --> warna teks link
- Untuk text-decoration bisa tetap atau diubah menurut selera.

5. Simpan Template.

6. Lihat blog untuk melihat hasilnya!

Beberapa Alternatif Koneksi Modem Smart Haier D 1200P

2009-11-19T09:22:00.000-08:00

Modem Smart Haier D 1200P akhir-akhir ini benar-benar sering bikin stress penggunanya. Tidak bisa disangkal lagi, peningkatan jumlah pengguna yang kurang seimbang dengan peningkatan kwalitas layanan menjadi faktor utama "lelet"nya akses. Sebagai pengguna yang hampir setengah tahun lebih menjadi konsumen setia Smart, saya bisa merasakan betapa jauh kecepatan akses dan loading modem saat awal dipasarkan hingga detik ini ketika layanan internet murah ini sudah membeludak pemakainya. Suatu hal yang wajar ketika sebuah harga murah akhirnya hanya mendapatkan layanan yang ala kadarnya juga. Untuk mengatasi sembelit koneksi Smart, kreatifitas diri menjadi bentuk solusi yang kadang menjadi penghibur hati. Hati mereka yang berkantong tipis tapi selalu pingin nge-net. Beberapa alternatif koneksi di bawah ini, akan sangat berarti bagi kalian yang tetap setia menggunakan Smart. Silahkan dicoba satu persatu mana yang paling cepat untuk digunakan di lokasi anda tinggal karena setiap lokasi akan berbeda dengan lokasi yang lain.

Langkah yang harus dilakukan untuk lebih mempercepat akses modem :

1. Lakukan instalasi ulang dengan menginstall Driver baru Haier D 1200P. Untuk mendapatkan software drivernya bisa download di http://www.smart.co.id/

2. Driver baru ini terutama berfungsi untuk meningkatkan kecepatan koneksi. Setelah aku coba , sangat jauh lebih cepat daripada driver bawaan dari paket modemnya. O...ya, supaya nggak bingung, setelah kamu masuk ke smart.co.id, kamu lihat saja di pojok kanan bagian tengah, KLIK "Setting dan Download". Setelah itu ada banyak pilihan, silahkan KLIK di "Smart Haier D 1200P"

3. Petunjuk Instalasi bisa di baca setelah download karena disertakan 1 paket dengan driver baru tersebut. Buat yang sementara ini sudah pakai si bandel, saya kira nggak akan mengalami kesulitan dalam instalasi ulang.

4. Langkah selanjutnya adalah untuk mempercepat loading dan download si bandel.

- Lakukan perubahan terhadap nomor phone number yang digunakan. Kamu bisa buat dua macam koneksi : pakai#777 dan yang satunya lagi yang baru. Coba saja nanti bandingkan hasilnya. Dari pengamatan selama saya menggunakannya, di saat phone number yang lama untuk koneksi sekalipun nggak mampu, dengan cara yang baru ini kita tetap dapat tersambung dengan amat mudahnya.

- Koneksi baru yang mujarab ini, sebagai berikut:

1. Create New Connection --> (Next) -->
2. Connect to the Internet --> (Next) -->
3. Setup my connection manually --> (Next) -->
4. Connect using a dial-up modem --> (Next) -->
5. Modem-VIA Telecom CBP USB Modem CDM (COM ...) --> (Next) -->
6. ISP Name :isi dengan sembarang teks --> (Next) -->
7. Phone Number : *31*111111# -deret angka 1 berjumlah 6x --> (Next) -->
8. User Name -Password- Confirm Password : smart -smart- smart --> (Next) -->
9. Add a shorcut to the connection to my desktop ---> Finish

Alternatif Koneksi yang lain :

1. Ganti Phone Number dengan : *31*11111#
2. Ganti Phone Number dengan : 080989999 atau 0809899999
- User Name -Password- Confirm Password : telkom-telkom-telkom
3. Ganti Phone Number dengan : 222
- User Name -Password- Confirm Password : smart-smart-smart
- Ganti Phone Number dengan : 777
- Ganti Phone Number dengan : 999

Changing Drop Down Menu

2009-11-19T07:38:00.000-08:00

Pemanfaatan Drop Down Menu sebagai salah satu alternatif tampilan menu blog akan sangat praktis dan membuat blog tampak lebih ringkas serta tak tampak berjubel. Drop down menu yang akan kita buat ini juga menjadi lebih menarik karena menu pada setiap link akan ditampilkan secara berurutan dengan mode putar. Nama menu pertama secara otomatis akan digantikan dengan kemunculan nama menu ke dua, ke tiga dan seterusnya hingga menu terakhir. Selain kemunculan bergilir setiap link menu, seluruh nama menu juga dapat ditampilkan secara bersamaan. Untuk membuka link menu yang inginkan, kita dapat lakukan hanya dengan mengKLIK "Go".

Cara membuat Changing Drop Down Menu :

1. Login ke Blogger --> Tata Letak --> Elemen Laman -->

Javascript/HTML --> Copy Paste KODE --> Simpan

KODE :

<script type="text/javascript">
/* bloggerstars-gubhug reyot*/
function formHandler(form) {
var URL = form.site.options[form.site.selectedIndex].value;
popup = window.open(URL,"MenuPopup");
}
</script>

<form name=form>
<select name=site SIZE=1 style="font-family:Times New Roman; font-weight:bold; color:blue; font-size:14px; background-color:#CCCC66; border:2px double #333333;">
<option value="http://link1.html">Sosial dan Budaya
<option value="http://link2.html">Ekonomi dan Sumber Daya Manusia
<option value="http://link3.html">Politik dan Pemerintahan
<option value="http://link4.html">Pakaian Adat Kalimantan Tengah
<option value="http://link5.html">Hukum dan Ketatanegaraan
<option value="http://link6.html">Pemuda dan Olahraga
<option value="http://link7.html">Lembaga Tinggi Negara
<option value="http://link8.html">Korupsi, KPK, Polisi dan Kejaksaan Agung
</select><input type="button" value="Go" onclick="formHandler(this.form);window.close()">
</form>

<script type="text/javascript">
function rotate() {
menu = document.form.site;
chosen = menu.selectedIndex;
menu.selectedIndex= (chosen == (menu.length-1)) ? 0 : chosen + 1;
setTimeout("rotate()",3000);
}
rotate();
</script>

2. Link1.html s/d Link8.html disesuaikan dengan link menu blog.
3. Nama setiap Link menu disesuaikan dengan nama setiap link menu blog.
4. Jumlah nama dan link menu disesuaikan kebutuhan blog.
5. Kecepatan pergantian nama link menu dapat dirubah dengan merubah nilai kecepatannya (3000).
6. Warna (color) dan background huruf juga bisa disesuaikan dengan merubah KODE warnanya.

Animasi javascript pada status bar

2009-11-09T10:05:00.000-08:00

Bar bagian paling bawah dari blog, atau sering juga disebut sebagai status bar, ternyata bisa juga diberi sentuhan effect animasi yang cukup menarik untuk diterapkan. Animasi dalam bentuk javascript ini memberi kesempatan kepada blogger untuk menampilkan teks dalam jumlah yang cukup banyak dan panjang. Karena kemampuan yang sangat fleksibel, kita dapat menyuguhkan berbagai kata, baik berupa kata sambutan maupun teks lain sepuas-puasnya. Aplikasi javascript inipun sangat mudah dilakukan.

Cara menggunakan javascript animasi status bar:

1. Amankan template dengan cara :

Login ke Blogger --> KLIK Tata Letak --> KLIK Edit HTML -->

KLIK Download Template Lengkap --> Simpan di Folder PC

2. Tetap di Edit HTML, kemudian lanjutkan dengan :

a. Cari kode </body> (di bagian terbawah Edit HTML)

b. Copy paste javascript di atas, letakkan persis di atas KODE </body>

c. KLIK Simpan Template, kemudian lihat hasilnya di blog.

<script type="text/javascript">
//*bloggerstars1/gubhugreyot.blogspot.com*//
message = "* boggerstars1 * bloggerstuars.blogspot.com *.... Kami mengucapkan selamat datang dan Selamat menikmati apa yang kami sajikan di dalam blog ini !!!^" +
"Banyak sekali kekurangan dan ketidak sempurnaan dalam pengelolaan ataupun penyajian posting kami^" +
"Oleh karena itu, kritik, saran dan komentar yang bersifat membangun sangat kami butuhkan demi terwujudnya posting yang lebih baik di masa ke depan.^" +
"Kami yakin, dengan dukungan yang tulus dari pembaca, akan semakin memicu semangat yang lebih tinggi untuk terus berkarya,^" +
"sehingga akan terwujudkan posting yang semakin berkwalitas dan bisa memberikan kontribusi yang nyata bagi kemajuan dunia blog khususnya.^" +
"Atas kepedulian dan perhatiannya, sekali lagi kami mengucapkan terima kasih. Selamat menikmati apa yang menjadi sajian kami melalui blog ini !!!!^" +
"^"
scrollSpeed = 100
lineDelay = 1000
txt = ""
function scrollText(pos) {
if (message.charAt(pos) != '^') {
txt = txt + message.charAt(pos)
status = txt
pauze = scrollSpeed
}
else {
pauze = lineDelay
txt = ""
if (pos == message.length-1) pos = -1
}
pos++
setTimeout("scrollText('"+pos+"')",pauze)
}
scrollText(0)
</script>

Catatan :

1. Kode berwarna merah silahkan diganti dengan teks yang sesuai dengan blog anda.

2. KODE berwarna hijau dapat dilakukan perubahan nilai guna merubah kecepatan animasi dan waktu sela/delay setiap pergantian teks.

3. Jumlah teks dapat ditambah dengan cara menambahkan teks diantara KODE :" dan ^" +

atau "TEKS baru/TEKS tambahan^" + yang diletakkan di atas tanda "^".

Pengganti javascript Slide Menu dari Geocities yang hilang

2009-11-09T09:26:00.000-08:00

Bila anda menggunakan menu slide atau apapun sebutannya (menu samping, menu geser, omni slide menu, dll), yang saat ini tidak bisa digunakan lagi bersamaan dengan tutupnya Yahoo Geocities, anda bisa mengaktifkan kembali menu tersebut dengan mengganti link javascriptnya pada URL baru dari Ripway.com.

URL lama :

<script language='JavaScript1.2' src='http://www.geocities.com/adestd40/mmenu.js'/>
<script>

Gantikan dengan :

<script language='JavaScript1.2' src='http://h1.ripway.com/bloggerstars/gr-bgs1-menugeser.js'/>
<script>