Advertisement
Your Ads Here
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.Login to Blogger > Template > Backup / Restore > Choice FileOpen your purchase folder, you will see a folder with name ***-template-XMLClick "Upload" button, wait a minute until process installation done.
Second way:
- 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).
- Return to your blog dashboard, access your Template menu, click Edit HTML.
- 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 © <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 == "index"'>
<title><data:blog.pageTitle/></title>
<b:else/>
<b:if cond='data:blog.pageType != "error_page"'>
<title><data:blog.pageName/> - <data:blog.title/></title>
</b:if></b:if>
<b:if cond='data:blog.pageType == "error_page"'>
<title>Page Not Found - <data:blog.title/></title>
</b:if>
<b:if cond='data:blog.pageType == "archive"'>
<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 != "error_page"'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<script type='application/ld+json'>{ "@context": "http://schema.org", "@type": "WebSite", "url": "<data:blog.homepageUrl/>", "potentialAction": { "@type": "SearchAction", "target": "<data:blog.homepageUrl/>?q={search_term}", "query-input": "required name=search_term" } }</script>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<meta expr:content='data:blog.pageName + ", " + data:blog.pageTitle + ", " + 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 + "feeds/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + "feeds/posts/default?alt=rss"' expr:title='data:blog.title + " - RSS"' rel='alternate' type='application/rss+xml'/>
<link expr:href='"http://www.blogger.com/feeds/" + data:blog.blogId + "/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>
<b:if cond='data:blog.pageType == "item"'>
<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 <h2></h2>
<h3>Tag heading post page <h3></h3>
<h4>Tag heading post page <h4></h4>
<h5>Tag heading post page <h5></h5>
<h6>Tag heading post page <h6></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 PageContact 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&max-results=9999&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 thevar 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=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value='';' 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:<div style="display:block;text-align:center;margin:20px auto;">
<div class='ads-title'><span>Advertisement</span></div>
<!-- Kode banner/iklan Anda di sini (parse) -->
Paste here!
<!-- Ad code is finished here -->
</div>
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 != "true"'/> <b:if cond='data:blog.pageType == "item"'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=3"' 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&max-results=3
Have a nice day and thanks for using this template!
Advertisement
Your Ads Here
test
ReplyDelete/feeds/posts/default/-/Sample?alt=json-in-script&max-results=4
ReplyDeletekode di atas kok ga bsa ya mas?
Sample diganti dengan nama label.
DeleteJika nama label memiliki spasi, ganti spasi dengan kode %20
ada versi premium nya ini kak?
ReplyDeleteIni adalah versi premium.
DeleteTapi di idntheme di bagi gratis live previewnya sama gak dengan yang premium?
DeleteSobat Haris bisa contact ke FB/WA untuk order versi premium. :D
DeleteOK ada yang pakai komentar disqus gak ya?
DeleteSobat Haris bisa Install Komentar Disqus mengikuti tutorial di internet. :)
Delete(y) keresive test komenntar
ReplyDeletetest komentar
ReplyDeleteAman 100% keren, mantap pokoknya
ReplyDeleteTerima kasih. x-)
DeleteKalau versi gratisnya warna komentar dari authornya bisa berganti-ganti warna gak?
ReplyDeleteBisa. (y)
DeleteMbak versi premiumnya ada gak nih....?
ReplyDeleteIni sudah versi premium.
DeleteBuat sobat Setya Design, bisa order melalui contact di komentar pertama.
maaf saya mau tanya, saya pakai yg free kok related post gak muncul ya thumbnail imagenya? undifinied, solusinya gimana?
ReplyDeletePasang label
Deletenggak ada tombol ya gan?
ReplyDeleteTombol demo dan download
Delete<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>
cara buat komentar seperti diatas gimana gan?
DeleteTag Pre (premium)
DeleteKalau tombol next dan previous di postingan ga muncul judul post dan gambar gimana gan ?
ReplyDeleteHati-hati kalau ngedit template-nya. =D
DeleteCara pasang iklan di awal dan akhir artikelnya gimana gan?
ReplyDeleteCek dokumentasi di atas (Ad in Post)
Deletemba cek email
ReplyDeletekeren om libra :D
ReplyDeleteMakasih Pak Guruku :-d
Deletehalo templatenya sangat keren,lihatlah hasil redesign saya,, http://infonganjuk-ga.blogspot.co.id/
ReplyDeletejds daily
ReplyDeletejdsdaily.com
ReplyDeleteSaya Move on ke KerenSive keren sangat
ReplyDeleteLink Rusak min mau dowload tolong diperbaiki
ReplyDeletegan cara fix share on WhatsApp nya gimana ?
ReplyDeleteSaya mau tanya, kenapa widget gak nongol di versi mobile? Bahkan ada widget bandel yang udh dihapus datang lagi. :3
ReplyDeleteJangan ngedit 2 tab, kalau gitu ntar yang satu sudah tersimpan giliran editan yang lama disimpan juga sama saja kayak ngulang lagi.
DeleteThis comment has been removed by the author.
DeleteThis comment has been removed by the author.
DeleteTemplate bagus sekali.
ReplyDeleteSukses trus bang.
Mas kalau versi gratis komentar nya warna-warni gak?
ReplyDeleteIya
Deletekeren ini
ReplyDeleteyg versi gratis fitur komentarnya tidak bisa ya?
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteHello! 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!
ReplyDeleteIn that section, I only modify the code by not removing it.
DeleteFeatured Post by Label (Widget) tiba tiba ilang gan mohon solusi. blog http://www.rizukey.com
ReplyDeleteterimakasih update'annya :D
ReplyDeletetesting
DeleteHello
ReplyDeleteJust a replay cmt
DeleteAnd another one
DeleteAnother?
ReplyDeletewhere to add this related posts section , there is already a related-keren section
ReplyDeleteThis 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
ReplyDeleteI 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á
ReplyDeletemantap dan keren...
ReplyDeleteThis comment has been removed by the author.
ReplyDeletekeren mana sama ini? vluter.com
ReplyDeleteThe 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.
ReplyDeleteBerita Terbaru
Thank you dad! Evergreen Contents
ReplyDelete