1. Home
  2. Tips Blogger
  3. Documentation SuperMasBro Template

Documentation SuperMasBro Template

March 08, 2019
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>


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


Widget

Widget sitemap
Tambahkan kode di bawah ini di dalam postingan statis blog, ganti url blog https://www.theboegis.com/ dengan url blog Anda.
<div class="tabbed-toc" id="tabbed-toc">
</div>
<script>
var tabbedTOC={blogUrl:"https://www.theboegis.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://rawcdn.githack.com/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>


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 //www.theboegis.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/AVvXsEgueIANeqNOKTJwY7iJ2vIzfJgmy4bTpiTNJ1tP8xESzerNO8LcrYWFBtor6SKtb1aKJJntiOld7n1UMf7qfoAmsshkseIAtlYxhwYOiiEELRAP_mOuV-8X5f1Ne5UaRFNC93mCPsV6cCW4/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','//www.theboegis.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 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>


ShortCodes

Menambahkan demo dan download button.
<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>

Related Post

Comments

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 )