Tuesday, November 19, 2019

Documentation aMP


Ini adalah Documentation template Amp untuk user nikami

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

<input autocomplete='off' id='amp-go' role='button' type='checkbox'/>
<ul id='amp-gooms'>
<li><a href='#' title='Free Template'><i class='material-icons'>&#59518;</i> Free Template</a></li>
<li><a href='#' title='Premium Template'><i class='material-icons'>&#59517;</i> Premium Template</a></li>
<li class='payment'><a href='#' title='Payment'><i class='material-icons'>&#59596;</i> Payment</a></li>
</ul>
</div>

Slider Halaman Depan


Silahkan Di sesuaikan :

<div class='info-box'>
<div id='spotslide'>
<amp-carousel height='350' layout='fixed-height' type='slides'>
<div class='textslide'>
<span>Situs penyedia template gratis &amp; premium</span>
<p>Goomsite menyediakan template gartis / premium sesuai dengan selera Anda</p>
<ul class='button'>
<li><a class='amp-button' href='https://www.goomsite.top/search/label/Template' target='_blank'>Template</a></li>
</ul>
</div>
<div class='textslide'>
<span>Accelerated Mobile Pages (AMP) HTML</span>
<p>AMP HTML atau Accelerated Mobile Pages HTML <br/>adalah struktur yang meminimalisir penggunaan JavaScript, CSS dan HTML </p>
<ul class='button'>
<li><a class='amp-button' href='https://www.ampproject.org/' rel='nofollow' target='_blank'>AMP HTML</a></li>
</ul>
</div>
<div class='textslide'>
<span>Metode Pembayaran Template Premium</span>
<p>Lakukan pembayaran melalui akun </p>
<ul class='button'>
<li><a class='amp-button' href='/p/payment.html' target='_blank'>Order</a></li>
</ul>
</div>
</amp-carousel>
</div>
</div>


Menu 2

Silahkan buka Blogger > Tema > Klik Edit HTML
Cari kode di bawah ini dan temukan kode # di bawahnya lalu ganti kode # dengan link blog Anda

<nav id='amp-goom' itemprop='mainEntity' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'>
<input type='checkbox'/>
<label/>
<ul>
<li><a class='ai' href='#'>Browser</a>
<ul class='amp-gooms'>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact</a></li>
<li><a href='#'>Payment</a></li>
<li><a href='#'>Advertise</a></li>
</ul>
</li>
</ul>
</nav>


Pos ADS 
Sesuaikan

<div class='post'>
<div id='postads'>
<a href='https://stressthinking.blogspot.com/' target='_blank' title='336x250'><amp-img alt='Advertise' height='250' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB0kszyHhedfEb69dzJ4xgp5WyJT71PclfetbAbqCsXwHIBeqI8HePH4y0S34hlcXPl3-SB12ln7OerWFhp_SGzONZoVZfh42vmF2N3982OQnQVw14Z2wnS2e5HnMUfuzDzu8gvgHj01MN/s1600/336.jpg' width='336'/></a>
<span class='title-ads'>Advertisement</span>
<span class='description-ads'>Goomsite merupakan situs penyedia template gratis dan juga premium. Situs kami juga menyajikan tutorial blog serta...</span>
</div></div>


META SEO

Ganti XXXXXXXXXXXXXXXX dan Sesuaikan
<link href='https://plus.google.com/XXXXXXXXXXXXXXXX' rel='me'/>
<link href='https://plus.google.com/XXXXXXXXXXXXXXXX' rel='publisher'/>
<meta content='XXXXXXXXXXXXXXXX' name='google-site-verification'/>
<meta content='XXXXXXXXXXXXXXXX' name='msvalidate.01'/>
<meta content='XXXXXXXXXXXXXXXX' property='fb:admins'/>
<meta content='XXXXXXXXXXXXXXXX' property='fb:profile_id'/>
<meta content='XXXXXXXXXXXXXXXX' name='Author'/>
<meta content='https://www.facebook.com/XXXXXXXXXXXXXXXX' property='article:author'/>
<meta expr:content='data:blog.title' name='twitter:site'/>
<meta content='summary_large_image' name='twitter:card'/>
<meta content='@bmatindas' name='twitter:creator'/>
<!-- Bar theme color -->

LOGO SITE
Ganti link saya tandai dengan link logo kamu

<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB07vnHfwfY25KzOhOuR1AOIzMCONKEA4DFj1EQtSHnmssQlkVuld6qVXAUjPaS4G7_TdePisdi31zOtin9hW2V8QsmmJMN2OWTIZOxPNh21GqiF1hxAyicU1fXvUKuDWe8Kuz1xvgkv0n/s1600/Course+template+ava.png' property='og:image'/>

POSTING GAMBAR UTAMA
di sesuaikan saja
<noscript><img alt="TITLE ATAU JUDUL" height="422" src="URL-GAMBAR" title="TITLE ATAU JUDUL" width="700"></noscript>

BUTTON Demo Download

Button 1


<br />
<div class="center">
<a class="btn btn-primary btn-lg" href="http://www.goomsite.net/" target="_blank" title="Demo">DEMO LTR</a> - <a class="btn btn-primary btn-lg" href="http://www.goomsite.net/" target="_blank" title="Demo">DWONLOAD</a></div>
<br />


Button 2


<div id="wrap">
<a class="btn-slide" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&amp;hosted_button_id=7N8ZWQMF8Q7BL" target="_blank">
<span class="circle"></span>
<span class="title">Pay Using Paypal</span>
<span class="et">$11.25</span>
</a>
<a class="btn-slide2" href="http://www.goomsite.net/p/payment.html" target="_blank">
<span class="circle2"></span>
<span class="title2">Transfer Bank</span>
<span class="et">150K</span>
</a>
</div>
<br />

Disqus Komentar
Cari dan ganti id Disqus : metaltailaco dengan id Diskus Kamu


<b:includable id='comments' var='post'>
<div class='comments'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<amp-iframe expr:src='&quot;https://cdn.rawgit.com/basrimedia/online/793395fc/disqusonline.html?shortname=metaltailaco&amp;url=&quot; + data:blog.canonicalUrl' frameborder='0' height='300' layout='responsive' resizable='resizable' sandbox='allow-scripts allow-same-origin allow-modals allow-popups allow-forms' width='600'>
<div aria-label='Disqus Comments' overflow='' role='button' tabindex='0'>Disqus Comments</div>

</amp-iframe>
</b:if>
</div></b:includable>


Kemungkinan masih banya yag belum saya bahas  silahkan sesuaikan saja Trimakasih

Friday, August 9, 2019

Documentation Template Goomify

Goomify Responsive Blogger Template ini sangat rigan cocok buat anda yang mempunyai blogger  berbagi template , dan Pembagi wallpapers.. Template ini tidak mempunyai layout widget sidebar Membuat Template ini sangat  mudah di gunakan dan loading Cepat .untuk settingan, anda harus mengedit-nya di dalam Edit Html,  nah berikut ini Documentation Template Goomify editing by Theboegis.com :

Fitur Template
  • Responsive
  • SEO Friendly
  • Google Testing Tool Validator
  • 2 Column
  • Resposnsive Navigation
  • Auto Readmore
  • Breadcrumbs
  • Grid Style
  • Footer Menu
  • Back to Top Button
  • Share Button
  • Related Posts
  • Shortcodes
  • And More...
SEO Meta Tag

Tema > Klik Edit HTML

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

      <meta content='#2c3e50' name='msapplication-navbutton-color'/>
<meta content='#2c3e50' name='apple-mobile-web-app-status-bar-style'/>
<meta content='#2c3e50' name='theme-color'/>
<meta content='YOUR_DMCA_VERIFICATION_CODE' name='dmca-site-verification'/>
<meta content='YOUR_GOOGLE_WEBMASTER_VERIFICATION_CODE' name='google-site-verification'/>
<meta expr:content='&quot;text/html; charset=&quot; + data:blog.encoding' http-equiv='Content-Type'/>
<meta content='width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1' name='viewport'/>
<meta content='blogger' name='generator'/>


Top 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

<nav id='cssmenu' itemscope='itemscope' itemtype='https://schema.org/SiteNavigationElement'>
<div id='head-mobile'/>
<div class='button' id='menu-button'>
<span class='hamburger1'/>
<span class='hamburger2'/>
<span class='hamburger3'/>
</div>
<!-- menu navigasi header start -->
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='#'>About</a>
<ul>
<li><a href='#'>Contact</a></li>
<li><a href='#'>Sitemap</a></li>
</ul>
</li>
<li><a href='#'>Category</a>
<ul>
<li><a href='#'>Safelink</a></li>
<li><a href='#'>Responsive</a></li>
<li><a href='#'>Material</a></li>
</ul>
</li>
<li><a href='#' title='Password Rar File'>Other Menu</a></li>
<li><a class='notif-show' href='javascript:;' title='Latest Comments'><svg viewBox='0 0 24 24'>
<path d='M3,15H1V3A2,2 0 0,1 3,1H19V3H3V15M12,23A1,1 0 0,1 11,22V19H7A2,2 0 0,1 5,17V7A2,2 0 0,1 7,5H21A2,2 0 0,1 23,7V17A2,2 0 0,1 21,19H16.9L13.2,22.71C13,22.89 12.76,23 12.5,23H12M9,9V11H19V9H9M9,13V15H17V13H9Z'/>
</svg></a>
</li>
</ul>
</nav>


Menganti Logo di versi Stressthinking

Buka Blogger > Tema > Klik Edit HTML : cari link gambar di bawah ini dan ganti link gambar logo anda

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm-8VYf6lN5kuA7oIGmbv7TS_WpO_lr2ICIhIlKQqSOmKW1rT5GAN4oEKXLUpZRfY9tfFpbTzgL7DpenmfcY6SDS1wc41KJKJZZSXA37khUIDkPcDlYxXfGRLu2A7zFsidqnkojkUgL7Y/s1600/STRESSTHINKING.png

Mengganti Gambar Box Wrapper

Silahkan buka Blogger > Tema > Klik Edit HTML

Cari Link Gambar di bawah ini dan ganti dengan ling gambar anda

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ7GosfhQFQB5k85VpL2qZuhSy0J9mApbeJ3-3zRtpyJDzgu7aIis8tNeakzURnbJdnRY5ER78wKWp2QVNL8iavDDJqqAicgwhnG6ZBWHPQIiYkR-t4pnx4XC8_61n6k7UtlR8pd66OWU/s1600/tlc.png


Button Info

Silahkan buka Blogger > Tema > Klik Edit HTML

<!-- Star button info -->
<b:if cond='data:blog.pageType != &quot;item&quot; and data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>
<div class='clr'/>
<div class='box-wrapper'>
<div class='content-amp'>
<div class='widget-wrap'>
<div class='button-wrapper'>
<span>Professional Themes</span>
</div>
<h2 class='heading-title'>Showing themes that are Seo, fast loading, light, fresh and professional</h2>
<div class='button-home'>
<a href='/search/label/Grid Style'><span class='but'><svg viewBox='0 0 508.928 508.928'>
<polygon points='403.712,201.04 256.288,201.04 329.792,0 105.216,307.888 252.64,307.888 179.136,508.928'/>
</svg> Grid Style</span></a>
<a href='/search/label/List Style'><span class='bus'><svg viewBox='0 0 33.023 33.023'>
<path d='M10.033,33.023c-0.087,0-0.174-0.022-0.252-0.068c-0.209-0.122-0.301-0.375-0.218-0.603l5.223-14.359l-6.313-1.801 c-0.163-0.046-0.292-0.172-0.342-0.334c-0.049-0.162-0.014-0.339,0.096-0.469L21.032,0.177c0.152-0.181,0.41-0.228,0.618-0.119 c0.208,0.111,0.311,0.354,0.245,0.58l-3.692,12.807l6.347,1.811c0.164,0.046,0.293,0.173,0.342,0.336 c0.05,0.163,0.012,0.341-0.099,0.47l-14.38,16.787C10.315,32.962,10.175,33.023,10.033,33.023z M9.489,15.442l6.087,1.735 c0.134,0.038,0.245,0.13,0.309,0.253c0.063,0.124,0.072,0.268,0.024,0.398l-4.466,12.278l12.083-14.105l-6.079-1.733 c-0.128-0.036-0.236-0.122-0.301-0.238s-0.08-0.253-0.043-0.381l3.18-11.029L9.489,15.442z'/>
</svg>
List Style</span></a></div>
</div>
<div class='coll'>
<span class='bg1'/>
</div>
</div>
<svg class='wave' height='50px' preserveAspectRatio='none' style='pointer-events: none' viewBox='0 0 1920 75' width='100%'>
<defs>
<clipPath id='a'>
<rect class='a' height='75' width='1920'/>
</clipPath>
</defs>
<g class='b'>
<path class='c' d='M1963,327H-105V65A2647.49,2647.49,0,0,1,431,19c217.7,3.5,239.6,30.8,470,36,297.3,6.7,367.5-36.2,642-28a2511.41,2511.41,0,0,1,420,48'/>
</g>
<g class='b'>
<path class='d' d='M-127,404H1963V44c-140.1-28-343.3-46.7-566,22-75.5,23.3-118.5,45.9-162,64-48.6,20.2-404.7,128-784,0C355.2,97.7,341.6,78.3,235,50,86.6,10.6-41.8,6.9-127,10'/>
</g>
<g class='b'>
<path class='d' d='M1979,462-155,446V106C251.8,20.2,576.6,15.9,805,30c167.4,10.3,322.3,32.9,680,56,207,13.4,378,20.3,494,24'/>
</g>
<g class='b'>
<path class='d' d='M1998,484H-243V100c445.8,26.8,794.2-4.1,1035-39,141-20.4,231.1-40.1,378-45,349.6-11.6,636.7,73.8,828,150'/>
</g>
</svg>
</div>
</b:if></b:if>
<b:if cond='data:blog.pageType != &quot;item&quot; and data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
<div class='hero-wrap' id='hero-vvv'>
<div class='hero-content container'>
<div class='widget-wrap'>
<div class='button-wrapper'>
<span>Professional Template</span>
</div>
<h2 class='heading-title'>Showing themes that are Seo, fast loading, light, fresh and professional</h2>
<div class='button-home'>
<a href='/search/label/Grid Style'><span class='but'><svg viewBox='0 0 508.928 508.928'>
<polygon points='403.712,201.04 256.288,201.04 329.792,0 105.216,307.888 252.64,307.888 179.136,508.928'/>
</svg> Grid Style</span></a>
<a href='/search/label/List Style'><span class='bus'><svg viewBox='0 0 33.023 33.023'>
<path d='M10.033,33.023c-0.087,0-0.174-0.022-0.252-0.068c-0.209-0.122-0.301-0.375-0.218-0.603l5.223-14.359l-6.313-1.801 c-0.163-0.046-0.292-0.172-0.342-0.334c-0.049-0.162-0.014-0.339,0.096-0.469L21.032,0.177c0.152-0.181,0.41-0.228,0.618-0.119 c0.208,0.111,0.311,0.354,0.245,0.58l-3.692,12.807l6.347,1.811c0.164,0.046,0.293,0.173,0.342,0.336 c0.05,0.163,0.012,0.341-0.099,0.47l-14.38,16.787C10.315,32.962,10.175,33.023,10.033,33.023z M9.489,15.442l6.087,1.735 c0.134,0.038,0.245,0.13,0.309,0.253c0.063,0.124,0.072,0.268,0.024,0.398l-4.466,12.278l12.083-14.105l-6.079-1.733 c-0.128-0.036-0.236-0.122-0.301-0.238s-0.08-0.253-0.043-0.381l3.18-11.029L9.489,15.442z'/>
</svg>
List Style</span></a></div>
</div>
<div class='coll'><span class='bg1'/>
</div>
</div>
<svg class='wave' height='50px' preserveAspectRatio='none' style='pointer-events: none' viewBox='0 0 1920 75' width='100%'>
<defs>
<clipPath id='a'>
<rect class='a' height='75' width='1920'/>
</clipPath>
</defs>
<g class='b'>
<path class='c' d='M1963,327H-105V65A2647.49,2647.49,0,0,1,431,19c217.7,3.5,239.6,30.8,470,36,297.3,6.7,367.5-36.2,642-28a2511.41,2511.41,0,0,1,420,48'/>
</g>
<g class='b'>
<path class='d' d='M-127,404H1963V44c-140.1-28-343.3-46.7-566,22-75.5,23.3-118.5,45.9-162,64-48.6,20.2-404.7,128-784,0C355.2,97.7,341.6,78.3,235,50,86.6,10.6-41.8,6.9-127,10'/>
</g>
<g class='b'>
<path class='d' d='M1979,462-155,446V106C251.8,20.2,576.6,15.9,805,30c167.4,10.3,322.3,32.9,680,56,207,13.4,378,20.3,494,24'/>
</g>
<g class='b'>
<path class='d' d='M1998,484H-243V100c445.8,26.8,794.2-4.1,1035-39,141-20.4,231.1-40.1,378-45,349.6-11.6,636.7,73.8,828,150'/>
</g>
</svg>
</div>
</b:if>
</b:if>
<b:if cond='data:view.isPost'>
<div class='hero-wrap' id='hero-vvv'>
<div class='hero-content container'>
<div class='widget-wrap'>
<div class='button-wrapper'>
<span>Professional Template</span>
</div>
<h2 class='heading-title'>Showing themes that are Seo, fast loading, light, fresh and professional</h2>
<div class='button-home'>
<a href='/search/label/Grid Style'><span class='but'>
<svg viewBox='0 0 24 24'>
<path d='M17,18A2,2 0 0,1 19,20A2,2 0 0,1 17,22C15.89,22 15,21.1 15,20C15,18.89 15.89,18 17,18M1,2H4.27L5.21,4H20A1,1 0 0,1 21,5C21,5.17 20.95,5.34 20.88,5.5L17.3,11.97C16.96,12.58 16.3,13 15.55,13H8.1L7.2,14.63L7.17,14.75A0.25,0.25 0 0,0 7.42,15H19V17H7C5.89,17 5,16.1 5,15C5,14.65 5.09,14.32 5.24,14.04L6.6,11.59L3,4H1V2M7,18A2,2 0 0,1 9,20A2,2 0 0,1 7,22C5.89,22 5,21.1 5,20C5,18.89 5.89,18 7,18M16,11L18.78,6H6.14L8.5,11H16Z'/>
</svg>Premium</span></a>
<a href='/search/label/List Style'><span class='bus'><svg viewBox='0 0 24 24'>
<path d='M15.07,11.25L14.17,12.17C13.45,12.89 13,13.5 13,15H11V14.5C11,13.39 11.45,12.39 12.17,11.67L13.41,10.41C13.78,10.05 14,9.55 14,9C14,7.89 13.1,7 12,7A2,2 0 0,0 10,9H8A4,4 0 0,1 12,5A4,4 0 0,1 16,9C16,9.88 15.64,10.67 15.07,11.25M13,19H11V17H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z'/>
</svg>How to Download?</span></a></div>
</div>
<div class='coll'><span class='bg1'/>
</div>
</div>
<svg class='wave' height='50px' preserveAspectRatio='none' style='pointer-events: none' viewBox='0 0 1920 75' width='100%'>
<defs>
<clipPath id='a'>
<rect class='a' height='75' width='1920'/>
</clipPath>
</defs>
<g class='b'>
<path class='c' d='M1963,327H-105V65A2647.49,2647.49,0,0,1,431,19c217.7,3.5,239.6,30.8,470,36,297.3,6.7,367.5-36.2,642-28a2511.41,2511.41,0,0,1,420,48'/>
</g>
<g class='b'>
<path class='d' d='M-127,404H1963V44c-140.1-28-343.3-46.7-566,22-75.5,23.3-118.5,45.9-162,64-48.6,20.2-404.7,128-784,0C355.2,97.7,341.6,78.3,235,50,86.6,10.6-41.8,6.9-127,10'/>
</g>
<g class='b'>
<path class='d' d='M1979,462-155,446V106C251.8,20.2,576.6,15.9,805,30c167.4,10.3,322.3,32.9,680,56,207,13.4,378,20.3,494,24'/>
</g>
<g class='b'>
<path class='d' d='M1998,484H-243V100c445.8,26.8,794.2-4.1,1035-39,141-20.4,231.1-40.1,378-45,349.6-11.6,636.7,73.8,828,150'/>
</g>
</svg>
</div>
</b:if>
<!-- End button info -->


Box info 2

Silahkan buka Blogger > Tema > Klik Edit HTML

<div class='box-info'>
<div class='box-list'>
<li>
<span id='paypal'><svg viewBox='0 0 512 512'><path d='m256 512c-141.386719 0-256-114.613281-256-256s114.613281-256 256-256 256 114.613281 256 256c-.167969 141.316406-114.683594 255.832031-256 256zm0-480c-123.710938 0-224 100.289062-224 224s100.289062 224 224 224 224-100.289062 224-224c-.132812-123.65625-100.34375-223.867188-224-224zm0 0'/><path d='m176 368c-8.835938 0-16-7.164062-16-16v-240h108.433594c42.03125-.722656 77.878906 30.296875 83.199218 72 2.230469 22.496094-5.148437 44.886719-20.316406 61.644531-15.167968 16.761719-36.710937 26.335938-59.316406 26.355469h-80v80c0 8.835938-7.164062 16-16 16zm16-128h80c26.507812 0 48-21.492188 48-48s-21.492188-48-48-48h-80zm0 0'/><path d='m240 432c-8.835938 0-16-7.164062-16-16v-112h109.902344c16.796875.382812 32.65625-7.703125 42.210937-21.519531 9.96875-15.203125 10.546875-34.71875 1.488281-50.480469l27.679688-16c14.457031 25.152344 14.277344 56.132812-.464844 81.121094-15.164062 24.628906-42.214844 39.414062-71.136718 38.878906h-77.679688v80c0 8.835938-7.164062 16-16 16zm0 0'/></svg>Payment templates at Metaltaila.co can be done via Paypal</span></li>
<li>
<span id='bri'><svg viewBox='0 0 47.001 47.001'>
<path d='M44.845,42.718H2.136C0.956,42.718,0,43.674,0,44.855c0,1.179,0.956,2.135,2.136,2.135h42.708 c1.18,0,2.136-0.956,2.136-2.135C46.979,43.674,46.023,42.718,44.845,42.718z'/>
<path d='M4.805,37.165c-1.18,0-2.136,0.956-2.136,2.136s0.956,2.137,2.136,2.137h37.37c1.18,0,2.136-0.957,2.136-2.137 s-0.956-2.136-2.136-2.136h-0.533V17.945h0.533c0.591,0,1.067-0.478,1.067-1.067s-0.478-1.067-1.067-1.067H4.805 c-0.59,0-1.067,0.478-1.067,1.067s0.478,1.067,1.067,1.067h0.534v19.219H4.805z M37.37,17.945v19.219h-6.406V17.945H37.37z M26.692,17.945v19.219h-6.406V17.945H26.692z M9.609,17.945h6.406v19.219H9.609V17.945z'/>
<path d='M2.136,13.891h42.708c0.007,0,0.015,0,0.021,0c1.181,0,2.136-0.956,2.136-2.136c0-0.938-0.604-1.733-1.443-2.021 l-21.19-9.535c-0.557-0.25-1.194-0.25-1.752,0L1.26,9.808c-0.919,0.414-1.424,1.412-1.212,2.396 C0.259,13.188,1.129,13.891,2.136,13.891z'/>
</svg>
Payment templates can be through Bank Rakyat Indonesia (BRI)</span></li>
<li>
<span id='about'><svg viewBox='0 0 16.377 16.377'>
<path d='M4.331,5.043c0.042,0.256,0.141,0.417,0.238,0.52c0.231,1.54,1.521,2.97,2.698,2.97 c1.373,0,2.623-1.547,2.865-2.967c0.098-0.101,0.199-0.264,0.242-0.522c0.078-0.289,0.18-0.791,0.002-1.025 c-0.01-0.012-0.02-0.023-0.029-0.034c0.166-0.606,0.377-1.858-0.375-2.711C9.906,1.188,9.486,0.686,8.585,0.42L8.158,0.271 C7.45,0.052,7.004,0.004,6.986,0.001c-0.031-0.003-0.065,0-0.096,0.008C6.865,0.016,6.782,0.038,6.716,0.03 C6.547,0.006,6.293,0.093,6.248,0.11c-0.06,0.023-1.43,0.573-1.846,1.849C4.363,2.063,4.197,2.605,4.418,3.936 C4.385,3.958,4.355,3.985,4.33,4.019C4.152,4.253,4.252,4.754,4.331,5.043z M4.869,2.141C4.872,2.135,4.874,2.128,4.877,2.12 c0.339-1.052,1.541-1.538,1.549-1.542c0.055-0.021,0.162-0.051,0.219-0.051c0.118,0.016,0.254-0.005,0.328-0.022 C7.094,0.522,7.47,0.583,8.001,0.747l0.432,0.148c0.801,0.237,1.141,0.681,1.143,0.684c0.006,0.007,0.012,0.013,0.016,0.019 c0.695,0.783,0.338,2.079,0.211,2.457C9.774,4.144,9.795,4.242,9.86,4.308c0.033,0.034,0.072,0.057,0.115,0.069 C9.977,4.5,9.942,4.725,9.887,4.922C9.885,4.931,9.883,4.941,9.881,4.95C9.86,5.089,9.813,5.19,9.75,5.236 c-0.053,0.04-0.09,0.101-0.1,0.167c-0.166,1.19-1.268,2.629-2.382,2.629c-0.938,0-2.055-1.325-2.213-2.624 C5.047,5.34,5.012,5.279,4.956,5.238c-0.063-0.048-0.11-0.15-0.131-0.287c-0.001-0.01-0.003-0.02-0.006-0.029 C4.768,4.739,4.735,4.53,4.732,4.404c0.047-0.005,0.094-0.021,0.134-0.053c0.074-0.058,0.11-0.152,0.092-0.245 C4.683,2.662,4.869,2.141,4.869,2.141z'/>
<path d='M12.224,9.363c-0.738-0.487-1.855-0.84-1.855-0.84C9.248,8.127,9.24,7.733,9.24,7.733 c-2.203,4.344-3.876,0.014-3.876,0.014C5.21,8.333,2.941,9.021,2.941,9.021C2.278,9.275,1.998,9.657,1.998,9.657 c-0.98,1.454-1.096,4.689-1.096,4.689c0.013,0.739,0.332,0.816,0.332,0.816c2.254,1.006,5.792,1.185,5.792,1.185 c0.985,0.021,1.894-0.047,2.701-0.154c-0.773-0.723-1.262-1.748-1.262-2.887C8.464,11.192,10.134,9.465,12.224,9.363z'/>
<path d='M12.269,9.963c-1.768,0-3.207,1.438-3.207,3.207c0,1.771,1.439,3.207,3.207,3.207 c1.77,0,3.207-1.437,3.207-3.207C15.476,11.402,14.038,9.963,12.269,9.963z M12.058,14.747c-0.068,0.067-0.178,0.067-0.246,0 l-1.543-1.555c-0.068-0.066-0.068-0.178,0-0.245l0.369-0.369c0.068-0.067,0.178-0.067,0.246,0l1.053,1.061l2.045-2.044 c0.066-0.068,0.178-0.068,0.246,0l0.367,0.367c0.068,0.068,0.068,0.18,0,0.248L12.058,14.747z'/>
</svg>
You can also get to know more closely with the Metaltaila.co admin</span></li>
<li>
<span id='contek'>
<svg viewBox='0 0 370.88 370.88'>
<path d='M355.6,66.16H15.28C6.841,66.16,0,73.001,0,81.44v208c0,8.439,6.841,15.28,15.28,15.28H355.6 c8.439,0,15.28-6.841,15.28-15.28v-208C370.88,73.001,364.039,66.16,355.6,66.16z M15.28,78.16H355.6 c1.436,0.007,2.7,0.947,3.12,2.32L185.44,188.72L12.16,80.48C12.58,79.107,13.844,78.167,15.28,78.16z M12,94.16L136.64,172 L12,270.88V94.16z M358.88,289.36c0,1.812-1.469,3.28-3.28,3.28H15.28c-1.811,0-3.28-1.469-3.28-3.28v-3.2l135.44-107.04 l34.8,21.76c1.955,1.233,4.445,1.233,6.4,0l34.8-21.76l135.44,107.04V289.36z M358.88,270.88l-124.96-98.56l124.96-77.44V270.88z'/>
</svg>

You can also contact the Metaltaila.co admin via the available contact</span></li>
</div>
</div>


Widget sitemap

Tambahkan kode di bawah ini di dalam postingan statis blog

[sitemap]


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">
<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>
<style scoped="" type="text/css">
#ContactForm1{display:none}
#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{font-family:'Poppins';display:inline-block;width:100%;height:auto;margin:10px auto;padding:14px;background:#fff;color:#222;border:1px solid rgba(0,0,0,0.08)}
#ContactForm1_contact-form-email-message{font-family:'Poppins';width:100%;height:250px;margin:10px auto;padding:14px;background:#fff;color:#222;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-color:rgba(0,0,0,0.18)}
#ContactForm1_contact-form-submit{background:#fff;color:#5f6368;font-size:16px;width:161px;height:45px;float:left;padding:0 0 0 20px;margin:10px 0 3px 5px;cursor:pointer;border:none;border-radius:24px;box-shadow:0 1px 2px 0 rgba(60,64,67,0.302),0 1px 3px 1px rgba(60,64,67,0.149);transition:box-shadow .08s linear,min-width .15s cubic-bezier(0.4,0.0,0.2,1)}
.formcolumn4{position:relative}
.formcolumn4:before{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBkumcTdWPEdu9K_8g3Zm_JW6iKjmRa41dI3nz3M_zTwmYL7Hg3ItBejn69XbEb8nvc0VPq1CeMG1Vicfw4WL0Dw22SxTO-fRWDVaJVA2I5KR3NVDaWH6Lg7bAgYwNxwIhKpvnJj81roor/s1600/mailme.png);background-position:center;background-repeat:no-repeat;background-size:20px;content:'';display:block;height:63px;width:32px;position:absolute;z-index:1;left:15px;top:0}
#ContactForm1_contact-form-submit:hover{background:#fafafb;box-shadow:0 1px 3px 0 rgba(60,64,67,0.302),0 4px 8px 3px rgba(60,64,67,0.149)}
#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{margin-top:35px}
form{color:#888}
.formcolumn1,.formcolumn2{float:left;width:50%}
.formcolumn1,.formcolumn2{margin:0 0 10px 0;padding:0 10px 0 0}
.formcolumn2{padding:0 0 0 10px}
@media only screen and (max-width:768px){.formcolumn1,.formcolumn2{width:100%;padding:0}}
</style>


TESTIMONIAL
Testimonial untuk versi 2
Silahkan buka Blogger > Tema > Klik Edit HTML
cari code dibawah dan ganti sesuai keinginan anda

<div class='box-wrapp2'>
<div class='content-ok'>
<div class='box-testimonial'>
<div class='heading-all'>
<h3>TESTIMONIAL</h3><hr/>
</div>
<div class='testimonial'>
<div class='testimonial-heading'>
<img alt='' height='70' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2D4nHlBhNUoDFaBy5M_CgzNghjzD-OlnbxFcboKs6wZHZy_Dvkp3ulfuFhk1l1qBinfnDrMxczMl6sRQl3ydqQwzQH992v1ycvNwSp-_V6EX7OXMr_ZQISo9-OdQuSRYg_IWoCNksj04-/s1600/ainuddin+chalik.jpg' width='70'/>
<div class='box-text'>
<h2>Ainuddin Chalik</h2>
<a class='testimonial-writer-company' href='https://www.pemuda.org/' rel='dofollow' target='_blank'>Pemuda.org</a>
</div>
</div>
<div class='read-more'>
<div class='content'>
<p>Saya tidak punya referensi terbaik dan nomor satu untuk sebuah kualitas dan mutu blogger template selain Goomsite.net. Bahkan saya amat sangat menyesal kenapa baru tahu Goomsite belakangan, setelah setelah sebelumnya buang-buang duit di Themeforest untuk kebutuhan yang sama tapi dengan ketersediaan template yang kualitasnya umumnya berada jauh di bawah karya powerfull Bung Basri Matindas.</p>
</div>
<span class='trigger' onclick='this.parentElement.classList.add(&#39;expanded&#39;)'>+ show more</span>
<span class='collapse' onclick='this.parentElement.classList.remove(&#39;expanded&#39;)'>- show less</span>
</div>
</div>
<div class='testimonial'>
<div class='testimonial-heading'>
<img alt='' height='70' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib31wWfqZ_M-WMMnnBsXPDlcyaLry1Ya6Wka-OFmTqxSE0Dh6mPqp50G5xIhrM4-3ob5ov7MserQz-XFaMfhFM3hQm_VFPE_oE8nNHhpVxZfugOA5FeEaPZLY7-P1V4-G1roqjEMy339nq/s1600/Nasarudin.jpg' width='70'/>
<div class='box-text'>
<h2>Nasrudin</h2>
<a class='testimonial-writer-company' href='https://www.kontenmu.web.id' rel='dofollow' target='_blank'>kontenmu.web.id</a>
</div>
</div>
<div class='read-more'>
<div class='content'>
<p>Yang paling saya suka dari template dari Goomsite adalah elegan, simpel tapi mewah dan keren. Saya pakai tempalte Shezan untuk landing page bisnis saya. tampilan keren dan berkelas. nggak kelihatan kalau cuma blogspot. apalagi sekarang sudah pakai domain sendiri plus ada SSL gratis dari Google. Semoga makin sukses Bang Basri Matindas.nunc</p>
</div>
<span class='trigger' onclick='this.parentElement.classList.add(&#39;expanded&#39;)'>+ show more</span>
<span class='collapse' onclick='this.parentElement.classList.remove(&#39;expanded&#39;)'>- show less</span>
</div>
</div>
<div class='testimonial'>
<div class='testimonial-heading'>
<img alt='' height='70' src='https://lh3.googleusercontent.com/-Zm3xhsawMtU/AAAAAAAAAAI/AAAAAAAACeY/NAjcURQYWkA/s512-c/photo.jpg' width='70'/>
<div class='box-text'>
<h2>Kang Mus</h2>
<a class='testimonial-writer-company' href='https://www.teknolimit.id/' rel='dofollow' target='_blank'>teknolimit.id</a>
</div>
</div>
<div class='read-more'>
<div class='content'>
<p>Saya pengguna template Purple AMP buatan goomsite. saya sendiri rekomendasikan untuk mencoba template ini, sekitar 5 hari setelah saya buat blog dengan artikel sebanyak 5 saya daftar adsense langsung dapat full aprove dari google dan itu cuma nunggu sehari. Selain itu fitur penting seperti meta tag dan struktur datanya lengkap dan ini bisa membuat blog kalian lebih seo friendly. Terakhir, penempatan CSS sangat rapih dan mudah di modifikasi, bisa kalian lihat pada blog saya, itu hasil redesign dari template Purple AMP. Sukses selalu goomsite.</p>
</div>
<span class='trigger' onclick='this.parentElement.classList.add(&#39;expanded&#39;)'>+ show more</span>
<span class='collapse' onclick='this.parentElement.classList.remove(&#39;expanded&#39;)'>- show less</span>
</div>
</div>
<div class='testimonial'>
<div class='testimonial-heading'>
<img alt='' height='70' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD6fr_aTH3mZ3-vjZ6bYD4v_KgNuyfXybKzGzFfKcGHifl7uJqTISWVB-zXv43U9k6hFX-8SDkxpQxWbo3Z-rwcy-xMD20lA_CHKQsuI3wlOjPtAANAAvJCCtjzqeXj2aQIrvLJBFbrgI/s1600/Kiat+Jitu+%2528www.kiatjitu.com%2529.png' width='70'/>
<div class='box-text'>
<h2>Kiat Jitu</h2>
<a class='testimonial-writer-company' href='https://www.kiatjitu.com/' rel='dofollow' target='_blank'>kiatjitu.com</a>
</div>
</div>
<div class='read-more'>
<div class='content'>
<p>jujur saja, saya malu mau mengataknnya, tapi mau bagaimana lagi, di web gratisan saya yang lain saya banyak memakai template buatan dari masnya, dan templatenya memang luar biasa wush... dan manteb, maunya sih saya beli, tapi sayang saya tak punya cukup banyak uang untuk membelinya. dan harapan saya, teruslah berkarya dan harumkan nama indonesia dengan karya2 mas. karena banyak orang luar nengri yang pake template yang mas buat. baik dari india thailand amerika dan inggris. biar orang luar negri pada heran kepada orang indonesia yang mana penemuan tentang template di temukan oleh orang2 sana, tapi karya mas tidak kalah dengan karya orang sana, dengan sebuah bukti banyak karya mas yang dipakai oleh orang luar negri. :)</p>
</div>
<span class='trigger' onclick='this.parentElement.classList.add(&#39;expanded&#39;)'>+ show more</span>
<span class='collapse' onclick='this.parentElement.classList.remove(&#39;expanded&#39;)'>- show less</span>
</div>
</div>
</div>
</div>
</div>


Widget Sosial Media Sidebar

Silahkan buka Blogger > Tata Letak > Klik Edit/Tanda pensil pada widget Paling Bawah di Menu Footer

<div class='content'>
<div class='social-footer'>
<a class='facebook' href='#' rel='nofollow' target='_blank' title='Facebook'><i class='fa fa-facebook-f'></i></a>
<a class='twitter' href='#' rel='nofollow' target='_blank' title='Twitter'><i class='fa fa-twitter'></i></a>
<a class='g-youtube' href='#' target='_blank' title='YouTube'><i class='fa fa-youtube'></i></a>
<a class='instagram' href='#' rel='nofollow' target='_blank' title='Instagram'><i class='fa fa-instagram'></i></a>
<a class='g-youtube' href='#' target='_blank' title='Pinterest'><i class='fa fa-pinterest-p'></i></a>
</div>
</div>


Keterangan : Footer menu silahkan Edit Sesuai Kebutuhan Anda

Memasang Iklan 

Tema > Klik Edit HTML Cari kode dibawah ini dan ganti dengan kode iklan anda yang sudah Converter html

Kode iklan di sini


Memasang tabel di postingan

<table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody>
<tr> <th>Features</th> <th>Availability</th> </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>Instagram Widget</td> <td>Pro Version</td> </tr>
<tr> <td>Fixed Menu on Mobile</td> <td>Pro Version</td> </tr>
<tr> <td>Version 1 and 2</td> <td>Pro Version</td> </tr>
<tr> <td>Shortcodes</td> <td>Pro Version</td> </tr>
</tbody></table>


Menambahkan demo dan download button.

<div style="display: none;">
<div id="Theme-details">
<div id="store-style">
<a class="storebutton but1" href="#" rel="nofollow" target="_blank"> Live Preview</a><br />
<div class="rio-ss idb">
See it live with all the features that exist, both on the homepage and the page posts.</div>
</div>
<div id="store-style">
<a class="storebutton but2" href="#" rel="nofollow" target="_blank">Download</a><br />
<div class="rio-ss">
<span class="storelist">Remove Footer Credits</span><br />
<span class="storelist">For Unlimited Domains</span><br />
<span class="storelist">No Encrypted Scripts</span><br />
<span class="storelist">And Many More...</span>
</div>
</div>
</div>
</div>

Disqus Komentar

Tema > Klik Edit HTML

Cari dan temukan Id disqus Metaltailaco setelah ketemu ganti  id  disqus Metaltailaco dengan Id disqus anda 

Monday, August 5, 2019

Documentation Template Platinumify

template ini sangat rigan cocok buat anda yang mempunyai blogger  berbagi template , dan template ini tidak mempunyai layout widget sidebar untuk settingan anda harus mengedit-nya di dalam Edit Html nah berikut Documentation Template Platinumify :

1. Top Menu Navigasi

Temukan Code Berikut di dalam Edit Html,

<nav id='cssmenu' itemscope='itemscope' itemtype='https://schema.org/SiteNavigationElement'>
<div id='head-mobile'/>
<div class='button' id='menu-button'>
<span class='hamburger1'/>
<span class='hamburger2'/>
<span class='hamburger3'/>
</div>
<!-- menu navigasi header start -->
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='#'>About</a>
<ul>
<li><a href='#'>Contact</a></li>
<li><a href='#'>Sitemap</a></li>
</ul>
</li>
<li><a href='#'>Category</a>
<ul>
<li><a href='#'>Safelink</a></li>
<li><a href='#'>Responsive</a></li>
<li><a href='#'>Material</a></li>
</ul>
</li>
<li><a href='#' title='Password Rar File'>Other Menu</a></li>
<li><a class='notif-show' href='javascript:;' title='Latest Comments'><svg viewBox='0 0 24 24'>
<path d='M3,15H1V3A2,2 0 0,1 3,1H19V3H3V15M12,23A1,1 0 0,1 11,22V19H7A2,2 0 0,1 5,17V7A2,2 0 0,1 7,5H21A2,2 0 0,1 23,7V17A2,2 0 0,1 21,19H16.9L13.2,22.71C13,22.89 12.76,23 12.5,23H12M9,9V11H19V9H9M9,13V15H17V13H9Z'/>
</svg></a>
</li>
</ul>
</nav>

Keteragan : Ganti sesuai Kebutuhan

2. Button Home

Temukan Code Berikut di dalam Edit Html

<div class='hero-wrap' id='hero-vvv'>
<div class='hero-content container'>
<div class='widget-wrap'>
<div class='button-wrapper'>
<span>Professional Template</span>
</div>
<h2 class='heading-title'>Download Premium Templates that are SEO, Valid HTML, Minimalis, Simple and Professional for Free</h2>
<div class='button-home'>
<a href='/search/label/Premium?max-results=6'>
<span class='but'>
<svg viewBox='0 0 24 24'>
<path d='M17,18A2,2 0 0,1 19,20A2,2 0 0,1 17,22C15.89,22 15,21.1 15,20C15,18.89 15.89,18 17,18M1,2H4.27L5.21,4H20A1,1 0 0,1 21,5C21,5.17 20.95,5.34 20.88,5.5L17.3,11.97C16.96,12.58 16.3,13 15.55,13H8.1L7.2,14.63L7.17,14.75A0.25,0.25 0 0,0 7.42,15H19V17H7C5.89,17 5,16.1 5,15C5,14.65 5.09,14.32 5.24,14.04L6.6,11.59L3,4H1V2M7,18A2,2 0 0,1 9,20A2,2 0 0,1 7,22C5.89,22 5,21.1 5,20C5,18.89 5.89,18 7,18M16,11L18.78,6H6.14L8.5,11H16Z'/>
</svg>
Premium
</span>
</a>
<a href='/p/download-guide.html'>
<span class='bus'>
<svg viewBox='0 0 24 24'>
<path d='M15.07,11.25L14.17,12.17C13.45,12.89 13,13.5 13,15H11V14.5C11,13.39 11.45,12.39 12.17,11.67L13.41,10.41C13.78,10.05 14,9.55 14,9C14,7.89 13.1,7 12,7A2,2 0 0,0 10,9H8A4,4 0 0,1 12,5A4,4 0 0,1 16,9C16,9.88 15.64,10.67 15.07,11.25M13,19H11V17H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z'/>
</svg>
How to Download?
</span>
</a>
</div>
</div>
<div class='coll'><span class='bg1'/>
</div>
</div>
<svg class='wave' height='50px' preserveAspectRatio='none' style='pointer-events: none' viewBox='0 0 1920 75' width='100%'>
<defs>
<clipPath id='a'>
<rect class='a' height='75' width='1920'/>
</clipPath>
</defs>
<g class='b'>
<path class='c' d='M1963,327H-105V65A2647.49,2647.49,0,0,1,431,19c217.7,3.5,239.6,30.8,470,36,297.3,6.7,367.5-36.2,642-28a2511.41,2511.41,0,0,1,420,48'/>
</g>
<g class='b'>
<path class='d' d='M-127,404H1963V44c-140.1-28-343.3-46.7-566,22-75.5,23.3-118.5,45.9-162,64-48.6,20.2-404.7,128-784,0C355.2,97.7,341.6,78.3,235,50,86.6,10.6-41.8,6.9-127,10'/>
</g>
<g class='b'>
<path class='d' d='M1979,462-155,446V106C251.8,20.2,576.6,15.9,805,30c167.4,10.3,322.3,32.9,680,56,207,13.4,378,20.3,494,24'/>
</g>
<g class='b'>
<path class='d' d='M1998,484H-243V100c445.8,26.8,794.2-4.1,1035-39,141-20.4,231.1-40.1,378-45,349.6-11.6,636.7,73.8,828,150'/>
</g>
</svg>
</div>

Keteragan : Ganti sesuai Kebutuhan

3. ICon webtemplates
Temukan Code Berikut di dalam Edit Html,

<div class='icon-tags bs-row text-center'>
<div class='col-md-3 col-6'>
<a href='/search/label/Blogger?max-results=9'>
<div class='tag-grid tag-blogger'>
<svg viewBox='0 0 24 24'>
<path d='M14,13H9.95A1,1 0 0,0 8.95,14A1,1 0 0,0 9.95,15H14A1,1 0 0,0 15,14A1,1 0 0,0 14,13M9.95,10H12.55A1,1 0 0,0 13.55,9A1,1 0 0,0 12.55,8H9.95A1,1 0 0,0 8.95,9A1,1 0 0,0 9.95,10M16,9V10A1,1 0 0,0 17,11A1,1 0 0,1 18,12V15A3,3 0 0,1 15,18H9A3,3 0 0,1 6,15V8A3,3 0 0,1 9,5H13A3,3 0 0,1 16,8M20,2H4C2.89,2 2,2.89 2,4V20A2,2 0 0,0 4,22H20A2,2 0 0,0 22,20V4C22,2.89 21.1,2 20,2Z'/>
</svg>
<span class='icon-title'>Blogger</span>
</div>
</a>
</div>
<div class='col-md-3 col-6'>
<a href='/search/label/Wordpress?max-results=9'>
<div class='tag-grid tag-wordpress'>
<svg viewBox='0 0 24 24'>
<path d='M3.42,12C3.42,10.76 3.69,9.58 4.16,8.5L8.26,19.72C5.39,18.33 3.42,15.4 3.42,12M17.79,11.57C17.79,12.3 17.5,13.15 17.14,14.34L16.28,17.2L13.18,8L14.16,7.9C14.63,7.84 14.57,7.16 14.11,7.19C14.11,7.19 12.72,7.3 11.82,7.3L9.56,7.19C9.1,7.16 9.05,7.87 9.5,7.9L10.41,8L11.75,11.64L9.87,17.27L6.74,8L7.73,7.9C8.19,7.84 8.13,7.16 7.67,7.19C7.67,7.19 6.28,7.3 5.38,7.3L4.83,7.29C6.37,4.96 9,3.42 12,3.42C14.23,3.42 16.27,4.28 17.79,5.67H17.68C16.84,5.67 16.24,6.4 16.24,7.19C16.24,7.9 16.65,8.5 17.08,9.2C17.41,9.77 17.79,10.5 17.79,11.57M12.15,12.75L14.79,19.97L14.85,20.09C13.96,20.41 13,20.58 12,20.58C11.16,20.58 10.35,20.46 9.58,20.23L12.15,12.75M19.53,7.88C20.2,9.11 20.58,10.5 20.58,12C20.58,15.16 18.86,17.93 16.31,19.41L18.93,11.84C19.42,10.62 19.59,9.64 19.59,8.77L19.53,7.88M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,21.54C17.26,21.54 21.54,17.26 21.54,12C21.54,6.74 17.26,2.46 12,2.46C6.74,2.46 2.46,6.74 2.46,12C2.46,17.26 6.74,21.54 12,21.54Z'/>
</svg>
<span class='icon-title'>Wordpress</span>
</div>
</a>
</div>
<div class='col-md-3 col-6'>
<a href='/search/label/HTML5?max-results=9'>
<div class='tag-grid tag-html5'>
<svg viewBox='0 0 24 24'>
<path d='M12,17.56L16.07,16.43L16.62,10.33H9.38L9.2,8.3H16.8L17,6.31H7L7.56,12.32H14.45L14.22,14.9L12,15.5L9.78,14.9L9.64,13.24H7.64L7.93,16.43L12,17.56M4.07,3H19.93L18.5,19.2L12,21L5.5,19.2L4.07,3Z'/>
</svg>
<span class='icon-title'>Static HTML5</span>
</div>
</a>
</div>
<div class='col-md-3 col-6'>
<a href='/search/label/Dashboard?max-results=9'>
<div class='tag-grid tag-dashboard'>
<svg viewBox='0 0 24 24'>
<path d='M13,3V9H21V3M13,21H21V11H13M3,21H11V15H3M3,13H11V3H3V13Z'/>
</svg>
<span class='icon-title'>Dashboard</span>
</div>
</a>
</div>
</div>

Keteragan : Ganti sesuai Kebutuhan

4. ShortCodes

- A. Menambahkan demo dan download button.

<blockquote class="tr_bq">
Untuk file yang di download, ekstrak file menggunakan aplikasi Winrar / Winzip terbaru.</blockquote>
<br />
<br />
<div style="display: none;">
<div id="Theme-details">
<div id="store-style">
<a class="storebutton but1" href="#" rel="nofollow" target="_blank"> Live Preview</a><br />
<div class="rio-ss idb">
See it live with all the features that exist, both on the homepage and the page posts.</div>
</div>
<div id="store-style">
<a class="storebutton but2" href="#" rel="nofollow" target="_blank">Download</a><br />
<div class="rio-ss">
<span class="storelist">Remove Footer Credits</span><br />
<span class="storelist">For Unlimited Domains</span><br />
<span class="storelist">No Encrypted Scripts</span><br />
<span class="storelist">And Many More...</span>

</div>
</div>
</div>
</div>

- B. Memasang tabel di postingan

<table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody>
<tr> <th>Features</th> <th>Availability</th> </tr>
<tr> <td>Responsive</td> <td>True <a href="http://www.responsinator.com/?url=https%3A%2F%2Fmoccaidua.blogspot.com%2F" rel="nofollow noopener" target="_blank">Cek</a></td> </tr>
<tr> <td>Mobile Friendly</td> <td>True <a href="https://search.google.com/test/mobile-friendly?id=CGxpdczVu6edLDqdYmHzkg" rel="nofollow noopener" target="_blank">Cek</a></td> </tr>
<tr> <td>Google Testing Tool Validator (Index)</td> <td>True <a href="https://search.google.com/structured-data/testing-tool#url=https%3A%2F%2Fmoccaidua.blogspot.com%2F" rel="nofollow noopener" target="_blank">Cek</a></td> </tr>
<tr> <td>Google Testing Tool Validator (Item)</td> <td>True <a href="https://search.google.com/structured-data/testing-tool#url=https%3A%2F%2Fmoccaidua.blogspot.com%2F2018%2F10%2Fresponsive-blogger-template.html" 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>Main Navigation</td> <td>True</td> </tr>
<tr> <td>Auto Readmore</td> <td>True</td> </tr>
<tr> <td>Infinite Posts</td> <td>True</td> </tr>
<tr> <td>Breadcrumbs</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>Featured Popular Posts</td> <td>True</td> </tr>
<tr> <td>Fixed Menu on Mobile</td> <td>True</td> </tr>
<tr> <td>Shortcodes</td> <td>True</td> </tr>
<tr> <td>5 Style : Mocca, Blue, Gradient, Black, and Simple</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>Documentation</td> <td>Pro Version</td> </tr>
</tbody></table>
<br />


Keteragan : Ganti sesuai Kebutuhan

5. Disqus Comments
Temukan Id : metaltailaco di dalam Edit Html,
dan ganti dengan id disqus anda

Trimakasih

Sunday, August 4, 2019

Documentation SuperMasBro


h2 class="doc-subtitle">0. Daftar Isi
  1. Info Template beserta Fitur & Kelebihan
  2. Menu Navigasi
  3. SEO Meta Tag
  4. SEO
  5. Widget
  6. Setelan Blog
  7. ShortCodes

1. Info Template beserta Fitur & Kelebihan

Info Template
Supermasboy 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
  • Main Navigation
  • Auto Readmore
  • Breadcrumbs
  • Featured Popular Posts
  • Related Posts
  • 5 Style :Black and Simple
  • Infinite Posts
  • Footer Menu
  • Back to Top Button
  • Share Button
  • Related Posts
  • Shortcodes
  • And More...

2. Top 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>
<li><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='name'>Home</span></a></li>
<li>
<a href='#' itemprop='url'><span itemprop='name'>About</span></a>
<ul>
<li><a href='#' itemprop='url'><span itemprop='name'>About</span></a></li>
<li><a href='/p/contact-form.html' itemprop='url'><span itemprop='name'>Contact Form</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Disclaimer</span></a></li>
<li><a href='/p/sitemap.html' itemprop='url'><span itemprop='name'>Sitemap</span></a></li>
</ul>
</li>
<li>
<a href='#' itemprop='url'><span itemprop='name'>Filter</span></a>
<ul>
<li>
<a href='#' itemprop='url'><span itemprop='name'>Product 1</span></a>
<ul>
<li><a href='#' itemprop='url'><span itemprop='name'>Sub Product</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Sub Product</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Sub Product</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Sub Product</span></a></li>
</ul>
</li>
<li>
<a href='#' itemprop='url'><span itemprop='name'>Product 2</span></a>
<ul>
<li><a href='#' itemprop='url'><span itemprop='name'>Sub Product</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Sub Product</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Sub Product</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Sub Product</span></a></li>
</ul>
</li>
<li><a href='#' itemprop='url'><span itemprop='name'>Product 3</span></a></li>
</ul>
</li>
<li>
<a href='#' itemprop='url'><span itemprop='name'>Filter</span></a>
<ul>
<li><a href='#' itemprop='url'><span itemprop='name'>Product 1</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Product 2</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Product 3</span></a></li>
</ul>
</li>
<li><a href='#' itemprop='url'><span itemprop='name'>Blogger</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Info</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Gallery</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Video</span></a></li>
</ul>
Menu Footer
Silahkan buka Blogger > Tema > Klik Edit HTML
Cari kode di bawah ini dan temukan kode # di bawahnya lalu ganti kode # dengan link blog Anda
<div class='footer_wrap' id='footer_wrap'>
<div class='menu' itemprop='mainEntity' itemscope='itemscope' itemtype='//schema.org/SiteNavigationElement'>
<span class='selected icon-dar'><i aria-hidden='true' class='fa fa-list-ul'/></span>
<ul class='drop'>
<li class='link'><a href='#' itemprop='url' title='About'><span itemprop='name'>About</span></a></li>
<li class='link'><a href='#' itemprop='url' title='Contact'><span itemprop='name'>Contact Form</span></a></li>
<li class='link'><a href='#' itemprop='url' title='Disclaimer'><span itemprop='name'>Disclaimer</span></a></li>
<li class='link'><a href='#' itemprop='url' title='Privacy Policy'><span itemprop='name'>Privacy Policy</span></a></li>
</ul>
</div>
<div id='ScrollToTop'><i aria-hidden='true' class='fa fa-arrow-up'/></div>
</div>

3. SEO Meta Tag

Tema > Klik Edit HTML
Cari dan ganti tiap tulisan di kode meta tag di bawah ini pada template
<!-- [ 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='https://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;https://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;https://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.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
</b:if>
<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:if>
</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'/>

4. SEO

Untuk masalah SEO pada template ini sudah saya setting semaksimal mungkin sesuai dengan apa yang saya bisa.

5. Widget

Widget sitemap
Tambahkan kode di bawah ini di dalam postingan statis blog, ganti url blog https://supermasbro.blogspot.com/ dengan url blog Anda.
<div class="tabbed-toc" id="tabbed-toc">
</div>
<script>
var tabbedTOC={blogUrl:"https://supermasbro.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>
Atau versi ini
<div id="bp_toc">
</div>
<script src="https://cdn.jsdelivr.net/gh/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}.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;padding:3px 5px;border-radius:3px;font-size:.8rem}#bp_toc td a{border:0;float:none;background:transparent;color:#000;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
Ganti semua kode ID blog ini 3125578381140728302 dengan ID blog Anda dan ganti //supermasbro.blogspot.com/ dengan alamat blog Anda.
<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>

<style scoped="" type="text/css">
#ContactForm1,#comments{display:none}
#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{display:inline-block;width:100%;height:auto;margin:10px auto;padding:14px;background:#f7f7f7;color:#111;border:1px solid transparent}
#ContactForm1_contact-form-email-message{font-family:'Roboto';width:100%;height:250px;margin:10px auto;padding:14px;background:#f7f7f7;color:#111;border:1px solid transparent}
#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{background:#fff;outline:none;border-color:rgba(0,0,0,0.1)}
#ContactForm1_contact-form-submit{background:#fff;color:#5f6368;font-size:16px;width:161px;height:45px;float:left;padding:0 0 0 20px;margin:10px 0 3px 5px;cursor:pointer;border:none;border-radius:24px;box-shadow:0 1px 2px 0 rgba(60,64,67,0.302),0 1px 3px 1px rgba(60,64,67,0.149);transition:box-shadow .08s linear,min-width .15s cubic-bezier(0.4,0.0,0.2,1)}
.formcolumn4{position:relative}
.formcolumn4:before{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBkumcTdWPEdu9K_8g3Zm_JW6iKjmRa41dI3nz3M_zTwmYL7Hg3ItBejn69XbEb8nvc0VPq1CeMG1Vicfw4WL0Dw22SxTO-fRWDVaJVA2I5KR3NVDaWH6Lg7bAgYwNxwIhKpvnJj81roor/s1600/mailme.png);background-position:center;background-repeat:no-repeat;background-size:20px;content:'';display:block;height:63px;width:32px;position:absolute;z-index:1;left:15px;top:0}
#ContactForm1_contact-form-submit:hover{background:#fafafb;box-shadow:0 1px 3px 0 rgba(60,64,67,0.302),0 4px 8px 3px rgba(60,64,67,0.149)}
#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{margin-top:35px}
form{color:#888}
.formcolumn1,.formcolumn2{float:left;width:50%}
.formcolumn1,.formcolumn2{margin:0 0 10px 0;padding:0 10px 0 0}
.formcolumn2{padding:0 0 0 10px}
@media only screen and (max-width:768px){.formcolumn1,.formcolumn2{width:100%;padding:0}}
</style>
<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'] = '3125578381140728302';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d3125578381140728302','//supermasbro.blogspot.com/','3125578381140728302');
_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': '3125578381140728302', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>
Widget Facebook Like Box
Silahkan buka Blogger > Tata Letak > Klik Edit/Tanda pensil pada widget di bawah widget Follow Us. Ganti semua https://www.facebook.com/metaltailaco/ dan Metaltailaco dengan link dan tulisan Facebook fanpage Anda.
<div class="fb-page" data-href="https://www.facebook.com/metaltailaco/" data-tabs="timeline" data-height="300" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/metaltailaco/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/metaltailaco/">Metaltailaco</a></blockquote></div>
Widget Sosial Media
Silahkan buka Blogger > Tata Letak > Klik Edit/Tanda pensil pada widget Follow Us
Cari kode di bawah ini dan temukan kode # di bawahnya lalu ganti kode # dengan tulisan atau link blog Anda
<ul id="social-counts" class="social-counts">
<li>
<a href="#" target="blank" rel="nofollow noopener" class="social-facebook">
<span class="fa fa-facebook" title="Like our Facebook"></span>
</a>
</li>
<li>
<a href="#" target="blank" rel="nofollow noopener" class="social-twitter">
<span class="fa fa-twitter" title="Follow our Twitter"></span>
</a>
</li>
<li>
<a href="#" target="blank" rel="nofollow noopener" class="social-instagram">
<span class="fa fa-instagram" title="Follow our Instagram"></span>
</a>
</li>
<li>
<a href="#" target="blank" rel="nofollow noopener" class="social-blogger" title="Follow our Site">
<span class="fa fa-user"></span>
</a>
</li>
</ul>
Sticky Sidebar Widget
Untuk menambahkan opsi Sticky Sidebar Widget. Silahkan buka Tema > Edit HTML > Tambahkan kode ini di atas kode </body>
<b:if cond='data:blog.pageType != &quot;index&quot;'>
<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>
<script type='text/javascript'>
//<![CDATA[
// Sticky Sidebar
var mql = window.matchMedia('screen and (min-width: 60em)');if (mql.matches){
!function(i){i.fn.theiaStickySidebar=function(t){function o(t,o){var a=e(t,o);a||(console.log("TST: Body width smaller than options.minWidth. Init is delayed."),i(document).scroll(function(t,o){return function(a){var n=e(t,o);n&&i(this).unbind(a)}}(t,o)),i(window).resize(function(t,o){return function(a){var n=e(t,o);n&&i(this).unbind(a)}}(t,o)))}function e(t,o){return t.initialized===!0?!0:i("body").width()<t.minWidth?!1:(a(t,o),!0)}function a(t,o){t.initialized=!0,i("head").append(i('<style>.theiaStickySidebar:after {content: ""; display: table; clear: both;}</style>')),o.each(function(){function o(){a.fixedScrollTop=0,a.sidebar.css({"min-height":"1px"}),a.stickySidebar.css({position:"static",width:""})}function e(t){var o=t.height();return t.children().each(function(){o=Math.max(o,i(this).height())}),o}var a={};a.sidebar=i(this),a.options=t||{},a.container=i(a.options.containerSelector),0==a.container.size()&&(a.container=a.sidebar.parent()),a.sidebar.css({position:"relative",overflow:"visible","-webkit-box-sizing":"border-box","-moz-box-sizing":"border-box","box-sizing":"border-box"}),a.stickySidebar=a.sidebar.find(".theiaStickySidebar"),0==a.stickySidebar.length&&(a.sidebar.find("script").remove(),a.stickySidebar=i("<div>").addClass("theiaStickySidebar").append(a.sidebar.children()),a.sidebar.append(a.stickySidebar)),a.marginTop=parseInt(a.sidebar.css("margin-top")),a.marginBottom=parseInt(a.sidebar.css("margin-bottom")),a.paddingTop=parseInt(a.sidebar.css("padding-top")),a.paddingBottom=parseInt(a.sidebar.css("padding-bottom"));var n=a.stickySidebar.offset().top,d=a.stickySidebar.outerHeight();a.stickySidebar.css("padding-top",1),a.stickySidebar.css("padding-bottom",1),n-=a.stickySidebar.offset().top,d=a.stickySidebar.outerHeight()-d-n,0==n?(a.stickySidebar.css("padding-top",0),a.stickySidebarPaddingTop=0):a.stickySidebarPaddingTop=1,0==d?(a.stickySidebar.css("padding-bottom",0),a.stickySidebarPaddingBottom=0):a.stickySidebarPaddingBottom=1,a.previousScrollTop=null,a.fixedScrollTop=0,o(),a.onScroll=function(a){if(a.stickySidebar.is(":visible")){if(i("body").width()<a.options.minWidth)return void o();if(a.sidebar.outerWidth(!0)+50>a.container.width())return void o();var n=i(document).scrollTop(),d="static";if(n>=a.container.offset().top+(a.paddingTop+a.marginTop-a.options.additionalMarginTop)){var r,s=a.paddingTop+a.marginTop+t.additionalMarginTop,c=a.paddingBottom+a.marginBottom+t.additionalMarginBottom,p=a.container.offset().top,b=a.container.offset().top+e(a.container),g=0+t.additionalMarginTop,l=a.stickySidebar.outerHeight()+s+c<i(window).height();r=l?g+a.stickySidebar.outerHeight():i(window).height()-a.marginBottom-a.paddingBottom-t.additionalMarginBottom;var h=p-n+a.paddingTop+a.marginTop,f=b-n-a.paddingBottom-a.marginBottom,S=a.stickySidebar.offset().top-n,u=a.previousScrollTop-n;"fixed"==a.stickySidebar.css("position")&&"modern"==a.options.sidebarBehavior&&(S+=u),"legacy"==a.options.sidebarBehavior&&(S=r-a.stickySidebar.outerHeight(),S=Math.max(S,r-a.stickySidebar.outerHeight())),S=u>0?Math.min(S,g):Math.max(S,r-a.stickySidebar.outerHeight()),S=Math.max(S,h),S=Math.min(S,f-a.stickySidebar.outerHeight());var m=a.container.height()==a.stickySidebar.outerHeight();d=(m||S!=g)&&(m||S!=r-a.stickySidebar.outerHeight())?n+S-a.sidebar.offset().top-a.paddingTop<=t.additionalMarginTop?"static":"absolute":"fixed"}if("fixed"==d)a.stickySidebar.css({position:"fixed",width:a.sidebar.width(),top:S,left:a.sidebar.offset().left+parseInt(a.sidebar.css("padding-left"))});else if("absolute"==d){var y={};"absolute"!=a.stickySidebar.css("position")&&(y.position="absolute",y.top=n+S-a.sidebar.offset().top-a.stickySidebarPaddingTop-a.stickySidebarPaddingBottom),y.width=a.sidebar.width(),y.left="",a.stickySidebar.css(y)}else"static"==d&&o();"static"!=d&&1==a.options.updateSidebarHeight&&a.sidebar.css({"min-height":a.stickySidebar.outerHeight()+a.stickySidebar.offset().top-a.sidebar.offset().top+a.paddingBottom}),a.previousScrollTop=n}},a.onScroll(a),i(document).scroll(function(i){return function(){i.onScroll(i)}}(a)),i(window).resize(function(i){return function(){i.stickySidebar.css({position:"static"}),i.onScroll(i)}}(a))})}var n={containerSelector:"",additionalMarginTop:0,additionalMarginBottom:0,updateSidebarHeight:!0,minWidth:0,sidebarBehavior:"modern"};t=i.extend(n,t),t.additionalMarginTop=parseInt(t.additionalMarginTop)||0,t.additionalMarginBottom=parseInt(t.additionalMarginBottom)||0,o(t,this)}}(jQuery);
$(document).ready(function(){$("#sidebar-right").theiaStickySidebar({additionalMarginTop:10,additionalMarginBottom:10})});};
//]]>
</script>
</b:if>
</b:if>

6. ShortCodes

Blockquote
Untuk membuat Blockquote cukup pilih semua teks yang Anda ingin menjadi Kutipan dan klik pada icon Kutipan dari posting blog panel editor teks.
Button
Menambahkan demo dan download button.
Responsive dan Versi Mobile<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="YOUR-LINK-HERE" target="_blank">DEMO</a></li>
<li><a class="download" href=" YOUR-LINK-HERE" target="_blank">DOWNLOAD</a></li>
</ul>
</div>
<div class="clear"></div>
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>
Memasang tabel di postingan
<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>
Memasang Video Youtube di Postingan
Tambahkan kode di bawah ini di dalam postingan blog pada tab HTML dan ganti link video youtube ini ymq1WdGUcw8 dengan link video youtube Anda
<div class="videoyoutube">
<div class="video-responsive">
<div class="video-youtube loader" data-src="//www.youtube.com/embed/ymq1WdGUcw8">
</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>