1. Home
  2. Template
  3. Tips Blogger
  4. Documentation Templates LivaTheme

Documentation Templates LivaTheme

June 16, 2019

1. Info Template beserta Fitur & Kelebihan

Info Template
LiviaTheme adalah template Blogger dengan layout Responsif dan cocok untuk semua blog. Dengan desain yang memiliki kombinasi warna yang sederhana, terlihat bersih dan modern, SEO Optimized, dan telah dibangun dengan menggunakan beberapa trend desain saat ini yang paling populer.



Fitur Template

  • Responsive
  • SEO Friendly
  • Google Testing Tool Validator
  • 2 Column
  • Auto Readmore
  • Related Post with Thumb
  • Search Box
  • Recent Post Slider
  • Subcription Box
  • Back to Top Button
  • Responsive Drop Down Menu
  • And More...

2. Menu Navigasi

Silahkan buka Blogger > Template > Edit HTML

Cari kode di bawah ini dan temukan kode # di bawahnya lalu ganti kode # dan 5298418528980018389 dengan tulisan atau link milik Anda

<div class='levelon'>
<div class='joinus-button'><a href='https://www.blogger.com/follow-blog.g?blogID=5298418528980018389' itemprop='url' target='_blank'><span itemprop='name'><i class='fa fa-user'/> Join Our Site</span></a></div>
<ul class='social-on'>
<li><a class='facebook' href='#' itemprop='url' target='_blank' title='Follow our Facebook'><span itemprop='name'/></a></li>
<li><a class='twitter' href='#' itemprop='url' target='_blank' title='Follow our Twitter'><span itemprop='name'/></a></li>
<li><a class='instagram' href='#' itemprop='url' target='_blank' title='Follow our Instagram'><span itemprop='name'/></a></li>
<li><a class='gplus' href='#' itemprop='url' target='_blank' title='Follow our Google+'><span itemprop='name'/></a></li>
</ul>
</div>
    <ul class='menu'>
        <li class='fa fa-user-o'><a href='#' itemprop='url'><span itemprop='name'>About</span></a></li>  
        <li class='fa fa-envelope-o'><a href='#' itemprop='url'><span itemprop='name'>Contact</span></a></li>
        <li class='fa fa-list-alt'><a href='#' itemprop='url'><span itemprop='name'>Sitemap</span></a></li>
        <li class='fa fa-check-square-o'><a href='#' itemprop='url'><span itemprop='name'>Disclaimer</span></a></li>
        <li class='fa fa-exclamation-triangle'><a href='#' itemprop='url'><span itemprop='name'>Privacy Policy</span></a></li>
    </ul>
</nav>

3. Mengatur Subscribe Box

Silahkan buka Blogger > Template > Edit HTML

Cari kode di bawah ini dan ganti naminakiky dengan feedburner blog Anda

<div id='namina-subs'>
<p>Join Our Newsletter</p> 
<div class='emailfield'>
<form action='https://feedburner.google.com/fb/a/mailverify' class='namina-form' method='post' novalidate='' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=naminakiky&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
  <input name='name' placeholder='Your name' title='Add your name' type='text'/>
  <input name='email' placeholder='Email *' title='Email' type='text'/>
  <input name='uri' type='hidden' value='naminakiky'/>
  <input name='loc' type='hidden' value='en_US'/>
  <input class='submitbutton' type='submit' value='Subscribe'/>
</form>
</div></div></div></div>

4. SEO Meta Tag

Template > Edit HTML

Cari dan ganti tiap tulisan di kode meta tag

<!-- [ Meta Tag SEO ] -->
<meta charset='utf-8'/>
<meta content='width=device-width, initial-scale=1' name='viewport'/>
<meta content='blogger' name='generator'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>
<link expr:href='data:blog.url' rel='canonical'/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title>
<b:else/>
<b:if cond='data:blog.pageType != &quot;error_page&quot;'>
<title><data:blog.pageName/> - <data:blog.title/></title>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<title>Page Not Found - <data:blog.title/></title>
</b:if>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<meta content='noindex' name='robots'/>
</b:if>
<b:if cond='data:blog.searchLabel'>
<meta content='noindex,nofollow' name='robots'/>
</b:if>
<b:if cond='data:blog.isMobile'>
<meta content='noindex,nofollow' name='robots'/>
</b:if>
<b:if cond='data:blog.pageType != &quot;error_page&quot;'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<script type='application/ld+json'>{ &quot;@context&quot;: &quot;http://schema.org&quot;, &quot;@type&quot;: &quot;WebSite&quot;, &quot;url&quot;: &quot;<data:blog.homepageUrl/>&quot;, &quot;potentialAction&quot;: { &quot;@type&quot;: &quot;SearchAction&quot;, &quot;target&quot;: &quot;<data:blog.homepageUrl/>?q={search_term}&quot;, &quot;query-input&quot;: &quot;required name=search_term&quot; } }</script>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<meta expr:content='data:blog.pageName + &quot;, &quot; + data:blog.pageTitle + &quot;, &quot; + data:blog.title' name='keywords'/>
</b:if></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='DESKRIPSI-BLOG' name='keywords'/></b:if>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default?alt=rss&quot;' expr:title='data:blog.title + &quot; - RSS&quot;' rel='alternate' type='application/rss+xml'/>
<link expr:href='&quot;http://www.blogger.com/feeds/&quot; + data:blog.blogId + &quot;/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
</b:if></b:if>
<link expr:href='data:blog.url' hreflang='x-default' rel='alternate'/>
<link href='/favicon.ico' rel='icon' type='image/x-icon'/>
<link href='https://plus.google.com/USER-GOOGLE-PLUS/posts' rel='publisher'/>
<link href='https://plus.google.com/USER-GOOGLE-PLUS/about' rel='author'/>
<link href='https://plus.google.com/USER-GOOGLE-PLUS' rel='me'/>
<meta content='KODE-VALIDASI-GOOGLE-WEBMASTER' name='google-site-verification'/>
<meta content='KODE-VALIDASI-BING-WEBMASTER' name='msvalidate.01'/>
<meta content='Indonesia' name='geo.placename'/>
<meta content='NAMA-ADMIN' name='Author'/>
<meta content='general' name='rating'/>
<meta content='id' name='geo.country'/>
<!-- [ Social Media Meta Tag ] -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta content='article' property='og:type'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta content='website' property='og:type'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/>
<meta expr:content='&quot;Silakan kunjungi &quot; + data:blog.pageTitle + &quot; Untuk membaca postingan menarik.&quot;' property='og:description'/>
</b:if>
</b:if>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
</b:if>
<meta content='https://www.facebook.com/PROFIL-FACEBOOK' property='article:author'/>
<meta content='https://www.facebook.com/FAN-PAGE-FACEBOOK' property='article:publisher'/>
<meta content='KODE-APLIKASI-FACEBOOK' property='fb:app_id'/>
<meta content='KODE-ADMIN-FACEBOOK' 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='USER-TWITTER' name='twitter:site'/>
<meta content='USER-TWITTER' name='twitter:creator'/>
<meta content='summary_large_image' name='twitter:card'/>

5. SEO

Untuk masalah SEO pada template ini sudah saya setting semaksimal mungkin sesuai dengan apa yang saya bisa. Sobat tidak perlu melakuan modifikasi apapun pada template ini.

6. Widget

Widget sitemap

Tambahkan kode di bawah ini di dalam postingan statis blog

<div id="bp_toc">
</div>
<script src="https://rawcdn.githack.com/Arlina-Design/redvision/master/daftar-isi-simple.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script>
<style scoped="" type="text/css">#comments,#Label1,#FollowByEmail1{display:none;} /* CSS Full Sitemap */  #bp_toc{color:#000;margin:0 auto;overflow:auto;max-height:1400px;} span.toc-note{padding:20px 20px 30px 20px;margin:0 auto;display:block;text-align:center;color:#000;font-size:1.2rem;text-transform:uppercase;line-height:normal} .toc-header-col1{padding:10px;background-color:#f5f5f5;width:250px} .toc-header-col2{padding:10px;background-color:#f5f5f5;width:75px} .toc-header-col3{padding:10px;background-color:#f5f5f5;width:125px} #bp_toc td.toc-header-col1,#bp_toc td.toc-header-col2,#bp_toc td.toc-header-col3{border:0;border-bottom:1px solid rgba(0,0,0,0.1)} #bp_toc tr:nth-child(1) a{color:#666} #bp_toc td.toc-header-col1{background-color:#fff} #bp_toc td.toc-header-col2{background-color:#fff} #bp_toc td.toc-header-col3{background-color:#fff} #bp_toc td.toc-entry-col1,#bp_toc td.toc-entry-col2,#bp_toc td.toc-entry-col3{border:0} #bp_toc td a{color:#000} .toc-header-col1 a:link,.toc-header-col1 a:visited,.toc-header-col2 a:link,.toc-header-col2 a:visited,.toc-header-col3 a:link,.toc-header-col3 a:visited{font-size:13px;text-decoration:none;color:#aaa;font-family:&#39;Roboto&#39;;font-weight:700;letter-spacing:0.5px} .toc-header-col1 a:hover,.toc-header-col2 a:hover,.toc-header-col3 a:hover{text-decoration:none} .toc-entry-col1,.toc-entry-col2,.toc-entry-col3{padding:10px 5px;font-size:90%} .toc-entry-col1 a,.toc-entry-col2 a,.toc-entry-col3 a{color:#000;} .toc-entry-col1 a:hover,.toc-entry-col2 a:hover,.toc-entry-col3 a:hover{color:#3498db} #bp_toc table{width:100%;margin:0 auto;counter-reset:rowNumber} .toc-entry-col1{counter-increment:rowNumber} #bp_toc table tr td.toc-entry-col1:first-child::before{content:counter(rowNumber);min-width:1em;margin-right:0.5em;background:#70b8e7;color:#fff;padding:3px 5px;border-radius:3px;font-size:.8rem}#bp_toc td a{float:none;background:transparent;color:#666;font-size:100%;text-transform:capitalize;padding:0 0 0 5px;font-weight:400}#bp_toc td a:hover{color:#3498db}</style>

Widget Contact Form

Tambahkan kode di bawah ini di dalam postingan statis blog

Silakan isi form di bawah ini untuk menghubungi admin. Jika tidak ada halangan dan kesibukan lainnya, admin akan langsung merespon pesan yang Anda kirimkan.

<form name="contact-form">
Nama
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />  
Alamat Email 
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />  
Isi Pesan
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea> 
<input id="ContactForm1_contact-form-submit" type="button" value="Kirim" />  
<div style="max-width: 100%; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
<style scoped="" type="text/css">#ContactForm1,#HTML97{display:none} #ContactForm1_contact-form-name,#ContactForm1_contact-form-email{width:50%;height:auto;margin:10px auto;padding:10px;background:#fff;color:#666;border:1px solid rgba(0,0,0,0.08)} #ContactForm1_contact-form-email-message{width:100%;height:175px;margin:10px auto;padding:10px;background:#fff;color:#666;border:1px solid rgba(0,0,0,0.08)} #ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{background:#fff;outline:none;border:1px solid rgba(0,0,0,0.18)} #ContactForm1_contact-form-submit{font-size:15px;width:101px;height:35px;float:left;color:#fff;padding:0;margin:10px 0 3px 0;cursor:pointer;background:#aeb2ba;border:none;border-radius:2px;transition:background 0.4s linear} #ContactForm1_contact-form-submit:hover{background:#e74c3c} #ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:35px} </style>


Gunakan script ini untuk membuat table Spesifikasi template, etc.

 
<table>
<tbody>
<tr> <th>Features</th>             <th>Availability</th>         </tr>
<tr> <td>Responsive</td>             <td>True <a href="#" rel="nofollow noopener" target="_blank">Cek</a></td>         </tr>
<tr> <td>Mobile Friendly</td>             <td>True <a href="#" rel="nofollow noopener" target="_blank">Cek</a></td>         </tr>
<tr> <td>Google Testing Tool Validator (Index)</td> <td>True <a href="#" rel="nofollow noopener" target="_blank">Cek</a></td>  </tr>
<tr> <td>Google Testing Tool Validator (Item)</td> <td>True <a href="#" rel="nofollow noopener" target="_blank">Cek</a></td>  </tr>
<tr> <td>SEO Friendly</td>             <td>True</td>         </tr>
<tr> <td>Personal Blog</td>             <td>True</td>         </tr>
<tr> <td>2 Column</td>             <td>True</td>         </tr>
<tr> <td>Top Navigation</td>             <td>True</td>         </tr>
<tr> <td>Breadcrumbs</td>             <td>True</td>         </tr>
<tr> <td>2 Option Search Box</td>             <td>True</td>         </tr>
<tr> <td>Back to Top Button</td>             <td>True</td>         </tr>
<tr> <td>Footer Menu</td>             <td>True</td>         </tr>
<tr> <td>ShareThis Share Button</td>             <td>True</td>         </tr>
<tr> <td>Featured Recent Post</td>             <td>Pro Version</td>         </tr>
<tr> <td>2 Option Comment System</td>             <td>Pro Version</td>         </tr>
<tr> <td>Fast Version</td>             <td>Pro Version</td>         </tr>
<tr> <td>Newsletter Widget</td>             <td>Pro Version</td>         </tr>
<tr> <td>Related Post</td>             <td>Pro Version</td>         </tr>
<tr> <td>Sticky Sidebar</td>             <td>Pro Version</td>         </tr>
<tr> <td>Image Lightbox</td>             <td>Pro Version</td>         </tr>
<tr> <td>Sitemap Widget</td>             <td>Pro Version</td>         </tr>
<tr> <td>Contact Form Widget</td>             <td>Pro Version</td>         </tr>
<tr> <td>Fixed Menu on Mobile</td>             <td>Pro Version</td>         </tr>
<tr> <td>Shortcodes</td>             <td>Pro Version</td>         </tr>
</tbody></table>


Script untuk link download

<div class="clear">
</div>
</div>
<div style="display: none;">
<div id="Theme-details">
<div id="store-style">
<a class="storebutton but1" href="#" rel="nofollow" target="_blank"><i class="fa fa-eye" aria-hidden="true"></i> Live Preview</a>
<a class="storebutton but2" href="#" target="_blank"><i class="fa fa-cloud-download" aria-hidden="true"></i> Pasword Theme</a>
<br />
<span class="pasword">Password Rar: <a href="#" target="_blank">Check it</a></span>
<div class="rio-ss idb">
</div>
</div>
<div id="store-style">
<div class="rio-ss">
<span class="storelist">Support Template Update</span>
<span class="storelist">Remove Footer Credits</span>
<span class="storelist">For Unlimited Domains</span>
<span class="storelist">No Encrypted Scripts</span>
<span class="storelist">And Many More...</span></div>
</div>
</div>


Memasang Video Youtube di Postingan
Tambahkan kode di bawah ini di dalam postingan blog pada tab HTML dan ganti link video youtube
 ini _1EYAH8dmx0 dengan link video youtube Anda


Spoiler

<div id="flippy"><button>Spoiler</button></div>
<div id="flippanel">
--- TAMBAHKAN KONTEN DISINI ---
</div>

Membagi konten post menjadi tiga
<div class="bagitiga">
--- TAMBAHKAN KONTEN DISINI ---
</div>

<div class="videoyoutube">
<div class="video-responsive">
<div class="video-youtube loader" data-src="//www.youtube.com/embed/_1EYAH8dmx0">
</div>
</div>
</div>


Menambahkan Kode Highlighter di Postingan
Tambahkan kode di bawah ini di dalam postingan blog pada tab HTML dan ganti tulisan ini --PASTE KODE DI SINI-- dengan tulisan kode HTML/JavaScript/CSS Anda
<pre><code>--PASTE KODE DI SINI--</code></pre>




Trimakasih

Related Post

1 comment

  1. Aqsha Computer29 September 2019 at 05:35

    Terima kasih gan semoga membantu.. Dan bermanfaat buat saya.. Untuk di praktek in ya..

    ReplyDelete

Silahkan Memberikan Komentar Jika Ada Hal Yang Kurang Dipahami Dengan Topik Yang Telah Sobat Baca. Biasakan Berkomentar Dengan:

♥ Sopan dan Bahasa Yang Mudah Dipahami.
♥ Tidak Memasukkan Link Aktif Dalam Form Komentar.
♥ Berkomentar Sesuai Artikel Atau Postingan.
♥ Berilah Informasi, Jika Script Atau Link Yang Tidak Berfungsi Dan Mati.
♥ komentar Jorok / Kasar / SARA / PORNO Anggap Sebagai SPAM.
EmoticonEmoticon

Subscribe to: Post Comments ( Atom )