Can You Edit Blogger Templates

How to Utilize Dreamweaver to Edit Blogger Templates

Mychelle Blake

Working equally a Communications Director for several years, Mychelle is fluent in the use of social media.

Social Media Consultant

Blogger is a cracking free service provided by Google that lets yous prepare your own professional-looking web log online. At that place are a handful of themes provided past Blogger to choose from, complete with a WYSIWYG (what you run into is what you get) interface that makes editing them easy fifty-fifty for the non-coder. Withal, if you have CSS and HTML knowledge, you tin practise even more customization using a programme like Adobe Dreamweaver.

Downloading Your Blogger Template

Once you have set up an account on Blogger.com, yous will be prompted to set upwardly your new blog.

Enter a name for your blog, which will be the title of the blog seen on the homepage. For example, if you're writing a web log on kittens, a title could be "Bob's Kitten Blog."
The second field you will need to fill in is the URL of the blog. Google provides complimentary hosting, so in this example, the blog URL could exist Bobskittens.blogspot.com. Yous do also have the option of providing a custom URL if y'all adopt.
Once y'all take these two pieces of information entered, you will exist taken to your Blogger dashboard. Scroll down the carte du jour on the left side and cull "Theme."
The default will exist a base theme and y'all can whorl down to cull from the other options. When you click on a theme, a window will pop up showing you a "live" version of what your blog will await like with that theme. If y'all find one you like, click on the orange "Use to Weblog" button at the bottom of the screen.
At present, wait up to the upper correct of your screen. Click on the "Backup/Restore" push button that appears underneath your Google account icons.
A window will popular up that says "Theme > Fill-in/Restore." Click on the orange "Download theme" pick. The theme files will download to your computer every bit an XML file.

Before Y'all Go Started

If you are brand new to using CSS (Cascading Mode Sheets) and HTML (HyperText Markup Language), you will demand to have a proficient noesis of these languages prior to editing a Blogger template using Dreamweaver.

Note that using Dreamweaver is not ideal for editing all elements of a Blogger template. Blogger has its own congenital-in editor to customize sites and this is a much faster method for such tasks every bit changing background images and adding or deleting elements. Using Dreamweaver tin can exist faster for editing elements such equally fonts, colors and other easily searchable items.

Using Adobe Dreamweaver

The procedure to edit Blogger templates described in this commodity is relevant for versions of Dreamweaver from CS4 (2008) on. Currently, Adobe Dreamweaver is office of the Adobe Creative Cloud subscription, with the version at present known as "CC" which replaced CS6.

If you don't have Dreamweaver, you will need to go it via their Artistic Cloud subscription service. The fees vary simply average $49.99/calendar month with discounts for students and schools, also every bit bulk-pricing for multi-license purchases by businesses. The Creative Cloud subscription gives you access to all of Adobe's pop pattern software, including Photoshop, Illustrator, and more than. Alternatively, you tin can purchase a single software subscription if you only desire Dreamweaver for $19.99/calendar month. If you're not sure and want to endeavour it out, at that place's too a 30-day free trial option.

HTML and CSS Learning Resources

There are many free and paid resources online for those interested in learning how to understand and edit CSS and HTML files.

W3 Schools: This site provides free information on all aspects of CSS and HTML elements and language.
The Odin Project: Access a step-by-footstep learning tutorial for CSS and HTML, every bit well as Javascript.
Lawmaking Academy: One of the more popular coding tutorial sites, Code Academy provides complimentary tutorials on CSS, HTML and other coding languages.
Free Code Camp: Another highly popular venue for students of all types of code, this site is known for its active and helpful community.

The XML File Format

The Blogger template file you volition edit in Dreamweaver is known as an XML file, which stands for eXtensible Markup Linguistic communication. An XML file uses similar language as an HTML and CSS file, merely places all the information for both into one single file. The reason for this is that an XML file is designed to "store and transport information" and thus is the type of format you will run into when backing upward multiple files into one file, such every bit with a WordPress or Blogger site backup file.

If yous know HTML and CSS, the code inside the XML file will be very familiar. Ane important chemical element to await out for is the Blogger tag which opens with <b:skin> and closes with </b:skin>. Inside of these tags are all the CSS styles, which are written as variables. The HTML code follows the CSS code in the file, and a Blogger template is made up of "widgets" and "sections." Blogger provides a list of these in its Help section.

An example of how variables are written would be with fonts. In the template used in this example, the main font is Damion Regular. In the theme'due south XML file, the code is so written as:

How variables are written in a Blogger XML template file.

Setting Up Your Workspace

One of the drawbacks of using Dreamweaver to edit a Blogger template is that you will not a WYSIWYG experience. You will but be able to see the code you are editing. In club to see the changes "live," yous will have to upload the file back to Blogger, or brand the changes using a browser Audit Editor office first. Therefore, it is recommended that you follow these steps first.

Brand a fill-in copy of the template XML file you take downloaded from Blogger so y'all have a make clean copy in instance you demand to revert back to the original code.
If you already accept an active site, your blog will look strange while yous are loading up changes to the template from your Dreamweaver-edited file. To solve this, set your Blogger site to private then only you tin can come across the changes to your site while you are making them. You lot tin do this past going into your Dashboard and selecting Settings, so Permissions, then "Web log Authors Only." Of course, if you don't mind if visitors run across the changes happening, then you can skip this stride!
Another option is to create a 2d site that is for testing purposes and fix that one to individual. Once you are satisfied with the changes you have fabricated in your testing site, you tin can then apply them to the template file for the "actual" blog.

Editing Your Blogger Template File

Now that you lot're ready to start editing, launch Adobe Dreamweaver and open the XML file yous downloaded from Blogger. When y'all open the file in Dreamweaver, you will run across all the XML code in the editor.

Screenshot of XML code from Blogger template in Dreamweaver.

Using your browser'due south Audit Editor with the live blog, hover over the item you lot want to change to notice the correct element. Yous tin can also roll through the code, but if you are searching for an chemical element that is mentioned many times with dissimilar parameters (due east.1000., font), using the Inspect Editor may be quicker.
For example, to change the font type for the chief title, use the Inspect Editor to see that it is Robot 45px.
Go into Dreamweaver and using the Detect office (Ctrl+F, F3, or using the bill of fare, Find - Discover in Electric current Document) look for "roboto." In this example, the variable for this detail instance of the font is on line 23.
To change this font to a serif version such every bit Roboto Slab, the code would exist edited in line 23 to say:
<Variable name="robotoBold45" description="Roboto Slab Bold 45" type="font" default="bold 45px Roboto Slab, serif" hideEditor="true" value="assuming 45px Roboto Slab, serif" />
You as well would then curl to that element, which can exist found on lines 75 to 78 here, and change the value in line 78 to "bold 45px Roboto Slab, serif".
When you are washed, salvage the file, go to your Blogger Dashboard, and choose the "Theme" pick in the carte du jour. Click on the "Backup/Restore" push button and this time choose the second button that says "Choose File." Discover the newly edited XML file on your computer. Click on it and then click on the orangish "Upload" button in the pop-up window.
Expect for the file to upload. When it is complete, the pop-up window will shut and y'all volition render to the Theme area of the dashboard. Now, if you view your live weblog, you lot will see that the header font has changed to Roboto Slab. You can see the change in the Audit Editor too.
Follow the aforementioned steps to edit other items, such as font, colors, and whatever items your noesis and skill with HTML and CSS let!

Finding Blogger Templates

Your Blogger account comes with some templates pre-installed, just it'southward not a deep option. Y'all tin find more templates on other sites like the following.

BT Templates: This site contains gratuitous templates in a variety of styles for utilise with Blogger. Y'all can submit your templates as well for others to employ.
Deluxe Templates: Find hundreds of gratuitous Blogger templates with an easy-to-use search feature to find just the right look.
Colorlib: 30 of the all-time costless responsive Blogger templates are bachelor here, each with helpful descriptions of its benefits.
My Blogger Themes: This Blogger theme gallery has free themes arranged by design way, topic and features.
DesignCrazed: This regularly updated, curated list of the best free Blogger templates has detailed information on each template, plus the ability to view a demo and download the template.
Our Blog Templates: In addition to over 170+ gratis templates for Blogger, this site also features some CSS pattern tutorials.
Blogger Templates: The site has four pages with some unique themed templates created by a Blogger user.

Customizing Your Blog

If you're ready to get online and develop your blogging presence, information technology's every bit easy as creating a Blogger account and setting up your template. With Adobe Dreamweaver, there's a myriad of free templates you tin can customize with some simple steps, an understanding of CSS and HTML, and your ain personal design inspiration!