Sabtu, 14 September 2013

Modifikasi Tampilan Pada Tab Browser

Untuk pertama kali, saya belajar mempercantik blog saya sendiri dengan panduan buku Lea Willsen berjudul 50 trik modifikasi blogger - blogspot. Ngak seru rasanya jika ngak berbagi dengan teman - teman blogger lainnya. Di sini kita akan kupas habis petunjuknya -  step per step...............

Modifikasi Tampilan Pada Tab Browser


Tab Browser merupakan tempat dimana biasanya judul sebuah web atau blog ditampilkan pada bagian atas sebuah browser yang digunakan dan biasanya tampilan secara default tidak dapat bergerak. Uji coba kita kali ini adalah sesuai dengan panduan buku, kita akan menggerakkan judul pada tab browser biar kelihatan keren gitu ^_^.

Untuk saat ini saya mengelola dua blog. Blog tentang kehidupan saya sehari - hari dan blog tentang karya design grafis saya serta teman - teman

  • Pada blog yang ingin dilakukan modifikasi. pilih Template
Saya memilih blog tentang keseharian saya "Writing of Luvy" dimana bahasan ini juga dikupas
  • Kita diantarkan pada sebuah halaman baru. Sebelum kita mulai mengubah kode HTML sebaiknya kita melakukan backup pada template yang kita telah buat sebelumnya caranya klik "cadangkan / pulihkan" pada pojok kanan atas, kemudian "Unduh template lengkap"
Tampilan template default yang telah kita buat sebelumnya
Tampilan kotak dialog setelah mengklik "Cadangkan / pulihkan"
  • Template sudah diunduh. Selanjutnya kita mengubah kode HTML agar tab browsernya dapat bergerak. Masih pada halaman template. Klik "Edit HTML". Kita akan menemukan rangkaian kode HTML dalam kolom - kolom yang berisi kode.
Rangkaian kode HTML
  • Untuk selanjutnya kita akan tampilkan kotak dialog "Search" untuk memudahkan pencarian kode pada kolom kode HTML. Klik 1x dalam kolom, kemudian tekan Ctrl+F atau F3. Maka pada sudut kanan atas dalam kolom kode HTML akan muncul kotak dialog search.
Terdapat kotak dialog search pada sudut kanan atas
  • Selanjutnya kita akan cari kode HTML dengan kata kunci "<head>", tekan "Enter". Maka secara otomatis dan ringkas kita dapat dengan mudah menemukan kode HTML yang dimaksudkan
Pencarian kode HTML dengan menggunakan bantuan kotak dialog Search
  • Setelah kode HTML ditemukan (kata kunci <head>). Ketik / copy kode HTML seperti di bawah ini (letakkan kode HTML ini tepat di bawah kode <head>) :
<script type='text/javascript'>
//<![CDATA[
msg = "Welcome In My Little World and Found Your Dream by Yourself";
msg = " ^_^   Sincerely Luvy  ~_^ " + msg;pos = 0;
function scrollMSG() {
document.title = msg.substring(pos, msg.length) + msg.substring(0, pos); pos++;
if (pos > msg.length) pos = 0
window.setTimeout("scrollMSG()",250);
}
scrollMSG();
//]]>
           </script>
Posisi kode HTML tambahan
  • Pada kode HTML yang berwarna merah, dapat anda ubah sesuai dengan keinginan anda sebagai tampilan teks bergerak pada Tab Browser anda. Sedangkan untuk kode HTML yang berwarna hijau sebagai pengatur kecepatan gerakan tulisan merah tadi. Semakin kecil angka maka semakin cepat gerakannya. (150 adalah angka standar yang dianjurkan)
  • Setelah dilakukan penambahan kode HTML. Lakukan penyimpanan kode dengan klik "Simpan template". Kembali ke tampilan dashboard awal. Dan coba buka blog anda. Terlihat pada judul Tab Browser blog anda mengalami perubahan. Yang semula hanya tulisan saja. Sekarang tulisan itu bergerak.
Ini tampilan Tab Browser saya setelah dilakukan modifikasi
Arah panah warna pink adalah dimana Tab Browser yang dilakukan modifikasi
Bahasan buku dalam materi "Modifikasi Tampilan Pada Tab Browser" telah selesai. Ringkas & nggak ribet bukan?.

Selamat Mencoba ^_^


Questions :

Semua pertanyaan ini saya tujukan ke penulis +Lea Willsen 
  1. Seperti postingan sebelumnya dan mendapat komentar dari +Lea Willsen bahwa panduan pada buku 50 trik modifikasi blogger - blogspot sebagian menggunakan template standar. Karena saya menggunakan template dinamis, apa template lainnya bisa menerapkan teknik modifikasi Tampilan Pada Tab Browser ini ?
  2. Pada bahasan untuk membuat backup template dengan cara "unduh template lengkap" dengan file unduh type XML. (Hasil unduhan seperti di bawah ini). Apakah tujuannya adalah sewaktu - waktu kita ingin memulihkan kembali template awal, kita dapat menggunakan hasil unduhan ini? Jika benar, boleh donk tahu cara pemulihannya dengan menggunakan hasil template unduhan?
Hasil unduhan template

Diposting oleh di

2 komentar:

  1. Lea Willsen19 September 2013 pukul 02.20

    Template standar mana pun umumnya dapat menerapkan segala jenis modifikasi, dan sebaliknya template dinamis tidak memungkinkan untuk menerapkan seluruh modifikasi. Bisa dikatakan sebenarnya template standar memiliki lbh byk kelebihan.

    Benar, tujuan backup ialah jika terjadi kesalahan kita bisa melakukan restore atau memulihkan kondisi sebelum diterapkannya perubahan, Caranya masuk ke dasbor, pilih menu template pada blog bersangkutan, klik Cadangkan/Pulihkan, dan pilih file XML yg sebelumnya kita download dari fitur "Unggah template dari file di hard drive Anda.".

    :)

    BalasHapus
  2. Susan22 September 2013 pukul 05.58

    Thank You so much for your answer. Nambah lagi 1 (satu) ilmu ^_^.
    GBU and Have a great day. Always. Amin

    BalasHapus

Please Insert Your Comment ^_^

Langganan: Posting Komentar (Atom)