Cara Membuat Tampilan Home Page Seperti Milik Blog KodeJarwo

www.azid45.web.id - Cara Membuat Tampilan Home Page Seperti Milik Blog Kode Jarwo. Assalamualaikum.wr.wb, siapa yang tidak kenal dengan bang jarwo atau Ozik Jarwo?. Bagi yang belum kenal dengan dia, pastinya blog teman-teman belum mengenal tentang pagespeed blog, dan pentingnya pagespeed (kecepatan blog). Ya, selain optimazi SEO dan kualitas konten kita juga harus memperhitungkan template kita, yaitu setidaknya memiliki kecepatan yang luar biasa.

Sesungguhnya om google sudah membuat layanan blog dengan kecepatan yang luar biasa, yaitu AMP. Selain blog bisa menjadi cepat, juga memiliki prioritas dimesin pencari, bak AMP merupakan anak emas yang diluncurkan oleh google. Sehingga bagi siapa saja yang blognya bertemplate AMP hampir rata-rata akan bertempat ONE PAGE pada serach engine. Hal tersebut setidaknya akan menambah visitor blog kita, dan blog kita juga akan terkenal.

Ada yang belum tau blog dengan template AMP?. Dari pengataman saya dari berbagai sumber, template blog AMP dapat berjalan hanya pada versi mobile dengan simbol petir dalam pencariannya. AMP sendiri muncul karena dari survey kebanyakan orang di Indonesia bahkan didunia sekarang ketika mengakses internet adalah melalui HP baik itu android, IOS, maupun Widows. Dengan begitu, agar pencarian tidak lambat akhirnya pihak google membuat sebuah trobosan baru dengan membuat template support AMP dan memiliki keunggulan pada kecepatan blog.

Namun, jangan khawatir bagi blogger yang templatenya belum AMP. Masih ada pakar pagespeed (Kecepatan Blog) yaitu bang Jarwo. Jika tidak percaya, buktikan saja blog beliau, pasti jika dicek dengan pagespeed insights maupun GMetrix maka akan memperoleh nilai yang memuaskan yaitu 100. Jadi sudah tau kan siapa bang Jarwo?. Kalau teman-teman ingin membuat blog teman-teman cepat, teman-teman bisa berkunjung ke blo kode jarwo dengan alamat https://blog.kodejarwo.com. Disana, kalian akan menjumpai berbagai macam artikel seputar tutorial cara mempercepat blog.

Selain, keunggulan tersebut, ada keungggulan lain pada template bang Jarwo yaitu tampilannya yang elegan dan dinamis serta responsive. Dimana, terdapat menu deskripsi, serta 4 kotak lainnya tentang keunggulan dari blog tersebut yan dapat kita jumpai pada menu home page. Template kalian ingin seperti blog bang Jarwo?, jangan khawatir, saya akan membagikan tutorialnya (cara membuat tampilan home page seperti bang Jarwo). Script dan style ini saya peroleh sendiri dengan meng-inpact blog beliau, karena dari tutorial yang ada baik dari artikel bang Jarwo sendiri maupun artikel selain bang jarwo ketika saya coba script dan style tersebut tidak responsive, alias berantakan jika kita mengaksesnya pada versi mobile. Dan akhirnya saya mengotak-atik sendiri dari template beilau.

Ok. Jadi ngelantur, teman-teman pastinya sudah tidak sabar lagi bukan. Berikut caranya untuk membuat tampilan home page seperti milik blog kode Jarwo.

Langkah pertama, adalah teman-teman harus menuju menu template (tema) - edit HTML. Setelah itu carilah kode </head> atau &lt;/head&gt; dengan ctrl+f. Kemudian letakkan kode berikut tepat diatas kode </head> atau &lt;/head&gt;


 <style>
.kata-pembuka {position:relative;width:100%;}
.jasa-pembuka {color:white;text-align: center;font-weight: 700;font-size: 30px;color:#222}
.kata-pembuka p {color:#fff;padding:30px;font-size:30px;font-weight:700;width:100%;text-align:center;z-index:1}
.kata-pembuka p {top:calc(50% + 50px);transform:translate(0, -85%);position:absolute;text-shadow:0px 0px 8px rgb(0, 0, 0);}
 #material {position: relative;height:450px;max-width:100%}
 #material, #material div {background:linear-gradient(90deg,#00626b 0,#00acc1 50%,#00f7ca 100%) !important}
  canvas {background-position: center;transition: background 3s;}
  canvas:active {background:linear-gradient(90deg,#00626b 0,#00acc1 50%,#00f7ca 100%);background-size: 100%;transition: background 0s;}
@media screen and (max-width:640px) {
    #material {height:304px}
    .kata-pembuka p {font-size:140%}
  }
.jasa-container {display:inline-block}
 a.jasa {float:left;width:50%;color:white;height:200px}
  .jasa.loading .jasa-pembungkus {background:#003333}
  .jasa.seo .jasa-pembungkus {background:#004d4d}
  .jasa.tanya .jasa-pembungkus {background:#008080}
  .jasa.template .jasa-pembungkus {background:#00b3b3}
 .jasa-pembungkus {height:100%;border-bottom:10px solid #000;display:inline-block;width:100%;position: relative;}
 .jasa-pembungkus {padding:20px;box-shadow:0 1px 3px 0 rgb(0, 98, 107),0 1px 1px 0 rgb(0, 98, 107),0 2px 1px -1px rgb(0, 98, 107);}
 .jasa-pembungkus:hover {opacity:0.75;}
  .jasa-logo {position: absolute;right: 50px;opacity: 0.5;top: 50%;transform: translate(0, -50%);}
  .jasa-logo svg {width:100px;height:100px;display: block;}
   #tanya svg, #template svg {animation-name: goyang; animation-duration: .8s;  linear}
   #tanya svg, #template svg {transform-origin: 50% 50%; animation-iteration-count: infinite;}
   .jasa.seo .jasa-logo svg, .jasa.loading .jasa-logo svg {animation-name: goyang; animation-duration: .8s;  linear}
   .jasa.seo .jasa-logo svg, .jasa.loading .jasa-logo svg {animation-iteration-count: infinite;animation-timing-function: linear;}
  .jasa-judul {font-size: 110%;font-weight: 700;margin-bottom:10px;display: inline-block;text-align: left;width: 100%;padding: 20px;}
  .jasa-deskripsi {text-align: left;padding: 0 70px 20px 20px;}
@media all and (max-width:900px) {
a.jasa {width:100%}
}
@media screen and (max-width:640px) {
    .jasa-pembungkus {padding:10px;font-size:90%}
    .jasa-judul {margin-bottom:0}
  }
@keyframes guncang{
 0%{transform:translate(4px,2px) rotate(0)}
 10%{transform:translate(-2px,-4px) rotate(-1deg)}
 20%{transform:translate(-6px,0) rotate(1deg)}
 30%{transform:translate(0,4px) rotate(0)}
 40%{transform:translate(2px,-2px) rotate(1deg)}
 50%{transform:translate(-2px,4px) rotate(-1deg)}
 60%{transform:translate(-6px,2px) rotate(0)}
 70%{transform:translate(4px,2px) rotate(-1deg)}
 80%{transform:translate(-2px,-2px) rotate(1deg)}
 90%{transform:translate(4px,4px) rotate(0)}
 100%{transform:translate(2px,-4px) rotate(-1deg)}
 }
@keyframes goyang{
 10%,90%{transform:translate3d(-1px,0,0)}
 20%,80%{transform:translate3d(1px,0,0)}
 30%,50%,70%{transform:translate3d(-1px,0,0)}
 40%,60%{transform:translate3d(1px,0,0)}
 }
@keyframes spin{
 from{transform:rotate(0deg)}
 to{transform:rotate(360deg)}
 }

</style>

Setelah itu cari kode </header> dan letakkan kode berikut dibawah kode </header> (atau sesui kesukaan teman-teman. Intiknya diantara kode <body> ..... </body>


 <b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='kata-pembuka'>
<div id='material'/>
  <p>Isi Deskripsi Blog Disini</p>
</div>
<div class='jasa-container'>
<a class='jasa loading' href='#'>
<div class='jasa-pembungkus'>
<div class='jasa-logo'>
<div id='loading'/>
</div>
<div class='jasa-judul'>
<p>Kategori 1</p>
</div>
<div class='jasa-deskripsi'>
<p>Penjelasan Kategori</p>
</div>
</div>
</a>
<a class='jasa seo' href='#'>
<div class='jasa-pembungkus'>
<div class='jasa-logo'>
<div id='seo'/>
</div>
<div class='jasa-judul'>
<p>Kategori 2</p>
</div>
<div class='jasa-deskripsi'>
<p>Penjelasan Kategori</p>
</div>
</div>
</a>
<a class='jasa tanya' href='#'>
<div class='jasa-pembungkus'>
<div class='jasa-logo'>
<div id='tanya'/>
</div>
<div class='jasa-judul'>
<p>Pertanyaan</p>
</div>
<div class='jasa-deskripsi'>
<p>Untuk Pertanyaan Seputar blog xxxxxxx silakan klik disini </p>
</div>
</div>
</a>
<a class='jasa template' href='#'>
<div class='jasa-pembungkus'>
<div class='jasa-logo'>
<div id='template'/>
</div>
<div class='jasa-judul'>
<p>Tentang Penulis</p>
</div>
<div class='jasa-deskripsi'>
<p>Deskripsikan diri anda disini</p>
</div>
</div>
</a>
</div>

  </b:if>

Langkah terakhir adalah cari kode </body> atau &lt;/body&gt; dan pastekan kode scirpt berikut tepat diatas kode </body> atau &lt;/body&gt;


<script>
(function printMsg() {var node = document.getElementById(&quot;loading&quot;);
node.innerHTML = &quot;<svg height='512px' id='Capa_1' style='enable-background:new 0 0 24 24;' version='1.1' viewBox='0 0 24 24' width='512px' x='0px' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' y='0px'><g><g><path d='M16.5,12C19,12 21,14 21,16.5C21,17.38 20.75,18.21 20.31,18.9L23.39,22L22,23.39L18.88,20.32C18.19,20.75 17.37,21 16.5,21C14,21 12,19 12,16.5C12,14 14,12 16.5,12M16.5,14A2.5,2.5 0 0,0 14,16.5A2.5,2.5 0 0,0 16.5,19A2.5,2.5 0 0,0 19,16.5A2.5,2.5 0 0,0 16.5,14M9,4L11,6H19A2,2 0 0,1 21,8V11.81C19.83,10.69 18.25,10 16.5,10A6.5,6.5 0 0,0 10,16.5C10,17.79 10.37,19 11,20H3C1.89,20 1,19.1 1,18V6C1,4.89 1.89,4 3,4H9Z' fill='#000000'/></g></g></svg>&quot;;
})();
(function printMsg() {var node = document.getElementById(&quot;seo&quot;);
node.innerHTML = &quot;<svg height='512px' id='Capa_1' style='enable-background:new 0 0 24 24;' version='1.1' viewBox='0 0 24 24' width='512px' x='0px' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' y='0px'><g><g><g><path d='M12.3,2C12.2,2 12.1,2 12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22C15,22 16.7,21 18.5,19.5C13,21 8,17 8,12C8,7 13,3 18.5,4.5C16.86,2.86 14.62,1.96 12.3,2M16.8,6.2L15.3,9.7L11.6,10L14.5,12.5L13.6,16L16.8,14L20,16L19,12.5L22,10L18.3,9.7L16.8,6.2Z' fill='#000000'/></g></g></g></svg>&quot;;
})();
(function printMsg() {var node = document.getElementById(&quot;tanya&quot;);
node.innerHTML = &quot;<svg height='512px' id='Capa_1' style='enable-background:new 0 0 24 24;' version='1.1' viewBox='0 0 24 24' width='512px' x='0px' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' y='0px'><g><g><path d='M12,23A1,1 0 0,1 11,22V19H7A2,2 0 0,1 5,17V7A2,2 0 0,1 7,5H21A2,2 0 0,1 23,7V17A2,2 0 0,1 21,19H16.9L13.2,22.71C13,22.89 12.76,23 12.5,23H12M3,15H1V3A2,2 0 0,1 3,1H19V3H3V15Z' fill='#000000'/></g></g></svg>&quot;;
})();
(function printMsg() {var node = document.getElementById(&quot;template&quot;);
node.innerHTML = &quot;<svg height='512px' id='Capa_1' style='enable-background:new 0 0 24 24;' version='1.1' viewBox='0 0 24 24' width='512px' x='0px' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' y='0px'><path d='M13,8A4,4 0 0,1 9,12A4,4 0 0,1 5,8A4,4 0 0,1 9,4A4,4 0 0,1 13,8M17,18V20H1V18C1,15.79 4.58,14 9,14C13.42,14 17,15.79 17,18M20.5,14.5V16H19V14.5H20.5M18.5,9.5H17V9A3,3 0 0,1 20,6A3,3 0 0,1 23,9C23,9.97 22.5,10.88 21.71,11.41L21.41,11.6C20.84,12 20.5,12.61 20.5,13.3V13.5H19V13.3C19,12.11 19.6,11 20.59,10.35L20.88,10.16C21.27,9.9 21.5,9.47 21.5,9A1.5,1.5 0 0,0 20,7.5A1.5,1.5 0 0,0 18.5,9V9.5Z' fill='#000000'/></svg>&quot;;
})();
</script>
<script>//<![CDATA[
!function(t){var i="object"==typeof self&&self.self===self&&self||"object"==typeof global&&global.global===global&&global;"function"==typeof define&&define.amd?define(["exports"],function(s){i.ParticleNetwork=t(i,s)}):"object"==typeof module&&module.exports?module.exports=t(i,{}):i.ParticleNetwork=t(i,{})}(function(t,i){var s=function(t){this.canvas=t.canvas,this.g=t.g,this.particleColor=t.options.particleColor,this.x=Math.random()*this.canvas.width,this.y=Math.random()*this.canvas.height,this.velocity={x:(Math.random()-.5)*t.options.velocity,y:(Math.random()-.5)*t.options.velocity}};return s.prototype.update=function(){(this.x>this.canvas.width+20||this.x<-20)&&(this.velocity.x=-this.velocity.x),(this.y>this.canvas.height+20||this.y<-20)&&(this.velocity.y=-this.velocity.y),this.x+=this.velocity.x,this.y+=this.velocity.y},s.prototype.h=function(){this.g.beginPath(),this.g.fillStyle=this.particleColor,this.g.globalAlpha=.9,this.g.arc(this.x,this.y,1.5,0,2*Math.PI),this.g.fill()},(i=function(t,i){this.i=t,this.i.size={width:this.i.offsetWidth,height:this.i.offsetHeight},i=void 0!==i?i:{},this.options={particleColor:void 0!==i.particleColor?i.particleColor:"#fff",background:void 0!==i.background?i.background:"#fff",interactive:void 0===i.interactive||i.interactive,velocity:this.setVelocity(i.speed),density:this.j(i.density)},this.init()}).prototype.init=function(){if(this.k=document.createElement("div"),this.i.appendChild(this.k),this.l(this.k,{position:"absolute",top:0,left:0,bottom:0,right:0,"z-index":1}),/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(this.options.background))this.l(this.k,{background:this.options.background});else{if(!/\.(gif|jpg|jpeg|tiff|png)$/i.test(this.options.background))return console.error("Please specify a valid background image or hexadecimal color"),!1;this.l(this.k,{background:'url("'+this.options.background+'") no-repeat center',"background-size":"cover"})}if(!/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(this.options.particleColor))return console.error("Please specify a valid particleColor hexadecimal color"),!1;this.canvas=document.createElement("canvas"),this.i.appendChild(this.canvas),this.g=this.canvas.getContext("2d"),this.canvas.width=this.i.size.width,this.canvas.height=this.i.size.height,this.l(this.i,{position:"relative"}),this.l(this.canvas,{"z-index":"20",position:"relative",display:"block",margin:"0 auto"}),window.addEventListener("resize",function(){return(this.i.offsetWidth!==this.i.size.width||this.i.offsetHeight!==this.i.size.height)&&(this.canvas.width=this.i.size.width=this.i.offsetWidth,this.canvas.height=this.i.size.height=this.i.offsetHeight,clearTimeout(this.m),void(this.m=setTimeout(function(){this.o=[];for(var t=0;t<this.canvas.width*this.canvas.height/this.options.density;t++)this.o.push(new s(this));this.options.interactive&&this.o.push(this.p),requestAnimationFrame(this.update.bind(this))}.bind(this),500)))}.bind(this)),this.o=[];for(var t=0;t<this.canvas.width*this.canvas.height/this.options.density;t++)this.o.push(new s(this));this.options.interactive&&(this.p=new s(this),this.p.velocity={x:0,y:0},this.o.push(this.p),this.canvas.addEventListener("mousemove",function(t){this.p.x=t.clientX-this.canvas.offsetLeft,this.p.y=t.clientY-this.canvas.offsetTop}.bind(this)),this.canvas.addEventListener("mouseup",function(t){this.p.velocity={x:(Math.random()-.1)*this.options.velocity,y:(Math.random()-.1)*this.options.velocity},this.p=new s(this),this.p.velocity={x:0,y:0},this.o.push(this.p)}.bind(this))),requestAnimationFrame(this.update.bind(this))},i.prototype.update=function(){this.g.clearRect(0,0,this.canvas.width,this.canvas.height),this.g.globalAlpha=6;for(var t=0;t<this.o.length;t++){this.o[t].update(),this.o[t].h();for(var i=this.o.length-1;i>t;i--){var s=Math.sqrt(Math.pow(this.o[t].x-this.o[i].x,2)+Math.pow(this.o[t].y-this.o[i].y,2));s>120||(this.g.beginPath(),this.g.strokeStyle=this.options.particleColor,this.g.globalAlpha=(120-s)/120,this.g.lineWidth=1,this.g.moveTo(this.o[t].x,this.o[t].y),this.g.lineTo(this.o[i].x,this.o[i].y),this.g.stroke())}}0!==this.options.velocity&&requestAnimationFrame(this.update.bind(this))},i.prototype.setVelocity=function(t){return"fast"===t?4:"slow"===t?.33:"none"===t?0:.66},i.prototype.j=function(t){return"high"===t?5e3:"low"===t?2e4:isNaN(parseInt(t,10))?1e4:t},i.prototype.l=function(t,i){for(var s in i)t.style[s]=i[s]},i});
var canvasDiv = document.getElementById("material"),
    options = {
        particleColor: "#eee",
        interactive: !0,
        speed: "fast",
        density: "medium"
    },
    particleCanvas = new ParticleNetwork(canvasDiv, options);

//]]></script>

Setelah semua dipastekan, pastikan teman-teman sudah save templatenya. Dan lihat hasilnya, semoga berhasil dan puas. Demikianlah Cara Membuat Tampilan Home Page Seperti Milik Blog KodeJarwo

NB: Jangan lupa ganti deskripsi dan kategori atau semacamnya sesuai keinginan teman-teman. Adapun jika teman-teman ingin mengganti warna tinggal lihat di style dan cari kode #004d4d atau yang lainnya sesuka teman-teman. Dan untuk mengubah icon, teman-teman bisa merubahnya pada script yang terletak di atas </body> untuk caranya teman-teman bisa lihat tutorial dari kak Igniel disini https://www.igniel.com/2017/09/cara-pasang-icon-svg.html

Jika teman-teman masih kesulitan, bisa bertanya pada kolom komentar dibawah ini, atau bisa langsung saja download template buatan saya (hasil redisgn lebih tepatnya) dengan klik disini.

Artikel Lainnya

Disqus CommentClick HereHide

0 komentar untuk Cara Membuat Tampilan Home Page Seperti Milik Blog KodeJarwo