What are the Basic Tools to Create a Blogger Template?


#1

With this delicious question, we would like to call our Pro Admin @Mohammad

The question is further divided into two parts.

  1. What are the Basic tools for creating Blogger Template ?
  2. How we can design Blogger Template ?

Here: i would like to invite the pro admin of the forum, how can help us better and better.

Generally, i would like to tell my experience, techniques and tools with the help we creating blogger templates,

  1. I almost, work inside blogger dashboard template editor layout.
  2. I am using a popular plugin called FireBug gifted by Mozilla.
  3. I make changes, editing online with FireBug and copy the modification Css styles etc and past inside the template and then save it.
  4. I create Logos, using tools, Photoshop, Ipiccy, Sothink and much mores.
  5. For Javascript i visited top popular site like Codepen, Gitgub and some others.
  6. As i have never used www.Artisteer.com but some do recommended it.
  7. Most of Designers play with Dreamweaver to create Blogger Theme.

So once again we would call @Mohammad that how he used to create blogger template couple year ago at MBT.

The very important issue we would like to tell us the Way from A to Z

That how you were creating template. Are you editing, templates with plugins like chrome addons, etc and make changes, after that copy css style & put inside the template or You you were used to create blogger template live on other platform. Any time save software tools etc… If there is one, then we would like to hear from you. thanks


How to Create a Blogger Template?
What knowledge is Required to become a Template Designer and Pro Blogger?
How to Create a Blogger Template?
#2

Hi @Templatezy, I appreciate you for asking this question.

In the past, I too tried finding how to design templates. I came across sites such as ourblogtemplates[dot]com which taught some basics and more.

Talking about Artisteer, its a great tool as it also allows designing templates for not only Blogger but for WordPress and some other CMS too. But while using the trail version I found a few things weird with that software and tried asking the Artisteer support team regarding that. But they never tried sorting the issues so I gave up the idea of having its paid version thinking that the software might create trouble in future and with a slow support team things get worse.

So, the best person to answer this will be Mustafa, I look forward to read his reply on this as we all know he has made amazing templates for his blogs.

– Rohan Chaubey.


#3

Oh wow you asked my favourite question!

I will be extremely sincere in sharing everything and best help every newbie and also the skilled designers to better developed Google Blogger widgets and responsive Templates. Here is the list of everything I do to design blogger templates.

Design Part

  1. First I draw a rough sketch of the layout on photoshop and decide the colours and front interface design by browsing over 40+ latest web designs for inspiration from drupal, joomla, phpbb and Wordpress themes . I take inspiration for a header, navigation menu, content area, sidebars and footer for sure. This helps me remain updated with latest design trends and making sure my clients get the best quality interface. I also keep the clients design requirements in mind while creating the PSD layout. Note that the PSD layout is simply a rough sketch for how I want the template to look like. I design the icons, buttons and remaining elements after I have coded the basic XHTML structure.

  2. I then decide the layout dimensions and create slices of each element. Note that I save each element on its single PSD source file and save the slices in separate files once I have setup the basic structure by coding it. By slices I refer to keeping the layers of each element in a single folder in photoshop.

Development Part

  1. First and foremost my life is at ease thanks to Microsofts extremely advanced free webkit tool called Microsoft Webmatrix Rarely any one knows about its awesome functionalities! It is a cloud connected free lightweight web development tool that lets you easily create , manage and host your sites on localhost. We also develop Wordpress themes in it because it has a built in wamp like utility installed which auto installs Apache server and PHPmyAdmin. Dream weaver and code lobster were my previous choices but after Webmatrix I rarely need anything else! It helps you code php, ASP.net, JQuery, HTML5 , CSS3 and what not. It also has device emulators which you can use to test the responsive behaviour of blogger templates.

  2. In Webmatrix I then import the MBT default minima template with basic design structure. I never code a template from scratch but use the minima mbt template because it’s the most optimised and well setup template to start with. You can also use the official minima blogger template. I then start by cutsomizing its header, content area, sidebar and footer section by applying the colours and design elements I created in photoshop. The customisation is done in Blogger Template editor.

  3. I use Chrome’s built in inspect utility to make live CSS and HTML changes and uses its Console tool to inspect the jQuery effects. I have never used firebug after both Firefox and Chrome introduced these built in tools.

  4. If I stuck somewhere , I take support from sites such stack overflow, GitHub or I rush to my friend aneesh Joseph of Blogger Plugins or some Indonesian programmers. All these magazine style templates that you see today are developed thanks to aneesh’s and Indonesians awesome scripts but rarely the violators at themeforest or the design thefts at several blogger template sharing sites , give credits to them. that is surely sad. I recently broke a contract with themeforest after I saw that they had some developers which violated many script copyrights and themeforest rarely bothered, I have cancelled the contract and will share the templates Very soon as our next big project online.

  5. I also use online device emulators like mobiletest to test the output css3 media queries for mobile responsive effects of the blogger template. It helps me decide content breakpoints using emulators of major devices like iPhone, Samsung , HTC and Google nexus.

  6. For designing responsive stylesheet I never create device specific breakpoints but I rather prefer content specific breakpoints. If you want to know more details on this then kindly create a new topic for the question and I would love to explain it.

  7. When I am done with everything, I call my friends and then hangout for hours and days to release all the workload Stress! :blush:

That is how we design and develop blogger templates and Wordpress themes at STCnetwork. I hope I have not kept any secret hidden. :smile:


Creating and Customizing Blogger Templates
How To Convert A Wordpress Theme Into a Blogger Template?
#4

Wow Mustafa, I loved your reply. I think you revealed everything. Thanks for sharing some tools and web resources with us. Thank you for your insights.


#5

I have no big words to pay thanks, @Mohammad You, really explained and, it really really helped me a lot, Being a designer, i have been never with Webmatrix…but now i can easily standup myself as clean code designer, Thanks billions…


#6

Always welcomed buddies. Keep asking questions and I would love to answer all :blush:


#7

@Mohammad, I have been following you for years and this forum is another of your great initiatives. I just wanna ask you how much do you charge for a template? I blog at Passudiary.com and I am looking for a costume template.


#9

you are most welcome @Passang_PaSsu_Tsheri and thank you for your kind feedback. Kindly ask all off-topic or service related questions by either sending me a private message through this forum or sending your email at our service page


#10

if only google web designer can make template for blogger or direct publish to blogger. it will be a huge leap http://www.google.com/webdesigner/


#11

@Mohammad thanks for sharing this useful information with us


#12

Normally you need to learn the basic first… Learn the basic from the below video, that I created to help bloggers in developing of blogger templates.

https://www.youtube.com/watch?v=N6ru0-L0ocU

https://www.youtube.com/watch?v=xS52Ug4Vaww

I hope this worked for you .


#13

@MUHSIN_MOHAMED_PC Looks, like you just follow this videos steps.

I have no problem on that, but sharing own steps, is good habit of any blogger.

I have also seen, you have pasted both videos in two forum post, it’s also looks like you are promoting your self.


#14

@Arjunsinh_Chauhan … I hope the video helped you. Isn’t? I developed a small template using the tutorial. You can take a look to it by entering to the following address:http://androidtrainerplus.blogspot.in


#15

At least, read my reply carefully :frowning: You have copied someone else videos steps.


#16

@Arjunsinh_Chauhan I just released two videos, I will release the upcoming parts in the coming days. Also, I don’t want to change the step. You know bloggers were writing the same content that wrote by other bloggers. But bloggers do not stop doing that. So Me aslo do the samething. I hope you don’t have any problem with that.


#17

@MUHSIN_MOHAMED_PC No problem, what you have shared in your blog, but it is not good thing to promote same kind of video multiple time, that already shared by other member. And I know, you have already got my points.


#18

@Arjunsinh_Chauhan If you don’t have any problem with that, Just stop replaying.


#19

Then you should not promote your videos here. You just spamming here.


#20

@Arjunsinh_Chauhan I am not spamming here. If the administrator of this forum has any problem with the video, that I published here. They can take action. Also, I don’t think that I spammed this post or forum because the second video that published here was too different from the video released by the other guy you were talking about. He doesn’t published any video that related to Blogger Title Tag.


#21

Bro Sharing Videos Without Links In This Forum Is Not Spammy Either It is Created By Member Or Somebody Else :smiley: As It May Help The Person Who Has Created This Topic.

Therefore please stop this chit chat and be happy :smiley: