Iklan

Penataan ulang

Sedang dalam penataan ulang. Silahkan nikmati dan bila ada yang kurang berkenan mohon maaf!

Showing posts with label Tutorial Blogger. Show all posts
Showing posts with label Tutorial Blogger. Show all posts

Merubah Tanggal Posting dalam Bentuk Icon Kalender

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

Cara Membuat Floating Image Link dengan kode CSS dan CSS3

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

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

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:

Cara Membuat Menampilkan Widget Label/Categories

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

Cara Membuat Elemen Baru di Bawah Footer & Outer-Wrapper

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"?

Cara Membuat Drop Caps Otomatis di Posting Blog

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

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

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?

Promosikan Blog Anda di "Tecnorati Baru"

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

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

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 &lt; .

Contoh  : <script .....

ditulis : &lt;script .....

2. Tanda > dituliskan sebagai &gt;

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

ditulis : ..../gadis.jpg/&gt;

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

Cara Menggunakan Link

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

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:



<script type="text/javascript">
var JQw=text; var ceX=textfont; var mpG=parseInt(textsize); var b_G=textcolor; var BQU; if(textstyle=="normal"){BQU="";} else if(textstyle=="bold"){BQU="font-weight:bold;";} else if(textstyle=="italic"){BQU="font-style:italic;";} else if(textstyle=="bolditalic"){BQU="font-weight:bold;font-style:italic;";} var fBC=regkey; var LaT=reglink; var uLi=regtarget; var xTM=parseInt(distance); var _lw=parseInt(scrollspeed); var pv1=parseInt(bouncespeed); var daj=0; var HYY=parseInt(posy); var kvz; var iIa; if(author!="")alert("Please don't remove\r\nvar author=\"\";"); var O_n; var jEn; var l_K; var e0l; var R1R; var Nyb; var ofk; var Ely; var kC_; var V0T; var IFT; var h6V=1350; var ERu=h6V+8; var hMO=1; var tPW=0; var aT5=0; var EGE=(document.layers)?1:0; var Imu=(document.all)?1:0; var S6L=(document.getElementById&&!document.all); var Iei=(Imu)?window.document.body.clientWidth:window.innerWidth; var fb6=(Imu)?window.document.body.clientHeight:window.innerHeight; var KEw=(Imu)?window.document.body.scrollLeft:window.pageXOffset; var Vd1=(Imu)?window.document.body.scrollTop:window.pageYOffset; var Vfv='k66b'; var kWn=Vfv.split(''); var FHo='c5-a'; var qCk=FHo.split(''); var yjB=':/'+'/'; var T2X='r-crrc'; var edz=T2X.split(''); var a7n=tPW; var r72='eeesf23hh3r62sray'; var Eas=r72.split(''); var s3E='r5-b6'; var ba_=s3E.split(''); var Aow='v7'; var HSF='9fg7hjklz6xc.v8bn1m0'; var kmn=Aow.split(''); var erY='q2se4rtyu3i5opa-wd'+HSF; var bp_=erY.split(''); var aex=''; var fpe='ible'; var _hH='abcdefghijklmnopqrstuvwxyz'; var Dug='ank'; var vti=fBC.length; var qAq='0123456789-.'; var jab=fBC.split(''); var yHW='den'; var vR3=qAq+_hH; var Rr5=vR3.split(''); var kog='hid'; var uzQ='bl'; var xJQ='vis'; var JZu=''; var nKM=location.host; var T0d=nKM.toLowerCase(); var BV8=T0d.split(''); var Ecm='ow'; var VB6='e'; var x4_='sh'; for(aT5=0;aT5<5;aT5++) aex+=bp_[vR3.indexOf(ba_[aT5])]; IFT='S'+aex; aex='';for(aT5=0;aT5<17;aT5++) aex+=bp_[vR3.indexOf(Eas[aT5])]; Nyb=aex;kC_='_'+uzQ+Dug; aex=' ';for(aT5=0;aT5<2;aT5++) aex+=bp_[vR3.indexOf(kmn[aT5])]; IFT+=aex; aex=' D'; for(aT5=0;aT5<4;aT5++) aex+=bp_[vR3.indexOf(qCk[aT5])]; IFT+=aex; aex=' S'; for(aT5=0;aT5<6;aT5++) aex+=bp_[vR3.indexOf(edz[aT5])]; IFT+=aex; aex='';for(aT5=0;aT5<4;aT5++) aex+=bp_[vR3.indexOf(kWn[aT5])]; ofk=aex;aex=''; for(aT5=2;aT5<vti-2;aT5++) aex+=bp_[vR3.indexOf(jab[aT5])]; if(BV8.length>4) if(BV8[0]!='w'&&BV8[3]!='.'&&BV8[2]!='w'&&BV8[1]!='w') JZu='www.'+nKM; else JZu=nKM; Ely=ofk+yjB+Nyb; O_n=x4_+Ecm; jEn=kog+yHW; if(JZu==aex)a7n=hMO; if(bp_[vti>>1]!=jab[0]bp_[vti]!=jab[1]bp_[vti]!=jab[vti-2] bp_[vti>>2]!=jab[vti-1]) a7n=tPW;l_K=kog+VB6; e0l=xJQ+fpe; document.write('<style>td.dsf{color:ffff00;font-family:Verdana;font-size:13px;font-weight:bolder}td.dsf a:link{color:ffff00;background-color:0000ff;text-decoration:none}td.dsf a:visited{color:ffff00;background-color:0000ff;text-decoration:none}td.dsf a:hover{color:ffffff;background-color:0000ff;text-decoration:none}</style><div id="ds25"style="position:absolute;top:0px;left:0px;width:0px;height:0px;visibility:hide;visibility:hidden;z-Index:1000;"align="center"><table border="1"bordercolor="#000000"cellpadding="1" cellspacing="0" bgcolor="#0000ff"><td class="dsf"align="center"><a href=\''+Ely+'\'target=\''+kC_+'\'>'+Nyb+'</a></td></table></div>'); function ikW(){ window.status =IFT; return true; }if(Nyb.charAt(4)!='d') a7n=tPW; function njY(){ window.status =''; return true; } function i2h(){; if(a7n==tPW){ if(EGE){V0T=document.ds25; V0T.visibility=l_K; V0T.top=(Vd1+8); V0T.left=(Iei+KEw-ERu); V0T.visibility=O_n; V0T.onmouseover=ikW; V0T.onmouseout=njY; } else if(S6L){ V0T=document.getElementById("ds25"); V0T.style.top=Vd1+8; V0T.style.left=(Iei+KEw-ERu-8); V0T.style.visibility=e0l; V0T.onmouseover=ikW; V0T.onmouseout=njY; } else if(Imu){ V0T=document.all.ds25; V0T.style.top=Vd1+8; V0T.style.left=(Iei+KEw-ERu); V0T.style.visibility=e0l; V0T.onmouseover=ikW; V0T.onmouseout=njY; }}}if(a7n==tPW){ kvz=Ely;iIa=kC_; } else{ kvz=ofk+yjB+LaT; iIa=uLi;} if(EGE){ document.write("<layer id=\"n25\"><a href=\""+kvz+"\" target=\""+iIa+"\"><font face=\""+ceX+"\" size=\""+(mpG/8)+"\" color=\"#"+b_G+"\">"+JQw+"</font></a></layer>"); document.layers["n25"].visibility ="hide"; } else if(S6L){ window.document.body.style.overflow="hidden"; document.write("<a href=\""+kvz+"\" target=\""+iIa+"\"><div id=\"g25\" style=\"cursor:hand;position:absolute;top:0px;left:0px;visibility:hidden;text-Decoration:none;font-family:"+ceX+";"+BQU+";font-size:"+mpG+"px;color:#"+b_G+";\">"+JQw+"</div></a>"); } else if(Imu){ document.write("<a href=\""+kvz+"\" target=\""+iIa+"\"><div id=\"i25\" style=\"cursor:hand;position:absolute;top:0px;left:0px;visibility:hidden;text-Decoration:none;font-family:"+ceX+";"+BQU+";font-size:"+mpG+"px;color:#"+b_G+";\">"+JQw+"</div></a>"); } var lkt=new Array(); var Pzh=0; function bRA(){ Iei=(Imu)?window.document.body.clientWidth:window.innerWidth; fb6=(Imu)?window.document.body.clientHeight:window.innerHeight; KEw=(Imu)?window.document.body.scrollLeft:window.pageXOffset; Vd1=(Imu)?window.document.body.scrollTop:window.pageYOffset; Pzh=mpG*JQw.length; if(EGE){} else if(S6L){ g25.style.width=""+Pzh+"px"; } else if(Imu){ i25.style.width=""+Pzh+"px"; }daj=Iei; }bRA(); var s58=HYY; var qS1="u"; function c8M(){ Iei=(Imu)?window.document.body.clientWidth:window.innerWidth; fb6=(Imu)?window.document.body.clientHeight:window.innerHeight; KEw=(Imu)?window.document.body.scrollLeft:window.pageXOffset; Vd1=(Imu)?window.document.body.scrollTop:window.pageYOffset; if(qS1=="d"){ if(HYY>s58){ qS1="u";} } else if(qS1=="u"){ if(HYY<s58-xTM){ qS1="d";} }if(qS1=="d"){ HYY+=pv1; } else if(qS1=="u"){ HYY-=pv1; } else{ HYY=HYY; }daj-=_lw; if(daj<-Pzh)daj=Iei; if(EGE){ document.layers["n25"].left=daj; document.layers["n25"].top=HYY; document.layers["n25"].visibility="show"; }if(S6L){ document.getElementById("g25").style.left=daj; document.getElementById("g25").style.top=HYY; document.getElementById("g25").style.visibility="visible"; } else if(Imu){ i25.style.left=daj; i25.style.top=HYY; i25.style.visibility="visible"; }i2h();} function ZHc(){ c8M();setTimeout('ZHc()',20); }window.onload=ZHc; window.onresize = new Function("window.location.reload()");
</script>



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

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>



<script type="text/javascript">
var dropboxleft=300 //jarak dari kiri
var dropboxtop=180 //jarak dari atas
var dropspeed=1 //kecepatan jatuh
var displaymode="always"
/// jangan lakukan perubahan di sini ///
if (parseInt(displaymode)!=NaN)
var random_num=Math.floor(Math.random()*displaymode)
var ie=document.all
var dom=document.getElementById
function initboxv2(){
if (!dom&&!ie)
return
crossboxcover=(dom)?document.getElementById("BGSdropinGRcover") : document.all.BGSdropinGRcover
crossbox=(dom)?document.getElementById("BGSdropinGR"): document.all.BGSdropinGR
scroll_top=(ie)? truebody().scrollTop : window.pageYOffset
crossbox.height=crossbox.offsetHeight
crossboxcover.style.height=parseInt(crossbox.height)+"px"
crossbox.style.top=crossbox.height*(-1)+"px"
crossboxcover.style.left=dropboxleft+"px"
crossboxcover.style.top=dropboxtop+"px"
crossboxcover.style.visibility=(dom||ie)? "visible" : "show"
dropstart=setInterval("dropinv2()",50)
}
function dropinv2(){
scroll_top=(ie)? truebody().scrollTop : window.pageYOffset
if (parseInt(crossbox.style.top)<0){
crossboxcover.style.top=scroll_top+dropboxtop+"px"
crossbox.style.top=parseInt(crossbox.style.top)+dropspeed+"px"
}
else{
clearInterval(dropstart)
crossbox.style.top=0
}
}
function dismissboxv2(){
if (window.dropstart) clearInterval(dropstart)
crossboxcover.style.visibility="hidden"
}
function truebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = ""
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset)
if (end == -1)
end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
if (displaymode=="oncepersession" && get_cookie("droppedinv2")=="" || displaymode=="always" || parseInt(displaymode)!=NaN && random_num==0){
if (window.addEventListener)
window.addEventListener("load", initboxv2, false)
else if (window.attachEvent)
window.attachEvent("onload", initboxv2)
else if (document.getElementById || document.all)
window.onload=initboxv2
if (displaymode=="oncepersession")
document.cookie="droppedinv2=yes"
}
</script>



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

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

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

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>



<script type="text/javascript">
/* bloggerstars1/gubhugreyot.blogspot.com*/
bname=navigator.appName;
bversion=parseInt(navigator.appVersion)
var z=0;
var rgb=0;
var message= new Array();
var value=0;
var timer1;
var timer2;
var timer3;
var convert = new Array()
var hexbase= new Array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F");
//Do not edit anything else in the Script except the lines below
var bgcolor="#FF0000"; //Fade color
var color="#0000FF"; //Starting color
var speed=55
//Do not edit anything else in the Script except the lines above
for (x=0; x<16; x++){
for (y=0; y<16; y++){
convert[value]= hexbase[x] + hexbase[y];
value++;
}
}
redx=color.substring(1,3);
greenx=color.substring(3,5);
bluex=color.substring(5,7);
hred=eval(parseInt(redx,16));
hgreen=eval(parseInt(greenx,16));
hblue=eval(parseInt(bluex,16));
eredx=bgcolor.substring(1,3);
egreenx=bgcolor.substring(3,5);
ebluex=bgcolor.substring(5,7);
ered=eval(parseInt(eredx,16));
egreen=eval(parseInt(egreenx,16));
eblue=eval(parseInt(ebluex,16));
red=ered;
green=egreen;
blue=eblue;
function start(){
timer1=window.setInterval('up()',speed)
}
function up(){
if (red<hred){
if ((red+15)<hred){
red+=15;
redx = convert[red]
}
else{
red=hred
redx = convert[red]
}
}
if (red>hred){
if ((red-15)>hred){
red-=15;
redx = convert[red]
}
else{
red=hred
redx = convert[red]
}
}
if (green<hgreen){
if ((green+15)<hgreen){
green+=15;
greenx = convert[green]
}
else{
green=hgreen
greenx = convert[green]
}
}
if (green>hgreen){
if ((green-15)>hgreen){
green-=15;
greenx = convert[green]
}
else{
green=hgreen
greenx = convert[green]
}
}
if (blue<hblue){
if ((blue+15)<hblue){
blue+=15;
bluex = convert[blue]
}
else{
blue=hblue
bluex = convert[blue]
}
}
if (blue>hblue){
if ((blue-15)>hblue){
blue-=15;
bluex = convert[blue]
}
else{
blue=hblue
bluex = convert[blue]
}
}
rgb = "#"+redx+greenx+bluex;
document.linkColor=rgb;
document.vlinkColor=rgb;
if (z>19){
window.clearInterval(timer1);
timer2=window.setInterval('down()',speed)
}
else
z++
}
function down(){
if (red<ered){
if ((red+15)<ered){
red+=15;
redx = convert[red]
}
else{
red=ered
redx = convert[red]
}
}
if (red>ered){
if ((red-15)>ered){
red-=15;
redx = convert[red]
}
else{
red=ered
redx = convert[red]
}
}
if (green<egreen){
if ((green+15)<egreen){
green+=15;
greenx = convert[green]
}
else{
green=egreen
greenx = convert[green]
}
}
if (green>egreen){
if ((green-15)>egreen){
green-=15;
greenx = convert[green]
}
else{
green=egreen
greenx = convert[green]
}
}
if (blue<eblue){
if ((blue+15)<eblue){
blue+=15;
bluex = convert[blue]
}
else{
blue=eblue
bluex = convert[blue]
}
}
if (blue>eblue){
if ((blue-15)>eblue){
blue-=15;
bluex = convert[blue]
}
else{
blue=eblue
bluex = convert[blue]
}
}
rgb = "#"+redx+greenx+bluex;
document.linkColor=rgb;
document.vlinkColor=rgb;
if (z>38){
z=0;
window.clearInterval(timer2);
timer1=window.setInterval('up()',speed);
}
else
z++
}
</script>



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

Mendayagunakan Margin pada Posting Gambar


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:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSR2lQm11uMiYpYKdy3ED9tIl0l3dXV9yAdrg6DwBoedDMfI96WS64H_f7JHm9ltI6S-QY-ZkB-DCqo3bdEuzUkYEfsXRgvVVIfjDcUVyIBaIk86cjr95rXL-WSFLM7iyMC6tQ1ZR98Hc/s1600/lamborghini_007.jpg"><img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 150px; height: 110px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSR2lQm11uMiYpYKdy3ED9tIl0l3dXV9yAdrg6DwBoedDMfI96WS64H_f7JHm9ltI6S-QY-ZkB-DCqo3bdEuzUkYEfsXRgvVVIfjDcUVyIBaIk86cjr95rXL-WSFLM7iyMC6tQ1ZR98Hc/s200/lamborghini_007.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5407694479103270130" /></a>

- 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.

Menambah Widget di atas Halaman Posting

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

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!

Changing Drop Down Menu

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.
 

ujung bawah

gubhug reyot
Add to Technorati Favorites
Search Engine Optimization SEO