Populer Post

Loading...

Cara Buat Home Page Mirip Blog Kode Jarwo

Cara Buat Home Page Mirip Blog Kode Jarwo
Posted by Yudha Wahyu Pratama

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'>
<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>
Jika sudah kalian bisa cari lagi kode </body> dan pastekan lagi kode dibawah ini tepat diatas kode </body>.



<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>

Dan terakhir simpan template dan lihat hasilnya dari Cara buat Home Page Mirip Blog Kode Bang Jarwo



2 Responses to "Cara Buat Home Page Mirip Blog Kode Jarwo"

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

DMCA.com Protection Status