' Templateit: Setup

Pages

Setup


Install Blogger Template


  1. First download the .ZIP file from Etsy and save it somewhere on your computer. 
  2. Right click the .ZIP file and Extract it to a folder. You will see the following files in that extracted folder.
  3. Login to your blogger and find the blog to change the template for and from the drop-down menu select Template.




  4. On the top-right corner you will see Backup/Restore button and click on that.

  5. A popup window will open. Click on choose file and browse to that extracted files folder in step 2. Locate the file with your Template name. Make sure the file type is XML.

  6. After selecting your XML type template, simply click on Upload button and you will have your new blog!




Turn on Mobile Responsive

  1. Go to Template tab of your blog and click on the settings icon under Mobile.
  2. A popup window will open and select option "No" and save. Your template will become mobile responsive automatically. You can verify it by pulling up your blog in a mobile device.




Profile Photo

  1. Inside you unzipped folder, double click the "Profile Photo" text file and you will see the following code that you can copy and paste.

    Copy either the "Square" version or the "Circular" version. Make sure to replace the Enter your photo url with an actual url of the profile photo.
  •  After the piece of code is copied, simply paste it inside your HTML/Javascript Gadget under layouts.

or simply copy and paste one of the following from here:

<!-- Square Photo -->
<img src="ENTER YOUR PHOTO URL" class="square" />


<!-- Circle Photo -->
<img src="ENTER YOUR PHOTO URL" class="circular" />




Setup Social Icons


Copy the following code and paste it into the HTML/Javascript gadget of your page layout in the sidebar. Make sure to replace info@templateit.net with your own email.


<div class="social-icons">
   <ul>
      <li><a href="https://twitter.com" target="_blank"><i class="icon-twitter"></i></a></li>
      <li><a href="https://facebook.com" target="_blank"><i class="icon-facebook"></i></a></li>
      <li><a href="https://instagram.com" target="_blank"><i class="icon-instagram"></i></a></li>
      <li><a href="https://pinterest.com" target="_blank"><i class="icon-pinterest"></i></a></li>
      <li><a href="https://googleplus.com" target="_blank"><i class="icon-google-plus"></i></a></li>
      <li><a href="mailto:info@templateit.net"><i class="icon-envelope"></i></a></li>
   </ul>
</div>




Setup Search Box


Copy the following code and paste it into the HTML/Javascript gadget of your page layout in the sidebar. 

<form class="navbar-form" role="search"  id="searchthis" action="/search" style="display:inline;" method="get">
   <div class="input-group">
      <input type="text" class="form-control" placeholder="Search" name="q" id="srch-term" />
      <div class="input-group-btn">
         <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
      </div>
   </div>
</form>





Welcome Message


Copy the following code and paste it into the HTML/Javascript gadget of your page layout in the sidebar. Make sure to change and update the welcome text :)


<div class="welcometext">

Welcome to my beautiful blog!

</div>

No comments:

Post a Comment

Top