Simplify 2 Responsive Template Setting dan Installation

Description: Kali ini saya akan membagikan cara instalasi template atau cara setting template Simplify 2 Seo friendly milik Arlina Design, cara ini bisa Anda pakai bila Anda memakai template Simplify 2 ini. Anda bisa download template Simplify 2 ini dengan cara klik bacaan yang bewarna ini Klik. Langsung saja ke intinya yaitu settingan template Simplify 2.

Baca Juga :  Free Download Template Premium Simplify 2 SEO Friendly

Kali ini saya akan membagikan template yang original dan redesign versi saya dan saya sendiri yang mengubah tampilannya.

Installation

Langkah Pertama :
Login ke Blogger > Template > Cadangkan / Pulihkan > lalu pilih template yang mau Anda pakai, lalu klik Upload.

Info :
- Jangan lupa Anda backup template lama Anda, jika Anda memutuskan untuk menggunakannya kembali.

Customize Them

Langkah Pertama :
Silakan buka Blogger > Template > Edit HTML

Untuk memudahkan Anda mencari kode, Anda dapat mencarinya dengan cara Ctrl+F di keyboard.

Navigation
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
Ganti # dengan link Anda

<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 Social Link
Ganti tanda # dengan link milik 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
Cari tulisan Lostcips dengan keterangan blog Anda (Jika tidak diperlukan, hapus atau biarkan saja juga tidak apa-apa).

<meta content='Lostcips' 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='Lostcips' name='google-site-verification'/>

<meta content='Lostcips' name='msvalidate.01'/>

<meta content='Lostcips' name='alexaVerifyID'/>

<meta content='Lostcips' name='Author'/>

<meta content='Lostcips' property='og:description'/>

<meta content='Lostcips' property='fb:app_id'/>

<meta content='Lostcips' property='fb:admins'/>

<meta content='Lostcips' name='twitter:site'/>

<meta content='Lostcips' name='twitter:creator'/>

Iklan di Postingan
Cari dan ganti tulisan di bawah ini dengan script kode iklan Anda

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

Widget Formulir Kontak dan Sitemap
Tambahkan kode dibawah ini didalam postingan halaman statis tepatnya di samping Compose yaitu HTML.
Formulir Kontak :

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-lostcips" 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-lostcips{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>

Sitemap :

<div id='show-cat'>

</div>

<div id='show-post'>

<script type='text/javaScript'>

var cat_home='
http://www.lostcips.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>

Info :
- Ganti http://www.lostcips.com dengan URL milik Anda. Widget Recent Post With Thumbnail
Tambahkan kode dibawah ini didalam sidebar widget

<style scoped='' type='text/css'>

ul.recent_posts_arlina li{display:inline-block;position:relative;width:100%;margin:0;padding:10px 0;transition:all .3s linear;}

ul.recent_posts_arlina li:last-child {border:0;}

.recent_posts_arlina .wrapinfo{display:inline-block;margin:0 10px 0 0;overflow:hidden;z-index:2;position:relative;width:90px;height:62px;float:left}

ul.recent_posts_arlina li img.recent_thumb{width:100%;height:auto}

.recent_posts_arlina {float:left;width:100%;margin:10px 10px 5px 0px;padding:0;font-size:.9rem;}

ul.recent_posts_arlina li a{color:#2b427d;font-size:13px;font-weight:700;line-height:normal}

ul.recent_posts_arlina li a:hover{color:#138be6}

.recent_posts_arlina i{font-style:normal;color:#999;font-size:13px}

</style>

<script style='text/javascript' src='https://cdn.rawgit.com/Arlina-Design/FlamingTree/master/recentpostarlina.js'></script>

<script style='text/javascript'>

var numposts=5,showpostthumbnails=!0,displaymore=!1,displayseparator=!1,showcommentnum=!1,showpostdate=!1,showpostsummary=!1,numchars=62;

</script>

<script src='/feeds/posts/default?orderby=published&alt=json-in-script&callback=recentpostinfoarlina'></script>

Page Navigation
Cari dan ganti angka 7 pada kode postperpage=7 dengan jumlah post yang ingin Anda tampilkan ditiap halaman.

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

Author Box dibawah Postingan
Ganti tanda # dengan url social media Anda, dan ganti juga <data:post.authorAboutMe/> dengan deskripsi pembuat blog.

<div class='authorboxwrap'>

<div class='authorboxfull'>

<div class='avatar-container'>

<a href=''>

<img class='author_avatar' expr:alt='data:post.author' expr:src='data:post.authorPhoto.url' expr:title='data:post.author' height='90' width='90'/>

</a>

</div>

<div class='author_description_container'>

<h4><a href='#' rel='author'><data:post.author/></a> <i class='fa fa-check-circle' style='color:#3498db;font-size:16px;margin:0 0 0 3px' title='Verified Author'/></h4>

<p>

<data:post.authorAboutMe/>       

</p>

<div class='social-links'>

<li><a class='external external-link' href='#' rel='nofollow' target='_blank'><i class='fa fa-facebook'/></a></li>

<li><a class='external external-link' href='#' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a></li>

<li><a class='external external-link' href='#' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/></a></li>

<div class='clear'/>

</div>

</div>

</div>

</div>

Shortcodes

Youtube Respinsive Video
Gunakan kode ini untuk embed youtube video responsive.

<div class="videoyoutube">

<div class="video-responsive">

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

</div>

</div>

</div>

Info :
- Ganti tulisan yang di tandai dengan URL video youtube Anda. Drop Caps

<span class="first-letter">Your First Letter here</span>

Button

<div style="text-align: center;">

<ul class="button">

<li><a class="demo" href="http://www.lostcips.com/" target="_blank">DEMO</a></li>

<li><a class="download" href="http://www.lostcips.com/" target="_blank">DOWNLOAD</a></li>

</ul>

</div>

<div class="clear"></div>

Membagikan konten post menjadi dua kolom

<div class="bagidua">

--- Konten Anda disini ---

</div>

Membagikan konten post menjadi tiga kolom

<div class="bagitiga">

--- Konten Anda disini ---

</div>

Membagikan konten post menjadi empat kolom

<div class="bagiempat">

--- Konten Anda disini ---

</div>

Membuat Tabel di Postingan

<table cellpadding="0" cellspacing="0" style="text-align: left;">

    <tbody>

        <tr>

            <th>Table Header 1</th>

            <th>Table Header 2</th>

            <th>Table Header 3</th>

        </tr>

        <tr>

            <td>Division 1</td>

            <td>Division 2</td>

            <td>Division 3</td>

        </tr>

        <tr>

            <td>Division 1</td>

            <td>Division 2</td>

            <td>Division 3</td>

        </tr>

        <tr>

            <td>Division 1</td>

            <td>Division 2</td>

            <td>Division 3</td>

        </tr>

    </tbody>

</table>

Catatan :
- Nonaktifkan tampilan khusus mobile
Nonaktifkan versi mobile pada template Simplify 2, Template > Tombol Gear > Pilih Tidak.

Sekian untuk dokumentasi template Simplify 2, jika ada kesulitan lain jangan segan untuk bertanya lewat formulir kontak blog Lostcips, atau bisa lewat comment dibawah. Terimakasih telah berkunjung ke blog saya, sampai jumpa di artikel selanjutnya.