Documentation of KerenSive Theme

Advertisement
Your Ads Here
Example KerenSive Article Page from Libra Yanada
Example Caption by Josh Sorosky

Just follow this instruction carefully, also in Setting folder.

Introduction

Some codes that will help you, when edit the template:

Color:
  • Blue color code: #1e88e5
  • Red color code: #f50057
Other instructions are in the Settings folder.

Installation

When you are ready to install a theme, you must first upload the theme file. The theme file can be uploaded in two way.

a. Backup File

Login to Blogger > Template > Backup / Restore > Download full template.

b. Upload File

When you are ready to install a theme, you must first upload the theme file. The theme file can be uploaded in 2 way.

First way:
  1. Login to Blogger > Template > Backup / Restore > Choice File
  2. Open your purchase folder, you will see a folder with name ***-template-XML
  3. Click "Upload" button, wait a minute until process installation done.

Second way:
  1. Open the XML file with a text editor (Notepad or something like that). Then select all text and copy (Ctrl+A, Ctrl+C in Window).
  2. Return to your blog dashboard, access your Template menu, click Edit HTML.
  3. In Editor HTML window, select all old code and paste the new code that you copied from the release file into code field. Then, click Save Template.

Customize Theme

Navigation Menu 1

Login to Blogger > Theme > Edit HTML Find and change all code # with your link and title with the title of every menu.
<nav class='menu1'>
   <ul>
<li><a class='ripplelink' href='/p/about.html' title='About Us'><i class='fa fa-question-circle-o'/> About</a></li>
<li><a class='ripplelink' href='/p/contact.html' title='Contact Us'><i class='fa fa-envelope-o'/> Contact</a></li>
<li><a class='ripplelink' href='/p/sitemap.html' title='Our Sitemap'><i class='fa fa-map-o'/> Sitemap</a></li>
<li><a class='ripplelink' href='#' title='Dislaimer'><i class='fa fa-hand-paper-o'/> Disclaimer</a></li>
<li><a class='ripplelink' href='#' title='Privacy Policy'><i class='fa fa-lock'/> Privacy Policy</a></li>
<li><a class='ripplelink' href='#' title='ToS'><i class='fa fa-handshake-o'/> Terms of Service</a></li>
<li class='hfd blogger'><a href='https://www.blogger.com/follow-blog.g?blogID=7750306635665326636' rel='nofollow' target='_blank' title='Follow via Blogger'><i class='fa fa-plus'/></a></li>
<li class='hfd instagram'><a href='#' rel='nofollow' target='_blank' title='Instagram'><i class='fa fa-instagram'/><span/></a></li>
<li class='hfd facebook'><a href='#' rel='nofollow' target='_blank' title='Facebook'><i class='fa fa-facebook'/><span/></a></li>
<li class='hfd twitter'><a href='#' rel='nofollow' target='_blank' title='Twitter'><i class='fa fa-twitter'/><span/></a></li>
   </ul>
   <a href='#' id='pull'>MENU</a>
  </nav>

Change 7750306635665326636 with your Blog ID.

Navigation Menu 2

 <ul class='nav menu2'>
  <li class='ripplelink'><a class='active' href='/'><span><i class='fa fa-home'/> Home</span></a></li>
  <li class='ripplelink'><a href='#' itemprop='url'><span>Menu 1</span></a></li>
  <li class='ripplelink'><a href='#' itemprop='url'><span>Menu 2</span></a></li>
  <li><a href='#' itemprop='url'><span>Dropdown Menu</span></a>
   <ul>
   <li><a href='#' itemprop='url'><span>Dropdown Menu</span></a></li>
   <li><a href='#' itemprop='url'><span>Dropdown Menu</span></a></li>
   <li><a href='#' itemprop='url'><span>Dropdown Menu</span></a></li>
   </ul>
  </li>
  <li><a href='#' itemprop='url'><span>Sub Menu</span></a>
   <ul>
   <li><a href='#' itemprop='url'><span>DD Menu 1</span></a></li>
   <li><a href='#' itemprop='url'><span>DD Menu 2</span></a></li>
   <li><a href='#' itemprop='url'><span>DD Menu 3</span></a>
    <ul>
    <li><a href='#' itemprop='url'><span>Sub Menu 1</span></a></li>
    <li><a href='#' itemprop='url'><span>Sub Menu 2</span></a></li>
    <li><a href='#' itemprop='url'><span>Sub Menu 3</span></a></li>
    </ul>
   </li>
   </ul>
  </li>
      <li class='ripplelink'><a href='/404' itemprop='url'><span itemprop='name'>Error Page</span></a></li>
 </ul>

Footer Menu

<footer class='site-footerkeren' id='downkeren' itemscope='itemscope' itemtype='http://schema.org/WPFooter' role='contentinfo'>
<div class='site-infokeren' role='contentinfo'>
Copyright &#169; <span id='current-year'/>
<a expr:content='data:blog.title' expr:href='data:blog.homepageUrl' itemprop='creator' itemscope='itemscope' itemtype='http://schema.org/Person'><span itemprop='name'><data:blog.title/></span></a> - <a class='credit' href='http://www.krenkren.com/' id='credit' title='Krenkren'>Libra Yanada</a>. All Rights Reserved.<div class='site-infobawah'> Powered by <a href='https://www.blogger.com/' rel='nofollow' target='_blank' title='Powered by Blogger'>Blogger</a></div></div> 
</footer>

Do not delete/remove this credit link if you using free version. It's make you so good and look like appreciate creativity of others.

Meta and Title Tag for SEO and Opengraph

If you wanna be your blog powerfull on SEO, don't change this meta tag. Oke!

Make your blog powerfull

<meta charset='utf-8'/>
<meta content='width=device-width, initial-scale=1' name='viewport'/>
<meta content='blogger' name='generator'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>
<link expr:href='data:blog.url' rel='canonical'/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title>
<b:else/>
<b:if cond='data:blog.pageType != &quot;error_page&quot;'>
<title><data:blog.pageName/> - <data:blog.title/></title>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<title>Page Not Found - <data:blog.title/></title>
</b:if>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<meta content='noindex' name='robots'/>
</b:if>
<b:if cond='data:blog.searchLabel'>
<meta content='noindex,nofollow' name='robots'/>
</b:if>
<b:if cond='data:blog.isMobile'>
<meta content='noindex,nofollow' name='robots'/>
</b:if>
<b:if cond='data:blog.pageType != &quot;error_page&quot;'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<script type='application/ld+json'>{ &quot;@context&quot;: &quot;http://schema.org&quot;, &quot;@type&quot;: &quot;WebSite&quot;, &quot;url&quot;: &quot;<data:blog.homepageUrl/>&quot;, &quot;potentialAction&quot;: { &quot;@type&quot;: &quot;SearchAction&quot;, &quot;target&quot;: &quot;<data:blog.homepageUrl/>?q={search_term}&quot;, &quot;query-input&quot;: &quot;required name=search_term&quot; } }</script>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<meta expr:content='data:blog.pageName + &quot;, &quot; + data:blog.pageTitle + &quot;, &quot; + data:blog.title' name='keywords'/>
</b:if></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='DESKRIPSI-BLOG' name='keywords'/></b:if>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default?alt=rss&quot;' expr:title='data:blog.title + &quot; - RSS&quot;' rel='alternate' type='application/rss+xml'/>
<link expr:href='&quot;http://www.blogger.com/feeds/&quot; + data:blog.blogId + &quot;/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
</b:if></b:if>

Moderate Username or ID Edit xxxxx and other with your Username or ID, URL, etc.:

<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='msvalidate.01'/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLp32OI7uXa-Yj6z-ekKP7cNtHA063pf0AkFStogADIXroeQIBQWu7k93-m8roKZ6JrTlrj8782ILpS5R0fAlVE_qEyY4_chM4CaNJItc34nuS_LAquzFQT_hvTLTkps49dUZf9khpRzec/s1600/Libra+Yanada.jpg' property='og:image'/>
</b:if>
</b:if>
<meta content='https://www.facebook.com/xxxxx' property='article:author'/>
<meta content='https://www.facebook.com/xxxxx' property='article:publisher'/>
<meta content='xxxxx' property='fb:app_id'/>
<meta content='xxxxx' property='fb:admins'/>
<meta content='en_US' property='og:locale'/>
<meta content='en_GB' property='og:locale:alternate'/>
<meta content='id_ID' property='og:locale:alternate'/>
<meta content='summary' name='twitter:card'/>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
<meta content='@xxxxx' name='twitter:site'/>
<meta content='@xxxxx' name='twitter:creator'/>

Image caption on post page

<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyx6sKiwPVv3GkqXnGSJWhTs5g3NbNlKZzef9teaxwebJw0WhExAAKTE6WQoTRGxU0Z83XEGVlkUiCilJFpjVtyH7h66Ar3TqDoxjq0GaKXzje-PkzynbKnoEDhG481H85PfNVCOgXDnFq/s1600/KerenSive.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Example KerenSive Article Page from Libra Yanada" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyx6sKiwPVv3GkqXnGSJWhTs5g3NbNlKZzef9teaxwebJw0WhExAAKTE6WQoTRGxU0Z83XEGVlkUiCilJFpjVtyH7h66Ar3TqDoxjq0GaKXzje-PkzynbKnoEDhG481H85PfNVCOgXDnFq/s1600/KerenSive.png" title="Documentation of KerenSive Theme" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Example Caption by Josh Sorosky</td></tr>
</tbody></table>

Make YouTube video on post page

For HTML editor!

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



Add table on post page

<table cellpadding="0" cellspacing="0" style="text-align: left;">
   <tbody>
      <tr>
         <th>Table Header 1</th>
         <th>Table Header 2</th>
         <th>Table Header 3</th>
      </tr>
      <tr>
         <td>Division 1</td>
         <td>Division 2</td>
         <td>Division 3</td>
      </tr>
      <tr>
         <td>Division 1</td>
         <td>Division 2</td>
         <td>Division 3</td>
      </tr>
      <tr>
         <td>Division 1</td>
         <td>Division 2</td>
         <td>Division 3</td>
      </tr>
   </tbody>
</table>
Table Header 1 Table Header 2 Table Header 3
Division 1 Division 2 Division 3
Division 1 Division 2 Division 3
Division 1 Division 2 Division 3

Buttons

Copy and paste this code in your HTML Post Editor

<ul class="button"><li><a class="demo" href="http://www.krenkren.com/" title="Demo" target="_blank">DEMO</a></li>
<li><a class="download" href="http://www.krenkren.com/" title="Download" target="_blank">DOWNLOAD</a></li>
</ul>



HTML pre tag

This will find and highlight code inside of <pre><code> tags; it tries to detect the language automatically:

<pre><code>HTML HEAD BODY</code></pre>

HTML pre tag in Comment Box

<i rel="pre">Hello World!<i>

Split text on post page

<div class="split2"> //YOUR TEXT HERE </div>

Vivamus et ullamcorper enim. Integer luctus dui nec nibh commodo, a fermentum tellus semper. Duis ullamcorper, turpis sit amet bibendum dictum, mi justo varius orci, quis elementum justo lacus eu urna. Sed sem neque, sagittis quis posuere vel, semper quis neque. Curabitur fermentum eros eget leo bibendum ultricies. Donec felis nisl, gravida et auctor vel, bibendum et nunc. Duis sit amet cursus velit. Nulla bibendum lectus sit amet diam scelerisque lacinia gravida eu erat. In hac habitasse platea dictumst.

<div class="split3"> //YOUR TEXT HERE </div>

Quisque viverra sem libero, et porta odio blandit ac. Duis malesuada est mauris, sed semper risus iaculis ac. Fusce posuere auctor neque, non lacinia lectus accumsan feugiat. Pellentesque tincidunt erat ullamcorper quam molestie, nec lacinia ligula consectetur. Aliquam sit amet tellus ut nulla condimentum vestibulum in eget ante. Mauris lacinia est sit amet arcu dapibus sodales. Donec a erat vehicula mauris tincidunt tristique. Mauris mattis sit amet massa ut suscipit. Nam pretium molestie odio, et interdum massa tincidunt at. Morbi ligula tellus, scelerisque a mollis at, vehicula sed odio. Etiam euismod lorem sit amet lacus mattis fermentum. Sed suscipit sed lorem iaculis dignissim. Quisque fermentum elementum gravida. Suspendisse dignissim lorem viverra neque fermentum convallis.

<div class="split4"> //YOUR TEXT HERE </div>

Sed ornare ligula enim, vel gravida elit auctor sit amet. Nam ultrices nisi sed congue molestie. Donec ut elementum nulla. Morbi pharetra, ante nec viverra iaculis, mi quam pretium mi, quis auctor leo tortor at ipsum. Pellentesque porta massa lorem, ac vehicula risus elementum vitae. Nunc eu molestie nunc. Quisque pretium mauris non est lobortis feugiat ut commodo arcu. Curabitur mollis ac tellus ac semper.

Nullam ullamcorper dictum velit eget ultricies. Proin accumsan, libero id accumsan gravida, libero ligula fringilla tortor, ac placerat quam lectus vel est. Cras id tincidunt dui. Duis libero nisl, convallis tristique ultrices vulputate, ornare pretium tellus. Morbi ornare ante eget massa tristique euismod. Sed pulvinar bibendum nulla, non euismod sapien. Pellentesque sit amet metus ultrices, tristique arcu sed, fermentum dui. Maecenas aliquet ligula id nisl egestas, a cursus tellus elementum. Morbi eget leo eget risus aliquet rutrum.

<h2>Tag heading post page &lt;h2&gt;</h2>
<h3>Tag heading post page &lt;h3&gt;</h3>
<h4>Tag heading post page &lt;h4&gt;</h4>
<h5>Tag heading post page &lt;h5&gt;</h5>
<h6>Tag heading post page &lt;h6&gt;</h6>

Tag heading post page <h2>

Tag heading post page <h3>

Tag heading post page <h4>

Tag heading post page <h5>
Tag heading post page <h6>

Static Pages

Login to Blogger > Pages > Add New Page

Contact Us

Change 7750306635665326636 and kerensive.blogspot.com with your blog ID or URL.

<div class="separator" style="clear: both; text-align: center;">
<a href="#contact" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Contact Us" border="0" data-original-height="600" data-original-width="800" height="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-jKvutFIvT_sym1hqC7eNuecrHZEdgVvh01c4z1-LlEABZHkUxd7TY1EKTO4PwNEpDp1Jp_oBtcGUFsjaVjh6C6_Wy5LRki8jljUxc8XydJDwKgTt8O-jBS4rAx9maQWf319JZ1mf67W4/s640/short_mailbox.gif" title="Contact Us" width="640" /></a></div>
<br />
We love being a web designer and we’re incredibly thankful that we decided to join this industry many years ago. Contact us so we can help free . I’m usually available from 24 hour. I do also custom copywriting, storiewriting etc. I am currently accepting new freelance projects, and always excited to hear interesting proposals.
<br />
<div id="contact"></div>
<form id="kontak" name="contact-form">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Name *" size="30" type="text" value="" />
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email *" size="30" type="text" value="" />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message *" rows="5"></textarea> 
<input id="ContactForm1_contact-form-submit" type="button" value="Send Message" />  
<br />
<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>
<br />
<br />
<ul>
<li>198 West 21th Street, New York NY 10016</li>
<li>+ 1235 2355 98</li>
<li>info@yoursite.com</li>
<li>www.yoursite.com</li>
</ul>
<style scoped="" type="text/css">
#comments,.post_meta,#blog-pager{display:none}
form{color:#666}
form.payforpal{margin:auto;text-align:center}
#kontak{margin:auto;max-width:640px}
#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{display:inline-block;width:48%;height:auto;background:#fff;margin:20px auto;padding:15px 12px;color:#000;border:1px solid rgba(0,0,0,0.2);float:left;transition:all 0.2s}
#ContactForm1_contact-form-email{float:right}
#ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0 20px 0;padding:15px 12px;background:#fff;color:#000;border:1px solid rgba(0,0,0,0.2);resize:none;transition:all 0.3s}
#kontak br{display:none}
#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#000;border:1px solid rgba(0,0,0,0.2);}
#ContactForm1_contact-form-submit{float:left;background:#299BFA;color:#fff;margin:auto;vertical-align:middle;cursor:pointer;padding:16px 20px;font-size:15px;text-align:center;letter-spacing:.5px;border:0;width:100%;font-weight:500;transition:all .2s}
#ContactForm1_contact-form-submit:hover,#ContactForm1_contact-form-submit:focus{background:#207cc8;color:#fff;}
#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:35px}
.contact-form-error-message-with-border{background:#f47669;border:0;box-shadow:none;color:#fff;padding:5px 0;border-radius:3px}
.contact-form-success-message{background:#4fc3f7;border:0;box-shadow:none;color:#fff;border-radius:3px}
img.contact-form-cross{line-height:40px;margin-left:5px}
.post-body input{width:initial}
@media only screen and (max-width:640px){
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%;float:none}}
</style>
<script type="text/javascript">
//<![CDATA[
if (window.jstiming) window.jstiming.load.tick('widgetJsBefore');
//]]>
</script>
<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'] = '7750306635665326636';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d7750306635665326636','//kerensive.blogspot.com/','7750306635665326636');
_WidgetManager._RegisterWidget("_ContactFormView", new _WidgetInfo("ContactForm1", "footer1", null, document.getElementById("ContactForm1"), {"contactFormMessageSendingMsg": "Sending...", "contactFormMessageSentMsg": "<div class='contact_layout'><div class='contact_message'><b>Your message has been sent</b>.<br/>Jika tidak ada halangan dan kesibukan lainnya, admin akan langsung merespon pesan yang Anda kirimkan.</div></div><br/>", "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": "7750306635665326636", "contactFormNameMsg": "Name", "contactFormEmailMsg": "Email", "contactFormMessageMsg": "Message", "contactFormSendMsg": "Send", "submitUrl": "https://www.blogger.com/contact-form.do"}, "displayModeFull"));
//]]>
</script>
<div class='clear'></div>

Sitemap

<div id="bp_toc" style="max-height: 1800px; overflow-x: auto; overflow: scroll;"></div><script src="https://cdn.rawgit.com/Librayanada/vip/master/daftar-isi.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><br />
<style scoped="" type="text/css">#comments,#Label1,#FollowByEmail1 {display:none;} #HTML3 {visibility:hidden;} /* CSS Full Sitemap */ #bp_toc{background:#f4f5f6;color:#666;margin:0 auto;padding:4px;} span.toc-note{padding:20px;margin:0 auto;display:block;text-align:center;color:#7f8c8d;font-size:1.6rem;text-transform:uppercase;font-weight:700;line-height:normal} .toc-header-col1 {padding:10px;background-color:#f5f5f5;width:250px;} .toc-header-col2 {padding:10px;background-color:#f5f5f5;width:75px;} .toc-header-col3 {padding:10px;background-color:#f5f5f5;width:125px;} #bp_toc td.toc-header-col1,#bp_toc td.toc-header-col2,#bp_toc td.toc-header-col3{border:0;border-bottom:1px solid rgba(0,0,0,0.1);} #bp_toc tr:nth-child(1) a {color:#666;} #bp_toc td.toc-header-col1{background-color:#fff;} #bp_toc td.toc-header-col2{background-color:#fff;} #bp_toc td.toc-header-col3{background-color:#fff;} #bp_toc td.toc-entry-col1,#bp_toc td.toc-entry-col2,#bp_toc td.toc-entry-col3{border:0} #bp_toc td.toc-entry-col1{background-color:#fff;font-weight:700} #bp_toc tr:nth-child(odd) td.toc-entry-col1{background-color:#f8f8f8} #bp_toc td.toc-entry-col2{background-color:#fff;} #bp_toc tr:nth-child(odd) td.toc-entry-col2{background-color:#f8f8f8} #bp_toc td.toc-entry-col3{background-color:#fff;} #bp_toc tr:nth-child(odd) td.toc-entry-col3{background-color:#f8f8f8} #bp_toc td a{color:#666;} .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:12px; text-decoration:none;color:#aaa;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 {background:#fdfdfd;padding:5px;padding-left:5px;font-size:89%} .toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a{color:#666;font-size:13px;} .toc-entry-col1 a:hover, .toc-entry-col2 a:hover, .toc-entry-col3 a:hover{color:#cdb280;} #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;} </style>

Page Navigation

Find and replace the number 7 in the var postperpage=7 with the number of posts you want to display on each page.

var postperpage=7;var numshowpage=3;var upPageWord ='Prev';var downPageWord ='Next';var urlactivepage=location.href;var home_page="/";

HTML/Widget

Search page (HTML)

Login to Blogger > Theme > Edit HTML Find this code <! - Search Form -> in HTML Template and find the code below!

Default Search Page:

<!-- Search Form -->
<form action='/search' id='search-form'  style='display: inline;'><table><tbody><tr><td class='search-box'><input id='search-box' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' placeholder='Search here...' required='required' type='text'/></td>
<td class='search-button'><input id='search-button' type='submit' value=''/></td></tr></tbody></table></form>
<!-- End of Search Form -->

Google Search Page:

<form action='https://www.google.com/search' id='search-form' method='get' target='_blank'>
<meta content='https://www.google.com/search?q={q}' itemprop='target'/>
<table><tbody><tr><td class='search-box'>
<input id='search-box' name='q' placeholder='Search here...' required='required' type='text'/>
<input expr:value='data:blog.homepageUrl' name='as_sitesearch' type='hidden'/></td>
<td class='search-button'><input id='search-button' type='submit' value=''/></td></tr></tbody></table></form>

Email Subscription Box (Widget)

Login to Blogger > Layout > Add HTML/JavaScript
<div id="subscribe-css">
<div class="subscribe-wrapper">
<h3>Get more great stuff like this

<span>delivered to your inbox</span></h3>
<div class="subscribe-form">
<form action='http://feedburner.google.com/fb/a/mailverify?uri=xxxxx' class="subscribe-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=xxxxx', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="uri" type="hidden" value="xxxxx" />
<input name="loc" type="hidden" value="en_US" />
<input class="subscribe-css-email-field" name="email" autocomplete="off" placeholder="Enter your e-mail here"/>
<input class="subscribe-css-button" title="" type="submit" value="Sign Up Now" />
</form>
</div>
</div></div>

Replace CSS Subscribe Box Code HTML1 with your HTML Widget Number.

Featured Post by Label (Widget)



Find and change Sample with your label name (HTML)


/feeds/posts/default/-/Sample?alt=json-in-script&max-results=4

Ad in post (HTML)

Parse your ad code and paste to this ad area:

&lt;div style=&quot;display:block;text-align:center;margin:20px auto;&quot;&gt;
<div class='ads-title'><span>Advertisement</span></div>
<!-- Kode banner/iklan Anda di sini (parse) -->
Paste here!
<!-- Ad code is finished here -->
&lt;/div&gt;

Related posts and middle ads (HTML)

Replace <data:post.body/> with this code:

<div class='widget-middle' id='widget-middle'><data:post.body/></div>
<div class='inline_wrapper' id='inline_wrapper'>
<div class='ads_middle'>
<div class='ads-title'><span>Advertisement</span></div>
<!-- Kode iklan tengah (parse) -->
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7Q5YUUTq6bwWKTwr0WNgzEZmVvQHOthm0g-kFep8VfRsuX1-zql_Q-aWK2qA8J_VWe-sNrqLT_lfrU0xR0_xh2XpT5UaO0aEVE6cG1qfvHfv_beGYr4eftbrHDYNEbyw58bxIQyNJPMJp/s1600/Advertisement-foot.gif' height='280' width='336' title='ads here' alt='ads here'/>
<!-- Ad code is finished here -->
  </div>
<!-- Related posts inline start -->
<div class='related_inline_wrapper' id='related_inline_wrapper'>
<div class='related-post-by-title' id='related-post-by-title'>
  <span>Recommended:</span>
<b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != &quot;true&quot;'/> <b:if cond='data:blog.pageType == &quot;item&quot;'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=3&quot;' type='text/javascript'/></b:if> </b:loop> <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script>
</div> </div> <!-- Related posts inline end --> </div> <script type='text/javascript'> function insertAfter(addition,target) {var parent = target.parentNode;if (parent.lastChild == target) {parent.appendChild(addition); } else {parent.insertBefore(addition,target.nextSibling);}} var middleads = document.getElementById("inline_wrapper");var target = document.getElementById("widget-middle"); var opsi1 = target.getElementsByTagName("br");if (opsi1.length > 0){insertAfter(middleads,opsi1[3]);} var opsi2 = target.getElementsByTagName("blockquote");if (opsi2.length > 0){insertAfter(middleads,opsi2[0]);} var opsi3 = target.getElementsByTagName("h2");if (opsi3.length > 0){insertAfter(middleads,opsi3[0]);} </script>

Find and replace 3 with the number of posts you want to display: related_results_labels&amp;max-results=3

Have a nice day and thanks for using this template!
Advertisement
Your Ads Here

You might also like

62 comments

  1. /feeds/posts/default/-/Sample?alt=json-in-script&max-results=4
    kode di atas kok ga bsa ya mas?

    ReplyDelete
    Replies
    1. Sample diganti dengan nama label.

      Jika nama label memiliki spasi, ganti spasi dengan kode %20

      Delete
  2. ada versi premium nya ini kak?

    ReplyDelete
    Replies
    1. Ini adalah versi premium.

      Delete
    2. Tapi di idntheme di bagi gratis live previewnya sama gak dengan yang premium?

      Delete
    3. Sobat Haris bisa contact ke FB/WA untuk order versi premium. :D

      Delete
    4. OK ada yang pakai komentar disqus gak ya?

      Delete
    5. Sobat Haris bisa Install Komentar Disqus mengikuti tutorial di internet. :)

      Delete
  3. (y) keresive test komenntar

    ReplyDelete
  4. Aman 100% keren, mantap pokoknya

    ReplyDelete
  5. Kalau versi gratisnya warna komentar dari authornya bisa berganti-ganti warna gak?

    ReplyDelete
  6. Mbak versi premiumnya ada gak nih....?

    ReplyDelete
    Replies
    1. Ini sudah versi premium.

      Buat sobat Setya Design, bisa order melalui contact di komentar pertama.

      Delete
  7. maaf saya mau tanya, saya pakai yg free kok related post gak muncul ya thumbnail imagenya? undifinied, solusinya gimana?

    ReplyDelete
  8. Replies
    1. Tombol demo dan download

      <ul class="button"><li><a class="demo" href="http://www.krenkren.com/">DEMO</a></li>
      <li><a class="download" href="http://www.krenkren.com/">DOWNLOAD</a></li>
      </ul>

      Delete
    2. cara buat komentar seperti diatas gimana gan?

      Delete
  9. Kalau tombol next dan previous di postingan ga muncul judul post dan gambar gimana gan ?

    ReplyDelete
  10. Cara pasang iklan di awal dan akhir artikelnya gimana gan?

    ReplyDelete
  11. halo templatenya sangat keren,lihatlah hasil redesign saya,, http://infonganjuk-ga.blogspot.co.id/

    ReplyDelete
  12. Saya Move on ke KerenSive keren sangat

    ReplyDelete
  13. Link Rusak min mau dowload tolong diperbaiki

    ReplyDelete
  14. gan cara fix share on WhatsApp nya gimana ?

    ReplyDelete
  15. Saya mau tanya, kenapa widget gak nongol di versi mobile? Bahkan ada widget bandel yang udh dihapus datang lagi. :3

    ReplyDelete
    Replies
    1. Jangan ngedit 2 tab, kalau gitu ntar yang satu sudah tersimpan giliran editan yang lama disimpan juga sama saja kayak ngulang lagi.

      Delete
    2. This comment has been removed by the author.

      Delete
    3. This comment has been removed by the author.

      Delete
  16. Template bagus sekali.

    Sukses trus bang.

    ReplyDelete
  17. Mas kalau versi gratis komentar nya warna-warni gak?

    ReplyDelete
  18. yg versi gratis fitur komentarnya tidak bisa ya?

    ReplyDelete
  19. This comment has been removed by the author.

    ReplyDelete
  20. Hello! First of all, to say that I love your work and thank you for sharing it. Now, I have a doubt about this template. When you say find and replace this [data:post.body] it means replace all the parts where the code is? or only one in specific ?. Thank you!

    ReplyDelete
    Replies
    1. In that section, I only modify the code by not removing it.

      Delete
  21. Featured Post by Label (Widget) tiba tiba ilang gan mohon solusi. blog http://www.rizukey.com

    ReplyDelete
  22. terimakasih update'annya :D

    ReplyDelete
  23. where to add this related posts section , there is already a related-keren section

    ReplyDelete
  24. This particular papers fabulous, and My spouse and i enjoy each of the perform that you have placed into this. I’m sure that you will be making a really useful place. I has been additionally pleased. Good perform! Canada turistvisum

    ReplyDelete
  25. I know this is one of the most meaningful information for me. And I'm animated reading your article. But should remark on some general things, the website style is perfect; the articles are great. Thanks for the ton of tangible and attainable help. visa de turista canadá

    ReplyDelete
  26. mantap dan keren...

    ReplyDelete
  27. This comment has been removed by the author.

    ReplyDelete
  28. The content is utmost interesting! I have completely enjoyed reading your points and have come to the conclusion that you are right about many of them.
    Berita Terbaru

    ReplyDelete

Leave a Comment