How To Install

Rivado

Help

Sunday 7 December 2014

Belum ada komentar

MetroTaku Template

How to Install

1. Are you a new user? Better read this first.
2. Change Welcome background and template background: search for body, .body-fauxcolumn-outer and below it you will see            background: teal; change teal change with a color you want, example: red,blue. But it's better to use hex codes , see this. Or, you can change with an image, you can wait for next version. Instead of changing into any color, write url() inside the brackets, write the complete url of your image (with http). Make sure the image has big size (recommended: 1024x768).
3. Change Welcome Arrowdown icon(image): search for https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkgao49eIx8QcwB1YmYKJGKwiCZovNOojab3cA8bE8QBfgUXAXguaWtuc57Uakp0VxqjFUdaQPVFU7Q_kSzE81s7ckimvo5Ju37KFuqlJtHh4xJovVNSJLgo8RBlElhMQxVjR7r9HjnfW9/s1600/arrowdown.png and replace it with the complete url of your image.
4. Change Welcome Text: search for #homecontent below that, you will find <h1>Welcome</h1><h4>Welcome to My Awesome Blog! Click arrow below to get started.</h4>. Replace 'Welcome' inside h1 line to replace the header text, inside the h4 line to replace the minor heading text.
5. Change Profile Photo (top left): search for https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeWmvOnUorWEg_Wa3hJewTRJTuLfg5cwDINWVWKaGQDA5lYLbinK6efpvA5R5KqFRUZ6Da3WsleC_CA_6JdkSEE-AQS_zbvPF8mCMdaCXOBh6qJ0DIpb_pPDxzd7r1ZP0e-2oGvNE3CVpm/s1600/user-icon-silhouette.png and replace it with the complete url of your image. Make sure your image is square, small size is okay.
6. Change Header Image (background): search for https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu0OF_7x5x-n8ulHa8aNa9IERl7G7s-W9_xOtdIHOHvDacv1-F5g2zDKVHuHGCE6GiA142Fp_dS0Uoyg8ZOjTWd5ftpSVseX2rQTkZPqLOQ-D7ziEfwgYYlNt1TQRlG-lryM_VPX5hOtij/s1600/img.png and replace it with the complete url of your image (with http). Make sure the image has big size (recommended: 1024x768).
7. Add, change or remove Metro Tiles: Search for metrotable you will see some 'li's. One 'li' is one tile, from <li> to the closest </li>. Example: <li class='metrobox metl'><a href=''><img alt='Image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiONJxhb5mx50vo9rpq-dn6xZ6lsirvs_FWHkHahhN4X6XAKlKuSjmmzyBGfghHjHJzjNJnPf4QUdLEB0972EVx3gLnYm7AU9PqZiyRd63jawHUi6wMu3AZI14Vh4POZ9kFXDeDOH7odF9O/s1600/samplemetakularge.png'/><span>Home</span></a></li> As you see, this is on tile, deleting this line, will remove the tile. You can check the tile position with inspect element or checking the URL. Now, let's edit it. There is quotes next to href=. Fill the quotes with a link, may be your page link, or another link. Replace the image URL (next to src=, inside the quote) with your complete image URL. Make sure you don't remove/miss the quotes. How about add more tiles? Simply copy the example tile script above, and paste below another li, or you can learn HTML for more positioning. How to resize it? Change the metl next to metrobox with metl (large), metm (medium), mets (small).

Another Features

1. Syntax Highlighter Script Area

Write your script then use blockquote, then in HTML section (next to compose) search for <blockquote> replace it with <pre><code>, dont forgot the end tag

search for </blockquote> replace it with </code></pre>

2. Demo and Download Button

<button class='demo'>Text here</button> for demo button

<button class='download'>Text here</button> for download button