Cara Mudah Membuat Efek Hati Di Blog

Efek Hati Bertaburan

Saat ini ada banyak situs dan blog yang punya tampilan bagus, tetapi salah satu kelemahan situs atau blog yang punya tampilan bagus dan modern adalah kecepatan loading, memang tampilannya bagus dan modern tetapi dalam kecepatan loading, template jadul lah pemenangnya.

Salah satu yang membuat template lama cepat loading adalah tampilan template lama itu sendiri, karena template lama memiliki tampilan yang simple dan juga terbatas. Inilah yang membuat kebanyakan template lama lebih cepat loading daripada template baru yang terlihat cantik dan modern.

Bagi kalian yang masih punya blog yang punya tampilan lama atau jadul, kali ini saya ingin memberi tutorial lagi, tutorial kali ini cocok bagi kalian yang masih punya blog jadul yang isinya cuma untuk senang-senang saja.

Tutorial kali ini adalah Membuat Efek Hati Bertaburan Pada Blogger.

Cara kerja atau tampilan efek ini adalah setiap kalian mengklik pada blog kalian, efek hati akan muncul.

Efek hati bertaburan ini menggunakan javascript, yang pasti tidak akan memberatkan blog kalian, karena ini hanya efek simple saja.

Efek ini mungkin agak terlihat jadul, tetapi efek ini cocok bagi kalian yang punya blog yang punya tampilan jadul atau lama. Jika kalian tertarik silahkan simak tutorial berikut.

Tutorial Buat Efek Hati Blogger

• Pertama, kalian pergi ke menu tata letak/layout.
• Lalu, tambahkan gadget html/javascript.
• Dan masukkan kode berikut untuk isinya dan biarkan namanya kosong.

<script type='text/javascript'>  
 //<![CDATA[  
 !function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);  
 //]]>  
    </script>

• Terakhir, klik simpan dan lihat perubahannya.

Akhir kata

Nah, mungkin sekian itu saja untuk tutorial kali ini.

Semoga bermanfaat. Jika kalian punya pertanyaan atau saran silahkan komen dibawah. Terimakasih.