Cara Merubah Blogspot Menjadi WordPress Lengkap

Permalink Blogspot

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

Permalink WordPress

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

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>