Created: 05/10/2015
Invert is a clean Blogger template with Responsive layout and suited for all blog. It's design with simple color combination, clean and modern look, SEO Optimized, and has been built by using some of the most popular current design trends.
Silakan buka Blogger > Template > "Edit HTML"
Cari dan ganti semua kode ini # dengan tulisan Anda.
Top Navigation :<div class='topmein-wrapper'> <div class='invertnew-wrapper clearfix'> <nav class='main-navigation'> <ul> <li><a expr:href='data:blog.homepageUrl'>Home</a></li> <li><a href='#' title='Tentang Blog'>Tentang</a></li> <li><a href='#' title='Formulir Kontak'>Kontak</a></li> <li><a href='#' title='Daftar Isi'>Daftar Isi</a></li> <li class='searchbutton' title='Cari artikel'/> <li class='socright'><a href='#' rel='nofollow' target='_blank' title='Gabung di blog ini'><i class='fa fa-plus'/><span class='inv'/></a></li> <li class='socright'><a href='#' rel='nofollow' target='_blank' title='Ikuti lewat Google+'><i class='fa fa-google-plus'/><span class='inv'/></a></li> <li class='socright'><a href='#' rel='nofollow' target='_blank' title='Ikuti lewat Facebook'><i class='fa fa-facebook'/><span class='inv'/></a></li> <li class='socright'><a href='#' rel='nofollow' target='_blank' title='Ikuti lewat Twitter'><i class='fa fa-twitter'/><span class='inv'/></a></li> <li class='menu' title='Menu'/> </ul> <a href='#' id='pull'>Menu</a> </nav> </div> </div>Main Navigation :
<nav id='navigationz' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'> <label id='toogle2'>Menu</label> <ul class=''> <li><a class='current' href='/'><span itemprop='name'>Home</span></a></li> <li><a href='#' itemprop='url'><span itemprop='name'>Advertise</span></a></li> <li><a href='#' itemprop='url'><span itemprop='name'>Blogger</span></a></li> <li><a href='#' itemprop='url'><span itemprop='name'>Internet</span></a></li> <li><a href='#' itemprop='url'><span itemprop='name'>Software</span></a></li> <li><a href='/error404' itemprop='url'><span itemprop='name'>Error 404</span></a></li> <li><a href='#' itemprop='url'><span itemprop='name'>Lainnya</span></a> <ul> <li><a href='#' itemprop='url'><span itemprop='name'>HTML5</span></a></li> <li><a href='#' itemprop='url'><span itemprop='name'>JavaScript</span></a></li> <li><a href='#' itemprop='url'><span itemprop='name'>Mobile</span></a></li> <li><a href='#' itemprop='url'><span itemprop='name'>SEO Friendly</span></a></li> <li><a href='#' itemprop='url'><span itemprop='name'>Search Console</span></a></li> </ul> </li> <li class='menuright satu'><a href='#' rel='nofollow' target='_blank' title='Join Our Site'><i class='fa fa-plus'/><span class='inv'>Login</span></a></li> <li class='menuright dua'><a href='#' target='_blank' title='Member'><i class='fa fa-user'/><span class='inv'>Member</span></a></li> </ul> </nav>Page Navigation :
Cari kode postperpage=8, dan ganti dengan jumlah artikel yang akan ditampilkan
var pageNaviConf = {
var postperpage=8;var numshowpage=3;var upPageWord ='Prev';var downPageWord ='Next';var urlactivepage=location.href;var home_page="/";
Buka Blogger, Template, "Edit HTML"
Cari dan ganti semua tulisan xxxxx dengan tulisan Anda.
<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'/>
Cari dan ganti tulisan http://nukituwelah.blogspot.com/ dengan alamat blog Anda.
<script type='application/ld+json'>{ "@context": "http://schema.org", "@type": "WebSite", "url": "http://nukituwelah.blogspot.com/", "potentialAction": { "@type": "SearchAction", "target": "http://nukituwelah.blogspot.com/?q={search_term}", "query-input": "required name=search_term" } }</script>
Cari dan ganti tulisan di dalam kode ini dengan keterangan Anda.
<div class='author-box' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'><img alt='Invert' class='avatar' height='100' src='http://2.bp.blogspot.com/-gT6Vhwp0FlA/VdhLB_ivO0I/AAAAAAAAC1g/u3ysrQVvxig/s1600/Invert%2BPro.png' title='Invert' width='100'/><h4 class='author-box-title'>About <span itemprop='name'>Invert</span></h4><div class='author-box-content' itemprop='description'><p>Invert adalah versi lain dari template Invert Pro dan Invert Grid yang sudah mendukung fitur responsive dan SEO Friendly.</p></div></div>Subscribe Box
Ganti semua tulisan Invertbaru dengan nama email subscribe Anda.
<div id='subscribe-box'>
<h4>Subscribe via email</h4>
<p>Suka dengan artikel di atas? Tambahkan email Anda untuk berlangganan.</p>
<div class='emailfield'>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=invertbaru', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input name='email' onblur='if (this.value == "") {this.value = "Alamat Email";}' onfocus='if (this.value == "Alamat Email") {this.value = "";}' type='text' value='Alamat Email'/>
<input name='uri' type='hidden' value='invertbaru'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='submitbutton' type='submit' value='Submit'/>
</form>
</div>
</div>
Pesan Komentar
Buka setelan > Klik Pos dan komentar > Tambahkan kode di bawah ini di dalam kolom Pesan formulir komentar.
Untuk menyisipkan kode pendek, gunakan <i rel="code"> ... KODE ... </i> Untuk menyisipkan kode panjang, gunakan <i rel="pre"> ... KODE ... </i> Untuk menyisipkan gambar, gunakan <i rel="image"> ... URL GAMBAR ... </i>
Buat post di halaman statis, kemudian terapkan kode di bawah ini pada tab HTML. Catatan : Jika sudah menambahkan kode ini, disarankan untuk tidak menggunakan mode Compose di halaman Pos ini.
<form name="contact-form">
Name
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
Email Address <span style="color: #f56954; font-size: x-small; font-weight: bold;">important</span>
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
Content <span style="color: #f56954; font-size: x-small; font-weight: bold;">important</span>
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Send" />
<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;}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{
height:auto;margin:5px auto;padding:10px;background:#fafafa;color:#444;border:1px solid #ccc;border-radius:3px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;transition:all 0.5s ease-out;}
#ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:10px;background:#fafafa;color:#444;border:1px solid #ccc;border-radius:3px;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:rgba(81,203,238,1);box-shadow:0 0 5px rgba(81,203,238,0.7);}
#ContactForm1_contact-form-submit{float:left;background:#cf4d35;color:#fff;margin:10px auto;vertical-align:middle;cursor:pointer;padding:10px 18px!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:.5px;border-radius:4px;border:0;transition:all .8s ease}
#ContactForm1_contact-form-submit:hover {background:#e45a40;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>
About Me
Ganti tulisan dan tanda # dengan link.
<div class='aboutpro-img'> <img alt='Author' class='img-responsive' height='320' src='http://1.bp.blogspot.com/-IUuecD7kKak/VhA_uRK9wnI/AAAAAAAADHU/WmnZ37ebHAw/s1600/about.jpg' title='Author' width='320'/> </div> </div> <div class='aboutpro-info'> <h4>About me</h4> <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.</p> </div> <div class='aboutpro-wrapicon'> <ul class='extender'> <li class='aboutpro-icon'><a href='#' rel='nofollow' target='_blank' title='Facebook'><i class='fa fa-facebook'/></a></li> <li class='aboutpro-icon'><a href='#' rel='nofollow' target='_blank' title='Twitter'><i class='fa fa-twitter'/></a></li> <li class='aboutpro-icon'><a href='#' rel='nofollow' target='_blank' title='Google+'><i class='fa fa-google-plus'/></a></li> <li class='aboutpro-icon'><a href='#' rel='nofollow' target='_blank' title='Linkedin'><i class='fa fa-linkedin'/></a></li> <li class='aboutpro-icon'><a href='#' rel='nofollow' target='_blank' title='RSS'><i class='fa fa-rss'/></a></li> </ul> </div>Recent Comments Widget
Tambahkan kode di bawah di dalam widget kosong.
<style scoped='' type="text/css">
#HTML95 .widget-content {max-height:400px;overflow:auto;}
ul.arlinacomments{list-style:none;margin:0;padding:0}.arlinacomments li{display:block;clear:both;overflow:hidden;list-style:none;border-bottom:1px solid #e3e3e3;word-break:break-all;padding:10px 0;margin:0;}.arlinacomments li .avatarImage{float:left;margin-right:10px;position:relative;overflow:hidden}.arlinacomments li img{position:relative;overflow:hidden;display:block;width:42px;height:42px}.arlinacomments li a{font-weight:700}.arlinacomments li span{margin-top:2px;color:#666;display:block;font-size:12px;line-height:1.4}
</style>
<script type="text/javascript">
//<![CDATA[
// Recent Comments
function arlinacomments(a){var e;e='<ul class="arlinacomments">';for(var t=0;numComments>t;t++){var r,o,n,i;if(t==a.feed.entry.length)break;e+="<li>";for(var d=a.feed.entry[t],s=0;s<d.link.length;s++)"alternate"==d.link[s].rel&&(r=d.link[s].href);for(var l=0;l<d.author.length;l++)o=d.author[l].name.$t,n=d.author[l].gd$image.src;n=-1!=n.indexOf("/s1600/")?n.replace("/s1600/","/s"+avatarSize+"-c/"):-1!=n.indexOf("/s220/")?n.replace("/s220/","/s"+avatarSize+"-c/"):-1!=n.indexOf("/s512-c/")&&0!=n.indexOf("http:")?"http:"+n.replace("/s512-c/","/s"+avatarSize+"-c/"):-1!=n.indexOf("blogblog.com/img/b16-rounded.gif")?"http://1.bp.blogspot.com/-7bkcAKdpGXI/UrbyQRqvSKI/AAAAAAAAFmI/oBv_yMeYnMQ/s"+avatarSize+"/blogger.png":-1!=n.indexOf("blogblog.com/img/openid16-rounded.gif")?"http://2.bp.blogspot.com/-VgnInuIUKBU/UrbzyXTYWRI/AAAAAAAAFmU/3f_Vfj3TI6A/s"+avatarSize+"/openid.png":-1!=n.indexOf("blogblog.com/img/blank.gif")?-1!=defaultAvatar.indexOf("gravatar.com")?defaultAvatar+"&s="+avatarSize:defaultAvatar:n,1==showAvatar&&(i=1==roundAvatar?"avatarRound":"",e+='<div class="avatarImage '+i+'"><img class="'+i+'" src="'+n+'" alt="'+o+'" width="'+avatarSize+'" height="'+avatarSize+'"/></div>'),e+='<a href="'+r+'">'+o+"</a>";var A=d.content.$t,v=A.replace(/(<([^>]+)>)/gi,"");""!=v&&v.length>characters?(v=v.substring(0,characters),v+="…",1==showMorelink&&(v+='<a href="'+r+'">'+moreLinktext+"</a>")):v=v,e+="<span>"+v+"</span>",e+="</li>"}e+="</ul>";var c="";0==hideCredits&&(c="display:block;"),e+="",document.write(e)}var numComments=15,showAvatar=!0,avatarSize=42,roundAvatar=!0,characters=40,showMorelink=!1,defaultAvatar="http://2.bp.blogspot.com/-XjxrXKBPQqs/VYcGtLWPGUI/AAAAAAAAKaQ/5jr871JIwds/s1600/default-avatar.jpg",hideCredits=!0,numComments=numComments||5,avatarSize=avatarSize||60,characters=characters||40,defaultAvatar=defaultAvatar||"http://4.bp.blogspot.com/-SRSVCXNxbAc/UrbxxXd06YI/AAAAAAAAFl4/332qncR9pD4/s1600/default-avatar.jpg",moreLinktext=moreLinktext||" More »",showAvatar="undefined"==typeof showAvatar?!0:showAvatar,showMorelink="undefined"==typeof showMorelink?!1:showMorelink,roundAvatar="undefined"==typeof roundAvatar?!0:roundAvatar,hideCredits="undefined"==typeof hideCredits?!1:roundAvatar;
//]]>
</script>
<script type="text/javascript" src="/feeds/comments/default?alt=json&callback=arlinacomments&max-results=15"></script>
Recent Posts Widget
Tambahkan kode di bawah di dalam widget kosong.
<script> var arlina_thumbs_wid = 300; var arlina_thumbs_hei = 170; var arlina_title = true; </script> <script src="/feeds/posts/summary?max-results=3&alt=json-in-script&callback=arlinagrid"></script>Ad Banner HTML
Di Tata Letak tambah widget baru, Kemudian terapkan kode di bawah ini.
Banner 970x90.
<div class='kotak_iklan3'> <a href='#' target='_blank' title='ADS-DESCRIPTION'><img alt='iklan banner' height='90' src='IMAGE-URL' title='ADS-DESCRIPTION' width='970'/></a> </div>
<span class="first-letter">Your First Letter here</span>Blockquote
Untuk membuat Blockquote cukup pilih semua teks yang Anda ingin menjadi Kutipan dan klik pada icon Kutipan dari posting blog panel editor teks.
ButtonsMenambahkan demo dan download button.
<div style="text-align: center;"> <ul class="button"> <li><a class="demo" href="YOUR-LINK-HERE" target="_blank">DEMO</a></li> <li><a class="download" href=" YOUR-LINK-HERE" target="_blank">DOWNLOAD</a></li> </ul> </div> <div class="clear"></div>Spoiler
<div id="flippy"><button>Spoiler</button></div> <div id="flippanel"> --- TAMBAHKAN KONTEN DISINI --- </div>Membagi konten post menjadi tiga
<div class="bagitiga"> --- TAMBAHKAN KONTEN DISINI --- </div>Memasang Table 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>
Nonaktifkan versi mobile pada template ini, silakan klik Template > Tombol Gear > Pilih Tidak.
Oke cukup sekian, jika ada kesulitan lain jangan segan untuk bertanya lewat formulir kontak blog Arlina Design. Terima kasih.