Ok!Sesuai dengan permintaan Monica,kali ini Afra akan memberi tahu cara membuat skins seperti blog sayaini! Hmm, oke. Sebenarnya skins q ini aku ambil dari BLOGSkins.Kusarankan kalian juga nyari disana supaya nanti tidak kesulitanuntuk membuat HTML / Java Script Code-nya. Kalau kalian mau‘membangun’ skins dari awal, kalian harus ingat komponen utamadari HTML code adalah
<html> <head> <title></title> </head> <body> </body> </html> |
Untukketerangan lebih lanjut mengenai kode-kode HTML yang lain, kalianbisa melihatnya disini. Nah akan kujelaskan bagian utamanyasaja.
<html></html>
Adalahhal yang kudu,haarus,wajib,mesti ada dalam sebuah kode HTML. Inimerupakan bagian kepala dan kaki dari kode HTML yang diantara <html>dan </html> berisi content dari kode HTML tersebut.
<head></head>
Sepertinamanya, ini merupakan bagian kepala isi dari kode HTML. Secara umun,kode ini berisi bagian-bagian yang ada pada tab browser. Bisa jugauntuk diisi kode META , icon,dll. Tanpa kode ini, biasanya tag HTMLakan error dan tidak bisa digunakan.
<title></title>
Iniadalah koda yang berada di dalam kode <head></head>, ataubisa dibilang isi dari tag HTML head. Kode ini digunakan untukmemberi nama pada tab browser situs kita.Misalnya, pada halaman awal Mozilla Firefox, pada tab browsernyaterdapat tulisan “Mozilla Forefox Start Page”, maka pada kodeHTML-nya ditulis
<html> <head> <title> Mozilla Forefox Start Page </title> </head> ...... |
<body></body>
Inimerupakan isi dari sebuah kode HTML. Disetiap kode HTML, kalian pastiakan menemukan kode ini. Tapi biasanya ada yang lupa menuliskan kode</body>-nya. Maklum lah, isi dari sebuah kode HTML kan nggaksedikit.
Oke.Itu adalah review singkat mengenai komponen utama kode HTML. Balik lagi, setelah kalian download skins yangkalian inginkan, kalian pasang pada blog kalian. Ada aturannya jugalho. Kalau kalian masih memakai template modern, kalian harusmenggantinya menjadi ‘template klasik’ terlebih dahulu.Caranya...
LoginBlogger Rancangan Edti HTML Pada bagian bawah, klik link kembali ke template klasik.
INGAT!! Kalian harus mem-backup dulu template awal kalian. Caranya dengan meng-copy semua kode HTML, lalu kalian paste pada notepad. Ini supaya kalau kalian bingung dengan template klasik, kalian masih bisa kembali ke template awal kalian dengan cara Template Coba Perancangan Terbaru. Karena apabila kalian mengganti ke template klasik, maka kalian harus menggunakan Kode HTML murni! Semua pada sidebar juga harus menggunakan kode HTML. Bagi yang masih awam terhadap kode HTML, silahkan dipelajari dulu ^^ |
Kemudiantinggal kalian copas aja kode yang sudah kalian download. Biasanyafile download BLOGSkins berupa .txt.
Untukmengganti layout / background sesuai dengan keinginan kita. Pertamakita harus mengetahui detail gambar background skins kita. Caranyapada halaman blog kita klik kanan view background image. Tapi ada juga skins yang sudah ditambahkankemampuan untuk disableright click. Nah, untukmengantisipasinya. Pilih Tools Options Content Enable Java script-nya di uncheck.
Kalausudah dapat gambarnya, kalian save yaa. Kemudian kalian buka programAdobe Photoshop.Kalau nggak punya, download disini.Kalau saya pakai yang CS3 tapi biasanya agak sulit dicari. Tapi padadasarnya sama kok!
Nahkalian insert gambar background yang tadi sudah kalian save. Kemudiankalian buat new worksheet dengan cara Ctrl+N. Atur ukuran canvassesuai dengan gambar background. Kemudian kalian drag gambarbackground tadi ke worksheet yang tadi. Pastikan Layer 1 yangterpilih, kemudian kalian atur Opacity-nya menjadi 50% inidimaksudkan agar kita bisa membuat yang sama persis.
Nahkalian tinggal berkreasi sesuka kalian! Mau ditambah image ataumungkin logo blog kalian juga boleh. Tapi jangan lupa, kalian harussabar yaa. Kalau kalian belum pernah pakai Adobe Photoshop, kalianlihat tutorialnya aja dulu atau mungkin malah lebih mudah lagi kalaukalian punya teman yang sudah bisa menggunakan Adobe Pothoshop.
Kalausudah kalian, untuk mendapatkan kode HTML gambar backgroun kalian.Kalian harus punya account Photobucket. Nggak harus photobucket kok,bisa pakai Imageshack atau Tinypic. Kalau pada Photobucket, caranyaadalah kalian upload gambar background kalian kemudian di save, lalukalian arahkan cursor kalian ke arah gambar ( jangan diklik ) makaakan muncul berbagai kode dibawahnya. Nah kalian copas kode “DirectLink”-nya.
Kembalike blogger, pada kode HTML kalian, cari kode background, supaya mudahkalian Ctrl+F aja. Pada code background, disebelahnya harus berupaalamat link gambar. Misal :
background : <img src=’http://...../’> |
Kalianganti kode http://.../dengan kode gambar kalian tadi. Kemudian kalian preview dulu untukmemastikan apakah kode kalian berfungsi dengan baik atau tidak, kalausudah tinggal di save aja.
Okeitu dia tutorialnya semoga bermanfaat, terutama untuk Monicayaa. Kalau masih ada yang ingin ditanyakan, silahkan tinggalkankomentar atau kirim pesan ke rizky_afrahana@yahoo.com.
{ 0 komentar... Views All / Send Comment! }
Posting Komentar