Cara Merubah Blogspot Menjadi Wordpress Lengkap

Malestea
Malestea
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 protected]">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.

4 comments : Cara Merubah Blogspot Menjadi Wordpress Lengkap

  1. Aorlin
    wahhh, ini templatenya keren banget brooo.
    *salam kenal ya bro *AORLIN(.)com
    • Malestea
      salah juga sob
  2. wih permalink nya bisa di ubah seperti wordpress, ada contohnya blogspot yang sudah di ubah permalink nya gak kakak?
    • Malestea
      ada pada demo diatas cuman saya encrypt code jadi permalink tidak berubah