Documentasi Template

Navigasi

› › › › › › ›

Documentasi Template

Ditulis oleh Sabtu, Mei 25, 2019 5 Komentar
Documentasi Template

Template ini saya namakan RaimuTemplate kenapa saya namakan begitu ? karena saya susah cari nama yang pas 😆 sebelumnya saya menyediakan 2 versi pada Template ini yaitu versi Premium dan Free pastinya akan berbeda dari kedua versi tersebut.

Template ini di desain sesimple mungkin karena yang buat masih belajar dan sudah saya optimasi untuk kecepatan sebisa saya dan alhamdulilah dapat 100/100 saat di test di Gtmetrix sedangkan pada Pagespeed dapat 99/100 entah setiap saya cek di Pagespeed selalu beda mulu 😅

Bagi yang mau membelinya bisa langsung klik link dibawah ini :

Download
Buy IDR 80.000

Daftar Isi


  1. Info Template beserta Fitur & Kelebihan
  2. Menu Navigasi
  3. SEO Meta Tag
  4. Heading and List
  5. Widget
  6. Setelan Blog
  7. ShortCodes

Fitur Template



Features Availability
Responsive True Cek
Mobile Friendly True Cek
Gtmetrix True Cek
Google Testing Tools : Index True Cek
Google Testing Tools : Item True Cek
SEO Friendly True
Personal Blog True
2 Column True
Breadcrumbs True
Highlighter Syntax True
Related Posts True
Popup Search Box True
Social Share Button True
Svg Icon True
And anymore true
Credit Link Premium
Encrypt Code Premium

Menu Navigasi


Silahkan buka Blogger > Tema > Klik Edit HTML

Cari kode di bawah ini dan temukan kode # di bawahnya lalu ganti kode # dengan link blog Anda

<ul id='menu'>
<li><a href='/'> Home</a></li>
<li><a href='#'>Download</a></li>
<li><a class='tutup' href='#'>Blogger</a>
<ul class='sub'>
<li><a href='#'>Tips</a></li>
<li><a href='#'>Tutorial</a></li>
<li><a href='#'>Widget</a></li>
</ul>
</li>
<li><a class='tutup' href='#'>Youtube</a>
<ul class='sub'>
<li><a href='#'>Tips</a></li>
<li><a href='#'>Tutorial</a></li>
</ul>
</li>
</ul>

Seo Meta Tag


Tema > Klik Edit HTML

Cari dan ganti tiap tulisan di kode meta tag di bawah ini pada template.

<meta content='#000000' name='msapplication-navbutton-color'/>
<meta content='#000000' name='apple-mobile-web-app-status-bar-style'/>
<meta content='#000000' name='theme-color'/> 
<b:if cond='data:view.isMultipleItems'>
<meta content='YOUR KEYWORD 1 HERE, YOUR KEYWORD 2 HERE, YOUR KEYWORD 3 HERE, YOUR KEYWORD 4 HERE' name='keywords'/>
<b:elseif cond='data:view.isSingleItem'/>
<meta expr:content='data:blog.pageName' name='keywords'/>
</b:if>
<b:if cond='data:view.isPost'>
<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/XXXXX/posts' rel='publisher'/>
<link href='https://plus.google.com/XXXXX/about' rel='author'/>
<link href='https://plus.google.com/XXXXX' rel='me'/>
<meta content='XXXXX' name='google-site-verification'/>
<meta content='XXXXX' name='alexaVerifyID'/>
<meta content='XXXXX' name='p:domain_verify'/>
<meta content='XXXXX' name='yandex-verification'/>
<meta content='XXXXX' name='msvalidate.01'/>
<!-- Open Graph -->
<b:if cond='data:view.isHomepage'> 
<b:if cond='data:view.isSingleItem'>
<b:if cond='data:blog.url'>
<meta expr:content='data:blog.url' property='og:url'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
</b:if></b:if>
<b:if cond='data:view.isPost'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta content='article' property='og:type'/>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta content='website' property='og:type'/>
</b:if>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='YOUR_IMAGE_URL_HERE' property='og:image'/>
</b:if></b:if>
<b:if cond='data:view.isMultipleItems'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:elseif cond='data:view.isSingleItem'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/>
<meta expr:content='data:blog.title' property='og:description'/>
</b:if>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:view.isSingleItem'>
<meta content='https://www.facebook.com/XXXXX' property='article:author'/>
<meta content='https://www.facebook.com/XXXXX' property='article:publisher'/>
</b:if>
<meta content='XXXXX' property='fb:app_id'/>
<meta content='XXXXX' property='fb:admins'/>
<meta content='XXXXX' property='fb:profile_id'/>
<meta content='XXXXX' property='fb:pages'/>
<meta content='id' name='geo.country'/>
<meta content='id_ID' property='og:locale'/>
<meta content='en_US' property='og:locale:alternate'/>
<meta content='Indonesia' name='geo.placename'/>
<meta content='general' name='rating'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.pageName' property='og:image:alt'/>
<b:else/>
<meta expr:content='data:blog.title' property='og:image:alt'/>
</b:if>
<meta expr:content='data:blog.title' name='twitter:site'/>
<meta content='summary_large_image' name='twitter:card'/>
<meta content='@YOUR_TWITTER_USERNAME_HERE' name='twitter:creator'/>

Heading and List Ol Ul


Heading Blog

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

List Number Page Blog

  1. Heading 1
  2. Heading 2
  3. Heading 3
  4. Heading 4
  5. Heading 5
  6. Heading 6

List ol Page Blog

  • Heading 1
  • Heading 2
  • Heading 3
  • Heading 4
  • Heading 5
  • Heading 6

Widget


sitemap

Tambahkan kode di bawah ini di dalam postingan statis blog dan ganti alamat blog https://tolongblogger.blogspot.com/ dengan alamat blog Anda.

<div class="tabbed-toc" id="tabbed-toc">
</div>
<script>
var tabbedTOC={blogUrl:"https://tolongblogger.blogspot.com/",containerId:"tabbed-toc",activeTab:1,showDates:!0,showSummaries:!1,numChars:200,showThumbnails:!0,thumbSize:60,noThumb:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",monthNames:["Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember"],newTabLink:!0,maxResults:99999,preload:0,sortAlphabetically:!0,showNew:7,newText:' &ndash; <em style="color:red;">New</em>'};
</script>
<script src="https://cdn.jsdelivr.net/gh/Indzign/InSEO@master/daftarisikeren.js"></script>
<style scoped="" type="text/css">
.tabbed-toc{margin:0 auto;position:relative;background:linear-gradient(-45deg,#EE7752,#E73C7E,#23A6D5,#23D5AB);background-size:400% 400%;animation:Gradient 15s ease infinite}
.tabbed-toc .loading{display:block;padding:2px 12px;color:#fff}
.tabbed-toc ul,.tabbed-toc ol,.tabbed-toc li{margin:0;padding:0;list-style:none}
.tabbed-toc .toc-tabs{width:20%;float:left}
.tabbed-toc .toc-tabs li a{display:block;overflow:hidden;color:#fff;text-decoration:none;padding:12px;font-size:13px;transition:all .3s}
.tabbed-toc .toc-tabs li a:hover{background-color:rgba(0,0,0,0.05)}
.tabbed-toc .toc-tabs li a.active-tab{background:rgba(0,0,0,0.05);position:relative;z-index:5;margin:0 -1px 0 0}
.tabbed-toc .toc-content,.tabbed-toc .toc-line{width:80%;float:right;background-color:#fff;box-sizing:border-box}
.tabbed-toc .toc-line{float:none;display:block;position:absolute;top:0;right:0;bottom:0}
.tabbed-toc .panel{position:relative;z-index:5}
.tabbed-toc .panel li a{color:#1277cb;display:block;position:relative;font-weight:500;font-size:14px;padding:6px 12px;overflow:hidden}
.tabbed-toc .panel li time{display:block;font-weight:normal;font-size:11px;color:#666;float:right}
.tabbed-toc .panel li .summary{display:block;padding:10px 12px 10px;font-size:13px}
.tabbed-toc .panel li .summary img.thumbnail{float:left;display:block;margin:5px 8px 0 0;width:72px;height:72px;background-color:#fafafa}
.tabbed-toc .panel li{background-color:#f9f9f9;margin:0}
.tabbed-toc .panel li:nth-child(even){background-color:#fff}
.tabbed-toc .panel li a:hover,.tabbed-toc .panel li a:focus,.tabbed-toc .panel li.bold a{background-color:rgba(0,0,0,0.03);outline:none}
.tabbed-toc .panel li a em{background:#f39c12;color:#fff!important;font-style:initial;font-size:11px;margin:0 0 0 5px;padding:2px 10px;border-radius:22px}
.tabbed-toc .panel li:before{display:none}
@-webkit-keyframes Gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@-moz-keyframes Gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes Gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@media (max-width:768px){.tabbed-toc .toc-tabs,.tabbed-toc .toc-content{overflow:hidden;width:auto;float:none;display:block}.tabbed-toc .toc-tabs li{display:inline;float:left}.tabbed-toc .toc-tabs li a.active-tab{background-color:rgba(64,64,64,0.1)}.tabbed-toc .toc-content{border:none}.tabbed-toc .toc-line,.tabbed-toc .panel li time{display:none}}
</style>

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">
<div class="formcolumn1">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" />
</div>
<div class="formcolumn2">
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" />
</div>
<div class="formcolumn3">
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="7"></textarea>
</div>
<div class="formcolumn4">
<input class="ripplelink" id="ContactForm1_contact-form-submit" type="button" value="Send Now" />
</div>
<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>
<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = 'IDBLOGSOBAT';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3dIDBLOGSOBAT','URLBLOGSOBAT','IDBLOGSOBAT');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Your message has been sent.', 'contactFormMessageNotSentMsg': 'Message could not be sent. Please try again later.', 'contactFormInvalidEmailMsg': 'A valid email address is required.', 'contactFormEmptyMessageMsg': 'Message field cannot be empty.', 'title': 'Contact Form', 'blogId': '191063972911788153IDBLOGSOBAT', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>

Setelan Blog


Untuk setelan blog sesuaikan dengan gambar di bawah ini

Documentasi Template

Documentasi Template

Documentasi Template

Documentasi Template

Documentasi Template

Documentasi Template

Shortcodes


Button

<div class='button'>
<a class='button-animated' href=#'' title='Download' alt='Download'>Download</a>
<a class='button-animated' href='#' title='Buy' alt='Buy'>Demo</a>
</div>

Highlighter Syntax

<pre><code>--PASTE KODE DI SINI--</code></pre>

Responsive Youtube

<div class="videoyoutube">
<div class="video-responsive">
<div class="video-youtube loader" data-src="SIMPAN-LINK-EMBED-VIDEO-DI-SINI">
</div>
</div>
</div>

Table

<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>


Tags:

5 Komentar untuk "Documentasi Template"

Langganan: Posting Komentar (Atom)

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel