I LOVE TO DESIGN

Hi

image
Hello,

I'm Rivon Peruzzi

Berpengalaman di bidang desain grafis. Menguasai aplikasi desain, Photoshop, Adobe Illustrator, dan CorelDRAW.

Teliti, Bertanggung Jawab, Siap bekerja dibawah tekanan individu / kelompok menjadi keunggulan yang saya dapat kontribusikan untuk Perusahaan Anda.


Education
SMK BOROBUDUR

IPA


Experience
GLOBAL GRAFIKA

Designer, Deskprint

BANGUN JAYA PRINTING

Designer, Deskprint


My Skills
Microsoft Office
CorelDRAW
Adobe Illustrator
Adobe Photoshop

764

Awards Won

1664

Happy Customers

2964

Projects Done

1564

Photos Made

WHAT CAN I DO

Web Design

Responsive Design

Graphic Design

Clean Code

Photographic

Unlimited Support

SOME OF WORK

Cara Membuat Efek Animasi Page Loading di Blog

Cara Membuat Efek Animasi Page Loading di Blog - Efek animasi pada blog ini merupakan suatu efek page loading yang terbaru namun sangat sederhana sekali, tetapi animasi page loading di blog ini sangat keren sekali dengan efek-efek animasi loading yang begitu menarik dan banyak pilihan efek loadingnya. Banyak sekali website yang menyediakan ajax loading page untuk blog, dan saya juga akan membagikan beberapa efekanimasi loading page yang saya ambil dari salah satu web penyedia ajax animasi page loading.



Untuk membuat efek animasi page loading di blog kita hanya menggunakan sebuah CSS dan jQuery agar bisa menjadi sebuah efek animasi page loading di blog. Dengan menggunakan efek animasi page loading ini tidak akan terlalu memberatkan Loading Blog Anda, sehingga Anda tidak perlu khawatir dengan penggunaan efek animasi page loading pada blog Anda.

Untuk itu blog graphic design akan membagikan sebuah tutorial membuat animasi loading pada blog terbaru 2014, dengan memberikan efek animasi loading maka akan terlihat begitu indah dan keren ketika Anda atau pengunjung blog sedang berada pada blog Anda lalu berpindah halaman maka efek animasi loading page ini akan terlihat. Baiklah langsung saja bagi Anda yang ingin membuat atau menambahkan efek animasi loading page di blog terbaru silahkan baca tutorialnya dibawah ini :

1. Masuk ke Blogger.com
2. Klik Template => Edit HTML
3. Cari kode ]]</b:skin> atau </style>
4. Copy kode css dibawah ini, lalu Paste diatas kode ]]</b:skin> atau </style>
/* Loading Page */
#page-loader{position:fixed!important;position:absolute;top:0;right:0;bottom:0;left:0;z-index:999999;background:#fff url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheaRWEM_zX4iBAANHNuxXn69TwHlObm0LqPbp_PqlFOqjDp8twnL2IDGn4bn8CT-RqwSQe6STQ56gOngj2lraRrFfJ8uMEX-TthJR6m5GMJbFv_oNppM4YPlahcKNOw_APzlOuJ1XEOQqa/s128-no/loading.GIF&#39;) no-repeat 50% 50%;padding:1em 1.2em;display:none}
5. Cari kode </body>
6. Copy kode jQuery dibawah ini, lalu Paste diatas kode </body>
<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="page-loader"></div>');
$(window).on("beforeunload", function() {
$('#page-loader').fadeIn(1000).delay(9000).fadeOut(1000);
});
//]]>
</script>
7. Klik Simpan Template

Catatan :
- Anda bisa mengganti efek animasi loading dengan mengunjungi website ini http://preloaders.net.
- Anda juga bisa mengganti efek animasi loading yang sudah saya siapkan dibawah.

Kumpulan Efek Animasi Loading Page .Gif

Inilah beberapa efek ajax animasi loading page yang saya ambil dari salah satu web penyedia ajax loading page, silahkan bisa Anda pilih dibawah ini :

Efek Animasi Loading Page 1
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuncSLD3rChzx1UB7dFIe0hAc6oa9b1ENwskhNHLKK06WReC302r9JV7rGWSRt7AULHnQWWTEhKmOZTq4ncGZYDbO9mXjcWXI6jj3CRC3qGYGjPEh10wfbKundwUvwAixznVHD71bNWr4/s128-no/Loading1.GIF


Efek Animasi Loading Page 2
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPYcDREI0Mc6K395lVD2baXdXldrDnjqECt7HKrreWp4iA8gAsNARmSf86m_3UEjYLEn2WOMchLt6hOHWHWMl6aZRpOQb7QGuyr179fxMm4r2CgWJsA_y8MjX-qZv3Ufaiw5l19CaAMqo/s128-no/Loading2.GIF

Efek Animasi Loading Page 3
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVr5tl_vUb20kO6b3CUnsr4yHGlTzsIw5L1ttNe-jMiI9slE1Y14DpBCep7bdjJCR8mALSppt_oVEdLIcYx2egD8r7gUSCMwDfMRJkahtp5eeHvMjL7FPlfh1AINzZuUBn61gAlGXNdkA/s128-no/Loading3.GIF

Efek Animasi Loading Page 4
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCDtxJHVpBGkuKS8EwusCBurUcij1G4MJ_hVHcK7_-E38fLLqbPSVYYnC1s9ePoFb-eVfGKowtDhl-jAH6CLiXweVnr0AXqJZ5xCJXhHauvL9OTK77Utk94xa-fY1PBsgFw54f9iLYwNI/s128-no/Loading4.GIF

Efek Animasi Loading Page 5
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbueb1RG5QTgSk01ukTiS41bWu2a36MO-9yXHyzcZ_Pux37fWNLpZT1KiDY82Qc914RI1XVzL_wJQd_2QnzMvYM-GpaqNLtm5XnhiYJNXvnBW-YadXIrp1QKpdCOkuI7cxFpH29DyN9Uc/w124-h128-no/Loading5.GIF

Efek Animasi Loading Page 6
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi55AvCQzerrDKI3Oz5fUTzWf5Rivtt6OvdSd1CeucmptaIgsB13QJ81bUs8aqwXVnjohmdE2MEmvvqu-K7ah1tH3RQWn3F18DPAZRZA6qZRPFGpTmZ6mkw-4b26f_D2PBl5Seh16A4kz8/s128-no/Loading6.GIF

Efek Animasi Loading Page 7
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbwidLZ6dqTiEFGaovY3m45pZ8ALc6sGfDYxj6ZXCtOIJsJV-HzBK__mijs8yN8Tk-OwbNW2xuqQa0cI90yVTVPCZ6D4a7iZZSLC-d-TCGymsj677l39Zb2T93OxU1WCsatkupnz9q9VU/s128-no/Loading7.GIF

Efek Animasi Loading Page 8
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl1E2wWpEpDuQhvWITNqkyrTXatkDx-qUob64ZBUaLATQN37PH2tDm9-5SabPHbElguu8j9k8DPQg99Dl7Zc0fywC6Zl2Qo9zU_F-EkUjALMK-kH1pPKEmQ51iMijfDrl3jzZopNSkBSY/w128-h54-no/Loading8.GIF

Efek Animasi Loading Page 9
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgj_lPjsRUoxWh-x1tTa766awKQRjq4QSOLkj3QuKiyXOUf_V7TMzpc-5vGC-ETJjBy6NLzH661u98Ykh_oA6aRamMUgOHwzlZueUuAm2Dw6PsLeOyVtgDSipgcqeHi9xbuA-VgA5-NLV0/s128-no/Loading9.GIF

Efek Animasi Loading Page 10
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhamE-7EGszeQYi7n6oVkFG7NSQ02S5ROAuLBmJgpZgYqoo8X_urO_XlkK3ltdVQSkJ2NjxyFTVWGkuKk_jWmtdMwA5XYnEZ5v7CWfyssxTaP_A54bFAC0xXiB68ayMSQrhGDcJP33P_Sc/w128-h40-no/Loading10.GIF

Sekian artikel mengenai Cara Membuat Efek Animasi Page Loading di Blog. Kurang lebihnya mohon maaf.
Semoga Bermanfaat...

Membuat Pesan Selamat datang pada Blog

Pesan selamat datang berguna untuk memberikan ucapan salam pada pengunjung yang datang pada blog kita. Selain selamat datang, kita juga bisa memberi salam berpisah pada pengunjung pada saat akan meninggalkan blog kita.
Bila anda berminat silahkan anda ikuti langkah - langkah berikut :

1. Silahkan anda Login Blog anda

2. Pilih Layout
3. KlikEdit HTML
4. Lalu masukkan kode dibawah ini dibawah kode <head>

<script type='text/javascript'> alert("Selamat datang di blog Cara buat web gratis..., Jangan lupa komentarnya ya..")</script> 


Nah..., kita sudah membuat ucapan selamat datang. Dan seperti yang saya sebutkan diatas, kita juga bisa memberi ucapan selamat berpisah atau pesan apa saja, ketika pengunjung  meninggalkan blog kita.
Caranya sama dengan yang diatas, kita tinggal  taruh kode dibawah ini setelah kode selamat datang yang anda taruh tadi :
 
<script type='text/javascript'> // goodbye alert function goodbye(){alert(' Jangan lupa mampir lagi ya.... ');} parent.window.onunload=goodbye;</script> 

OK....Silahkan Coba dan Semoga Bermanfaat

Cara Memodifikasi Gambar Di Blog Dengan Menambah Efek Zoom

Dengan Anda Menggunakan
Efek Zoom Ini Dan Bisa Juga Memperbagus Tampilan Artikel




1. Masuk Ke Akun Blogger Anda

2. Klik Bagian HTML --> Edit HTML

3. Cari Kode ]]></b:skin>

4. Taruh Kode Dibawah Ini Tepat Diatas Kode]]></b:skin>

 .post img:hover { -o-transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transform: scale(1.3); -o-transform: scale(1.3); -webkit-transform: scale(1.3); }
5. Simpan Template

Merubah Tampilan Scrollbar

Merubah Tampilan Scrollbar Blog dengan JQuery - Merubah tampilan scrollbar pada blog terkadang diperlukan untuk menyesuaikan dengan desain blog itu sendiri. Perlu atau tidak perlunya tentunya tergantung pemilik blog itu sendiri, apakah ingin dibuat custom atau tetap standar.



Tutorial tentang merubah atau mengganti scrollbar sebetulnya sudah banyak, namun selama melakukan pencarian, kebanyakan menggunakan menggunakan CSS seperti ini :

::-webkit-scrollbar{width:6px;background:#444}
::-webkit-scrollbar-thumb{background-color:#222;border-radius:3px}

Paste diatas tinggal Anda ganti saja beberapa code yang saya kasih warna merah, ini berguna untuk mengganti warnanya. Kalau Anda bisa ganti semua kenapa tidak di ganti tuh kode?


Dengan menggunakan CSS di atas, hanya support pada browser dengan komponen dasar WebKit seperti Safari, Chrome, browser iOS, Android dan Blackberry. Tetapi tidak support dengan browser lainnya seperti Mozilla, Opera dll.

Social sharing Gadget with Egg Sliding Effect

 
1. Go to Blogger dashboard --> Template --> Edit Html (Tick Expand widget template).

2. Find(Ctrl+F) </head> and paste the following code just above it.
<script src='http://w.sharethis.com/gallery/shareegg/shareegg.js' type='text/javascript'/><script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/><script type='text/javascript'>stLight.options({publisher: &quot;bea50586-2b9f-448d-947a-01385f28e305&quot;, onhover:false}); </script><link href='http://w.sharethis.com/gallery/shareegg/shareegg.css' media='screen' rel='stylesheet' type='text/css'/>
3. Now find for </body> and place the following code just above it.
<div style='position: fixed; bottom: 2%; left: 2%;'><div class='shareEgg' id='shareThisShareEgg'/></div><script type='text/javascript'>stlib.shareEgg.createEgg(&#39;shareThisShareEgg&#39;, [&#39;facebook&#39;,&#39;twitter&#39;,&#39;googleplus&#39;,&#39;linkedin&#39;,&#39;blogger&#39;,&#39;stumbleupon&#39;,&#39;sharethis&#39;],{title:&#39;<data:blog.pageTitle/>&#39;,url:&#39;<data:blog.url/>&#39;,theme:&#39;shareegg&#39;});</script>
4. Save your Template.

Start Work With Me

Contact Us
Rivon Peruzzi
0857 7606 6655
Ciganjur, Indonesia

Welcome To Basil

Pages

Recent Post

A Theme For