Cara Buat Home Page Mirip Blog Kode Jarwo
Cara buat Home Page Mirip Blog Kode Bang Jarwo Siapa yang tidak kenal bang jarwo selain template template keren yang dibuat nya beliau juga membuka jasa untuk mempercepat page (page speed) yang sangat saya rekomendasikan buat kalian yang ingin punya blog yang cepat saat diakses.
Sekarang kita tidak bahas bang jarwo nya tapi kita bahas tampilan keren yang ada di homepage milik bang jarwo, silakan buat kalian yang ingin mempercantik blog kalian lagi seperti punya bang jarwo ikuti langkah langkah dibawah ini.
Pertama kalian buka dashboard blogger kalian jika sudah kalian pergi ke menu tema dan kalian klik edit html.
Jika sudah kalian cari kode </head> jika sudah ketemu silakan kalian copy kode dibawah ini tepat diatas kode </head>
<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>Jika sudah silakan kalian cari lagi kode </header> dan silakan kalian copy kode dibawah ⬇ ini dan pastekan tepat dibawah kode </header>
<b:if cond='data:blog.url == data:blog.homepageUrl'>Jika sudah kalian bisa cari lagi kode </body> dan pastekan lagi kode dibawah ini tepat diatas kode </body>.
<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>
<script>
(function printMsg() {var node = document.getElementById("loading");
node.innerHTML = "<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>";
})();
(function printMsg() {var node = document.getElementById("seo");
node.innerHTML = "<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>";
})();
(function printMsg() {var node = document.getElementById("tanya");
node.innerHTML = "<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>";
})();
(function printMsg() {var node = document.getElementById("template");
node.innerHTML = "<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>";
})();
</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>Dan terakhir simpan template dan lihat hasilnya dari Cara buat Home Page Mirip Blog Kode Bang Jarwo
Yudha Wahyu Pratama
Humanity Balanced Religion ⤵️ Success Before 30 Mahasiswa, Investor , Pecinta Hewan,IT & Alam, Aktivis
