Tutorial Bag.3 : Mengganti Template (Design) Tampilan pada Blogger

Ada kalanya anda merasa kurang puas dengan design blog yang disediakan oleh blogger untuk anda, anda pun mencari template-template dengan memanfaatkan Paman Google. Anda lalu ketemu dengan template yang menurut hati anda pas, dan langsung mendownload template itu setelah selesai mendownloadnya anda langsung menguploadnya diblog anda, tapi apa yang terjadi ternyata gadget dari template yang anda download tadi sangat rumit dan banyak sehingga anda pun dibuat bingung karenanya, Celakanya lagi anda lupa untuk membackup tampilan blog anda terpaksa anda lembur seharian deh ... Wah .. wahh .. setan pun menertawai kecerobohan anda. :s

Peringatan :
Harap lakukan BackUp/ Restore untuk berjaga-jaga kalau-kalau hal seperti di atas terjadi :


Baiklah untuk menyingkat waktu anda, maka akan saya mulai pembahasan mengenai Bagaimana Caranya merubah Tampilan Blog anda, Pertama sekali saya akan memperlihatkan tampilan awal blog yang akan kita jadikan kelinci percobaan kita sebelum anda memulai bekerja pada template blog anda. (jika gbr kurang jelas klik aja :e )

File-file yang anda perlukan untuk latihan ini Silahkan Download :
1. Template Blog :
klik Di Sini

Jika anda kurang tertarik dengan design template ini anda bisa mencari contoh2 design yang telah tersedia antara lain di http://btemplates.com,http://www.ourblogtemplates.com/, http://www.templatelite.com/

File ini berisi file-file template berextensi .rar, anda perlu untuk mengextractnya
terlebih dahulu, dalam file rar ini berisi, 3 komponen untuk blog anda yaitu
benihimeBlog.xml yaitu tampilan blog yang sudah saya rancang sedemikian rupa
sehingga memudahkan untuk anda yang masih pemula untuk mempraktekannya,
badge2.0.psd, logo.psd yaitu file gambar yang bisa anda edit untuk lebih
mempercantik tampilan blog anda.
untuk melihat demo klik http://benihimeblog.blogspot.com

Tahap pertama adalah anda harus login terlebih dahulu di www.blogger.com, seketika itu juga anda akan diredirect ke halaman Dasbor(Home), Pilihlah bahasa yang benar-benar anda kuasai, di tutorial ini saya memilih menggunakan bahasa Indonesia. Klik lah Tata Letak di halaman Dasbor Blog anda, Silahkan tunggu beberapa detik, akan muncul tampilan Tata Letak pada halaman Browser anda, terdapat Link :
Element Halaman : Element Halaman ini berisi segala macam gadget dan tempat untuk berpijaknya yang bisa anda atur, Pengaturan Gadget di dalam tampilan Element Halaman ini sangat mudah, anda tinggal mengklik n drag untuk merubah susunan dari masing-masing Widget, atau apabila anda ingin menambahkan Gadget baru, anda tinggal klik Tambah Gadget dan jangan lupa klik tombol Simpan Template setelah anda mengedit susunan atau menambah Gadget. Mudah Bukan !!!

Font dan Warna : Berisi warna-warna yang bisa mempercantik tulisan maupun background dari blog anda

Edit HTML : Di halaman Edit HTML ini berisi source code dari blog anda, bagi anda yang sudah sangat akrab dengan Coding HTML ala Blog mungkin tidak terlalu takut untuk mengeditnya namun bagi anda yang sering dibuat pusing dengan penulisan code HTML ini, harap hati-hati aja yah, Bagian Edit HTML ini juga kita perlukan untuk menambahkan code Emoticon ala Yahoo!Messeger berserta file javascriptnya, jadi anda harus sangat-sangat teliti dalam memilah-milah bagian per bagian dari keseluruhan sintaks kode ini, Di Edit HTML ini juga terdapat fasilitas untuk BackUp/Restore template blog anda, untuk membackup template blog anda klik lah link Download Template Lengkap sementara untuk merestore ke tampilan sebelum di edit atau untuk mengubah/memperbaharui tampilan blog anda anda bisa menggunakan fasiltas Tombol Browse untuk mencari di mana anda menyimpan file template blog anda di Hardisk. Pada Tutorial ini kita telah menyediakan file benihimeBlog.xml sebagai template baru kita, maka klik lah tombol browse dan cari di mana anda menyimpan file ini, jika sudah ketemu pilih klik tombol open atau klik dua kali file itu setelah itu anda bisa mengklik Unggah (upload)Tunggulah beberapa menit sehingga template baru anda telah terupload dib logger. Setelah Semua Proses selesai waktunya bagi anda untuk melihat tampilan awal dari blog anda. Untuk menambahkan Gadget baru anda tinggal menuju ke Element Halaman.
Untuk mengganti HeaderGambar (Logo) Worpreess Theme pada blog anda masuk Edit Code jangan lupa untuk memberi centang pada Expand Template Widget lalu cari script sbb:

#header {

float:left;

width:400px;height:85px;

margin-bottom:10px; padding:0;

background-image:url(http:// bp0.blogger.com/ _Zuzii37VUO4/R2iVTSjZEcI/AAAAAAAACeg/NQ0wLx_MJMU/s1600/logo.gif);

}


Jika sudah ketemu upload gambar(logo) anda terlebih dahulu, bisa di photobucked, imageHack atau server image yang lain, setelah itu ganti script yang digarisbawah di atas dengan alamat dari server image anda


Bonus ::
Ada cara lain untuk mengganti tampilan blog selain cara di atas, yaitu dengan mengkopi source code yang biasanya disediakan oleh penyedia template blogger gratisan, lalu anda mempaste di bagian box source code nya, namun cara ini tidak disarankan karena mungkin dalam proses pengkopian ada bagian sintaks yang tidak ikut serta sehingga akan menimbulkan error pada saat penyimpanan

5 comments:

  1. Percobaan Ngepost yang pertama ahhh ....

    :e :e :e :q :m

    ReplyDelete
  2. Hahha .. msh suka TP anak ini nihh ...

    Sibuk di mari tohh .. kirain ngilang dr forum diculik orang ... :q

    Mantap bro .. tutorialna .. nyampe seri berapa nihh ...

    ReplyDelete
  3. iya nihh bro gw gi sibuk di mari dulu ... sambil share apa yg prnah gw dapat semoga bermanfaat ...

    :m :m

    ReplyDelete
  4. bagus bagus bro...

    btw ada template blog yang flash gag yaa??

    :m

    ReplyDelete
  5. wah template mu kacau kacau
    tuw alamat url backgrond image gag muncul kabeh :e

    ReplyDelete