Created: 31/08/2015
Invert Grid is a Blogger template with Responsive grid 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 :<nav class='main-nav'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact</a></li>
<li><a href='#'>Sitemap</a></li>
<li><a href='#'>Disclaimer</a></li>
<li class='socright'>
<a href='#' rel='nofollow' target='_blank'><i class='fa fa-pinterest'/><span class='inv'/></a>
</li>
<li class='socright'>
<a href='#' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/><span class='inv'/></a>
</li>
<li class='socright'>
<a href='#' rel='nofollow' target='_blank'><i class='fa fa-facebook'/><span class='inv'/></a>
</li>
<li class='socright'>
<a href='#' rel='nofollow' target='_blank'><i class='fa fa-instagram'/><span class='inv'/></a>
</li>
<li class='socright'>
<a href='#' rel='nofollow' target='_blank'><i class='fa fa-twitter'/><span class='inv'/></a>
</li>
<li class='menu' title='Menu'/>
</ul>
<a href='#' id='pull'>Menu</a>
</nav>
Main Navigation :
<nav id='navigasi' 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> <ul> <li><a href='#' itemprop='url' rel='nofollow' target='_blank'><span itemprop='name'>Google+</span></a></li> <li><a href='#' itemprop='url' rel='nofollow' target='_blank'><span itemprop='name'>Facebook</span></a></li> <li><a href='#' itemprop='url' rel='nofollow' target='_blank'><span itemprop='name'>Twitter</span></a></li> </ul> </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'>CSS</span></a></li> <li><a href='#' itemprop='url'><span itemprop='name'>JavaScript</span></a></li> <li><a href='#' itemprop='url'><span itemprop='name'>Internet</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'>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><a href='#' itemprop='url'><span itemprop='name'>Software</span></a></li> <li><a href='#' itemprop='url'><span itemprop='name'>Template</span></a></li> <li><a href='#' itemprop='url'><span itemprop='name'>Error 404</span></a></li> </ul> </nav>Page Navigation :
Cari kode perPage: 6, dan ganti dengan jumlah artikel yang akan ditampilkan
var pageNaviConf = {
perPage: 6,
numPages: 3,
firstText: "First",
lastText: "Last",
nextText: "Next",
prevText: "Prev"
}
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://invertgrid.blogspot.com/ dengan alamat blog Anda.
<script type='application/ld+json'>{ "@context": "http://schema.org", "@type": "WebSite", "url": "http://invertgrid.blogspot.com/", "potentialAction": { "@type": "SearchAction", "target": "http://invertgrid.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 Grid' class='avatar' height='100' src='http://2.bp.blogspot.com/-gT6Vhwp0FlA/VdhLB_ivO0I/AAAAAAAAC1g/u3ysrQVvxig/s1600/Invert%2BPro.png' title='Invert Grid' width='100'/><h4 class='author-box-title'>About <span itemprop='name'>Invert Grid</span></h4><div class='author-box-content' itemprop='description'><p>Invert Grid is a responsive and SEO Friendly blogger template.</p></div></div>Subscribe Box
Ganti semua tulisan InvertGrid dengan nama email subscribe Anda.
<div id='subscribe-box'>
<h4>Subscribe via email</h4>
<p>Like the post above? Please subscribe to the latest posts directly via email.</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=InvertGrid', '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='InvertGrid'/>
<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">
<span> Name </span>
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
<span> Email Address <span style="color: #f56954; font-size: x-small; font-weight: bold;">important</span></span>
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
<span> Content <span style="color: #f56954; font-size: x-small; font-weight: bold;">important</span></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>
Carousel Slider
Buka template > Edit HTML > Cari dan ganti tulisan Kategori dengan nama label.
cat1 = 'Kategori';
Untuk menonaktifkan fungsi slider otomatis, silakan buka template > Edit HTML > Cari dan ganti tulisan autoPlay:true dengan autoPlay:false.
Social LinksGanti tanda # dengan link.
<div class='invert-socials-icon mom-socials-widget'>
<ul>
<li class='facebook'><a href='#' rel='nofollow' target='_blank' title='Follow us on Facebook'><i class='fa fa-facebook'/></a></li>
<li class='twitter'><a href='#' rel='nofollow' target='_blank' title='Follow us on Twitter'><i class='fa fa-twitter'/></a></li>
<li class='googleplus'><a href='#' rel='nofollow' target='_blank' title='Follow us on Google+'><i class='fa fa-google-plus'/></a></li>
<li class='rss'><a href='#' rel='nofollow' target='_blank' title='Follow us on RSS'><i class='fa fa-rss '/></a></li>
<li class='youtube'><a href='#' rel='nofollow' target='_blank' title='Follow us on Youtube'><i class='fa fa-youtube '/></a></li>
<li class='dribbble'><a href='#' rel='nofollow' target='_blank' title='Follow us on Dribble'><i class='fa fa-dribbble '/></a></li>
<li class='deviantart'><a href='#' rel='nofollow' target='_blank' title='Follow us on DeviantArt'><i class='fa fa-deviantart'/></a></li>
<li class='pinterest'><a href='#' rel='nofollow' target='_blank' title='Follow us on Pinterest'><i class='fa fa-pinterest '/></a></li>
<li class='instgram'><a href='#' rel='nofollow' target='_blank' title='Follow us on Instagram'><i class='fa fa-instagram '/></a></li>
<li class='tumblr'><a href='#' rel='nofollow' target='_blank' title='Follow us on Tumblr'><i class='fa fa-tumblr '/></a></li>
<li class='linkedin'><a href='#' rel='nofollow' target='_blank' title='Follow us on LinkedIn'><i class='fa fa-linkedin '/></a></li>
<li class='soundcloud'><a href='#' rel='nofollow' target='_blank' title='Follow us on Soundcloud'><i class='fa fa-soundcloud '/></a></li>
<li class='delicious'><a href='#' rel='nofollow' target='_blank' title='Follow us on Delicious'><i class='fa fa-delicious '/></a></li>
<li class='flickr'><a href='#' rel='nofollow' target='_blank' title='Follow us on Flickr'><i class='fa fa-flickr '/></a></li>
</ul>
</div>
Search Box di Header
Klik tata letak, klik widget kosong di bagian header kanan, kemudian salin semua kode di bawah ini.
<div id="search-box">
<form action="/search" id="cse-search-box" method="get">
<input id="search-text" name="q" onblur="if (this.placeholder == "") {this.placeholder = "Cari artikel...";}" onfocus="if (this.value == "Cari disini..") {this.value = ""}" placeholder="Cari artikel..." type="text" />
<button id="search-button" type="submit"></button>
</form>
</div>
Recent Comments Widget
Tambahkan kode di bawah di dalam widget kosong.
<style scoped='' type="text/css">
#HTML4 .widget-content {max-height:300px;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>
Random Posts Widget
Tambahkan kode di bawah di dalam widget kosong. Ganti http://invertgrid.blogspot.com dengan url blog Anda.
<div id='twisted-random'>Memuat...</div>
<script>
//<![CDATA[
// Random Post Widget
var homePage = 'http://invertgrid.blogspot.com',
maxResults = 5,
containerId = 'twisted-random';
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function shuffleArray(arr) {
var i = arr.length, j, temp;
if (i === 0) return false;
while (--i) {
j = Math.floor(Math.random() * (i + 1));
temp = arr[i];
arr[i] = arr[j];
arr[j] = temp;
}
return arr;
}
function TwistedRandomPosts(json) {
var startIndex = getRandomInt(1, (json.feed.openSearch$totalResults.$t - maxResults));
// console.log('Get the post feed start from ' + startIndex + ' until ' + (startIndex + maxResults));
document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&orderby=updated&start-index=' + startIndex + '&max-results=' + maxResults + '&callback=randomPosts"></scr' + 'ipt>');
}
function randomPosts(json) {
var link, ct = document.getElementById(containerId),
entry = shuffleArray(json.feed.entry),
skeleton = "<ul>";
for (var i = 0, len = entry.length; i < len; i++) {
for (var j = 0, jen = entry[i].link.length; j < jen; j++) {
link = (entry[i].link[j].rel == "alternate") ? entry[i].link[j].href : '#';
}
skeleton += '<li><a href="' + link + '">' + entry[i].title.$t + '</a></li>';
}
ct.innerHTML = skeleton + '</ul>';
}
document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&max-results=0&callback=TwistedRandomPosts"></scr' + 'ipt>');
//]]>
</script>
Recent Posts Widget
Tambahkan kode di bawah di dalam widget kosong.
<script> var arlina_thumbs = 73; var arlina_title = true; </script> <script src="/feeds/posts/summary?max-results=6&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.