Skip to main content

Installing and Using Blogger Templates Created with Artisteer

Hosting Images

Blogger does not support uploading images directly to Blogspot accounts, so you will need to select one of methods available in Artisteer for hosting template's images externally. Artisteer provides three image hosting options which may be used depending on your reliability and performance requirements:
  1. Picasa Web Albums
    This service is used by default and is suitable in most cases as Picasa utilizes the same Google account used for Blogger and does not require additional registration or configuration.
    To set the hosting options navigate please File -> Export -> Options -> Image Hosting.

    blogger templates

    NOTE: Picasa does not support large images being accessed from custom domains, therefore when hosting your blog on a custom domain (eg. www.<yourname>.com) Artisteer will instead upload larger images to free ImageShack image hosting service. This may occasionally result in slower performance, therefore custom domain owners may consider choosing other image hosting options listed below.
  2. ImageShack
    ImageShack is an alternative to Picasa and offers a free service that does not require user registration for uploading the images. Nevertheless, you should be registered to use your hosted images. Artisteer supports both free service and paid ImageShack accounts. Enter your login information in Artisteer to use the ImageShack hosting.

    blogger templates

  3. FTP
    You may choose to upload images to an FTP server by providing your FTP account information, FTP folder where you want images to be stored, and the URL that corresponds to the specified FTP folder.

    blogger templates

You may also use any other service to host your images. In such case you select to export (rather than publish) your template in Blogger format and separately upload images to your hosting destination.

Please, keep in mind that neither ImageShack nor Picasa allow to publish .swf files. Using Flash Header will require some other hosting service for uploading images. For this select "FTP server" as a hosting service in Artisteer Export Options.

Exporting and Installing Blogger Templates

In some cases you may choose not to publish your Blogger template but export and manually upload it.
To export a Blogger design:
  1. Navigate Export -> Blogger Template.

  2. blogger templates

  3. In the Export dialog enter the folder name and the path to the exported template, check the appropriate boxes to export the template as ZIP archive and/or include the ARTX project.
  4. Select the location for the exported images, configure the Menu Source and other options by clicking "Options".
  5. Click the "Export" button.
To install a Blogger template:
  1. Open the exported main.xml file and modify the image paths to reflect the location you’ve chosen to place the image files.
  2. Log in to your Blogger Dashboard.
  3. Navigate Template -> Edit HTML and paste the code from main.xml.
  4. Confirm and Save.

Creating Horizontal Menu

Before publishing/exporting the template open Artisteer Export Options (File -> Export -> Options -> Blogger) and specify the Horizontal Menu Source. The default horizontal menu source will be Pages, but you can also select "Custom" if you would like to use custom links.

blogger templates


To edit the menu in Blogger:
  1. Log in to your Blogger Dashboard.
  2. Go to Layout-> Pages -> Edit. This will take you to Configure Page List.
    Blogger Templates

    If you are creating a custom Top Menu instead of Pages you will see the Top Menu bar. Select Edit and add the menu item link in the Configure Links List.

    Blogger Templates


  3. Click "Add Link" to add links.
  4. If you need a multi-level menu please enter "-" (dash) before the Subitem name, for example: "-Submenu Item".
    Please note that the Submenu item should be placed below the parent menu item.The page-source menus can have only one level of menu items.
  5. Click Save.
Note:
  • If you do not want to use the menu please select a layout in Artisteer without a menu.
  • "Home" item is added when the "Show Home item" option in Artisteer Export Options dialog is set to Yes.

    Blogger Show Home item

Working with Vertical Menu

In the Export Options you can select a Vertical Menu source - Archive, Pages or Custom Vertical Menu. Go please to File -> Export -> Options -> Blogger.

Blogger VMenu

To edit the Vertical Menu:
  1. Log in to your Blogger Dashboard and select "Layout".
  2. Find the Vertical Menu area and select "Edit". The Vertical Menu area will be named "Pages", "Links" or "Archive" depending on the selected Vertical Menu Source.
  3. Add menu item links in the Configure Links List.
  4. If you need a multi-level menu please enter "-" (dash) before the Subitem name, for example: "-Submenu Item". Please, make sure to place the Submenu item below the parent menu item.

    Note: The page-source menus can have only one level of menu items.

    Blogger Templates

    Subitems will show up on the website after clicking the parent item. To change this setting, please open your Artisteer project and navigate Vertical Menu -> Submenu -> Levels -> e.g. All Open. After that re-publish your template and repeat the steps described above.

    Blogger Templates


  5. Click Save.

Displaying Blogger Navbar

The "Show Blogger Navbar" option allows you to hide/show the Blogger navigation bar on the top of your pages. To set this option go please to File -> Export -> Options -> Blogger.

Blogger Show Navbar


Make sure that you do not violate Blogger Terms of Service if you decide to remove the Navbar.

Adding Gadgets to Header

Artisteer 4.0 templates published or exported to Blogger support gadgets in Header. The style and position of gadgets can be adjusted with CSS code. Please follow the steps below:
  1. Drag and drop a gadget above the Header area.
  2. Click Edit Gadget and copy the gadget's id, e.g. CustomSearch1. The id is required to position a gadget with CSS.


  3. Blogger Gadget Id


  4. Select Edit HTML and paste a custom CSS code after /* Begin Additional CSS Styles */ in the code window. Use CTRL+F for faster search:
    #CustomSearch1 {
          top: 20px;
          left: 50%;
    }
    

Comments

  1. how to modify the image paths to reflect the location you’ve chosen to place the image files?

    ReplyDelete
  2. Excellent web site you have got here.. It's hard to find high-quality writing like yours nowadays. I truly appreciate individuals like you!
    website design

    ReplyDelete

Post a Comment

Popular posts from this blog

Menentukan bilangan Genap dan Ganjil dengan Delphi

Menentukan bilangan  genap dan ganjil emhh langsung saja.. Dalam program ini kita membagi inputan bilangan menjadi 2 dengan perintah : if a mod 2 = 0 nah perintah mod  disini yaitu membagi bilangan. langsung desain form nya saja. Desain form : selanjutnya rubah properties :   setelah dirubah propertiesnya : nahh langsung aja kode program nya :) untuk button 1 (keluar) : procedure TForm1.Button1Click(Sender: TObject); begin close; end; untuk button 2 (proses) : procedure TForm1.Button2Click(Sender: TObject); var a : integer; begin a := strtoint(edit1.Text); if a mod 2 =0 then     begin       label4.Caption:= 'Bilangan Anda Genap';       end      else      label4.Caption:= 'Bilangan Anda Ganjil';   end; untuk button 3 (ulang) : procedure TForm1.Button3Click(Sender: TObject); begin edit1.clear; label4.Caption:='Hasil'; end; nahh itu td programnya kalo anda ingin yg udah jadi download disini ..

Menampilkan Tanggal dan Waktu pada netbean

Selamat malam teman, malam ini saya akan memberikan bagaimana cara untuk menampilkan jam serta tanggal otomatis pada nnetbean : pertama kita buat sebuah jFrame  Form dengan 2 buah jLabel yaitu jLabel1 dan jLabel2. kemudian pada Source kita utak atik : kita import dahulu untuk jamnya :    kita tulis dibawah   :                                package form; import java.awt.event.ActionEvent; import java.awt.event.ActionListener;  import javax.swing.Timer;        Source utama : //untuk perintah penampilan tanggal public void setTanggal(){     java.util.Date skrg = new java.util.Date();     java.text.SimpleDateFormat kal = new     java.text.SimpleDateFormat("dd/MM/yyyy");     jLabel1.setText(kal.format(skrg));     }     //untuk perintah penampilan tanggal public void setJam(){ ActionListener taskPerformer = new ActionListener() { public void actionPerformed(ActionEvent evt) { String nol_jam = "", nol_menit = "",no