Tuesday, December 31, 2013

Steps to design a nice Blogger Template


I created many Blogger template for our community. To day, I just want to share my steps to create a nice Blogger template for sell or for free.

STEPS

1. Get inspirations

I usually visit ThemeForest to find inspiration. Of course, you can go around the web world and feeling with some beautiful websites you visited. You can try to search on Google with your target keywords like: beautiful website, modern web layout, creative web color scheme, .etc.. Just think by yourself.
This can take you 0.5 day

2. Design graphic

I am using Fireworks CS5 to create template files as layout PNG graphic files.
In this step, you also image all features and functions for the template. And your files must contain: Home, Index, Page, Posts, 404, Features List, Mobile.
Please list all your template features in text file, so you can easy test them again in testing step.
This can take you more than 1 day.

3. Prepare Data

Mean you must prepare images for backgroud, icons, buttons, sliders, .etc.. (these images can upload to Picasa).
You also must write post for your testing blog. If the template is free, you can use “Lorem ipsum” text, but if it is premium for selling, please pay attention for your content with beautiful images, videos and funny text.
You can lost more than 0.5 day for this.

4. Make xHTML

I will go from header to footer of Blogger template xml file.
At header, you must take care about title and description tags. Also create some css variable you will use in skin tags with some basic framework (.clear, image, a…) and reset CSS. You must also prepare place to easy insert CSS for IE and jquery library here.
On body, imagine base on your design layout, and create wrapper, inner and sections elements with full properties (showaddelements, maxwidgets) and basic widgets (must have blog, navbar widget) with certain properties (lock=’true’ or ‘false’).
And footer, prepare place to easy add javascript.
I usually use self-hosted CSS and javascript files to design a template, then when finish, i copy their content to embed direct into the template xml code.
This step can take your about 1 day.

5. Create CSS

Now, it’s time to make your template fixed about 80% with your graphic design. Use Chrome with Inspect element function (F12) will help you very much.
You can spend about 1 day here.

6. Create Javascript

This step is for you creating built-in jquery and javascript application of the template likes: json apps, shortcodes, comments, drop-down, pagination, .etc..
This step can take more than 1 day.

7. Stress Test

You must test you you template base on your feature list. Please don’t afraid any errors, just try to test with strongest cases. Less errors, less time to spend for supporting.
You can list your common bugs that you got before on old templates, so you can save the time to think.
This can take your 1 day.

8. Create folders and files to release

You can follow my folder structure or create better one for you.
  • main_files: you will compress as: template_name_versionxx.zip and upload
    • xml_files: release_template_versionxx.xml, testing_blog_data.xml
    • help: help.html, help.pdf
Please mind, you must separate the template_working.xml with release_template_versionxx.xml. A working file is for you easy developing, a release file must be the shortest file with compressed CSS, HTML and Javascript.
This can take just some minutes.

9. Create guide document

Yes, this is very important step if you want to sell your template as premium. Please write very clearly and easy navigate sections in your document. It’s better and easy to sell if you record videos for your guides.
You must prepare all images (and videos) before start writing text for your help files. If your template is free, you can combine this step to release step.
This step can take you more than 1 day.

10. Release

Prepare banner (usually 590×300 or 600×300), thumbnail icons (required if premium), screenshots (require if premium). Images for your item description.
If you template is free, the description may be written as help and guides. If premium one, the description is introduction about features, credits, support information and release notes.
You can lost about 0.5 day for this

Conclusion

The time you spend for a nice Blogger template can be at least 7.5 days.
Mean you lost about 60 hours of working. If an hour of your is $5, so the revenue must be $300+.
A nice template of Blogger can sell about 30+ sales, so if you want to earn $300+, the price for each sale must be $10.
But don’t be rushed, must go step by step, if you skip any thing, may be you destroyed your product and sometime must start again.
Wish you will have many best templates for Blogger.

Source : bloggeritems.com

Free Blogger TemplatesNice TemplatesProfessional Blogger TemplatesBlogger Templates 2014Responesive Blospot Templates How to design template for blogspot>bloggerblogspottemplatesSeo Blogger Templatessearch engine optimizationTutorial Blogger Free Blogger TemplatesNice TemplatesProfessional Blogger TemplatesBlogger Templates 2014Responesive Blospot Templates How to design template for blogspot>bloggerblogspottemplatesSeo Blogger Templatessearch engine optimizationTutorial Blogger

Blogger Templates 2014

News Blogger Template

Magazine Templates for blogspot

Socializer Widget By Blogger Yard
SOCIALIZE IT →
FOLLOW US →
SHARE IT →

0 nhận xét:

Post a Comment

Labels

1 column 2 column 3 column 4 column aaSolah Accessories add button subscrise for blogger Add Digg Button to Blogger add feedburner for blogger add like button facebook to blogger Add Pinterest Pin it Button to Blogger add sitemap blogger to google add stumbleUpon badge to blogger Ads Ready afghan afghan stitch AGULHAS AMIGURUMI Anchor text Ảnh đẹp Ảnh vui Animasi applique Art artikel Árvore de Natal em croche Aulia baby crochet Baby Dress baby knitting Baby learn bag Bags Bài viết BAKTUS Ballet Bun Cover balloons BARRADOS Bayi Bead Beads Bear Ear Hat BEBÊS belts Berita Berry Best WP Theme 2014 Better Blogger Seo Biologi Black blanket Blogal Template Blogger Codex Blogger Images Slider blogger navbar Blogger Rating blogger template 2014 Blogger Templates Blogger Tool Tip Blogger Tutorials Blogger Widgets Blogger-Template Blogspot Blogspot Templates Blue BLUSAS BOINA BOLEROS BOLSAS books BORBOLETAS Bounce Rates bows boxes bracelet Brown Browse Business Butterfly Button Counter Button Facebook CACHECOL CACHECOLAR cake candles candy Candy Cane Cards carving carving fruit carving fruits CASACO INFANTI CASACOS CASAQUINHO EM CROCHE CASAQUINHO EM TRICO CASAQUINHO PARA BEBÊ Cerpen CHAPEU clay COLAR COLAR DE FLORES COLETE coloring Competitor Research Contact Form for Blogger CORDÃO CORUJUINHAS crafts CROCHE COM SAQUINHOS PLASTICOS CROCHE IRLANDES Crochet Crochet Geek crochet pattern cross stitch Curtain customize cutting paper DECORAÇAO Design blogger template Dicionário de Trico - Inglês/Portugues Digg button Dijual Documentation Doily Domain dress dwell time earring ECHARPE Ecommerce Embroidery ENXOVAL PARA BEBÉ ESTOLAS Event Exit Rates facebook facebook button facebook like in blogger facebook share button facebook share button with counter FAIXA PARA CABELOS fashion Favicon for blogger feed rss Felt Fisika Flat News Templates FLORES Flower flower arrangement flowers crochet Folding paper FOLHAS food food decor Foto Free Blogger Templates Free Download Blogger Templates FREE FORM Free Premium frustration Funny Galaxy Stitch Gallery Games garden Gaya Hidup gel grips Geografi gift Gifts Girl glass Go Green GOLINHAS Google Google Analytics Google Merged All Accounts into One google plus button Google SERPs Google Webmaster Tools Google+ Google+ comment GORRO GRÁFICOS Granny Square Gray Green hair clip Haji Hama hats Heart Hexagon hide blogger navbar holiday craft holiday crafts home and garden Hook how to how to add favicon for blogger how to add feedburner How to install flat news how to turn off google plus comment how-to-guides Hunian Iklan Baris Ilmu Pertanian Image Thumbnail for Blogger imam Indexed Quickly for blogspot iNews 2014 Blogger Template Info Kontes Installing Blogger Template Internet Iseng Islam Itunes jewelery jewelry Karma Blogger Template Kata Bijak Kata Mutiara Kesehatan Kewarganegaraan Keyword Research Kiếm tiền kirigami Knit knitting knitting pattern knot Kuliner Landing Page Blogger Templates Lập trình Blogspot Latent Semantic Indexing LEAVES Like button facebook Lirik Lagu LirikNasyid Log Cabin Square LSI LUMINÁRIAS LUVAS LUVINHAS PARA BEBÊ Magazine Magazine Blogger Template make up making flower making flowers Making toys Manta MANTA PARA BEBÊ MANTA PARA SOFÁ Mashable MEUS MOMENTOS MEUS TRABALHOS mittens motif Motivasi Movie Multiples Music Nail art Nature necklace News News blogger template News Google News Pro Blogger Template Nivo image slider Olah Raga On page seo Online store Orange Organik Origami Pagerank painting PANTUFAS PAP Paper Patchwork PELERINE Penyakit Tanaman Peribahasa Personal Phần mềm pictures Pilihan Pillows Pink plastic POLAINA PONCHO Popcorn Popular Posts Popular Posts Code For Blogger Portfolio post automatically to twitter Premium Blogger Teamplates professional blogger templates Profil puff stitch Puisi pumpkin cap QUADRADO Quilling paper Quilt RECEITA RECEITA CULINÁRIA RECEITA DE PONTOS recycle recycling Red redirected to FeedBurner Related Post Widget remove navbar blogger RENDA DE PELO DE CABRA repair work Responsive Blogger Template retweet button ribbon rings rss for blogger rugs SACOLAS SAIAS DE CROCHE SANDÁLIAS EM CROCHÊ SAPATINHOS SAPATINHOS PARA BEBÊ Sastra Scarf scarves search engine optimization Search engine users seo Seo Blogger Template SEO Course Outline Seo For Blogger SEO Friendly Seo in 2014 Seo tips Seo Tutorial Seo Tutorial 2014 Seo With Blogger Serba Info Serba Tips serps sewing share button share twitter button shawls shoes and sandals Simple Singing sitemap blogspot sitemap page skirt Slider for blogspot snood Snowflake soap socks SQUARE steps to design a nice blogger template Strawberry subscrise button SUÉTER sweater Swiffer Sweeper Cover Syahira blogger theme TABELAS DE MEDIDAS DE TRICO E CROCHE tablecloths Tanaman Padi TAPETES. RECEITA Template TENIS PARA BEBÊ Thank you the panda update Thủ thuật Tien Nguyen tip tips Tips and Tricks TOALHAS TOUCAS TOUCAS PARA BEBÊ Travel TRICO Từ điển Blogspot TÚNICA tunisian turn off google plus comment Tutorial Tutorial Blog Tutorial video twitter button Twitter follow button twitter for blogspot underwear Valentine's day Vegeta Blogger Templates Video VÍDEO Video Blogger Templates video tutorial weaving Web 2.0 wedding Wedding Mag what is a bounce What Is Anchor Text what is bounce rate What is Seo White WIDGET Widget For Blogger wood Wordpress Look WordPress Themes XALE Yellow Youtube