Skip to main content

Featured Post

Pamula Elegant Blogger Theme

Pamula  merupakan tema personal yang saya desain dengan beberapa referensi, Tema ini dibuat clean dan elegant untuk membuat lebeih fresh serta memaksimalkan fitur dari fungsi blogger agar dapat meminimalisir penggunaan javascript atau json blogger. Tema ini memiliki kecepatan super cepat seperti tema-tema yang saya share sebelumnya, tapi pada tema yang saya buat sekarang terus menggunakan fungsi javascript dan tidak ada jQuery di dalamnya. Kemungkinan kalian tidak akan paham karena terbiasa dengan jQuery. Pada tema ini kalian akan mendapatkan beberapa fitur menarik seperti : Kecepatan Loading Super Ngebut Dengan memiliki loading yang cepat pasti dapat membuat pengunjung menjadi lebih betah sebab tidak perlu cari Artikel serupa meskipun yang disebabkan oleh loading lambat. Saya sudah mencoba untuk mengetest kecepatan dengan bantuan dari GTmetrix dan Pagespeed. Untuk melihat hasilnya bisa cek gambar berikut: Kecepatan loading ini sudah saya test sendiri mengg...

Cara Merubah Blogspot Menjadi Wordpress Lengkap

Cara Merubah Blogspot Menjadi Wordpress Lengkap

Seperti yang bisa kalian lihat dijudul tersebut, saya akan merubah tampilan dari Blogspot menjadi seperti Wordpress akan tetapi untuk dashboard blog masih tetap sama hanya saja untuk templatenya mungkin yang akan sedikit menggalami perubahan besar bahkan menjadi seperti wordpress. Pada beberapa minggu yang lalu saya pernah merubah sistem komentar blog menjadi seperti wordpress karena ke isengan yang HQQ. Tapi banyak juga yang minta Tutorialnya padahal banyak di web besar luar mungkin bahasanya yang bikin ribet.

Disini saya merubah tampilan dari Permalink dan komentar blogspot saja. Jadi untuk permalink akan terlihat seperti berikut

Permalink Blogspot

https://pintarsaurus.blogspot.com/2019/02/belajar-operator-di-php.html

Permalink Wordpress

https://pintarsaurus.blogspot.com/belajar-operator-di-php.html

Sedangkan untuk komentar akan terlihat seperti tampilan dari sugeng.id, sebenarnya kalian bisa merubah sendiri tampilannya sesuai hati kalian tapi karena saya hanya mencoba tampilannya saja untuk sistemnya pakai Firebase Google.

Hal yang harus kalian perhatikan ketikkan merubah blogspot menjadi wordpress adalah SEO (Search Engine Optimize) karena saya tidak tahu apakah akan berdampak pada SEO atau tidak tapi alangkah lebih baiknya. Jangan gunakan Blog utama tapi buat blog baru lagi supaya jika ada dampak negatif kita bisa tahu, kalau saya sih yah gpp karena pakai komentar Disqus jika Inspek Element pasti akan Error berbeda dengan komentar dari blogspotnya yang alami tanpa error sedikitpun dan untuk komentar firebase sendiri tidak ada error yah.

Bahan yang harus disiapkan untuk merubah blog kalian menjadi seperti wordpress adalah :


  • Tutorial "Ada di blog ini"
  • Text Editor (Bebas)
  • Secangkir kopi / susu biar tidak pusing
  • Internet "Sangat Penting karena Firebase menggunakan sistem Real Time"


Setelah bahan diatas sudah disiapkan langsung saja ke To The Point.

Merubah Blogspot Menjadi Wordpress Lengkap


Pertama Merubah Permalink Blogger


Kode ini buatan dari V3rluchie di Github yang bisa kita manfaatkan untuk merubah tampilan Permalink Blogspot menjadi seperti Wordpress.

Kalian buka Blogger > Klik Tema > Klik tombol Edit HTML > Kemudian tambahkan kode dibawah ini tepat sebelum kode </body> atau </head>
<script type='text/javascript'>
//<![CDATA[
// BloggerJS v0.3.1
// Copyright (c) 2017-2018 Kenny Cruz
// Licensed under the MIT License
var urlTotal,nextPageToken,postsDatePrefix=!1,accessOnly=!1,useApiV3=!1,apiKey="",blogId="",postsOrPages=["pages","posts"],jsonIndex=1,secondRequest=!0,feedPriority=0,amp="&amp;"[0];function urlVal(){var e=window.location.pathname,t=e.length;return".html"===e.substring(t-5)?0:t>1?1:2}function urlMod(){var e=window.location.pathname;"p"===e.substring(1,2)?(e=(e=e.substring(e.indexOf("/",1)+1)).substr(0,e.indexOf(".html")),history.replaceState(null,null,"../"+e)):(e=(e=postsDatePrefix?e.substring(1):e.substring(e.indexOf("/",7)+1)).substr(0,e.indexOf(".html")),history.replaceState(null,null,"../../"+e))}function urlSearch(e,t){var n=e+".html";t.forEach(function(e){-1!==e.search(n)&&(window.location=e)})}function urlManager(){var e=urlVal();0===e?accessOnly||urlMod():1===e?getJSON(postsOrPages[feedPriority],1):2===e&&(accessOnly||history.replaceState(null,null,"/"))}function getJSON(e,t){var n=document.createElement("script");if(useApiV3){var o="https://www.googleapis.com/blogger/v3/blogs/"+blogId+"/"+e+"?key="+apiKey+"#maxResults=500#fields=nextPageToken%2Citems(url)#callback=bloggerJSON";nextPageToken&&(o+="#pageToken="+nextPageToken),nextPageToken=void 0}else o=window.location.protocol+"//"+window.location.hostname+"/feeds/"+e+"/default?start-index="+t+"#max-results=150#orderby=published#alt=json-in-script#callback=bloggerJSON";o=o.replace(/#/g,amp),n.type="text/javascript",n.src=o,document.getElementsByTagName("head")[0].appendChild(n)}function bloggerJSON(e){var t=[];if(useApiV3||void 0===urlTotal&&(urlTotal=parseInt(e.feed.openSearch$totalResults.$t)),useApiV3){try{e.items.forEach(function(e,n){t.push(e.url)})}catch(e){}nextPageToken=e.nextPageToken}else try{e.feed.entry.forEach(function(n,o){var r=e.feed.entry[o];r.link.forEach(function(e,n){"alternate"===r.link[n].rel&&t.push(r.link[n].href)})})}catch(e){}urlSearch(window.location.pathname,t),urlTotal>150?(jsonIndex+=150,urlTotal-=150,getJSON(postsOrPages[feedPriority],jsonIndex)):nextPageToken?getJSON(postsOrPages[feedPriority]):secondRequest&&(nextPageToken=void 0,urlTotal=void 0,jsonIndex=1,secondRequest=!1,0===feedPriority?(feedPriority=1,getJSON("posts",1)):1===feedPriority&&(feedPriority=0,getJSON("pages",1)))}function bloggerJS(e){e&&(feedPriority=e),urlManager()}bloggerJS();
//]]>
</script>

Setelah itu klik tombol simpan tapi jangan keluar dulu karena belum selesai.

Kedua Merubah Comment Blogger


Setelah merubah Permalink tentunya harus merubah tampilan komentar donk biar terlihat seperti wordpress banget, yah meskipun agak maksa gitu diubahnya.

Untuk kode Comment Firebase saya buat sendiri agar paham karena biar mudah diedit (Oleh Admin Sendiri) karena biasanya saya pakai bahasa yang ribet biar ngak bisa di oprek :'v

Sebelumnya saya anggap kalian sudah buat Firebase dan sudah menyettingnya.

Kalian buka Blogger > Klik Tema > Klik tombol Edit HTML > Kemudian tambahkan kode dibawah ini tepat sebelum kode </body> atau </head>

<b:if cond='data:view.isSingleItem'>
<script src="https://www.gstatic.com/firebasejs/6.2.4/firebase-app.js"></script>
<script src="https://cdn.firebase.com/js/client/2.2.1/firebase.js"></script>
<script>//<![CDATA[
$(document).ready(function(){var a=$(".entry-title a").attr("href");$("#Postingan").load(a+" .blog-posts",function(){});var b=$(".identitas").attr("identitas");const c=new Firebase("https://codingert.firebaseio.com/comment/main-comment/"+b),d=document.querySelector(".comment-form");d.addEventListener("submit",function(a){a.preventDefault();let b=document.getElementById("name").value,d=document.getElementById("username").value,e=document.getElementById("email").value,g=document.getElementById("url").value,h=document.getElementById("comment").value;b&&h&&c.push({name:b,username:d,email:md5(e),url:g,comment:h,time:f()}),document.getElementById("name").value="",document.getElementById("username").value="",document.getElementById("email").value="",document.getElementById("url").value="",document.getElementById("comment").value=""});const f=()=>{let a=new Date().toLocaleString("en-US",{month:"2-digit",day:"2-digit",year:"2-digit",hour:"2-digit",minute:"2-digit"});return a};c.on("child_added",function(a){let b=a.val();g(b.name,b.username,b.email,b.url,b.comment,b.time)});const g=(a,b,c,d,e,f)=>{let g=document.getElementById("comments");g.innerHTML=`<div class="main-comment firebase"><div class="profile-comment"><img src="http://www.gravatar.com/avatar/${c}?s=100&d=retro"/><cite class="situs"><a href='${d}' >${a}</a></cite> <span class="timeta">${f}</span></div><div class="isi-comment"><p class="comment">${e}</p></div><div class="ketbalas"><div class="dibalas"><div class="balas">Balas</div></div><div class="isi-balas"></div><div class="main-balas"></div></div></div>${g.innerHTML}`,$(".main-balas").each(function(a){$(this).attr("id","balas"+(a+1))}),$(".main-comment").each(function(a){var b=$(".firebase").length;$(".jumlah").html("<div class='number-com' ><div class='numpad'>"+b+"</div></div>");var c=$(".numpad").text();$(".jumlah").attr("no",c),$(this).attr("id","No"+(a+1)),$(".comment-form .submit").click(function(){location.reload()});var d=$(this).attr("id");$("#"+d+" .dibalas").click(function(){$(".dibalas .keluar-comment").removeClass("show"),$(this).find(".keluar-comment").addClass("show"),$(".comment-form").insertAfter(this),$(".balas-name").attr("id","namake1"),$(".balas-username").attr("id","usernameke2"),$(".balas-email").attr("id","emailke2"),$(".balas-url").attr("id","urlke2"),$(".balas-comment").attr("id","commentke2"),$(".keluar-comment").click(function(){$(".ketbalas").removeClass("simpan")}),$(".ketbalas").click(function(){$(".ketbalas").removeClass("simpan"),$(this).addClass("simpan"),$(".ketbalas .keluar-comment").removeClass("show"),$(this).find(".keluar-comment").addClass("show")}),$(".dibalas").removeAttr("id"),$(this).attr("id","N001"+(a+1));var b=$(".identitas").attr("identitas"),c=$(this).attr("id");const d=new Firebase("https://codingert.firebaseio.com/comment/balas/"+b+"/bertambah/"+c),e=document.querySelector(".comment-form");e.addEventListener("submit",function(b){b.preventDefault();let a=document.getElementById("namake1").value,c=document.getElementById("usernameke2").value,e=document.getElementById("emailke2").value,g=document.getElementById("urlke2").value,h=document.getElementById("commentke2").value;a&&h&&d.push({name:a,username:c,email:md5(e),url:g,comment:h,time:f()}),document.getElementById("namake1").value="",document.getElementById("emailke2").value="",document.getElementById("commentke2").value=""});const f=()=>{let a=new Date().toLocaleString("en-US",{month:"2-digit",day:"2-digit",year:"2-digit",hour:"2-digit",minute:"2-digit"});return a};d.on("child_added",function(a){let b=a.val();h(b.name,b.username,b.email,b.url,b.comment,b.time)});var g=$(this).attr("id");const h=(a,b,c,d,e,f)=>{let h=document.getElementById(g);h.innerHTML=`<div class="main-comment firebasedua"><div class="profile-comment"><img src="http://www.gravatar.com/avatar/${c}?s=100&d=retro"/><cite class="situs"><a href='${d}' >${a}</a></cite> <span class="timeta">${f}</span></div><div class="isi-comment"><p class="comment">${e}</p></div></div>${h.innerHTML}`,$(".firebasedua").each(function(){})}})})}}),function(a){'use strict';function e(a,b){var c=(65535&a)+(65535&b);return(a>>16)+(b>>16)+(c>>16)<<16|65535&c}function f(a,b){return a<<b|a>>>32-b}function g(c,d,a,b,g,h){return e(f(e(e(d,c),e(b,h)),g),a)}function h(e,a,b,c,d,f,h){return g(a&b|~a&c,e,a,d,f,h)}function j(e,a,b,c,d,f,h){return g(a&c|b&~c,e,a,d,f,h)}function k(e,a,b,c,d,f,h){return g(a^b^c,e,a,d,f,h)}function l(e,a,b,c,d,f,h){return g(b^(a|~c),e,a,d,f,h)}function m(f,g){f[g>>5]|=128<<g%32,f[(g+64>>>9<<4)+14]=g;var m,n,o,p,q,r=1732584193,s=-271733879,t=-1732584194,u=271733878;for(m=0;m<f.length;m+=16)n=r,o=s,p=t,q=u,r=h(r,s,t,u,f[m],7,-680876936),u=h(u,r,s,t,f[m+1],12,-389564586),t=h(t,u,r,s,f[m+2],17,606105819),s=h(s,t,u,r,f[m+3],22,-1044525330),r=h(r,s,t,u,f[m+4],7,-176418897),u=h(u,r,s,t,f[m+5],12,1200080426),t=h(t,u,r,s,f[m+6],17,-1473231341),s=h(s,t,u,r,f[m+7],22,-45705983),r=h(r,s,t,u,f[m+8],7,1770035416),u=h(u,r,s,t,f[m+9],12,-1958414417),t=h(t,u,r,s,f[m+10],17,-42063),s=h(s,t,u,r,f[m+11],22,-1990404162),r=h(r,s,t,u,f[m+12],7,1804603682),u=h(u,r,s,t,f[m+13],12,-40341101),t=h(t,u,r,s,f[m+14],17,-1502002290),s=h(s,t,u,r,f[m+15],22,1236535329),r=j(r,s,t,u,f[m+1],5,-165796510),u=j(u,r,s,t,f[m+6],9,-1069501632),t=j(t,u,r,s,f[m+11],14,643717713),s=j(s,t,u,r,f[m],20,-373897302),r=j(r,s,t,u,f[m+5],5,-701558691),u=j(u,r,s,t,f[m+10],9,38016083),t=j(t,u,r,s,f[m+15],14,-660478335),s=j(s,t,u,r,f[m+4],20,-405537848),r=j(r,s,t,u,f[m+9],5,568446438),u=j(u,r,s,t,f[m+14],9,-1019803690),t=j(t,u,r,s,f[m+3],14,-187363961),s=j(s,t,u,r,f[m+8],20,1163531501),r=j(r,s,t,u,f[m+13],5,-1444681467),u=j(u,r,s,t,f[m+2],9,-51403784),t=j(t,u,r,s,f[m+7],14,1735328473),s=j(s,t,u,r,f[m+12],20,-1926607734),r=k(r,s,t,u,f[m+5],4,-378558),u=k(u,r,s,t,f[m+8],11,-2022574463),t=k(t,u,r,s,f[m+11],16,1839030562),s=k(s,t,u,r,f[m+14],23,-35309556),r=k(r,s,t,u,f[m+1],4,-1530992060),u=k(u,r,s,t,f[m+4],11,1272893353),t=k(t,u,r,s,f[m+7],16,-155497632),s=k(s,t,u,r,f[m+10],23,-1094730640),r=k(r,s,t,u,f[m+13],4,681279174),u=k(u,r,s,t,f[m],11,-358537222),t=k(t,u,r,s,f[m+3],16,-722521979),s=k(s,t,u,r,f[m+6],23,76029189),r=k(r,s,t,u,f[m+9],4,-640364487),u=k(u,r,s,t,f[m+12],11,-421815835),t=k(t,u,r,s,f[m+15],16,530742520),s=k(s,t,u,r,f[m+2],23,-995338651),r=l(r,s,t,u,f[m],6,-198630844),u=l(u,r,s,t,f[m+7],10,1126891415),t=l(t,u,r,s,f[m+14],15,-1416354905),s=l(s,t,u,r,f[m+5],21,-57434055),r=l(r,s,t,u,f[m+12],6,1700485571),u=l(u,r,s,t,f[m+3],10,-1894986606),t=l(t,u,r,s,f[m+10],15,-1051523),s=l(s,t,u,r,f[m+1],21,-2054922799),r=l(r,s,t,u,f[m+8],6,1873313359),u=l(u,r,s,t,f[m+15],10,-30611744),t=l(t,u,r,s,f[m+6],15,-1560198380),s=l(s,t,u,r,f[m+13],21,1309151649),r=l(r,s,t,u,f[m+4],6,-145523070),u=l(u,r,s,t,f[m+11],10,-1120210379),t=l(t,u,r,s,f[m+2],15,718787259),s=l(s,t,u,r,f[m+9],21,-343485551),r=e(r,n),s=e(s,o),t=e(t,p),u=e(u,q);return[r,s,t,u]}function n(a){var b,c="";for(b=0;b<32*a.length;b+=8)c+=String.fromCharCode(255&a[b>>5]>>>b%32);return c}function o(a){var b,c=[];for(c[(a.length>>2)-1]=void 0,b=0;b<c.length;b+=1)c[b]=0;for(b=0;b<8*a.length;b+=8)c[b>>5]|=(255&a.charCodeAt(b/8))<<b%32;return c}function p(a){return n(m(o(a),8*a.length))}function q(a,b){var c,d,e=o(a),f=[],g=[];for(f[15]=g[15]=void 0,16<e.length&&(e=m(e,8*a.length)),c=0;16>c;c+=1)f[c]=909522486^e[c],g[c]=1549556828^e[c];return d=m(f.concat(o(b)),512+8*b.length),n(m(g.concat(d),640))}function r(a){var b,c,d="";for(c=0;c<a.length;c+=1)b=a.charCodeAt(c),d+="0123456789abcdef".charAt(15&b>>>4)+"0123456789abcdef".charAt(15&b);return d}function t(a){return unescape(encodeURIComponent(a))}function u(a){return p(t(a))}function v(a){return r(u(a))}function w(a,b){return q(t(a),t(b))}function x(a,b){return r(w(a,b))}function y(a,b,c){return b?c?w(b,a):x(b,a):c?u(a):v(a)}"function"==typeof define&&define.amd?define(function(){return y}):"object"==typeof module&&module.exports?module.exports=y:a.md5=y}(this);//]]></script>
</b:if>

Selanjutnya tambahkan kode dibawah ini tepat sebelum kode </style> atau </b:skin>

*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.comment-section{width:100%;margin:30px auto}
#commentform{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}
#commentform > [class^="comment-form"],#commentform > .form-submit{position:relative;min-height:1px;padding:15px;width:100%;-webkit-box-flex:0;-webkit-flex:0 0 100%;-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}
@media (min-width:600px){#commentform > .comment-form-name,#commentform > .comment-form-username,#commentform > .comment-form-email,#commentform > .comment-form-url{-webkit-box-flex:0;-webkit-flex:0 0 50%;-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}}
#commentform input[type="text"],#commentform input[type="email"],#commentform input[type="url"],#commentform textarea{background-color:#fff;border:1px solid #d8d8d8;padding:24px 10px 12px;font-size:16px;font-size:1rem}
input[type="text"],input[type="email"],input[type="url"],textarea{background-color:#fff;padding:24px 10px 12px;font-size:16px;font-size:1rem;width:100%;-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out}
:focus{outline:0}
input[type="text"]:focus,input[type="email"]:focus,input[type="url"]:focus,textarea:focus{background-color:#fff}
@-webkit-keyframes silo-fade{0%{opacity:0;-webkit-transform:translateY(-1.4em)}100%{opacity:1;-webkit-transform:translateY(0)}}
@-moz-keyframes silo-fade{0%{opacity:0;-moz-transform:translateY(-1.4em)}100%{opacity:1;-moz-transform:translateY(0)}}
@keyframes silo-fade{0%{opacity:0;-webkit-transform:translateY(-1.4em);-moz-transform:translateY(-1.4em);-ms-transform:translateY(-1.4em);-o-transform:translateY(-1.4em);transform:translateY(-1.4em)}100%{opacity:1;-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);-o-transform:translateY(0);transform:translateY(0)}}
@-webkit-keyframes silo-help{0%{opacity:0}4%{opacity:0}5%{opacity:1}100%{opacity:1}}
@-moz-keyframes silo-help{0%{opacity:0}4%{opacity:0}5%{opacity:1}100%{opacity:1}}
@keyframes silo-help{0%{opacity:0}4%{opacity:0}5%{opacity:1}100%{opacity:1}}
#commentform label{padding:5px 0;font-size:14px;font-size:0.75rem;display:none;position:absolute;top:15px;left:26px;color:#8BC34A;-webkit-animation:silo-fade 0.2s;-moz-animation:silo-fade 0.2s;animation:silo-fade 0.2s;max-width:80%}
#commentform input:focus + label,#commentform input[required]:valid + label,#commentform input:not(:placeholder-shown) + label,#commentform textarea:focus + label,#commentform textarea:valid + label,#commentform textarea:not(:placeholder-shown) + label{display:block}
#commentform input:invalid,#commentform textarea:invalid{border:1px solid #b92326;background-color:rgba(185,35,38,0.25)}
#commentform input:focus:invalid,#commentform textarea:focus:invalid{background-color:transparent;border:1px solid #b92326}
#commentform input:invalid + label,#commentform textarea:invalid + label{color:#b92326}
#commentform input:invalid + label,#commentform textarea:invalid + label{color:#b92326}
#commentform input:focus:invalid + label:after,#commentform textarea:focus:invalid + label:after{content:" (" attr(data-help) ")";animation:silo-help 100s}
#commentform input:invalid + label:after,#commentform textarea:invalid + label:after{content:" (" attr(data-help) ")"}
#commentform input:valid,#commentform textarea:valid{border:1px solid #8BC34A;background-color:rgba(139,195,74,0.25)}
#commentform input:focus:valid,#commentform textarea:focus:valid{border:1px solid #8BC34A;background-color:transparent}
#commentform input:valid + label,#commentform textarea:valid + label{color:#8BC34A}
#commentform input:placeholder-shown,#commentform textarea:placeholder-shown{background-color:transparent;border:1px solid #d8d8d8}
#commentform input::placeholder,#commentform textarea::placeholder{color:#d8d8d8}
#commentform input::-webkit-input-placeholder,#commentform textarea::-webkit-input-placeholder{color:#d8d8d8}
#commentform input:-ms-input-placeholder,#commentform textarea:-ms-input-placeholder{color:#d8d8d8}
#commentform input::-moz-placeholder,#commentform textarea::-moz-placeholder{color:#d8d8d8}
#commentform input:focus::placeholder,#commentform textarea:focus::placeholder{color:transparent}
#commentform input:focus::-webkit-input-placeholder,#commentform textarea:focus::-webkit-input-placeholder{color:transparent}
#commentform input:focus:-ms-input-placeholder,#commentform textarea:focus:-ms-input-placeholder{color:transparent}
#commentform input:focus::-moz-placeholder,#commentform textarea:focus::-moz-placeholder{color:transparent}
#commentform input[type="submit"]{background-color:transparent;border:1px solid #8BC34A;color:#8BC34A;padding:5px 15px;font-size:16px;font-size:1rem;margin:15px auto;display:block;cursor:pointer}
#commentform input[type="submit"]:hover{background-color:rgba(139,195,74,0.25);border:1px solid #8BC34A}
.show{display:block}
.simpan .idbalas .main-balas,.simpan .comment-form{display:block}
.simpan .idbalas .main-balas,.simpan .comment-form{display:none}
.firebase-comment{width:100%;margin:30px auto}
.jumlah-comment{margin-bottom:28px;font-size:16px;line-height:1.5;font-weight:normal}
.jumlah{float:left;margin-right:5px}
.main-comment{border:1px solid #e1e1e1;box-shadow:0.01em 0.51em 1.1em 0.1em #EEEEEE;margin:24px 0;padding:20px}
.profile-comment{margin:0 15px 5px 0;overflow:hidden;position:relative}
.profile-comment img{float:left;padding-top:1px;line-height:0;width:30px;height:30px}
.situs{font-style:normal;font-size:14px;line-height:1.2}
.situs,.timeta{display:block;margin-left:45px}
.timeta{line-height:1.7;text-decoration:none;font-size:10px;color:#5e5e5e}
.isi-comment p{margin:0 0 15px;line-height:1.714285714}
.balas{color:#686868;font-size:13px;line-height:1.846153846;cursor:pointer}

Selanjutnya untuk menampilkan komentar Firebase tambahkan kode dibawah ini tepat dibawah kode <b:includable id='comments' var='post'>

<b:if cond='data:view.isSingleItem>
<div class='identitas' expr:identitas='data:post.id'/>
    <div class='firebase-comment'>
        <div class='jumlah-comment'><h2>Comments<div class='jumlah' no='0'></div></h2></div>
        <div id="comments"></div>
    </div>
    <div class="comment-section">
        <h1 class="comment-reply-title">Write your comment!</h1>
        <form id="commentform" class="comment-form">
            <div class="comment-form-name">
                <input id="name" class='balas-name' placeholder="Name *" type="text" value="" pattern="^[^0-9]+$" size="30" maxlength="245" required=''/>
                <label for="name" data-help="¿Are you 11 from Stranger Things?">Name</label>
            </div>
            <div class="comment-form-username">
                <input id="username" class='balas-username' placeholder="Username *" type="text" value="" size="30" maxlength="245" required=''/>
                <label for="username" data-help="A girl has no name- Arya Stark">Username</label>
            </div>
            <div class="comment-form-email">
                <input id="email" class='balas-email' placeholder="Email *" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" required=''/>
                <label for="email" data-help="Format email@email.com">Email</label>
            </div>
            <div class="comment-form-url">
                <input id="url" class='balas-url' placeholder="Website" type="url" value="" size="30" maxlength="200"/>
                <label for="url" data-help="Should start with http:// o https://">Website</label>
            </div>
            <div class="comment-form-comment">
                <textarea textarea="" placeholder="Comment *" id="comment" class='balas-comment' cols="45" rows="8" maxlength="65525" required=''></textarea>
                <label for="comment" data-help="Escribe algo! Lo primero que se te ocurra">Comment</label>
            </div>
            <div class="form-submit">
              <input type="submit" id="submit" class="submit" value="Post Comment"/>
            </div>
        </form>
    </div>
</b:if>

Bagi yang mau melihat tampilanya, klik tombol demo dibawah


Untuk komentar firebase itu masih demo jadi akan saya update terus agar menjadi lebih bagus lagi.

Comments

  1. wahhh, ini templatenya keren banget brooo.
    *salam kenal ya bro *AORLIN(.)com

    ReplyDelete
  2. wih permalink nya bisa di ubah seperti wordpress, ada contohnya blogspot yang sudah di ubah permalink nya gak kakak?

    ReplyDelete
    Replies
    1. ada pada demo diatas cuman saya encrypt code jadi permalink tidak berubah

      Delete

Post a Comment

To insert a code use <i rel="pre">code_here</i>To insert a quote use <b rel="quote">your_qoute</b>To insert a picture use <i rel="image">url_image_here</i>To insert a video use <i rel="video">video</i>Tinggalkan komentar sesuai topik tulisan, komentar dengan link aktif tidak akan ditampilkan. Admin dan penulis blog mempunyai hak untuk menampilkan, menghapus, menandai spam, pada komentar yang dikirim.

Popular posts from this blog

Pamula Elegant Blogger Theme

Pamula  merupakan tema personal yang saya desain dengan beberapa referensi, Tema ini dibuat clean dan elegant untuk membuat lebeih fresh serta memaksimalkan fitur dari fungsi blogger agar dapat meminimalisir penggunaan javascript atau json blogger. Tema ini memiliki kecepatan super cepat seperti tema-tema yang saya share sebelumnya, tapi pada tema yang saya buat sekarang terus menggunakan fungsi javascript dan tidak ada jQuery di dalamnya. Kemungkinan kalian tidak akan paham karena terbiasa dengan jQuery. Pada tema ini kalian akan mendapatkan beberapa fitur menarik seperti : Kecepatan Loading Super Ngebut Dengan memiliki loading yang cepat pasti dapat membuat pengunjung menjadi lebih betah sebab tidak perlu cari Artikel serupa meskipun yang disebabkan oleh loading lambat. Saya sudah mencoba untuk mengetest kecepatan dengan bantuan dari GTmetrix dan Pagespeed. Untuk melihat hasilnya bisa cek gambar berikut: Kecepatan loading ini sudah saya test sendiri mengg...

Template OneClean Blogger

Kali ini saya akan share template buatan saya, yaitu OneClean yang sedang dipakai oleh Pintarsaurus tentu Template ini memiliki banyak featured yang dapat kalian gunakan seperti Related Post dan lainnya. Tidak hanya itu OneClean juga memiliki kecepatan 100/100 pada saat di test di Gtmetrix dan dengan kecepatan seperti ini menurut saya pasti pengunjung tidak akan tergangu karena loading pada template. Bagi kalian yang ingin melihat Featurednya OneClean Responsive Blogger Template Features Availability Responsive True Cek Mobile Friendly True Cek Google PageSpeed Insights True Cek Gtmetrix True Cek Google Testing Tools : Index True Cek Google Testing Tools : Item True Cek SEO Friendly True Personal Blog True 2 Column True Breadcrumbs ...

Flet Banget Responsive Blogger Theme

Flet Banget merupakan sebuah tema yang saya desain clean dan mempunya speed super ngebut apalagi buat anda pecinta kecepatan. Pada tema ini saya mulai mundur untuk menggunakan jQuery dan beralih ke Javascript pure aja sebab lebih enak menggunakan nya selagi belajar juga. Pada tema ini kalian akan mendapatkan beberapa fitur menarik seperti : Kecepatan Loading Super Ngebut Dengan memiliki loading yang cepat pasti dapat membuat pengunjung menjadi lebih betah sebab tidak perlu cari Artikel serupa meskipun yang disebabkan oleh loading lambat. Saya sudah mencoba untuk mengetest kecepatan dengan bantuan dari GTmetrix dan Pagespeed. Untuk melihat hasilnya bisa cek gambar berikut: Pengaturan Template via Menu Tata Letak Setelah saya belajar dan terus merevisi, akhirnya bisa untuk membuat pengaturan menjadi ke bagian Tata Letak supaya tidak ribet dan mudah untuk dirubah. Terutama bagi yang masih pemula pasti pusing bila harus edit lewat kode HTML. Mempu...