Documentation of SimpleUP Blogger Template

Baca Juga

Image: freepik.com

Just follow this instruction carefully, also in Setting folder.

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.

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 300x85 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.

Navigation

Login to Blogger > Theme > Edit HTML

Find and change all code # with your link.

<ul class='nav upmenu'>
<li><a class='active' href='/'><i class='fa fa-home'/> Home</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='#' itemprop='url' rel='nofollow' title=''><span itemprop='name'> Featured</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'> Family</span></a></li>
</ul></nav>

Menu Footer

<div class='footmenu' itemprop='mainEntity' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'><ul>
<li><a href='#' itemprop='url' target='_blank' title='About'><span itemprop='name'>About</span></a></li>
<li><a href='#' itemprop='url' target='_blank' title='Contact'><span itemprop='name'>Contact</span></a></li>
<li><a href='#' itemprop='url' target='_blank' title='Disclaimer'><span itemprop='name'>Disclaimer</span></a></li>
<li><a href='#' itemprop='url' target='_blank' title='Privacy Policy'><span itemprop='name'>Privacy</span></a></li>
<li><a href='#' itemprop='url' target='_blank' title='Sitemap'><span itemprop='name'>Sitemaps</span></a></li>
<li><a href='/p/lorem-ipsum-dolor-sit-amet-consectetur.html' itemprop='url' target='_blank' title='view static page'><span itemprop='name'>Static</span></a></li>
<li><a href='/error-page.html' itemprop='url' target='_blank' title='Error 404'><span itemprop='name'>Error 404</span></a></li>
  </ul>

Menu Social Media (footer)

<div id='sosmedup'><ul>
<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_gp' href='#' itemprop='sameAs' rel='nofollow' target='_blank' title='Follow on Google+'><i aria-hidden='true' class='fa fa-google-plus'/></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>
<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_le' href='#' itemprop='sameAs' rel='nofollow' target='_blank' title='Follow on Linkedin'><i aria-hidden='true' class='fa fa-linkedin'/></a></li>
<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>
</ul></div>

Settings Meta and Title Tag for SEO

Find and change XXXXX with yours.

<meta content='YOUR DESCRIPTION HERE' property='og:description'/>

<meta content='YOUR KEYWORDS HERE' name='keywords'/>

<meta content='XXXXX' name='google-site-verification'/>
<meta content='XXXXX' name='msvalidate.01'/>
<meta content='XXXXX' name='alexaVerifyID'/>
<meta content='XXXXX' name='p:domain_verify'/>
<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='Indonesia' name='geo.placename'/>
<meta content='Bung Frangki' name='Author'/>
<meta content='general' name='rating'/>
<meta content='id' name='geo.country'/>

<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/>
<meta content='YOUR DESCRIPTION HERE' property='og:description'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta content='https://www.facebook.com/bungfrangki' property='article:author'/>
<meta content='https://www.facebook.com/bungfrangkicom' property='article:publisher'/>
<meta content='XXXXX' property='fb:app_id'/>
<meta content='XXXXX' property='fb:admins'/>
<meta content='en_US' property='og:locale'/>
<meta content='en_GB' property='og:locale:alternate'/>
<meta content='id_ID' property='og:locale:alternate'/>
<meta content='summary' name='twitter:card'/>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
<meta content='@XXXXX' name='twitter:site'/>
<meta content='@XXXXX' name='twitter:creator'/>

Setting ID of Subscribe Widget

Login to Blogger > Layout > Theme > Edit HTML

Find this code, and change all XXXXX code with your Feedburner ID:

<form action='//feedburner.google.com/fb/a/mailverify?uri=XXXXX' class='subs-form' method='post' onsubmit='window.open (&#39;//feedburner.google.com/fb/a/mailverify?uri=XXXXX&#39;, &#39;popupwindow&#39;, &#39;scrollbars=yes,width=550,height=520&#39;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='XXXXX'/><input name='loc' type='hidden' value='en_US'/><input autocomplete='off' class='subs-field' name='email' placeholder='Your email here....' required='required' type='text'/><input class='subs-button' title='' type='submit' value='SUBSCRIBE!'/></form>

Advertisement in post page

Ads in under title post

<div class='adspost1'>
<!-- Ad under featured image or title posts -->
<img alt='advertise here' height='90' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisMzZR3k1y1FtQ89_pUyZRK7bp1iIkeqXtMslKlWULHrE_E_1nk_sTkSZ35sPtJaJJbjQH7vnLkkc-Ucrz4V_XODOZFWqoyTcJ59LppU6aTNttJiFwyZH6N7MztJmoUUWMBKeXtfnmf5A/s1600/banner_728x90_2.jpg' title='advertise here' width='728'/>
  </div>

Ads in under post page

<div class='adspost2'>
<!-- Ad under post page -->
<img alt='advertise here' height='250' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBWAsy4554zye08YfBYM2HnepeuXp-E2Z-tmRGVlymwwQ-JeHr-3GRrCg80wPB0jjvD8nd8ViCKD_byid78NiQbFuQmuPIbbtx5hsbPbUi5dAJuCRkUrXX1GPiAAs5M8Scr3HasUtiTsI/s1600/advertise_300x250_3.jpg' title='advertise here' width='300'/>
</div>

Post Page Widget (additional)

Make Youtube video on post page

<script type="text/javascript">embed("E9tL-lPsDZM");</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

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.