Template Evo Magz Redesign Simpel, Clean, Fast Loading dan Keren
Template evo magz adalah template yang lumayan terkenal dan digunakan oleh banyak blogger. Dulunya template ini premium tapi entah kenapa sekarang jadi banyak yang membagikan gratis. Karena dibagikan gratis sehingga saya download dan saya redesign kembali agar terkesan clean namun tetap elegan bin keren.
Ini adalah template yang pertama kali saya redesign untuk kategori publik. Jadi mungkin saja masih ada beberapa kode yang belum optimal. Ya mudah-mudahan nanti kedepannya kalau pengen, saya update lagi. Supaya terlihat simpel namun tetap keren (sok jago luh min :D).
Langsung saja ke template evo magznya, untuk fitur tidak jauh beda dari fitur yang asli hanya ada beberapa tambahan. Tambahan fiturnya yaitu:
Bukti bahwa template ini fast loading, silahkan kamu test melalui page speed. Jika kamu mengetesnya tidak ijo semua coba perhatikan di saran pengoptimalan, jika terdapat masalah respon server silahkan tes menggunakan link http bukan https.
Untuk demonya kamu bisa lihat langsung disini:
1. Menambah widget badge author ala kompiajaib
Tambahkan widget baru melalui tata letak > pilih HTML/Javascript dan tambahkan kode berikut:
Keterangan:
+ProfilUnikAnda,Pemulung Jalanan,Username: Isi sesuai sosial media kamu. 7038834487009319273: Isi dengan ID blog URL%20FEEDBURNER%20BLOG%20ANDA: Isi dengan URL feedburner blog
Ganti 8768650571000140910 dengan ID blog dan warna hijau dengan url blog.
Kemudian untuk mengganti alamat tempatnya digoogle map, cari kode -5.130053, 119.493301. Ganti dengan kode latitude dan longitude tempat kamu. Untuk mendapatkannya silahkan klik kanan pada lokasinya di Google Maps lalu klik What's here? maka akan muncul sebuah kotak di bagian bawah.
Sekian template redesaign evomagz yang tampil clean namun tetap keren semoga bermanfaat.
Update:
Versi 1.1 = 16/12/2018
Sumber kode: kompiajaib
Ini adalah template yang pertama kali saya redesign untuk kategori publik. Jadi mungkin saja masih ada beberapa kode yang belum optimal. Ya mudah-mudahan nanti kedepannya kalau pengen, saya update lagi. Supaya terlihat simpel namun tetap keren (sok jago luh min :D).
Langsung saja ke template evo magznya, untuk fitur tidak jauh beda dari fitur yang asli hanya ada beberapa tambahan. Tambahan fiturnya yaitu:
- Mengubah sosial share menjadi fixed show hide
- Kostumisasi halaman sitemap
- Mengubah pencarian menjadi floating box
- Mengubah tampilan artikel terkait
- Penambahan widget badge author
- Menambah menu contact dalam bentuk popup
- Mengoptimalkan kecepatan blog
- Semua gambar sudah menggunakan CDN Staticaly
- Sistem komentar disqus on load
 |
| Tampilan Halaman Postingan |
 |
| Tampilan Halaman Beranda |
Bukti bahwa template ini fast loading, silahkan kamu test melalui page speed. Jika kamu mengetesnya tidak ijo semua coba perhatikan di saran pengoptimalan, jika terdapat masalah respon server silahkan tes menggunakan link http bukan https.
Untuk demonya kamu bisa lihat langsung disini:
Pengaturan template
1. Menambah widget badge author ala kompiajaib
Tambahkan widget baru melalui tata letak > pilih HTML/Javascript dan tambahkan kode berikut:<div class="authorbox">
<div style="text-align: center;">
<h3 class="author-title">
Author
</h3>
</div>
<img alt="author" data-src="https://lh3.googleusercontent.com/-HjyAGr4_z9I/AAAAAAAAAAI/AAAAAAAAAFg/LyS75S1UmKk/s60-p-no/photo.jpg" height="120" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" width="120" />
<a class="authorname" href="https://plus.google.com/+ProfilUnikAnda" rel="author" target="_blank" title="Nama Profil G+ Anda">Pemulung Jalanan</a>
<a class="authorname-url" href="https://plus.google.com/+ProfilUnikAnda" rel="author" target="_blank" title="google.com/108895097574769873193">google.com/+ProfilUnikAnda</a>
<br />
<div class="sosmed-author">
<ul>
<li><a href="https://www.facebook.com/Username" rel="nofollow" target="_blank" title="Facebook"><i aria-hidden="true" class="fa fa-facebook-square fa-2x"></i></a></li>
<li><a href="https://twitter.com/Username" rel="nofollow" target="_blank" title="Twitter"><i aria-hidden="true" class="fa fa-twitter-square fa-2x"></i></a></li>
<li><a href="https://www.google.com/+Username" rel="nofollow" target="_blank" title="Google+"><i aria-hidden="true" class="fa fa-google-plus-square fa-2x"></i></a></li>
<li><a href="https://www.youtube.com/c/Username" rel="nofollow" target="_blank" title="Youtube"><i aria-hidden="true" class="fa fa-youtube-square fa-2x"></i></a></li>
<li><a href="https://www.linkedin.com/in/Username" rel="nofollow" target="_blank" title="LinkedIn"><i aria-hidden="true" class="fa fa-linkedin-square fa-2x"></i></a></li>
<li><a href="https://www.instagram.com/Username/" rel="nofollow" target="_blank" title="Instagram"><i aria-hidden="true" class="fa fa-instagram fa-2x"></i></a></li>
</ul>
<div class="clear">
</div>
<a class="button-author" href="https://www.blogger.com/follow.g?view=FOLLOW&blogID=7038834487009319273" target="_blank" title="Follow This Blog">Follow This Blog</a>
<a class="button-author" href="https://www.blogger.com/URL%20FEEDBURNER%20BLOG%20ANDA" rel="nofollow" target="_blank" title="Subscribe This Blog">Subscribe This Blog <i aria-hidden="true" class="fa fa-paper-plane"></i></a>
</div>
</div>
Keterangan:
+ProfilUnikAnda,Pemulung Jalanan,Username: Isi sesuai sosial media kamu. 7038834487009319273: Isi dengan ID blog URL%20FEEDBURNER%20BLOG%20ANDA: Isi dengan URL feedburner blog
2. Custom halaman sitemap
Tambahkan kode ini di halaman baru dalam mode compose:<div id="sitemap-blog">
<table>
<tbody>
<tr>
<td><label for="feed-order">Urutkan artikel berdasarkan:</label>
</td>
<td><select id="feed-order">
<option selected="" value="published">Artikel terbaru</option>
<option value="updated">Artikel yang terakhir di update</option>
</select>
</td>
</tr>
<tr>
<td><label for="label-sorter">Filter artikel berdasarkan kategori:</label>
</td>
<td><select disabled="" id="label-sorter">
<option selected="">Loading....</option>
</select>
</td>
</tr>
<tr>
<td><label for="feed-q">Cari artikel dengan kata kunci:</label>
</td>
<td><form id="post-searcher">
<input id="feed-q" placeholder="Ketik dan tekan ENTER" type="text" />
</form>
</td>
</tr>
</tbody>
</table>
</div>
<br />
<br />
<header id="result-desc"></header>
<br />
<ul id="daftar-isi-blog"></ul>
<div id="feed-nav">
</div>
<script type="text/javascript">
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
var css = '#sitemap-blog{padding:7px 10px;margin:0 auto}#sitemap-blog table{width:auto;margin:0 auto;border:none!important}#sitemap-blog table td{border:none!important;padding:0!important}#sitemap-blog form{font:inherit}#sitemap-blog label{display:block;text-align:right;margin:0 10px 0 0;padding:4px 0 0}#sitemap-blog select[disabled]{opacity:.4}#post-searcher{display:block;margin:0;padding:0}#sitemap-blog input,#sitemap-blog select{width:100%;border:1px solid #dedede;border-radius:5px;margin:0;padding:5px;font-family:Roboto,sans-serif!important;font-size:16px!important;font-weight:500!important;text-transform:capitalize!important;outline:0;color:#333!important;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}#sitemap-blog select option{min-height:1.4em!important}#sitemap-blog input#feed-q{padding:5px 10px!important}#daftar-isi-blog{background:#fff;display:block;clear:both;margin:0;padding:0;list-style:none;overflow:hidden;position:relative;border-top:none}#daftar-isi-blog li{list-style:none;margin:0;padding:0;border-top:1px solid #eee;color:#555;width:auto;float:left;display:inline}#daftar-isi-blog li .inner{margin:15px 0;height:auto;overflow:hidden;word-wrap:break-word;text-overflow:ellipsis}#daftar-isi-blog li a{text-decoration:none;color:#2C2C2C;font-weight:500}#daftar-isi-blog li a:hover{text-decoration:none;color:#E94141}#daftar-isi-blog li .news-text{margin-top:5px;line-height:1.3em!important}#daftar-isi-blog li img{margin:0 15px 5px 0;padding:7px 7px 7px 0;float:left;display:block;width:140px!important}#result-desc{margin:0;padding:0}#result-desc div,#result-desc span{display:block;margin:0;padding:5px 0 7px;color:#D64D52}#result-desc div{color:inherit}#feed-nav{margin:10px 0 30px;text-align:center;font-weight:500}#feed-nav a,#feed-nav span{border:1px solid #dedede;border-radius:5px;padding:0;color:#757575;text-decoration:none;display:block;height:30px;line-height:32px}#feed-nav a,#feed-nav span:hover{color:#1B1B1B}#feed-nav a:active,#feed-nav a:hover{color:#555}#feed-nav span{cursor:wait}@media (max-width:600px){#sitemap-blog table{margin:0 auto;width:100%}#daftar-isi-blog,#sitemap-blog{margin:0 auto}#daftar-isi-blog li .inner{margin:5px auto;height:auto}#feedContainer li{float:none;display:block;width:auto;height:auto}#daftar-isi-blog li .news-text,#feedContainer:after,#daftar-isi-blog li img{display:none!important}}.post-body{min-height:300px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0AQYiuDOzCWzGx_DgRn_oCXMj8GakKYWZMkqhduLry7V4jHQgx1x0mXSUp1gNENhJkkN2NtBP1AAN_UguBb8qST2kgA0CBPQQg0ZucDrGbuBGgvkpUVBhrnzeRBpQnumsSgH0zhReHns/w220-h19-no/ajax-loader+%25281%2529.gif)50% 50% no-repeat!important}';
style.appendChild(document.createTextNode(css));
head.appendChild(style);
</script>
<script type="text/javaScript">
document.write;
var loadToc, loadCategories, _toc = {
init: function() {
var cfg = {
homePage: window.location.origin,
maxResults: 10,
numChars: 270,
thumbWidth: 140,
thumbHeight: 95,
navText: "Tampilkan artikel selanjutnya ▼",
resetToc: "Kembali ke Awal",
noImage: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKPo3QLPd3f79scN8-PuVjp9WuCzLi6D6C20LgoKJHbP-T3DS9Z1puZGrjxnqWaiZ4-qvBrQzZv_XV8-LggzjUiEmi8y1IE8Qr1IJlawDHgFOVCm_1UBDdojJoKmQbykQHi2XC5KYHTsSg/s1100/no-thumbnail.png",
loading: "<span>Memuat...</span>",
counting: "<div>
Memuat artikel...</div>
",
searching: "<span>Mencari...</span>"
},
w = window,
d = document,
el = function(id) {
return d.getElementById(id);
},
o = {
a: el('feed-order'),
b: el('label-sorter').parentNode,
c: el('post-searcher'),
d: el('feed-q'),
e: el('result-desc'),
f: el('daftar-isi-blog'),
g: el('feed-nav'),
h: d.getElementsByTagName('head')[0],
i: 0,
j: null,
k: 'published',
l: 0,
m: ""
},
fn = {
a: function() {
old = el('temporer-script');
old.parentNode.removeChild(old);
},
b: function(param) {
var script = d.createElement('script');
script.type = "text/javascript";
script.id = "temporer-script";
script.src = param;
if (el('temporer-script')) fn.a();
o.h.appendChild(script);
},
c: function(mode, tag, order) {
o.i++;
o.e.innerHTML = cfg.counting;
o.g.innerHTML = cfg[mode == 1 ? "searching" : "loading"];
if (mode === 0) {
fn.b(tag !== null ? cfg.homePage + '/feeds/posts/summary/-/' + tag + '?alt=json-in-script&start-index=' + ((o.i * cfg.maxResults) + 1) + '&max-results=' + cfg.maxResults + '&orderby=' + order + '&callback=loadToc' : cfg.homePage + '/feeds/posts/summary?alt=json-in-script&start-index=' + ((o.i * cfg.maxResults) + 1) + '&max-results=' + cfg.maxResults + '&orderby=' + order + '&callback=loadToc');
} else if (mode == 1) {
fn.b(cfg.homePage + '/feeds/posts/summary?alt=json-in-script&start-index=' + ((o.i * cfg.maxResults) + 1) + '&max-results=' + cfg.maxResults + '&q=' + tag + '&orderby=' + order + '&callback=loadToc');
}
o.j = (tag !== null) ? tag : null;
o.l = mode;
o.a.disabled = true;
o.b.children[0].disabled = true;
},
d: function(json) {
var _h;
o.g.innerHTML = "";
o.e.innerHTML = o.l == 1 ? '<span>Hasil penelusuran untuk kata kunci <b>“' + o.m + '”</b> (' + json.feed.openSearch$totalResults.$t + ' Hasil)</span>' : '<div>
Total: ' + json.feed.openSearch$totalResults.$t + ' Artikel</div>
';
if ("entry" in json.feed) {
var a = json.feed.entry,
b, c, _d, e = "0 Komentar",
f = "",
g;
for (var i = 0; i < cfg.maxResults; i++) {
if (i == a.length) break;
b = a[i].title.$t;
_d = ("summary" in a[i]) ? a[i].summary.$t.replace(/<br ?\/?>/ig, " ").replace(/<(.*?)>/g, "").replace(/<iframe/ig, "").substring(0, cfg.numChars) : "";
g = ("media$thumbnail" in a[i]) ? a[i].media$thumbnail.url.replace(/.*?:\/\//g, "//").replace(/\/s[0-9]+\-c/, "\/s" + cfg.thumbWidth + "") : cfg.noImage.replace(/\/s[0-9]+\-c/, "\/s" + cfg.thumbWidth + "");
for (var j = 0, jen = a[i].link.length; j < jen; j++) {
c = (a[i].link[j].rel == "alternate") ? a[i].link[j].href : "#";
}
for (var k = 0, ken = a[i].link.length; k < ken; k++) {
if (a[i].link[k].rel == "replies" && a[i].link[k].type == "text/html") {
e = a[i].link[k].title;
break;
}
}
_h = d.createElement('li');
_h.innerHTML = '<div class="inner"><img style="width:' + cfg.thumbWidth + 'px;height:' + cfg.thumbHeight + 'px;" data-src="' + g + '" src="' + g + '" alt="' + b + '" title="' + b + '"><a class="toc-title" href="' + c + '" target="_blank" title="' + b + '">' + b + '</a><div class="news-text">
' + _d + '…<br style="clear:both;"></div>
</div>
';
o.f.appendChild(_h);
}
_h = d.createElement('a');
_h.href = '#load-more';
_h.innerHTML = cfg.navText;
_h.onclick = function() {
fn.c(o.l, o.j, o.k);
return false;
};
} else {
_h = d.createElement('a');
_h.href = '#reset-content';
_h.innerHTML = cfg.resetToc;
_h.onclick = function() {
o.i = -1;
o.e.innerHTML = cfg.counting;
o.f.innerHTML = "";
fn.c(0, null, 'published');
o.a.innerHTML = o.a.innerHTML;
o.b.children[0].innerHTML = o.b.children[0].innerHTML;
return false;
};
}
o.g.appendChild(_h);
o.a.disabled = false;
o.b.children[0].disabled = false;
},
e: function(json) {
var a = json.feed.category,
b = '<select id="label-sorter"><option value="" selected disabled>Pilih Kategori...</option>';
for (var i = 0, len = a.length; i < len; i++) {
b += '<option value="' + encodeURIComponent(a[i].term).replace(/%20/g, " ") + '">' + encodeURIComponent(a[i].term).replace(/%20/g, " ") + '</option>';
}
b += '</select>';
o.b.innerHTML = b;
o.b.children[0].onchange = function() {
o.i = -1;
o.f.innerHTML = "";
o.g.innerHTML = cfg.loading;
fn.c(0, this.value, o.k);
};
}
};
loadToc = fn.d;
loadCategories = fn.e;
fn.b(cfg.homePage + '/feeds/posts/summary?alt=json-in-script&start-index=' + (o.i + 1) + '&max-results=' + cfg.maxResults + '&orderby=published&callback=loadToc');
fn.b(cfg.homePage + '/feeds/posts/summary?alt=json-in-script&max-results=0&orderby=published&callback=loadCategories');
o.a.onchange = function() {
o.i = -1;
o.f.innerHTML = "";
o.g.innerHTML = cfg.counting;
o.b.children[0].innerHTML = o.b.children[0].innerHTML;
fn.c(0, null, this.value);
o.k = this.value;
};
o.c.onsubmit = function() {
o.i = -1;
o.f.innerHTML = "";
o.m = o.d.value;
fn.c(1, o.d.value, o.k);
return false;
};
}
};
_toc.init();
</script>
3. Popup Blogger Contact
Silahkan ganti melalui edit HTML sesuai punya kamu. Perhatikan juga kode yang ada di HTML ini :<script type='text/javascript'>
//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '8768650571000140910';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d8768650571000140910','//cobablogid.blogspot.co.id/','8768650571000140910');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Your message has been sent.', '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': '8768650571000140910', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>
Ganti 8768650571000140910 dengan ID blog dan warna hijau dengan url blog.
Kemudian untuk mengganti alamat tempatnya digoogle map, cari kode -5.130053, 119.493301. Ganti dengan kode latitude dan longitude tempat kamu. Untuk mendapatkannya silahkan klik kanan pada lokasinya di Google Maps lalu klik What's here? maka akan muncul sebuah kotak di bagian bawah.
4. Komentar Disqus
Cari tulisan tipstriknews-1, kemudian ganti dengan username disqus kamu.Jika kamu merasa template redesaign ini masih ada yang perlu diperbaiki atau ditambahkan, jangan sungkan untuk berkomentar di bawah.
Sekian template redesaign evomagz yang tampil clean namun tetap keren semoga bermanfaat.
Update:
Versi 1.1 = 16/12/2018
- Perbaikan tombol navigasi di versi mobile yang tidak bisa diklik
- Sistem komentar menggunakan disqus on load
- Perbaikan beberapa tampilan, halaman statis, dll
Sumber kode: kompiajaib