Thursday 23 June 2016

Simplify 2 Responsive Template Documentation

Simplify 2 Template Documentation

Simplify is a Blogger template with Responsive layout and suited for all blog. It's design with simple color combination, clean and modern look, Fast, SEO Optimized, and has been built by using some of the most popular current design trends.

Installation


1. Log in ke Blogger dashboard dan buka Template > Edit HTML.
2. Silahkan backup template lama Anda jika Anda memutuskan untuk menggunakannya lagi. Untuk melakukan ini, klik pada "download template lengkap" link dan simpan template.
3. Kemudian, cari lokasi XML template yang baru saja Anda download dan tekan "Upload".

Customize Theme


Navigation

Silakan buka Blogger > Template > "Edit HTML"

Cari dan ganti semua kode ini # dengan link Anda.

<nav id='simplify-two' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'>
  <input type='checkbox'><i aria-hidden='true' class='fa fa-th-list'/> Menu</input>
<ul id='simplify-click'>
<li><a href='#' itemprop='url'><span itemprop='name'>Blog <i class='fa fa-caret-down fa-fw'/></span></a>
<ul>
<li><a href='#' itemprop='url'><span itemprop='name'>About</span></a></li>
<li><a href='/p/contact-form.html' itemprop='url'><span itemprop='name'>Contact</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>CSS Minifier</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Disclaimer</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>HTML Converter</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Privacy Policy</span></a></li>
<li><a href='/p/sitemap.html' itemprop='url'><span itemprop='name'>Sitemap</span></a></li>
<li><a href='/p/static-page.html' itemprop='url'><span itemprop='name'>Static Page</span></a></li>
<li><a href='/404' itemprop='url'><span itemprop='name'>404 Page Not Found</span></a></li>
</ul>
</li>
<li><a href='#' itemprop='url'><span itemprop='name'>Menu <i class='fa fa-caret-down fa-fw'/></span></a>
<ul>
<li><a href='#' itemprop='url'><span itemprop='name'>Menu 1</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Menu 2</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Menu 3</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Menu 4</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Menu 5</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Menu 6</span></a></li>
</ul>
</li>
<li><a href='#' itemprop='url'><span itemprop='name'>Menu <i class='fa fa-caret-down fa-fw'/></span></a>
<ul>
<li><a href='#' itemprop='url'><span itemprop='name'>Menu 1</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Menu 2</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Menu 3</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Menu 4</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Menu 5</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Menu 6</span></a></li>
</ul>
</li>
<li><a href='#' itemprop='url'><span itemprop='name'>Menu <i class='fa fa-caret-down fa-fw'/></span></a>
<ul>
<li><a href='#' itemprop='url'><span itemprop='name'>Menu 1</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Menu 2</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Menu 3</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Menu 4</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Menu 5</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Menu 6</span></a></li>
</ul>
</li>
<li><a href='#' itemprop='url'><span itemprop='name'>Menu <i class='fa fa-caret-down fa-fw'/></span></a>
<ul>
<li><a href='#' itemprop='url'><span itemprop='name'>Menu 1</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Menu 2</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Menu 3</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Menu 4</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Menu 5</span></a></li>
<li><a href='#' itemprop='url'><span itemprop='name'>Menu 6</span></a></li>
</ul>
</li>
</ul>
</nav>

Footer Menu

<div class='footer-column'>
  <div class='footer-menu'>
    <h3>About</h3>
    <p class='footer2'>
      Google today announced IT admins can now apply policies to Chrome on Android and iOS, in addition to Windows, Mac, Linux, and Chrome OS.
<div class='clear'/>
<div class='simplifymed'>
<a class='facebook' href='#' rel='nofollow' target='_blank'><i class='fa fa-facebook'/></a>
<a class='twitter' href='#' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a>
<a class='googleplus' href='#' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/></a>
<a class='rssfeed' href='#' rel='nofollow' target='_blank'><i class='fa fa-rss'/></a>
</div>
    </p>
  </div>
  <div class='footer-menu'>
    <h3>Web Tools</h3>
    <ul class='footer2 line'>
      <li><a href='#' title='Contact Form'>Contact Form</a></li>
      <li><a href='#' title='Disclaimer'>Disclaimer</a></li>
      <li><a href='#' title='Privacy Policy'>Privacy Policy</a></li>
      <li><a href='#' title='Daftar Isi Blog'>Sitemap</a></li>
      <li><a href='#' title='Terms of Service'>Terms of Service</a></li>
    </ul>
  </div>
  <div class='footer-menu' id='subscribe-footer'>
    <h3>Newsletter</h3>
    <p>Berlangganan artikel terbaru dari blog ini langsung via email.</p>
    <div class='emailfooter'>
      <form action='https://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;https://feedburner.google.com/fb/a/mailverify?uri=Blog-simplifydua&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
        <input name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Email address&quot;;}' onfocus='if (this.value == &quot;Email address&quot;) {this.value = &quot;&quot;;}' type='text' value='Email address'/>
        <input name='uri' type='hidden' value='simplifydua'/>
        <input name='loc' type='hidden' value='en_US'/>
        <input class='submitfooter' type='submit' value='Submit'/>
      </form>
    </div>
  </div>
</div>
</div>

Sidebar Sosial Link

Cari dan ganti semua tanda # dengan link sosial media Anda.

<div id='socialcounter'>
    <ul class='social-counter'>
        <li class='social_item-wrapper'><a class='social_item social_facebook' href='#' rel='nofollow' target='_blank'><i class='fa fa-facebook social_icon'/><span class='social_num'>Facebook</span></a>
        </li>
        <li class='social_item-wrapper'><a class='social_item social_twitter' href='#' rel='nofollow' target='_blank'><i class='fa fa-twitter social_icon'/><span class='social_num'>Twitter</span></a>
        </li>
        <li class='social_item-wrapper'><a class='social_item social_youtube' href='#' rel='nofollow' target='_blank'><i class='fa fa-youtube social_icon'/><span class='social_num'>Youtube</span></a>
        </li>
        <li class='social_item-wrapper'><a class='social_item social_rss' href='#' rel='nofollow' target='_blank'><i class='fa fa-rss social_icon'/><span class='social_num'>RSS</span></a>
        </li>
        <li class='social_item-wrapper'><a class='social_item social_google-plus' href='#' rel='nofollow' target='_blank'><i class='fa fa-google-plus social_icon'/><span class='social_num'>Google+</span></a>
        </li>
        <li class='social_item-wrapper'><a class='social_item social_instagram' href='#' rel='nofollow' target='_blank'><i class='fa fa-instagram social_icon'/><span class='social_num'>Instagram</span></a>
        </li>
    </ul>
</div>

SEO Meta Tag

Buka Blogger, Template, "Edit HTML"

Cari dan ganti semua tulisan xxxxx dengan keterangan blog Anda (Jika tidak diperlukan, hapus atau dibiarkan juga tidak apa-apa).

<meta content='xxxxx' name='keywords'/>
<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='xxxxx' name='alexaVerifyID'/>
<meta content='xxxxx' name='Author'/>
<meta content='xxxxx' property='og:description'/>
<meta content='xxxxx' property='fb:app_id'/>
<meta content='xxxxx' property='fb:admins'/>
<meta content='xxxxx' name='twitter:site'/>
<meta content='xxxxx' name='twitter:creator'/>

Iklan di Postingan

Cari dan ganti tulisan ini

<!-- Kode Banner/Iklan Anda Di sini -->

dengan skrip kode iklan Anda :

Anda bisa memparse kode iklan disini HTML Converter.

&lt;div style=&quot;display:block;text-align:center;margin:20px auto;&quot;&gt;
<!-- Kode Banner/Iklan Anda Di sini -->
&lt;/div&gt;

Image Caption

New Light Template Documentation
Simplify Template Documentation

Widget Formulir Kontak dan Sitemap


Tambahkan kode di bawah ini di dalam postingan halaman statis

Silakan isi form di bawah ini untuk menghubungi admin. Jika tidak ada halangan dan kesibukan lainnya, admin akan langsung merespon pesan yang Anda kirimkan.

<form id="kontak-arlina" 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" size="30" placeholder="Email *" 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" />  
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
<style scoped="" type="text/css">
#comments,.post_meta,#blog-pager{display:none}
form{color:#666}
#kontak-arlina{margin:auto;max-width:640px}
#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{height:auto;margin:5px auto;padding:15px 12px;background:#fff;color:#444;border:1px solid rgba(0,0,0,.14);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;width:100%;min-width:100%;transition:all 0.5s ease-out}
#ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:15px 12px;background:#fff;color:#444;border:1px solid rgba(0,0,0,.14);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;resize:none;transition:all 0.5s ease-out}
#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border-color:#66afe9;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,0.6)}
#ContactForm1_contact-form-submit{float:left;background:#95a5a6;margin:auto;vertical-align:middle;cursor:pointer;padding:12px 20px;font-size:14px;text-align:center;letter-spacing:.5px;border:0;width:100%;max-width:140px;border-radius:3px;color:#fff;font-weight:500;transition:all .8s ease}
#ContactForm1_contact-form-submit:hover{background:#e74c3c;color:#fff;}
#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:35px}
.contact-form-error-message-with-border{background:#f6f6f6;border:none;box-shadow:none;color:#444;padding:5px 0}
.contact-form-success-message{background:#4fc3f7;border:none;box-shadow:none;color:#fff}
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%;}}
</style>

<div id='show-cat'>
</div>
<div id='show-post'>
<script type='text/javaScript'>
var cat_home='http://origin-btemplate.blogspot.com';cat_numb=11;cat_pre='Prev';cat_nex='Next';
var cat_name;var cat_start;var cat_class;
function show_post2(a){var tt=a.feed.openSearch$totalResults.$t;dw='';dw+='<ul>';for(var i=0;i<cat_numb&&i<a.feed.entry.length;i++){var entry=a.feed.entry[i];cat_title=entry.title.$t;for(var j=0;j<entry.link.length;j++){if(entry.link[j].rel=='alternate'){var cat_url=entry.link[j].href}}dw+='<li>';dw+=(cat_start+i)+'. <a href="'+cat_url+'" rel="nofollow" title="'+cat_title+'">'+cat_title+'</a>';dw+='</li>'}dw+='</ul>';dw+='<div id="navi-cat">';if(cat_start>1){dw+='<a href="" onclick="show_post(\''+cat_name+'\',\''+(cat_start-cat_numb)+'\',\''+cat_class+'\');return false" title="'+cat_pre+'">'+cat_pre+'</a>'}if((cat_start+cat_numb-1)<tt){dw+='<a href="" onclick="show_post(\''+cat_name+'\',\''+(cat_start+cat_numb)+'\',\''+cat_class+'\');return false" title="'+cat_nex+'">'+cat_nex+'</a>'}dw+='<span>'+cat_start;if(cat_start!=tt){dw+=' &ndash; '+(cat_start+i-1)}dw+=' / '+tt+'</span>';dw+='</div>';document.getElementById('show-post').innerHTML=dw+'<style type="text/css">.cat-'+cat_class+' a{background:#bbb!important;color:#fff!important}<\/style>'}function show_post(a,b,c){var d=document.getElementsByTagName('head')[0];e=document.createElement('script');e.type='text/javascript';e.setAttribute('src',cat_home+'/feeds/posts/default/-/'+a+'?alt=json-in-script&start-index='+b+'&max-results='+cat_numb+'&callback=show_post2');d.appendChild(e);cat_name=a;cat_start=parseInt(b),cat_class=c}function show_cat(a){var cat=a.feed.category;dw='';dw+='<ul>';for(var i=0;i<cat.length-1;i++){for(var j=i+1;j<cat.length;j++){if(cat[i].term>cat[j].term){cat_hv=cat[i].term;cat[i].term=cat[j].term;cat[j].term=cat_hv}}}for(var i=0;i<cat.length;i++){dw+='<li class="cat-'+i+'">';dw+='<a href="" onclick="show_post(\''+cat[i].term+'\',\'1\',\''+i+'\');return false" title="';dw+=cat[i].term;dw+='">';dw+=cat[i].term;dw+='</a>';dw+='</li>'}dw+='</ul>';document.getElementById('show-cat').innerHTML=dw}document.write('<script type="text/javascript" src="'+cat_home+'/feeds/posts/default?alt=json-in-script&max-results=0&callback=show_cat"><\/script>');
</script>
</div>
<style scoped="" type="text/css">
#show-cat{float:left;margin:20px 2% 20px 0;width:25%;height:389px;overflow-x:hidden;overflow-y:auto;line-height:normal;border:1px solid rgba(0,0,0,0.1)}
#show-cat ul{margin:0;border-top:0 solid rgba(0,0,0,0.1);padding:0}
#show-post ul li{list-style-type:none;margin:0 0 0 -25px;padding:10px 0;border-bottom:1px solid rgba(0,0,0,0.1)}
#show-post ul li:hover{margin-right:10px;border-color:#fcd3d3}
#show-cat ul li a{display:block;padding:10px;border-bottom:1px solid rgba(0,0,0,0.1);transition:initial}
#navi-cat a:hover{color:#fff!important}
#show-cat ul li:last-child a{border-bottom:none}
#show-cat ul li a,#navi-cat a{background:#fff;color:#555;font-weight:bold;text-decoration:none}
#show-cat ul li a,#navi-cat a,#navi-cat span{font-size:13px}
#show-cat ul li a:hover,#navi-cat a:hover{background:#666;color:#fff}
#show-post{float:left;width:69%;line-height:1.6em}
#show-post a{color:#333;font-size:14px}
#show-post a:hover{color:#f14b4b}
#navi-cat{padding:20px 0}
#navi-cat a{padding:5px 10px;background:rgba(0,0,0,0.7);margin:0 5px 0 0;color:#fff;border-radius:3px;}
#navi-cat a:nth-child(2){background:#f14b4b;margin:0 10px 0 0;color:#fff}
#navi-cat span{float:right;padding:5px 0;font-size:12px;color:rgba(0,0,0,0.5);font-weight:700}
#show-cat::-webkit-scrollbar{width:8px;height:8px}
#show-cat::-webkit-scrollbar-track{background-color:rgba(0,0,0,.1);}
#show-cat::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,.6)}
#show-cat::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.4);transition:all 400ms ease-in-out}
@media screen and (max-width:768px){#show-cat{width:35%}#show-post{width:59%}}
@media screen and (max-width:480px){#show-cat{width:100%;margin:20px 0}#show-post{width:100%}}
</style>

Ganti http://origin-btemplate.blogspot.com dengan URL blog Anda.