Cara Membuat Template Blog Sendiri dengan Artisteer

Hallo,

Kali ini gue mau ngasi sedikit Cara Membuat Template Blog Sendiri dengan Artisteer. Artisteer adalah aplikasi untuk membuat template yang bisa diekspor ke berbagai platform blog, contohnya blog gue ini, buatan gue pake artisteer Cara buatnya sih sebenernya gampang banget, tinggal milih model template yang kita suka terus tinggal setting sedikit warnanya.

Untuk memperbesar gambar-gambar di bawah ini, klik aja gambarnya ya.

Pertama, buka dulu website artisteer (http://www.artisteer.com). Lalu pilih menu download. Klik tulisan can be downloaded by clicking here.

Setelah download selesai, instal seperti menginstal program pada biasanya.

Buka aplikasi artisteer, pilih Try Standard Edition *Perlu diingat, karena kita memakai versi trial, pada hasil akhir, semua ikon akan diberi watermark trial, oleh karena itu, lebih baik kita tidak memakai ikon apapun*.

Pada tampilan awal, kita bisa memilih tempate yang akan kita edit, bisa memilih Blank Template atau memilih template yang sudah ada (tinggal di edit sedikit).

Gue akan beri contoh membuat template dari Blank Template. Seandainya lo bingung cara mendesainnya, pilih Suggest Design di sebelah kiri atas. Suggest Design berfungsi untuk memberikan desain-desain yang sudah ada pada artisteer. Klik terus Suggest Design sampe lo menemukan desain template yang cocok.

Misalnya desain ini yang akan gue edit.

Mulailah mengedit dari menu Layout.

Pada menu Layout ini kita bisa mengatur Design Layout (pilih sendiri sesuai selera).

Memilih lebar header, Sheet Width atau Page Width (gue rekomendasikan Sheet Width aja).

Selanjutnya di menu Layout ada pilihan Menu, Footer, Sheet Width, Margin, Padding, Column Width, Column Style, Margin, Widgets, dan Blocks. Lo bisa bereksperimen sendiri dengan pilihan-pilihan tersebut. (Gue memakai lebar kertas/Sheet Width 1000 pixels).

Setelah menu Layout selesai, mulailah mengedit dari menu Header 

Pada menu Header ini juga terdapat berbagai banyak pilihan, lo bisa bereksperimen sendiri dengan pilihan-pilihan ini. Lo bisa mengatur tinggi header (tinggi header gue 300 pixels).Lo bisa mengupload gambar header lo sendiri (tentunya dengan gambar yang seukuran dengan header lo, misalnya gue pake lebar header 1000 pixels dan tinggi header 300 pixels, berarti ukuran header gue 1000 x 300 pixels). Lo juga bisa mengubah jenis font untuk judul dan slogan blog lo.

Untuk pilihan Controls pada menu Header sebaiknya tidak usah dipakai, karena seperti yang gue bilang sebelumnya, jika kita menggunakan artisteer versi trial, semua bentuk ikon ketika dieksport nanti akan bertanda trial.

Selanjutnya kita mengedit pada tab Menu. Lagi-lagi lo mengedit sesuai selera lo aja. Gue akan memberikan gambarannya.

Pada tab Menu, lo bisa mengganti model menu di template. Lo juga bisa mengganti warnanya pada pilihan Active (menu yang sedang aktif dalam blog), Passive (menu yang sedang tidak dipilih), Hovered (menu yang tidak dipilih tapi sedang disorot oleh kursor mouse).

 Jika lo mau buat menu lo ada submenunya (menu bisa turun ke bawah), lo edit aja bagian Levels, Submenu Area, Subitem. Tapi kalo lo gak mau ada submenunya, pilih Show Menu in Pages dan hilangkan ceklist di Subpage 1, Subpage 2, Subpage 3. (saran : ga usah menggunakan submenu karena pada edit HTML nanti agak rumit).

Selanjutnya pada menu Background. Pada menu ini lo bisa mengubah warna background, memberi pola pada background, ataupun mengupload background lo sendiri (saran : gunakan warna soft dan polos pada background agar loading blog tidak berat dan tidak membuat mata pembaca sakit).

Setelah itu, kita akan mengedit bagian Content atau isi dari blog. Di bagian ini agak rumit, tapi setelah lo coba-coba sendiri pasti mengerti.

Yang perlu digaris bawahi dalam mengedit Content adalah jangan lupa mematikan semua fungsi ikon, inget kita menggunakan versi trial, jadi semua ikon bakal bertanda trial. Matikan semua fungsi ikon pada Quote, Bullets, Headline, Post Header, dan Post Footer. Selebihnya lo bisa ngedit sesuai selera lo.

Tambahan penjelasan untuk edit Content. Pilihan Hyperlink berguna untuk mengubah warna pada link di content blog. Pilihan Quote berguna untuk mengubah warna qoute (tanda kutipan) pada blog.

Setelah edit Content selesai, selanjutnya kita akan mengedit Blocks. Blocks adalah sidebar (widget pada blog). Lo bisa coba-coba setiap pilihannya. Jangan lupa pada bagian Bullets fungsi ikonnya dimatikan.

 Terakhir adalah edit Footer. Lo bisa bereksperimen sendiri. Jangan lupa pada bagian Bullets fungsi ikonnya dimatikan.

Tambahan untuk mengedit Controls. Pada gambar yang diberi kotak merah di bawah adalah fungsi untuk mengedit tulisan Read More atau Baca Selengkapnya pada blog. Kita bisa mengedit warna huruf, dan lain-lain.

Jika kira-kira sudah selesai, kita Export template yang telah kita edit sesuai dengan platform blog kita. Ingat, seteah export selesai jangan tutup dulu Artisteernya, karena dalam versi trial, Artisteer tidak bisa di save.

Untuk mengupload template yang sudah dibuat ke blog, masuk ke Dashboard Blogger, pilih Template. Lalu pilih Unduh Template Lengkap untuk membackup template yang ingin diganti. Setelah mendownload template yang ingin diganti, pilih Choosen File, cari file yang telah kita Export dari Artisteer tadi (filenya bernama "Main". Lalu klik Unggah.

Template buatan lo udah jadi. Kalo dirasa masih ada yang kurang, lo bisa edit lagi di Artisteer yang belum ditutup tadi, lalu Export dan Upload ulang. Bisa diliat bahwa header pada template baru tidak ada. Lo harus memasukkannya secara manual melalui edit HTML.

Sebelum edit HTML, lo harus upload gambar header lo (ukuran gambar header harus sama dengan ukuran header, ukuran header gue 1000 x 300 pixels, gambar gue juga berukuran 1000 x 300 pixels. Kalo gak sama, gambar tidak akan pas di tengah-tengah header) di hostingan gambar gratis (gue upload di imageshack, kalo belum punya akunnya daftar aja dulu). Setelah lo upload gambar header di imageshack, lo bakal dapet link dari gambar itu. Copy link itu.

Kemudian lo balik lagi ke Dashboard Blogger, pilih Template, kemudian pilih Edit HTML. Pada halaman Edit HTML, klik sembarang mouse di dalam kotak kode HTML, kemudian tekan CTRL + F. Pada kotak pencarian ketikkan background-image. Hasil pencarian akan menunjukkan 3 hasil, copy link gambar header yang udah lo copy tadi seperti yang ditunjukkan gambar di bawah. Inget, linknya berada di luar tanda petik ('_'), contoh 'linkgambarlo'.

Selesai, pilih Simpan Template.