 |
| 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
Others:
<head>=<head></head>=</head><!--<head/>--></body>=<!--</body>--></body>
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 gplus'><a href='#' rel='nofollow' target='_blank' title='Google Plus'><i class='fa fa-google-plus'/><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
<nav id='menu2-wrapper' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>
<a class='menu2-container' href='#'><div class='navmenu'>
<span class='item item-1'/>
<span class='item item-2'/>
<span class='item item-3'/>
</div></a>
<ul class='nav menu2'>
<li class='ripplelink'><a class='active' href='/'><span itemprop='name'><i class='fa fa-home'/> Home</span></a></li>
<li class='ripplelink'><a href='#' itemprop='url'><span itemprop='name'>Menu 1</span></a></li>
<li class='ripplelink'><a href='#' itemprop='url'><span itemprop='name'>Menu 2</span></a></li>
<li class='ripplelink'><a href='#' itemprop='url'><span itemprop='name'>Menu 3</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Dropdown Menu</span></a>
<ul>
<li><a href='#' itemprop='url'><span itemprop='name'>Dropdown Menu</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Dropdown Menu</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Dropdown Menu</span></a></li>
</ul>
</li>
<li><a href='#' itemprop='url'><span itemprop='name'>Sub Menu</span></a>
<ul>
<li><a href='#' itemprop='url'><span itemprop='name'>DD Menu 1</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>DD Menu 2</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>DD Menu 3</span></a>
<ul>
<li><a href='#' itemprop='url'><span itemprop='name'>Sub Menu 1</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Sub Menu 2</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>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/AVvXsEgzbHxLm0uK9WGrhHrF7rwS3yST_7LOSzxKFN7eyLN7UwVdIbhPllBInCOKW_Gy-rdWXqoVJl8xWYl_EKQLE2NocxpffJCUTwzqcoBbuogSKtun-JTAxjbhRWKhi1d-M-my7z7nZjvUvyyp/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/AVvXsEh5FWTQwd5XM-xO8u0m9BRw9aRQR6day5pSL51iUdRAcF8V_vFIaHwQf67P9bCCiAbrhOw2jXjPw8iUEFnLxQ-Bjj5rg72ecuDfoxf6dfd3Ul_TzEhS8QemKepWX-_fAt3Dvgl6X8_WluY-/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/AVvXsEh5FWTQwd5XM-xO8u0m9BRw9aRQR6day5pSL51iUdRAcF8V_vFIaHwQf67P9bCCiAbrhOw2jXjPw8iUEFnLxQ-Bjj5rg72ecuDfoxf6dfd3Ul_TzEhS8QemKepWX-_fAt3Dvgl6X8_WluY-/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/_hf6ke1-i3E"> </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/AVvXsEitoeph1zHWBLM4aw9G2DbYNjAFCIVZ56AP6FZ5w0g5vYfjkn9SkMuyZ1WlYeHnNZhqtX0Q2DuegYVTV0OLyFfdM7luYvbHs_0uxkumb4xX-nswyliZHzE0Dhw6zFfXUNJPOV8VvvS1b6s7/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<! - Form Pencarian -> in HTML Template and find the code below!Default Search Page:
<div itemprop='mainEntity' itemscope='itemscope' itemtype='http://schema.org/WebSite'>
<link expr:href='data:blog.homepageUrl' itemprop='url'/>
<form action='/search' id='search-form' itemprop='potentialAction' itemscope='itemscope' itemtype='http://schema.org/SearchAction' method='get' style='display: inline;'><table><tbody><tr><td class='search-box'><input id='search-box' itemprop='query-input' 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>
</div>Google Search Page:
<div itemprop='mainEntity' itemscope='itemscope' itemtype='http://schema.org/WebSite'>
<link expr:href='data:blog.homepageUrl' itemprop='url'/>
<form action='https://www.google.com/search' id='search-form' itemprop='potentialAction' itemscope='itemscope' itemtype='http://schema.org/SearchAction' 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' itemprop='query-input' 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>
</div>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=4Ad 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/AVvXsEi5Cbc_fGAYI4FLvUmRZS0epJvJXq-1D5hvj2mU3EIM0l9fl01oNJZS2EkLlGnp5wNVyd0_yZ0qHcisWHHlEBo47DtroLm8BjA8MdXQi-mqo35p4JSGne9V2OVTfkwkluSv76wUzjaC8CRv/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>Baca juga:</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</div> <!-- Related posts inline end --> </div> </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
Enter your message here...
To be or not to be,
that is the question...
maybe, I think,
I'm not sure
wait, you're still reading this?
Type a good message already!
<div><span style="color:#ff0000;">E</span><span style="color:#ff0400;">n</span><span style="color:#ff0800;">t</span><span style="color:#ff0c00;">e</span><span style="color:#ff1000;">r</span><span style="color:#ff1400;"> </span><span style="color:#ff1900;">y</span><span style="color:#ff1d00;">o</span><span style="color:#ff2100;">u</span><span style="color:#ff2500;">r</span><span style="color:#ff2900;"> </span><span style="color:#ff2d00;">m</span><span style="color:#ff3100;">e</span><span style="color:#ff3500;">s</span><span style="color:#ff3900;">s</span><span style="color:#ff3d00;">a</span><span style="color:#ff4200;">g</span><span style="color:#ff4600;">e</span><span style="color:#ff4a00;"> </span><span style="color:#ff4e00;">h</span><span style="color:#ff5200;">e</span><span style="color:#ff5600;">r</span><span style="color:#ff5a00;">e</span><span style="color:#ff5e00;">.</span><span style="color:#ff6200;">.</span><span style="color:#ff6600;">.</span></div><div><span style="color:#ff6b00;">T</span><span style="color:#ff6f00;">o</span><span style="color:#ff7300;"> </span><span style="color:#ff7700;">b</span><span style="color:#ff7b00;">e</span><span style="color:#ff7f00;"> </span><span style="color:#ff8300;">o</span><span style="color:#ff8700;">r</span><span style="color:#ff8b00;"> </span><span style="color:#ff9000;">n</span><span style="color:#ff9400;">o</span><span style="color:#ff9800;">t</span><span style="color:#ff9c00;"> </span><span style="color:#ffa000;">t</span><span style="color:#ffa400;">o</span><span style="color:#ffa800;"> </span><span style="color:#ffac00;">b</span><span style="color:#ffb100;">e</span><span style="color:#ffb500;">,</span><span style="color:#ffb900;"> </span></div><div><span style="color:#ffbd00;">t</span><span style="color:#ffc100;">h</span><span style="color:#ffc500;">a</span><span style="color:#ffc900;">t</span><span style="color:#ffcd00;"> </span><span style="color:#ffd200;">i</span><span style="color:#ffd600;">s</span><span style="color:#ffda00;"> </span><span style="color:#ffde00;">t</span><span style="color:#ffe200;">h</span><span style="color:#ffe600;">e</span><span style="color:#ffea00;"> </span><span style="color:#ffee00;">q</span><span style="color:#fff300;">u</span><span style="color:#fff700;">e</span><span style="color:#fffb00;">s</span><span style="color:#ffff00;">t</span><span style="color:#f7ff00;">i</span><span style="color:#efff00;">o</span><span style="color:#e7ff00;">n</span><span style="color:#dfff00;">.</span><span style="color:#d7ff00;">.</span><span style="color:#cfff00;">.</span></div><div><span style="color:#c7ff00;">m</span><span style="color:#bfff00;">a</span><span style="color:#b7ff00;">y</span><span style="color:#afff00;">b</span><span style="color:#a7ff00;">e</span><span style="color:#9fff00;">,</span><span style="color:#97ff00;"> </span><span style="color:#8fff00;">I</span><span style="color:#87ff00;"> </span><span style="color:#80ff00;">t</span><span style="color:#78ff00;">h</span><span style="color:#70ff00;">i</span><span style="color:#68ff00;">n</span><span style="color:#60ff00;">k</span><span style="color:#58ff00;">,</span><span style="color:#50ff00;"> </span></div><div><span style="color:#48ff00;">I</span><span style="color:#40ff00;">'</span><span style="color:#38ff00;">m</span><span style="color:#30ff00;"> </span><span style="color:#28ff00;">n</span><span style="color:#20ff00;">o</span><span style="color:#18ff00;">t</span><span style="color:#10ff00;"> </span><span style="color:#08ff00;">s</span><span style="color:#00ff00;">u</span><span style="color:#00ff08;">r</span><span style="color:#00ff10;">e</span></div><div><span style="color:#00ff19;">w</span><span style="color:#00ff21;">a</span><span style="color:#00ff29;">i</span><span style="color:#00ff31;">t</span><span style="color:#00ff3a;">,</span><span style="color:#00ff42;"> </span><span style="color:#00ff4a;">y</span><span style="color:#00ff52;">o</span><span style="color:#00ff5a;">u</span><span style="color:#00ff63;">'</span><span style="color:#00ff6b;">r</span><span style="color:#00ff73;">e</span><span style="color:#00ff7b;"> </span><span style="color:#00ff84;">s</span><span style="color:#00ff8c;">t</span><span style="color:#00ff94;">i</span><span style="color:#00ff9c;">l</span><span style="color:#00ffa5;">l</span><span style="color:#00ffad;"> </span><span style="color:#00ffb5;">r</span><span style="color:#00ffbd;">e</span><span style="color:#00ffc5;">a</span><span style="color:#00ffce;">d</span><span style="color:#00ffd6;">i</span><span style="color:#00ffde;">n</span><span style="color:#00ffe6;">g</span><span style="color:#00ffef;"> </span><span style="color:#00fff7;">t</span><span style="color:#00ffff;">h</span><span style="color:#00f7ff;">i</span><span style="color:#00efff;">s</span><span style="color:#00e6ff;">?</span></div><div><span style="color:#00deff;">T</span><span style="color:#00d6ff;">y</span><span style="color:#00ceff;">p</span><span style="color:#00c5ff;">e</span><span style="color:#00bdff;"> </span><span style="color:#00b5ff;">a</span><span style="color:#00adff;"> </span><span style="color:#00a5ff;">g</span><span style="color:#009cff;">o</span><span style="color:#0094ff;">o</span><span style="color:#008cff;">d</span><span style="color:#0084ff;"> </span><span style="color:#007bff;">m</span><span style="color:#0073ff;">e</span><span style="color:#006bff;">s</span><span style="color:#0063ff;">s</span><span style="color:#005aff;">a</span><span style="color:#0052ff;">g</span><span style="color:#004aff;">e</span><span style="color:#0042ff;"> </span><span style="color:#003aff;">a</span><span style="color:#0031ff;">l</span><span style="color:#0029ff;">r</span><span style="color:#0021ff;">e</span><span style="color:#0019ff;">a</span><span style="color:#0010ff;">d</span><span style="color:#0008ff;">y</span><span style="color:#0000ff;">!</span></div>
Have a nice day and thanks for using this template!
1 Comments:
HEllo All Word
EmoticonEmoticon