Beranda / Documentation

Documentations

Posting Komentar
Hallo sahabat Habari Sehat, Pada Artikel kami menuliskan informasi tentang: Documentations.
Kami telah menuliskan artikel ini dengan baik untuk kalian. Mudah-mudahan isi postingan Artikel Documentation, yang kami tulis ini dapat anda pahami. Baiklah, selamat membaca.

Judul artikel ini tentang : Documentations dan bisa dishare melalui link berikut ini : Documentations

Baca juga


Documentations

Documentation of Gampang Blogger Template
Documentation of Gampang Blogger Template

Just follow this instruction carefully, also in Setting folder.

Introduction

Some codes that will help you, when edit the template:

Color:

  • Blue color code: #08AADB
  • Orange color code: #f07328
  • Title post h1: #000
  • Title post h2: #000
  • Hover color: #f07328

Others:

  1. <head> =  &lt;head&gt;
  2. </head> =  &lt;/head&gt;&lt;!--<head/>--&gt;
  3. </body> =  &lt;!--</body>--&gt;&lt;/body&gt;

Other instructions are in the Settings folder.

Installation

When you are ready to install a theme, you must first upload the theme file. The theme file can be uploaded in two way.

a. Backup File

Login to Blogger > Template > Backup / Restore > Download full template.

b. Upload File

When you are ready to install a theme, you must first upload the theme file. The theme file can be uploaded in 2 way.

First way:

  1. Login to Blogger > Template > Backup / Restore > Choice File
  2. Open your purchase folder, you will see a folder with name ***-template-XML
  3. Click "Upload" button, wait a minute until process installation done.

Second way:

  1. Open the XML file with a text editor (Notepad or something like that). Then select all text and copy (Ctrl+A, Ctrl+C in Window).
  2. Return to your blog dashboard, access your Template menu, click Edit HTML.
  3. In Editor HTML window, select all old code and paste the new code that you copied from the release file into code field. Then, click Save Template.

Customize Theme

Change header with image

Make image with 230x50 px and save with PNG or JPG. Return to your blog dashboard, and click Layout > Header > Edit Choice File > Upload your header image Select Other title and description.
change header title with image (logo)

Navigation

Login to Blogger > Theme > Edit HTML Find and change all code # with your link and title with the title of every menu.
<nav class='menu-center' id='mobile-navi2' itemprop='mainEntity' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>
<!-- secondary navigation menu start -->
<ul class='nav menux'>
<li><a href='/search/label/Activities?&amp;max-results=8' itemprop='url' rel='nofollow' title='Activities'><span itemprop='name'>Activities</span></a></li>
<li><a href='#' itemprop='url' rel='nofollow' title=''><span itemprop='name'>Gallery</span></a></li>
<li><a href='#' itemprop='url' rel='nofollow' title=''><span itemprop='name'>Inspire</span></a></li>
<li><a href='#' itemprop='url' rel='nofollow' title=''><span itemprop='name'>Style</span></a></li>
<li><a href='#' itemprop='url' rel='nofollow' title=''><span itemprop='name'>Games</span></a></li>
<li><a href='#' itemprop='url' rel='nofollow' title=''><span itemprop='name'>Performance</span></a></li>
<li><a class='downcaps' href='#' itemprop='url'><span itemprop='name'>Others</span></a>
<ul>
<li><a href='#' itemprop='url'><span itemprop='name'>Pictures</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Interesting</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Amazing</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Health</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Android</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>History</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Film</span></a></li>
</ul>
</li>
<li><a href='/error-404.html' itemprop='url' rel='nofollow' title=''><span itemprop='name'>404 Page</span></a></li>
<li><a href='http://www.themeindie.com/' itemprop='url' rel='nofollow' title=''><span itemprop='name'>Download</span></a></li>
</ul></nav>

Dropdown Menu

You can create dropdown menu like this:
<li><a class='downcaps' href='#' itemprop='url'><span itemprop='name'>Others</span></a>
<ul>
<li><a href='#' itemprop='url'><span itemprop='name'>Pictures</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Interesting</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Amazing</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Health</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Android</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>History</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Film</span></a></li>
</ul>
</li>

Social Media Menu

Find and change all code # with your social media link.
<div id='sosmed'><ul>
<li class='social_btn'><a class='social_item s_yt' href='#' itemprop='sameAs' rel='nofollow' target='_blank' title='Subscribe on Youtube'><i aria-hidden='true' class='fa fa-youtube'/></a></li>
<li class='social_btn'><a class='social_item s_ig' href='#' itemprop='sameAs' rel='nofollow' target='_blank' title='Follow on Instagram'><i aria-hidden='true' class='fa fa-instagram'/></a></li>
<li class='social_btn'><a class='social_item s_fb' href='#' itemprop='sameAs' rel='nofollow' target='_blank' title='Like on Facebook'><i class='fa fa-facebook fa-fw social_icon'/></a></li>
<li class='social_btn'><a class='social_item s_tw' href='#' itemprop='sameAs' rel='nofollow' target='_blank' title='Follow on Twitter'><i class='fa fa-twitter fa-fw social_icon'/></a></li>
</ul></div>

Credit Link/Credit Footer

Do not delete/remove this credit link if you using template free version. It's make you so good and look like appreciate creativity of others.
<div class='credit-wrapper'><div class='creditfooter'>
Copyright &#169; <span itemprop='copyrightYear'>2017</span> <span itemprop='copyrightHolder' itemscope='itemscope' itemtype='https://schema.org/Organization'><a expr:href='data:blog.homepageUrl' expr:title='data:blog.title' itemprop='url'><span itemprop='name'><data:blog.title/></span></a></span>. Template by <a class='creditlink' href='//www.themeindie.com/' title='Themeindie.com'>Themeindie.com</a>, All Rights Reserved.
</div>

Meta and Title Tag for SEO and Opengraph

If you wanna be your blog powerfull on SEO, dont change this meta tag. OK!

Change XXXXX with yours:

<!-- Additional meta tag -->
<meta content='XXXXX' name='google-site-verification'/>
<meta content='XXXXX' name='msvalidate.01'/>
<meta content='XXXXX' name='yandex-verification'/>
<link href='//plus.google.com/XXXXX/posts' rel='publisher'/>
<link href='//plus.google.com/XXXXX/about' rel='author'/>
<link href='//plus.google.com/XXXXX' rel='me'/>
<meta content='Themeindie' name='Author'/>
<meta content='general' name='rating'/>
<meta content='translate' name='google'/>
<meta content='English' name='language'/>
<meta content='en-US' name='geo.country'/>
<meta content='index,follow' name='robots'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta content='article' property='og:type'/>
<b:else/>
<meta content='website' property='og:type'/>
</b:if>
<meta content='https://www.facebook.com/XXXXX' property='article:author'/>
<meta content='https://www.facebook.com/XXXXX' property='article:publisher'/>
<meta content='XXXXX' property='fb:app_id'/>
<meta content='XXXXX' property='fb:admins'/>

Post Page Widget (additional)

Make Youtube video on post page

<script type="text/javascript">embed("nvlxPoD9lwE");</script>



Add table on post page


<table cellpadding="0" cellspacing="0" style="text-align: left;">
    <tbody>
        <tr>
            <th>Table Header 1</th>
            <th>Table Header 2</th>
            <th>Table Header 3</th>
        </tr>
        <tr>
            <td>Division 1</td>
            <td>Division 2</td>
            <td>Division 3</td>
        </tr>
        <tr>
            <td>Division 1</td>
            <td>Division 2</td>
            <td>Division 3</td>
        </tr>
        <tr>
            <td>Division 1</td>
            <td>Division 2</td>
            <td>Division 3</td>
        </tr>
    </tbody>
</table>

Table Header 1 Table Header 2 Table Header 3
Division 1 Division 2 Division 3
Division 1 Division 2 Division 3
Division 1 Division 2 Division 3

Blockquote

Nullam ullamcorper dictum velit eget ultricies. Proin accumsan, libero id accumsan gravida, libero ligula fringilla tortor, ac placerat quam lectus vel est. Cras id tincidunt dui. Duis libero nisl, convallis tristique ultrices vulputate, ornare pretium tellus. Morbi ornare ante eget massa tristique euismod. Sed pulvinar bibendum nulla, non euismod sapien.

Split text on post page

<div class="split2">
// YOUR TEXT HERE
</div>

Vivamus et ullamcorper enim. Integer luctus dui nec nibh commodo, a fermentum tellus semper. Duis ullamcorper, turpis sit amet bibendum dictum, mi justo varius orci, quis elementum justo lacus eu urna. Sed sem neque, sagittis quis posuere vel, semper quis neque. Curabitur fermentum eros eget leo bibendum ultricies. Donec felis nisl, gravida et auctor vel, bibendum et nunc. Duis sit amet cursus velit. Nulla bibendum lectus sit amet diam scelerisque lacinia gravida eu erat. In hac habitasse platea dictumst.

<div class="split3">
// YOUR TEXT HERE
</div>

Quisque viverra sem libero, et porta odio blandit ac. Duis malesuada est mauris, sed semper risus iaculis ac. Fusce posuere auctor neque, non lacinia lectus accumsan feugiat. Pellentesque tincidunt erat ullamcorper quam molestie, nec lacinia ligula consectetur. Aliquam sit amet tellus ut nulla condimentum vestibulum in eget ante. Mauris lacinia est sit amet arcu dapibus sodales. Donec a erat vehicula mauris tincidunt tristique. Mauris mattis sit amet massa ut suscipit. Nam pretium molestie odio, et interdum massa tincidunt at. Morbi ligula tellus, scelerisque a mollis at, vehicula sed odio. Etiam euismod lorem sit amet lacus mattis fermentum. Sed suscipit sed lorem iaculis dignissim. Quisque fermentum elementum gravida. Suspendisse dignissim lorem viverra neque fermentum convallis.

<div class="split4">
// YOUR TEXT HERE
</div>

Sed ornare ligula enim, vel gravida elit auctor sit amet. Nam ultrices nisi sed congue molestie. Donec ut elementum nulla. Morbi pharetra, ante nec viverra iaculis, mi quam pretium mi, quis auctor leo tortor at ipsum. Pellentesque porta massa lorem, ac vehicula risus elementum vitae. Nunc eu molestie nunc. Quisque pretium mauris non est lobortis feugiat ut commodo arcu. Curabitur mollis ac tellus ac semper.

Nullam ullamcorper dictum velit eget ultricies. Proin accumsan, libero id accumsan gravida, libero ligula fringilla tortor, ac placerat quam lectus vel est. Cras id tincidunt dui. Duis libero nisl, convallis tristique ultrices vulputate, ornare pretium tellus. Morbi ornare ante eget massa tristique euismod. Sed pulvinar bibendum nulla, non euismod sapien. Pellentesque sit amet metus ultrices, tristique arcu sed, fermentum dui. Maecenas aliquet ligula id nisl egestas, a cursus tellus elementum. Morbi eget leo eget risus aliquet rutrum.

Tag heading post page <h2>

Tag heading post page <h3>

Tag heading post page <h4>

Tag heading post page <h5>
Tag heading post page <h6>



Demikianlah Artikel Documentations

Sekianlah artikel Documentations kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Documentations dengan alamat link https://habarisehat.blogspot.com/2010/08/documentations.html

Posting Komentar untuk "Documentations"